feat: Add currencies controls in control panels (#24718)

apache · Aug 2, 2023 · f7e76d0 · f7e76d0
1 parent 1a9c559
commit f7e76d0
Show file tree

Hide file tree

Showing 63 changed files with 697 additions and 306 deletions.
diff --git a/...rset-frontend/packages/superset-ui-chart-controls/src/components/ControlForm/controls.tsx b/...rset-frontend/packages/superset-ui-chart-controls/src/components/ControlForm/controls.tsx
diff --git a/...chart-controls/src/shared-controls/components/ColumnConfigControl/ColumnConfigPopover.tsx b/...chart-controls/src/shared-controls/components/ColumnConfigControl/ColumnConfigPopover.tsx
diff --git a/...set-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/index.tsx b/...set-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/index.tsx
@@ -17,16 +17,13 @@
  * under the License.
  */
 import RadioButtonControl from './RadioButtonControl';
-import ColumnConfigControl from './ColumnConfigControl';
 
 export * from './RadioButtonControl';
-export * from './ColumnConfigControl';
 
 /**
  * Shared chart controls. Can be referred via string shortcuts in chart control
  * configs.
  */
 export default {
   RadioButtonControl,
-  ColumnConfigControl,
 };
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/sharedControls.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/sharedControls.tsx
@@ -317,6 +317,12 @@ const y_axis_format: SharedControlConfig<'SelectControl', SelectDefaultOption> =
     },
   };
 
+const currency_format: SharedControlConfig<'CurrencyControl'> = {
+  type: 'CurrencyControl',
+  label: t('Currency format'),
+  renderTrigger: true,
+};
+
 const x_axis_time_format: SharedControlConfig<
   'SelectControl',
   SelectDefaultOption
@@ -406,4 +412,5 @@ export default {
   x_axis: dndXAxisControl,
   show_empty_columns,
   temporal_columns_lookup,
+  currency_format,
 };
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/types.ts b/superset-frontend/packages/superset-ui-chart-controls/src/types.ts
@@ -34,7 +34,6 @@ import type {
 import { sharedControls, sharedControlComponents } from './shared-controls';
 
 export type { Metric } from '@superset-ui/core';
-export type { ControlFormItemSpec } from './components/ControlForm';
 export type { ControlComponentProps } from './shared-controls/components/types';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -167,6 +166,12 @@ export type InternalControlType =
   | 'DndColumnSelect'
   | 'DndFilterSelect'
   | 'DndMetricSelect'
+  | 'CurrencyControl'
+  | 'InputNumber'
+  | 'Checkbox'
+  | 'Select'
+  | 'Slider'
+  | 'Input'
   | keyof SharedControlComponents; // expanded in `expandControlConfig`
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -495,3 +500,60 @@ export type SortSeriesData = {
   sort_series_type: SortSeriesType;
   sort_series_ascending: boolean;
 };
+
+export type ControlFormValueValidator<V> = (value: V) => string | false;
+
+export type ControlFormItemSpec<T extends ControlType = ControlType> = {
+  controlType: T;
+  label: ReactNode;
+  description: ReactNode;
+  placeholder?: string;
+  validators?: ControlFormValueValidator<any>[];
+  width?: number | string;
+  /**
+   * Time to delay change propagation.
+   */
+  debounceDelay?: number;
+} & (T extends 'Select'
+  ? {
+      options: any;
+      value?: string;
+      defaultValue?: string;
+      creatable?: boolean;
+      minWidth?: number | string;
+      validators?: ControlFormValueValidator<string>[];
+    }
+  : T extends 'RadioButtonControl'
+  ? {
+      options: [string, ReactNode][];
+      value?: string;
+      defaultValue?: string;
+    }
+  : T extends 'Checkbox'
+  ? {
+      value?: boolean;
+      defaultValue?: boolean;
+    }
+  : T extends 'InputNumber' | 'Slider'
+  ? {
+      min?: number;
+      max?: number;
+      step?: number;
+      value?: number;
+      defaultValue?: number;
+      validators?: ControlFormValueValidator<number>[];
+    }
+  : T extends 'Input'
+  ? {
+      controlType: 'Input';
+      value?: string;
+      defaultValue?: string;
+      validators?: ControlFormValueValidator<string>[];
+    }
+  : T extends 'CurrencyControl'
+  ? {
+      controlType: 'CurrencyControl';
+      value?: Currency;
+      defaultValue?: Currency;
+    }
+  : {});
diff --git a/superset-frontend/packages/superset-ui-core/src/currency-format/CurrencyFormatter.ts b/superset-frontend/packages/superset-ui-core/src/currency-format/CurrencyFormatter.ts
@@ -31,7 +31,7 @@ interface CurrencyFormatter {
   (value: number | null | undefined): string;
 }
 
-export const getCurrencySymbol = (currency: Currency) =>
+export const getCurrencySymbol = (currency: Partial<Currency>) =>
   new Intl.NumberFormat('en-US', {
     style: 'currency',
     currency: currency.symbol,

diff --git a/superset-frontend/packages/superset-ui-core/src/currency-format/utils.ts b/superset-frontend/packages/superset-ui-core/src/currency-format/utils.ts
@@ -28,20 +28,24 @@ import {
 
 export const buildCustomFormatters = (
   metrics: QueryFormMetric | QueryFormMetric[] | undefined,
-  currencyFormats: Record<string, Currency>,
-  columnFormats: Record<string, string>,
+  savedCurrencyFormats: Record<string, Currency>,
+  savedColumnFormats: Record<string, string>,
   d3Format: string | undefined,
+  currencyFormat: Currency | undefined,
 ) => {
   const metricsArray = ensureIsArray(metrics);
   return metricsArray.reduce((acc, metric) => {
     if (isSavedMetric(metric)) {
-      const actualD3Format = d3Format ?? columnFormats[metric];
-      return currencyFormats[metric]
+      const actualD3Format = d3Format ?? savedColumnFormats[metric];
+      const actualCurrencyFormat = currencyFormat?.symbol
+        ? currencyFormat
+        : savedCurrencyFormats[metric];
+      return actualCurrencyFormat
         ? {
             ...acc,
             [metric]: new CurrencyFormatter({
               d3Format: actualD3Format,
-              currency: currencyFormats[metric],
+              currency: actualCurrencyFormat,
             }),
           }
         : {
@@ -67,13 +71,29 @@ export const getCustomFormatter = (
 
 export const getValueFormatter = (
   metrics: QueryFormMetric | QueryFormMetric[] | undefined,
-  currencyFormats: Record<string, Currency>,
-  columnFormats: Record<string, string>,
+  savedCurrencyFormats: Record<string, Currency>,
+  savedColumnFormats: Record<string, string>,
   d3Format: string | undefined,
+  currencyFormat: Currency | undefined,
   key?: string,
-) =>
-  getCustomFormatter(
-    buildCustomFormatters(metrics, currencyFormats, columnFormats, d3Format),
+) => {
+  const customFormatter = getCustomFormatter(
+    buildCustomFormatters(
+      metrics,
+      savedCurrencyFormats,
+      savedColumnFormats,
+      d3Format,
+      currencyFormat,
+    ),
     metrics,
     key,
-  ) ?? getNumberFormatter(d3Format);
+  );
+
+  if (customFormatter) {
+    return customFormatter;
+  }
+  if (currencyFormat?.symbol) {
+    return new CurrencyFormatter({ currency: currencyFormat, d3Format });
+  }
+  return getNumberFormatter(d3Format);
+};