fix(charts): big-number display broken in echarts (#24492)

Co-authored-by: aadhikari <aadhikari@apple.com>

superset-frontend/packages/superset-ui-core/src/chart/models/ChartMetadata.ts

@@ -18,6 +18,7 @@
  */
 
 import { Behavior, ChartLabel } from '../types/Base';
+import { ParseMethod } from '../../connection';
 
 interface LookupTable {
   [key: string]: boolean;
@@ -49,6 +50,7 @@ export interface ChartMetadataConfig {
   label?: ChartLabel | null;
   labelExplanation?: string | null;
   queryObjectCount?: number;
+  parseMethod?: ParseMethod;
 }
 
 export default class ChartMetadata {
@@ -90,6 +92,8 @@ export default class ChartMetadata {
 
   queryObjectCount: number;
 
+  parseMethod: ParseMethod;
+
   constructor(config: ChartMetadataConfig) {
     const {
       name,
@@ -110,6 +114,7 @@ export default class ChartMetadata {
       label = null,
       labelExplanation = null,
       queryObjectCount = 1,
+      parseMethod = 'json-bigint',
     } = config;
 
     this.name = name;
@@ -139,6 +144,7 @@ export default class ChartMetadata {
     this.label = label;
     this.labelExplanation = labelExplanation;
     this.queryObjectCount = queryObjectCount;
+    this.parseMethod = parseMethod;
   }
 
   canBeAnnotationType(type: string): boolean {

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
+import { t, Behavior } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import buildQuery from './buildQuery';
@@ -24,8 +24,9 @@ import example1 from './images/BigNumber.jpg';
 import example2 from './images/BigNumber2.jpg';
 import thumbnail from './images/thumbnail.png';
 import { BigNumberTotalChartProps, BigNumberTotalFormData } from '../types';
+import { EchartsChartPlugin } from '../../types';
 
-const metadata = new ChartMetadata({
+const metadata = {
   category: t('KPI'),
   description: t(
     'Showcases a single metric front-and-center. Big number is best used to call attention to a KPI or the one thing you want your audience to focus on.',
@@ -46,9 +47,9 @@ const metadata = new ChartMetadata({
   ],
   thumbnail,
   behaviors: [Behavior.DRILL_TO_DETAIL],
-});
+};
 
-export default class BigNumberTotalChartPlugin extends ChartPlugin<
+export default class BigNumberTotalChartPlugin extends EchartsChartPlugin<
   BigNumberTotalFormData,
   BigNumberTotalChartProps
 > {

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
+import { t, Behavior } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import buildQuery from './buildQuery';
@@ -26,8 +26,9 @@ import {
   BigNumberWithTrendlineChartProps,
   BigNumberWithTrendlineFormData,
 } from '../types';
+import { EchartsChartPlugin } from '../../types';
 
-const metadata = new ChartMetadata({
+const metadata = {
   category: t('KPI'),
   description: t(
     'Showcases a single number accompanied by a simple line chart, to call attention to an important metric along with its change over time or other dimension.',
@@ -45,9 +46,9 @@ const metadata = new ChartMetadata({
   ],
   thumbnail,
   behaviors: [Behavior.DRILL_TO_DETAIL],
-});
+};
 
-export default class BigNumberWithTrendlineChartPlugin extends ChartPlugin<
+export default class BigNumberWithTrendlineChartPlugin extends EchartsChartPlugin<
   BigNumberWithTrendlineFormData,
   BigNumberWithTrendlineChartProps
 > {

superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/index.ts

@@ -16,15 +16,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import { Behavior, t } from '@superset-ui/core';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import example from './images/BoxPlot.jpg';
 import thumbnail from './images/thumbnail.png';
 import { BoxPlotQueryFormData, EchartsBoxPlotChartProps } from './types';
+import { EchartsChartPlugin } from '../types';
 
-export default class EchartsBoxPlotChartPlugin extends ChartPlugin<
+export default class EchartsBoxPlotChartPlugin extends EchartsChartPlugin<
   BoxPlotQueryFormData,
   EchartsBoxPlotChartProps
 > {
@@ -43,7 +44,7 @@ export default class EchartsBoxPlotChartPlugin extends ChartPlugin<
       buildQuery,
       controlPanel,
       loadChart: () => import('./EchartsBoxPlot'),
-      metadata: new ChartMetadata({
+      metadata: {
         behaviors: [
           Behavior.INTERACTIVE_CHART,
           Behavior.DRILL_TO_DETAIL,
@@ -58,7 +59,7 @@ export default class EchartsBoxPlotChartPlugin extends ChartPlugin<
         name: t('Box Plot'),
         tags: [t('ECharts'), t('Range'), t('Statistical')],
         thumbnail,
-      }),
+      },
       transformProps,
     });
   }

superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts

@@ -16,15 +16,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import { Behavior, t } from '@superset-ui/core';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 import example from './images/example.jpg';
 import { EchartsFunnelChartProps, EchartsFunnelFormData } from './types';
+import { EchartsChartPlugin } from '../types';
 
-export default class EchartsFunnelChartPlugin extends ChartPlugin<
+export default class EchartsFunnelChartPlugin extends EchartsChartPlugin<
   EchartsFunnelFormData,
   EchartsFunnelChartProps
 > {
@@ -43,7 +44,7 @@ export default class EchartsFunnelChartPlugin extends ChartPlugin<
       buildQuery,
       controlPanel,
       loadChart: () => import('./EchartsFunnel'),
-      metadata: new ChartMetadata({
+      metadata: {
         behaviors: [
           Behavior.INTERACTIVE_CHART,
           Behavior.DRILL_TO_DETAIL,
@@ -65,7 +66,7 @@ export default class EchartsFunnelChartPlugin extends ChartPlugin<
           t('Trend'),
         ],
         thumbnail,
-      }),
+      },
       transformProps,
     });
   }

superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
+import { t, Behavior } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
@@ -24,8 +24,9 @@ import example1 from './images/example1.jpg';
 import example2 from './images/example2.jpg';
 import buildQuery from './buildQuery';
 import { EchartsGaugeChartProps, EchartsGaugeFormData } from './types';
+import { EchartsChartPlugin } from '../types';
 
-export default class EchartsGaugeChartPlugin extends ChartPlugin<
+export default class EchartsGaugeChartPlugin extends EchartsChartPlugin<
   EchartsGaugeFormData,
   EchartsGaugeChartProps
 > {
@@ -34,7 +35,7 @@ export default class EchartsGaugeChartPlugin extends ChartPlugin<
       buildQuery,
       controlPanel,
       loadChart: () => import('./EchartsGauge'),
-      metadata: new ChartMetadata({
+      metadata: {
         behaviors: [
           Behavior.INTERACTIVE_CHART,
           Behavior.DRILL_TO_DETAIL,
@@ -55,7 +56,7 @@ export default class EchartsGaugeChartPlugin extends ChartPlugin<
           t('Report'),
         ],
         thumbnail,
-      }),
+      },
       transformProps,
     });
   }

superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts

@@ -16,20 +16,21 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import { Behavior, t } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 import example from './images/example.jpg';
 import buildQuery from './buildQuery';
+import { EchartsChartPlugin } from '../types';
 
-export default class EchartsGraphChartPlugin extends ChartPlugin {
+export default class EchartsGraphChartPlugin extends EchartsChartPlugin {
   constructor() {
     super({
       buildQuery,
       controlPanel,
       loadChart: () => import('./EchartsGraph'),
-      metadata: new ChartMetadata({
+      metadata: {
         category: t('Flow'),
         credits: ['https://echarts.apache.org'],
         description: t(
@@ -53,7 +54,7 @@ export default class EchartsGraphChartPlugin extends ChartPlugin {
           Behavior.DRILL_TO_DETAIL,
           Behavior.DRILL_BY,
         ],
-      }),
+      },
       transformProps,
     });
   }

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts

@@ -19,8 +19,6 @@
 import {
   AnnotationType,
   Behavior,
-  ChartMetadata,
-  ChartPlugin,
   hasGenericChartAxes,
   t,
 } from '@superset-ui/core';
@@ -33,8 +31,9 @@ import {
   EchartsMixedTimeseriesFormData,
   EchartsMixedTimeseriesProps,
 } from './types';
+import { EchartsChartPlugin } from '../types';
 
-export default class EchartsTimeseriesChartPlugin extends ChartPlugin<
+export default class EchartsTimeseriesChartPlugin extends EchartsChartPlugin<
   EchartsMixedTimeseriesFormData,
   EchartsMixedTimeseriesProps
 > {
@@ -53,7 +52,7 @@ export default class EchartsTimeseriesChartPlugin extends ChartPlugin<
       buildQuery,
       controlPanel,
       loadChart: () => import('./EchartsMixedTimeseries'),
-      metadata: new ChartMetadata({
+      metadata: {
         behaviors: [
           Behavior.INTERACTIVE_CHART,
           Behavior.DRILL_TO_DETAIL,
@@ -88,7 +87,7 @@ export default class EchartsTimeseriesChartPlugin extends ChartPlugin<
           t('Transformable'),
         ],
         queryObjectCount: 2,
-      }),
+      },
       // @ts-ignore
       transformProps,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import { Behavior, t } from '@superset-ui/core';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
@@ -26,8 +26,9 @@ import example2 from './images/Pie2.jpg';
 import example3 from './images/Pie3.jpg';
 import example4 from './images/Pie4.jpg';
 import { EchartsPieChartProps, EchartsPieFormData } from './types';
+import { EchartsChartPlugin } from '../types';
 
-export default class EchartsPieChartPlugin extends ChartPlugin<
+export default class EchartsPieChartPlugin extends EchartsChartPlugin<
   EchartsPieFormData,
   EchartsPieChartProps
 > {
@@ -46,7 +47,7 @@ export default class EchartsPieChartPlugin extends ChartPlugin<
       buildQuery,
       controlPanel,
       loadChart: () => import('./EchartsPie'),
-      metadata: new ChartMetadata({
+      metadata: {
         behaviors: [
           Behavior.INTERACTIVE_CHART,
           Behavior.DRILL_TO_DETAIL,
@@ -76,7 +77,7 @@ export default class EchartsPieChartPlugin extends ChartPlugin<
           t('ECharts'),
         ],
         thumbnail,
-      }),
+      },
       transformProps,
     });
   }

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

@@ -17,7 +17,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import { Behavior, t } from '@superset-ui/core';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
@@ -25,8 +25,9 @@ import thumbnail from './images/thumbnail.png';
 import example1 from './images/example1.jpg';
 import example2 from './images/example2.jpg';
 import { EchartsRadarChartProps, EchartsRadarFormData } from './types';
+import { EchartsChartPlugin } from '../types';
 
-export default class EchartsRadarChartPlugin extends ChartPlugin<
+export default class EchartsRadarChartPlugin extends EchartsChartPlugin<
   EchartsRadarFormData,
   EchartsRadarChartProps
 > {
@@ -45,7 +46,7 @@ export default class EchartsRadarChartPlugin extends ChartPlugin<
       buildQuery,
       controlPanel,
       loadChart: () => import('./EchartsRadar'),
-      metadata: new ChartMetadata({
+      metadata: {
         behaviors: [
           Behavior.INTERACTIVE_CHART,
           Behavior.DRILL_TO_DETAIL,
@@ -68,7 +69,7 @@ export default class EchartsRadarChartPlugin extends ChartPlugin<
           t('ECharts'),
         ],
         thumbnail,
-      }),
+      },
       transformProps,
     });
   }

superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/index.ts

@@ -16,21 +16,22 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import { Behavior, t } from '@superset-ui/core';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 import controlPanel from './controlPanel';
 import buildQuery from './buildQuery';
 import example1 from './images/Sunburst1.png';
 import example2 from './images/Sunburst2.png';
+import { EchartsChartPlugin } from '../types';
 
-export default class EchartsSunburstChartPlugin extends ChartPlugin {
+export default class EchartsSunburstChartPlugin extends EchartsChartPlugin {
   constructor() {
     super({
       buildQuery,
       controlPanel,
       loadChart: () => import('./EchartsSunburst'),
-      metadata: new ChartMetadata({
+      metadata: {
         behaviors: [
           Behavior.INTERACTIVE_CHART,
           Behavior.DRILL_TO_DETAIL,
@@ -50,7 +51,7 @@ export default class EchartsSunburstChartPlugin extends ChartPlugin {
           t('Proportional'),
         ],
         thumbnail,
-      }),
+      },
       transformProps,
     });
   }

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts

@@ -18,8 +18,6 @@
  */
 import {
   t,
-  ChartMetadata,
-  ChartPlugin,
   AnnotationType,
   Behavior,
   hasGenericChartAxes,
@@ -33,6 +31,7 @@ import {
   EchartsTimeseriesFormData,
 } from '../types';
 import example1 from './images/Area1.png';
+import { EchartsChartPlugin } from '../../types';
 
 const areaTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
   transformProps({
@@ -40,7 +39,7 @@ const areaTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
     formData: { ...chartProps.formData, area: true },
   });
 
-export default class EchartsAreaChartPlugin extends ChartPlugin<
+export default class EchartsAreaChartPlugin extends EchartsChartPlugin<
   EchartsTimeseriesFormData,
   EchartsTimeseriesChartProps
 > {
@@ -49,7 +48,7 @@ export default class EchartsAreaChartPlugin extends ChartPlugin<
       buildQuery,
       controlPanel,
       loadChart: () => import('../EchartsTimeseries'),
-      metadata: new ChartMetadata({
+      metadata: {
         behaviors: [
           Behavior.INTERACTIVE_CHART,
           Behavior.DRILL_TO_DETAIL,
@@ -86,7 +85,7 @@ export default class EchartsAreaChartPlugin extends ChartPlugin<
           t('Popular'),
         ],
         thumbnail,
-      }),
+      },
       transformProps: areaTransformProps,
     });
   }

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts

@@ -19,8 +19,6 @@
 import {
   AnnotationType,
   Behavior,
-  ChartMetadata,
-  ChartPlugin,
   hasGenericChartAxes,
   t,
 } from '@superset-ui/core';
@@ -29,6 +27,7 @@ import {
   EchartsTimeseriesFormData,
   EchartsTimeseriesSeriesType,
 } from '../../types';
+import { EchartsChartPlugin } from '../../../types';
 import buildQuery from '../../buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from '../../transformProps';
@@ -46,7 +45,7 @@ const barTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
     },
   });
 
-export default class EchartsTimeseriesBarChartPlugin extends ChartPlugin<
+export default class EchartsTimeseriesBarChartPlugin extends EchartsChartPlugin<
   EchartsTimeseriesFormData,
   EchartsTimeseriesChartProps
 > {
@@ -55,7 +54,7 @@ export default class EchartsTimeseriesBarChartPlugin extends ChartPlugin<
       buildQuery,
       controlPanel,
       loadChart: () => import('../../EchartsTimeseries'),
-      metadata: new ChartMetadata({
+      metadata: {
         behaviors: [
           Behavior.INTERACTIVE_CHART,
           Behavior.DRILL_TO_DETAIL,
@@ -93,7 +92,7 @@ export default class EchartsTimeseriesBarChartPlugin extends ChartPlugin<
           t('Popular'),
         ],
         thumbnail,
-      }),
+      },
       transformProps: barTransformProps,
     });
   }

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts

@@ -19,8 +19,6 @@
 import {
   AnnotationType,
   Behavior,
-  ChartMetadata,
-  ChartPlugin,
   hasGenericChartAxes,
   t,
 } from '@superset-ui/core';
@@ -35,6 +33,7 @@ import transformProps from '../../transformProps';
 import thumbnail from './images/thumbnail.png';
 import example1 from './images/Line1.png';
 import example2 from './images/Line2.png';
+import { EchartsChartPlugin } from '../../../types';
 
 const lineTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
   transformProps({
@@ -45,7 +44,7 @@ const lineTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
     },
   });
 
-export default class EchartsTimeseriesLineChartPlugin extends ChartPlugin<
+export default class EchartsTimeseriesLineChartPlugin extends EchartsChartPlugin<
   EchartsTimeseriesFormData,
   EchartsTimeseriesChartProps
 > {
@@ -54,7 +53,7 @@ export default class EchartsTimeseriesLineChartPlugin extends ChartPlugin<
       buildQuery,
       controlPanel,
       loadChart: () => import('../../EchartsTimeseries'),
-      metadata: new ChartMetadata({
+      metadata: {
         behaviors: [
           Behavior.INTERACTIVE_CHART,
           Behavior.DRILL_TO_DETAIL,
@@ -88,7 +87,7 @@ export default class EchartsTimeseriesLineChartPlugin extends ChartPlugin<
           t('Popular'),
         ],
         thumbnail,
-      }),
+      },
       transformProps: lineTransformProps,
     });
   }

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts

@@ -19,8 +19,6 @@
 import {
   AnnotationType,
   Behavior,
-  ChartMetadata,
-  ChartPlugin,
   hasGenericChartAxes,
   t,
 } from '@superset-ui/core';
@@ -34,6 +32,7 @@ import controlPanel from './controlPanel';
 import transformProps from '../../transformProps';
 import thumbnail from './images/thumbnail.png';
 import example1 from './images/Scatter1.png';
+import { EchartsChartPlugin } from '../../../types';
 
 const scatterTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
   transformProps({
@@ -44,7 +43,7 @@ const scatterTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
     },
   });
 
-export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
+export default class EchartsTimeseriesScatterChartPlugin extends EchartsChartPlugin<
   EchartsTimeseriesFormData,
   EchartsTimeseriesChartProps
 > {
@@ -53,7 +52,7 @@ export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
       buildQuery,
       controlPanel,
       loadChart: () => import('../../EchartsTimeseries'),
-      metadata: new ChartMetadata({
+      metadata: {
         behaviors: [
           Behavior.INTERACTIVE_CHART,
           Behavior.DRILL_TO_DETAIL,
@@ -89,7 +88,7 @@ export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
           t('Popular'),
         ],
         thumbnail,
-      }),
+      },
       transformProps: scatterTransformProps,
     });
   }

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts

@@ -19,8 +19,6 @@
 import {
   AnnotationType,
   Behavior,
-  ChartMetadata,
-  ChartPlugin,
   hasGenericChartAxes,
   t,
 } from '@superset-ui/core';
@@ -34,6 +32,7 @@ import controlPanel from './controlPanel';
 import transformProps from '../../transformProps';
 import thumbnail from './images/thumbnail.png';
 import example1 from './images/SmoothLine1.png';
+import { EchartsChartPlugin } from '../../../types';
 
 const smoothTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
   transformProps({
@@ -44,7 +43,7 @@ const smoothTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
     },
   });
 
-export default class EchartsTimeseriesSmoothLineChartPlugin extends ChartPlugin<
+export default class EchartsTimeseriesSmoothLineChartPlugin extends EchartsChartPlugin<
   EchartsTimeseriesFormData,
   EchartsTimeseriesChartProps
 > {
@@ -53,7 +52,7 @@ export default class EchartsTimeseriesSmoothLineChartPlugin extends ChartPlugin<
       buildQuery,
       controlPanel,
       loadChart: () => import('../../EchartsTimeseries'),
-      metadata: new ChartMetadata({
+      metadata: {
         behaviors: [
           Behavior.INTERACTIVE_CHART,
           Behavior.DRILL_TO_DETAIL,
@@ -88,7 +87,7 @@ export default class EchartsTimeseriesSmoothLineChartPlugin extends ChartPlugin<
           t('Transformable'),
         ],
         thumbnail,
-      }),
+      },
       transformProps: smoothTransformProps,
     });
   }

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts

@@ -19,8 +19,6 @@
 import {
   AnnotationType,
   Behavior,
-  ChartMetadata,
-  ChartPlugin,
   hasGenericChartAxes,
   t,
 } from '@superset-ui/core';
@@ -34,8 +32,9 @@ import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
 import example1 from './images/Step1.png';
 import example2 from './images/Step2.png';
+import { EchartsChartPlugin } from '../../types';
 
-export default class EchartsTimeseriesStepChartPlugin extends ChartPlugin<
+export default class EchartsTimeseriesStepChartPlugin extends EchartsChartPlugin<
   EchartsTimeseriesFormData,
   EchartsTimeseriesChartProps
 > {
@@ -44,7 +43,7 @@ export default class EchartsTimeseriesStepChartPlugin extends ChartPlugin<
       buildQuery,
       controlPanel,
       loadChart: () => import('../EchartsTimeseries'),
-      metadata: new ChartMetadata({
+      metadata: {
         behaviors: [
           Behavior.INTERACTIVE_CHART,
           Behavior.DRILL_TO_DETAIL,
@@ -79,7 +78,7 @@ export default class EchartsTimeseriesStepChartPlugin extends ChartPlugin<
           t('Stacked'),
         ],
         thumbnail,
-      }),
+      },
       transformProps,
     });
   }

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts

@@ -19,8 +19,6 @@
 import {
   AnnotationType,
   Behavior,
-  ChartMetadata,
-  ChartPlugin,
   hasGenericChartAxes,
   t,
 } from '@superset-ui/core';
@@ -33,8 +31,9 @@ import {
   EchartsTimeseriesFormData,
 } from './types';
 import example from './images/Time-series_Chart.jpg';
+import { EchartsChartPlugin } from '../types';
 
-export default class EchartsTimeseriesChartPlugin extends ChartPlugin<
+export default class EchartsTimeseriesChartPlugin extends EchartsChartPlugin<
   EchartsTimeseriesFormData,
   EchartsTimeseriesChartProps
 > {
@@ -43,7 +42,7 @@ export default class EchartsTimeseriesChartPlugin extends ChartPlugin<
       buildQuery,
       controlPanel,
       loadChart: () => import('./EchartsTimeseries'),
-      metadata: new ChartMetadata({
+      metadata: {
         behaviors: [
           Behavior.INTERACTIVE_CHART,
           Behavior.DRILL_TO_DETAIL,
@@ -75,7 +74,7 @@ export default class EchartsTimeseriesChartPlugin extends ChartPlugin<
           t('Transformable'),
         ],
         thumbnail,
-      }),
+      },
       transformProps,
     });
   }

superset-frontend/plugins/plugin-chart-echarts/src/Tree/index.ts

@@ -16,20 +16,21 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
+import { t } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 import example from './images/tree.png';
 import buildQuery from './buildQuery';
+import { EchartsChartPlugin } from '../types';
 
-export default class EchartsTreeChartPlugin extends ChartPlugin {
+export default class EchartsTreeChartPlugin extends EchartsChartPlugin {
   constructor() {
     super({
       buildQuery,
       controlPanel,
       loadChart: () => import('./EchartsTree'),
-      metadata: new ChartMetadata({
+      metadata: {
         category: t('Part of a Whole'),
         credits: ['https://echarts.apache.org'],
         description: t(
@@ -45,7 +46,7 @@ export default class EchartsTreeChartPlugin extends ChartPlugin {
           t('Structural'),
         ],
         thumbnail,
-      }),
+      },
       transformProps,
     });
   }

superset-frontend/plugins/plugin-chart-echarts/src/Treemap/index.ts

@@ -17,7 +17,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import { Behavior, t } from '@superset-ui/core';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
@@ -25,8 +25,9 @@ import thumbnail from './images/thumbnail.png';
 import example1 from './images/treemap_v2_1.png';
 import example2 from './images/treemap_v2_2.jpg';
 import { EchartsTreemapChartProps, EchartsTreemapFormData } from './types';
+import { EchartsChartPlugin } from '../types';
 
-export default class EchartsTreemapChartPlugin extends ChartPlugin<
+export default class EchartsTreemapChartPlugin extends EchartsChartPlugin<
   EchartsTreemapFormData,
   EchartsTreemapChartProps
 > {
@@ -45,7 +46,7 @@ export default class EchartsTreemapChartPlugin extends ChartPlugin<
       buildQuery,
       controlPanel,
       loadChart: () => import('./EchartsTreemap'),
-      metadata: new ChartMetadata({
+      metadata: {
         behaviors: [
           Behavior.INTERACTIVE_CHART,
           Behavior.DRILL_TO_DETAIL,
@@ -68,7 +69,7 @@ export default class EchartsTreemapChartPlugin extends ChartPlugin<
           t('Proportional'),
         ],
         thumbnail,
-      }),
+      },
       transformProps,
     });
   }

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

@@ -27,6 +27,9 @@ import {
   PlainObject,
   QueryFormColumn,
   SetDataMaskHook,
+  ChartPlugin,
+  SqlaFormData,
+  ChartMetadata,
 } from '@superset-ui/core';
 import { EChartsCoreOption, ECharts } from 'echarts';
 import { TooltipMarker } from 'echarts/types/src/util/format';
@@ -170,4 +173,20 @@ export interface TreePathInfo {
   value: number | number[];
 }
 
+export class EchartsChartPlugin<
+  T extends SqlaFormData = SqlaFormData,
+  P extends ChartProps = ChartProps,
+> extends ChartPlugin<T, P> {
+  constructor(props: any) {
+    const { metadata, ...restProps } = props;
+    super({
+      ...restProps,
+      metadata: new ChartMetadata({
+        parseMethod: 'json',
+        ...metadata,
+      }),
+    });
+  }
+}
+
 export * from './Timeseries/types';

superset-frontend/plugins/plugin-chart-echarts/test/index.test.ts

@@ -23,15 +23,107 @@ import {
   EchartsGraphChartPlugin,
   EchartsFunnelChartPlugin,
   EchartsTreemapChartPlugin,
+  EchartsAreaChartPlugin,
+  EchartsTimeseriesBarChartPlugin,
+  EchartsTimeseriesLineChartPlugin,
+  EchartsTimeseriesScatterChartPlugin,
+  EchartsTimeseriesSmoothLineChartPlugin,
+  EchartsTimeseriesStepChartPlugin,
+  EchartsMixedTimeseriesChartPlugin,
+  EchartsGaugeChartPlugin,
+  EchartsRadarChartPlugin,
+  EchartsTreeChartPlugin,
+  BigNumberChartPlugin,
+  BigNumberTotalChartPlugin,
+  EchartsSunburstChartPlugin,
 } from '../src';
 
-describe('@superset-ui/plugin-chart-echarts', () => {
+import { EchartsChartPlugin } from '../src/types';
-  it('exists', () => {
+
-    expect(EchartsBoxPlotChartPlugin).toBeDefined();
+test('@superset-ui/plugin-chart-echarts exists', () => {
-    expect(EchartsPieChartPlugin).toBeDefined();
+  expect(EchartsBoxPlotChartPlugin).toBeDefined();
-    expect(EchartsTimeseriesChartPlugin).toBeDefined();
+  expect(EchartsPieChartPlugin).toBeDefined();
-    expect(EchartsGraphChartPlugin).toBeDefined();
+  expect(EchartsTimeseriesChartPlugin).toBeDefined();
-    expect(EchartsFunnelChartPlugin).toBeDefined();
+  expect(EchartsGraphChartPlugin).toBeDefined();
-    expect(EchartsTreemapChartPlugin).toBeDefined();
+  expect(EchartsFunnelChartPlugin).toBeDefined();
+  expect(EchartsTreemapChartPlugin).toBeDefined();
+  expect(EchartsAreaChartPlugin).toBeDefined();
+  expect(EchartsTimeseriesBarChartPlugin).toBeDefined();
+  expect(EchartsTimeseriesLineChartPlugin).toBeDefined();
+  expect(EchartsTimeseriesScatterChartPlugin).toBeDefined();
+  expect(EchartsTimeseriesSmoothLineChartPlugin).toBeDefined();
+  expect(EchartsTimeseriesStepChartPlugin).toBeDefined();
+  expect(EchartsMixedTimeseriesChartPlugin).toBeDefined();
+  expect(EchartsGaugeChartPlugin).toBeDefined();
+  expect(EchartsRadarChartPlugin).toBeDefined();
+  expect(EchartsTreeChartPlugin).toBeDefined();
+  expect(BigNumberChartPlugin).toBeDefined();
+  expect(BigNumberTotalChartPlugin).toBeDefined();
+  expect(EchartsSunburstChartPlugin).toBeDefined();
+});
+
+test('@superset-ui/plugin-chart-echarts-parsemethod-validation', () => {
+  const plugins: EchartsChartPlugin[] = [
+    new EchartsBoxPlotChartPlugin().configure({
+      key: 'box_plot',
+    }),
+    new EchartsPieChartPlugin().configure({
+      key: 'pie',
+    }),
+    new EchartsTimeseriesChartPlugin().configure({
+      key: 'echarts_timeseries',
+    }),
+    new EchartsGraphChartPlugin().configure({
+      key: 'graph_chart',
+    }),
+    new EchartsFunnelChartPlugin().configure({
+      key: 'funnel',
+    }),
+    new EchartsTreemapChartPlugin().configure({
+      key: 'treemap_v2',
+    }),
+    new EchartsAreaChartPlugin().configure({
+      key: 'echarts_area',
+    }),
+    new EchartsTimeseriesBarChartPlugin().configure({
+      key: 'echarts_timeseries_bar',
+    }),
+    new EchartsTimeseriesLineChartPlugin().configure({
+      key: 'echarts_timeseries_line',
+    }),
+    new EchartsTimeseriesScatterChartPlugin().configure({
+      key: 'echarts_timeseries_scatter',
+    }),
+    new EchartsTimeseriesSmoothLineChartPlugin().configure({
+      key: 'echarts_timeseries_smooth',
+    }),
+    new EchartsTimeseriesStepChartPlugin().configure({
+      key: 'echarts_timeseries_step',
+    }),
+    new EchartsMixedTimeseriesChartPlugin().configure({
+      key: 'mixed_timeseries',
+    }),
+    new EchartsGaugeChartPlugin().configure({
+      key: 'gauge_chart',
+    }),
+    new EchartsRadarChartPlugin().configure({
+      key: 'radar',
+    }),
+    new EchartsTreeChartPlugin().configure({
+      key: 'tree',
+    }),
+    new BigNumberChartPlugin().configure({
+      key: 'big_number',
+    }),
+    new BigNumberTotalChartPlugin().configure({
+      key: 'big_number_total',
+    }),
+    new EchartsSunburstChartPlugin().configure({
+      key: 'sunburst',
+    }),
+  ];
+
+  plugins.forEach(plugin => {
+    expect(plugin.metadata.parseMethod).toEqual('json');
   });
 });

superset-frontend/src/components/Chart/chartAction.js

@@ -27,7 +27,7 @@ import {
   getExploreUrl,
   getLegacyEndpointType,
   buildV1ChartDataPayload,
-  shouldUseLegacyApi,
+  getQuerySettings,
   getChartDataUri,
 } from 'src/explore/exploreUtils';
 import { requiresQuery } from 'src/modules/AnnotationTypes';
@@ -117,6 +117,7 @@ const legacyChartDataRequest = async (
   force,
   method = 'POST',
   requestParams = {},
+  parseMethod,
 ) => {
   const endpointType = getLegacyEndpointType({ resultFormat, resultType });
   const allowDomainSharding =
@@ -136,7 +137,7 @@ const legacyChartDataRequest = async (
     ...requestParams,
     url,
     postPayload: { form_data: formData },
-    parseMethod: 'json-bigint',
+    parseMethod,
   };
 
   const clientMethod =
@@ -161,6 +162,7 @@ const v1ChartDataRequest = async (
   requestParams,
   setDataMask,
   ownState,
+  parseMethod,
 ) => {
   const payload = buildV1ChartDataPayload({
     formData,
@@ -194,7 +196,7 @@ const v1ChartDataRequest = async (
     url,
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(payload),
-    parseMethod: 'json-bigint',
+    parseMethod,
   };
 
   return SupersetClient.post(querySettings);
@@ -222,7 +224,8 @@ export async function getChartDataRequest({
     };
   }
 
-  if (shouldUseLegacyApi(formData)) {
+  const [useLegacyApi, parseMethod] = getQuerySettings(formData);
+  if (useLegacyApi) {
     return legacyChartDataRequest(
       formData,
       resultFormat,
@@ -230,6 +233,7 @@ export async function getChartDataRequest({
       force,
       method,
       querySettings,
+      parseMethod,
     );
   }
   return v1ChartDataRequest(
@@ -240,6 +244,7 @@ export async function getChartDataRequest({
     querySettings,
     setDataMask,
     ownState,
+    parseMethod,
   );
 }
 
@@ -404,13 +409,14 @@ export function exploreJSON(
         if (isFeatureEnabled(FeatureFlag.GLOBAL_ASYNC_QUERIES)) {
           // deal with getChartDataRequest transforming the response data
           const result = 'result' in json ? json.result : json;
+          const [useLegacyApi] = getQuerySettings(formData);
           switch (response.status) {
             case 200:
               // Query results returned synchronously, meaning query was already cached.
               return Promise.resolve(result);
             case 202:
               // Query is running asynchronously and we must await the results
-              if (shouldUseLegacyApi(formData)) {
+              if (useLegacyApi) {
                 return waitForAsyncData(result[0]);
               }
               return waitForAsyncData(result);
@@ -481,7 +487,8 @@ export function exploreJSON(
       });
 
     // only retrieve annotations when calling the legacy API
-    const annotationLayers = shouldUseLegacyApi(formData)
+    const [useLegacyApi] = getQuerySettings(formData);
+    const annotationLayers = useLegacyApi
       ? formData.annotation_layers || []
       : [];
     const isDashboardRequest = dashboardId > 0;

superset-frontend/src/explore/exploreUtils/exploreUtils.test.jsx

@@ -24,7 +24,7 @@ import {
   exploreChart,
   getExploreUrl,
   getSimpleSQLExpression,
-  shouldUseLegacyApi,
+  getQuerySettings,
 } from 'src/explore/exploreUtils';
 import { DashboardStandaloneMode } from 'src/dashboard/util/constants';
 import * as hostNamesConfig from 'src/utils/hostNamesConfig';
@@ -199,7 +199,7 @@ describe('exploreUtils', () => {
     });
   });
 
-  describe('shouldUseLegacyApi', () => {
+  describe('getQuerySettings', () => {
     beforeAll(() => {
       getChartMetadataRegistry()
         .registerValue('my_legacy_viz', { useLegacyApi: true })
@@ -211,32 +211,36 @@ describe('exploreUtils', () => {
     });
 
     it('returns true for legacy viz', () => {
-      const useLegacyApi = shouldUseLegacyApi({
+      const [useLegacyApi, parseMethod] = getQuerySettings({
         ...formData,
         viz_type: 'my_legacy_viz',
       });
       expect(useLegacyApi).toBe(true);
+      expect(parseMethod).toBe('json-bigint');
     });
 
     it('returns false for v1 viz', () => {
-      const useLegacyApi = shouldUseLegacyApi({
+      const [useLegacyApi, parseMethod] = getQuerySettings({
         ...formData,
         viz_type: 'my_v1_viz',
       });
       expect(useLegacyApi).toBe(false);
+      expect(parseMethod).toBe('json-bigint');
     });
 
     it('returns false for formData with unregistered viz_type', () => {
-      const useLegacyApi = shouldUseLegacyApi({
+      const [useLegacyApi, parseMethod] = getQuerySettings({
         ...formData,
         viz_type: 'undefined_viz',
       });
       expect(useLegacyApi).toBe(false);
+      expect(parseMethod).toBe('json-bigint');
     });
 
     it('returns false for formData without viz_type', () => {
-      const useLegacyApi = shouldUseLegacyApi(formData);
+      const [useLegacyApi, parseMethod] = getQuerySettings(formData);
       expect(useLegacyApi).toBe(false);
+      expect(parseMethod).toBe('json-bigint');
     });
   });
 

superset-frontend/src/explore/exploreUtils/index.js

@@ -194,9 +194,12 @@ export function getExploreUrl({
   return uri.search(search).directory(directory).toString();
 }
 
-export const shouldUseLegacyApi = formData => {
+export const getQuerySettings = formData => {
   const vizMetadata = getChartMetadataRegistry().get(formData.viz_type);
-  return vizMetadata ? vizMetadata.useLegacyApi : false;
+  return [
+    vizMetadata?.useLegacyApi ?? false,
+    vizMetadata?.parseMethod ?? 'json-bigint',
+  ];
 };
 
 export const buildV1ChartDataPayload = ({
@@ -243,7 +246,8 @@ export const exportChart = ({
 }) => {
   let url;
   let payload;
-  if (shouldUseLegacyApi(formData)) {
+  const [useLegacyApi, parseMethod] = getQuerySettings(formData);
+  if (useLegacyApi) {
     const endpointType = getLegacyEndpointType({ resultFormat, resultType });
     url = getExploreUrl({
       formData,
@@ -259,6 +263,7 @@ export const exportChart = ({
       resultFormat,
       resultType,
       ownState,
+      parseMethod,
     });
   }
 

superset-frontend/src/explore/exploreUtils/shouldUseLegacyApi.test.ts

@@ -17,14 +17,15 @@
  * under the License.
  */
 import * as Core from '@superset-ui/core';
-import { shouldUseLegacyApi } from '.';
+import { getQuerySettings } from '.';
 
 test('Should return false', () => {
   const spy = jest.spyOn(Core, 'getChartMetadataRegistry');
   const get = jest.fn();
   spy.mockReturnValue({ get } as any);
   expect(get).toBeCalledTimes(0);
-  expect(shouldUseLegacyApi({ viz_type: 'name_test' })).toBe(false);
+  const [useLegacyApi] = getQuerySettings({ viz_type: 'name_test' });
+  expect(useLegacyApi).toBe(false);
   expect(get).toBeCalledTimes(1);
   expect(get).toBeCalledWith('name_test');
 });
@@ -35,7 +36,8 @@ test('Should return true', () => {
   get.mockReturnValue({ useLegacyApi: true });
   spy.mockReturnValue({ get } as any);
   expect(get).toBeCalledTimes(0);
-  expect(shouldUseLegacyApi({ viz_type: 'name_test' })).toBe(true);
+  const [useLegacyApi] = getQuerySettings({ viz_type: 'name_test' });
+  expect(useLegacyApi).toBe(true);
   expect(get).toBeCalledTimes(1);
   expect(get).toBeCalledWith('name_test');
 });
@@ -46,7 +48,8 @@ test('Should return false when useLegacyApi:false', () => {
   get.mockReturnValue({ useLegacyApi: false });
   spy.mockReturnValue({ get } as any);
   expect(get).toBeCalledTimes(0);
-  expect(shouldUseLegacyApi({ viz_type: 'name_test' })).toBe(false);
+  const [useLegacyApi] = getQuerySettings({ viz_type: 'name_test' });
+  expect(useLegacyApi).toBe(false);
   expect(get).toBeCalledTimes(1);
   expect(get).toBeCalledWith('name_test');
 });