superset/superset-frontend/packages/superset-ui-core/src/number-format
2021-11-30 08:29:57 +08:00
..
factories refactor(monorepo): move superset-ui to superset(stage 2) (#17552) 2021-11-30 08:29:57 +08:00
index.ts refactor(monorepo): move superset-ui to superset(stage 2) (#17552) 2021-11-30 08:29:57 +08:00
NumberFormats.ts refactor(monorepo): move superset-ui to superset(stage 2) (#17552) 2021-11-30 08:29:57 +08:00
NumberFormatter.ts refactor(monorepo): move superset-ui to superset(stage 2) (#17552) 2021-11-30 08:29:57 +08:00
NumberFormatterRegistry.ts refactor(monorepo): move superset-ui to superset(stage 2) (#17552) 2021-11-30 08:29:57 +08:00
NumberFormatterRegistrySingleton.ts refactor(monorepo): move superset-ui to superset(stage 2) (#17552) 2021-11-30 08:29:57 +08:00
README.md refactor(monorepo): move superset-ui to superset(stage 2) (#17552) 2021-11-30 08:29:57 +08:00
types.ts refactor(monorepo): move superset-ui to superset(stage 2) (#17552) 2021-11-30 08:29:57 +08:00

@superset-ui/core/number-format

Description

Example usage

Functions getNumberFormatter and formatNumber should be used instead of calling d3.format directly.

import { getNumberFormatter } from '@superset-ui/core';
const formatter = getNumberFormatter('.2f');
console.log(formatter(1000));

or

import { formatNumber } from '@superset-ui/core';
console.log(formatNumber('.2f', 1000));

It is powered by a registry to support registration of custom formatting, with fallback to d3.format and handle error for invalid format string.

import { getNumberFormatterRegistry, formatNumber, NumberFormatter } from '@superset-ui/core';

getNumberFormatterRegistry().registerValue('my_format', new NumberFormatter({
  id: 'my_format',
  formatFunc: v => `my special format of ${v}`
});

console.log(formatNumber('my_format', 1000));
// prints 'my special format of 1000'

It also define constants for common d3 formats. See the full list of formats in NumberFormats.js.

import { NumberFormats } from '@superset-ui-number-format';

NumberFormats.PERCENT; // ,.2%
NumberFormats.PERCENT_3_POINT; // ,.3%

There is also a formatter based on pretty-ms that can be used to format time durations:

import { createDurationFormatter, formatNumber, getNumberFormatterRegistry } from from '@superset-ui-number-format';

getNumberFormatterRegistry().registerValue('my_duration_format', createDurationFormatter({ colonNotation: true });
console.log(formatNumber('my_duration_format', 95500))
// prints '1:35.5'

API

fn(args)

  • Do something