refactor: adjustments of pr

amosproj · Jul 10, 2024 · 306c208 · 306c208
1 parent cf6bb18
commit 306c208
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 30 deletions.
diff --git a/libs/facilities/frontend/view/src/lib/components/detail/detail.page.ts b/libs/facilities/frontend/view/src/lib/components/detail/detail.page.ts
@@ -18,7 +18,7 @@ import { IxModule, ModalService } from '@siemens/ix-angular';
 import { convertThemeName, registerTheme } from '@siemens/ix-echarts';
 import * as echarts from 'echarts';
 import { EChartsOption } from 'echarts';
-import { map } from 'lodash';
+import { defaults, map } from 'lodash';
 import { NgxEchartsModule } from 'ngx-echarts';
 import { $enum } from 'ts-enum-util';
 
@@ -27,6 +27,7 @@ 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';
+import { IPumpMetrics } from 'facilities-shared-models';
 
 @Component({
 	selector: 'lib-detail',
@@ -59,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',
@@ -80,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: {
@@ -190,44 +232,34 @@ export class XdDetailPage implements OnInit {
 
         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) => ({
-            type: 'bar',
-            name: METRIC_CATEGORY_COLOR_INFORMATION[key].abbreviation,
-            data: map(metrics, item => item[key]),
-            emphasis: { focus: 'series' },
-            itemStyle: { color: METRIC_CATEGORY_COLOR_INFORMATION[key].color },
-        }));
+        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 {
-            tooltip: {
-                trigger: 'axis'
-            },
-            legend: {
-                top: 30,
-                left: 80,
-            },
-            grid: {
-                top: 80,
-            },
-            title: {
-                text: 'Pump Metrics',
-                left: 'center',
-            },
+        return defaults(this.barChartOptions, {
             xAxis: {
                 type: 'category',
                 data: xAxisData,
                 nameLocation: 'middle',
-            },
-            yAxis: {
-                type: 'value',
-                nameLocation: 'middle',
+                axisLabel: {
+                    width: 100,
+                    overflow: 'truncate',
+                    interval: 0,
+                },
             },
             series: seriesData,
-            emphasis: { focus: 'series', scaleSize: 80, scale: true },
-        };
+        });
     });
 
 

diff --git a/libs/facilities/frontend/view/src/lib/components/detail/models/pump-metrics-full-name.map.ts b/libs/facilities/frontend/view/src/lib/components/detail/models/pump-metrics-full-name.map.ts
@@ -2,7 +2,7 @@ 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',
+    [EPumpMetricsName.PressureOut]: 'Pressure Out (hPa)',
     [EPumpMetricsName.StuffingBoxTemperature]: 'Stuffing Box Temperature (°C)',
     [EPumpMetricsName.PressureIn]: 'Pressure In (hPa)',
     [EPumpMetricsName.Flow]: 'Flow (l/s)'