@mobiage/homescreen/src/module/components/charts/charts.controller.ts

cp-mbg-homescreen

import Highcharts from 'highcharts';
import ExportChart from 'highcharts/modules/exporting';

ExportChart(Highcharts);

class ChartsController {
  public $bindings: any;
  public intervalFunctions = [];
  public hasData: any;
  public countUpdates = 0;

  constructor(public $scope, public $element) { }

  $onInit() {
    this.render();
  }

  updateSerie(chartInstance, serie, index) {
    serie.data = [0];
    if (serie) {
      serie.sync({
        setValue: (value) => {
          chartInstance.series[index].setData(value)
          this.countUpdates++
        }
      })
    }
  }

  render() {
    const chartInstance = Highcharts.chart(this.$element.querySelector('.home-chart'), this.getHighchartConfig());

    this.hasData = () => {
      const finds = chartInstance.series.reduce((value, serie) => {
        return value + serie.data.length;
      }, 0) > 0;
      return finds;
    }

    if (this.$bindings.chart && this.$bindings.chart.series) {
      this.$bindings.chart.series.forEach((serie, index) => {
        this.updateSerie(chartInstance, serie, index);
      })
    }
  }

  realMerge(to, from) {
    for (let n in from) {
      if (typeof to[n] != 'object') {
        to[n] = from[n];
      } else if (typeof from[n] == 'object') {
        to[n] = this.realMerge(to[n], from[n]);
      }
    }
    return to;
  }

  getHighchartConfig() {
    const configDefault = {
      chart: {
        type: 'areaspline',
        margin: [0, -12, 0, -12],
        backgroundColor: 'transparent'
      },
      exporting: {
        enabled: false
      },
      title: {
        style: {
          color: '#aaabaa',
          fontWeight: '400',
          fontSize: '17px',
        },
        text: this.$bindings.chart.chartTitle || ''
      },
      lang: {
        noData: "Não há dados no momento "
      },
      yAxis: {
        title: {
          enabled: false
        },
        gridLineColor: 'rgba(220, 220, 220, 0.2)',
        gridZIndex: 4,
        labels: {
          enabled: true,
          align: 'left',
          style: {
            color: '#ababab',
            fontWeight: 'bold',
            fontFamily: '"Montserrat", sans-serif',
          },
          x: 30,
          y: 30
        }
      },
      xAxis: {
        title: {
          enabled: false
        },
        labels: {
          enabled: false
        },
      },
      plotOptions: {
        label: {
          enabled: false
        },
      },
      credits: {
        enabled: false
      },
      tooltip: {
        borderRadius: 20,
        backgroundColor: this.$bindings.chart.chartColor ? this.$bindings.chart.chartColor.tooltip : '#00BDBE',
        borderWidth: 2,
        borderColor: this.$bindings.chart.chartColor ? this.$bindings.chart.chartColor.tooltip : '#00BDBE',
        shadow: true,
        style: {
          color: 'white',
          fontWeight: '400',
          fontFamily: '"Montserrat", sans-serif',
        },
        headerFormat: '<span></span>'
      },
      legend: {
        enabled: true,
        align: 'right',
        y: -340,
        itemStyle: {
          color: '#aaa',
          pointerEvents: 'none',
          textTransform: 'uppercase',
          fontWeight: '400',
          fontFamily: '"Montserrat", sans-serif',
          verticalAlign: 'middle'
        },
        itemHoverStyle: {
          color: '#aaa'
        },
        layout: 'horizontal',
        symbolRadius: 2,
        navigation: {
          enabled: false
        }
      },
      series: [{
        type: 'areaspline',
        lineWidth: 0,
        color: this.$bindings.chart.chartColor ? this.$bindings.chart.chartColor.fillColor[0][1] : 'rgba(255,147,43,1)',
        lineColor: 'transparent',
        marker: {
          enabled: false,
          lineColor: '#fff',
          lineWidth: 2
        },
        fillColor: {
          linearGradient: [0, 0, 0, 400],
          stops: this.$bindings.chart.chartColor ? this.$bindings.chart.chartColor.fillColor : [
            [0, 'rgba(253,147,0,1)'],
            [1, 'rgba(247,41,14,1)']
          ]
        },
        name: ' ',
        data: []
      },
        // {
        //   type: 'areaspline',
        //   lineWidth: 0,
        //   color: 'rgba(128,41,186,1)',
        //   lineColor: 'transparent',
        //   marker: {
        //     enabled: false,
        //     lineColor: '#fff',
        //     lineWidth: 2
        //   },
        //   fillColor: {
        //     linearGradient: [0, 0, 0, 500],
        //     stops: [
        //       [0, 'rgba(128,41,186,0.60)'],
        //       [1, 'rgba(87,13,111,1)']
        //     ]
        //   },
        //   name: ' ',
        //   data: [0, 0, 0, 0]
        // }
      ]
    };

    const self = this;

    return this.realMerge(configDefault, {
      yAxis: {
        labels: {
          formatter: function () {
            return self.formatValue(this);
          }
        }
      },
      tooltip: {
        useHTML: true,
        formatter: function () {
          if (this.point.template) {
            return this.point.template
          }
          return `` + self.formatValue({ value: this.y })
        }
      },
      series: []
    });
  }

  formatValue(context) {
    if (this.$bindings.chart && this.$bindings.chart.format == 'money') {
      return 'R$' + (context.value).toLocaleString('pt-BR');
    } else {
      return context.value;
    }
  }

}

export default ChartsController;