UI: Refactoring show total in chart tooltip

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html

@@ -318,8 +318,8 @@
               {{ 'tooltip.hide-zero-tooltip-values' | translate }}
           </mat-slide-toggle>
         </div>
-        <div class="tb-form-row space-between">
+        <div class="tb-form-row">
-          <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipStackedShowTotal">
+          <mat-slide-toggle class="mat-slide" formControlName="tooltipStackedShowTotal">
             {{ 'tooltip.show-stack-total' | translate }}
           </mat-slide-toggle>
         </div>

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts

@@ -363,10 +363,11 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
       this.timeSeriesChartWidgetConfigForm.get('tooltipValueColor').enable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipShowDate').enable({emitEvent: false});
       this.timeSeriesChartWidgetConfigForm.get('tooltipHideZeroValues').enable({emitEvent: false});
-      if (stack)
+      if (stack) {
         this.timeSeriesChartWidgetConfigForm.get('tooltipStackedShowTotal').enable();
-      else
+      } else {
         this.timeSeriesChartWidgetConfigForm.get('tooltipStackedShowTotal').disable();
+      }
       this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundColor').enable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundBlur').enable();
       if (tooltipShowDate) {

ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-tooltip.models.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { isFunction } from '@core/utils';
+import { isDefined, isFunction, isNotEmptyStr } from '@core/utils';
 import { FormattedData } from '@shared/models/widget.models';
 import { DateFormatProcessor, DateFormatSettings, Font } from '@shared/models/widget-settings.models';
 import { TimeSeriesChartDataItem } from '@home/components/widget/lib/chart/time-series-chart.models';
@@ -22,6 +22,7 @@ import { Renderer2, SecurityContext } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { CallbackDataParams } from 'echarts/types/dist/shared';
 import { Interval } from '@shared/models/time/time.models';
+import { TranslateService } from '@ngx-translate/core';
 
 export type TimeSeriesChartTooltipValueFormatFunction =
   (value: any, latestData: FormattedData, units?: string, decimals?: number) => string;
@@ -89,7 +90,8 @@ export class TimeSeriesChartTooltip {
               private sanitizer: DomSanitizer,
               private settings: TimeSeriesChartTooltipWidgetSettings,
               private tooltipDateFormat: DateFormatProcessor,
-              private valueFormatFunction: TimeSeriesChartTooltipValueFormatFunction) {
+              private valueFormatFunction: TimeSeriesChartTooltipValueFormatFunction,
+              private translate: TranslateService) {
 
   }
 
@@ -131,23 +133,65 @@ export class TimeSeriesChartTooltip {
       if (this.settings.tooltipShowDate) {
         this.renderer.appendChild(tooltipItemsElement, this.constructTooltipDateElement(items[0].param, interval));
       }
-      let total = 0, isStacked = false;
+      let total = 0;
+      let isStacked = false;
+      const totalUnits = new Set<string>();
+      let totalDecimal = 0;
       for (const item of items) {
-        if (!this.settings.tooltipHideZeroValues || (item.param.value[1] && item.param.value[1] !== 'false')) {
+        if (this.shouldShowItem(item)) {
           this.renderer.appendChild(tooltipItemsElement, this.constructTooltipSeriesElement(item));
-          if (item.dataItem?.barRenderContext?.barStackIndex !== undefined && !isNaN(Number(item.param.value[1]))) {
+          if (item.dataItem?.option?.stack !== undefined && !isNaN(Number(item.param.value[1]))) {
             isStacked = true;
             total += Number(item.param.value[1]);
+            if (isNotEmptyStr(item.dataItem.units)) {
+              totalUnits.add(item.dataItem.units);
+            }
+            if (isDefined(item.dataItem.decimals)) {
+              totalDecimal = Math.max(item.dataItem.decimals, totalDecimal);
+            }
           }
         }
       }
-      if (isStacked && this.settings.tooltipStackedShowTotal)
+      if (isStacked && this.settings.tooltipStackedShowTotal) {
-        this.renderer.appendChild(tooltipItemsElement, this.constructTooltipTotalStackedElement(total));
+        const unit = totalUnits.size === 1 ? Array.from(totalUnits.values())[0] : "";
+        const totalValue = this.valueFormatFunction(total, {} as FormattedData, unit, totalDecimal);
+        this.renderer.appendChild(tooltipItemsElement, this.constructTooltipTotalStackedElement(totalValue));
+      }
+    }
+  }
+
+  private shouldShowItem(item: TooltipItem): boolean {
+    if (!this.settings.tooltipHideZeroValues) return true;
+    const value = item.param?.value?.[1];
+    return value && value !== 'false';
+  }
+
+  private createElement(tag = 'div', styles?: Record<string, string>): HTMLElement {
+    const node = this.renderer.createElement(tag);
+    if (styles) {
+      for (const [k, v] of Object.entries(styles)) {
+        this.renderer.setStyle(node, k, v);
+      }
+    }
+    return node;
+  }
+
+  private applyFont(el: HTMLElement, font: {family: string; size: number; sizeUnit: string; style: string; weight: string; lineHeight: string}, color: string, overrides?: Partial<CSSStyleDeclaration>) {
+    this.renderer.setStyle(el, 'font-family', font.family);
+    this.renderer.setStyle(el, 'font-size', `${font.size}${font.sizeUnit}`);
+    this.renderer.setStyle(el, 'font-style', font.style);
+    this.renderer.setStyle(el, 'font-weight', font.weight);
+    this.renderer.setStyle(el, 'line-height', font.lineHeight);
+    this.renderer.setStyle(el, 'color', color);
+    if (overrides) {
+      for (const [k, v] of Object.entries(overrides)) {
+        if (v != null) this.renderer.setStyle(el, k, v as string);
+      }
     }
   }
 
   private constructTooltipDateElement(param: CallbackDataParams, interval?: Interval): HTMLElement {
-    const dateElement: HTMLElement = this.renderer.createElement('div');
+    const dateElement = this.createElement();
     let dateText: string;
     const startTs = param.value[2];
     const endTs = param.value[3];
@@ -164,43 +208,25 @@ export class TimeSeriesChartTooltip {
       dateText = this.tooltipDateFormat.update(ts, interval);
     }
     this.renderer.appendChild(dateElement, this.renderer.createText(dateText));
-    this.renderer.setStyle(dateElement, 'font-family', this.settings.tooltipDateFont.family);
+    this.applyFont(dateElement, this.settings.tooltipDateFont, this.settings.tooltipDateColor);
-    this.renderer.setStyle(dateElement, 'font-size', this.settings.tooltipDateFont.size + this.settings.tooltipDateFont.sizeUnit);
-    this.renderer.setStyle(dateElement, 'font-style', this.settings.tooltipDateFont.style);
-    this.renderer.setStyle(dateElement, 'font-weight', this.settings.tooltipDateFont.weight);
-    this.renderer.setStyle(dateElement, 'line-height', this.settings.tooltipDateFont.lineHeight);
-    this.renderer.setStyle(dateElement, 'color', this.settings.tooltipDateColor);
     return dateElement;
   }
 
   private constructTooltipSeriesElement(item: TooltipItem): HTMLElement {
-    const labelValueElement: HTMLElement = this.renderer.createElement('div');
+    const row = this.createElement('div', {display: 'flex', 'flex-direction': 'row', 'align-items': 'center', 'align-self': 'stretch', gap: '12px'});
-    this.renderer.setStyle(labelValueElement, 'display', 'flex');
+
-    this.renderer.setStyle(labelValueElement, 'flex-direction', 'row');
+    const label = this.createElement('div', { display: 'flex', 'align-items': 'center', gap: '8px' });
-    this.renderer.setStyle(labelValueElement, 'align-items', 'center');
+    this.renderer.appendChild(row, label);
-    this.renderer.setStyle(labelValueElement, 'align-self', 'stretch');
+
-    this.renderer.setStyle(labelValueElement, 'gap', '12px');
+    const dot = this.createElement('div', { width: '8px', height: '8px', 'border-radius': '50%', background: item.param.color as string });
-    const labelElement: HTMLElement = this.renderer.createElement('div');
+    this.renderer.appendChild(label, dot);
-    this.renderer.setStyle(labelElement, 'display', 'flex');
+
-    this.renderer.setStyle(labelElement, 'align-items', 'center');
+    const labelText = this.createElement('div');
-    this.renderer.setStyle(labelElement, 'gap', '8px');
+    this.renderer.setProperty(labelText, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, item.param.seriesName));
-    this.renderer.appendChild(labelValueElement, labelElement);
+    this.applyFont(labelText, this.settings.tooltipLabelFont, this.settings.tooltipLabelColor);
-    const circleElement: HTMLElement = this.renderer.createElement('div');
+    this.renderer.appendChild(label, labelText);
-    this.renderer.setStyle(circleElement, 'width', '8px');
+
-    this.renderer.setStyle(circleElement, 'height', '8px');
+    const valueElement: HTMLElement = this.createElement('div', { flex: '1', 'text-align': 'end' });
-    this.renderer.setStyle(circleElement, 'border-radius', '50%');
-    this.renderer.setStyle(circleElement, 'background', item.param.color);
-    this.renderer.appendChild(labelElement, circleElement);
-    const labelTextElement: HTMLElement = this.renderer.createElement('div');
-    this.renderer.setProperty(labelTextElement, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, item.param.seriesName));
-    this.renderer.setStyle(labelTextElement, 'font-family', this.settings.tooltipLabelFont.family);
-    this.renderer.setStyle(labelTextElement, 'font-size', this.settings.tooltipLabelFont.size + this.settings.tooltipLabelFont.sizeUnit);
-    this.renderer.setStyle(labelTextElement, 'font-style', this.settings.tooltipLabelFont.style);
-    this.renderer.setStyle(labelTextElement, 'font-weight', this.settings.tooltipLabelFont.weight);
-    this.renderer.setStyle(labelTextElement, 'line-height', this.settings.tooltipLabelFont.lineHeight);
-    this.renderer.setStyle(labelTextElement, 'color', this.settings.tooltipLabelColor);
-    this.renderer.appendChild(labelElement, labelTextElement);
-    const valueElement: HTMLElement = this.renderer.createElement('div');
     let formatFunction = this.valueFormatFunction;
     let latestData: FormattedData;
     let units = '';
@@ -218,51 +244,29 @@ export class TimeSeriesChartTooltip {
     }
     const value = formatFunction(item.param.value[1], latestData, units, decimals);
     this.renderer.setProperty(valueElement, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, value));
-    this.renderer.setStyle(valueElement, 'flex', '1');
+    this.applyFont(valueElement, this.settings.tooltipValueFont, this.settings.tooltipValueColor);
-    this.renderer.setStyle(valueElement, 'text-align', 'end');
+    this.renderer.appendChild(row, valueElement);
-    this.renderer.setStyle(valueElement, 'font-family', this.settings.tooltipValueFont.family);
+
-    this.renderer.setStyle(valueElement, 'font-size', this.settings.tooltipValueFont.size + this.settings.tooltipValueFont.sizeUnit);
+    return row;
-    this.renderer.setStyle(valueElement, 'font-style', this.settings.tooltipValueFont.style);
-    this.renderer.setStyle(valueElement, 'font-weight', this.settings.tooltipValueFont.weight);
-    this.renderer.setStyle(valueElement, 'line-height', this.settings.tooltipValueFont.lineHeight);
-    this.renderer.setStyle(valueElement, 'color', this.settings.tooltipValueColor);
-    this.renderer.appendChild(labelValueElement, valueElement);
-    return labelValueElement;
   }
 
-  private constructTooltipTotalStackedElement(total: number): HTMLElement {
+  private constructTooltipTotalStackedElement(total: string): HTMLElement {
-    const labelValueElement: HTMLElement = this.renderer.createElement('div');
+    const row = this.createElement('div', {display: 'flex', 'flex-direction': 'row', 'align-items': 'center', 'align-self': 'stretch', gap: '12px'});
-    this.renderer.setStyle(labelValueElement, 'display', 'flex');
+
-    this.renderer.setStyle(labelValueElement, 'flex-direction', 'row');
+    const label = this.createElement('div', { display: 'flex', 'align-items': 'center', gap: '8px' });
-    this.renderer.setStyle(labelValueElement, 'align-items', 'center');
+    this.renderer.appendChild(row, label);
-    this.renderer.setStyle(labelValueElement, 'align-self', 'stretch');
+
-    this.renderer.setStyle(labelValueElement, 'gap', '12px');
+    const labelText = this.createElement('div');
-    const labelElement: HTMLElement = this.renderer.createElement('div');
+    this.renderer.setProperty(labelText, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, this.translate.instant('legend.Total')));
-    this.renderer.setStyle(labelElement, 'display', 'flex');
+    this.applyFont(labelText, this.settings.tooltipLabelFont, this.settings.tooltipLabelColor, { fontWeight: 'bold' });
-    this.renderer.setStyle(labelElement, 'align-items', 'center');
+    this.renderer.appendChild(label, labelText);
-    this.renderer.setStyle(labelElement, 'gap', '8px');
+
-    this.renderer.appendChild(labelValueElement, labelElement);
+    const valueEl = this.createElement('div', { flex: '1', 'text-align': 'end' });
-    const labelTextElement: HTMLElement = this.renderer.createElement('div');
+    this.renderer.setProperty(valueEl, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, total));
-    this.renderer.setProperty(labelTextElement, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, 'Total'));
+    this.applyFont(valueEl, this.settings.tooltipValueFont, this.settings.tooltipValueColor, { fontWeight: 'bold' });
-    this.renderer.setStyle(labelTextElement, 'font-family', this.settings.tooltipLabelFont.family);
+    this.renderer.appendChild(row, valueEl);
-    this.renderer.setStyle(labelTextElement, 'font-size', this.settings.tooltipLabelFont.size + this.settings.tooltipLabelFont.sizeUnit);
+
-    this.renderer.setStyle(labelTextElement, 'font-style', this.settings.tooltipLabelFont.style);
+    return row;
-    this.renderer.setStyle(labelTextElement, 'font-weight', 'bold');
-    this.renderer.setStyle(labelTextElement, 'line-height', this.settings.tooltipLabelFont.lineHeight);
-    this.renderer.setStyle(labelTextElement, 'color', this.settings.tooltipLabelColor);
-    this.renderer.appendChild(labelElement, labelTextElement);
-    const valueElement: HTMLElement = this.renderer.createElement('div');
-    this.renderer.setProperty(valueElement, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, total.toString()));
-    this.renderer.setStyle(valueElement, 'flex', '1');
-    this.renderer.setStyle(valueElement, 'text-align', 'end');
-    this.renderer.setStyle(valueElement, 'font-family', this.settings.tooltipValueFont.family);
-    this.renderer.setStyle(valueElement, 'font-size', this.settings.tooltipValueFont.size + this.settings.tooltipValueFont.sizeUnit);
-    this.renderer.setStyle(valueElement, 'font-style', this.settings.tooltipValueFont.style);
-    this.renderer.setStyle(valueElement, 'font-weight', 'bold');
-    this.renderer.setStyle(valueElement, 'line-height', this.settings.tooltipValueFont.lineHeight);
-    this.renderer.setStyle(valueElement, 'color', this.settings.tooltipValueColor);
-    this.renderer.appendChild(labelValueElement, valueElement);
-    return labelValueElement;
   }
 
 private static mapTooltipParams(params: CallbackDataParams[] | CallbackDataParams,

ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts

@@ -143,7 +143,7 @@ export interface TimeSeriesChartDataItem {
   xAxisIndex: number;
   yAxisId: TimeSeriesChartYAxisId;
   yAxisIndex: number;
-  option?: LineSeriesOption | CustomSeriesOption;
+  option?: LineSeriesOption;
   barRenderContext?: BarRenderContext;
   unitConvertor?: TbUnitConverter;
 }

ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts

@@ -212,7 +212,8 @@ export class TbTimeSeriesChart {
       this.ctx.sanitizer,
       this.settings,
       this.tooltipDateFormat,
-      tooltipValueFormatFunction
+      tooltipValueFormatFunction,
+      this.ctx.translate
     );
     this.onResize();
     if (this.autoResize) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html

@@ -242,8 +242,8 @@
               {{ 'tooltip.hide-zero-tooltip-values' | translate }}
             </mat-slide-toggle>
           </div>
-          <div class="tb-form-row space-between">
+          <div class="tb-form-row">
-            <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipStackedShowTotal">
+            <mat-slide-toggle class="mat-slide" formControlName="tooltipStackedShowTotal">
               {{ 'tooltip.show-stack-total' | translate }}
             </mat-slide-toggle>
           </div>

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts

@@ -227,10 +227,11 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
       this.timeSeriesChartWidgetSettingsForm.get('tooltipValueFormatter').enable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipShowDate').enable({emitEvent: false});
       this.timeSeriesChartWidgetSettingsForm.get('tooltipHideZeroValues').enable();
-      if (stack)
+      if (stack) {
         this.timeSeriesChartWidgetSettingsForm.get('tooltipStackedShowTotal').enable();
-      else
+      } else {
         this.timeSeriesChartWidgetSettingsForm.get('tooltipStackedShowTotal').disable();
+      }
       this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundColor').enable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundBlur').enable();
       if (tooltipShowDate) {