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

Co-authored-by: aadhikari <aadhikari@apple.com>
2026-04-19 08:04:53 +00:00 · 2023-06-27 10:59:24 -07:00
parent 0ddc0a6738
commit 3f17945745
26 changed files with 250 additions and 111 deletions
--- a/superset-frontend/packages/superset-ui-core/src/chart/models/ChartMetadata.ts
+++ b/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 {
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts
+++ b/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
 > {
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts
+++ b/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
 > {
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/index.ts
+++ b/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,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts
+++ b/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,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts
+++ b/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,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts
+++ b/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,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts
+++ b/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,
    });
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts
+++ b/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,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts
+++ b/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,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/index.ts
+++ b/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,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts
+++ b/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,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts
+++ b/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,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts
+++ b/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,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts
+++ b/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,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts
+++ b/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,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts
+++ b/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,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts
+++ b/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,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/index.ts
+++ b/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,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/index.ts
+++ b/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,
    });
  }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/types.ts
+++ b/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';
--- a/superset-frontend/plugins/plugin-chart-echarts/test/index.test.ts
+++ b/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', () => {
-  it('exists', () => {
-    expect(EchartsBoxPlotChartPlugin).toBeDefined();
-    expect(EchartsPieChartPlugin).toBeDefined();
-    expect(EchartsTimeseriesChartPlugin).toBeDefined();
-    expect(EchartsGraphChartPlugin).toBeDefined();
-    expect(EchartsFunnelChartPlugin).toBeDefined();
-    expect(EchartsTreemapChartPlugin).toBeDefined();
+import { EchartsChartPlugin } from '../src/types';
+
+test('@superset-ui/plugin-chart-echarts exists', () => {
+  expect(EchartsBoxPlotChartPlugin).toBeDefined();
+  expect(EchartsPieChartPlugin).toBeDefined();
+  expect(EchartsTimeseriesChartPlugin).toBeDefined();
+  expect(EchartsGraphChartPlugin).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');
  });
 });
--- a/superset-frontend/src/components/Chart/chartAction.js
+++ b/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;
--- a/superset-frontend/src/explore/exploreUtils/exploreUtils.test.jsx
+++ b/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');
    });
  });

--- a/superset-frontend/src/explore/exploreUtils/index.js
+++ b/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,
    });
  }

--- a/superset-frontend/src/explore/exploreUtils/shouldUseLegacyApi.test.ts
+++ b/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');
 });