components/bar-chart.js

import { OrderColors } from '../utils/helpers'
import Chart from "chart.js";

/**
 * Create a bar chart
 * @class BarChart
 * 
 * @prop {Object[]} evolution - Evolution values to display
 * @prop {String} year - Year evolution value
 * @prop {String[]} colors - Colors array associated with name
 * 
 * @extends React.Component<Props>
 */
export default class BarChart extends React.Component {
  chartRef = React.createRef();
  chart = '';
  options = {
    datasetFill: true,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          color: "rgba(0, 0, 0, 0)",
        },
        ticks: {
          stepSize: 50
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true, callback: function (value, index, values) {
            return value + "%";
          },
          stepSize: 10
        },
      }]
    }
  }

  
  chartData = (props) => {
    this.data.labels = Object.keys(props.evolution).map(key => { return key })
  
    this.data.datasets[0].data = Object.keys(props.evolution).map(key => {
      return props.evolution[key][props.year]['value']
    })
    
    const colors = OrderColors(this.data.labels, this.selectedColors)
  
    this.data.datasets[0].backgroundColor = colors
    this.data.datasets[0].borderColor = colors
  }

  constructor(props) {
    super(props);
    this.data = {
      labels:'',
      datasets: [
        {
          label: props.type,
          borderWidth: 1,
        }
      ]
    }
    this.options = {
      scales: {
        yAxes:[{
          ticks:{
            stepSize: props.step || 10,
            beginAtZero: true, callback: function (value, index, values) {
              return `${value} ${props.valueType ? props.valueType : '%'}`;
            },
          }
        }]
      }
    }
    this.chartData(props);
    this.selectedColors = props.colors

    const myChartRef = this.chartRef.current.getContext("2d");
    this.chart = new Chart(myChartRef, {
      type: "bar",
      data: this.data,
      options: this.options
    })
  }

  componentWillReceiveProps(nextProps) {
    this.chartData(nextProps);
    this.chart.data = this.data;
    this.chart.update();
  }

  render() {
    // this
    // Object.keys(this.props.evolution).forEach((key, i) => {
    //   // console.log(this.props.evolution[key][this.props.year])
    //   // console.log(i, this.props.evolution[key])
    //   // if(i == 1) return props.evolution[year]['Ingoing']
    // });
    return (
      <div>
        <canvas
          id="myChart"
          ref={this.chartRef}
        />
      </div>
    )
  }

}