add final chart for popup-component

projects/project-3/frontend/src/app/map/pop-up/pop-up.component.html

@@ -1,12 +1,30 @@
-<b>{{station.commonName}}</b><br>
-<b>{{station.status.NbBikes}}</b><br>
-<b>{{station.status.NbDocks}}</b><br>
-<div id="chart">
+<mat-card class="mat-elevation-z0" fxFlex fxLayout="column" style="padding: 0">
+  <mat-card-header fxFlex>
+    <mat-card-title>
+      {{station?.commonName}}
+    </mat-card-title>
+  </mat-card-header>
+  <mat-card-content fxFlex fxLayout="column" fxLayoutAlign="center center">
+    <div id="chart">
       <apx-chart
         [chart]="chartOptions.chart"
-    [labels]="chartOptions.labels"
+        [colors]="chartOptions.colors"
+        [dataLabels]="chartOptions.dataLabels"
+        [fill]="chartOptions.fill"
+        [legend]="chartOptions.legend"
         [plotOptions]="chartOptions.plotOptions"
         [series]="chartOptions.series"
+        [stroke]="chartOptions.stroke"
+        [title]="chartOptions.title"
+        [tooltip]="chartOptions.tooltip"
+        [xaxis]="chartOptions.xaxis"
+        [yaxis]="chartOptions.yaxis"
       ></apx-chart>
-</div>
-<button (click)="route()" color="accent" id="route-button" mat-raised-button>ROUTE</button>
+    </div>
+    <div class="button" fxFlex>
+      <button (click)="route()" color="" id="route-button" mat-raised-button>Go to dashboard</button>
+    </div>
+  </mat-card-content>
+  <mat-card-actions>
+  </mat-card-actions>
+</mat-card>

projects/project-3/frontend/src/app/map/pop-up/pop-up.component.scss

@@ -3,9 +3,12 @@
   padding: 0;
 }
 
-#chart {
-  padding: 0;
-  max-width: 400px;
-  max-height: 400px;
-  margin: 35px auto;
+.mat-card {
+  width: 30em;
+}
+
+#route-button {
+  padding: 0 10px;
+  background-color: #017bfe;
+  color: white;
 }

projects/project-3/frontend/src/app/map/pop-up/pop-up.component.ts

@@ -1,14 +1,33 @@
 import {Component, OnInit} from '@angular/core';
 import {IMapBikePoint} from '../../service/domain/map-bike-point';
 import {Router} from '@angular/router';
-
-import {ApexChart, ApexNonAxisChartSeries, ApexPlotOptions} from 'ng-apexcharts';
+import {
+  ApexAxisChartSeries,
+  ApexChart,
+  ApexDataLabels,
+  ApexFill,
+  ApexLegend,
+  ApexPlotOptions,
+  ApexStroke,
+  ApexTitleSubtitle,
+  ApexTooltip,
+  ApexXAxis,
+  ApexYAxis
+} from 'ng-apexcharts';
 
 export type ChartOptions = {
-  series: ApexNonAxisChartSeries;
+  series: ApexAxisChartSeries;
   chart: ApexChart;
-  labels: string[];
+  colors: string[];
+  dataLabels: ApexDataLabels;
   plotOptions: ApexPlotOptions;
+  xaxis: ApexXAxis;
+  yaxis: ApexYAxis;
+  stroke: ApexStroke;
+  title: ApexTitleSubtitle;
+  tooltip: ApexTooltip;
+  fill: ApexFill;
+  legend: ApexLegend;
 };
 
 
@@ -25,15 +44,71 @@ export class PopUpComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    const bikes = Math.round((this.station.status.NbBikes / this.station.status.NbDocks) * 100);
+    const NbBlockedDocks = this.station.status.NbDocks - this.station.status.NbBikes - this.station.status.NbEmptyDocks;
     this.chartOptions = {
-      series: [bikes],
-      chart: {
-        height: 300,
-        width: 300,
-        type: 'radialBar'
+      series: [
+        {
+          name: 'Bikes',
+          data: [this.station.status.NbBikes]
         },
-      labels: ['Availability']
+        {
+          name: 'Empty docks',
+          data: [this.station.status.NbEmptyDocks]
+        },
+        {
+          name: 'Blocked docks',
+          data: [NbBlockedDocks]
+        }
+      ],
+      colors: ['#51ca49', '#8f8e8e', '#f00'],
+      chart: {
+        type: 'bar',
+        height: 125,
+        stacked: true,
+        toolbar: {
+          show: false
+        }
+      },
+      plotOptions: {
+        bar: {
+          horizontal: true
+        }
+      },
+      stroke: {
+        show: false
+      },
+      xaxis: {
+        labels: {
+          show: false
+        },
+        axisBorder: {
+          show: false
+        },
+        axisTicks: {
+          show: false
+        }
+      },
+      yaxis: {
+        show: false,
+        title: {
+          text: undefined
+        },
+        axisBorder: {
+          show: false
+        },
+        min: 0,
+        max: this.station.status.NbDocks
+      },
+      tooltip: {
+        enabled: false,
+      },
+      fill: {
+        opacity: 1
+      },
+      legend: {
+        position: 'bottom',
+        horizontalAlign: 'right'
+      }
     };
   }