plotly / plotly/react-plotly.js
Chart behaves identical whether it's dumb (no state) or whether it has state
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.1k
- Forks
- 138
- Avg merge
- 3d 2h
- Merged PRs (30d)
- 4
Description
The docs state that: This is a "dumb" component that doesn't merge its internal state with any updates. This means that if a user interacts with the plot, by zooming or panning for example, any subsequent re-renders will lose this information unless it is captured and upstreamed via the onUpdate callback prop.
But the following two pieces of code behave identically:
- without state:
function StackedAreaChart({) {
const layout = {
showlegend: true,
legend: {
x: 0,
y: -0.15,
orientation: "h",
traceorder: "normal",
yanchor: "top",
},
autosize: true,
margin: { pad: 10, b: 10, l: 40, r: 40, t: 80 },
};
const plotData = [...someData]
return (
<div style={{ height: 650 }} data-cy="stacked-area-chart">
<Plot
data={plotData}
layout={layout}
style={{ width: "100%", height: "100%" }}
useResizeHandler
/>
</div>
);
}
export default StackedAreaChart;
- and with state:
function StackedAreaChart() {
const [chart, setChart] = useState({
data: [],
layout: {
showlegend: true,
legend: {
x: 0,
y: -0.15,
orientation: "h",
traceorder: "normal",
yanchor: "top",
},
xaxis: { range: [2000, 2019] },
autosize: true,
margin: { pad: 10, b: 10, l: 40, r: 40, t: 80 },
},
config: { responsive: true },
});
useEffect(() => {
const plotData = [...someData];
setChart((prevState) => ({
...prevState,
data: [...plotData],
}));
}, [setChart, data]);
return (
<div style={{ height: 650 }} data-cy="stacked-area-chart">
<Plot
data={chart.data}
layout={chart.layout}
config={chart.config}
style={{ width: "100%", height: "100%" }}
useResizeHandler
/>
</div>
);
}
export default StackedAreaChart;
I can pan and zoom and then double click to return to its initial state on both codes. I can also modify the viewport width, making the chart to resize, while zoomed in and the chart still behaves perfectly.
I don't understand the warning in the documentation.
Am I doing something wrong ?
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue names no repository file or test; start by locating the documentation passage about the “dumb” component and compare it with the two React examples. Reproduce the reported pan, zoom, rerender, and resize behavior, then clarify the warning or document the expected distinction once the intended behavior is confirmed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- data-visualization, documentation
- Issue type
- Documentation
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100