add routerLink to mat-table to later route to given Station

* adjust color to match bootstrap blue

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

@@ -48,7 +48,7 @@
               <mat-card-title>{{bikePoint?.commonName}}</mat-card-title>
             </mat-card-header>
             <mat-card-content>
-            <p>{{bikePoint?.status.NbBikes}}</p>
+              <p>{{bikePoint?.status.NbBikes}}</p>
             </mat-card-content>
           </mat-card>
         </div>
@@ -71,7 +71,8 @@
         <table [dataSource]="stationToSource" class="mat-elevation-z8" fxFill mat-table>
           <ng-container matColumnDef="endStationName">
             <th *matHeaderCellDef mat-header-cell> station of lend destination</th>
-            <td *matCellDef="let element" mat-cell> {{element.endStationName}} </td>
+            <td *matCellDef="let element" mat-cell><a
+              [routerLink]="['dashboard/', element.id]">{{element.endStationName}}</a></td>
           </ng-container>
 
           <ng-container matColumnDef="number">
@@ -92,7 +93,8 @@
         <table [dataSource]="stationFromSource" class="mat-elevation-z9" fxFill mat-table>
           <ng-container matColumnDef="startStationName">
             <th *matHeaderCellDef mat-header-cell> station of lend origin</th>
-            <td *matCellDef="let element" mat-cell> {{element.startStationName}} </td>
+            <td *matCellDef="let element" mat-cell><a
+              [routerLink]="['dashboard/', element.id]"> {{element.startStationName}}</a></td>
           </ng-container>
 
           <ng-container matColumnDef="number">
@@ -121,6 +123,7 @@
           <div class="station-dashboard-borrow-duration" fxFlex="97%">
             <apx-chart
               [chart]="durationChartOptions.chart"
+              [colors]="durationChartOptions.colors"
               [dataLabels]="durationChartOptions.dataLabels"
               [fill]="durationChartOptions.fill"
               [legend]="durationChartOptions.legend"
@@ -144,6 +147,7 @@
           <div class="station-dashboard-borrow-time" fxFlex>
             <apx-chart
               [chart]="timeChartOptions.chart"
+              [colors]="timeChartOptions.colors"
               [dataLabels]="timeChartOptions.dataLabels"
               [fill]="timeChartOptions.fill"
               [series]="timeChartOptions.series"

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

@@ -6,6 +6,10 @@ mat-sidenav-content {
   flex: 1 1 auto;
 }
 
+a {
+  color: #017bfe;
+}
+
 .button-back:hover, .button-wiki:hover {
   background: #5a34a0;
 }

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

@@ -27,6 +27,7 @@ export type ChartOptions = {
   title: ApexTitleSubtitle
   series: ApexAxisChartSeries;
   chart: ApexChart;
+  colors: string[];
   dataLabels: ApexDataLabels;
   plotOptions: ApexPlotOptions;
   yaxis: ApexYAxis | ApexYAxis[];
@@ -38,7 +39,7 @@ export type ChartOptions = {
   noData: ApexNoData;
 };
 
-const chartHeight = 450;
+const chartHeight = 460;
 
 @Component({
   selector: 'app-dashboard',
@@ -76,9 +77,6 @@ export class DashboardComponent implements OnInit {
       chart: {
         type: 'bar'
       },
-      dataLabels: {
-        enabled: false
-      },
       noData: {
         text: 'Loading...'
       }
@@ -86,10 +84,7 @@ export class DashboardComponent implements OnInit {
     this.timeChartOptions = {
       series: [],
       chart: {
-        type: 'bar'
+        type: 'line'
-      },
-      dataLabels: {
-        enabled: false
       },
       noData: {
         text: 'Loading...'
@@ -282,6 +277,7 @@ export class DashboardComponent implements OnInit {
           type: 'bar',
           height: chartHeight
         },
+        colors: ['#017bfe'],
         plotOptions: {
           bar: {
             horizontal: false,
@@ -349,6 +345,7 @@ export class DashboardComponent implements OnInit {
             enabled: true
           }
         },
+        colors: ['#017bfe', '#51ca49'],
         dataLabels: {
           enabled: false
         },