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 1d55d2a9859f..34f373f0f489 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 a31a94b5077c..d92283d7ccad 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, 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 > { 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 a8c274153292..80a21ad2290b 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, 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 index 15d1a4b49eda..dc993048178b 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 39161c8ad64d..9660f525713b 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 e3036dfbbd25..78f6c386c85c 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 a0275c5bbdd2..d95f3dd98e26 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 66e471235f8c..e8616a41ad25 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 500b40f59f0b..7380f575e8a2 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 a544e28b2697..70f94f42f972 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 e6bb0f8b39e0..42087078030b 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 733db0a9cb54..40cb06d442d1 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 81f7c15ece04..d88f54a8e560 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 cf969105554d..f0b6fad88a65 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 7fa77763bcb1..1577a62560fd 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 9608407d02ab..355b1fd2dd49 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 93d439851d85..e84f4c1a9750 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 4cf4337fdc5b..956c425c34a8 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 5514c372f38c..79c8c1378544 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 9e91965954ed..d0359aff9643 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 4b96f73bb9d6..32438f79dd52 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,20 @@ export interface TreePathInfo { value: number | number[]; } +export class EchartsChartPlugin< + T extends SqlaFormData = SqlaFormData, + P extends ChartProps = ChartProps, +> extends ChartPlugin { + constructor(props: any) { + const { metadata, ...restProps } = props; + super({ + ...restProps, + metadata: new ChartMetadata({ + parseMethod: 'json', + ...metadata, + }), + }); + } +} + export * from './Timeseries/types'; 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 4ffd1cf473f2..f9b69393aef9 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'); }); }); diff --git a/superset-frontend/src/components/Chart/chartAction.js b/superset-frontend/src/components/Chart/chartAction.js index 25c3cd1ab8e7..d2e8b3d3278f 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,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; diff --git a/superset-frontend/src/explore/exploreUtils/exploreUtils.test.jsx b/superset-frontend/src/explore/exploreUtils/exploreUtils.test.jsx index 52c20dcd84bd..3105f3086886 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 e3e0b4f8ff0a..67dc0c77656f 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 8b4599ce63d3..adf42af3e84c 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'); });