Update dashboard page component styles and add router links

akozma89 · Jan 3, 2024 · 258d0e8 · 258d0e8
1 parent 760f390
commit 258d0e8
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 24 deletions.
diff --git a/src/app/interfaces/machine-events-options.ts b/src/app/interfaces/machine-events-options.ts
@@ -6,6 +6,14 @@ export const enum MachineStatusMap {
     finished = 'finished',
 }
 
+export const MachineStatusFilters: StatusFilterOption[] = [
+    { text: 'Idle', value: MachineStatusMap.idle },
+    { text: 'Running', value: MachineStatusMap.running },
+    { text: 'Errored', value: MachineStatusMap.errored },
+    { text: 'Repaired', value: MachineStatusMap.repaired },
+    { text: 'Finished', value: MachineStatusMap.finished },
+];
+
 export const MachineColorStatusMap = {
     [MachineStatusMap.idle]: 'info',
     [MachineStatusMap.running]: 'warning',
@@ -16,6 +24,12 @@ export const MachineColorStatusMap = {
 
 export type MachineStatus = 'idle' | 'running' | 'errored' | 'repaired';
 
+export interface StatusFilterOption {
+    text: string;
+    value: string;
+    byDefault?: boolean;
+}
+
 export interface MachineEventsOptions {
     timestamp: string;
     status: MachineStatus;

diff --git a/src/app/pages/dashboard/components/dashboard-page/dashboard-page.component.css b/src/app/pages/dashboard/components/dashboard-page/dashboard-page.component.css
@@ -7,6 +7,10 @@ nz-row + nz-row {
   border-radius: 5px;
 }
 
+nz-statistic {
+  cursor: pointer;
+}
+
 nz-row:not(.statistic-row) {
   height: 50vh;
 }
@@ -22,20 +26,25 @@ nz-row:not(.statistic-row) nz-col {
   padding: 10px;
 }
 
+.color-info {
+  transition: background-color 0.3s ease;
+  background-color: transparent;
+}
+
 .color-info:hover {
-  background-color: #1890ff;
+  background-color: #1682e7;
 }
 
 .color-warning:hover {
   background-color: #faad14;
 }
 
 .color-error:hover {
-  background-color: #ff4d4f;
+  background-color: #cf4648;
 }
 
 .color-success:hover {
-  background-color: #52c41a;
+  background-color: #5AA454;
 }
 
 @media screen and (max-width: 1199px) {

diff --git a/src/app/pages/dashboard/components/dashboard-page/dashboard-page.component.html b/src/app/pages/dashboard/components/dashboard-page/dashboard-page.component.html
@@ -6,6 +6,7 @@
         class="color-{{ MachineColorStatusMap.idle }}"
     >
         <nz-statistic
+            [routerLink]="['/machines']"
             [nzValue]="((machines$ | async)?.length | number)!"
             [nzTitle]="'Total Machines'"
         ></nz-statistic>
@@ -17,6 +18,8 @@
         class="color-{{ MachineColorStatusMap.errored }}"
     >
         <nz-statistic
+            [routerLink]="['/machines']"
+            [queryParams]="{ statusFilters: 'errored' }"
             [nzValue]="((erroredMachines$ | async)?.length | number)!"
             [nzTitle]="'Errored Machines'"
         ></nz-statistic>
@@ -28,6 +31,8 @@
         class="color-{{ MachineColorStatusMap.repaired }}"
     >
         <nz-statistic
+            [routerLink]="['/machines']"
+            [queryParams]="{ statusFilters: 'repaired' }"
             [nzValue]="((repairedMachines$ | async)?.length | number)!"
             [nzTitle]="'Repaired Machines'"
         ></nz-statistic>
@@ -39,6 +44,8 @@
         class="color-{{ MachineColorStatusMap.idle }}"
     >
         <nz-statistic
+            [routerLink]="['/machines']"
+            [queryParams]="{ statusFilters: 'idle' }"
             [nzValue]="((idleMachines$ | async)?.length | number)!"
             [nzTitle]="'Idle Machines'"
         ></nz-statistic>
@@ -50,6 +57,8 @@
         class="color-{{ MachineColorStatusMap.running }}"
     >
         <nz-statistic
+            [routerLink]="['/machines']"
+            [queryParams]="{ statusFilters: 'running' }"
             [nzValue]="((runningMachines$ | async)?.length | number)!"
             [nzTitle]="'Running Machines'"
         ></nz-statistic>
@@ -61,6 +70,8 @@
         class="color-{{ MachineColorStatusMap.finished }}"
     >
         <nz-statistic
+            [routerLink]="['/machines']"
+            [queryParams]="{ statusFilters: 'finished' }"
             [nzValue]="((finishedMachines$ | async)?.length | number)!"
             [nzTitle]="'Finished Machines'"
         ></nz-statistic>
@@ -69,6 +80,7 @@
 <nz-row class="hidden-mobile">
     <h2>Machine Status Distribution</h2>
     <ngx-charts-bar-horizontal-stacked
+        (select)="selectChartItem($event)"
         [scheme]="stackedMachineStatusDistribution.colorScheme"
         [results]="stackedMachineStatusDistribution.data$ | async"
         [gradient]="stackedMachineStatusDistribution.gradient"

diff --git a/src/app/pages/dashboard/components/dashboard-page/dashboard-page.component.ts b/src/app/pages/dashboard/components/dashboard-page/dashboard-page.component.ts
@@ -1,3 +1,4 @@
+import { Router, RouterLink } from '@angular/router';
 import {
     stackedDistributionOptions,
     pieBreakdownOptions,
@@ -24,7 +25,13 @@ import { Observable, map } from 'rxjs';
     selector: 'app-dashboard-page',
     templateUrl: './dashboard-page.component.html',
     styleUrls: ['./dashboard-page.component.css'],
-    imports: [CommonModule, NzGridModule, NzStatisticModule, NgxChartsModule],
+    imports: [
+        CommonModule,
+        NzGridModule,
+        NzStatisticModule,
+        NgxChartsModule,
+        RouterLink,
+    ],
 })
 export class DashboardPageComponent {
     readonly MachineColorStatusMap = MachineColorStatusMap;
@@ -87,9 +94,26 @@ export class DashboardPageComponent {
         ),
     };
 
-    constructor(private store: Store<AppStore>) {}
+    constructor(
+        private store: Store<AppStore>,
+        private router: Router
+    ) {}
 
-    buildStackedMachineStatusDistribution(machines: Machine[]) {
+    selectChartItem(event: {
+        name: string;
+        value: number;
+        label: string;
+        series: string;
+    }) {
+        this.router.navigate(['/machines'], {
+            queryParams: {
+                machineTypeFilters: event.label.toLowerCase(),
+                statusFilters: event.series.toLowerCase(),
+            },
+        });
+    }
+
+    private buildStackedMachineStatusDistribution(machines: Machine[]) {
         const machineTypes = machines.reduce(
             (acc: string[], machine: Machine) => {
                 if (!acc.includes(machine.machine_type)) {
@@ -169,7 +193,7 @@ export class DashboardPageComponent {
         return [idle, running, errored, repaired, finished];
     }
 
-    buildPieMachineStatusBreakdown(machines: Machine[]) {
+    private buildPieMachineStatusBreakdown(machines: Machine[]) {
         const machineTypes = machines.reduce(
             (acc: string[], machine: Machine) => {
                 if (!acc.includes(machine.machine_type)) {

diff --git a/src/app/pages/machines/components/machines-page/machines-page.component.ts b/src/app/pages/machines/components/machines-page/machines-page.component.ts
@@ -1,6 +1,6 @@
-import { RouterModule } from '@angular/router';
+import { RouterModule, ActivatedRoute, ParamMap } from '@angular/router';
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import {
     NzTableFilterFn,
@@ -9,14 +9,17 @@ import {
     NzTableSortFn,
     NzTableSortOrder,
 } from 'ng-zorro-antd/table';
-import { AppStore } from '../../../../interfaces/app-store';
-import { Machine } from '../../../../models/machine';
-import { selectMachines } from '../../../../stores/machines/machines.selectors';
-import { HelperService } from '../../../../services/helper.service';
-import { Observable } from 'rxjs';
-import { MachineStatusMap } from '@interfaces/machine-events-options';
+import { AppStore } from '@interfaces/app-store';
+import { Machine } from '@models/machine';
+import { selectMachines } from '@stores/machines/machines.selectors';
+import { HelperService } from '@services/helper.service';
+import { Observable, Subscription } from 'rxjs';
 import { selectSettingsFeature } from '@stores/settings/settings.selectors';
 import { UpdatePageSizeAction } from '@stores/settings/settings.actions';
+import {
+    MachineStatusFilters,
+    StatusFilterOption,
+} from '@interfaces/machine-events-options';
 
 interface ColumnItem {
     left?: boolean;
@@ -36,7 +39,7 @@ interface ColumnItem {
     styleUrls: ['./machines-page.component.css'],
     imports: [CommonModule, NzTableModule, RouterModule],
 })
-export class MachinesPageComponent {
+export class MachinesPageComponent implements OnInit, OnDestroy {
     machines$: Observable<Machine[]> = this.store
         .select(selectMachines)
         .pipe(HelperService.mapObjectKeysToArray());
@@ -77,13 +80,7 @@ export class MachinesPageComponent {
                 a.status.localeCompare(b.status),
             sortDirections: ['ascend', 'descend', null],
             filterMultiple: true,
-            listOfFilter: [
-                { text: 'Idle', value: MachineStatusMap.idle },
-                { text: 'Running', value: MachineStatusMap.running },
-                { text: 'Errored', value: MachineStatusMap.errored },
-                { text: 'Repaired', value: MachineStatusMap.repaired },
-                { text: 'Finished', value: MachineStatusMap.finished },
-            ],
+            listOfFilter: MachineStatusFilters,
             filterFn: (list: string[], item: Machine) =>
                 list.some((status) => item.status.indexOf(status) !== -1),
         },
@@ -119,9 +116,51 @@ export class MachinesPageComponent {
         },
     ];
 
-    constructor(private store: Store<AppStore>) {}
+    private subscriptions = new Subscription();
+
+    constructor(
+        private store: Store<AppStore>,
+        private activatedRoute: ActivatedRoute
+    ) {}
+
+    ngOnInit(): void {
+        this.subscriptions.add(
+            this.activatedRoute.queryParamMap.subscribe((params) => {
+                this.filerOnStatusQueryParams(params);
+                this.filterOnMachineTypeQueryParams(params);
+            })
+        );
+    }
+
+    ngOnDestroy(): void {
+        this.subscriptions.unsubscribe();
+    }
 
     onPageSizeChange(tablePageSize: number): void {
         this.store.dispatch(UpdatePageSizeAction({ tablePageSize }));
     }
+
+    filerOnStatusQueryParams(params: ParamMap): void {
+        const statusParam: string[] =
+            params.get('statusFilters')?.split(',') || [];
+
+        this.listOfColumns[2].listOfFilter.forEach(
+            (filter: StatusFilterOption) => {
+                filter.byDefault = !!statusParam.some(
+                    (status) => status === filter.value
+                );
+            }
+        );
+    }
+
+    filterOnMachineTypeQueryParams(params: ParamMap): void {
+        const machineTypeParam: string[] =
+            params.get('machineTypeFilters')?.split(',') || [];
+
+        this.listOfColumns[1].listOfFilter.forEach((filter) => {
+            filter.byDefault = !!machineTypeParam.some(
+                (machineType) => machineType === filter.value
+            );
+        });
+    }
 }