This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch feat/glyph-single-file
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/feat/glyph-single-file by this
push:
new b2c58a0856f feat(glyph): consolidate nvd3 Bubble/Bullet/Compare to
defineChart()
b2c58a0856f is described below
commit b2c58a0856f3936a4af99e4aa44e0914aa31c14b
Author: Evan Rusackas <[email protected]>
AuthorDate: Thu May 14 17:03:16 2026 -0700
feat(glyph): consolidate nvd3 Bubble/Bullet/Compare to defineChart()
Migrate the remaining 3 nvd3 charts to single-file glyph pattern,
matching TimePivot which already uses defineChart. Each plugin now
has a single index.tsx replacing the prior multi-file
{controlPanel.ts, index.ts} layout. All charts continue to share
../transformProps and ../ReactNVD3 via require().
Also adds `label?: ChartLabel` pass-through to the defineChart
metadata interface so the Deprecated badge survives the consolidation
(Bubble + Compare use it).
Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
---
.../superset-ui-glyph-core/src/defineChart.tsx | 3 ++
.../legacy-preset-chart-nvd3/src/Bubble/index.ts | 63 ----------------------
.../src/Bubble/{controlPanel.ts => index.tsx} | 54 ++++++++++++++++---
.../legacy-preset-chart-nvd3/src/Bullet/index.ts | 51 ------------------
.../src/Bullet/{controlPanel.ts => index.tsx} | 39 +++++++++++---
.../legacy-preset-chart-nvd3/src/Compare/index.ts | 62 ---------------------
.../src/Compare/{controlPanel.ts => index.tsx} | 56 +++++++++++++++----
7 files changed, 129 insertions(+), 199 deletions(-)
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<string, any>;
+
+/**
+ * @deprecated in version 4.0.
+ */
+export default defineChart<Record<string, never>, 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 => <ReactNVD3 {...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<string, any>;
+
+export default defineChart<Record<string, never>, 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 => <ReactNVD3 {...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';
+
+// 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;
-const config: ControlPanelConfig = {
- controlPanelSections: [
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type NVD3Extra = Record<string, any>;
+
+export default defineChart<Record<string, never>, 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 => <ReactNVD3 {...props} />,
+});
