From 6ca7ec023ae90cc79c74cf28e5d13fc69d84aa08 Mon Sep 17 00:00:00 2001
From: root <root@superset.ikrsnik.devonly.net>
Date: Fri, 23 Apr 2021 12:56:21 +0100
Subject: [PATCH] fix(plugin-chart-echarts): dynamically determine min/max on
 gauge chart axis

---
 .../src/Gauge/controlPanel.tsx                     |  4 +---
 .../src/Gauge/transformProps.ts                    | 14 ++++++++++++--
 plugins/plugin-chart-echarts/src/Gauge/types.ts    |  4 ++--
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx b/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
index 22a2ba5c35..6c4b6cca02 100644
--- a/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
+++ b/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
@@ -68,8 +68,7 @@ const config: ControlPanelConfig = {
             config: {
               type: 'TextControl',
               isInt: true,
-              default: String(DEFAULT_FORM_DATA.minVal),
-              validators: [validateNonEmpty, validateInteger],
+              default: DEFAULT_FORM_DATA.minVal,
               renderTrigger: true,
               label: t('Min'),
               description: t('Minimum value on the gauge axis'),
@@ -81,7 +80,6 @@ const config: ControlPanelConfig = {
               type: 'TextControl',
               isInt: true,
               default: DEFAULT_FORM_DATA.maxVal,
-              validators: [validateNonEmpty, validateInteger],
               renderTrigger: true,
               label: t('Max'),
               description: t('Maximum value on the gauge axis'),
diff --git a/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts b/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts
index 07c6386e83..af96281f14 100644
--- a/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts
+++ b/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts
@@ -70,6 +70,14 @@ const setIntervalBoundsAndColors = (
 const calculateAxisLineWidth = (data: DataRecord[], fontSize: number, overlap: boolean): number =>
   overlap ? fontSize : data.length * fontSize;
 
+const calculateMin = (data: GaugeDataItemOption[]) => {
+  return 2 * Math.min(...data.map(d => d.value).concat([0]));
+};
+
+const calculateMax = (data: GaugeDataItemOption[]) => {
+  return 2 * Math.max(...data.map(d => d.value).concat([0]));
+};
+
 export default function transformProps(chartProps: ChartProps) {
   const { width, height, formData, queriesData } = chartProps;
   const {
@@ -195,14 +203,16 @@ export default function transformProps(chartProps: ChartProps) {
       show: showPointer,
     };
   }
+  const min = minVal ? minVal : calculateMin(transformedData);
+  const max = maxVal ? maxVal : calculateMax(transformedData);
 
   const series: GaugeSeriesOption[] = [
     {
       type: 'gauge',
       startAngle,
       endAngle,
-      min: minVal,
-      max: maxVal,
+      min,
+      max,
       progress,
       animation,
       axisLine: axisLine as GaugeSeriesOption['axisLine'],
diff --git a/plugins/plugin-chart-echarts/src/Gauge/types.ts b/plugins/plugin-chart-echarts/src/Gauge/types.ts
index 42b579b4fc..39b0ade486 100644
--- a/plugins/plugin-chart-echarts/src/Gauge/types.ts
+++ b/plugins/plugin-chart-echarts/src/Gauge/types.ts
@@ -51,8 +51,8 @@ export const DEFAULT_FORM_DATA: EchartsGaugeFormData = {
   ...DEFAULT_LEGEND_FORM_DATA,
   groupby: [],
   rowLimit: 10,
-  minVal: 0,
-  maxVal: 100,
+  minVal: null,
+  maxVal: null,
   fontSize: 15,
   numberFormat: 'SMART_NUMBER',
   animation: true,