From 896a378f6f26303689061e70f13ef87fe41f5807 Mon Sep 17 00:00:00 2001
From: Paolo Cristiani <42511852+pgrisu@users.noreply.github.com>
Date: Wed, 14 May 2025 18:11:20 +0200
Subject: [PATCH] Add show-total legend setting to latest-chart widgets

---
 .../basic/chart/latest-chart-basic-config.component.html     | 3 +++
 .../basic/chart/latest-chart-basic-config.component.ts       | 4 ++++
 .../components/widget/lib/chart/latest-chart.component.ts    | 5 ++++-
 .../home/components/widget/lib/chart/latest-chart.models.ts  | 2 ++
 .../chart/latest-chart-widget-settings.component.html        | 3 +++
 .../settings/chart/latest-chart-widget-settings.component.ts | 3 +++
 6 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
index 4a9569fb29..4601eaa4f9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
@@ -143,6 +143,9 @@
             </tb-color-input>
           </div>
         </div>
+        <mat-slide-toggle class="mat-slide flex items-stretch justify-left" formControlName="legendShowTotal" (click)="$event.stopPropagation()">
+          {{ 'legend.show-total' | translate }}
+        </mat-slide-toggle>
       </ng-template>
     </mat-expansion-panel>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.ts
index 9890895938..1a75f95d2f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.ts
@@ -176,6 +176,7 @@ export abstract class LatestChartBasicConfigComponent<S extends LatestChartWidge
       legendLabelColor: [settings.legendLabelColor, []],
       legendValueFont: [settings.legendValueFont, []],
       legendValueColor: [settings.legendValueColor, []],
+      legendShowTotal: [settings.legendShowTotal, []],
 
       showTooltip: [settings.showTooltip, []],
       tooltipValueType: [settings.tooltipValueType, []],
@@ -225,6 +226,7 @@ export abstract class LatestChartBasicConfigComponent<S extends LatestChartWidge
     this.widgetConfig.config.settings.legendLabelColor = config.legendLabelColor;
     this.widgetConfig.config.settings.legendValueFont = config.legendValueFont;
     this.widgetConfig.config.settings.legendValueColor = config.legendValueColor;
+    this.widgetConfig.config.settings.legendShowTotal = config.legendShowTotal;
 
     this.widgetConfig.config.settings.showTooltip = config.showTooltip;
     this.widgetConfig.config.settings.tooltipValueType = config.tooltipValueType;
@@ -284,12 +286,14 @@ export abstract class LatestChartBasicConfigComponent<S extends LatestChartWidge
       this.latestChartWidgetConfigForm.get('legendLabelColor').enable();
       this.latestChartWidgetConfigForm.get('legendValueFont').enable();
       this.latestChartWidgetConfigForm.get('legendValueColor').enable();
+      this.latestChartWidgetConfigForm.get('legendShowTotal').enable();
     } else {
       this.latestChartWidgetConfigForm.get('legendPosition').disable();
       this.latestChartWidgetConfigForm.get('legendLabelFont').disable();
       this.latestChartWidgetConfigForm.get('legendLabelColor').disable();
       this.latestChartWidgetConfigForm.get('legendValueFont').disable();
       this.latestChartWidgetConfigForm.get('legendValueColor').disable();
+      this.latestChartWidgetConfigForm.get('legendShowTotal').disable();
     }
     if (showTooltip) {
       this.latestChartWidgetConfigForm.get('tooltipValueType').enable();
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.ts
index 85905dfd3e..80be75d98d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.ts
@@ -82,7 +82,8 @@ export class LatestChartComponent implements OnInit, OnDestroy, AfterViewInit {
   padding: string;
 
   get legendItems(): LatestChartLegendItem[] {
-    return this.latestChart ? this.latestChart.getLegendItems() : [];
+    let items = this.latestChart ? this.latestChart.getLegendItems() : [];
+    return this.legendShowTotal ? items : items.filter(item => !item.total);
   }
 
   legendLabelStyle: ComponentStyle;
@@ -92,6 +93,7 @@ export class LatestChartComponent implements OnInit, OnDestroy, AfterViewInit {
 
   private shapeResize$: ResizeObserver;
   private legendHorizontal: boolean;
+  private legendShowTotal: boolean;
 
   private latestChart: TbLatestChart<LatestChartSettings>;
 
@@ -119,6 +121,7 @@ export class LatestChartComponent implements OnInit, OnDestroy, AfterViewInit {
       this.legendValueStyle = textStyle(this.settings.legendValueFont);
       this.disabledLegendValueStyle = textStyle(this.settings.legendValueFont);
       this.legendValueStyle.color = this.settings.legendValueColor;
+      this.legendShowTotal = this.settings.legendShowTotal;
     }
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.models.ts
index 931d3c52ed..9184bc59e7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.models.ts
@@ -103,6 +103,7 @@ export interface LatestChartWidgetSettings extends LatestChartSettings {
   legendLabelColor: string;
   legendValueFont: Font;
   legendValueColor: string;
+  legendShowTotal: boolean;
   background: BackgroundSettings;
   padding: string;
 }
@@ -129,6 +130,7 @@ export const latestChartWidgetDefaultSettings: LatestChartWidgetSettings = {
     lineHeight: '20px'
   },
   legendValueColor: 'rgba(0, 0, 0, 0.87)',
+  legendShowTotal: true,
   background: {
     type: BackgroundType.color,
     color: '#fff',
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html
index 04476e69e2..5246747c20 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html
@@ -61,6 +61,9 @@
             </tb-color-input>
           </div>
         </div>
+        <mat-slide-toggle class="mat-slide flex items-stretch justify-left" formControlName="legendShowTotal" (click)="$event.stopPropagation()">
+          {{ 'legend.show-total' | translate }}
+        </mat-slide-toggle>
       </ng-template>
     </mat-expansion-panel>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.ts
index 1d7baebd33..b67a1d85f5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.ts
@@ -134,6 +134,7 @@ export abstract class LatestChartWidgetSettingsComponent<S extends LatestChartWi
       legendLabelColor: [settings.legendLabelColor, []],
       legendValueFont: [settings.legendValueFont, []],
       legendValueColor: [settings.legendValueColor, []],
+      legendShowTotal: [settings.legendShowTotal, []],
 
       showTooltip: [settings.showTooltip, []],
       tooltipValueType: [settings.tooltipValueType, []],
@@ -163,12 +164,14 @@ export abstract class LatestChartWidgetSettingsComponent<S extends LatestChartWi
       this.latestChartWidgetSettingsForm.get('legendLabelColor').enable();
       this.latestChartWidgetSettingsForm.get('legendValueFont').enable();
       this.latestChartWidgetSettingsForm.get('legendValueColor').enable();
+      this.latestChartWidgetSettingsForm.get('legendShowTotal').enable();
     } else {
       this.latestChartWidgetSettingsForm.get('legendPosition').disable();
       this.latestChartWidgetSettingsForm.get('legendLabelFont').disable();
       this.latestChartWidgetSettingsForm.get('legendLabelColor').disable();
       this.latestChartWidgetSettingsForm.get('legendValueFont').disable();
       this.latestChartWidgetSettingsForm.get('legendValueColor').disable();
+      this.latestChartWidgetSettingsForm.get('legendShowTotal').disable();
     }
     if (showTooltip) {
       this.latestChartWidgetSettingsForm.get('tooltipValueType').enable();