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

UI: Refactoring show total value in legend

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2025-09-30 13:52:05 +03:00
parent 8a6015f04e
commit d989d1e7d7
10 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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,

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

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

5
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)
};
@ -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',

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,

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

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