add Chart for Availability to Dashboard

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

@@ -18,16 +18,33 @@
   <mat-sidenav-content class="mat-sidenav-content" fxFlex fxLayout="column" fxLayoutAlign="center">
     <div class="container-map" fxFlex="100%" fxLayout="row" fxLayoutAlign="center">
 
-      <div class="input-container" fxFlex="25%" fxLayout="column">
+      <div class="input-container" fxFlex="35%" fxLayout="column">
         <div class="user-input" fxFlex fxLayout="column" fxLayoutAlign="space-between">
-          <div class="container-info" fxFlex="60%">
+          <div class="container-info" fxFlex="55%">
             <mat-card fxFlex="100%">
               <mat-card-header>
                 <div class="example-header-image" mat-card-avatar></div>
                 <mat-card-title>{{bikePoint?.commonName}}</mat-card-title>
               </mat-card-header>
               <mat-card-content>
-                <p>{{bikePoint?.status.NbBikes}}</p>
+                <div class="chart-bikepoint-availability">
+                  <div id="chart">
+                    <apx-chart
+                      [chart]="bikePointChartOptions.chart"
+                      [colors]="bikePointChartOptions.colors"
+                      [dataLabels]="bikePointChartOptions.dataLabels"
+                      [fill]="bikePointChartOptions.fill"
+                      [legend]="bikePointChartOptions.legend"
+                      [plotOptions]="bikePointChartOptions.plotOptions"
+                      [series]="bikePointChartOptions.series"
+                      [stroke]="bikePointChartOptions.stroke"
+                      [title]="bikePointChartOptions.title"
+                      [tooltip]="bikePointChartOptions.tooltip"
+                      [xaxis]="bikePointChartOptions.xaxis"
+                      [yaxis]="bikePointChartOptions.yaxis"
+                    ></apx-chart>
+                  </div>
+                </div>
               </mat-card-content>
             </mat-card>
           </div>
@@ -65,8 +82,6 @@
           </div>
         </div>
       </mat-card>
-
-
     </div>
 
 
@@ -76,7 +91,7 @@
           <ng-container matColumnDef="endStationName">
             <th *matHeaderCellDef mat-header-cell> station of lend destination</th>
             <td *matCellDef="let element" mat-cell><a
-              [routerLink]="['dashboard/', element.id]">{{element.endStationName}}</a></td>
+              [routerLink]="['/dashboard/', element.id]">{{element.endStationName}}</a></td>
           </ng-container>
 
           <ng-container matColumnDef="number">
@@ -98,7 +113,7 @@
           <ng-container matColumnDef="startStationName">
             <th *matHeaderCellDef mat-header-cell> station of lend origin</th>
             <td *matCellDef="let element" mat-cell><a
-              [routerLink]="['dashboard/', element.id]"> {{element.startStationName}}</a></td>
+              [routerLink]="['/dashboard/', element.id]"> {{element.startStationName}}</a></td>
           </ng-container>
 
           <ng-container matColumnDef="number">

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

@@ -51,6 +51,7 @@ export class DashboardComponent implements OnInit {
   @ViewChild('Station-Dashboard-Borrow-Duration') chart: ChartComponent;
   public durationChartOptions: Partial<ChartOptions>;
   public timeChartOptions: Partial<ChartOptions>;
+  public bikePointChartOptions: Partial<ChartOptions>;
   displayedColumnsTo: string[] = ['endStationName', 'number', 'avgDuration'];
   displayedColumnsFrom: string[] = ['startStationName', 'number', 'avgDuration'];
   stationToSource = new MatTableDataSource<any>();
@@ -90,6 +91,15 @@ export class DashboardComponent implements OnInit {
         text: 'Loading...'
       }
     };
+    this.bikePointChartOptions = {
+      series: [],
+      chart: {
+        type: 'bar'
+      },
+      noData: {
+        text: 'Loading...'
+      }
+    };
   }
 
   ngOnInit(): void {
@@ -109,6 +119,83 @@ export class DashboardComponent implements OnInit {
 
     this.service.fetchBikePointForStatus(this.route.snapshot.paramMap.get('id')).then(data => {
       this.bikePoint = data;
+      const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks;
+      this.bikePointChartOptions = {
+        series: [
+          {
+            name: 'Bikes',
+            data: [data.status.NbBikes]
+          },
+          {
+            name: 'Empty docks',
+            data: [data.status.NbEmptyDocks]
+          },
+          {
+            name: 'Blocked docks',
+            data: [NbBlockedDocks]
+          }
+        ],
+        colors: ['#51ca49', '#8f8e8e', '#f00'],
+        chart: {
+          type: 'bar',
+          height: 180,
+          stacked: true,
+          toolbar: {
+            show: false
+          }
+        },
+        plotOptions: {
+          bar: {
+            horizontal: true,
+            dataLabels: {
+              position: 'center'
+            }
+          }
+        },
+        dataLabels: {
+          enabled: true,
+          style: {
+            fontSize: '20px',
+            colors: ['#fff']
+          }
+        },
+        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: data.status.NbDocks
+        },
+        tooltip: {
+          enabled: false,
+        },
+        fill: {
+          opacity: 1
+        },
+        legend: {
+          position: 'bottom',
+          horizontalAlign: 'right',
+          fontSize: '14px'
+        }
+      };
     });
   }