From d989d1e7d75e1fa54f484bea444c2b2d08bc5d5a Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 30 Sep 2025 13:52:05 +0300
Subject: [PATCH] UI: Refactoring show total value in legend

---
 .../basic/chart/latest-chart-basic-config.component.html  | 8 +++++---
 .../widget/lib/chart/bar-chart-widget.models.ts           | 1 +
 .../components/widget/lib/chart/doughnut-widget.models.ts | 1 +
 .../components/widget/lib/chart/latest-chart.component.ts | 5 +----
 .../components/widget/lib/chart/latest-chart.models.ts    | 5 ++---
 .../home/components/widget/lib/chart/latest-chart.ts      | 8 +++++---
 .../widget/lib/chart/pie-chart-widget.models.ts           | 1 +
 .../widget/lib/chart/polar-area-widget.models.ts          | 1 +
 .../widget/lib/chart/radar-chart-widget.models.ts         | 1 +
 .../chart/latest-chart-widget-settings.component.html     | 8 +++++---
 10 files changed, 23 insertions(+), 16 deletions(-)

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 b5c1a460fb..31d0e6cd7e 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
@@ -144,9 +144,11 @@
             </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>
+        <div class="tb-form-row">
+          <mat-slide-toggle class="mat-slide" formControlName="legendShowTotal">
+            {{ 'legend.show-total' | translate }}
+          </mat-slide-toggle>
+        </div>
       </ng-template>
     </mat-expansion-panel>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-widget.models.ts
index 036ba70c04..3f76eb18cf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-widget.models.ts
@@ -68,6 +68,7 @@ export const barChartWidgetBarsChartSettings = (settings: BarChartWidgetSettings
   showTotal: false,
   animation: settings.animation,
   showLegend: settings.showLegend,
+  legendShowTotal: settings.legendShowTotal,
   showTooltip: settings.showTooltip,
   tooltipValueType: settings.tooltipValueType,
   tooltipValueDecimals: settings.tooltipValueDecimals,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts
index 0d8c1ba9fa..0ef277ea8b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts
@@ -88,6 +88,7 @@ export const doughnutPieChartSettings = (settings: DoughnutWidgetSettings): Deep
   showTotal: settings.layout === DoughnutLayout.with_total,
   animation: settings.animation,
   showLegend: settings.showLegend,
+  legendShowTotal: settings.legendShowTotal,
   totalValueFont: settings.totalValueFont,
   totalValueColor: settings.totalValueColor,
   showLabel: false,
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 80be75d98d..85905dfd3e 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,8 +82,7 @@ export class LatestChartComponent implements OnInit, OnDestroy, AfterViewInit {
   padding: string;
 
   get legendItems(): LatestChartLegendItem[] {
-    let items = this.latestChart ? this.latestChart.getLegendItems() : [];
-    return this.legendShowTotal ? items : items.filter(item => !item.total);
+    return this.latestChart ? this.latestChart.getLegendItems() : [];
   }
 
   legendLabelStyle: ComponentStyle;
@@ -93,7 +92,6 @@ export class LatestChartComponent implements OnInit, OnDestroy, AfterViewInit {
 
   private shapeResize$: ResizeObserver;
   private legendHorizontal: boolean;
-  private legendShowTotal: boolean;
 
   private latestChart: TbLatestChart<LatestChartSettings>;
 
@@ -121,7 +119,6 @@ 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 639938bad6..aa1ac43644 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
@@ -87,6 +87,7 @@ export interface LatestChartSettings extends LatestChartTooltipSettings {
   sortSeries: boolean;
   showTotal?: boolean;
   showLegend: boolean;
+  legendShowTotal: boolean;
   animation: ChartAnimationSettings;
 }
 
@@ -96,6 +97,7 @@ export const latestChartDefaultSettings: LatestChartSettings = {
   sortSeries: false,
   showTotal: false,
   showLegend: true,
+  legendShowTotal: true,
   animation: mergeDeep({} as ChartAnimationSettings, chartAnimationDefaultSettings)
 };
 
@@ -105,14 +107,12 @@ export interface LatestChartWidgetSettings extends LatestChartSettings {
   legendLabelColor: string;
   legendValueFont: Font;
   legendValueColor: string;
-  legendShowTotal: boolean;
   background: BackgroundSettings;
   padding: string;
 }
 
 export const latestChartWidgetDefaultSettings: LatestChartWidgetSettings = {
   ...latestChartDefaultSettings,
-  showLegend: true,
   legendPosition: LegendPosition.bottom,
   legendLabelFont: {
     family: 'Roboto',
@@ -132,7 +132,6 @@ 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/chart/latest-chart.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.ts
index b9f0940b52..9e525cd794 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.ts
@@ -36,6 +36,7 @@ import { ValueFormatProcessor } from '@shared/models/widget-settings.models';
 export abstract class TbLatestChart<S extends LatestChartSettings> {
 
   private readonly shapeResize$: ResizeObserver;
+  private showTotalValueInLegend: boolean;
 
   protected readonly settings: S;
 
@@ -121,7 +122,8 @@ export abstract class TbLatestChart<S extends LatestChartSettings> {
         this.legendItems.sort((a, b) => a.label.localeCompare(b.label));
       }
     }
-    if (this.settings.showLegend && !this.settings.showTotal) {
+    this.showTotalValueInLegend = this.settings.showLegend && !this.settings.showTotal && this.settings.legendShowTotal;
+    if (this.showTotalValueInLegend) {
       this.legendItems.push(
         {
           value: '--',
@@ -252,11 +254,11 @@ export abstract class TbLatestChart<S extends LatestChartSettings> {
       if (this.settings.showTotal || this.settings.showLegend) {
         if (hasValue) {
           this.totalText = this.valueFormatter.format(this.total);
-          if (this.settings.showLegend && !this.settings.showTotal) {
+          if (this.showTotalValueInLegend) {
             this.legendItems[this.legendItems.length - 1].hasValue = true;
             this.legendItems[this.legendItems.length - 1].value = this.totalText;
           }
-        } else if (this.settings.showLegend && !this.settings.showTotal) {
+        } else if (this.showTotalValueInLegend) {
           this.legendItems[this.legendItems.length - 1].hasValue = false;
           this.legendItems[this.legendItems.length - 1].value = '--';
         }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/pie-chart-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/pie-chart-widget.models.ts
index a98cdfdd4a..cddf75b9f9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/pie-chart-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/pie-chart-widget.models.ts
@@ -64,6 +64,7 @@ export const pieChartWidgetPieChartSettings = (settings: PieChartWidgetSettings)
   showTotal: false,
   animation: settings.animation,
   showLegend: settings.showLegend,
+  legendShowTotal: settings.legendShowTotal,
   showLabel: settings.showLabel,
   labelPosition: settings.labelPosition,
   labelFont: settings.labelFont,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/polar-area-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/polar-area-widget.models.ts
index 70b4520159..4b744ce9c3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/polar-area-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/polar-area-widget.models.ts
@@ -72,6 +72,7 @@ export const polarAreaChartWidgetBarsChartSettings = (settings: PolarAreaChartWi
   showTotal: false,
   animation: settings.animation,
   showLegend: settings.showLegend,
+  legendShowTotal: settings.legendShowTotal,
   showTooltip: settings.showTooltip,
   tooltipValueType: settings.tooltipValueType,
   tooltipValueDecimals: settings.tooltipValueDecimals,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart-widget.models.ts
index ec42955b4d..b3be129489 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart-widget.models.ts
@@ -135,6 +135,7 @@ export const radarChartWidgetRadarChartSettings = (settings: RadarChartWidgetSet
   showTotal: false,
   animation: settings.animation,
   showLegend: settings.showLegend,
+  legendShowTotal: settings.legendShowTotal,
   showTooltip: settings.showTooltip,
   tooltipValueType: settings.tooltipValueType,
   tooltipValueDecimals: settings.tooltipValueDecimals,
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 fe071f16a0..66d0234914 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,9 +61,11 @@
             </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>
+        <div class="tb-form-row">
+          <mat-slide-toggle class="mat-slide" formControlName="legendShowTotal">
+            {{ 'legend.show-total' | translate }}
+          </mat-slide-toggle>
+        </div>
       </ng-template>
     </mat-expansion-panel>
   </div>