text: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import Highcharts from 'highcharts';
  import HighchartsReact from 'highcharts-react-official';
  import HCAccessibility from 'highcharts/modules/accessibility';
  import HCExporting from 'highcharts/modules/exporting';
  import HCExportingData from 'highcharts/modules/export-data';
  import HCRounded from 'highcharts-rounded-corners';
  import ShareComponent from './SubComponents/ShareComponent';
  
  import classes from '../GraphComponents.scss';
  
  HCAccessibility(Highcharts);
  HCExporting(Highcharts);
  HCExportingData(Highcharts);
  HCRounded(Highcharts);
  
  /**
   * HighChartsBar
   * Url : <br/>
   * Description : Composant HighCharts qui rend les barres horizontales <br/>
   * Responsive : . <br/>
   * Accessible : . <br/>
   * Tests unitaires : . <br/>.
  */
  
  export default class HighChartsLine extends Component {
    constructor(props) {
      super(props);
      this.chart = React.createRef();
      this.data = this.props.data;
      this.state = {
        options: null,
      };
    }
  
    componentDidMount() {
      const data = {
        labels: this.data.entries.map(item => (item.value)),
        values: this.data.entries.map(item => (item.count)),
      };
  
      const options = {
        chart: {
          type: 'area',
          style: { 'font-family': 'Inter UI' },
        },
        credits: {
          enabled: false,
        },
        tooltip: {
          enabled: false,
        },
        title: {
          text: '',
        },
        subtitle: {
          text: (this.props.subtitle) ? (this.props.subtitle) : '',
        },
        xAxis: {
          minorGridLineWidth: 0,
          gridLineWidth: 0,
          lineWidth: 0,
          tickWidth: 0,
          categories: data.labels,
          labels: {
            style: { color: '#000000' },
            align: 'right',
            x: -10,
            rotation: -90,
          },
        },
        yAxis: {
          gridLineWidth: 0,
          lineWidth: 0,
          tickWidth: 0,
          minorGridLineWidth: 0,
          title: { text: '' },
          labels: { enabled: false },
        },
        legend: {
          hide: true,
          enabled: false,
          // reversed: true
        },
        plotOptions: {
          fillColor: {
            linearGradient: {
              x1: 0,
              y1: 0,
              x2: 0,
              y2: 1,
            },
            stops: [
              [0, Highcharts.getOptions().colors[0]],
              [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')],
            ],
          },
          marker: {
            radius: 2,
          },
          lineWidth: 1,
          states: {
            hover: {
              lineWidth: 1,
            },
          },
          threshold: null,
          series: {
            stacking: 'normal',
            pointPadding: 0,
            // groupPadding: 0.1,
            dataLabels: {
              enabled: true,
              align: 'right',
              // textAlign: 'right',
              x: 0,
              style: { color: '#000000' },
            },
          },
        },
        series: [{
          color: '#FDD85E',
          data: data.values,
          borderRadiusTopLeft: '80%',
          borderRadiusTopRight: '80%',
          borderRadiusBottomLeft: '80%',
          borderRadiusBottomRight: '80%',
        }],
        exporting: {
          filename: this.props.filename,
          buttons: {
            contextButton: {
              enabled: false,
            },
          },
          chartOptions: {
            title: {
              text: this.props.filename,
            },
            credits: {
              enabled: true,
              text: "Source : scanR, Moteur de la Recherche et de l'Innovation",
            },
          },
        },
      };
      this.setState({ options });
    }
  
    render() {
      return (
        <div>
          {
            this.state.options !== null
              ? (
                <div>
                  <hr className={classes.HorizontalBar} />
                  <div className="pl-4">
                    <HighchartsReact
                      highcharts={Highcharts}
                      options={this.state.options}
                      ref={this.chart}
                    />
                  </div>
                  <hr className={classes.HorizontalBar} />
                  <ShareComponent
                    language={this.props.language}
                    filename={this.props.filename}
                    chart={this.chart}
                  />
                </div>
              )
              : <div>Loading...</div>
          }
        </div>
      );
    }
  }
  
  HighChartsLine.defaultProps = {
    data: { entries: [] },
  };
  
  HighChartsLine.propTypes = {
    language: PropTypes.string.isRequired,
    filename: PropTypes.string.isRequired,
    data: PropTypes.object,
    subtitle: PropTypes.string,
  };
  