Layout does not update when the chart gets a different set of data - revision and layout.datarevision don't work

Bắt đầu bằng việc tái hiện trong src/BarChart.js từ CodeSandbox được liên kết và kiểm tra cách component Plot nhận data, layout, revision và layout.datarevision trước và sau khi nhấp. Tái hiện việc hoán đổi trục và so sánh biểu đồ được render với các props được ghi log; hoàn thành khi việc thay thế data cập nhật cả hai loại trục và biểu đồ không còn bị trống.

I am trying to update a whole bar chart using Plotly React.
First I have a bar chart with bars on vertical, then after I click wherever on the chart I would like to rotate the chart 90 degrees and have the bars on horizontal with different data. So X axis becames Y and vice-versa.

I have tried using the revision prop of the <Plot /> component and the layout.dataverision property but it doesn't work.
When I click on the chart, it just empties.

I have

  const onUpdate = (event) => {
    console.log('update', event);
  };

which logs the appropriate data and layout in console before and after the click.

Basically the data updates but the layout does not and the issue comes from the x and y axis trying to display the same type data and not assessing what is the new data.

// here xaxis thinks it has to display strings
// and yaxis thinks it has to display numbers
// which is correct only for the first set of data
xaxis: {autorange: true, range: Array(2), type: "category"},
yaxis: {autorange: true, range: Array(2), type: "linear"}
// the second set of data reverses the x and y axes, so the new properties should be:
xaxis: {autorange: true, range: Array(2), type: "linear"},
yaxis: {autorange: true, range: Array(2), type: "category"}

How can I make Plotly asses the new data and update the layout accordingly ?

Thank you.

https://codesandbox.io/s/elegant-williams-jofx90?file=/src/BarChart.js

import { useEffect, useState } from "react";
import Plot from "react-plotly.js";

export default function BarChart() {
  const [chart, setChart] = useState({
    data: [],
    layout: {
      title: "Some BarChart",
      showlegend: true,
      legend: {
        x: 0,
        y: -0.4,
        orientation: "h"
      },
      autosize: true,
      barmode: "stack",
      datarevision: 0
    },
    config: { responive: true },
    revision: 0
  });

  useEffect(() => {
    const farm1 = {
      x: ["Ducks", "Cows", "Pigs", "Chickens"],
      y: [10, 12, 14, 16],
      name: "Farm 1",
      type: "bar",
      marker: { color: "#000" },
      hovertemplate: "%{x} - %{y:.0f} <extra></extra>"
    };
    const farm2 = {
      x: ["Ducks", "Cows", "Pigs", "Chickens"],
      y: [8, 10, 12, 14],
      name: "Farm 2",
      type: "bar",
      marker: { color: "#FE7100" },
      hovertemplate: "%{x} - %{y:.0f} <extra></extra>"
    };

    setChart((prevState) => ({
      data: [farm1, farm2],
      layout: { ...prevState.layout }
    }));
  }, [setChart]);

  const onUpdate = (event) => {
    console.log("update", event);
  };

  const onClick = (event) => {
    const farm1 = {
      x: [10, 12, 14, 16],
      y: ["Ducks", "Cows", "Pigs", "Chickens"],
      name: "Farm 1",
      type: "bar",
      marker: { color: "#000" },
      hovertemplate: "%{x} - %{y:.0f} <extra></extra>",
      orientation: "h"
    };

    const farm2 = {
      x: [8, 10, 12, 14],
      y: ["Ducks", "Cows", "Pigs", "Chickens"],
      name: "Farm 2",
      type: "bar",
      marker: { color: "#FE7100" },
      hovertemplate: "%{x} - %{y:.0f} <extra></extra>",
      orientation: "h"
    };

    setChart((prevState) => ({
      data: [farm1, farm2],
      layout: {
        ...prevState.layout,
        datarevision: prevState.layout.datarevision + 1
      },
      revision: prevState.revision + 1
    }));

    console.log(event.points[0].x.replaceAll("<br>", " ").trim());
  };

  return (
    <Plot
      data={chart.data}
      layout={chart.layout}
      config={chart.config}
      revision={chart.revision}
      style={{ width: "100%", height: "100%" }}
      useResizeHandler
      onClick={onClick}
      onUpdate={onUpdate}
    />
  );
}