plotly / plotly/react-plotly.js

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

未關閉
#309 0 則留言 1 個 reaction 已指派 0 人 在 GitHub 檢視

還沒有人認領這個 Issue。

主要語言
JavaScript
星號
1.1k
分支
138
平均合併
3 天 2 小時
30 天內合併 PR
4

描述

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 ?

貢獻指南

這個儲存庫沒有索引到貢獻指南

從這裡開始

  1. 先讀完整個 Issue,再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫,在一個分支上完成修改。
  4. 送出 Pull Request,並在描述裡引用這個 Issue 編號。

研究方向

該 issue 沒有指出任何 repository 檔案或測試;請先定位文件中關於 “dumb” 元件的段落,並將其與兩個 React 範例進行比較。重現回報中的 pan、zoom、rerender 和 resize 行為,然後在確認預期行為後,釐清該警告或記錄預期的區別。

由索引模型根據 Issue 內容生成。

評估

技術堆疊
javascript, react
領域
data-visualization, documentation
Issue 類型
文件
難度
4/5
預估耗時
3-5 天
活躍度
停滯
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。