Approach#1 in your documentation is not working

[mrcongliu]

Approach#1 Create class from spec, then get a React class to use cannot render anything in React App.

Please see whether you can reproduce this issue, if so, please fix your documentation. Thanks.

My file structure: -index.js -App.js -Components/BarChart.js

My BarChart.js:

import { createClassFromSpec } from 'react-vega';

const spec = {
  $schema: 'https://vega.github.io/schema/vega/v5.json',
  "width": 400,
  "height": 200,
  "data": [{ "name": "table" }],
  "signals": [
    {
      "name": "tooltip",
      "value": {},
      "on": [
        {"events": "rect:mouseover", "update": "datum"},
        {"events": "rect:mouseout",  "update": "{}"}
      ]
    }
  ],
  scales: [
    {
      name: 'xscale',
      type: 'band',
      domain: { data: 'table', field: 'category' },
      range: 'width',
    },
    {
      name: 'yscale',
      domain: { data: 'table', field: 'amount' },
      nice: true,
      range: 'height',
    },
  ],

  axes: [
    { orient: 'bottom', scale: 'xscale' },
    { orient: 'left', scale: 'yscale' },
  ],

  marks: [
    {
      type: 'rect',
      from: { data: 'table' },
      encode: {
        enter: {
          x: { scale: 'xscale', field: 'category', offset: 1 },
          width: { scale: 'xscale', band: 1, offset: -1 },
          y: { scale: 'yscale', field: 'amount' },
          y2: { scale: 'yscale', value: 0 },
        },
        update: {
          fill: { value: 'steelblue' },
        },
        hover: {
          fill: { value: 'red' },
        },
      },
    },
    {
      type: 'text',
      encode: {
        enter: {
          align: { value: 'center' },
          baseline: { value: 'bottom' },
          fill: { value: '#333' },
        },
        update: {
          x: { scale: 'xscale', signal: 'tooltip.category', band: 0.5 },
          y: { scale: 'yscale', signal: 'tooltip.amount', offset: -2 },
          text: { signal: 'tooltip.amount' },
          fillOpacity: [{ test: 'datum === tooltip', value: 0 }, { value: 1 }],
        },
      },
    },
  ],
}

const BarChart = createClassFromSpec('BarChart', spec);

export default BarChart;

My App.js:

import React from 'react';
import BarChart from './Components/BarChart'

const barData = {
  table: [
    { category: 'A', amount: 28 },
    { category: 'B', amount: 55 },
    { category: 'C', amount: 43 },
    { category: 'D', amount: 91 },
    { category: 'E', amount: 81 },
    { category: 'F', amount: 53 },
    { category: 'G', amount: 19 },
    { category: 'H', amount: 87 },
  ],
}

function handleHover(...args){
  console.log(args);
}

const signalListeners = { hover: handleHover };

function App() {
  return (
    <BarChart data={barData} signalListeners={signalListeners} />
  );
}

export default App;

My index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

[domoritz]

Thanks for the report. Can you provide a minimal reproducible example that demonstrates the issue?

[mrcongliu]

Sure, here it is.

https://replit.com/@CongLiuCN/ReactVegaApproach1?v=1

[domoritz]

That's not a minimal example. Try to reduce the code to the essential to demonstrate the problem.

[liuhenry]

The createClassFromSpec API seems to be a little different from the documentation. Try this instead:

const BarChart = createClassFromSpec({ mode: 'vega', spec: spec });

[mrcongliu]

Thanks, @liuhenry, your suggestion worked! Probably we should update the documentation. But for now, I'll close this issue.