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