UI: Refactoring show total value in legend

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>

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,

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,

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;
     }
   }
 

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',

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 = '--';
         }

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,

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,

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,

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>