From 34dc67cf3314b7f5489cb62fd0ce920059c9569a Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Wed, 28 May 2025 12:16:41 +0300 Subject: [PATCH 1/3] UI: Imp radar axes common mode --- .../chart/bar-chart-basic-config.component.ts | 3 +++ .../chart/latest-chart-basic-config.component.html | 11 +++++++++++ .../chart/radar-chart-basic-config.component.ts | 2 ++ .../widget/lib/chart/radar-chart-widget.models.ts | 3 +++ .../widget/lib/chart/radar-chart.models.ts | 2 ++ .../components/widget/lib/chart/radar-chart.ts | 14 +++++++++++++- .../latest-chart-widget-settings.component.html | 11 +++++++++++ .../chart/radar-chart-widget-settings.component.ts | 1 + .../src/assets/locale/locale.constant-en_US.json | 6 +++++- 9 files changed, 51 insertions(+), 2 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-basic-config.component.ts index ba9c41893e..2a6cb1bf51 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-basic-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-basic-config.component.ts @@ -29,6 +29,7 @@ import { import { LatestChartBasicConfigComponent } from '@home/components/widget/config/basic/chart/latest-chart-basic-config.component'; +import { chartFillTypes } from '@home/components/widget/lib/chart/chart.models'; @Component({ selector: 'tb-bar-chart-basic-config', @@ -77,4 +78,6 @@ export class BarChartBasicConfigComponent extends LatestChartBasicConfigComponen this.widgetConfig.config.settings.axisTickLabelFont = config.axisTickLabelFont; this.widgetConfig.config.settings.axisTickLabelColor = config.axisTickLabelColor; } + + protected readonly chartFillTypes = chartFillTypes; } 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..0e28f198f4 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[]) { + 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 5f6f882a49..788ad21876 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -8858,7 +8858,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", From a5f2b42d1592e0f7a0f6f41638a54229fefdf21f Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Wed, 28 May 2025 12:23:45 +0300 Subject: [PATCH 2/3] UI: Ref --- .../config/basic/chart/bar-chart-basic-config.component.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-basic-config.component.ts index 2a6cb1bf51..ba9c41893e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-basic-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-basic-config.component.ts @@ -29,7 +29,6 @@ import { import { LatestChartBasicConfigComponent } from '@home/components/widget/config/basic/chart/latest-chart-basic-config.component'; -import { chartFillTypes } from '@home/components/widget/lib/chart/chart.models'; @Component({ selector: 'tb-bar-chart-basic-config', @@ -78,6 +77,4 @@ export class BarChartBasicConfigComponent extends LatestChartBasicConfigComponen this.widgetConfig.config.settings.axisTickLabelFont = config.axisTickLabelFont; this.widgetConfig.config.settings.axisTickLabelColor = config.axisTickLabelColor; } - - protected readonly chartFillTypes = chartFillTypes; } From 0c3c8e3dcb34f1acd651dd2a73e882950a45ccd7 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Thu, 29 May 2025 12:49:25 +0300 Subject: [PATCH 3/3] UI: Refactoring --- .../app/modules/home/components/widget/lib/chart/radar-chart.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 0e28f198f4..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 @@ -158,7 +158,7 @@ export class TbRadarChart extends TbLatestChart { this.latestChartOption.series[0].data[0].value = value; } - private findMaxDataItem(array: LatestChartDataItem[]) { + private findMaxDataItem(array: LatestChartDataItem[]): LatestChartDataItem { if (!array || array.length === 0) return null; return array.reduce((maxObj, currentObj) => { return currentObj.value > maxObj.value ? currentObj : maxObj;