无法在反应中嵌入 vega-lite 可视化

Question

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:

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)" }
      ]
    }}
  />

Answer 1

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.