Open claresloggett opened 1 year ago
The visualization should update when the spec
prop is changed. Here's a simple example where you can click a button to update the bar color.
Do you have a self-contained example where that isn't happening? It seems like it's a bug.
import React, { useState } from 'react';
import { VegaLite } from 'react-vega';
const initialSpec = {
mark: 'bar',
encoding: {
x: { field: 'category', type: 'nominal' },
y: { field: 'value', type: 'quantitative' },
},
data: {
values: [
{ category: 'A', value: 1 },
{ category: 'B', value: 2 },
{ category: 'C', value: 3 },
]
},
};
const rand256 = () => Math.floor(Math.random() * 256);
const App = () => {
const [spec, setSpec] = useState(initialSpec);
const updateSpec = () => {
const updatedSpec = JSON.parse(JSON.stringify(initialSpec));
updatedSpec.encoding.color = {value: `rgb(${rand256()}, ${rand256()}, ${rand256()})`};
setSpec(updatedSpec);
};
return (
<div>
<button onClick={updateSpec}>Update color</button>
<VegaLite spec={spec} />
</div>
);
};
export default App;
This is (I think) a question rather than a bug report.
I've currently got a setup where I'd like to be able to modify the spec and the data on the fly. So I have something like
This is obviously a snippet cut out of the code, but hopefully gives the idea.
If I call
setSpec()
during runtime, I can observe that the state has really changed (I can trigger a useEffect hook that's dependent onspec
), but the plot does not re-render to use the new spec. Should it? If not, what's the right way to cause the VegaLite component to re-render?