fix(Radar): Radar chart normalisation

superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx

@@ -91,6 +91,20 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          {
+            name: 'is_normalised',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Normalise Values'),
+              renderTrigger: true,
+              default: false,
+              description: t(
+                'Normalise the radar chart values between 0 & 1 to get consistent plotting.',
+              ),
+            },
+          },
+        ],
       ],
     },
     {
@@ -210,6 +224,8 @@ const config: ControlPanelConfig = {
                   columnsPropsObject: { colnames, coltypes },
                 };
               },
+              visibility: ({ controls }) =>
+                Boolean(!controls?.is_normalised?.value),
             },
           },
         ],

superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts

@@ -35,6 +35,7 @@ import {
   EchartsRadarFormData,
   EchartsRadarLabelType,
   RadarChartTransformedProps,
+  SeriesNormalizedMap,
 } from './types';
 import { DEFAULT_LEGEND_FORM_DATA, OpacityEnum } from '../constants';
 import {
@@ -51,13 +52,24 @@ export function formatLabel({
   params,
   labelType,
   numberFormatter,
+  getDenormalisedSeriesValue,
+  isNormalised,
 }: {
   params: CallbackDataParams;
   labelType: EchartsRadarLabelType;
   numberFormatter: NumberFormatter;
+  getDenormalisedSeriesValue: (
+    seriesName: string,
+    normalisedValue: string,
+  ) => number;
+  isNormalised: boolean;
 }): string {
   const { name = '', value } = params;
-  const formattedValue = numberFormatter(value as number);
+  const formattedValue = numberFormatter(
+    isNormalised
+      ? (getDenormalisedSeriesValue(name, String(value)) as number)
+      : (value as number),
+  );
 
   switch (labelType) {
     case EchartsRadarLabelType.Value:
@@ -103,6 +115,7 @@ export default function transformProps(
     isCircle,
     columnConfig,
     sliceId,
+    isNormalised,
   }: EchartsRadarFormData = {
     ...DEFAULT_LEGEND_FORM_DATA,
     ...DEFAULT_RADAR_FORM_DATA,
@@ -111,11 +124,36 @@ export default function transformProps(
   const { setDataMask = () => {}, onContextMenu } = hooks;
   const colorFn = CategoricalColorNamespace.getScale(colorScheme as string);
   const numberFormatter = getNumberFormatter(numberFormat);
+  const denormalizedSeriesValues: SeriesNormalizedMap = {};
+
+  const getDenormalisedSeriesValue = (
+    seriesName: string,
+    normalisedValue: string,
+  ): number => {
+    if (
+      Object.prototype.hasOwnProperty.call(
+        denormalizedSeriesValues,
+        seriesName,
+      ) &&
+      Object.prototype.hasOwnProperty.call(
+        denormalizedSeriesValues[seriesName],
+        normalisedValue,
+      )
+    ) {
+      return denormalizedSeriesValues[seriesName][normalisedValue];
+    }
+
+    // Fallback: return the normalised value itself as a number
+    return Number(normalisedValue);
+  };
+
   const formatter = (params: CallbackDataParams) =>
     formatLabel({
       params,
       numberFormatter,
       labelType,
+      getDenormalisedSeriesValue,
+      isNormalised,
     });
 
   const metricLabels = metrics.map(getMetricLabel);
@@ -124,7 +162,7 @@ export default function transformProps(
   const metricLabelAndMaxValueMap = new Map<string, number>();
   const metricLabelAndMinValueMap = new Map<string, number>();
   const columnsLabelMap = new Map<string, string[]>();
-  const transformedData: RadarSeriesDataItemOption[] = [];
+  let transformedData: RadarSeriesDataItemOption[] = [];
   data.forEach(datum => {
     const joinedName = extractGroupbyLabel({
       datum,
@@ -212,7 +250,40 @@ export default function transformProps(
     {},
   );
 
+  // Add normalization function
+  const normalizeArray = (arr: number[], decimals = 10, seriesName: string) => {
+    const max = Math.max(...arr);
+    return arr.map(value => {
+      const normalisedValue = Number((value / max).toFixed(decimals));
+      denormalizedSeriesValues[seriesName][String(normalisedValue)] = value;
+      return normalisedValue;
+    });
+  };
+
+  if (isNormalised) {
+    // Normalize the transformed data
+    transformedData = transformedData.map(series => {
+      if (Array.isArray(series.value)) {
+        const seriesName = String(series?.name || '');
+        denormalizedSeriesValues[seriesName] = {};
+
+        return {
+          ...series,
+          value: normalizeArray(series.value as number[], 10, seriesName),
+        };
+      }
+      return series;
+    });
+  }
+
   const indicator = metricLabels.map(metricLabel => {
+    if (isNormalised) {
+      return {
+        name: metricLabel,
+        max: 1,
+        min: 0,
+      };
+    }
     const maxValueInControl = columnConfig?.[metricLabel]?.radarMetricMaxValue;
     const minValueInControl = columnConfig?.[metricLabel]?.radarMetricMinValue;
 
@@ -259,6 +330,39 @@ export default function transformProps(
     },
   ];
 
+  const NormalisedTooltipFormater = (
+    params: CallbackDataParams & {
+      color: string;
+      name: string;
+      value: number[];
+    },
+  ) => {
+    const { color } = params;
+    const seriesName = params.name || '';
+    const values = params.value;
+
+    const colorDot = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:5px;height:5px;background-color:${color}"></span>`;
+
+    // Start with series name without dot
+    let tooltip = `<div style="font-weight:bold;margin-bottom:5px;">${seriesName || 'series0'}</div>`;
+
+    metricLabels.forEach((metric, index) => {
+      const normalizedValue = values[index];
+      const originalValue = getDenormalisedSeriesValue(
+        seriesName,
+        String(normalizedValue),
+      );
+      tooltip += `
+        <div style="display:flex;">
+          <div>${colorDot}${metric}:</div>
+          <div style="font-weight:bold;margin-left:auto;">${originalValue}</div>
+        </div>
+      `;
+    });
+
+    return tooltip;
+  };
+
   const echartOptions: EChartsCoreOption = {
     grid: {
       ...defaultGrid,
@@ -267,6 +371,9 @@ export default function transformProps(
       ...getDefaultTooltip(refs),
       show: !inContextMenu,
       trigger: 'item',
+      ...(isNormalised && {
+        formatter: NormalisedTooltipFormater,
+      }),
     },
     legend: {
       ...getLegendProps(legendType, legendOrientation, showLegend, theme),

superset-frontend/plugins/plugin-chart-echarts/src/Radar/types.ts

@@ -53,6 +53,7 @@ export type EchartsRadarFormData = QueryFormData &
     isCircle: boolean;
     numberFormat: string;
     dateFormat: string;
+    isNormalised: boolean;
   };
 
 export enum EchartsRadarLabelType {
@@ -83,3 +84,17 @@ export type RadarChartTransformedProps =
   BaseTransformedProps<EchartsRadarFormData> &
     ContextMenuTransformedProps &
     CrossFilterTransformedProps;
+
+/**
+ * Represents a mapping from a normalized value (as string) to an original numeric value.
+ */
+interface NormalizedValueMap {
+  [normalized: string]: number;
+}
+
+/**
+ * Represents a collection of series, each containing its own NormalizedValueMap.
+ */
+export interface SeriesNormalizedMap {
+  [seriesName: string]: NormalizedValueMap;
+}