refactor(types): consolidate shared table types and fix Funnel enum typo (#37768)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

superset-frontend/packages/superset-ui-chart-controls/src/types.ts

@@ -22,16 +22,21 @@ import { ReactElement, ReactNode, ReactText, ComponentType } from 'react';
 import type {
   AdhocColumn,
   Column,
+  CurrencyFormatter,
   Currency,
   DatasourceType,
+  DataRecordValue,
   JsonObject,
   JsonValue,
   Metric,
+  NumberFormatter,
   QueryFormColumn,
   QueryFormData,
   QueryFormMetric,
   QueryResponse,
+  TimeFormatter,
 } from '@superset-ui/core';
+import { GenericDataType } from '@apache-superset/core/api/core';
 import { sharedControls, sharedControlComponents } from './shared-controls';
 
 export type { Metric } from '@superset-ui/core';
@@ -613,3 +618,73 @@ export enum ColorSchemeEnum {
   Green = 'Green',
   Red = 'Red',
 }
+
+/** ----------------------------------------------
+ * Shared Table Chart Types
+ * Used by plugin-chart-table and plugin-chart-ag-grid-table
+ * --------------------------------------------- */
+
+export type CustomFormatter = (value: DataRecordValue) => string;
+
+export type BasicColorFormatterType = {
+  backgroundColor: string;
+  arrowColor: string;
+  mainArrow: string;
+};
+
+export type SortByItem = {
+  id: string;
+  key: string;
+  desc?: boolean;
+};
+
+export type SearchOption = {
+  value: string;
+  label: string;
+};
+
+export interface ServerPaginationData {
+  pageSize?: number;
+  currentPage?: number;
+  sortBy?: SortByItem[];
+  searchText?: string;
+  searchColumn?: string;
+}
+
+export type TableColumnConfig = {
+  d3NumberFormat?: string;
+  d3SmallNumberFormat?: string;
+  d3TimeFormat?: string;
+  columnWidth?: number;
+  horizontalAlign?: 'left' | 'right' | 'center';
+  showCellBars?: boolean;
+  alignPositiveNegative?: boolean;
+  colorPositiveNegative?: boolean;
+  truncateLongCells?: boolean;
+  currencyFormat?: Currency;
+  visible?: boolean;
+  customColumnName?: string;
+  displayTypeIcon?: boolean;
+};
+
+export interface DataColumnMeta {
+  // `key` is what is called `label` in the input props
+  key: string;
+  // `label` is verbose column name used for rendering
+  label: string;
+  // `originalLabel` preserves the original label when time comparison transforms the labels
+  originalLabel?: string;
+  dataType: GenericDataType;
+  formatter?:
+    | TimeFormatter
+    | NumberFormatter
+    | CustomFormatter
+    | CurrencyFormatter;
+  isMetric?: boolean;
+  isPercentMetric?: boolean;
+  isNumeric?: boolean;
+  config?: TableColumnConfig;
+  isChildColumn?: boolean;
+  description?: string;
+  currencyCodeColumn?: string;
+}

superset-frontend/plugins/plugin-chart-ag-grid-table/src/types.ts

@@ -16,7 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ColorFormatters } from '@superset-ui/chart-controls';
+import type {
+  BasicColorFormatterType,
+  ColorFormatters,
+  CustomFormatter,
+  DataColumnMeta,
+  TableColumnConfig,
+} from '@superset-ui/chart-controls';
 import {
   NumberFormatter,
   TimeFormatter,
@@ -24,19 +30,16 @@ import {
   QueryFormMetric,
   ChartProps,
   DataRecord,
-  DataRecordValue,
   DataRecordFilters,
   QueryMode,
   ChartDataResponseResult,
   QueryFormData,
   SetDataMaskHook,
   CurrencyFormatter,
-  Currency,
   JsonObject,
   Metric,
   AgGridChartState,
 } from '@superset-ui/core';
-import { GenericDataType } from '@apache-superset/core/api/core';
 import {
   ColDef,
   Column,
@@ -44,43 +47,16 @@ import {
   CustomCellRendererProps,
 } from '@superset-ui/core/components/ThemedAgGridReact';
 
-export type CustomFormatter = (value: DataRecordValue) => string;
-
-export type TableColumnConfig = {
-  d3NumberFormat?: string;
-  d3SmallNumberFormat?: string;
-  d3TimeFormat?: string;
-  columnWidth?: number;
-  horizontalAlign?: 'left' | 'right' | 'center';
-  showCellBars?: boolean;
-  alignPositiveNegative?: boolean;
-  colorPositiveNegative?: boolean;
-  truncateLongCells?: boolean;
-  currencyFormat?: Currency;
-  visible?: boolean;
-  customColumnName?: string;
-  displayTypeIcon?: boolean;
+// Re-export shared types used by internal plugin files that import from './types'
+// Types used locally in this file - re-export from local binding
+export type {
+  BasicColorFormatterType,
+  CustomFormatter,
+  DataColumnMeta,
+  TableColumnConfig,
 };
-
-export interface DataColumnMeta {
-  // `key` is what is called `label` in the input props
-  key: string;
-  // `label` is verbose column name used for rendering
-  label: string;
-  // `originalLabel` preserves the original label when time comparison transforms the labels
-  originalLabel?: string;
-  dataType: GenericDataType;
-  formatter?:
-    | TimeFormatter
-    | NumberFormatter
-    | CustomFormatter
-    | CurrencyFormatter;
-  isMetric?: boolean;
-  isPercentMetric?: boolean;
-  isNumeric?: boolean;
-  config?: TableColumnConfig;
-  isChildColumn?: boolean;
-}
+// Types only re-exported, not used locally - direct re-export
+export type { SearchOption, SortByItem } from '@superset-ui/chart-controls';
 
 export interface TableChartData {
   records: DataRecord[];
@@ -116,31 +92,6 @@ export interface TableChartProps extends ChartProps {
   queriesData: ChartDataResponseResult[];
 }
 
-export type BasicColorFormatterType = {
-  backgroundColor: string;
-  arrowColor: string;
-  mainArrow: string;
-};
-
-export type SortByItem = {
-  id: string;
-  key: string;
-  desc?: boolean;
-};
-
-export type SearchOption = {
-  value: string;
-  label: string;
-};
-
-export interface ServerPaginationData {
-  pageSize?: number;
-  currentPage?: number;
-  sortBy?: SortByItem[];
-  searchText?: string;
-  searchColumn?: string;
-}
-
 export interface AgGridTableChartTransformedProps<
   D extends DataRecord = DataRecord,
 > {

superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx

@@ -28,7 +28,7 @@ import {
 } from '@superset-ui/chart-controls';
 import {
   DEFAULT_FORM_DATA,
-  EchartsFunnelLabelTypeType,
+  EchartsFunnelLabelType,
   PercentCalcType,
 } from './types';
 import { legendSection } from '../controls';
@@ -107,20 +107,20 @@ const config: ControlPanelConfig = {
               default: labelType,
               renderTrigger: true,
               choices: [
-                [EchartsFunnelLabelTypeType.Key, t('Category Name')],
-                [EchartsFunnelLabelTypeType.Value, t('Value')],
-                [EchartsFunnelLabelTypeType.Percent, t('Percentage')],
-                [EchartsFunnelLabelTypeType.KeyValue, t('Category and Value')],
+                [EchartsFunnelLabelType.Key, t('Category Name')],
+                [EchartsFunnelLabelType.Value, t('Value')],
+                [EchartsFunnelLabelType.Percent, t('Percentage')],
+                [EchartsFunnelLabelType.KeyValue, t('Category and Value')],
                 [
-                  EchartsFunnelLabelTypeType.KeyPercent,
+                  EchartsFunnelLabelType.KeyPercent,
                   t('Category and Percentage'),
                 ],
                 [
-                  EchartsFunnelLabelTypeType.KeyValuePercent,
+                  EchartsFunnelLabelType.KeyValuePercent,
                   t('Category, Value and Percentage'),
                 ],
                 [
-                  EchartsFunnelLabelTypeType.ValuePercent,
+                  EchartsFunnelLabelType.ValuePercent,
                   t('Value and Percentage'),
                 ],
               ],
@@ -137,16 +137,16 @@ const config: ControlPanelConfig = {
               default: defaultTooltipLabel,
               renderTrigger: true,
               choices: [
-                [EchartsFunnelLabelTypeType.Key, t('Category Name')],
-                [EchartsFunnelLabelTypeType.Value, t('Value')],
-                [EchartsFunnelLabelTypeType.Percent, t('Percentage')],
-                [EchartsFunnelLabelTypeType.KeyValue, t('Category and Value')],
+                [EchartsFunnelLabelType.Key, t('Category Name')],
+                [EchartsFunnelLabelType.Value, t('Value')],
+                [EchartsFunnelLabelType.Percent, t('Percentage')],
+                [EchartsFunnelLabelType.KeyValue, t('Category and Value')],
                 [
-                  EchartsFunnelLabelTypeType.KeyPercent,
+                  EchartsFunnelLabelType.KeyPercent,
                   t('Category and Percentage'),
                 ],
                 [
-                  EchartsFunnelLabelTypeType.KeyValuePercent,
+                  EchartsFunnelLabelType.KeyValuePercent,
                   t('Category, Value and Percentage'),
                 ],
               ],

superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts

@@ -35,7 +35,7 @@ import {
   DEFAULT_FORM_DATA as DEFAULT_FUNNEL_FORM_DATA,
   EchartsFunnelChartProps,
   EchartsFunnelFormData,
-  EchartsFunnelLabelTypeType,
+  EchartsFunnelLabelType,
   FunnelChartTransformedProps,
   PercentCalcType,
 } from './types';
@@ -215,19 +215,19 @@ export default function transformProps(
       percentCalculationType,
     });
     switch (labelType) {
-      case EchartsFunnelLabelTypeType.Key:
+      case EchartsFunnelLabelType.Key:
         return name;
-      case EchartsFunnelLabelTypeType.Value:
+      case EchartsFunnelLabelType.Value:
         return formattedValue;
-      case EchartsFunnelLabelTypeType.Percent:
+      case EchartsFunnelLabelType.Percent:
         return formattedPercent;
-      case EchartsFunnelLabelTypeType.KeyValue:
+      case EchartsFunnelLabelType.KeyValue:
         return `${name}: ${formattedValue}`;
-      case EchartsFunnelLabelTypeType.KeyValuePercent:
+      case EchartsFunnelLabelType.KeyValuePercent:
         return `${name}: ${formattedValue} (${formattedPercent})`;
-      case EchartsFunnelLabelTypeType.KeyPercent:
+      case EchartsFunnelLabelType.KeyPercent:
         return `${name}: ${formattedPercent}`;
-      case EchartsFunnelLabelTypeType.ValuePercent:
+      case EchartsFunnelLabelType.ValuePercent:
         return `${formattedValue} (${formattedPercent})`;
       default:
         return name;
@@ -283,7 +283,7 @@ export default function transformProps(
           percentCalculationType,
         });
         const row = [];
-        const enumName = EchartsFunnelLabelTypeType[tooltipLabelType];
+        const enumName = EchartsFunnelLabelType[tooltipLabelType];
         const title = enumName.includes('Key') ? name : undefined;
         if (enumName.includes('Value') || enumName.includes('Percent')) {
           row.push(metricLabel);

superset-frontend/plugins/plugin-chart-echarts/src/Funnel/types.ts

@@ -33,8 +33,8 @@ export type EchartsFunnelFormData = QueryFormData &
     colorScheme?: string;
     groupby: QueryFormData[];
     labelLine: boolean;
-    labelType: EchartsFunnelLabelTypeType;
-    tooltipLabelType: EchartsFunnelLabelTypeType;
+    labelType: EchartsFunnelLabelType;
+    tooltipLabelType: EchartsFunnelLabelType;
     metric?: string;
     showLabels: boolean;
     showTooltipLabels: boolean;
@@ -45,7 +45,7 @@ export type EchartsFunnelFormData = QueryFormData &
     percentCalculationType: PercentCalcType;
   };
 
-export enum EchartsFunnelLabelTypeType {
+export enum EchartsFunnelLabelType {
   Key,
   Value,
   Percent,
@@ -64,8 +64,8 @@ export const DEFAULT_FORM_DATA: EchartsFunnelFormData = {
   ...DEFAULT_LEGEND_FORM_DATA,
   groupby: [],
   labelLine: false,
-  labelType: EchartsFunnelLabelTypeType.Key,
-  defaultTooltipLabel: EchartsFunnelLabelTypeType.KeyValuePercent,
+  labelType: EchartsFunnelLabelType.Key,
+  defaultTooltipLabel: EchartsFunnelLabelType.KeyValuePercent,
   legendOrientation: LegendOrientation.Top,
   legendType: LegendType.Scroll,
   numberFormat: 'SMART_NUMBER',

superset-frontend/plugins/plugin-chart-table/src/types.ts

@@ -17,64 +17,35 @@
  * under the License.
  */
 import {
-  NumberFormatter,
-  TimeFormatter,
   TimeGranularity,
   QueryFormMetric,
   ChartProps,
   DataRecord,
-  DataRecordValue,
   DataRecordFilters,
   QueryMode,
   ChartDataResponseResult,
   QueryFormData,
   SetDataMaskHook,
   ContextMenuFilters,
-  CurrencyFormatter,
-  Currency,
 } from '@superset-ui/core';
-import { GenericDataType } from '@apache-superset/core/api/core';
-import { ColorFormatters } from '@superset-ui/chart-controls';
+import type {
+  BasicColorFormatterType,
+  ColorFormatters,
+  DataColumnMeta,
+  ServerPaginationData,
+  TableColumnConfig,
+} from '@superset-ui/chart-controls';
 
-export type CustomFormatter = (value: DataRecordValue) => string;
-
-export type TableColumnConfig = {
-  d3NumberFormat?: string;
-  d3SmallNumberFormat?: string;
-  d3TimeFormat?: string;
-  columnWidth?: number;
-  horizontalAlign?: 'left' | 'right' | 'center';
-  showCellBars?: boolean;
-  alignPositiveNegative?: boolean;
-  colorPositiveNegative?: boolean;
-  truncateLongCells?: boolean;
-  currencyFormat?: Currency;
-  visible?: boolean;
-  customColumnName?: string;
-  displayTypeIcon?: boolean;
+// Re-export shared types used by internal plugin files that import from './types'
+// Types used locally in this file - re-export from local binding
+export type {
+  BasicColorFormatterType,
+  DataColumnMeta,
+  ServerPaginationData,
+  TableColumnConfig,
 };
-
-export interface DataColumnMeta {
-  // `key` is what is called `label` in the input props
-  key: string;
-  // `label` is verbose column name used for rendering
-  label: string;
-  // `originalLabel` preserves the original label when time comparison transforms the labels
-  originalLabel?: string;
-  dataType: GenericDataType;
-  formatter?:
-    | TimeFormatter
-    | NumberFormatter
-    | CustomFormatter
-    | CurrencyFormatter;
-  isMetric?: boolean;
-  isPercentMetric?: boolean;
-  isNumeric?: boolean;
-  config?: TableColumnConfig;
-  isChildColumn?: boolean;
-  description?: string;
-  currencyCodeColumn?: string;
-}
+// Types only re-exported, not used locally - direct re-export
+export type { SearchOption, SortByItem } from '@superset-ui/chart-controls';
 
 export interface TableChartData {
   records: DataRecord[];
@@ -110,31 +81,6 @@ export interface TableChartProps extends ChartProps {
   queriesData: ChartDataResponseResult[];
 }
 
-export type BasicColorFormatterType = {
-  backgroundColor: string;
-  arrowColor: string;
-  mainArrow: string;
-};
-
-export type SortByItem = {
-  id: string;
-  key: string;
-  desc?: boolean;
-};
-
-export type SearchOption = {
-  value: string;
-  label: string;
-};
-
-export interface ServerPaginationData {
-  pageSize?: number;
-  currentPage?: number;
-  sortBy?: SortByItem[];
-  searchText?: string;
-  searchColumn?: string;
-}
-
 export interface TableChartTransformedProps<D extends DataRecord = DataRecord> {
   timeGrain?: TimeGranularity;
   height: number;