add last chart: burrow-time to dashboard

projects/project-3/frontend/src/app/dashboard/dashboard.component.ts

@@ -28,7 +28,7 @@ export type ChartOptions = {
   chart: ApexChart;
   dataLabels: ApexDataLabels;
   plotOptions: ApexPlotOptions;
-  yaxis: ApexYAxis;
+  yaxis: ApexYAxis | ApexYAxis[];
   xaxis: ApexXAxis;
   fill: ApexFill;
   tooltip: ApexTooltip;
@@ -37,6 +37,8 @@ export type ChartOptions = {
   noData: ApexNoData;
 };
 
+const chartHeight = 450;
+
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
@@ -46,6 +48,7 @@ export type ChartOptions = {
 export class DashboardComponent implements OnInit {
   @ViewChild('Station-Dashboard-Borrow-Duration') chart: ChartComponent;
   public durationChartOptions: Partial<ChartOptions>;
+  public timeChartOptions: Partial<ChartOptions>;
   displayedColumnsTo: string[] = ['endStationName', 'number', 'avgDuration'];
   displayedColumnsFrom: string[] = ['startStationName', 'number', 'avgDuration'];
   stationToSource = new MatTableDataSource<any>();
@@ -68,11 +71,18 @@ export class DashboardComponent implements OnInit {
     private fb: FormBuilder
   ) {
     this.durationChartOptions = {
-      title: {
+      series: [],
-        text: 'test',
+      chart: {
-        align: 'left',
+        type: 'bar'
-        margin: 10
       },
+      dataLabels: {
+        enabled: false
+      },
+      noData: {
+        text: 'Loading...'
+      }
+    };
+    this.timeChartOptions = {
       series: [],
       chart: {
         type: 'bar'
@@ -112,7 +122,7 @@ export class DashboardComponent implements OnInit {
       this.stationFromSource = source;
       this.changeDetectorRefs.detectChanges();
     });
-    this.service.fetch_dashboard_station_duration(this.station.id, initDate, initDate).then((source) => {
+    this.service.fetch_dashboard_station_charts(this.station.id, initDate, initDate, 'duration').then((source) => {
       const numbers = [];
       const minutesGroup = [];
       source.forEach(value => {
@@ -123,12 +133,12 @@ export class DashboardComponent implements OnInit {
         series: [
           {
             name: 'amount of drives for given borrow duration',
-            data: [...numbers]
+            data: numbers
           }
         ],
         chart: {
           type: 'bar',
-          height: 400
+          height: chartHeight
         },
         plotOptions: {
           bar: {
@@ -146,7 +156,7 @@ export class DashboardComponent implements OnInit {
           colors: ['transparent']
         },
         xaxis: {
-          categories: [...minutesGroup],
+          categories: minutesGroup,
           labels: {
             formatter: value => {
               return value + ' min';
@@ -163,6 +173,64 @@ export class DashboardComponent implements OnInit {
         }
       };
     });
+    this.service.fetch_dashboard_station_charts(this.station.id, initDate, initDate, 'time').then((source) => {
+      const timeFrame = [];
+      const numbers = [];
+      const avgDuration = [];
+      source.forEach(value => {
+        timeFrame.push(value.timeFrame);
+        numbers.push(value.number);
+        avgDuration.push(value.avgDuration);
+      });
+      this.timeChartOptions = {
+        series: [
+          {
+            name: 'amount of drives',
+            type: 'bar',
+            data: numbers
+          },
+          {
+            name: 'avgDuration',
+            type: 'line',
+            data: avgDuration
+          }
+        ],
+        chart: {
+          type: 'line',
+          height: chartHeight,
+          zoom: {
+            enabled: true
+          }
+        },
+        dataLabels: {
+          enabled: false
+        },
+        stroke: {
+          curve: 'straight'
+        },
+        xaxis: {
+          categories: timeFrame,
+          tickAmount: 24
+        },
+        yaxis: [{
+          title: {
+            text: 'number of drives',
+          },
+        }, {
+          opposite: true,
+          title: {
+            text: 'avgDuration'
+          }
+        }],
+        legend: {
+          horizontalAlign: 'left'
+        },
+        fill: {
+          opacity: 1
+        }
+      };
+    });
+
     this.map.draw_dashboard_map(this.station.lat, this.station.lon, 17);
     this.map.draw_dashboard_station_marker(this.station.lat, this.station.lon);
   }
@@ -170,15 +238,28 @@ export class DashboardComponent implements OnInit {
   onSubmit(): void {
     this.actualStartDate = this.form.get('daterange').value.start;
     this.actualEndDate = this.form.get('daterange').value.end;
-    this.service.fetch_dashboard_station_to(this.station.id, this.actualStartDate.toISOString().substring(0, 10), this.actualEndDate.toISOString().substring(0, 10)).then((source) => {
+    this.service.fetch_dashboard_station_to(
+      this.station.id,
+      this.actualStartDate.toISOString().substring(0, 10),
+      this.actualEndDate.toISOString().substring(0, 10)
+    ).then((source) => {
       this.stationToSource = source;
       this.changeDetectorRefs.detectChanges();
     });
-    this.service.fetch_dashboard_station_from(this.station.id, this.actualStartDate.toISOString().substring(0, 10), this.actualEndDate.toISOString().substring(0, 10)).then((source) => {
+    this.service.fetch_dashboard_station_from(
+      this.station.id,
+      this.actualStartDate.toISOString().substring(0, 10),
+      this.actualEndDate.toISOString().substring(0, 10)
+    ).then((source) => {
       this.stationFromSource = source;
       this.changeDetectorRefs.detectChanges();
     });
-    this.service.fetch_dashboard_station_duration(this.station.id, this.actualStartDate.toISOString().substring(0, 10), this.actualEndDate.toISOString().substring(0, 10)).then((source) => {
+    this.service.fetch_dashboard_station_charts(
+      this.station.id,
+      this.actualStartDate.toISOString().substring(0, 10),
+      this.actualEndDate.toISOString().substring(0, 10),
+      'duration'
+    ).then((source) => {
       const numbers = [];
       const minutesGroup = [];
       source.forEach(value => {
@@ -189,12 +270,12 @@ export class DashboardComponent implements OnInit {
         series: [
           {
             name: 'borrow-duration',
-            data: [...numbers]
+            data: numbers
           }
         ],
         chart: {
           type: 'bar',
-          height: 450
+          height: chartHeight
         },
         plotOptions: {
           bar: {
@@ -212,7 +293,12 @@ export class DashboardComponent implements OnInit {
           colors: ['transparent']
         },
         xaxis: {
-          categories: [...minutesGroup]
+          categories: minutesGroup,
+          labels: {
+            formatter: value => {
+              return value + ' min';
+            }
+          }
         },
         yaxis: {
           title: {
@@ -224,5 +310,67 @@ export class DashboardComponent implements OnInit {
         }
       };
     });
+    this.service.fetch_dashboard_station_charts(
+      this.station.id,
+      this.actualStartDate.toISOString().substring(0, 10),
+      this.actualEndDate.toISOString().substring(0, 10),
+      'time'
+    ).then((source) => {
+      const timeFrame = [];
+      const numbers = [];
+      const avgDuration = [];
+      source.forEach(value => {
+        timeFrame.push(value.timeFrame);
+        numbers.push(value.number);
+        avgDuration.push(value.avgDuration);
+      });
+      this.timeChartOptions = {
+        series: [
+          {
+            name: 'amount of drives',
+            type: 'bar',
+            data: numbers
+          },
+          {
+            name: 'avgDuration',
+            type: 'line',
+            data: avgDuration
+          }
+        ],
+        chart: {
+          type: 'line',
+          height: chartHeight,
+          zoom: {
+            enabled: true
+          }
+        },
+        dataLabels: {
+          enabled: false
+        },
+        stroke: {
+          curve: 'straight'
+        },
+        xaxis: {
+          categories: timeFrame,
+          tickAmount: 24
+        },
+        yaxis: [{
+          title: {
+            text: 'number of drives',
+          },
+        }, {
+          opposite: true,
+          title: {
+            text: 'avgDuration'
+          }
+        }],
+        legend: {
+          horizontalAlign: 'left'
+        },
+        fill: {
+          opacity: 1
+        }
+      };
+    });
   }
 }