pie chart dashboard

mean-app/src/app/dashboard.component.html

@@ -1,3 +1,16 @@
-<div>
-	
-</div>
+<span *ngIf="mloaded">
+
+	<div class="col-md-6">
+    <h3>Martijn</h3>
+		<pie-chart [label]="label" [data]="data1"></pie-chart>
+	</div>
+
+</span>
+
+<span *ngIf="kloaded">
+	<div class="col-md-6">
+    <h3>Kenneth</h3>
+		<pie-chart [label]="label" [data]="data2"></pie-chart>
+	</div>
+
+</span>

mean-app/src/app/dashboard.component.ts

@@ -1,10 +1,69 @@
-import { Component } from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
+
+import { IntervalObservable } from 'rxjs/observable/IntervalObservable';
+import { Subscription } from 'rxjs/Subscription';
+
+import { DataService } from './data.service';
+import {LineChartComponent} from "./chart.component";
+import {LineData} from "./line-data";
+import {LabelData} from "./label-data";
+import {Line} from "tslint/lib/test/lines";
 
 @Component({
   selector: 'dashboard',
   templateUrl: './dashboard.component.html'
 })
 
-export class DashboardComponent {
+export class DashboardComponent implements OnInit, OnDestroy {
+  public data1:LineData;
+  public data2:LineData;
 
+  public mloaded:boolean = false;
+  public kloaded:boolean = false;
+
+  public subscription:Subscription;
+
+  constructor(private dataService: DataService) {}
+
+  ngOnInit(): void {
+
+    this.refreshData();
+
+    this.subscription = IntervalObservable.create(7500).subscribe(n => this.refreshData());
+
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+  refreshData()
+  {
+    console.log("Refreshing data");
+
+    this.dataService
+      .usage("4530303035303031353538313833363134")
+      .subscribe(res => {
+
+        this.data1 = <LineData> ({data: [res.HOV, res.HTV], label: "Verbruik Martijn"});
+        this.mloaded = true;
+
+      });
+
+    this.dataService
+      .usage("4530303235303030303636383733323136")
+      .subscribe(res => {
+
+        this.data2 = <LineData> ({data: [res.HOV, res.HTV], label: "Verbruik Kenneth"});
+        this.kloaded = true;
+
+      });
+
+    this.dataService
+      .get("4530303235303030303636383733323136")
+      .subscribe(res => {
+
+      });
+
+  }
 }

mean-app/src/app/piechart.component.html

@@ -0,0 +1,6 @@
+<div style="display: block;">
+  <canvas baseChart width="400" height="400"
+          [data]="pieChartData"
+          [labels]="pieChartLabels"
+          [chartType]="pieChartType"></canvas>
+</div>

mean-app/src/app/piechart.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit, OnChanges, ViewChild, ElementRef,Input } from '@angular/core';
+import { DataService } from './data.service';
+
+import { LineData } from './line-data';
+import { BaseChartDirective } from 'ng2-charts/ng2-charts';
+import {LabelData} from "./label-data";
+
+@Component({
+  selector: 'pie-chart',
+  templateUrl: './piechart.component.html'
+})
+export class PieChartComponent implements OnInit, OnChanges {
+
+  @Input()data:LineData;
+  @Input()label:LabelData;
+
+  @ViewChild(BaseChartDirective) public chart: BaseChartDirective;
+
+  // lineChart
+  public pieChartData:Array<any> = [0,0];
+  public pieChartLabels:Array<any> = ['-1', '-2'];
+  public pieChartType:string = 'pie';
+
+  constructor(private dataService: DataService) {}
+
+  ngOnInit(): void {
+
+    this.pieChartLabels = this.label.data.slice();
+
+    const newDataSet = [];
+    newDataSet.push(this.data.data);
+    this.pieChartData = newDataSet;
+  }
+
+  ngOnChanges(): void {
+    if(this.chart.chart != undefined){
+      this.chart.chart.update();
+    }
+
+  }
+
+
+}