fix graph settings #819

frangoteam · May 10, 2023 · c0ed308 · c0ed308
1 parent 79ccca2
commit c0ed308
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 28 deletions.
diff --git a/client/src/app/gauges/controls/html-graph/graph-bar/graph-bar.component.ts b/client/src/app/gauges/controls/html-graph/graph-bar/graph-bar.component.ts
@@ -298,6 +298,7 @@ export class GraphBarComponent extends GraphBaseComponent implements OnInit, Aft
             offline: false,
             decimals: 0,
             responsive: true,
+            backgroundColor: null,              // to set in property
             maintainAspectRatio: false,
             indexAxis: 'x',
             gridLinesShow: true,                // to set in property
@@ -313,6 +314,10 @@ export class GraphBarComponent extends GraphBaseComponent implements OnInit, Aft
                         }
                         // suggestedMin: 0
                      },
+                     grid: {
+                        color: 'rgba(0, 0, 0, 0.2)',
+                        display: true
+                     }
                 },
                 x: {
                     display: true,
@@ -322,6 +327,10 @@ export class GraphBarComponent extends GraphBaseComponent implements OnInit, Aft
                             size: 12
                         }
                     },
+                    grid: {
+                        color: 'rgba(0, 0, 0, 0.2)',
+                        display: true
+                     }
                 }
             },
             plugins: {

diff --git a/client/src/app/gauges/controls/html-graph/graph-base/graph-base.component.ts b/client/src/app/gauges/controls/html-graph/graph-base/graph-base.component.ts
@@ -55,4 +55,5 @@ export interface GraphOptions extends ChartOptions {
     gridLinesColor?: string;
     plugins?: any;
     scales?: any;
+    backgroundColor?: string;
 }
diff --git a/client/src/app/gauges/controls/html-graph/graph-property/graph-property.component.html b/client/src/app/gauges/controls/html-graph/graph-property/graph-property.component.html
@@ -160,7 +160,7 @@
         <div class="_section-newline">
             <div class="my-form-field section-item section-item-block">
                 <span>{{'graph.property-theme-type' | translate}}</span>
-                <mat-select [(value)]="options.theme" (selectionChange)="onGraphChanged()">
+                <mat-select [(value)]="options.theme" (selectionChange)="onGraphThemaChanged()">
                     <mat-option [value]="themeType.customise">{{'graph.property-theme-owner' | translate}}</mat-option>
                     <mat-option [value]="themeType.light">{{'graph.property-theme-light' | translate}}</mat-option>
                     <mat-option [value]="themeType.dark">{{'graph.property-theme-dark' | translate}}</mat-option>
@@ -177,15 +177,15 @@
                 <div class="section-inline-margin2"></div>
                 <div class="my-form-field section-inline-color color-field">
                     <span>{{'graph.property-yaxis-color' | translate}}</span>
-                    <input [(colorPicker)]="options.scales['y'].grid.color" [cpAlphaChannel]="'always'" class="input-color" [style.background]="options.scales['y'].grid.color"
+                    <input [(colorPicker)]="options.scales['y'].ticks.color" [cpAlphaChannel]="'always'" class="input-color" [style.background]="options.scales['y'].ticks.color"
                         [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                         [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="width: 88px"
                         [cpPosition]="'auto'" (colorPickerChange)="onGraphChanged()"/>
                 </div>
                 <div class="section-inline-margin2"></div>
                 <div class="my-form-field section-inline-color color-field">
                     <span>{{'graph.property-xaxis-color' | translate}}</span>
-                    <input [(colorPicker)]="options.scales['x'].grid.color" [cpAlphaChannel]="'always'" class="input-color" [style.background]="options.scales['x'].grid.color"
+                    <input [(colorPicker)]="options.scales['x'].ticks.color" [cpAlphaChannel]="'always'" class="input-color" [style.background]="options.scales['x'].ticks.color"
                         [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                         [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="width: 88px"
                         [cpPosition]="'auto'" (colorPickerChange)="onGraphChanged()"/>

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
@@ -41,10 +41,9 @@ export class GraphPropertyComponent implements OnInit, OnDestroy {
 
     private _onDestroy = new Subject<void>();
 
-    constructor(
-        public dialog: MatDialog,
-        private translateService: TranslateService) {
-        }
+    constructor(public dialog: MatDialog,
+                private translateService: TranslateService) {
+    }
 
     ngOnInit() {
         if (this.data.settings.type.endsWith('bar')) {
@@ -105,34 +104,37 @@ export class GraphPropertyComponent implements OnInit, OnDestroy {
                 this.options.dateGroup = <GraphDateGroupType>Utils.getEnumKey(GraphDateGroupType, GraphDateGroupType.hours);
             }
         }
+        this.options.scales['y'].grid.color = this.options.gridLinesColor;
+        this.options.scales['y'].grid.display = this.options.gridLinesShow;
+        this.options.scales['x'].grid.color = this.options.gridLinesColor;
+        this.options.scales['x'].grid.display = this.options.gridLinesShow;
+        this.data.settings.property.options = JSON.parse(JSON.stringify(this.options));
+        this.onPropChanged.emit(this.data.settings);
+    }
+
+    onGraphThemaChanged() {
+        const yScale = this.options.scales['y'];
+        const xScale = this.options.scales['x'];
         if (this.options.theme === this.themeType.light) {
-            this.options.scales['y'].ticks.color = '#666';
-            this.options.scales['x'].ticks.color = '#666';
+            yScale.ticks.color = '#666';
+            xScale.ticks.color = '#666';
             this.options.plugins.legend.labels.color = '#666';
+            this.options.plugins.datalabels.color = '#666';
             this.options.plugins.title.color = '#666';
+            this.options.gridLinesColor = 'rgba(0, 0, 0, 0.2)';
+            this.options.backgroundColor = null;
         } else if (this.options.theme === this.themeType.dark) {
-            this.options.scales['y'].ticks.color = '#fff';
-            this.options.scales['x'].ticks.color = '#fff';
+            yScale.ticks.color = '#fff';
+            xScale.ticks.color = '#fff';
             this.options.plugins.legend.labels.color = '#fff';
+            this.options.plugins.datalabels.color = '#fff';
             this.options.plugins.title.color = '#fff';
+            this.options.gridLinesColor = '#808080';
+            this.options.backgroundColor = '242424';
+        } else if (this.options.theme === this.themeType.customise) {
+            this.options.backgroundColor = null;
         }
-
-        const yScale = this.options.scales['y'];
-        if(!yScale.hasOwnProperty('grid')) {
-            yScale.grid = {};
-        }
-
-        yScale.grid.color = 'rgba(0, 0, 0, 0.1)';
-
-        const xScale = this.options.scales['x'];
-        if(!xScale.hasOwnProperty('grid')) {
-            xScale.grid = {};
-        }
-
-        xScale.grid.color = 'rgba(0, 0, 0, 0.1)';
-
-        this.data.settings.property.options = JSON.parse(JSON.stringify(this.options));
-        this.onPropChanged.emit(this.data.settings);
+        this.onGraphChanged();
     }
 
     onEditNewGraph() {

diff --git a/client/src/app/gauges/controls/html-graph/html-graph.component.ts b/client/src/app/gauges/controls/html-graph/html-graph.component.ts
@@ -68,6 +68,11 @@ export class HtmlGraphComponent extends GaugeBaseComponent {
                 let opt = <GraphOptions>{ panel: { height: htmlGraph.clientHeight, width: htmlGraph.clientWidth } };
                 opt = { ...GraphBarComponent.DefaultOptions(), ...opt };
                 componentRef.instance.setOptions(opt);
+                if (gab.property.options.backgroundColor) {
+                    window['svgEditor']?.setColor(gab.property.options.backgroundColor, 100, 'fill');
+                } else {
+                    window['svgEditor']?.setColor('none', 100, 'fill');
+                }
 
                 componentRef.instance['myComRef'] = componentRef;
                 return componentRef.instance;