diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html index 1f7a02a6f9..dc0f467a16 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html @@ -501,6 +501,17 @@
widgets.radar-chart.radar-axis
+
+
+
+ {{ 'widgets.radar-chart.max-axes-scaling' | translate }} +
+ + {{ 'widgets.radar-chart.separate' | translate }} + {{ 'widgets.radar-chart.common' | translate }} + +
+
{{ 'widgets.radar-chart.axis-label' | translate }} diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/radar-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/radar-chart-basic-config.component.ts index d66e2fa35c..98b6cf8fbf 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/radar-chart-basic-config.component.ts +++ b/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; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart-widget.models.ts index 019c5b86f4..ec42955b4d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart-widget.models.ts +++ b/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, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart.models.ts index 04008c8832..9d1dcbde47 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart.models.ts +++ b/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', diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart.ts index 27aa1597bd..0cfc10d4cf 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart.ts +++ b/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 { @@ -141,7 +142,7 @@ export class TbRadarChart extends TbLatestChart { 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 { 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; } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html index 04476e69e2..fd5403984d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html @@ -434,6 +434,17 @@
widgets.radar-chart.radar-axis
+
+
+
+ {{ 'widgets.radar-chart.max-axes-scaling' | translate }} +
+ + {{ 'widgets.radar-chart.separate' | translate }} + {{ 'widgets.radar-chart.common' | translate }} + +
+
{{ 'widgets.radar-chart.axis-label' | translate }} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/radar-chart-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/radar-chart-widget-settings.component.ts index 5e43b62983..94f93984c3 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/radar-chart-widget-settings.component.ts +++ b/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, [])); 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 5fb53ab503..5e252701d7 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/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",