dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Latest chart widgets: add setting show total value in legend
This commit is contained in:
Igor Kulikov 2025-10-01 15:32:54 +03:00 committed by GitHub
commit b3e06d4a73
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

4
ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.ts
View File

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

1
ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-widget.models.ts
View File

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

1
ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts
View File

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

3
ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.models.ts
View File

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

8
ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.ts
View File

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

1
ui-ngx/src/app/modules/home/components/widget/lib/chart/pie-chart-widget.models.ts
View File

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

1
ui-ngx/src/app/modules/home/components/widget/lib/chart/polar-area-widget.models.ts
View File

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

1
ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart-widget.models.ts
View File

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

5
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html
View File

@ -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>

3
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.ts
View File

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