From 911403bf6d133536ddb90d4424b3c30efe78d700 Mon Sep 17 00:00:00 2001
From: aadhikari <aadhikari@apple.com>
Date: Mon, 1 May 2023 12:38:11 -0700
Subject: [PATCH 1/8] Update the color of the run button when it is in a
 running state

---
 .../src/SqlLab/components/RunQueryActionButton/index.tsx      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
index 0a2aa992643b5..a639b8f88accd 100644
--- a/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
@@ -146,7 +146,9 @@ const RunQueryActionButton = ({
               ),
               trigger: 'click',
             }
-          : { buttonStyle: 'primary' })}
+          : {
+              buttonStyle: shouldShowStopBtn ? 'danger' : 'primary',
+            })}
       >
         {buildText(shouldShowStopBtn, selectedText)}
       </ButtonComponent>

From 4256550dce5822fc3f52054642aeb0e47898a27a Mon Sep 17 00:00:00 2001
From: aadhikari <aadhikari@apple.com>
Date: Tue, 2 May 2023 13:56:17 -0700
Subject: [PATCH 2/8] stop button styles updated to match explore button scheme

---
 .../src/SqlLab/components/RunQueryActionButton/index.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
index a639b8f88accd..383cb072e5da7 100644
--- a/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
@@ -44,7 +44,7 @@ const buildText = (
   if (shouldShowStopButton) {
     return (
       <>
-        <i className="fa fa-stop" /> {t('Stop')}
+        <i className="fa fa-stop-circle-o" /> {t('Stop')}
       </>
     );
   }
@@ -147,7 +147,7 @@ const RunQueryActionButton = ({
               trigger: 'click',
             }
           : {
-              buttonStyle: shouldShowStopBtn ? 'danger' : 'primary',
+              buttonStyle: shouldShowStopBtn ? 'warning' : 'primary',
             })}
       >
         {buildText(shouldShowStopBtn, selectedText)}

From 93062b24faa39268c895592a97f9792cababec56 Mon Sep 17 00:00:00 2001
From: aadhikari <aadhikari@apple.com>
Date: Wed, 3 May 2023 00:30:19 -0700
Subject: [PATCH 3/8] sql lab and explore view run query button updated

---
 .../src/SqlLab/components/RunQueryActionButton/index.tsx        | 2 +-
 .../src/explore/components/RunQueryButton/index.tsx             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
index 383cb072e5da7..f9181188f9817 100644
--- a/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
@@ -44,7 +44,7 @@ const buildText = (
   if (shouldShowStopButton) {
     return (
       <>
-        <i className="fa fa-stop-circle-o" /> {t('Stop')}
+        <i className="fa fa-stop" /> {t('Stop')}
       </>
     );
   }
diff --git a/superset-frontend/src/explore/components/RunQueryButton/index.tsx b/superset-frontend/src/explore/components/RunQueryButton/index.tsx
index 622cb516f00bf..f5e3bcfed0cbb 100644
--- a/superset-frontend/src/explore/components/RunQueryButton/index.tsx
+++ b/superset-frontend/src/explore/components/RunQueryButton/index.tsx
@@ -42,7 +42,7 @@ export const RunQueryButton = ({
 }: RunQueryButtonProps) =>
   loading ? (
     <Button onClick={onStop} buttonStyle="warning" disabled={!canStopQuery}>
-      <i className="fa fa-stop-circle-o" /> {t('Stop')}
+      <i className="fa fa-stop" /> {t('Stop')}
     </Button>
   ) : (
     <Button

From 514956f868e3731a2c2ea5ea13eff5610b4f053c Mon Sep 17 00:00:00 2001
From: aadhikari <aadhikari@apple.com>
Date: Mon, 15 May 2023 22:10:06 -0700
Subject: [PATCH 4/8] setting current user as default owner, during new alert
 initialization

---
 .../src/features/alerts/AlertReportModal.tsx       | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx
index ab78895a17792..b26ee5f2bc356 100644
--- a/superset-frontend/src/features/alerts/AlertReportModal.tsx
+++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx
@@ -59,6 +59,7 @@ import {
   AlertsReportsConfig,
 } from 'src/features/alerts/types';
 import { useSelector } from 'react-redux';
+import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
 import { AlertReportCronScheduler } from './components/AlertReportCronScheduler';
 import { NotificationMethod } from './components/NotificationMethod';
 
@@ -449,6 +450,9 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
   isReport = false,
   addSuccessToast,
 }) => {
+  const currentUser = useSelector<any, UserWithPermissionsAndRoles>(
+    state => state.user,
+  );
   const conf = useCommonConf();
   const allowedNotificationMethods: NotificationMethodOption[] =
     conf?.ALERT_REPORTS_NOTIFICATION_METHODS || DEFAULT_NOTIFICATION_METHODS;
@@ -1011,7 +1015,15 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
       !isEditMode &&
       (!currentAlert || currentAlert.id || (isHidden && show))
     ) {
-      setCurrentAlert({ ...defaultAlert });
+      setCurrentAlert({
+        ...defaultAlert,
+        owners: [
+          {
+            value: currentUser.userId,
+            label: `${currentUser.firstName} ${currentUser.lastName}`,
+          },
+        ],
+      });
       setNotificationSettings([]);
       setNotificationAddState('active');
     }

From 694a50640df9bcbcf52d69a3199c061faf2a72b7 Mon Sep 17 00:00:00 2001
From: aadhikari <aadhikari@apple.com>
Date: Tue, 16 May 2023 00:02:57 -0700
Subject: [PATCH 5/8] added check to make sure current user is defined

---
 .../src/features/alerts/AlertReportModal.tsx       | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx
index b26ee5f2bc356..dff549cf56f1c 100644
--- a/superset-frontend/src/features/alerts/AlertReportModal.tsx
+++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx
@@ -1017,12 +1017,14 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
     ) {
       setCurrentAlert({
         ...defaultAlert,
-        owners: [
-          {
-            value: currentUser.userId,
-            label: `${currentUser.firstName} ${currentUser.lastName}`,
-          },
-        ],
+        owners: currentUser
+          ? [
+              {
+                value: currentUser.userId,
+                label: `${currentUser.firstName} ${currentUser.lastName}`,
+              },
+            ]
+          : [],
       });
       setNotificationSettings([]);
       setNotificationAddState('active');

From 13f908c828448f6faa88052e4676c03b51433766 Mon Sep 17 00:00:00 2001
From: aadhikari <aadhikari@apple.com>
Date: Thu, 22 Jun 2023 23:04:20 -0700
Subject: [PATCH 6/8] fixed bignumber display issue in echart components

---
 .../src/chart/models/ChartMetadata.ts         |  6 ++++
 .../src/BigNumber/BigNumberTotal/index.ts     |  5 ++--
 .../BigNumber/BigNumberWithTrendline/index.ts |  5 ++--
 .../plugin-chart-echarts/src/BoxPlot/index.ts |  9 +++---
 .../plugin-chart-echarts/src/Funnel/index.ts  |  9 +++---
 .../plugin-chart-echarts/src/Gauge/index.ts   |  9 +++---
 .../plugin-chart-echarts/src/Graph/index.ts   |  9 +++---
 .../src/MixedTimeseries/index.ts              |  9 +++---
 .../plugin-chart-echarts/src/Pie/index.ts     |  9 +++---
 .../plugin-chart-echarts/src/Radar/index.ts   |  9 +++---
 .../src/Sunburst/index.ts                     |  9 +++---
 .../src/Timeseries/Area/index.ts              |  9 +++---
 .../src/Timeseries/Regular/Bar/index.ts       |  9 +++---
 .../src/Timeseries/Regular/Line/index.ts      |  9 +++---
 .../src/Timeseries/Regular/Scatter/index.ts   |  9 +++---
 .../Timeseries/Regular/SmoothLine/index.ts    |  9 +++---
 .../src/Timeseries/Step/index.ts              |  9 +++---
 .../src/Timeseries/index.ts                   |  9 +++---
 .../plugin-chart-echarts/src/Tree/index.ts    |  9 +++---
 .../plugin-chart-echarts/src/Treemap/index.ts |  9 +++---
 .../plugins/plugin-chart-echarts/src/types.ts | 20 +++++++++++++
 .../test/Timeseries/index.test.ts             | 28 +++++++++++++++++++
 .../src/components/Chart/chartAction.js       | 21 ++++++++------
 .../exploreUtils/exploreUtils.test.jsx        | 16 +++++++----
 .../src/explore/exploreUtils/index.js         | 11 ++++++--
 .../exploreUtils/shouldUseLegacyApi.test.ts   | 11 +++++---
 26 files changed, 175 insertions(+), 101 deletions(-)
 create mode 100644 superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/index.test.ts

diff --git a/superset-frontend/packages/superset-ui-core/src/chart/models/ChartMetadata.ts b/superset-frontend/packages/superset-ui-core/src/chart/models/ChartMetadata.ts
index 1d55d2a9859f0..34f373f0f4891 100644
--- 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 {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts
index a31a94b5077c6..898c80802cace 100644
--- 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, ChartMetadata, Behavior } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import buildQuery from './buildQuery';
@@ -24,6 +24,7 @@ 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({
   category: t('KPI'),
@@ -48,7 +49,7 @@ const metadata = new ChartMetadata({
   behaviors: [Behavior.DRILL_TO_DETAIL],
 });
 
-export default class BigNumberTotalChartPlugin extends ChartPlugin<
+export default class BigNumberTotalChartPlugin extends EchartsChartPlugin<
   BigNumberTotalFormData,
   BigNumberTotalChartProps
 > {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts
index a8c2741532923..d094105376f62 100644
--- 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, ChartMetadata, Behavior } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import buildQuery from './buildQuery';
@@ -26,6 +26,7 @@ import {
   BigNumberWithTrendlineChartProps,
   BigNumberWithTrendlineFormData,
 } from '../types';
+import { EchartsChartPlugin } from '../../types';
 
 const metadata = new ChartMetadata({
   category: t('KPI'),
@@ -47,7 +48,7 @@ const metadata = new ChartMetadata({
   behaviors: [Behavior.DRILL_TO_DETAIL],
 });
 
-export default class BigNumberWithTrendlineChartPlugin extends ChartPlugin<
+export default class BigNumberWithTrendlineChartPlugin extends EchartsChartPlugin<
   BigNumberWithTrendlineFormData,
   BigNumberWithTrendlineChartProps
 > {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/index.ts
index 15d1a4b49eda9..dc993048178b2 100644
--- 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,
     });
   }
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts
index 39161c8ad64da..9660f525713bd 100644
--- 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,
     });
   }
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts
index e3036dfbbd25a..78f6c386c85ca 100644
--- 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,
     });
   }
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts
index a0275c5bbdd2d..d95f3dd98e267 100644
--- 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,
     });
   }
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts
index 66e471235f8c6..e8616a41ad256 100644
--- 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,
     });
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts
index 500b40f59f0b4..7380f575e8a2b 100644
--- 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,
     });
   }
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts
index a544e28b2697e..70f94f42f9728 100644
--- 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,
     });
   }
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/index.ts
index e6bb0f8b39e07..42087078030b9 100644
--- 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,
     });
   }
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts
index 733db0a9cb540..40cb06d442d1a 100644
--- 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,
     });
   }
diff --git 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
index 81f7c15ece049..d88f54a8e560f 100644
--- 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,
     });
   }
diff --git 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
index cf969105554d3..f0b6fad88a65f 100644
--- 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,
     });
   }
diff --git 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
index 7fa77763bcb11..1577a62560fd1 100644
--- 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,
     });
   }
diff --git 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
index 9608407d02ab7..355b1fd2dd494 100644
--- 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,
     });
   }
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts
index 93d439851d85e..e84f4c1a97505 100644
--- 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,
     });
   }
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts
index 4cf4337fdc5b7..956c425c34a82 100644
--- 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,
     });
   }
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/index.ts
index 5514c372f38c9..79c8c13785449 100644
--- 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,
     });
   }
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/index.ts
index 9e91965954ed2..d0359aff96438 100644
--- 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,
     });
   }
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/types.ts
index 4b96f73bb9d6e..62b12316fa7ee 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/types.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/types.ts
@@ -26,6 +26,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';
@@ -168,4 +171,21 @@ 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 } = props;
+    const mergedProps = {
+      ...props,
+      metadata: new ChartMetadata({
+        parseMethod: 'json',
+        ...metadata,
+      }),
+    };
+    super(mergedProps);
+  }
+}
+
 export * from './Timeseries/types';
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/index.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/index.test.ts
new file mode 100644
index 0000000000000..2a26ea50a232d
--- /dev/null
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/index.test.ts
@@ -0,0 +1,28 @@
+/**
++ * Licensed to the Apache Software Foundation (ASF) under one
++ * or more contributor license agreements.  See the NOTICE file
++ * distributed with this work for additional information
++ * regarding copyright ownership.  The ASF licenses this file
++ * to you under the Apache License, Version 2.0 (the
++ * "License"); you may not use this file except in compliance
++ * with the License.  You may obtain a copy of the License at
++ *
++ *   http://www.apache.org/licenses/LICENSE-2.0
++ *
++ * Unless required by applicable law or agreed to in writing,
++ * software distributed under the License is distributed on an
++ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
++ * KIND, either express or implied.  See the License for the
++ * specific language governing permissions and limitations
++ * under the License.
++ */
+import { EchartsTimeseriesChartPlugin } from '@superset-ui/plugin-chart-echarts';
+
+describe('@superset-ui/plugin-chart-echarts', () => {
+  it('exists', () => {
+    const chart = new EchartsTimeseriesChartPlugin().configure({
+      key: 'echarts_timeseries',
+    });
+    expect(chart.metadata.parseMethod).toEqual('json');
+  });
+});
diff --git a/superset-frontend/src/components/Chart/chartAction.js b/superset-frontend/src/components/Chart/chartAction.js
index 25c3cd1ab8e77..500351e18880f 100644
--- 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,9 +487,8 @@ export function exploreJSON(
       });
 
     // only retrieve annotations when calling the legacy API
-    const annotationLayers = shouldUseLegacyApi(formData)
-      ? formData.annotation_layers || []
-      : [];
+    const [useLegacyApi] = getQuerySettings(formData);
+    const annotationLayers = useLegacyApi ? formData.annotation_layers : [];
     const isDashboardRequest = dashboardId > 0;
 
     return Promise.all([
diff --git a/superset-frontend/src/explore/exploreUtils/exploreUtils.test.jsx b/superset-frontend/src/explore/exploreUtils/exploreUtils.test.jsx
index 52c20dcd84bd2..3105f3086886a 100644
--- 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');
     });
   });
 
diff --git a/superset-frontend/src/explore/exploreUtils/index.js b/superset-frontend/src/explore/exploreUtils/index.js
index e3e0b4f8ff0ad..67dc0c77656f7 100644
--- 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,
     });
   }
 
diff --git a/superset-frontend/src/explore/exploreUtils/shouldUseLegacyApi.test.ts b/superset-frontend/src/explore/exploreUtils/shouldUseLegacyApi.test.ts
index 8b4599ce63d3f..adf42af3e84ca 100644
--- 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');
 });

From 6a811c5c7e5d2ac48b83c0c66a9dff845f55e9c9 Mon Sep 17 00:00:00 2001
From: aadhikari <aadhikari@apple.com>
Date: Sun, 25 Jun 2023 23:43:06 -0700
Subject: [PATCH 7/8] added tests for all plugins

---
 .../src/BigNumber/BigNumberTotal/index.ts     |   6 +-
 .../BigNumber/BigNumberWithTrendline/index.ts |   6 +-
 .../plugins/plugin-chart-echarts/src/types.ts |   9 +-
 .../test/Timeseries/index.test.ts             |  28 -----
 .../plugin-chart-echarts/test/index.test.ts   | 108 ++++++++++++++++--
 5 files changed, 110 insertions(+), 47 deletions(-)
 delete mode 100644 superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/index.test.ts

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts
index 898c80802cace..d92283d7ccad0 100644
--- 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, 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,7 +26,7 @@ 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.',
@@ -47,7 +47,7 @@ const metadata = new ChartMetadata({
   ],
   thumbnail,
   behaviors: [Behavior.DRILL_TO_DETAIL],
-});
+};
 
 export default class BigNumberTotalChartPlugin extends EchartsChartPlugin<
   BigNumberTotalFormData,
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts
index d094105376f62..80a21ad2290b8 100644
--- 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, Behavior } from '@superset-ui/core';
+import { t, Behavior } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import buildQuery from './buildQuery';
@@ -28,7 +28,7 @@ import {
 } 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.',
@@ -46,7 +46,7 @@ const metadata = new ChartMetadata({
   ],
   thumbnail,
   behaviors: [Behavior.DRILL_TO_DETAIL],
-});
+};
 
 export default class BigNumberWithTrendlineChartPlugin extends EchartsChartPlugin<
   BigNumberWithTrendlineFormData,
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/types.ts
index 62b12316fa7ee..32438f79dd521 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/types.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/types.ts
@@ -176,15 +176,14 @@ export class EchartsChartPlugin<
   P extends ChartProps = ChartProps,
 > extends ChartPlugin<T, P> {
   constructor(props: any) {
-    const { metadata } = props;
-    const mergedProps = {
-      ...props,
+    const { metadata, ...restProps } = props;
+    super({
+      ...restProps,
       metadata: new ChartMetadata({
         parseMethod: 'json',
         ...metadata,
       }),
-    };
-    super(mergedProps);
+    });
   }
 }
 
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/index.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/index.test.ts
deleted file mode 100644
index 2a26ea50a232d..0000000000000
--- a/superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/index.test.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
-+ * Licensed to the Apache Software Foundation (ASF) under one
-+ * or more contributor license agreements.  See the NOTICE file
-+ * distributed with this work for additional information
-+ * regarding copyright ownership.  The ASF licenses this file
-+ * to you under the Apache License, Version 2.0 (the
-+ * "License"); you may not use this file except in compliance
-+ * with the License.  You may obtain a copy of the License at
-+ *
-+ *   http://www.apache.org/licenses/LICENSE-2.0
-+ *
-+ * Unless required by applicable law or agreed to in writing,
-+ * software distributed under the License is distributed on an
-+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-+ * KIND, either express or implied.  See the License for the
-+ * specific language governing permissions and limitations
-+ * under the License.
-+ */
-import { EchartsTimeseriesChartPlugin } from '@superset-ui/plugin-chart-echarts';
-
-describe('@superset-ui/plugin-chart-echarts', () => {
-  it('exists', () => {
-    const chart = new EchartsTimeseriesChartPlugin().configure({
-      key: 'echarts_timeseries',
-    });
-    expect(chart.metadata.parseMethod).toEqual('json');
-  });
-});
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/index.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/index.test.ts
index 4ffd1cf473f2d..f9b69393aef92 100644
--- 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');
   });
 });

From fefa1b9702a1f0cdaf0cc6a40a87c03843d35fd7 Mon Sep 17 00:00:00 2001
From: aadhikari <aadhikari@apple.com>
Date: Mon, 26 Jun 2023 01:11:41 -0700
Subject: [PATCH 8/8] updated chartAction to fix annotationLayers extraction

---
 superset-frontend/src/components/Chart/chartAction.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/components/Chart/chartAction.js b/superset-frontend/src/components/Chart/chartAction.js
index 500351e18880f..d2e8b3d3278fa 100644
--- a/superset-frontend/src/components/Chart/chartAction.js
+++ b/superset-frontend/src/components/Chart/chartAction.js
@@ -488,7 +488,9 @@ export function exploreJSON(
 
     // only retrieve annotations when calling the legacy API
     const [useLegacyApi] = getQuerySettings(formData);
-    const annotationLayers = useLegacyApi ? formData.annotation_layers : [];
+    const annotationLayers = useLegacyApi
+      ? formData.annotation_layers || []
+      : [];
     const isDashboardRequest = dashboardId > 0;
 
     return Promise.all([