Frontend can now filter with timespan

frontend/src/app/dashboard/dashboard.component.ts

@@ -1,6 +1,7 @@
 import { AfterViewInit, Component, OnInit } from '@angular/core';
-import { Map } from 'mapbox-gl';
-import { APIService } from '../api.service';
+import { ChartDataSets, ChartOptions } from 'chart.js';
+import { Label } from 'ng2-charts';
+import { APIService, IBeat } from '../api.service';
 
 @Component({
   selector: 'app-dashboard',
@@ -8,25 +9,68 @@ import { APIService } from '../api.service';
   styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent implements AfterViewInit {
-  map: Map;
 
-  data: GeoJSON.FeatureCollection<GeoJSON.LineString> = {
-    type: 'FeatureCollection', features: [
-    {
-      type: 'Feature',
-      properties: null,
-      geometry: { type: 'LineString', coordinates: [] }
-    }]
+  // Array of different segments in chart
+  lineChartData: ChartDataSets[] = [
+    { data: [], label: 'Battery' }
+  ];
+
+  // Labels shown on the x-axis
+  lineChartLabels: Label[] = [];
+
+  // Define chart options
+  lineChartOptions: ChartOptions = {
+    responsive: true,
+    scales: {
+      xAxes: [{
+        type: 'time',
+        stacked: false,
+        time: {
+          parser: 'MM/DD/YYYY HH:mm:ss',
+          round: 'minute',
+          tooltipFormat: 'll HH:mm'
+        },
+        scaleLabel: {
+          display: true,
+          labelString: 'Date'
+        }
+      }]
+    }
   };
 
-  constructor(private api: APIService) { }
+  constructor(private api: APIService) {
+    this.api.beatsEvent.subscribe(beats => {
+      this.lineChartData[0].data = [];
+      this.lineChartLabels = [];
 
-  async ngAfterViewInit(): Promise<void> {
-    const beats = await this.api.getBeats();
-    beats.forEach((beat) => {
-      this.data.features[0].geometry.coordinates.push([beat.coordinate[1], beat.coordinate[0]]);
+      const batteryLevels: number[] = [];
+
+      const finalBeats = beats.filter((val, i, array) => {
+        if (batteryLevels.indexOf(val.battery) === -1) {
+          batteryLevels.push(val.battery);
+          return true;
+        } else {
+          return false;
+        }
+      });
+
+      finalBeats.forEach((beat) => {
+        this.lineChartData[0].data.push(beat.battery);
+        this.lineChartLabels.push(this.formatDateTime(new Date(beat.createdAt)));
+      });
     });
-    console.log("Now:", this.data.features);
+  }
+
+  async fetchData(): Promise<void> {
+    await this.api.getBeats();
+  }
+
+  private formatDateTime(date: Date): string {
+    return `${date.getMonth()}/${date.getDay()}/${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+  }
+
+  ngAfterViewInit(): void {
+    this.fetchData();
   }
 
 }