UI: improvements to formly and history SoC chart (#1027)

* adjust second y axis in history energymonitor * remove padding from repeat component used in settings/network
OpenEMS · Dec 13, 2019 · 78c12a6 · 78c12a6
1 parent b8e41bb
commit 78c12a6
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 198 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/src/app/edge/history/abstracthistorychart.ts b/ui/src/app/edge/history/abstracthistorychart.ts
@@ -3,15 +3,15 @@ import { JsonrpcResponseError } from "../../shared/jsonrpc/base";
 import { QueryHistoricTimeseriesDataRequest } from "../../shared/jsonrpc/request/queryHistoricTimeseriesDataRequest";
 import { QueryHistoricTimeseriesDataResponse } from "../../shared/jsonrpc/response/queryHistoricTimeseriesDataResponse";
 import { ChannelAddress, Edge, EdgeConfig, Service } from "../../shared/shared";
-import { ChartOptions, Dataset, EMPTY_DATASET, ChartOptionsTwoYAxis } from './shared';
+import { ChartOptions, Dataset, EMPTY_DATASET } from './shared';
 
 export abstract class AbstractHistoryChart {
 
     public loading: boolean = true;
 
     protected labels: Date[] = [];
     protected datasets: Dataset[] = EMPTY_DATASET;
-    protected options: ChartOptions | ChartOptionsTwoYAxis;
+    protected options: ChartOptions;
     protected colors = []
 
     // Colors for Phase 1-3

diff --git a/ui/src/app/edge/history/energy/energy.component.ts b/ui/src/app/edge/history/energy/energy.component.ts
@@ -13,7 +13,7 @@ import { DefaultTypes } from 'src/app/shared/service/defaulttypes';
 import { QueryHistoricTimeseriesDataResponse } from '../../../shared/jsonrpc/response/queryHistoricTimeseriesDataResponse';
 import { ChannelAddress, Edge, EdgeConfig, Service, Utils, Websocket } from '../../../shared/shared';
 import { AbstractHistoryChart } from '../abstracthistorychart';
-import { ChartOptions, Data, DEFAULT_TIME_CHART_OPTIONS, TooltipItem, ChartOptionsTwoYAxis, DEFAULT_TIME_CHART_OPTIONS_TWO_Y_AXIS } from './../shared';
+import { ChartOptions, Data, DEFAULT_TIME_CHART_OPTIONS, TooltipItem } from './../shared';
 import { EnergyModalComponent } from './modal/modal.component';
 
 @Component({
@@ -140,7 +140,32 @@ export class EnergyComponent extends AbstractHistoryChart implements OnChanges {
             this.convertDeprecatedData(config, result.data); // TODO deprecated
           }
 
-          // PUSH DATA FOR LEFT Y AXSIS
+          // push data for right y-axis
+          if ('_sum/EssSoc' in result.data) {
+            let socData = result.data['_sum/EssSoc'].map(value => {
+              if (value == null) {
+                return null
+              } else if (value > 100 || value < 0) {
+                return null;
+              } else {
+                return value;
+              }
+            })
+            datasets.push({
+              label: this.translate.instant('General.Soc'),
+              data: socData,
+              hidden: false,
+              yAxisID: 'yAxis2',
+              position: 'right',
+              borderDash: [10, 10]
+            })
+            this.colors.push({
+              backgroundColor: 'rgba(189, 195, 199,0.05)',
+              borderColor: 'rgba(189, 195, 199,1)',
+            })
+          }
+
+          // push data for left y-axis
           if ('_sum/ProductionActivePower' in result.data) {
             /*
             * Production
@@ -297,30 +322,6 @@ export class EnergyComponent extends AbstractHistoryChart implements OnChanges {
               borderColor: 'rgba(200,0,0,1)',
             })
           }
-
-          // PUSH DATA FOR RIGHT Y AXSIS
-          if ('_sum/EssSoc' in result.data) {
-            let socData = result.data['_sum/EssSoc'].map(value => {
-              if (value == null) {
-                return null
-              } else if (value > 100 || value < 0) {
-                return null;
-              } else {
-                return value;
-              }
-            })
-            datasets.push({
-              label: this.translate.instant('General.Soc'),
-              data: socData,
-              hidden: false,
-              yAxisID: 'yAxis2',
-              position: 'right'
-            })
-            this.colors.push({
-              backgroundColor: 'rgba(0,223,0,0.15)',
-              borderColor: 'rgba(0,223,0,0.15)',
-            })
-          }
           this.datasets = datasets;
           this.loading = false;
         }).catch(reason => {
@@ -401,9 +402,25 @@ export class EnergyComponent extends AbstractHistoryChart implements OnChanges {
 
   protected setLabel() {
     let translate = this.translate;
-    let options = <ChartOptionsTwoYAxis>Utils.deepCopy(DEFAULT_TIME_CHART_OPTIONS_TWO_Y_AXIS);
-    options.scales.yAxes[1].scaleLabel.labelString = "%"
-    options.scales.yAxes[1].ticks.max = 100;
+    let options = <ChartOptions>Utils.deepCopy(DEFAULT_TIME_CHART_OPTIONS);
+
+    // adds second y-axis to chart
+    options.scales.yAxes.push({
+      id: 'yAxis2',
+      position: 'right',
+      scaleLabel: {
+        display: true,
+        labelString: "%"
+      },
+      gridLines: {
+        display: false
+      },
+      ticks: {
+        beginAtZero: true,
+        max: 100
+      }
+    })
+    options.scales.yAxes[0].id = "yAxis1"
     options.scales.yAxes[0].scaleLabel.labelString = "kW";
     options.tooltips.callbacks.label = function (tooltipItem: TooltipItem, data: Data) {
       let label = data.datasets[tooltipItem.datasetIndex].label;

diff --git a/ui/src/app/edge/history/shared.ts b/ui/src/app/edge/history/shared.ts
@@ -52,11 +52,15 @@ export type ChartOptions = {
     },
     scales: {
         yAxes: [{
+            id?: string,
             position: string,
             scaleLabel: {
                 display: boolean,
                 labelString: string
             },
+            gridLines?: {
+                display: boolean
+            },
             ticks: {
                 beginAtZero: boolean,
                 max?: number
@@ -91,82 +95,6 @@ export type ChartOptions = {
     }
 }
 
-export type ChartOptionsTwoYAxis = {
-    maintainAspectRatio: boolean,
-    legend: {
-        position: "bottom"
-    },
-    elements: {
-        point: {
-            radius: number,
-            hitRadius: number,
-            hoverRadius: number
-        },
-        line: {
-            borderWidth: number,
-            tension: number
-        }
-    },
-    hover: {
-        mode: string,
-        intersect: boolean
-    },
-    scales: {
-        yAxes: [
-            {
-                id: string,
-                position: string,
-                scaleLabel: {
-                    display: boolean,
-                    labelString: string
-                },
-                ticks: {
-                    beginAtZero: boolean,
-                    max?: number
-                }
-            },
-            {
-                id: string,
-                position: string,
-                scaleLabel: {
-                    display: boolean,
-                    labelString: string
-                },
-                ticks: {
-                    beginAtZero: boolean,
-                    max?: number
-                }
-            },
-        ],
-        xAxes: [{
-            type: "time",
-            time: {
-                minUnit: string,
-                displayFormats: {
-                    millisecond: string,
-                    second: string,
-                    minute: string,
-                    hour: string,
-                    day: string,
-                    week: string,
-                    month: string,
-                    quarter: string,
-                    year: string
-                }
-            }
-        }]
-    },
-    tooltips: {
-        mode: string,
-        intersect: boolean,
-        axis: string,
-        callbacks: {
-            label?(tooltipItem: TooltipItem, data: Data): string,
-            title?(tooltipItems: TooltipItem[], data: Data): string
-        }
-    }
-}
-
 export const DEFAULT_TIME_CHART_OPTIONS: ChartOptions = {
     maintainAspectRatio: false,
     legend: {
@@ -227,81 +155,4 @@ export const DEFAULT_TIME_CHART_OPTIONS: ChartOptions = {
             }
         }
     }
-};
-
-export const DEFAULT_TIME_CHART_OPTIONS_TWO_Y_AXIS: ChartOptionsTwoYAxis = {
-    maintainAspectRatio: false,
-    legend: {
-        position: 'bottom'
-    },
-    elements: {
-        point: {
-            radius: 0,
-            hitRadius: 0,
-            hoverRadius: 0
-        },
-        line: {
-            borderWidth: 2,
-            tension: 0.1
-        }
-    },
-    hover: {
-        mode: 'point',
-        intersect: true
-    },
-    scales: {
-        yAxes: [
-            {
-                id: 'yAxis1',
-                position: 'left',
-                scaleLabel: {
-                    display: true,
-                    labelString: ""
-                },
-                ticks: {
-                    beginAtZero: true
-                }
-            },
-            {
-                id: 'yAxis2',
-                position: 'right',
-                scaleLabel: {
-                    display: true,
-                    labelString: ""
-                },
-                ticks: {
-                    beginAtZero: true
-                }
-            }
-        ],
-        xAxes: [{
-            type: 'time',
-            time: {
-                minUnit: 'hour',
-                displayFormats: {
-                    millisecond: 'SSS [ms]',
-                    second: 'HH:mm:ss a', // 17:20:01
-                    minute: 'HH:mm', // 17:20
-                    hour: 'HH:[00]', // 17:20
-                    day: 'll', // Sep 4 2015
-                    week: 'll', // Week 46, or maybe "[W]WW - YYYY" ?
-                    month: 'MMM YYYY', // Sept 2015
-                    quarter: '[Q]Q - YYYY', // Q3
-                    year: 'YYYY' // 2015
-                }
-            }
-        }]
-    },
-    tooltips: {
-        mode: 'index',
-        intersect: false,
-        axis: 'x',
-        callbacks: {
-            title(tooltipItems: TooltipItem[], data: Data): string {
-                let date = new Date(tooltipItems[0].xLabel);
-                return date.toLocaleDateString() + " " + date.toLocaleTimeString();
-            }
-        }
-    }
-};
-
+};