plotly / plotly/react-plotly.js
Chart behaves identical whether it's dumb (no state) or whether it has state
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- JavaScript
- Sterne
- 1.1k
- Forks
- 138
- Ø Merge
- 3 T. 2 Std.
- Gemergte PRs (30 T.)
- 4
Beschreibung
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 ?
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Das Issue nennt keine Repository-Datei und keinen Test; beginne damit, die Dokumentationspassage über die „dumb“-Komponente zu finden und sie mit den beiden React-Beispielen zu vergleichen. Reproduziere das gemeldete Pan-, Zoom-, Rerender- und Resize-Verhalten und kläre die Warnung oder dokumentiere die erwartete Unterscheidung, sobald das beabsichtigte Verhalten bestätigt ist.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react
- Bereich
- data-visualization, documentation
- Issue-Typ
- Dokumentation
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100