Merge pull request #13457 from ArtemDzhereleiko/AD/imp/radar/unified-scale

Implement radar widget common axes mode

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

@@ -501,6 +501,17 @@
     </div>
     <div class="tb-form-panel">
       <div class="tb-form-panel-title" translate>widgets.radar-chart.radar-axis</div>
+      <div class="tb-form-row column">
+        <div class="tb-form-row no-border no-padding space-between">
+          <div tb-hint-tooltip-icon="{{ 'widgets.radar-chart.max-axes-scaling-hint' | translate }}">
+            {{ 'widgets.radar-chart.max-axes-scaling' | translate }}
+          </div>
+          <tb-toggle-select formControlName="normalizeAxes">
+            <tb-toggle-option [value]="false">{{ 'widgets.radar-chart.separate' | translate }}</tb-toggle-option>
+            <tb-toggle-option [value]="true">{{ 'widgets.radar-chart.common' | translate }}</tb-toggle-option>
+          </tb-toggle-select>
+        </div>
+      </div>
       <div class="tb-form-row space-between">
         <mat-slide-toggle class="mat-slide" formControlName="axisShowLabel">
           {{ 'widgets.radar-chart.axis-label' | translate }}

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/radar-chart-basic-config.component.ts

@@ -75,6 +75,7 @@ export class RadarChartBasicConfigComponent extends LatestChartBasicConfigCompon
     latestChartWidgetConfigForm.addControl('labelColor', this.fb.control(settings.labelColor, []));
     latestChartWidgetConfigForm.addControl('fillAreaSettings', this.fb.control(settings.fillAreaSettings, []));
 
+    latestChartWidgetConfigForm.addControl('normalizeAxes', this.fb.control(settings.normalizeAxes, []));
     latestChartWidgetConfigForm.addControl('axisShowLabel', this.fb.control(settings.axisShowLabel, []));
     latestChartWidgetConfigForm.addControl('axisLabelFont', this.fb.control(settings.axisLabelFont, []));
     latestChartWidgetConfigForm.addControl('axisShowTickLabels', this.fb.control(settings.axisShowTickLabels, []));
@@ -97,6 +98,7 @@ export class RadarChartBasicConfigComponent extends LatestChartBasicConfigCompon
     this.widgetConfig.config.settings.labelColor = config.labelColor;
     this.widgetConfig.config.settings.fillAreaSettings = config.fillAreaSettings;
 
+    this.widgetConfig.config.settings.normalizeAxes = config.normalizeAxes;
     this.widgetConfig.config.settings.axisShowLabel = config.axisShowLabel;
     this.widgetConfig.config.settings.axisLabelFont = config.axisLabelFont;
     this.widgetConfig.config.settings.axisShowTickLabels = config.axisShowTickLabels;

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

@@ -50,6 +50,7 @@ export interface RadarChartWidgetSettings extends LatestChartWidgetSettings {
   labelFont: Font;
   labelColor: string;
   fillAreaSettings: ChartFillSettings;
+  normalizeAxes: boolean;
   axisShowLabel: boolean;
   axisLabelFont: Font;
   axisShowTickLabels: boolean;
@@ -88,6 +89,7 @@ export const radarChartWidgetDefaultSettings: RadarChartWidgetSettings = {
       end: 20
     }
   },
+  normalizeAxes: false,
   axisShowLabel: true,
   axisLabelFont: {
     family: 'Roboto',
@@ -123,6 +125,7 @@ export const radarChartWidgetRadarChartSettings = (settings: RadarChartWidgetSet
   labelFont: settings.labelFont,
   labelColor: settings.labelColor,
   fillAreaSettings: settings.fillAreaSettings,
+  normalizeAxes: settings.normalizeAxes,
   axisShowLabel: settings.axisShowLabel,
   axisLabelFont: settings.axisLabelFont,
   axisShowTickLabels: settings.axisShowTickLabels,

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

@@ -56,6 +56,7 @@ export interface RadarChartSettings extends LatestChartSettings {
   labelFont: Font;
   labelColor: string;
   fillAreaSettings: ChartFillSettings;
+  normalizeAxes: boolean;
   axisShowLabel: boolean;
   axisLabelFont: Font;
   axisShowTickLabels: boolean;
@@ -100,6 +101,7 @@ export const radarChartDefaultSettings: RadarChartSettings = {
       end: 20
     }
   },
+  normalizeAxes: false,
   axisShowLabel: true,
   axisLabelFont: {
     family: 'Roboto',

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

@@ -31,6 +31,7 @@ import { ComponentStyle } from '@shared/models/widget-settings.models';
 import { AreaStyleOption, SeriesLabelOption } from 'echarts/types/src/util/types';
 import { RadarIndicatorOption } from 'echarts/types/src/coord/radar/RadarModel';
 import { DataKey } from '@shared/models/widget.models';
+import { LatestChartDataItem } from '@home/components/widget/lib/chart/latest-chart.models';
 
 export class TbRadarChart extends TbLatestChart<RadarChartSettings> {
 
@@ -141,7 +142,7 @@ export class TbRadarChart extends TbLatestChart<RadarChartSettings> {
       if (dataItem.enabled && dataItem.hasValue) {
         indicator.push({
           name: dataItem.dataKey.label,
-          color: dataItem.dataKey.color
+          color: dataItem.dataKey.color,
         });
         value.push(dataItem.value);
       }
@@ -149,10 +150,21 @@ export class TbRadarChart extends TbLatestChart<RadarChartSettings> {
     if (!indicator.length) {
       indicator.push({});
     }
+    if (this.settings.normalizeAxes && indicator.length > 1) {
+      const maxDataItem = this.findMaxDataItem(this.dataItems);
+      indicator.map(value => value.max = maxDataItem.value);
+    }
     this.latestChartOption.radar[0].indicator = indicator;
     this.latestChartOption.series[0].data[0].value = value;
   }
 
+  private findMaxDataItem(array: LatestChartDataItem[]): LatestChartDataItem {
+    if (!array || array.length === 0) return null;
+    return array.reduce((maxObj, currentObj) => {
+      return currentObj.value > maxObj.value ? currentObj : maxObj;
+    }, array[0]);
+  }
+
   protected forceRedrawOnResize(): boolean {
     return true;
   }

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

@@ -434,6 +434,17 @@
       </div>
       <div class="tb-form-panel">
         <div class="tb-form-panel-title" translate>widgets.radar-chart.radar-axis</div>
+        <div class="tb-form-row column">
+          <div class="tb-form-row no-border no-padding space-between">
+            <div tb-hint-tooltip-icon="{{ 'widgets.radar-chart.max-axes-scaling-hint' | translate }}">
+              {{ 'widgets.radar-chart.max-axes-scaling' | translate }}
+            </div>
+            <tb-toggle-select formControlName="normalizeAxes">
+              <tb-toggle-option [value]="false">{{ 'widgets.radar-chart.separate' | translate }}</tb-toggle-option>
+              <tb-toggle-option [value]="true">{{ 'widgets.radar-chart.common' | translate }}</tb-toggle-option>
+            </tb-toggle-select>
+          </div>
+        </div>
         <div class="tb-form-row space-between">
           <mat-slide-toggle class="mat-slide" formControlName="axisShowLabel">
             {{ 'widgets.radar-chart.axis-label' | translate }}

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/radar-chart-widget-settings.component.ts

@@ -65,6 +65,7 @@ export class RadarChartWidgetSettingsComponent extends LatestChartWidgetSettings
     latestChartWidgetSettingsForm.addControl('labelColor', this.fb.control(settings.labelColor, []));
     latestChartWidgetSettingsForm.addControl('fillAreaSettings', this.fb.control(settings.fillAreaSettings, []));
 
+    latestChartWidgetSettingsForm.addControl('normalizeAxes', this.fb.control(settings.normalizeAxes, []));
     latestChartWidgetSettingsForm.addControl('axisShowLabel', this.fb.control(settings.axisShowLabel, []));
     latestChartWidgetSettingsForm.addControl('axisLabelFont', this.fb.control(settings.axisLabelFont, []));
     latestChartWidgetSettingsForm.addControl('axisShowTickLabels', this.fb.control(settings.axisShowTickLabels, []));

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -8874,7 +8874,11 @@
             "radar-axis": "Radar axis",
             "axis-label": "Axis label",
             "ticks-label": "Ticks label",
-            "radar-chart-style": "Radar chart style"
+            "radar-chart-style": "Radar chart style",
+            "max-axes-scaling": "Max axes scaling",
+            "max-axes-scaling-hint": "Choose whether each radar axis has its own maximum value (Separate) or shares the highest value across all axes based on the widget dataset (Common).",
+            "separate": "Separate",
+            "common": "Common"
         },
         "time-series-chart": {
             "chart": "Chart",