plotly / plotly/react-plotly.js
Chart behaves identical whether it's dumb (no state) or whether it has state
Nessuno ha ancora preso questa issue.
- Lingua principale
- JavaScript
- Stelle
- 1.1k
- Fork
- 138
- Merge medio
- 3g 2h
- PR unite (30g)
- 4
Descrizione
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 ?
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
L’issue non indica alcun file del repository né alcun test; inizia individuando il passaggio della documentazione relativo al componente “dumb” e confrontalo con i due esempi React. Riproduci il comportamento segnalato di pan, zoom, rerender e resize, quindi chiarisci l’avviso oppure documenta la distinzione prevista una volta confermato il comportamento atteso.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, react
- Ambito
- data-visualization, documentation
- Tipo di issue
- Documentazione
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100