SolarPanelEfficiency.js

import React from "react";
import Plot from "react-plotly.js";
import SPESimulator from "../math/spe_sim"

export default class SolarPanelEfficiency extends React.Component {
  constructor(props) {
    super(props);

    this.d_step = 0.5;

    this.simulator = new SPESimulator(1500);
    this.state = {
      i_plot: { data: [{
        x: [],
        y: [],
        type: 'scatter'
      }], layout: {
        title: 'Solar Radiation Intensity', 
        datarevision: 0,
        xaxis: { range: [0, 365.25] },
        yaxis: { range: [1300, 1400] }
      }, frames: [], config: {} }
    }

    this.simulateAndUpdate = this.simulateAndUpdate.bind(this);
  }

  componentDidMount() {
    this._frameId = window.requestAnimationFrame(this.simulateAndUpdate)
  }
  componentWillUnmount() {
    window.cancelAnimationFrame(this._frameId);
  }

  simulateAndUpdate() {
    this.simulator.step(this.d_step);
    this.state.i_plot.data[0].x.push(this.simulator.state.d);
    this.state.i_plot.data[0].y.push(this.simulator.state.i);
    this.state.i_plot.layout.datarevision += 1;
    this.forceUpdate();

    this._frameId = window.requestAnimationFrame(this.simulateAndUpdate);
  }

  render() {
    return (
      <div>
        <p>Welcome to my solar panel efficiency calculator</p>
        <Plot
          style={{width: "100%"}}
          data={this.state.i_plot.data}
          layout={this.state.i_plot.layout}
          frames={this.state.i_plot.frames}
          config={this.state.i_plot.config}
          onInitialized={(figure) => this.setState({i_plot: figure})}
          onUpdate={(figure) => {console.log("doing update"); this.setState({i_plot: figure});}}
          useResizeHandler={true}
        />
      </div>
    );
  }
}