Merge pull request #13350 from pgrisu/feature/add_show_total_legend_setting_to_latest-chart-widgets

Latest chart widgets: add setting show total value in legend

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

@@ -144,6 +144,11 @@
             </tb-color-input>
           </div>
         </div>
+        <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/config/basic/chart/latest-chart-basic-config.component.ts

@@ -179,6 +179,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, []],
@@ -228,6 +229,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;
@@ -287,12 +289,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/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.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)
 };
 
@@ -111,7 +113,6 @@ export interface LatestChartWidgetSettings extends LatestChartSettings {
 
 export const latestChartWidgetDefaultSettings: LatestChartWidgetSettings = {
   ...latestChartDefaultSettings,
-  showLegend: true,
   legendPosition: LegendPosition.bottom,
   legendLabelFont: {
     family: 'Roboto',

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,6 +61,11 @@
             </tb-color-input>
           </div>
         </div>
+        <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/settings/chart/latest-chart-widget-settings.component.ts

@@ -135,6 +135,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, []],
@@ -164,12 +165,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();