plotly / plotly/react-plotly.js

Chart behaves identical whether it's dumb (no state) or whether it has state

Abierto
#309 0 comentarios 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Lenguaje dominante
JavaScript
Estrellas
1.1k
Forks
138
Merge medio
3 d 2 h
PR fusionados (30 d)
4

Descripción

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 ?

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

El issue no menciona ningún archivo del repositorio ni ninguna prueba; empieza por localizar el pasaje de la documentación sobre el componente “dumb” y compáralo con los dos ejemplos de React. Reproduce el comportamiento de pan, zoom, rerender y resize informado, y aclara la advertencia o documenta la distinción esperada una vez confirmado el comportamiento previsto.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript, react
Área
data-visualization, documentation
Tipo de issue
Documentación
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.