dive-log-chart.ts

import { Component, OnInit } from '@angular/core';
import {APIService} from '../api.service';
import {BarHorizontalStackedComponent, NgxChartsModule} from '@swimlane/ngx-charts';
import {PieSeriesComponent} from "@swimlane/ngx-charts";
import {PieChartComponent} from "@swimlane/ngx-charts";
import {calculateViewDimensions, ColorHelper, ViewDimensions } from '@swimlane/ngx-charts';
import {scaleBand, scaleLinear, scalePoint, scaleTime} from 'd3-scale';
import {area, curveLinear, line} from 'd3-shape';
import { BaseChartComponent } from '@swimlane/ngx-charts';
import {forEach} from '@angular/router/src/utils/collection';
import {
  trigger,
  transition,
  style,
  animate
} from '@angular/animations';

@Component({
  selector: 'app-dive-log-chart',
  templateUrl: './dive-log-chart.component.html',
  styleUrls: ['./dive-log-chart.component.scss']
})
export class DiveLogChartComponent implements OnInit {
  siteCount: any[];
  chartData: any[] // = [
  //   {
  //     "name": "Germany",
  //     "value": 40632
  //   },
  //   {
  //     "name": "United States",
  //     "value": 49737
  //   },
  //   {
  //     "name": "France",
  //     "value": 36745
  //   },
  //   {
  //     "name": "United Kingdom",
  //     "value": 36240
  //   },
  //   {
  //     "name": "Spain",
  //     "value": 33000
  //   },
  //   {
  //     "name": "Italy",
  //     "value": 35800
  //   }
  // ]
  sites: Array<string>
  // chart stuff
  showChart: boolean;
  gradient = false;
  view = [600, 200];
  animations = true;
  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  /// data
  spoofData: any[];

  constructor(private APIService: APIService) { }

  ngOnInit() {
    console.log(this.chartData)
    this.siteCount = [];
    this.showChart = false;
    this.chartData = [];
    this.spoofData = [];
    this.getSites();
    this.APIService.getAllDives().subscribe( dives => {
      this.processDiveData(dives);
    });

    // this.spoofData.push({name: 'Monterey Bay', value: 50})
    // this.spoofData.push({name: 'Bermuda Triangle', value: 15})
    // this.spoofData.push({name: 'Cancun', value: 23})
    // this.spoofData.push({name: 'YMCA Pool', value: 12})
  }
  // dives schema: public class Log{
  // Site site;
  // Date timeIn;
  // Date timeOut;
  // @Id
  // String logId;
  // }
  processDiveData(dives) {
    let count = dives.length
    this.sites.forEach(site => {
      this.siteCount[site] = 0;
    })
    dives.forEach( dive => {
      console.log(dive)
      // populate array for counts
      this.siteCount[dive.site.name]++;
      // if (this.siteCount[dive.site.name]) {
      //   this.siteCount[dive.site.name]++;
      // } else {
      //   this.siteCount[dive.site.name] = 1;
      // }
    });
    for (var key in this.siteCount) {
      let singleEntry = {
        name: key,
        value: Math.round((this.siteCount[key]/count)*100)
      }
      this.chartData.push(singleEntry)
    }
    this.showChart = true
    console.log(this.chartData)
  }
  
  getSites() {
    this.APIService.getAllSites().subscribe(
      data => {
        if(data !== null) {
          this.sites = data
          console.log('Sites: '+this.sites)
        }
      }
    )
  }
}