Chart behaves identical whether it's dumb (no state) or whether it has state
Dieses Issue hat noch niemand übernommen.
Bewertung
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Anfängerfreundlichkeit
- 35/100
- Issue-Typ
- Dokumentation
- Klarheit
- Größtenteils klar
- Aktivitätsstatus
- Veraltet
- Tech-Stack
- javascript, react
- Bereich
- data-visualization, documentation
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.
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 ?
- Vorherrschende Sprache
- JavaScript
- Sterne
- 1.1k
- Forks
- 138
- Ø Merge
- 3 T. 2 Std.
- Gemergte PRs (30 T.)
- 4
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus plotly/react-plotly.js
-
P3 plotly-internal size: 1 task
Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 45/100
plotly/react-plotly.js#386 ·
-
enhancement P3 size: 1
Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 65/100
plotly/react-plotly.js#380 · 7 Kommentare ·
-
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 48/100
plotly/react-plotly.js#358 · 1 Kommentar ·
-
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 35/100
plotly/react-plotly.js#354 ·
-
Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 30/100
plotly/react-plotly.js#353 · 1 Kommentar ·
Alle Issues in plotly/react-plotly.js
Ähnliche Issues
-
Edit: CW+ Offenchannels:edit check:passed
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 68/100
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 78/100
idean3885/claude-ops-agent#521 ·
-
bug
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 76/100
avniproject/avni-client#2135 ·
-
automated broken-link
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 85/100
-
agent/security hive/hosted-available-lke648397-260827-5n31 security
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 84/100