fix(radar-chart): metric options not available & add min option (#3…

…0349)
apache · Oct 3, 2024 · b2fd560 · b2fd560
1 parent 03146b2
commit b2fd560
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 2 deletions.
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
@@ -56,6 +56,22 @@ const radarMetricMaxValue: { name: string; config: ControlFormItemSpec } = {
   },
 };
 
+const radarMetricMinValue: { name: string; config: ControlFormItemSpec } = {
+  name: 'radarMetricMinValue',
+  config: {
+    controlType: 'InputNumber',
+    label: t('Min'),
+    description: t(
+      'The minimum value of metrics. It is an optional configuration. If not set, it will be the minimum value of the data',
+    ),
+    defaultValue: '0',
+    width: 120,
+    placeholder: t('auto'),
+    debounceDelay: 400,
+    validators: [validateNumber],
+  },
+};
+
 const config: ControlPanelConfig = {
   controlPanelSections: [
     {
@@ -164,7 +180,9 @@ const config: ControlPanelConfig = {
               description: t('Further customize how to display each metric'),
               renderTrigger: true,
               configFormLayout: {
-                [GenericDataType.Numeric]: [[radarMetricMaxValue]],
+                [GenericDataType.Numeric]: [
+                  [radarMetricMinValue, radarMetricMaxValue],
+                ],
               },
               shouldMapStateToProps() {
                 return true;
@@ -179,11 +197,17 @@ const config: ControlPanelConfig = {
                   }
                   return value.label;
                 });
+                const { colnames: _colnames, coltypes: _coltypes } =
+                  chart?.queriesResponse?.[0] ?? {};
+                const colnames: string[] = _colnames || [];
+                const coltypes: GenericDataType[] = _coltypes || [];
+
                 return {
                   queryResponse: chart?.queriesResponse?.[0] as
                     | ChartDataResponseResult
                     | undefined,
                   appliedColumnNames: metricColumn,
+                  columnsPropsObject: { colnames, coltypes },
                 };
               },
             },

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts
@@ -123,6 +123,7 @@ export default function transformProps(
   const groupbyLabels = groupby.map(getColumnLabel);
 
   const metricLabelAndMaxValueMap = new Map<string, number>();
+  const metricLabelAndMinValueMap = new Map<string, number>();
   const columnsLabelMap = new Map<string, string[]>();
   const transformedData: RadarSeriesDataItemOption[] = [];
   data.forEach(datum => {
@@ -155,6 +156,21 @@ export default function transformProps(
       } else {
         metricLabelAndMaxValueMap.set(metricLabel, value as number);
       }
+
+      if (metricLabelAndMinValueMap.has(metricLabel)) {
+        metricLabelAndMinValueMap.set(
+          metricLabel,
+          Math.min(
+            value as number,
+            ensureIsInt(
+              metricLabelAndMinValueMap.get(metricLabel),
+              Number.MAX_SAFE_INTEGER,
+            ),
+          ),
+        );
+      } else {
+        metricLabelAndMinValueMap.set(metricLabel, value as number);
+      }
     }
 
     const isFiltered =
@@ -199,16 +215,32 @@ export default function transformProps(
 
   const indicator = metricLabels.map(metricLabel => {
     const maxValueInControl = columnConfig?.[metricLabel]?.radarMetricMaxValue;
+    const minValueInControl = columnConfig?.[metricLabel]?.radarMetricMinValue;
+
     // Ensure that 0 is at the center of the polar coordinates
     const metricValueAsMax =
       metricLabelAndMaxValueMap.get(metricLabel) === 0
         ? Number.MAX_SAFE_INTEGER
         : metricLabelAndMaxValueMap.get(metricLabel);
     const max =
       maxValueInControl === null ? metricValueAsMax : maxValueInControl;
+
+    let min: number;
+    // If the min value doesn't exist, set it to 0 (default),
+    // if it is null, set it to the min value of the data,
+    // otherwise, use the value from the control
+    if (minValueInControl === undefined) {
+      min = 0;
+    } else if (minValueInControl === null) {
+      min = metricLabelAndMinValueMap.get(metricLabel) || 0;
+    } else {
+      min = minValueInControl;
+    }
+
     return {
       name: metricLabel,
       max,
+      min,
     };
   });
 

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/types.ts
@@ -33,7 +33,10 @@ import {
 } from '../types';
 import { DEFAULT_LEGEND_FORM_DATA } from '../constants';
 
-type RadarColumnConfig = Record<string, { radarMetricMaxValue?: number }>;
+type RadarColumnConfig = Record<
+  string,
+  { radarMetricMaxValue?: number; radarMetricMinValue?: number }
+>;
 
 export type EchartsRadarFormData = QueryFormData &
   LegendFormData & {