fix(plugin-chart-echarts): dynamically determine min/max on gauge cha…

…rt axis
apache-superset · Apr 23, 2021 · 6ca7ec0 · 6ca7ec0
1 parent 86d59bd
commit 6ca7ec0
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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,