diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts
index 2feb44615d..77e86a697c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts
@@ -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;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts
index 92d8abeb07..281a429adc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts
@@ -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: {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts
index 1e3c323cb6..4fb192c4bd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts
@@ -83,6 +83,8 @@ export const doughnutTooltipValueTypeTranslations = new Map
({
layout: DoughnutLayout.default,
autoScale: true,
+ clockwise: false,
+ sortSeries: false,
totalValueFont: {
family: 'Roboto',
size: 24,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.html
index a92c0526f0..a0e76da09c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.html
@@ -32,7 +32,17 @@
- {{ 'widgets.value-card.auto-scale' | translate }}
+ {{ 'widgets.doughnut.auto-scale' | translate }}
+
+
+
+
+ {{ 'widgets.doughnut.clockwise-layout' | translate }}
+
+
+
+
+ {{ 'widgets.doughnut.sort-series' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.ts
index a2822bf774..a018557aba 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.ts
@@ -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;
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index dde8b8a056..32d79d5840 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -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",