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

Co-authored-by: aadhikari <aadhikari@apple.com>
apache · Jun 27, 2023 · 3f17945 · 3f17945
1 parent 0ddc0a6
commit 3f17945
Show file tree

Hide file tree

Showing 26 changed files with 250 additions and 111 deletions.
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
@@ -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
@@ -16,16 +16,17 @@
  * 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';
 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
 > {

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
@@ -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
 > {

diff --git 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
@@ -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
@@ -16,16 +16,17 @@
  * 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';
 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
@@ -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
@@ -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
@@ -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
@@ -17,16 +17,17 @@
  * 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 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
@@ -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,
     });
   }