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

UI: Improve doughnut widget settings.

Browse Source
This commit is contained in:
Igor Kulikov 2023-11-09 12:25:02 +02:00
parent 4286ee8bf6
commit 0cd6cc1079
7 changed files with 54 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -58,7 +58,7 @@
</tb-image-cards-select>
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide" formControlName="autoScale">
{{ 'widgets.value-card.auto-scale' | translate }}
{{ 'widgets.doughnut.auto-scale' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-form-row column-xs">
@ -96,6 +96,16 @@
</tb-color-input>
</div>
</div>
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide" formControlName="clockwise">
{{ 'widgets.doughnut.clockwise-layout' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide" formControlName="sortSeries">
{{ 'widgets.doughnut.sort-series' | translate }}
</mat-slide-toggle>
</div>
<div [fxShow]="totalEnabled" class="tb-form-row space-between">
<div>{{ 'widgets.doughnut.central-total-value' | translate }}</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">

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

@ -136,6 +136,8 @@ export class DoughnutBasicConfigComponent extends BasicWidgetConfigComponent {
layout: [settings.layout, []],
autoScale: [settings.autoScale, []],
clockwise: [settings.clockwise, []],
sortSeries: [settings.sortSeries, []],
showTitle: [configData.config.showTitle, []],
title: [configData.config.title, []],
@ -193,6 +195,8 @@ export class DoughnutBasicConfigComponent extends BasicWidgetConfigComponent {
this.widgetConfig.config.settings.layout = config.layout;
this.widgetConfig.config.settings.autoScale = config.autoScale;
this.widgetConfig.config.settings.clockwise = config.clockwise;
this.widgetConfig.config.settings.sortSeries = config.sortSeries;
this.widgetConfig.config.settings.totalValueFont = config.totalValueFont;
this.widgetConfig.config.settings.totalValueColor = config.totalValueColor;

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

@ -209,7 +209,13 @@ export class DoughnutWidgetComponent implements OnInit, OnDestroy, AfterViewInit
}
}
}
if (!this.showTotal && this.showLegend) {
if (this.settings.sortSeries) {
this.dataItems.sort((a, b) => a.dataKey.label.localeCompare(b.dataKey.label));
if (this.showLegend) {
this.legendItems.sort((a, b) => a.label.localeCompare(b.label));
}
}
if (this.showLegend && !this.showTotal) {
this.legendItems.push(
{
id: null,
@ -251,17 +257,17 @@ export class DoughnutWidgetComponent implements OnInit, OnDestroy, AfterViewInit
}
public onDataUpdated() {
for (let i=0; i < this.ctx.data.length; i++) {
const dsData = this.ctx.data[i];
for (const dsData of this.ctx.data) {
let value = 0;
const tsValue = dsData.data[0];
const dataItem = this.dataItems.find(item => item.dataKey === dsData.dataKey);
if (tsValue && isDefinedAndNotNull(tsValue[1]) && isNumeric(tsValue[1])) {
value = tsValue[1];
this.dataItems[i].hasValue = true;
this.dataItems[i].value = value;
dataItem.hasValue = true;
dataItem.value = value;
} else {
this.dataItems[i].hasValue = false;
this.dataItems[i].value = 0;
dataItem.hasValue = false;
dataItem.value = 0;
}
}
this.updateSeriesData();
@ -281,8 +287,7 @@ export class DoughnutWidgetComponent implements OnInit, OnDestroy, AfterViewInit
let hasValue = false;
const seriesData: PieDataItemOption[] = [];
const enabledDataItems = this.dataItems.filter(item => item.enabled && item.hasValue);
for (let i=0; i < this.dataItems.length; i++) {
const dataItem = this.dataItems[i];
for (const dataItem of this.dataItems) {
if (dataItem.enabled && dataItem.hasValue) {
hasValue = true;
this.total += dataItem.value;
@ -296,12 +301,13 @@ export class DoughnutWidgetComponent implements OnInit, OnDestroy, AfterViewInit
}
}
if (this.showLegend) {
const legendItem = this.legendItems.find(item => item.id === dataItem.id);
if (dataItem.hasValue) {
this.legendItems[i].hasValue = true;
this.legendItems[i].value = formatValue(dataItem.value, this.decimals, this.units, false);
legendItem.hasValue = true;
legendItem.value = formatValue(dataItem.value, this.decimals, this.units, false);
} else {
this.legendItems[i].hasValue = false;
this.legendItems[i].value = '--';
legendItem.hasValue = false;
legendItem.value = '--';
}
}
}
@ -395,7 +401,7 @@ export class DoughnutWidgetComponent implements OnInit, OnDestroy, AfterViewInit
series: [
{
type: 'pie',
clockwise: false,
clockwise: this.settings.clockwise,
radius: [innerRadius, outerRadius],
avoidLabelOverlap: false,
itemStyle: {

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

@ -83,6 +83,8 @@ export const doughnutTooltipValueTypeTranslations = new Map<DoughnutTooltipValue
export interface DoughnutWidgetSettings {
layout: DoughnutLayout;
autoScale: boolean;
clockwise: boolean;
sortSeries: boolean;
totalValueFont: Font;
totalValueColor: ColorSettings;
showLegend: boolean;
@ -104,6 +106,8 @@ export interface DoughnutWidgetSettings {
export const doughnutDefaultSettings = (horizontal: boolean): DoughnutWidgetSettings => ({
layout: DoughnutLayout.default,
autoScale: true,
clockwise: false,
sortSeries: false,
totalValueFont: {
family: 'Roboto',
size: 24,

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

@ -32,7 +32,17 @@
</tb-image-cards-select>
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide" formControlName="autoScale">
{{ 'widgets.value-card.auto-scale' | translate }}
{{ 'widgets.doughnut.auto-scale' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide" formControlName="clockwise">
{{ 'widgets.doughnut.clockwise-layout' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide" formControlName="sortSeries">
{{ 'widgets.doughnut.sort-series' | translate }}
</mat-slide-toggle>
</div>
<div [fxShow]="totalEnabled" class="tb-form-row space-between">

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

@ -96,6 +96,8 @@ export class DoughnutWidgetSettingsComponent extends WidgetSettingsComponent {
this.doughnutWidgetSettingsForm = this.fb.group({
layout: [settings.layout, []],
autoScale: [settings.autoScale, []],
clockwise: [settings.clockwise, []],
sortSeries: [settings.sortSeries, []],
totalValueFont: [settings.totalValueFont, []],
totalValueColor: [settings.totalValueColor, []],
@ -167,23 +169,6 @@ export class DoughnutWidgetSettingsComponent extends WidgetSettingsComponent {
}
}
private _centerValuePreviewFn(): string {
const centerValueDataKey = getDataKey(this.widgetConfig.config.datasources, 1);
if (centerValueDataKey) {
let units: string = this.widgetConfig.config.units;
let decimals: number = this.widgetConfig.config.decimals;
if (isDefinedAndNotNull(centerValueDataKey?.decimals)) {
decimals = centerValueDataKey.decimals;
}
if (centerValueDataKey?.units) {
units = centerValueDataKey.units;
}
return formatValue(25, decimals, units, true);
} else {
return '225°';
}
}
private _valuePreviewFn(): string {
const units: string = this.widgetConfig.config.units;
const decimals: number = this.widgetConfig.config.decimals;

2
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -5344,6 +5344,8 @@
"layout-default": "Default",
"layout-with-total": "With total",
"auto-scale": "Auto scale",
"clockwise-layout": "Clockwise layout",
"sort-series": "Sort series by label",
"central-total-value": "Central total value",
"legend-position-top": "Top",
"legend-position-bottom": "Bottom",