@iotflows/iotflows-smart-widget/src/lib/components/widgets/IoTFlowsMultiColumn.js

IoTFlows Smart Widget Node Module.

import React from "react";
import Highcharts from "highcharts/highcharts.js";
import highchartsMore from "highcharts/highcharts-more.js";
import HighchartsReact from "highcharts-react-official";
// darkUnica(Highcharts);
highchartsMore(Highcharts);

export class IoTFlowsMultiColumn extends React.Component {
  constructor(props) {
    super(props);            
    this.chartComponent = React.createRef();
    this.childKey = 0
    this.state = { 
      data:[]
    }
  }

  componentDidMount() {       
    // console.log('PIE')
  }

  static getDerivedStateFromProps(nextProps, prevState){    
    if(nextProps.data!==prevState.data){      
        return { data: nextProps.data};
    }
    else return null;
  }

  // no need anymore because of shouldComponentUpdate
  // componentDidUpdate(prevProps, prevState) {                    
  // }

  // PREVENT RE-RENDER of highcharts!
  shouldComponentUpdate(nextProps, nextState) {        
    if(this.state.data !== nextState.data) 
    {      
      // this.chartComponent.current.chart.series[0].points[0].update(nextProps.data);            
      return false;
    }      
    else
      return true
  }

  render() {    
    const options = {
      chart: {
        type: 'column'
      },
      title: {
          text: 'Asset Movement Per Day'
      },
      subtitle: {
          text: 'Total distance asset moved per day'
      },
      credits: {
        text: 'iotflows.com',
        href: 'http://www.iotflows.com'
      },
      xAxis: {
          categories: [
              'Monday',
              'Tuesday',
              'Wednesday',
              'Thursday',
              'Friday',
              'Saturday',
              'Sunday'
          ],
          crosshair: true
      },
      yAxis: {
          min: 0,
          title: {
              text: 'Distance (miles)'
          }
      },
      tooltip: {
          headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
              '<td style="padding:0"><b>{point.y:.1f} miles</b></td></tr>',
          footerFormat: '</table>',
          shared: true,
          useHTML: true
      },
      plotOptions: {
          column: {
              pointPadding: 0.1,
              borderWidth: 0
          },
          series: {
              pointWidth: 25
          }
      },
      colors: [ '#539DDB', '#084A83'],
      series: [{
          name: 'This Week',
          data: [49.9, 71.5, 106.4, 129.2, 144.0],
      }, {
          name: 'Last Week',
          data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0]
      }]
    }

    ++this.childKey;    
    return (
      <HighchartsReact 
        containerProps={{ style: { height: "100%" } }}
        ref={this.chartComponent}
        highcharts={Highcharts}          
        options={options}
        key={this.childKey}              
      />
    );
  }
}