Merge pull request #245 from amosproj/feat/xd-215

feat: add pump metrics inside facility details page (XD-215)

libs/facilities/frontend/domain/src/lib/application/facades/details.facade.ts

@@ -1,6 +1,6 @@
 import { inject, Injectable } from '@angular/core';
 import { faker } from '@faker-js/faker';
-import { map } from 'rxjs';
+import { map, tap } from 'rxjs';
 
 import { FacilitiesRequestService } from '../../infrastructure/facilities-request.service';
 import { TimeSeriesRequestService } from '../../infrastructure/timeseries-request.service';
@@ -33,6 +33,7 @@ export class XdDetailsFacade {
 					heading: timeSeriesItem.name,
 					subheading: timeSeriesItem.description,
 					status: timeSeriesItem.status,
+                    metrics: timeSeriesItem.metrics,
                     indicatorMsg: timeSeriesItem.indicatorMsg,
 					pumps: faker.number.int({ min: 0, max: 99 }),
 					location: timeSeriesItem.location,

libs/facilities/frontend/view/src/lib/components/detail/detail.page.html

@@ -17,6 +17,9 @@
         @if(this.envChart(); as envChart){
             <div echarts [options]="envChart" [theme]="theme()"></div>
         }
+        @if(this.metricsChart(); as metricsChart){
+            <div echarts [options]="metricsChart" [theme]="theme()"></div>
+        }
 
 		<ix-card variant="insight" class="h-full w-full p-4">
 			<ix-card-content>
@@ -60,10 +63,10 @@
                     There are {{ facility.notification }} open cases regarding this facility
                 </ix-typography>
                 <div class="mt-auto p-2">
-                    <ix-button 
+                    <ix-button
                         [routerLink]="['/cases/create',{ facilityId: facility.id }]"
-                    > 
-                        New Case 
+                    >
+                        New Case
                     </ix-button>
                 </div>
             </ix-card-content>

libs/facilities/frontend/view/src/lib/components/detail/detail.page.ts

@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import {
-	ChangeDetectionStrategy,
-	Component,
-	computed,
-	inject,
-	OnInit,
-	Signal,
-	signal,
-	ViewEncapsulation,
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    OnInit,
+    Signal,
+    signal,
+    ViewEncapsulation,
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
@@ -18,10 +18,16 @@ import { IxModule, ModalService } from '@siemens/ix-angular';
 import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
 import * as echarts from 'echarts';
 import { EChartsOption } from 'echarts';
+import { IPumpMetrics } from 'facilities-shared-models';
+import { defaults, map } from 'lodash';
 import { NgxEchartsModule } from 'ngx-echarts';
+import { $enum } from 'ts-enum-util';
 
-import { Colors } from './colors';
 import LockModalComponent from './lock-modal/lockModal.component';
+import { Colors } from './models/colors';
+import { EMetricsCategory } from './models/metrics-category.enum';
+import { METRIC_CATEGORY_COLOR_INFORMATION } from './models/metrics-category-information.map';
+import { PUMP_METRICS_FULL_NAME_MAP } from './models/pump-metrics-full-name.map';
 
 @Component({
 	selector: 'lib-detail',
@@ -54,6 +60,18 @@ export class XdDetailPage implements OnInit {
 		}),
 	);
 	private readonly defaultOptions: EChartsOption = {
+        tooltip: {
+            trigger: 'axis',
+            renderMode: 'auto',
+            axisPointer: {
+                axis: 'auto',
+                crossStyle: {
+                    textStyle: {
+                        precision: 2,
+                    }
+                }
+            }
+        },
 		xAxis: {
 			type: 'time',
 			name: 'Time',
@@ -75,6 +93,35 @@ export class XdDetailPage implements OnInit {
 			top: 80,
 		},
 	};
+    private readonly barChartOptions: EChartsOption = {
+        tooltip: {
+            trigger: 'axis',
+            renderMode: 'auto',
+            axisPointer: {
+                axis: 'auto',
+                crossStyle: {
+                    textStyle: {
+                        precision: 2,
+                    }
+                }
+            }
+        },
+        legend: {
+            top: 30,
+            left: 80,
+        },
+        grid: {
+            top: 80,
+        },
+        title: {
+            text: 'Pump Metrics',
+            left: 'center',
+        },
+        yAxis: {
+            type: 'value',
+            nameLocation: 'middle',
+        },
+    }
 	private readonly pumpOptions: EChartsOption = {
 		...this.defaultOptions,
 		title: {
@@ -162,21 +209,59 @@ export class XdDetailPage implements OnInit {
 			},
 		],
 	};
-	protected readonly envChart: Signal<EChartsOption | undefined> = computed(() => {
-		const envData = this.envData();
-		if (!envData) return undefined;
 
-		const envChart = {
-			...this.envOptions,
-		};
+    protected readonly envChart: Signal<EChartsOption | undefined> = computed(() => {
+        const envData = this.envData();
+        if (!envData) return undefined;
 
-		if (!envChart.series || !(envChart.series instanceof Array)) return undefined;
+        const envChart = {
+            ...this.envOptions,
+        };
+
+        if (!envChart.series || !(envChart.series instanceof Array)) return undefined;
+
+        envChart.series[0].data = envData.map((item) => [ item.time, item['Temperature'] ]);
+        envChart.series[1].data = envData.map((item) => [ item.time, item['Humidity'] ]);
+        envChart.series[2].data = envData.map((item) => [ item.time, item['Pressure'] ]);
+        return envChart;
+    });
+
+    protected readonly metricsChart: Signal<EChartsOption | undefined> = computed(() => {
+        const facility = this.facility();
+        if (!facility) return undefined;
+
+        const metrics = facility.metrics;
+
+        if (!metrics || Array.isArray(metrics) && metrics.length === 0) return undefined;
+
+        const xAxisData = map(metrics, item => PUMP_METRICS_FULL_NAME_MAP[item.name].replace(/ /g, '\n').trim());
+        const seriesKeys = $enum(EMetricsCategory).getValues();
+
+        const seriesData = map(seriesKeys, (key) => {
+            return {
+                name: METRIC_CATEGORY_COLOR_INFORMATION[key].abbreviation,
+                data: map(metrics, (item: IPumpMetrics) => parseFloat(item[key]!.toFixed(2))),
+                type: 'bar',
+                emphasis: { focus: 'series' },
+                itemStyle: { color: METRIC_CATEGORY_COLOR_INFORMATION[key].color },
+            };
+        });
+
+        return defaults(this.barChartOptions, {
+            xAxis: {
+                type: 'category',
+                data: xAxisData,
+                nameLocation: 'middle',
+                axisLabel: {
+                    width: 100,
+                    overflow: 'truncate',
+                    interval: 0,
+                },
+            },
+            series: seriesData,
+        });
+    });
 
-		envChart.series[0].data = envData.map((item) => [ item.time, item['Temperature'] ]);
-		envChart.series[1].data = envData.map((item) => [ item.time, item['Humidity'] ]);
-		envChart.series[2].data = envData.map((item) => [ item.time, item['Pressure'] ]);
-		return envChart;
-	});
 
 	constructor(
         protected router: Router,

libs/facilities/frontend/view/src/lib/components/detail/colors.ts → libs/facilities/frontend/view/src/lib/components/detail/models/colors.ts

@@ -4,4 +4,10 @@ export enum Colors {
     PRESSURE1 = '#00FF00',
     PRESSURE2 = '#bd11bd',
     MOTORCURRENT = '#40E0D0',
+    BLUE = '#3b82f6',
+    LIME = '#84cc16',
+    GREEN = '#10b981',
+    PURPLE = '#8b5cf6',
+    PINK = '#ec4899',
+    STONE = '#64748b',
 }

libs/facilities/frontend/view/src/lib/components/detail/models/metrics-category-information.map.ts

@@ -0,0 +1,11 @@
+import { Colors } from './colors';
+import { EMetricsCategory } from './metrics-category.enum';
+
+export const METRIC_CATEGORY_COLOR_INFORMATION: Record<EMetricsCategory, { color: Colors, abbreviation: string }> = {
+    [EMetricsCategory.MIN]: { color: Colors.LIME, abbreviation: 'Min' },
+    [EMetricsCategory.MAX]: { color: Colors.PINK, abbreviation: 'Max' },
+    [EMetricsCategory.MEAN]: { color: Colors.GREEN, abbreviation: 'Mean' },
+    [EMetricsCategory.VARIANCE]: { color: Colors.STONE, abbreviation: 'Variance' },
+    [EMetricsCategory.STANDARD_DEVIATION]: { color: Colors.PURPLE, abbreviation: 'StdDev' },
+    [EMetricsCategory.COEFFICIENT_OF_VARIATION]: { color: Colors.BLUE, abbreviation: 'CV' },
+}

libs/facilities/frontend/view/src/lib/components/detail/models/metrics-category.enum.ts

@@ -0,0 +1,11 @@
+/**
+ * Enum for metric category which label the metric chart
+ */
+export enum EMetricsCategory {
+    MIN='min',
+    MAX='max',
+    MEAN='mean',
+    VARIANCE='variance',
+    STANDARD_DEVIATION='standardDeviation',
+    COEFFICIENT_OF_VARIATION='coefficientOfVariation'
+}

libs/facilities/frontend/view/src/lib/components/detail/models/pump-metrics-full-name.map.ts

@@ -0,0 +1,9 @@
+import { EPumpMetricsName } from 'facilities-shared-models';
+
+export const PUMP_METRICS_FULL_NAME_MAP: Record<EPumpMetricsName, string> = {
+    [EPumpMetricsName.MotorCurrent]: 'Motor Current (V)',
+    [EPumpMetricsName.PressureOut]: 'Pressure Out (hPa)',
+    [EPumpMetricsName.StuffingBoxTemperature]: 'Stuffing Box Temperature (°C)',
+    [EPumpMetricsName.PressureIn]: 'Pressure In (hPa)',
+    [EPumpMetricsName.Flow]: 'Flow (l/s)'
+}