@siemens/charts-ng 47.9.0 → 47.10.0

package/components/si-chart-gauge/si-chart-gauge.component.d.ts

@@ -20,11 +20,17 @@ export declare class SiChartGaugeComponent extends SiChartComponent implements O
     /** @defaultValue false */
     readonly unitsOnSplit: import("@angular/core").InputSignal<boolean>;
     /**
-     * Custom formatter for axis labels and value.
+     * Custom formatter for axis labels.
      * Takes precedence when specified, i.e. number of decimals, unit etc needs
      * to be set by the user using this formatter.
      */
     readonly labelFormatter: import("@angular/core").InputSignal<((val: number) => string) | undefined>;
+    /**
+     * Custom formatter for value.
+     * Takes precedence when specified, i.e. number of decimals needs
+     * to be set by the user using this formatter.
+     */
+    readonly valueFormatter: import("@angular/core").InputSignal<((val: number) => string) | undefined>;
     /**
      * Sets the number of decimals.
      * @deprecated Use `minNumberOfDecimals` and `maxNumberOfDecimals` instead.
@@ -71,7 +77,7 @@ export declare class SiChartGaugeComponent extends SiChartComponent implements O
     private calcValue;
     private axisLabelFormatter;
     protected applyOptions(): void;
-    private valueFormatter;
+    private valueFormatterInternal;
     ngOnChanges(changes: SimpleChanges): void;
     protected applyDataZoom(): void;
     protected afterChartResize(): void;
@@ -80,5 +86,5 @@ export declare class SiChartGaugeComponent extends SiChartComponent implements O
      */
     setValue(value: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SiChartGaugeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SiChartGaugeComponent, "si-chart-gauge", never, { "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "splitSteps": { "alias": "splitSteps"; "required": false; "isSignal": true; }; "responsiveSplitSteps": { "alias": "responsiveSplitSteps"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "unitsOnSplit": { "alias": "unitsOnSplit"; "required": false; "isSignal": true; }; "labelFormatter": { "alias": "labelFormatter"; "required": false; "isSignal": true; }; "numberOfDecimals": { "alias": "numberOfDecimals"; "required": false; "isSignal": true; }; "minNumberOfDecimals": { "alias": "minNumberOfDecimals"; "required": false; "isSignal": true; }; "maxNumberOfDecimals": { "alias": "maxNumberOfDecimals"; "required": false; "isSignal": true; }; "axisNumberOfDecimals": { "alias": "axisNumberOfDecimals"; "required": false; "isSignal": true; }; "hideAxisLabels": { "alias": "hideAxisLabels"; "required": false; "isSignal": true; }; "segments": { "alias": "segments"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=timeRangeBar]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiChartGaugeComponent, "si-chart-gauge", never, { "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "splitSteps": { "alias": "splitSteps"; "required": false; "isSignal": true; }; "responsiveSplitSteps": { "alias": "responsiveSplitSteps"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "unitsOnSplit": { "alias": "unitsOnSplit"; "required": false; "isSignal": true; }; "labelFormatter": { "alias": "labelFormatter"; "required": false; "isSignal": true; }; "valueFormatter": { "alias": "valueFormatter"; "required": false; "isSignal": true; }; "numberOfDecimals": { "alias": "numberOfDecimals"; "required": false; "isSignal": true; }; "minNumberOfDecimals": { "alias": "minNumberOfDecimals"; "required": false; "isSignal": true; }; "maxNumberOfDecimals": { "alias": "maxNumberOfDecimals"; "required": false; "isSignal": true; }; "axisNumberOfDecimals": { "alias": "axisNumberOfDecimals"; "required": false; "isSignal": true; }; "hideAxisLabels": { "alias": "hideAxisLabels"; "required": false; "isSignal": true; }; "segments": { "alias": "segments"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=timeRangeBar]"], true, never>;
 }

package/fesm2022/siemens-charts-ng.mjs

@@ -2758,11 +2758,17 @@ class SiChartGaugeComponent extends SiChartComponent {
     /** @defaultValue false */
     unitsOnSplit = input(false);
     /**
-     * Custom formatter for axis labels and value.
+     * Custom formatter for axis labels.
      * Takes precedence when specified, i.e. number of decimals, unit etc needs
      * to be set by the user using this formatter.
      */
     labelFormatter = input();
+    /**
+     * Custom formatter for value.
+     * Takes precedence when specified, i.e. number of decimals needs
+     * to be set by the user using this formatter.
+     */
+    valueFormatter = input();
     /**
      * Sets the number of decimals.
      * @deprecated Use `minNumberOfDecimals` and `maxNumberOfDecimals` instead.
@@ -3014,7 +3020,7 @@ class SiChartGaugeComponent extends SiChartComponent {
             detail: {
                 offsetCenter: [0, -0.5 * resp.valueFontSize],
                 valueAnimation: true,
-                formatter: this.valueFormatter(),
+                formatter: this.valueFormatterInternal(),
                 rich: {
                     value: {
                         fontSize: resp.valueFontSize,
@@ -3035,18 +3041,22 @@ class SiChartGaugeComponent extends SiChartComponent {
         this.actualOptions.series = series;
         this.applyTitles();
     }
-    valueFormatter() {
-        return (this.labelFormatter() ??
-            ((value) => {
-                const formattedValue = this.numberFormat().format(value);
-                const unit = this.unit();
-                const formattedUnit = unit
-                    ? unit.length > 5
-                        ? `\n{unit|${unit}}`
-                        : ` {unit|${unit}}`
-                    : '';
-                return `{value|${formattedValue}}${formattedUnit}`;
-            }));
+    valueFormatterInternal() {
+        const unit = this.unit();
+        const valueFormatter = this.valueFormatter();
+        const labelFormatter = this.labelFormatter();
+        const formattedUnit = unit ? (unit.length > 5 ? `\n{unit|${unit}}` : ` {unit|${unit}}`) : '';
+        return (value) => {
+            if (valueFormatter) {
+                return `{value|${valueFormatter(value)}}${formattedUnit}`;
+            }
+            // DEPRECATED: Use the new input `valueFormatter` to format the value.
+            // labelFormatter should be removed from here in future versions.
+            if (labelFormatter) {
+                return labelFormatter(value);
+            }
+            return `{value|${this.numberFormat().format(value)}}${formattedUnit}`;
+        };
     }
     ngOnChanges(changes) {
         if (this.chart && (changes.palette || changes.colors || changes.segments)) {
@@ -3069,7 +3079,7 @@ class SiChartGaugeComponent extends SiChartComponent {
         this.refreshSeries();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartGaugeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiChartGaugeComponent, isStandalone: true, selector: "si-chart-gauge", inputs: { minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, splitSteps: { classPropertyName: "splitSteps", publicName: "splitSteps", isSignal: true, isRequired: false, transformFunction: null }, responsiveSplitSteps: { classPropertyName: "responsiveSplitSteps", publicName: "responsiveSplitSteps", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, unitsOnSplit: { classPropertyName: "unitsOnSplit", publicName: "unitsOnSplit", isSignal: true, isRequired: false, transformFunction: null }, labelFormatter: { classPropertyName: "labelFormatter", publicName: "labelFormatter", isSignal: true, isRequired: false, transformFunction: null }, numberOfDecimals: { classPropertyName: "numberOfDecimals", publicName: "numberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, minNumberOfDecimals: { classPropertyName: "minNumberOfDecimals", publicName: "minNumberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, maxNumberOfDecimals: { classPropertyName: "maxNumberOfDecimals", publicName: "maxNumberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, axisNumberOfDecimals: { classPropertyName: "axisNumberOfDecimals", publicName: "axisNumberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, hideAxisLabels: { classPropertyName: "hideAxisLabels", publicName: "hideAxisLabels", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div\n    class=\"si-title-2 chart-title chart-title-width\"\n    [style.background-color]=\"backgroundColor()\"\n  >\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body-2\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n    }\n  </div>\n}\n\n<div\n  #chartContainerWrapper\n  class=\"chart-container-wrapper\"\n  [class.chart-scroll]=\"containerHeight()\"\n  [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n  <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n    @if (showCustomLegend()) {\n      @for (cl of customLegend; track $index) {\n        <si-custom-legend\n          #siCustomLegend\n          class=\"custom-legend\"\n          [style.top.px]=\"cl.top\"\n          [title]=\"title()\"\n          [subTitle]=\"subTitle()\"\n          [customLegend]=\"cl\"\n          [style.background-color]=\"backgroundColor()\"\n          [titleColor]=\"titleColor()\"\n          [subTitleColor]=\"subTitleColor()\"\n          [textColor]=\"textColor()\"\n          (legendIconClickEvent)=\"handleLegendClick($event)\"\n          (legendClickEvent)=\"handleLegendClick($event)\"\n          (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n          (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n        />\n      }\n    }\n    <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n  </div>\n</div>\n@if (externalZoomSlider()) {\n  <div\n    #externalZoomSlider\n    class=\"external-zoom-container\"\n    [class.has-time-range-bar]=\"showTimeRangeBar()\"\n    [style.--time-bar-height.px]=\"timeBarHeight()\"\n  ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n  <div\n    class=\"time-range-bar\"\n    [style.bottom.px]=\"timeBarBottom()\"\n    [style.padding-left.px]=\"timeBarLeft()\"\n    [style.padding-right.px]=\"timeBarRight()\"\n  >\n    <ng-content select=\"[slot=timeRangeBar]\" />\n  </div>\n}\n\n@if (inProgress()) {\n  <div class=\"progress-container\">\n    <si-chart-loading-spinner />\n  </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: SiCustomLegendComponent, selector: "si-custom-legend", inputs: ["customLegend", "title", "subTitle", "titleColor", "subTitleColor", "textColor"], outputs: ["legendIconClickEvent", "legendClickEvent", "legendHoverStartEvent", "legendHoverEndEvent"] }, { kind: "component", type: SiChartLoadingSpinnerComponent, selector: "si-chart-loading-spinner" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiChartGaugeComponent, isStandalone: true, selector: "si-chart-gauge", inputs: { minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, splitSteps: { classPropertyName: "splitSteps", publicName: "splitSteps", isSignal: true, isRequired: false, transformFunction: null }, responsiveSplitSteps: { classPropertyName: "responsiveSplitSteps", publicName: "responsiveSplitSteps", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, unitsOnSplit: { classPropertyName: "unitsOnSplit", publicName: "unitsOnSplit", isSignal: true, isRequired: false, transformFunction: null }, labelFormatter: { classPropertyName: "labelFormatter", publicName: "labelFormatter", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null }, numberOfDecimals: { classPropertyName: "numberOfDecimals", publicName: "numberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, minNumberOfDecimals: { classPropertyName: "minNumberOfDecimals", publicName: "minNumberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, maxNumberOfDecimals: { classPropertyName: "maxNumberOfDecimals", publicName: "maxNumberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, axisNumberOfDecimals: { classPropertyName: "axisNumberOfDecimals", publicName: "axisNumberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, hideAxisLabels: { classPropertyName: "hideAxisLabels", publicName: "hideAxisLabels", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div\n    class=\"si-title-2 chart-title chart-title-width\"\n    [style.background-color]=\"backgroundColor()\"\n  >\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body-2\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n    }\n  </div>\n}\n\n<div\n  #chartContainerWrapper\n  class=\"chart-container-wrapper\"\n  [class.chart-scroll]=\"containerHeight()\"\n  [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n  <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n    @if (showCustomLegend()) {\n      @for (cl of customLegend; track $index) {\n        <si-custom-legend\n          #siCustomLegend\n          class=\"custom-legend\"\n          [style.top.px]=\"cl.top\"\n          [title]=\"title()\"\n          [subTitle]=\"subTitle()\"\n          [customLegend]=\"cl\"\n          [style.background-color]=\"backgroundColor()\"\n          [titleColor]=\"titleColor()\"\n          [subTitleColor]=\"subTitleColor()\"\n          [textColor]=\"textColor()\"\n          (legendIconClickEvent)=\"handleLegendClick($event)\"\n          (legendClickEvent)=\"handleLegendClick($event)\"\n          (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n          (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n        />\n      }\n    }\n    <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n  </div>\n</div>\n@if (externalZoomSlider()) {\n  <div\n    #externalZoomSlider\n    class=\"external-zoom-container\"\n    [class.has-time-range-bar]=\"showTimeRangeBar()\"\n    [style.--time-bar-height.px]=\"timeBarHeight()\"\n  ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n  <div\n    class=\"time-range-bar\"\n    [style.bottom.px]=\"timeBarBottom()\"\n    [style.padding-left.px]=\"timeBarLeft()\"\n    [style.padding-right.px]=\"timeBarRight()\"\n  >\n    <ng-content select=\"[slot=timeRangeBar]\" />\n  </div>\n}\n\n@if (inProgress()) {\n  <div class=\"progress-container\">\n    <si-chart-loading-spinner />\n  </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: SiCustomLegendComponent, selector: "si-custom-legend", inputs: ["customLegend", "title", "subTitle", "titleColor", "subTitleColor", "textColor"], outputs: ["legendIconClickEvent", "legendClickEvent", "legendHoverStartEvent", "legendHoverEndEvent"] }, { kind: "component", type: SiChartLoadingSpinnerComponent, selector: "si-chart-loading-spinner" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartGaugeComponent, decorators: [{
             type: Component,