Graph not changing on input change

[DennisOosterling]

According to the docs: This component currently creates a new plot every time the input changes.
It seems like the graph would do a redraw once the data changed. When passing updated props to the <Plot/> data attribute the plot stays the same.

Even when checking in componentWillReceiveProps() the nextProps.data is different than the this.props.data.

Update:
The same seems true when incrementing the revision attribute.

[nicolaskruchten]

I'm just in the middle of updating the documentation and pulling together a release of this component which clears up this behaviour :)

[DennisOosterling]

Awesome @nicolaskruchten any ETA & solution for the in the meantime?

[nicolaskruchten]

Literally 10 minutes and I'll have the new version on NPM :)

[nicolaskruchten]

OK, please try using version 1.7.0 and let me know if you're still having issues. If so, please provide some sample code that shows what is happening and explain what you would expect to have happen :)

[nicolaskruchten]

(sorry, hit the wrong button)

[nicolaskruchten]

Also, please check out the new notes in the props section: https://github.com/plotly/react-plotly.js#props

[DennisOosterling]

Sadly it still doesn't work, will provide some code samples tomorrow.

[nicolaskruchten]

OK. Are you adding data points to a data array or something like that? If you want to mutate the input you'll have to bump the revision number.

[DennisOosterling]

Yes and yes haha. I am indeed adding datapoints to an array, but creating a new array in the process. Also I bump the revision number. the onUpdate callback is called btw.

[nicolaskruchten]

So the onUpdate callback is being called but your chart isn't visually changing?

[DennisOosterling]

exactly

[nicolaskruchten]

Very strange. I'd love to see some sample code and I can help you debug :)

[DennisOosterling]

class Monitoring extends React.Component {
  state = {
    realtimeData: [
      {
        type: "scatter",
        mode: "lines+points",
        x: [1, 2, 3],
        y: [2, 6, 3],
        marker: { color: "#fdcc00" },
        line: { shape: "spline" }
      }
    ]
  };

  componentDidMount() {
    // Simulate realtime data

    setInterval(() => {
      let newRealtimeData = [...this.state.realtimeData];
      newRealtimeData[0].x.push(newRealtimeData[0].x.length + 1);
      newRealtimeData[0].y.push(Math.floor(Math.random() * 6) + 1);

      this.setState({
        realtimeData: newRealtimeData
      });
    }, 2000);
  }

render() {
    return (
      <div>
          <MonitorChart
            realtimeData={this.state.realtimeData}
          />
      </div>
  }
}

const MonitorChart = props => {
  const { realtimeData } = props;

  return (
    <div>
      <Panel
        header={<PanelHeader number={1} stageName={"Chart"} />}
        initialOpen={true}
      >
        <Chart data={realtimeData} />
      </Panel>
    </div>
  );
};

class Chart extends React.Component {
  state = {
    revisionNo: 1
  };

  componentWillReceiveProps(nextProps) {
    this.setState((prevState, props) => {
      return { revisionNo: prevState.revisionNo + 1 };
    });
  }

  updateHandler = () => {
    console.log("Updated");
  };

  render() {
    return (
      <div style={{ marginTop: "10px" }}>
        <Plot
          divId={"chartmonitoring"}
          revision={this.state.revisionNo}
          style={{
            width: "90%",
            height: "100%"
          }}
          useResizeHandler={true}
          data={this.props.data}
          onUpdate={this.updateHandler}
        />
      </div>
    );
  }
}

I'm using webpack with the ify-loader. No error messages and onUpdate callback is called.