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 <noreply@anthropic.com>
2026-05-29 11:45:16 +00:00 · 2026-05-14 17:03:16 -07:00
parent 2e16b8266a
commit b2c58a0856
7 changed files with 129 additions and 199 deletions
--- 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
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/index.ts
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/index.ts
@@ -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,
-    });
-  }
-}
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/controlPanel.ts
@@ -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} />,
+});
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/index.ts
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/index.ts
@@ -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,
-    });
-  }
-}
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bullet/controlPanel.ts
@@ -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} />,
+});
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/index.ts
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/index.ts
@@ -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,
-    });
-  }
-}
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Compare/controlPanel.ts
@@ -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<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} />,
+});