Add show-total legend setting to latest-chart widgets

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>

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();

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

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

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>

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();