feat: add tooltip stacked total option in time series chart settings

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

@@ -311,6 +311,11 @@
             </div>
           </mat-slide-toggle>
         </div>
+        <div class="tb-form-row space-between">
+          <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipStackedShowTotal">
+            {{ 'tooltip.show-stack-total' | translate }}
+          </mat-slide-toggle>
+        </div>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.background-color' | translate }}</div>
           <tb-color-input asBoxInput

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

@@ -188,6 +188,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
       tooltipDateFont: [settings.tooltipDateFont, []],
       tooltipDateColor: [settings.tooltipDateColor, []],
       tooltipDateInterval: [settings.tooltipDateInterval, []],
+      tooltipStackedShowTotal: [settings.tooltipStackedShowTotal, []],
 
       tooltipBackgroundColor: [settings.tooltipBackgroundColor, []],
       tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []],
@@ -264,6 +265,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
     this.widgetConfig.config.settings.tooltipDateFont = config.tooltipDateFont;
     this.widgetConfig.config.settings.tooltipDateColor = config.tooltipDateColor;
     this.widgetConfig.config.settings.tooltipDateInterval = config.tooltipDateInterval;
+    this.widgetConfig.config.settings.tooltipStackedShowTotal = config.tooltipStackedShowTotal;
     this.widgetConfig.config.settings.tooltipBackgroundColor = config.tooltipBackgroundColor;
     this.widgetConfig.config.settings.tooltipBackgroundBlur = config.tooltipBackgroundBlur;
 
@@ -284,7 +286,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
   }
 
   protected validatorTriggers(): string[] {
-    return ['comparisonEnabled', 'showTitle', 'showIcon', 'showLegend', 'showTooltip', 'tooltipShowDate'];
+    return ['comparisonEnabled', 'showTitle', 'showIcon', 'showLegend', 'showTooltip', 'tooltipShowDate', 'stack'];
   }
 
   protected updateValidators(emitEvent: boolean, trigger?: string) {
@@ -294,6 +296,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
     const showLegend: boolean = this.timeSeriesChartWidgetConfigForm.get('showLegend').value;
     const showTooltip: boolean = this.timeSeriesChartWidgetConfigForm.get('showTooltip').value;
     const tooltipShowDate: boolean = this.timeSeriesChartWidgetConfigForm.get('tooltipShowDate').value;
+    const stack: boolean = this.timeSeriesChartWidgetConfigForm.get('stack').value;
 
     if (comparisonEnabled) {
       this.timeSeriesChartWidgetConfigForm.get('timeForComparison').enable();
@@ -357,6 +360,10 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
       this.timeSeriesChartWidgetConfigForm.get('tooltipValueFont').enable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipValueColor').enable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipShowDate').enable({emitEvent: false});
+      if (stack)
+        this.timeSeriesChartWidgetConfigForm.get('tooltipStackedShowTotal').enable();
+      else
+        this.timeSeriesChartWidgetConfigForm.get('tooltipStackedShowTotal').disable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundColor').enable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundBlur').enable();
       if (tooltipShowDate) {
@@ -381,6 +388,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
       this.timeSeriesChartWidgetConfigForm.get('tooltipDateFont').disable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipDateColor').disable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipDateInterval').disable();
+      this.timeSeriesChartWidgetConfigForm.get('tooltipStackedShowTotal').disable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundColor').disable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundBlur').disable();
     }

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

@@ -44,6 +44,7 @@ export interface TimeSeriesChartTooltipWidgetSettings {
   tooltipDateColor: string;
   tooltipBackgroundColor: string;
   tooltipBackgroundBlur: number;
+  tooltipStackedShowTotal?: boolean
 }
 
 export enum TimeSeriesChartTooltipTrigger {
@@ -128,9 +129,16 @@ export class TimeSeriesChartTooltip {
       if (this.settings.tooltipShowDate) {
         this.renderer.appendChild(tooltipItemsElement, this.constructTooltipDateElement(items[0].param, interval));
       }
+      let total = 0, isStacked = false;
       for (const item of items) {
         this.renderer.appendChild(tooltipItemsElement, this.constructTooltipSeriesElement(item));
+        if (item.dataItem?.barRenderContext?.barStackIndex !== undefined && !isNaN(Number(item.param.value[1]))) {
+          isStacked = true;
+          total += Number(item.param.value[1]);
+        }
       }
+      if (isStacked && this.settings.tooltipStackedShowTotal)
+        this.renderer.appendChild(tooltipItemsElement, this.constructTooltipTotalStackedElement(total));
     }
   }
 
@@ -218,7 +226,42 @@ export class TimeSeriesChartTooltip {
     return labelValueElement;
   }
 
-  private static mapTooltipParams(params: CallbackDataParams[] | CallbackDataParams,
+  private constructTooltipTotalStackedElement(total: number): HTMLElement {
+    const labelValueElement: HTMLElement = this.renderer.createElement('div');
+    this.renderer.setStyle(labelValueElement, 'display', 'flex');
+    this.renderer.setStyle(labelValueElement, 'flex-direction', 'row');
+    this.renderer.setStyle(labelValueElement, 'align-items', 'center');
+    this.renderer.setStyle(labelValueElement, 'align-self', 'stretch');
+    this.renderer.setStyle(labelValueElement, 'gap', '12px');
+    const labelElement: HTMLElement = this.renderer.createElement('div');
+    this.renderer.setStyle(labelElement, 'display', 'flex');
+    this.renderer.setStyle(labelElement, 'align-items', 'center');
+    this.renderer.setStyle(labelElement, 'gap', '8px');
+    this.renderer.appendChild(labelValueElement, labelElement);
+    const labelTextElement: HTMLElement = this.renderer.createElement('div');
+    this.renderer.setProperty(labelTextElement, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, 'Total'));
+    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', '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,
                                   series?: TimeSeriesChartDataItem[],
                                   focusedSeriesIndex?: number): TooltipParams {
     const result: TooltipParams = {

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

@@ -760,6 +760,7 @@ export const timeSeriesChartDefaultSettings: TimeSeriesChartSettings = {
   },
   tooltipDateColor: 'rgba(0, 0, 0, 0.76)',
   tooltipDateInterval: true,
+  tooltipStackedShowTotal: false,
   tooltipBackgroundColor: 'rgba(255, 255, 255, 0.76)',
   tooltipBackgroundBlur: 4,
   comparisonEnabled: false,

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

@@ -235,6 +235,11 @@
               </div>
             </mat-slide-toggle>
           </div>
+          <div class="tb-form-row space-between">
+            <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipStackedShowTotal">
+              {{ 'tooltip.show-stack-total' | translate }}
+            </mat-slide-toggle>
+          </div>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.background-color' | translate }}</div>
             <tb-color-input asBoxInput

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

@@ -163,6 +163,7 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
       tooltipDateFont: [settings.tooltipDateFont, []],
       tooltipDateColor: [settings.tooltipDateColor, []],
       tooltipDateInterval: [settings.tooltipDateInterval, []],
+      tooltipStackedShowTotal: [settings.tooltipStackedShowTotal, []],
 
       tooltipBackgroundColor: [settings.tooltipBackgroundColor, []],
       tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []],
@@ -178,7 +179,7 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
   }
 
   protected validatorTriggers(): string[] {
-    return ['comparisonEnabled', 'showLegend', 'showTooltip', 'tooltipShowDate'];
+    return ['comparisonEnabled', 'showLegend', 'showTooltip', 'tooltipShowDate', 'stack'];
   }
 
   protected updateValidators(emitEvent: boolean) {
@@ -186,6 +187,7 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
     const showLegend: boolean = this.timeSeriesChartWidgetSettingsForm.get('showLegend').value;
     const showTooltip: boolean = this.timeSeriesChartWidgetSettingsForm.get('showTooltip').value;
     const tooltipShowDate: boolean = this.timeSeriesChartWidgetSettingsForm.get('tooltipShowDate').value;
+    const stack: boolean = this.timeSeriesChartWidgetSettingsForm.get('stack').value;
 
     if (comparisonEnabled) {
       this.timeSeriesChartWidgetSettingsForm.get('timeForComparison').enable();
@@ -223,6 +225,10 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
       this.timeSeriesChartWidgetSettingsForm.get('tooltipValueColor').enable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipValueFormatter').enable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipShowDate').enable({emitEvent: false});
+      if (stack)
+        this.timeSeriesChartWidgetSettingsForm.get('tooltipStackedShowTotal').enable();
+      else
+        this.timeSeriesChartWidgetSettingsForm.get('tooltipStackedShowTotal').disable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundColor').enable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundBlur').enable();
       if (tooltipShowDate) {
@@ -248,6 +254,7 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
       this.timeSeriesChartWidgetSettingsForm.get('tooltipDateFont').disable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipDateColor').disable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipDateInterval').disable();
+      this.timeSeriesChartWidgetSettingsForm.get('tooltipStackedShowTotal').disable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundColor').disable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundBlur').disable();
     }

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -5839,6 +5839,7 @@
         "date": "Date",
         "show-date-time-interval": "Show date time interval",
         "show-date-time-interval-hint": "Show date time interval according to the data aggregation.",
+        "show-stack-total": "Show total value in stack mode",
         "background-color": "Background color",
         "background-blur": "Background blur"
     },