Chart behaves identical whether it's dumb (no state) or whether it has state
Personne n'a encore pris cette issue.
Évaluation
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Accessibilité débutants
- 35/100
- Type d'issue
- Documentation
- Clarté
- Plutôt claire
- Activité
- À l'abandon
- Stack technique
- javascript, react
- Domaine
- data-visualization, documentation
Piste de recherche
L’issue ne mentionne aucun fichier du dépôt ni aucun test ; commencez par localiser le passage de la documentation concernant le composant « dumb » et comparez-le aux deux exemples React. Reproduisez le comportement signalé de pan, zoom, rerender et resize, puis clarifiez l’avertissement ou documentez la distinction attendue une fois le comportement prévu confirmé.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
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 ?
- Langage dominant
- JavaScript
- Étoiles
- 1.1k
- Forks
- 138
- Merge moyen
- 3 j 2 h
- PR mergées (30 j)
- 4
Guide de contribution
Aucun guide de contribution indexé pour ce dépôt
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Autres issues de plotly/react-plotly.js
-
P3 plotly-internal size: 1 task
Difficulté 3/5 1-2 jours Accessibilité débutants 45/100
plotly/react-plotly.js#386 ·
-
enhancement P3 size: 1
Difficulté 3/5 1-2 jours Accessibilité débutants 65/100
plotly/react-plotly.js#380 · 7 commentaires ·
-
Difficulté 4/5 3-5 jours Accessibilité débutants 48/100
plotly/react-plotly.js#358 · 1 commentaire ·
-
Difficulté 4/5 3-5 jours Accessibilité débutants 35/100
plotly/react-plotly.js#354 ·
-
Difficulté 3/5 1-2 jours Accessibilité débutants 30/100
plotly/react-plotly.js#353 · 1 commentaire ·
Toutes les issues de plotly/react-plotly.js
Issues similaires
-
Edit: CW+ Ouvertechannels:edit check:passed
Difficulté 2/5 1-3 heures Accessibilité débutants 68/100
-
스택 PR 머지 시 하위 PR base 재지정 단계 부재 Ouverte
Difficulté 2/5 1-3 heures Accessibilité débutants 78/100
idean3885/claude-ops-agent#521 ·
-
bug
Difficulté 2/5 1-3 heures Accessibilité débutants 76/100
avniproject/avni-client#2135 ·
-
automated broken-link
Difficulté 1/5 Moins d'une heure Accessibilité débutants 85/100
-
agent/security hive/hosted-available-lke648397-260827-5n31 security
Difficulté 2/5 1-3 heures Accessibilité débutants 84/100