improvement chart and graph property

frangoteam · May 6, 2023 · 1821242 · 1821242
1 parent 0934230
commit 1821242
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 12 deletions.
diff --git a/client/src/app/editor/chart-config/chart-config.component.css b/client/src/app/editor/chart-config/chart-config.component.css
@@ -28,7 +28,7 @@
 .mychips span {
     padding-left: 3px;
     padding-right: 3px;
-    vertical-align: super;
+    vertical-align: top;
 }
 .mychips:hover {
     opacity: 0.9;

diff --git a/client/src/app/editor/chart-config/chart-config.component.ts b/client/src/app/editor/chart-config/chart-config.component.ts
@@ -24,7 +24,7 @@ export class ChartConfigComponent implements OnInit {
 
     selectedChart = <Chart>{ id: null, name: null, lines: [] };
     selectedDevice = { id: null, name: null, tags: []};
-    data = { charts: [], devices: [] };
+    data = <IDataChartConfig>{ charts: [], devices: [] };
     defaultColor = Utils.defaultColor;
     lineColor = Utils.lineColor;
 
@@ -62,7 +62,7 @@ export class ChartConfigComponent implements OnInit {
 
     onOkClick(): void {
         this.projectService.setCharts(this.data.charts);
-        this.dialogRef.close(this.data.charts);
+        this.dialogRef.close(<IDataChartResult> { charts: this.data.charts, selected: this.selectedChart });
     }
 
     onRemoveChart(index: number) {
@@ -240,3 +240,14 @@ export class DialogChartLine {
         this.dialogRef.close(this.data);
     }
 }
+
+
+interface IDataChartConfig {
+    charts: Chart[];
+    devices: Device[];
+}
+
+export interface IDataChartResult {
+    charts: Chart[];
+    selected: Chart;
+}
diff --git a/client/src/app/editor/graph-config/graph-config.component.css b/client/src/app/editor/graph-config/graph-config.component.css
@@ -28,7 +28,7 @@
 .mychips span {
     padding-left: 3px;
     padding-right: 3px;
-    vertical-align: super;
+    vertical-align: top;
 }
 .mychips:hover {
     opacity: 0.9;

diff --git a/client/src/app/editor/graph-config/graph-config.component.ts b/client/src/app/editor/graph-config/graph-config.component.ts
@@ -20,7 +20,7 @@ import { DeviceTagDialog } from '../../device/device.component';
 export class GraphConfigComponent implements OnInit {
 
     selectedGraph = new Graph(GraphType.bar);
-    data = { graphs: [], devices: [] };
+    data = <IDataGraphConfig>{ graphs: [], devices: [] };
     lineColor = Utils.lineColor;
 
     barXType = GraphBarXType;
@@ -63,7 +63,7 @@ export class GraphConfigComponent implements OnInit {
 
     onOkClick(): void {
         this.projectService.setGraphs(this.data.graphs);
-        this.dialogRef.close(this.data.graphs);
+        this.dialogRef.close(<IDataGraphResult>{ graphs: this.data.graphs, selected: this.selectedGraph });
     }
 
     onAddNewCategory() {
@@ -270,3 +270,13 @@ export class DialogGraphSource {
         this.dialogRef.close(this.data);
     }
 }
+
+interface IDataGraphConfig {
+    graphs: Graph[];
+    devices: Device[];
+}
+
+export interface IDataGraphResult {
+    graphs: Graph[];
+    selected: Graph;
+}
diff --git a/client/src/app/gauges/controls/html-chart/chart-property/chart-property.component.ts b/client/src/app/gauges/controls/html-chart/chart-property/chart-property.component.ts
@@ -10,7 +10,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { GaugeChartProperty, DateFormatType, TimeFormatType } from '../../../../_models/hmi';
 import { Chart, ChartViewType, ChartLegendMode, ChartRangeType } from '../../../../_models/chart';
 import { ChartUplotComponent } from '../chart-uplot/chart-uplot.component';
-import { ChartConfigComponent } from '../../../../editor/chart-config/chart-config.component';
+import { ChartConfigComponent, IDataChartResult } from '../../../../editor/chart-config/chart-config.component';
 import { Define } from '../../../../_helpers/define';
 import { Utils } from '../../../../_helpers/utils';
 import { ChartOptions } from '../../../../gui-helpers/ngx-uplot/ngx-uplot.component';
@@ -103,10 +103,14 @@ export class ChartPropertyComponent implements OnInit, OnDestroy {
             position: { top: '60px' },
             minWidth: '1090px', width: '1090px'
         });
-        dialogRef.afterClosed().subscribe(result => {
+        dialogRef.afterClosed().subscribe((result: IDataChartResult) => {
             if (result) {
-                this.data.charts = result;
+                this.data.charts = result.charts;
                 this.loadChart();
+                if (result.selected) {
+                    this.chartCtrl.setValue(result.selected);
+                }
+                this.onChartChanged();
             }
         });
     }

diff --git a/client/src/app/gauges/controls/html-graph/graph-property/graph-property.component.ts b/client/src/app/gauges/controls/html-graph/graph-property/graph-property.component.ts
@@ -7,7 +7,7 @@ import { Subject, ReplaySubject } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
 
 import { Graph, GraphType, GraphRangeType, GraphBarXType, GraphDateGroupType } from '../../../../_models/graph';
-import { GraphConfigComponent } from '../../../../editor/graph-config/graph-config.component';
+import { GraphConfigComponent, IDataGraphResult } from '../../../../editor/graph-config/graph-config.component';
 import { GraphBarComponent } from '../graph-bar/graph-bar.component';
 import { GraphOptions, GraphThemeType } from '../graph-base/graph-base.component';
 import { GaugeGraphProperty } from '../../../../_models/hmi';
@@ -141,10 +141,14 @@ export class GraphPropertyComponent implements OnInit, OnDestroy {
             minWidth: '1090px', width: '1090px',
             data: { type: (this.graphType === GraphType.bar) ? 'bar' : 'pie' }
         });
-        dialogRef.afterClosed().subscribe(result => {
+        dialogRef.afterClosed().subscribe((result: IDataGraphResult) => {
             if (result) {
-                this.data.graphs = result;
+                this.data.graphs = result.graphs;
                 this.loadGraphs();
+                if (result.selected) {
+                    this.graphCtrl.setValue(result.selected);
+                }
+                this.onGraphChanged();
             }
         });
     }

diff --git a/client/src/assets/i18n/en.json b/client/src/assets/i18n/en.json
@@ -212,9 +212,17 @@
     "chart.property-axis-x": "Label",
     "chart.property-yaxis": "Y Axis",
     "chart.property-axis-y1": "Y1 label",
+    "chart.property-axis-y1-min": "Y1 Min",
+    "chart.property-axis-y1-max": "Y1 Max",
     "chart.property-axis-y2": "Y2 label",
+    "chart.property-axis-y2-min": "Y2 Min",
+    "chart.property-axis-y2-max": "Y2 Max",
     "chart.property-axis-y3": "Y3 label",
+    "chart.property-axis-y3-min": "Y3 Min",
+    "chart.property-axis-y3-max": "Y3 Max",
     "chart.property-axis-y4": "Y4 label",
+    "chart.property-axis-y4-min": "Y4 Min",
+    "chart.property-axis-y4-max": "Y4 Max",
 
     "chart.rangetype-last8h": "Last 8 hours",
     "chart.rangetype-last1d": "Last day",