UI: Refactor GridHistory like ProductionHistory (OpenEMS#2191)

- Change production charts legend label 'Total' to have same hiding style as others
- Change order of gridBuy and gridSell to be the same as in history- energy monitor

Author: lukasrgr

ui/src/app/app-routing.module.ts

@@ -6,12 +6,12 @@ import { ChangelogViewComponent } from './changelog/view/view';
 import { EdgeComponent } from './edge/edge.component';
 import { ChannelthresholdChartOverviewComponent } from './edge/history/channelthreshold/channelthresholdchartoverview/channelthresholdchartoverview.component';
 import { OverviewComponent as AutarchyChartOverviewComponent } from './edge/history/common/autarchy/overview/overview';
+import { OverviewComponent as GridChartOverviewComponent } from './edge/history/common/grid/overview/overview';
 import { OverviewComponent as ProductionChartOverviewComponent } from './edge/history/common/production/overview/overview';
 import { OverviewComponent as SelfconsumptionChartOverviewComponent } from './edge/history/common/selfconsumption/overview/overview';
 import { ConsumptionChartOverviewComponent } from './edge/history/consumption/consumptionchartoverview/consumptionchartoverview.component';
 import { DelayedSellToGridChartOverviewComponent } from './edge/history/delayedselltogrid/symmetricpeakshavingchartoverview/delayedselltogridchartoverview.component';
 import { FixDigitalOutputChartOverviewComponent } from './edge/history/fixdigitaloutput/fixdigitaloutputchartoverview/fixdigitaloutputchartoverview.component';
-import { GridChartOverviewComponent } from './edge/history/grid/gridchartoverview/gridchartoverview.component';
 import { GridOptimizedChargeChartOverviewComponent } from './edge/history/gridoptimizedcharge/gridoptimizedchargechartoverview/gridoptimizedchargechartoverview.component';
 import { HeatingelementChartOverviewComponent } from './edge/history/heatingelement/heatingelementchartoverview/heatingelementchartoverview.component';
 import { HeatPumpChartOverviewComponent } from './edge/history/heatpump/heatpumpchartoverview/heatpumpchartoverview.component';

ui/src/app/edge/history/common/common.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+
+import { Common_Autarchy } from './autarchy/Autarchy';
+import { CommonEnergyMonitor } from './energy/energy';
+import { Common_Grid } from './grid/grid';
+import { Common_Production } from './production/production';
+import { Common_Selfconsumption } from './selfconsumption/SelfConsumption';
+
+@NgModule({
+  imports: [
+    Common_Autarchy,
+    CommonEnergyMonitor,
+    Common_Grid,
+    Common_Production,
+    Common_Selfconsumption
+  ],
+  exports: [
+    Common_Autarchy,
+    CommonEnergyMonitor,
+    Common_Grid,
+    Common_Production,
+    Common_Selfconsumption
+  ]
+})
+export class Common { }

ui/src/app/edge/history/common/energy/chart/channels.spec.ts

@@ -1,4 +1,6 @@
-import { OeChartTester } from "src/app/shared/genericComponents/shared/tester";
+import { TimeUnit } from "chart.js";
+import { OeTester } from "src/app/shared/genericComponents/shared/testing/common";
+import { OeChartTester } from "src/app/shared/genericComponents/shared/testing/tester";
 import { QueryHistoricTimeseriesDataResponse } from "src/app/shared/jsonrpc/response/queryHistoricTimeseriesDataResponse";
 import { QueryHistoricTimeseriesEnergyPerPeriodResponse } from "src/app/shared/jsonrpc/response/queryHistoricTimeseriesEnergyPerPeriodResponse";
 import { QueryHistoricTimeseriesEnergyResponse } from "src/app/shared/jsonrpc/response/queryHistoricTimeseriesEnergyResponse";
@@ -86,7 +88,7 @@ export namespace History {
                 "quarter": "[Q]Q - YYYY",
                 "year": "YYYY"
               },
-              "unit": period
+              "unit": period as TimeUnit
             },
             "bounds": "ticks"
           }
@@ -168,7 +170,7 @@ export namespace History {
                 "quarter": "[Q]Q - YYYY",
                 "year": "YYYY"
               },
-              "unit": period
+              "unit": period as TimeUnit
             },
             "offset": true,
             "bounds": "ticks"
@@ -184,23 +186,13 @@ export namespace History {
       "responsive": true
     }
   });
-  export type OeChannels = {
-
-    /** Always one value for each channel from a {@link QueryHistoricTimeseriesEnergyResponse} */
-    energyChannelWithValues: QueryHistoricTimeseriesEnergyResponse,
-
-    /** data from a {@link QueryHistoricTimeseriesEnergyPerPeriodResponse} */
-    energyPerPeriodChannelWithValues?: QueryHistoricTimeseriesEnergyPerPeriodResponse,
-    /** data from a {@link QueryHistoricTimeseriesDataResponse} */
-    dataChannelWithValues?: QueryHistoricTimeseriesDataResponse
-  }
 
   /** 
    * up to 288 datapoints (5 min aggregated values) from a
    * 
    * {@link Day.energyPerPeriodChannelWithValues} and {@link Day.dataChannelWithValues}
    * */
-  export const DAY: History.OeChannels = ({
+  export const DAY: OeTester.Types.Channels = ({
     energyChannelWithValues: new QueryHistoricTimeseriesEnergyResponse("0", {
       data: {
         '_sum/GridBuyActiveEnergy': 938,
@@ -1952,7 +1944,7 @@ export namespace History {
   /** 
    * up to 164 datapoints(1 hour values) from a {@link Day.energyPerPeriodChannelWithValues} and {@link Day.dataChannelWithValues}
    * */
-  export const WEEK: OeChannels = {
+  export const WEEK: OeTester.Types.Channels = {
     energyChannelWithValues: new QueryHistoricTimeseriesEnergyResponse("0", {
       data: {
         '_sum/GridBuyActiveEnergy': 2368,
@@ -3150,7 +3142,7 @@ export namespace History {
 
   /** 
   * up to 31 datapoints(1 day values) from a {@link Day.energyPerPeriodChannelWithValues} and {@link Day.dataChannelWithValues}*/
-  export const MONTH: OeChannels = {
+  export const MONTH: OeTester.Types.Channels = {
     energyChannelWithValues: new QueryHistoricTimeseriesEnergyResponse("0", {
       data: {
         '_sum/GridBuyActiveEnergy': 773000,
@@ -3392,7 +3384,7 @@ export namespace History {
 
   /** 
   * up to 12 datapoints(1 month values) from a {@link Day.energyPerPeriodChannelWithValues} and {@link Day.dataChannelWithValues}*/
-  export const YEAR: OeChannels = {
+  export const YEAR: OeTester.Types.Channels = {
     energyChannelWithValues: new QueryHistoricTimeseriesEnergyResponse("0", {
       data: {
         '_sum/GridBuyActiveEnergy': 23209000,

ui/src/app/edge/history/common/energy/chart/chart.constants.spec.ts

@@ -1,12 +1,12 @@
+import { DummyConfig } from "src/app/shared/edge/edgeconfig.spec";
+import { OeTester } from "src/app/shared/genericComponents/shared/testing/common";
 import { EdgeConfig } from "src/app/shared/shared";
-import { TestContext, removeFunctions } from "src/app/shared/test/utils.spec";
-import { History } from "src/app/edge/history/common/energy/chart/channels.spec";
+import { removeFunctions, TestContext } from "src/app/shared/test/utils.spec";
 
-import { DummyConfig } from "src/app/shared/edge/edgeconfig.spec";
-import { OeChartTester } from "../../../../../shared/genericComponents/shared/tester";
+import { OeChartTester } from "../../../../../shared/genericComponents/shared/testing/tester";
 import { ChartComponent } from "./chart";
 
-export function expectView(config: EdgeConfig, testContext: TestContext, chartType: 'line' | 'bar', channels: History.OeChannels, view: OeChartTester.View): void {
+export function expectView(config: EdgeConfig, testContext: TestContext, chartType: 'line' | 'bar', channels: OeTester.Types.Channels, view: OeChartTester.View): void {
   expect(removeFunctions(OeChartTester
     .apply(ChartComponent
       .getChartData(DummyConfig.convertDummyEdgeConfigToRealEdgeConfig(config), chartType, testContext.translate), chartType, channels, testContext)))