UI: Improve doughnut widget settings.

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

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

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;

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: {

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

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

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

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

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;

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