feat: dynamic numberformat conversion by using current locale

ui/src/app/app.module.ts

@@ -58,7 +58,7 @@ import { UserModule } from "./user/user.module";
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     CookieService,
     { provide: ErrorHandler, useClass: MyErrorHandler },
-    { provide: LOCALE_ID, useValue: Language.DEFAULT.key },
+    { provide: LOCALE_ID, useFactory: () => (Language.getByKey(localStorage.LANGUAGE) ?? Language.getByBrowserLang(navigator.language)).key },
     // Use factory for formly. This allows us to use translations in validationMessages.
     { provide: FORMLY_CONFIG, multi: true, useFactory: registerTranslateExtension, deps: [TranslateService] },
     DeviceDetectorService,

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

@@ -115,7 +115,7 @@
     public setOptions(options: Chart.ChartOptions): Promise<void> {
 
         return new Promise<void>((resolve) => {
             const locale = this.service.translate.currentLang;
             const yAxis: HistoryUtils.yAxes = { position: "left", unit: this.unit, yAxisId: ChartAxis.LEFT };
             const chartObject: HistoryUtils.ChartData = {
                 input: [],
@@ -152,7 +152,7 @@
                     const value = tooltipItem.dataset.data[tooltipItem.dataIndex];
 
                     const customUnit = tooltipItem.dataset.unit ?? null;
-                    return label.split(":")[0] + ": " + NewAbstractHistoryChart.getToolTipsSuffix("", value, formatNumber, customUnit ?? unit, "line", locale, translate, conf);
+                    return label.split(":")[0] + ": " + NewAbstractHistoryChart.getToolTipsSuffix("", value, formatNumber, customUnit ?? unit, "line", translate, conf);
                 };
 
                 options.plugins.tooltip.callbacks.labelColor = (item: Chart.TooltipItem<any>) => {
@@ -242,7 +242,7 @@
                     });
 
                 // Only one yAxis defined
-                options = NewAbstractHistoryChart.getYAxisOptions(options, yAxis, this.translate, "line", locale, this.datasets, true);
+                options = NewAbstractHistoryChart.getYAxisOptions(options, yAxis, this.translate, "line", this.datasets, true);
                 options = NewAbstractHistoryChart.applyChartTypeSpecificOptionsChanges("line", options, this.service, chartObject);
                 options.scales[ChartAxis.LEFT]["stacked"] = false;
                 options.scales.x["stacked"] = true;

ui/src/app/edge/history/storage/singlechart.component.ts

@@ -6,6 +6,7 @@
 import * as Chart from "chart.js";
 import { DefaultTypes } from "src/app/shared/service/defaulttypes";
 import { ChartAxis, YAxisType } from "src/app/shared/service/utils";
+import { Language } from "src/app/shared/type/language"
 
 import { ChannelAddress, Edge, EdgeConfig, Service, Utils } from "../../../shared/shared";
 import { AbstractHistoryChart } from "../abstracthistorychart";
@@ -208,6 +209,7 @@
 
     private applyControllerSpecificChartOptions(options: Chart.ChartOptions) {
         const translate = this.translate;
+        const locale: string = (Language.getByKey(localStorage.LANGUAGE) ?? Language.DEFAULT).i18nLocaleKey;
 
         options.scales[ChartAxis.LEFT].min = null;
         options.plugins.tooltip.callbacks.label = function (tooltipItem: Chart.TooltipItem<any>) {
@@ -227,7 +229,7 @@
                     label = translate.instant("General.DISCHARGE");
                 }
             }
-            return label + ": " + formatNumber(value, "de", "1.0-2") + " kW";
+            return label + ": " + formatNumber(value, locale, "1.0-2") + " kW";
         };
 
         // Data doesnt have all datapoints for period

ui/src/app/edge/history/storage/totalchart.component.ts

@@ -7,6 +7,7 @@
 import { DefaultTypes } from "src/app/shared/service/defaulttypes";
 import { ChartAxis, Utils, YAxisType } from "src/app/shared/service/utils";
 import { ChannelAddress, Edge, EdgeConfig, Service } from "src/app/shared/shared";
+import { Language } from "src/app/shared/type/language"
 
 import { AbstractHistoryChart } from "../abstracthistorychart";
 
@@ -245,6 +246,7 @@
 
     private applyControllerSpecificChartOptions(options: Chart.ChartOptions) {
         const translate = this.translate;
+        const locale: string = (Language.getByKey(localStorage.LANGUAGE) ?? Language.DEFAULT).i18nLocaleKey;
 
         options.scales[ChartAxis.LEFT].min = null;
         options.plugins.tooltip.callbacks.label = function (tooltipItem: Chart.TooltipItem<any>) {
@@ -256,7 +258,7 @@
             } else if (value > 0.005) {
                 label += " " + translate.instant("General.DISCHARGE");
             }
-            return label + ": " + formatNumber(value, "de", "1.0-2") + " kW";
+            return label + ": " + formatNumber(value, locale, "1.0-2") + " kW";
         };
     }
 }

ui/src/app/edge/live/Controller/Ess/TimeOfUseTariff/modal/powerSocChart.ts

@@ -204,10 +204,9 @@ export class SchedulePowerAndSocChartComponent extends AbstractHistoryChart impl
     private applyControllerSpecificOptions() {
         const rightYAxis: HistoryUtils.yAxes = { position: "right", unit: YAxisType.PERCENTAGE, yAxisId: ChartAxis.RIGHT };
         const leftYAxis: HistoryUtils.yAxes = { position: "left", unit: YAxisType.POWER, yAxisId: ChartAxis.LEFT };
-        const locale = this.service.translate.currentLang;
 
-        this.options = NewAbstractHistoryChart.getYAxisOptions(this.options, rightYAxis, this.translate, "line", locale, ChartConstants.EMPTY_DATASETS, true);
-        this.options = NewAbstractHistoryChart.getYAxisOptions(this.options, leftYAxis, this.translate, "line", locale, ChartConstants.EMPTY_DATASETS, true);
+        this.options = NewAbstractHistoryChart.getYAxisOptions(this.options, rightYAxis, this.translate, "line", ChartConstants.EMPTY_DATASETS, true);
+        this.options = NewAbstractHistoryChart.getYAxisOptions(this.options, leftYAxis, this.translate, "line", ChartConstants.EMPTY_DATASETS, true);
 
         this.datasets = this.datasets.map((el: Chart.ChartDataset) => {
 

ui/src/app/edge/live/Controller/Ess/TimeOfUseTariff/modal/statePriceChart.ts

@@ -106,12 +106,11 @@ export class ScheduleStateAndPriceChartComponent extends AbstractHistoryChart im
     }
 
     private applyControllerSpecificOptions() {
-        const locale = this.service.translate.currentLang;
         const rightYaxisSoc: HistoryUtils.yAxes = { position: "right", unit: YAxisType.PERCENTAGE, yAxisId: ChartAxis.RIGHT, displayGrid: true };
-        this.options = NewAbstractHistoryChart.getYAxisOptions(this.options, rightYaxisSoc, this.translate, "line", locale, this.datasets, true);
+        this.options = NewAbstractHistoryChart.getYAxisOptions(this.options, rightYaxisSoc, this.translate, "line", this.datasets, true);
 
         const rightYAxisPower: HistoryUtils.yAxes = { position: "right", unit: YAxisType.POWER, yAxisId: ChartAxis.RIGHT_2 };
-        this.options = NewAbstractHistoryChart.getYAxisOptions(this.options, rightYAxisPower, this.translate, "line", locale, this.datasets, true);
+        this.options = NewAbstractHistoryChart.getYAxisOptions(this.options, rightYAxisPower, this.translate, "line", this.datasets, true);
 
         this.options.scales.x["time"].unit = calculateResolution(this.service, this.service.historyPeriod.value.from, this.service.historyPeriod.value.to).timeFormat;
         this.options.scales.x["ticks"] = { source: "auto", autoSkip: false };
@@ -167,7 +166,7 @@ export class ScheduleStateAndPriceChartComponent extends AbstractHistoryChart im
         });
         const leftYAxis: HistoryUtils.yAxes = { position: "left", unit: this.unit, yAxisId: ChartAxis.LEFT, customTitle: this.currencyLabel };
         [rightYaxisSoc, rightYAxisPower].forEach((element) => {
-            this.options = NewAbstractHistoryChart.getYAxisOptions(this.options, element, this.translate, "line", locale, this.datasets, true);
+            this.options = NewAbstractHistoryChart.getYAxisOptions(this.options, element, this.translate, "line", this.datasets, true);
         });
 
         this.options.scales[ChartAxis.LEFT] = {

ui/src/app/edge/live/common/storage/storage.component.ts

@@ -4,6 +4,7 @@
 import { AbstractFlatWidget } from "src/app/shared/components/flat/abstract-flat-widget";
 import { CurrentData , ChannelAddress, EdgeConfig, Utils } from "src/app/shared/shared";
 import { DateUtils } from "src/app/shared/utils/date/dateutils";
+import { Language, MyTranslateLoader } from "src/app/shared/type/language";
 
 import { StorageModalComponent } from "./modal/modal.component";
 
@@ -50,6 +51,7 @@
      * @returns only positive and 0
      */
     public convertPower(value: number, isCharge?: boolean) {
+        const locale: string = (Language.getByKey(localStorage.LANGUAGE) ?? Language.DEFAULT).i18nLocaleKey;
         if (value == null) {
             return "-";
         }
@@ -58,7 +60,7 @@
 
         // Round thisValue to Integer when decimal place equals 0
         if (thisValue > 0) {
-            return formatNumber(thisValue, "de", "1.0-1") + " kW"; // TODO get locale dynamically
+            return formatNumber(thisValue, locale, "1.0-1") + " kW";
 
         } else if (thisValue == 0 && isCharge) {
             // if thisValue is 0, then show only when charge and not discharge

ui/src/app/edge/settings/powerassistant/powerassistant.ts

@@ -3,6 +3,7 @@
 import { Component } from "@angular/core";
 import { AbstractFlatWidget } from "src/app/shared/components/flat/abstract-flat-widget";
 import { DataService } from "src/app/shared/components/shared/dataservice";
+import { Language } from "src/app/shared/type/language"
 import { ChannelAddress, CurrentData, EdgeConfig, Utils } from "../../../shared/shared";
 import { LiveDataService } from "../../live/livedataservice";
 
@@ -221,10 +222,11 @@
 export namespace Converter {
   export function unit(unit: string): (value: any) => string {
     return function (value: any): string {
+      const locale: string = (Language.getByKey(localStorage.LANGUAGE) ?? Language.DEFAULT).i18nLocaleKey;
       if (value == null) {
         return "-";
       } else if (value >= 0) {
-        return formatNumber(value, "de", "1.0-0") + " " + unit;
+        return formatNumber(value, locale, "1.0-0") + " " + unit;
       }
     };
   }

ui/src/app/shared/components/chart/abstracthistorychart.ts

@@ -130,6 +130,7 @@
     const datasets: Chart.ChartDataset[] = [];
     const displayValues: HistoryUtils.DisplayValue<HistoryUtils.CustomOptions>[] = chartObject.output(channelData.data, labels);
     const legendOptions: { label: string, strokeThroughHidingStyle: boolean, hideLabelInLegend: boolean; }[] = [];
+    const locale: string = (Language.getByKey(localStorage.LANGUAGE) ?? Language.DEFAULT).i18nLocaleKey;
     displayValues.forEach((displayValue, index) => {
       let nameSuffix = null;
 
@@ -352,19 +353,17 @@
     translate: TranslateService,
     legendOptions: { label: string, strokeThroughHidingStyle: boolean; }[],
     channelData: { data: { [name: string]: number[]; }; },
-    locale: string,
     config: EdgeConfig,
     datasets: Chart.ChartDataset[],
     chartOptionsType: XAxisType,
     labels: (Date | string)[],
   ): Chart.ChartOptions {
-
     let tooltipsLabel: string | null = null;
     let options: Chart.ChartOptions = Utils.deepCopy(<Chart.ChartOptions>Utils.deepCopy(AbstractHistoryChart.getDefaultOptions(chartOptionsType, service, labels)));
     const displayValues: HistoryUtils.DisplayValue<HistoryUtils.CustomOptions>[] = chartObject.output(channelData.data);
 
     chartObject.yAxes.forEach((element) => {
-      options = AbstractHistoryChart.getYAxisOptions(options, element, translate, chartType, locale, datasets, true);
+      options = AbstractHistoryChart.getYAxisOptions(options, element, translate, chartType, datasets, true);
     });
 
     options.plugins.tooltip.callbacks.title = (tooltipItems: Chart.TooltipItem<any>[]): string => {
@@ -395,7 +394,7 @@
         tooltipsLabel = AbstractHistoryChart.getToolTipsAfterTitleLabel(unit, chartType, value, translate);
       }
 
-      return label.split(":")[0] + ": " + AbstractHistoryChart.getToolTipsSuffix(tooltipsLabel, value, displayValue.custom?.formatNumber ?? chartObject.tooltip.formatNumber, unit, chartType, locale, translate, config);
+      return label.split(":")[0] + ": " + AbstractHistoryChart.getToolTipsSuffix(tooltipsLabel, value, displayValue.custom?.formatNumber ?? chartObject.tooltip.formatNumber, unit, chartType, translate, config);
     };
 
     options.plugins.tooltip.callbacks.labelColor = (item: Chart.TooltipItem<any>) => {
@@ -436,6 +435,7 @@
     };
 
     options.plugins.tooltip.callbacks.afterTitle = function (items: Chart.TooltipItem<any>[]) {
+      const locale: string = (Language.getByKey(localStorage.LANGUAGE) ?? Language.DEFAULT).i18nLocaleKey;
 
       if (items?.length === 0) {
         return null;
@@ -459,7 +459,7 @@
 
       const totalValue = datasets.filter(el => el.stack == stack).reduce((_total, dataset) => Utils.addSafely(_total, Math.abs(dataset.data[datasetIndex])), 0);
       if (afterTitle) {
-        return afterTitle + ": " + formatNumber(totalValue, "de", chartObject.tooltip.formatNumber) + " " + tooltipsLabel;
+        return afterTitle + ": " + formatNumber(totalValue, locale, chartObject.tooltip.formatNumber) + " " + tooltipsLabel;
       }
 
       return null;
@@ -474,7 +474,7 @@
       function rebuildScales(chart: Chart.Chart) {
         let options = chart.options;
         chartObject.yAxes.forEach((element) => {
-          options = AbstractHistoryChart.getYAxisOptions(options, element, translate, chartType, locale, _dataSets, true);
+          options = AbstractHistoryChart.getYAxisOptions(options, element, translate, chartType, _dataSets, true);
         });
       }
 
@@ -524,8 +524,8 @@
    * @param locale the current locale
    * @returns the chart options {@link Chart.ChartOptions}
    */
-  public static getYAxisOptions(options: Chart.ChartOptions, element: HistoryUtils.yAxes, translate: TranslateService, chartType: "line" | "bar", locale: string, datasets: Chart.ChartDataset[], showYAxisType?: boolean): Chart.ChartOptions {
-
+  public static getYAxisOptions(options: Chart.ChartOptions, element: HistoryUtils.yAxes, translate: TranslateService, chartType: "line" | "bar", datasets: Chart.ChartDataset[], showYAxisType?: boolean): Chart.ChartOptions {
+    const locale: string = (Language.getByKey(localStorage.LANGUAGE) ?? Language.DEFAULT).i18nLocaleKey;
     const baseConfig = ChartConstants.DEFAULT_Y_SCALE_OPTIONS(element, translate, chartType, datasets, showYAxisType);
     switch (element.unit) {
       case YAxisType.RELAY:
@@ -623,15 +623,16 @@
    * @returns a string, that is either the baseName, if no suffix is provided, or a baseName with a formatted number
    */
   public static getTooltipsLabelName(baseName: string, unit: YAxisType, suffix?: number | string): string {
+    const locale: string = (Language.getByKey(localStorage.LANGUAGE) ?? Language.DEFAULT).i18nLocaleKey;
     if (suffix != null) {
       if (typeof suffix === "string") {
         return baseName + " " + suffix;
       } else {
         switch (unit) {
           case YAxisType.ENERGY:
-            return baseName + ": " + formatNumber(suffix / 1000, "de", "1.0-1") + " kWh";
+            return baseName + ": " + formatNumber(suffix / 1000, locale, "1.0-1") + " kWh";
           case YAxisType.PERCENTAGE:
-            return baseName + ": " + formatNumber(suffix, "de", "1.0-1") + " %";
+            return baseName + ": " + formatNumber(suffix, locale, "1.0-1") + " %";
           case YAxisType.RELAY:
           case YAxisType.TIME: {
             const pipe = new FormatSecondsToDurationPipe(new DecimalPipe(Language.DE.key));
@@ -651,7 +652,9 @@
    * @param title the YAxisType
    * @returns the tooltips suffix
    */
-  public static getToolTipsSuffix(label: any, value: number, format: string, title: YAxisType, chartType: "bar" | "line", language: string, translate: TranslateService, config: EdgeConfig): string {
+  public static getToolTipsSuffix(label: any, value: number, format: string, title: YAxisType, chartType: "bar" | "line", translate: TranslateService, config: EdgeConfig): string {
+    const language: string = (Language.getByKey(localStorage.LANGUAGE) ?? Language.DEFAULT).key;
+    const locale: string = (Language.getByKey(localStorage.LANGUAGE) ?? Language.DEFAULT).i18nLocaleKey;
     let tooltipsLabel: string | null = null;
     switch (title) {
       case YAxisType.RELAY: {
@@ -693,7 +696,7 @@
         break;
     }
 
-    return formatNumber(value, "de", format) + " " + tooltipsLabel;
+    return formatNumber(value, locale, format) + " " + tooltipsLabel;
   }
 
   public static getDefaultOptions(xAxisType: XAxisType, service: Service, labels: (Date | string)[]): Chart.ChartOptions {
@@ -1073,8 +1076,7 @@
    * Sets the Labels of the Chart
    */
   protected setChartLabel() {
-    const locale = this.service.translate.currentLang;
-    this.options = AbstractHistoryChart.getOptions(this.chartObject, this.chartType, this.service, this.translate, this.legendOptions, this.channelData, locale, this.config, this.datasets, this.xAxisScalingType, this.labels);
+    this.options = AbstractHistoryChart.getOptions(this.chartObject, this.chartType, this.service, this.translate, this.legendOptions, this.channelData, this.config, this.datasets, this.xAxisScalingType, this.labels);
     this.loading = false;
     this.stopSpinner();
   }

ui/src/app/shared/components/flat/abstract-flat-widget.ts

@@ -1,6 +1,6 @@
 // @ts-strict-ignore
-import { Directive, Inject, Input, OnDestroy, OnInit } from "@angular/core";
 import { FormBuilder, FormGroup } from "@angular/forms";
+import { Directive, Input, OnDestroy, OnInit, Inject } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { ModalController } from "@ionic/angular";
 import { TranslateService } from "@ngx-translate/core";

ui/src/app/shared/components/modal/modal-phases/modal-phases.ts

@@ -1,6 +1,7 @@
 import { formatNumber } from "@angular/common";
 import { Component, Input } from "@angular/core";
 import { ChannelAddress, CurrentData, Utils } from "src/app/shared/shared";
+import { Language } from "src/app/shared/type/language"
 
 import { AbstractModalLine } from "../abstract-modal-line";
 import { TextIndentation } from "../modal-line/modal-line";
@@ -46,8 +47,8 @@
    * @returns converted value
    */
   protected CONVERT_TO_POSITIVE_WATT = (value: number | null): string => {
-
+    const locale: string = (Language.getByKey(localStorage.LANGUAGE) ?? Language.DEFAULT).i18nLocaleKey;
     value = Utils.absSafely(value) ?? 0;
-    return formatNumber(value, "de", "1.0-0") + " W";
+    return formatNumber(value, locale, "1.0-0") + " W";
   };
 }

ui/src/app/shared/components/shared/testing/tester.ts

@@ -308,7 +308,7 @@ export class OeChartTester {
       legendOptions.push(AbstractHistoryChart.getLegendOptions(label, displayValue));
     });
 
-    const options = AbstractHistoryChart.getOptions(chartData, chartType, testContext.service, testContext.translate, legendOptions, channelData.result, locale, config, datasets, xAxisType, labels);
+    const options = AbstractHistoryChart.getOptions(chartData, chartType, testContext.service, testContext.translate, legendOptions, channelData.result, config, datasets, xAxisType, labels);
 
     chartData.yAxes.filter(axis => axis.unit != null).forEach(axis => {
       // Remove custom scale calculations from unittest, seperate unittest existing