import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-billing-information',
  templateUrl: './billing-information.component.html',
  styleUrls: ['./billing-information.component.css']
})
export class BillingInformationComponent implements OnInit {

  constructor() { 
    console.log('BillingInformationComponent -constructor-');
    
  }

  // prepare chart data as an array
  sampleData = [
    { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
    { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
    { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
    { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
  ];

  // prepare jqxChart settings
  settings = {
    borderLineWidth: 0,
    title: "Fitness & exercise weekly scorecard",
    description: "Time spent in vigorous exercise by activity",
    enableAnimations: true,
    showLegend: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 30, top: 0, right: 0, bottom: 10 },
    source: this.sampleData,
    categoryAxis:
    {
      text: 'Category Axis',
      textRotationAngle: 0,
      dataField: 'Day',
      showTickMarks: true,
      tickMarksInterval: 1,
      tickMarksColor: '#888888',
      unitInterval: 1,
      showGridLines: false,
      gridLinesInterval: 1,
      gridLinesColor: '#888888',
      axisSize: 'auto'
    },
    colorScheme: 'scheme05',
    seriesGroups:
      [
        {
          type: 'splinearea',
          valueAxis:
          {
            unitInterval: 20,
            minValue: 0,
            maxValue: 100,
            displayValueAxis: false,
            description: 'Goal in minutes',
            axisSize: 'auto',
            tickMarksColor: '#888888'
          },
          series: [
            { dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
          ]
        },
        {
          type: 'stackedcolumn',
          columnsGapPercent: 100,
          seriesGapPercent: 5,
          valueAxis:
          {
            unitInterval: 20,
            minValue: 0,
            maxValue: 100,
            displayValueAxis: true,
            description: 'Time in minutes',
            axisSize: 'auto',
            tickMarksColor: '#888888',
            gridLinesColor: '#777777'
          },
          series: [
            { dataField: 'Running', displayText: 'Running' },
            { dataField: 'Swimming', displayText: 'Swimming' },
            { dataField: 'Cycling', displayText: 'Cycling' }
          ]
        }
      ]
  };

  ngOnInit() {
    console.log('BillingInformationComponent -ngOnInit-');
  }

}