feat: custom d3 number locale

superset-frontend/package.json

@@ -115,6 +115,7 @@
  "@superset-ui/plugin-chart-word-cloud": "file:./plugins/plugin-chart-word-cloud",
  "@superset-ui/preset-chart-xy": "file:./plugins/preset-chart-xy",
  "@superset-ui/switchboard": "file:./packages/superset-ui-switchboard",
+ "@types/d3-format": "^3.0.1",
  "@visx/axis": "^3.0.1",
  "@visx/grid": "^3.0.1",
  "@visx/responsive": "^3.0.0",

superset-frontend/packages/superset-ui-chart-controls/src/utils/D3Formatting.ts

@@ -16,7 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, smartDateFormatter, NumberFormats } from '@superset-ui/core';
+import {
+ t,
+ smartDateFormatter,
+ NumberFormats,
+ getNumberFormatter,
+} from '@superset-ui/core';
 
 // D3 specific formatting config
 export const D3_FORMAT_DOCS = t(
@@ -30,22 +35,26 @@ export const D3_NUMBER_FORMAT_DESCRIPTION_PERCENTAGE_TEXT = t(
  'Only applies when "Label Type" is not set to a percentage.',
 );
 
+const d3Formatted: [string, string][] = [
+ ',d',
+ '.1s',
+ '.3s',
+ ',.1%',
+ '.2%',
+ '.3%',
+ '.4r',
+ ',.1f',
+ ',.2f',
+ ',.3f',
+ '+,',
+ '$,.2f',
+].map(fmt => [fmt, `${fmt} (${getNumberFormatter(fmt).preview()})`]);
+
 // input choices & options
 export const D3_FORMAT_OPTIONS: [string, string][] = [
  [NumberFormats.SMART_NUMBER, t('Adaptive formatting')],
  ['~g', t('Original value')],
- [',d', ',d (12345.432 => 12,345)'],
- ['.1s', '.1s (12345.432 => 10k)'],
- ['.3s', '.3s (12345.432 => 12.3k)'],
- [',.1%', ',.1% (12345.432 => 1,234,543.2%)'],
- ['.2%', '.2% (12345.432 => 1234543.20%)'],
- ['.3%', '.3% (12345.432 => 1234543.200%)'],
- ['.4r', '.4r (12345.432 => 12350)'],
- [',.1f', ',.1f (12345.432 => 12,345.4)'],
- [',.2f', ',.2f (12345.432 => 12,345.43)'],
- [',.3f', ',.3f (12345.432 => 12,345.432)'],
- ['+,', '+, (12345.432 => +12,345.432)'],
- ['$,.2f', '$,.2f (12345.432 => $12,345.43)'],
+ ...d3Formatted,
  ['DURATION', t('Duration in ms (66000 => 1m 6s)')],
  ['DURATION_SUB', t('Duration in ms (1.40008 => 1ms 400µs 80ns)')],
 ];

superset-frontend/packages/superset-ui-core/src/number-format/D3FormatConfig.ts

@@ -0,0 +1,26 @@
+/**
+ * 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 { FormatLocaleDefinition } from 'd3-format';
+
+export const DEFAULT_D3_FORMAT: FormatLocaleDefinition = {
+ decimal: '.',
+ thousands: ',',
+ grouping: [3],
+ currency: ['$', ''],
+};

superset-frontend/packages/superset-ui-core/src/number-format/NumberFormatterRegistry.ts

@@ -16,7 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { FormatLocaleDefinition } from 'd3-format';
 import { RegistryWithDefaultKey, OverwritePolicy } from '../models';
+import { DEFAULT_D3_FORMAT } from './D3FormatConfig';
 import createD3NumberFormatter from './factories/createD3NumberFormatter';
 import createSmartNumberFormatter from './factories/createSmartNumberFormatter';
 import NumberFormats from './NumberFormats';
@@ -26,6 +28,8 @@ export default class NumberFormatterRegistry extends RegistryWithDefaultKey<
  NumberFormatter,
  NumberFormatter
 > {
+ d3Format: FormatLocaleDefinition;
+
  constructor() {
  super({
  name: 'NumberFormatter',
@@ -41,6 +45,12 @@ export default class NumberFormatterRegistry extends RegistryWithDefaultKey<
  createSmartNumberFormatter({ signed: true }),
  );
  this.setDefaultKey(NumberFormats.SMART_NUMBER);
+ this.d3Format = DEFAULT_D3_FORMAT;
+ }
+
+ setD3Format(d3Format: Partial<FormatLocaleDefinition>) {
+ this.d3Format = { ...DEFAULT_D3_FORMAT, ...d3Format };
+ return this;
  }
 
  get(formatterId?: string) {
@@ -59,6 +69,7 @@ export default class NumberFormatterRegistry extends RegistryWithDefaultKey<
  // Create new formatter if does not exist
  const formatter = createD3NumberFormatter({
  formatString: targetFormat,
+ locale: this.d3Format,
  });
  this.registerValue(targetFormat, formatter);
 

superset-frontend/packages/superset-ui-core/src/number-format/NumberFormatterRegistrySingleton.ts

@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { FormatLocaleDefinition } from 'd3-format';
 import { makeSingleton } from '../utils';
 import NumberFormatterRegistry from './NumberFormatterRegistry';
 
@@ -27,6 +28,10 @@ export function getNumberFormatter(format?: string) {
  return getInstance().get(format);
 }
 
+export function setD3Format(d3Format: Partial<FormatLocaleDefinition>) {
+ getInstance().setD3Format(d3Format);
+}
+
 export function formatNumber(
  format: string | undefined,
  value: number | null | undefined,

superset-frontend/packages/superset-ui-core/src/number-format/index.ts

@@ -19,10 +19,12 @@
 
 export { default as NumberFormats } from './NumberFormats';
 export { default as NumberFormatter, PREVIEW_VALUE } from './NumberFormatter';
+export { DEFAULT_D3_FORMAT } from './D3FormatConfig';
 
 export {
  default as getNumberFormatterRegistry,
  formatNumber,
+ setD3Format,
  getNumberFormatter,
 } from './NumberFormatterRegistrySingleton';
 

superset-frontend/packages/superset-ui-core/test/number-format/NumberFormatterRegistrySingleton.test.ts

@@ -20,6 +20,7 @@
 import {
  NumberFormatterRegistry,
  getNumberFormatterRegistry,
+ setD3Format,
  getNumberFormatter,
  formatNumber,
 } from '@superset-ui/core';
@@ -55,4 +56,23 @@ describe('NumberFormatterRegistrySingleton', () => {
  expect(formatNumber(undefined, 1000)).toEqual('1k');
  });
  });
+ describe('setD3Format()', () => {
+ it('sets a specific FormatLocaleDefinition', () => {
+ setD3Format({
+ decimal: ';',
+ thousands: '-',
+ currency: ['€', ''],
+ grouping: [2],
+ });
+ const formatter = getNumberFormatter('$,.2f');
+ expect(formatter.format(12345.67)).toEqual('€1-23-45;67');
+ });
+ it('falls back to default value for unspecified locale format parameters', () => {
+ setD3Format({
+ currency: ['€', ''],
+ });
+ const formatter = getNumberFormatter('$,.1f');
+ expect(formatter.format(12345.67)).toEqual('€12,345.7');
+ });
+ });
 });

superset-frontend/src/constants.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t } from '@superset-ui/core';
+import { t, DEFAULT_D3_FORMAT } from '@superset-ui/core';
 
 import { BootstrapData, CommonBootstrapData } from './types/bootstrapTypes';
 
@@ -184,6 +184,7 @@ export const DEFAULT_COMMON_BOOTSTRAP_DATA: CommonBootstrapData = {
  color: '',
  },
  },
+ d3_format: DEFAULT_D3_FORMAT,
 };
 
 export const DEFAULT_BOOTSTRAP_DATA: BootstrapData = {

superset-frontend/src/preamble.ts

@@ -57,7 +57,7 @@ setupColors(
 );
 
 // Setup number formatters
-setupFormatters();
+setupFormatters(bootstrapData.common.d3_format);
 
 setupDashboardComponents();
 

superset-frontend/src/setup/setupFormatters.ts

@@ -25,9 +25,13 @@ import {
  smartDateFormatter,
  smartDateVerboseFormatter,
 } from '@superset-ui/core';
+import { FormatLocaleDefinition } from 'd3-format';
 
-export default function setupFormatters() {
+export default function setupFormatters(
+ d3Format: Partial<FormatLocaleDefinition>,
+) {
  getNumberFormatterRegistry()
+ .setD3Format(d3Format)
  // Add shims for format strings that are deprecated or common typos.
  // Temporary solution until performing a db migration to fix this.
  .registerValue(',0', getNumberFormatter(',.4~f'))

superset-frontend/src/types/bootstrapTypes.ts

@@ -6,6 +6,7 @@ import {
  Locale,
  SequentialSchemeConfig,
 } from '@superset-ui/core';
+import { FormatLocaleDefinition } from 'd3-format';
 import { isPlainObject } from 'lodash';
 import { Languages } from 'src/features/home/LanguagePicker';
 import { FlashMessage } from '../components/FlashProvider';
@@ -150,6 +151,7 @@ export interface CommonBootstrapData {
  extra_sequential_color_schemes: SequentialSchemeConfig[];
  theme_overrides: JsonObject;
  menu_data: MenuData;
+ d3_format: Partial<FormatLocaleDefinition>;
 }
 
 export interface BootstrapData {

superset/config.py

@@ -378,6 +378,25 @@ def _try_json_readsha(filepath: str, length: int) -> Optional[str]:
 # incomplete and not well maintained.
 LANGUAGES = {}
 
+
+# Override the default d3 locale format
+# Default values are equivalent to
+# D3_FORMAT = {
+# "decimal": ".", # - decimal place string (e.g., ".").
+# "thousands": ",", # - group separator string (e.g., ",").
+# "grouping": [3], # - array of group sizes (e.g., [3]), cycled as needed.
+# "currency": ["$", ""] # - currency prefix/suffix strings (e.g., ["$", ""])
+# }
+# https://github.com/d3/d3-format/blob/main/README.md#formatLocale
+class D3Format(TypedDict, total=False):
+ decimal: str
+ thousands: str
+ grouping: List[int]
+ currency: List[str]
+
+
+D3_FORMAT: D3Format = {}
+
 # ---------------------------------------------------
 # Feature flags
 # ---------------------------------------------------

superset/views/base.py

@@ -428,6 +428,7 @@ def cached_common_bootstrap_data(user: User) -> Dict[str, Any]:
  "conf": frontend_config,
  "locale": locale,
  "language_pack": get_language_pack(locale),
+ "d3_format": conf.get("D3_FORMAT"),
  "feature_flags": get_feature_flags(),
  "extra_sequential_color_schemes": conf["EXTRA_SEQUENTIAL_COLOR_SCHEMES"],
  "extra_categorical_color_schemes": conf["EXTRA_CATEGORICAL_COLOR_SCHEMES"],