diff --git a/superset-frontend/packages/superset-ui-glyph-core/src/defineChart.tsx b/superset-frontend/packages/superset-ui-glyph-core/src/defineChart.tsx index 963c7aa1bb1..7814e97a938 100644 --- a/superset-frontend/packages/superset-ui-glyph-core/src/defineChart.tsx +++ b/superset-frontend/packages/superset-ui-glyph-core/src/defineChart.tsx @@ -35,6 +35,7 @@ import { ChartPlugin, ChartMetadata, Behavior, + ChartLabel, ChartProps, buildQueryContext, QueryFormData, @@ -199,6 +200,7 @@ export interface ChartDefinition< exampleGallery?: Array<{ url: string; urlDark?: string; caption?: string }>; supportedAnnotationTypes?: string[]; useLegacyApi?: boolean; + label?: ChartLabel; }; /** @@ -1013,6 +1015,7 @@ export function defineChart< exampleGallery: metadata.exampleGallery, supportedAnnotationTypes: metadata.supportedAnnotationTypes, useLegacyApi: metadata.useLegacyApi, + label: metadata.label, }); // Return a ChartPlugin class diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/index.ts b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/index.ts deleted file mode 100644 index 6ee81a6ed61..00000000000 --- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/index.ts +++ /dev/null @@ -1,63 +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 { t } from '@apache-superset/core/translation'; -import { ChartMetadata, ChartPlugin, ChartLabel } from '@superset-ui/core'; -import transformProps from '../transformProps'; -import example from './images/example.jpg'; -import exampleDark from './images/example-dark.jpg'; -import thumbnail from './images/thumbnail.png'; -import thumbnailDark from './images/thumbnail-dark.png'; -import controlPanel from './controlPanel'; - -const metadata = new ChartMetadata({ - category: t('Correlation'), - credits: ['http://nvd3.org'], - description: t( - 'Visualizes a metric across three dimensions of data in a single chart (X axis, Y axis, and bubble size). Bubbles from the same group can be showcased using bubble color.', - ), - exampleGallery: [{ url: example, urlDark: exampleDark }], - label: ChartLabel.Deprecated, - name: t('Bubble Chart (legacy)'), - tags: [ - t('Multi-Dimensions'), - t('Comparison'), - t('Legacy'), - t('Scatter'), - t('Time'), - t('Trend'), - t('nvd3'), - ], - thumbnail, - thumbnailDark, - useLegacyApi: true, -}); - -/** - * @deprecated in version 4.0. - */ -export default class BubbleChartPlugin extends ChartPlugin { - constructor() { - super({ - loadChart: () => import('../ReactNVD3'), - metadata, - transformProps, - controlPanel, - }); - } -} diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/controlPanel.ts b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/index.tsx similarity index 68% rename from superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/controlPanel.ts rename to superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/index.tsx index f6073a37095..343ac100e24 100644 --- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/controlPanel.ts +++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/index.tsx @@ -17,12 +17,13 @@ * under the License. */ import { t } from '@apache-superset/core/translation'; +import { ChartLabel } from '@superset-ui/core'; import { - ControlPanelConfig, formatSelectOptions, D3_FORMAT_OPTIONS, getStandardizedControls, } from '@superset-ui/chart-controls'; +import { defineChart } from '@superset-ui/glyph-core'; import { showLegend, xAxisLabel, @@ -36,9 +37,48 @@ import { leftMargin, yAxisBounds, } from '../NVD3Controls'; +import example from './images/example.jpg'; +import exampleDark from './images/example-dark.jpg'; +import thumbnail from './images/thumbnail.png'; +import thumbnailDark from './images/thumbnail-dark.png'; -const config: ControlPanelConfig = { - controlPanelSections: [ +// eslint-disable-next-line @typescript-eslint/no-var-requires +const transformPropsJs = require('../transformProps').default; +// eslint-disable-next-line @typescript-eslint/no-var-requires +const ReactNVD3 = require('../ReactNVD3').default; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type NVD3Extra = Record; + +/** + * @deprecated in version 4.0. + */ +export default defineChart, NVD3Extra>({ + metadata: { + name: t('Bubble Chart (legacy)'), + description: t( + 'Visualizes a metric across three dimensions of data in a single chart (X axis, Y axis, and bubble size). Bubbles from the same group can be showcased using bubble color.', + ), + category: t('Correlation'), + credits: ['http://nvd3.org'], + label: ChartLabel.Deprecated, + tags: [ + t('Multi-Dimensions'), + t('Comparison'), + t('Legacy'), + t('Scatter'), + t('Time'), + t('Trend'), + t('nvd3'), + ], + thumbnail, + thumbnailDark, + exampleGallery: [{ url: example, urlDark: exampleDark }], + useLegacyApi: true, + }, + arguments: {}, + suppressQuerySection: true, + prependSections: [ { label: t('Query'), expanded: true, @@ -122,7 +162,7 @@ const config: ControlPanelConfig = { ], }, ], - controlOverrides: { + additionalControlOverrides: { color_scheme: { renderTrigger: false, }, @@ -135,6 +175,6 @@ const config: ControlPanelConfig = { y: getStandardizedControls().shiftMetric(), size: getStandardizedControls().shiftMetric(), }), -}; - -export default config; + transform: chartProps => transformPropsJs(chartProps), + render: props => , +}); diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/index.ts b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/index.ts deleted file mode 100644 index a6689705450..00000000000 --- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/index.ts +++ /dev/null @@ -1,51 +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 { t } from '@apache-superset/core/translation'; -import { ChartMetadata, ChartPlugin } from '@superset-ui/core'; -import transformProps from '../transformProps'; -import example from './images/example.jpg'; -import exampleDark from './images/example-dark.jpg'; -import thumbnail from './images/thumbnail.png'; -import thumbnailDark from './images/thumbnail-dark.png'; -import controlPanel from './controlPanel'; - -const metadata = new ChartMetadata({ - category: t('KPI'), - credits: ['http://nvd3.org'], - description: t( - 'Showcases the progress of a single metric against a given target. The higher the fill, the closer the metric is to the target.', - ), - exampleGallery: [{ url: example, urlDark: exampleDark }], - name: t('Bullet Chart'), - tags: [t('Business'), t('Legacy'), t('Report'), t('nvd3')], - thumbnail, - thumbnailDark, - useLegacyApi: true, -}); - -export default class BulletChartPlugin extends ChartPlugin { - constructor() { - super({ - loadChart: () => import('../ReactNVD3'), - metadata, - transformProps, - controlPanel, - }); - } -} diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/controlPanel.ts b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/index.tsx similarity index 67% rename from superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/controlPanel.ts rename to superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/index.tsx index 0ef99b890aa..0e8d66dab11 100644 --- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/controlPanel.ts +++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/index.tsx @@ -17,10 +17,37 @@ * under the License. */ import { t } from '@apache-superset/core/translation'; -import { ControlPanelConfig } from '@superset-ui/chart-controls'; +import { defineChart } from '@superset-ui/glyph-core'; +import example from './images/example.jpg'; +import exampleDark from './images/example-dark.jpg'; +import thumbnail from './images/thumbnail.png'; +import thumbnailDark from './images/thumbnail-dark.png'; -const config: ControlPanelConfig = { - controlPanelSections: [ +// eslint-disable-next-line @typescript-eslint/no-var-requires +const transformPropsJs = require('../transformProps').default; +// eslint-disable-next-line @typescript-eslint/no-var-requires +const ReactNVD3 = require('../ReactNVD3').default; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type NVD3Extra = Record; + +export default defineChart, NVD3Extra>({ + metadata: { + name: t('Bullet Chart'), + description: t( + 'Showcases the progress of a single metric against a given target. The higher the fill, the closer the metric is to the target.', + ), + category: t('KPI'), + credits: ['http://nvd3.org'], + tags: [t('Business'), t('Legacy'), t('Report'), t('nvd3')], + thumbnail, + thumbnailDark, + exampleGallery: [{ url: example, urlDark: exampleDark }], + useLegacyApi: true, + }, + arguments: {}, + suppressQuerySection: true, + prependSections: [ { label: t('Query'), expanded: true, @@ -93,6 +120,6 @@ const config: ControlPanelConfig = { ], }, ], -}; - -export default config; + transform: chartProps => transformPropsJs(chartProps), + render: props => , +}); diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/index.ts b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/index.ts deleted file mode 100644 index 28229f649b9..00000000000 --- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/index.ts +++ /dev/null @@ -1,62 +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 { t } from '@apache-superset/core/translation'; -import { ChartMetadata, ChartPlugin, ChartLabel } from '@superset-ui/core'; -import transformProps from '../transformProps'; -import thumbnail from './images/thumbnail.png'; -import thumbnailDark from './images/thumbnail-dark.png'; -import example from './images/example.jpg'; -import exampleDark from './images/example-dark.jpg'; -import controlPanel from './controlPanel'; - -const metadata = new ChartMetadata({ - category: t('Evolution'), - credits: ['http://nvd3.org'], - description: t( - 'Visualizes many different time-series objects in a single chart. This chart is being deprecated and we recommend using the Time-series Chart instead.', - ), - exampleGallery: [{ url: example, urlDark: exampleDark }], - label: ChartLabel.Deprecated, - name: t('Time-series Percent Change'), - tags: [ - t('Legacy'), - t('Time'), - t('nvd3'), - t('Advanced-Analytics'), - t('Comparison'), - t('Line'), - t('Percentages'), - t('Predictive'), - t('Trend'), - ], - thumbnail, - thumbnailDark, - useLegacyApi: true, -}); - -export default class CompareChartPlugin extends ChartPlugin { - constructor() { - super({ - loadChart: () => import('../ReactNVD3'), - metadata, - transformProps, - controlPanel, - }); - } -} diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/controlPanel.ts b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/index.tsx similarity index 53% rename from superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/controlPanel.ts rename to superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/index.tsx index 5a8f8bfb1a1..50e076a02aa 100644 --- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/controlPanel.ts +++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/index.tsx @@ -17,11 +17,9 @@ * under the License. */ import { t } from '@apache-superset/core/translation'; -import { - ControlPanelConfig, - getStandardizedControls, - sections, -} from '@superset-ui/chart-controls'; +import { ChartLabel } from '@superset-ui/core'; +import { getStandardizedControls, sections } from '@superset-ui/chart-controls'; +import { defineChart } from '@superset-ui/glyph-core'; import { xAxisLabel, yAxisLabel, @@ -35,9 +33,47 @@ import { leftMargin, timeSeriesSection, } from '../NVD3Controls'; +import thumbnail from './images/thumbnail.png'; +import thumbnailDark from './images/thumbnail-dark.png'; +import example from './images/example.jpg'; +import exampleDark from './images/example-dark.jpg'; -const config: ControlPanelConfig = { - controlPanelSections: [ +// eslint-disable-next-line @typescript-eslint/no-var-requires +const transformPropsJs = require('../transformProps').default; +// eslint-disable-next-line @typescript-eslint/no-var-requires +const ReactNVD3 = require('../ReactNVD3').default; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type NVD3Extra = Record; + +export default defineChart, NVD3Extra>({ + metadata: { + name: t('Time-series Percent Change'), + description: t( + 'Visualizes many different time-series objects in a single chart. This chart is being deprecated and we recommend using the Time-series Chart instead.', + ), + category: t('Evolution'), + credits: ['http://nvd3.org'], + label: ChartLabel.Deprecated, + tags: [ + t('Legacy'), + t('Time'), + t('nvd3'), + t('Advanced-Analytics'), + t('Comparison'), + t('Line'), + t('Percentages'), + t('Predictive'), + t('Trend'), + ], + thumbnail, + thumbnailDark, + exampleGallery: [{ url: example, urlDark: exampleDark }], + useLegacyApi: true, + }, + arguments: {}, + suppressQuerySection: true, + prependSections: [ sections.legacyTimeseriesTime, timeSeriesSection[0], { @@ -71,6 +107,6 @@ const config: ControlPanelConfig = { groupby: getStandardizedControls().popAllColumns(), metrics: getStandardizedControls().popAllMetrics(), }), -}; - -export default config; + transform: chartProps => transformPropsJs(chartProps), + render: props => , +});