1

I am trying to use vega-lite in react. I tried below (check on codesandbox) and its working:

Attempt 1 - data hardcoded in spec (working)

radialChart.js

import { createClassFromSpec } from "react-vega";

export const RadialChart = createClassFromSpec({
  spec: {
    $schema: "https://vega.github.io/schema/vega-lite/v5.json",
    data: {
      values: [
        {
          "i-type": "A",
          count: 3,
          color: "rgb(121, 199, 227)"
        },
        {
          "i-type": "B",
          count: 20,
          color: "rgb(26, 49, 119)"
        },
        { "i-type": "C", count: 24, color: "rgb(18, 147, 154)" }
      ]
    },
    description: "A simple pie chart with labels.",
    encoding: {
      theta: { field: "count", type: "quantitative", stack: true },
      color: { field: "color", type: "nominal", legend: null, scale: null }
    },
    layer: [
      {
        mark: { type: "arc", outerRadius: 80 }
      }
    ]
  }
});

index.js

import { RadialChart } from "./radialChart.js";

import "./styles.css";
function App() {
  return (
    <div className="App">
      <h1>react-vega-lite test</h1>
      <RadialChart />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

It renders:

enter image description here

Attempt 2 - dynamic data as suggested by docs (not work,g)

However, as you can see in attempt 1, data is hardcoded in radialChart.js. But I wanted to dynamically pass the data. So, I checked the docs and found this. It suggests following changes:

radialChart.js

...
"data": [{ "name": "table" }],
...

radialData.js

const data = [ ... whole data array goes here ... ];

export default data;

index.js

import radialData from "./radialData";
//...
<RadialChart data={{ table: radialData }} />

However its not working. It gives following error:

Error: Unrecognized data set: table
    at error (https://d78mhq.csb.app/node_modules/vega-util/build/vega-util.module.js:517:9)
    at dataref (https://d78mhq.csb.app/node_modules/vega-view/build/vega-view.module.js:75:31)
    at View.change (https://d78mhq.csb.app/node_modules/vega-view/build/vega-view.module.js:86:19)
    at updateSingleDatasetInView (https://d78mhq.csb.app/node_modules/react-vega/esm/utils/updateSingleDatasetInView.js:13:12)
    at eval (https://d78mhq.csb.app/node_modules/react-vega/esm/utils/updateMultipleDatasetsInView.js:9:43)
    at Array.forEach (<anonymous>)
    at updateMultipleDatasetsInView (https://d78mhq.csb.app/node_modules/react-vega/esm/utils/updateMultipleDatasetsInView.js:8:21)
    at eval (https://d78mhq.csb.app/node_modules/react-vega/esm/Vega.js:66:50)
    at eval (https://d78mhq.csb.app/node_modules/react-vega/esm/VegaEmbed.js:52:13)

and a warnings:

WARN Infinite extent for field "count_end": [Infinity, -Infinity] 
WARN Infinite extent for field "count_end": [Infinity, -Infinity]

Here is the codesandbox. Here is the line in github where it is breaking which corresponds to line 86 in this bundled file. Whats exactly going wrong here?

Update

Even passing data directly to RadialChart doesn't work (sandbox link):

<RadialChart
    data={{
      values: [
        {
          "i-type": "A",
          count: 3,
          color: "rgb(121, 199, 227)"
        },
        {
          "i-type": "B",
          count: 20,
          color: "rgb(26, 49, 119)"
        },
        { "i-type": "C", count: 24, color: "rgb(18, 147, 154)" }
      ]
    }}
  />
Mahesha999
  • 22,693
  • 29
  • 116
  • 189

1 Answers1

0

I guess the doc specifies it incorrectly, it should be have been:

"data": { "name": "table" },

instead of

"data": [{ "name": "table" }],

in radialChart.js.

Changing this fixes the issue as you can see in the corresponding sandbox, the visualization is rendered.

Now that I have resolved it myself, I will be happy if someone tells me how one can come up with this from the source code of react-vega.

Mahesha999
  • 22,693
  • 29
  • 116
  • 189