Chart behaves identical whether it's dumb (no state) or whether it has state
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Idoneità per principianti
- 35/100
- Tipo di issue
- Documentazione
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Ferma
- Stack tecnologico
- javascript, react
- Ambito
- data-visualization, documentation
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.
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 ?
- Lingua principale
- JavaScript
- Stelle
- 1.1k
- Fork
- 138
- Merge medio
- 3g 2h
- PR unite (30g)
- 4
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.
Altre issue di plotly/react-plotly.js
-
P3 plotly-internal size: 1 task
Difficoltà 3/5 1-2 giorni Idoneità per principianti 45/100
plotly/react-plotly.js#386 ·
-
enhancement P3 size: 1
Difficoltà 3/5 1-2 giorni Idoneità per principianti 65/100
plotly/react-plotly.js#380 · 7 commenti ·
-
Difficoltà 4/5 3-5 giorni Idoneità per principianti 48/100
plotly/react-plotly.js#358 · 1 commento ·
-
Difficoltà 4/5 3-5 giorni Idoneità per principianti 35/100
plotly/react-plotly.js#354 ·
-
Difficoltà 3/5 1-2 giorni Idoneità per principianti 30/100
plotly/react-plotly.js#353 · 1 commento ·
Tutte le issue di plotly/react-plotly.js
Issue simili
-
bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 76/100
avniproject/avni-client#2135 ·
-
automated broken-link
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 85/100
-
agent/security hive/hosted-available-lke648397-260827-5n31 security
Difficoltà 2/5 1-3 ore Idoneità per principianti 84/100
-
enhancement
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100
babalae/bettergi-scripts-list#3674 ·
-
A-Release-Notes C-Editing D-Modest S-Ready-For-Implementation
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
bevyengine/bevy-website#2595 ·