component.ts

import { Component, OnInit, Input, Output, EventEmitter, AfterViewInit } from '@angular/core';
import { IncentivePlan, GoalType } from '../../../../shared/models';
import * as moment from 'moment';
import { AmChartsService, AmChart } from '@amcharts/amcharts3-angular';
import { CommonService } from '../../../../shared/service';

@Component({
  selector: 'app-incentive-plan',
  templateUrl: './incentive-plan.component.html',
  styleUrls: ['./incentive-plan.component.scss']
})
export class IncentivePlanComponent implements OnInit, AfterViewInit {

  @Input() plan: IncentivePlan;
  @Output() cancel: EventEmitter<void> = new EventEmitter();

  fixedChart: AmChart;
  payperChart: AmChart;

  constructor(
    private chartService: AmChartsService,
    private commonService: CommonService
  ) { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.buildFixedPayoutChart();
    this.buildPayperChart();
  }

  buildFixedPayoutChart() {
    this.fixedChart = this.chartService.makeChart('fixed-payout-chart', {
      type: 'gauge',
      theme: 'none',
      axes: [{
        'axisAlpha': 0,
        'tickAlpha': 0,
        'labelsEnabled': false,
        'startValue': 0,
        'endValue': 100,
        'startAngle': 0,
        'endAngle': 360,
        'bands': [
          {
            'color': '#d1d4d3',
            'startValue': 0,
            'endValue': 100,
            'radius': '90%',
            'innerRadius': '70%'
          }, {
            'color': '#2bc991',
            'startValue': 0,
            'endValue': Math.round(this.plan.fixedEarnings / this.plan.expected * 100),
            'radius': '90%',
            'innerRadius': '70%'
          }
        ]
      }],
      allLabels: [
        {
          text: `${Math.round(this.plan.fixedEarnings / this.plan.expected * 100)}%`,
          x: '0',
          y: '40%',
          size: 30,
          bold: true,
          color: '#2bc991',
          align: 'center'
        }
      ]
    });
  }

  buildPayperChart() {
    this.payperChart = this.chartService.makeChart('payper-chart', {
      'type': 'serial',
      'theme': 'none',
      'marginRight': 40,
      'marginLeft': 40,
      'autoMarginOffset': 20,
      'mouseWheelZoomEnabled': true,
      'dataDateFormat': 'YYYY-MM-DD',
      'valueAxes': [{
          'id': 'v1',
          'axisAlpha': 0,
          'position': 'left',
          'ignoreAxisWidth': true
      }],
      'balloon': {
          'borderThickness': 1,
          'shadowAlpha': 0
      },
      'graphs': [{
          'id': 'g1',
          'balloon': {
            'drop': true,
            'adjustBorderColor': false,
            'color': '#ffffff'
          },
          'bullet': 'round',
          'bulletBorderAlpha': 1,
          'bulletColor': '#FFFFFF',
          'bulletSize': 5,
          'hideBulletsCount': 50,
          'lineThickness': 2,
          'title': 'red line',
          'useLineColorForBulletBorder': true,
          'valueField': 'value',
          'balloonText': '<span style=\'font-size:18px;\'>[[value]]</span>'
      }],
      'chartCursor': {
          'pan': true,
          'valueLineEnabled': true,
          'valueLineBalloonEnabled': true,
          'cursorAlpha': 1,
          'cursorColor': '#258cbb',
          'limitToGraph': 'g1',
          'valueLineAlpha': 0.2,
          'valueZoomable': true
      },
      'categoryField': 'date',
      'categoryAxis': {
          'parseDates': true,
          'dashLength': 1,
          'minorGridEnabled': true
      },
      'dataProvider': [{
          'date': '2012-12-02',
          'value': 66
      }, {
          'date': '2012-12-03',
          'value': 65
      }, {
          'date': '2012-12-04',
          'value': 73
      }, {
          'date': '2012-12-05',
          'value': 79
      }, {
          'date': '2012-12-06',
          'value': 78
      }, {
          'date': '2012-12-07',
          'value': 78
      }, {
          'date': '2012-12-08',
          'value': 78
      }, {
          'date': '2012-12-09',
          'value': 74
      }, {
          'date': '2012-12-10',
          'value': 73
      }, {
          'date': '2012-12-11',
          'value': 75
      }, {
          'date': '2012-12-12',
          'value': 70
      }, {
          'date': '2012-12-13',
          'value': 77
      }, {
          'date': '2012-12-14',
          'value': 67
      }, {
          'date': '2012-12-15',
          'value': 62
      }, {
          'date': '2012-12-16',
          'value': 64
      }, {
          'date': '2012-12-17',
          'value': 61
      }, {
          'date': '2012-12-18',
          'value': 59
      }, {
          'date': '2012-12-19',
          'value': 53
      }, {
          'date': '2012-12-20',
          'value': 54
      }, {
          'date': '2012-12-21',
          'value': 56
      }, {
          'date': '2012-12-22',
          'value': 59
      }, {
          'date': '2012-12-23',
          'value': 58
      }, {
          'date': '2012-12-24',
          'value': 55
      }, {
          'date': '2012-12-25',
          'value': 52
      }, {
          'date': '2012-12-26',
          'value': 54
      }, {
          'date': '2012-12-27',
          'value': 50
      }, {
          'date': '2012-12-28',
          'value': 50
      }, {
          'date': '2012-12-29',
          'value': 51
      }, {
          'date': '2012-12-30',
          'value': 52
      }, {
          'date': '2012-12-31',
          'value': 58
      }]
    });
  }

  cancelPreview() {
    this.cancel.emit();
  }

  goalTypeText(type: GoalType) {
    return this.commonService.getGoalTypeText(type);
  }

}