mirror of
https://github.com/apache/superset.git
synced 2024-09-19 20:19:37 -04:00
feat: Add SMART_NUMBER formatter and make it default (#109)
* feat: implement smart number format * test: add unit tests * refactor: Rename number formats BREAKING CHANGE: NumberFormat.xxx are renamed * feat: Make smart number default formatter * fix: add unit test * refactor: move formatters outside
This commit is contained in:
parent
8fe9e2f2cb
commit
0cde8a2884
@ -1,63 +1,68 @@
|
|||||||
const DOLLAR = '$,.2f';
|
const DOLLAR = '$,.2f';
|
||||||
const DOLLAR_CHANGE = '+$,.2f';
|
const DOLLAR_SIGNED = '+$,.2f';
|
||||||
const DOLLAR_ROUND = '$,d';
|
const DOLLAR_ROUND = '$,d';
|
||||||
const DOLLAR_ROUND_CHANGE = '+$,d';
|
const DOLLAR_ROUND_SIGNED = '+$,d';
|
||||||
|
|
||||||
const FLOAT_1_POINT = ',.1f';
|
const FLOAT_1_POINT = ',.1f';
|
||||||
const FLOAT_2_POINT = ',.2f';
|
const FLOAT_2_POINT = ',.2f';
|
||||||
const FLOAT_3_POINT = ',.3f';
|
const FLOAT_3_POINT = ',.3f';
|
||||||
const FLOAT = FLOAT_2_POINT;
|
const FLOAT = FLOAT_2_POINT;
|
||||||
|
|
||||||
const FLOAT_CHANGE_1_POINT = '+,.1f';
|
const FLOAT_SIGNED_1_POINT = '+,.1f';
|
||||||
const FLOAT_CHANGE_2_POINT = '+,.2f';
|
const FLOAT_SIGNED_2_POINT = '+,.2f';
|
||||||
const FLOAT_CHANGE_3_POINT = '+,.3f';
|
const FLOAT_SIGNED_3_POINT = '+,.3f';
|
||||||
const FLOAT_CHANGE = FLOAT_CHANGE_2_POINT;
|
const FLOAT_SIGNED = FLOAT_SIGNED_2_POINT;
|
||||||
|
|
||||||
const INTEGER = ',d';
|
const INTEGER = ',d';
|
||||||
const INTEGER_CHANGE = '+,d';
|
const INTEGER_SIGNED = '+,d';
|
||||||
|
|
||||||
const PERCENT_1_POINT = ',.1%';
|
const PERCENT_1_POINT = ',.1%';
|
||||||
const PERCENT_2_POINT = ',.2%';
|
const PERCENT_2_POINT = ',.2%';
|
||||||
const PERCENT_3_POINT = ',.3%';
|
const PERCENT_3_POINT = ',.3%';
|
||||||
const PERCENT = PERCENT_2_POINT;
|
const PERCENT = PERCENT_2_POINT;
|
||||||
|
|
||||||
const PERCENT_CHANGE_1_POINT = '+,.1%';
|
const PERCENT_SIGNED_1_POINT = '+,.1%';
|
||||||
const PERCENT_CHANGE_2_POINT = '+,.2%';
|
const PERCENT_SIGNED_2_POINT = '+,.2%';
|
||||||
const PERCENT_CHANGE_3_POINT = '+,.3%';
|
const PERCENT_SIGNED_3_POINT = '+,.3%';
|
||||||
const PERCENT_CHANGE = PERCENT_CHANGE_2_POINT;
|
const PERCENT_SIGNED = PERCENT_SIGNED_2_POINT;
|
||||||
|
|
||||||
const SI_1_DIGIT = '.1s';
|
const SI_1_DIGIT = '.1s';
|
||||||
const SI_2_DIGIT = '.2s';
|
const SI_2_DIGIT = '.2s';
|
||||||
const SI_3_DIGIT = '.3s';
|
const SI_3_DIGIT = '.3s';
|
||||||
const SI = SI_3_DIGIT;
|
const SI = SI_3_DIGIT;
|
||||||
|
|
||||||
|
const SMART_NUMBER = 'SMART_NUMBER';
|
||||||
|
const SMART_NUMBER_SIGNED = 'SMART_NUMBER_SIGNED';
|
||||||
|
|
||||||
const NumberFormats = {
|
const NumberFormats = {
|
||||||
DOLLAR,
|
DOLLAR,
|
||||||
DOLLAR_CHANGE,
|
|
||||||
DOLLAR_ROUND,
|
DOLLAR_ROUND,
|
||||||
DOLLAR_ROUND_CHANGE,
|
DOLLAR_ROUND_SIGNED,
|
||||||
|
DOLLAR_SIGNED,
|
||||||
FLOAT,
|
FLOAT,
|
||||||
FLOAT_1_POINT,
|
FLOAT_1_POINT,
|
||||||
FLOAT_2_POINT,
|
FLOAT_2_POINT,
|
||||||
FLOAT_3_POINT,
|
FLOAT_3_POINT,
|
||||||
FLOAT_CHANGE,
|
FLOAT_SIGNED,
|
||||||
FLOAT_CHANGE_1_POINT,
|
FLOAT_SIGNED_1_POINT,
|
||||||
FLOAT_CHANGE_2_POINT,
|
FLOAT_SIGNED_2_POINT,
|
||||||
FLOAT_CHANGE_3_POINT,
|
FLOAT_SIGNED_3_POINT,
|
||||||
INTEGER,
|
INTEGER,
|
||||||
INTEGER_CHANGE,
|
INTEGER_SIGNED,
|
||||||
PERCENT,
|
PERCENT,
|
||||||
PERCENT_1_POINT,
|
PERCENT_1_POINT,
|
||||||
PERCENT_2_POINT,
|
PERCENT_2_POINT,
|
||||||
PERCENT_3_POINT,
|
PERCENT_3_POINT,
|
||||||
PERCENT_CHANGE,
|
PERCENT_SIGNED,
|
||||||
PERCENT_CHANGE_1_POINT,
|
PERCENT_SIGNED_1_POINT,
|
||||||
PERCENT_CHANGE_2_POINT,
|
PERCENT_SIGNED_2_POINT,
|
||||||
PERCENT_CHANGE_3_POINT,
|
PERCENT_SIGNED_3_POINT,
|
||||||
SI,
|
SI,
|
||||||
SI_1_DIGIT,
|
SI_1_DIGIT,
|
||||||
SI_2_DIGIT,
|
SI_2_DIGIT,
|
||||||
SI_3_DIGIT,
|
SI_3_DIGIT,
|
||||||
|
SMART_NUMBER,
|
||||||
|
SMART_NUMBER_SIGNED,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default NumberFormats;
|
export default NumberFormats;
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { RegistryWithDefaultKey, OverwritePolicy } from '@superset-ui/core';
|
import { RegistryWithDefaultKey, OverwritePolicy } from '@superset-ui/core';
|
||||||
import createD3NumberFormatter from './factories/createD3NumberFormatter';
|
import createD3NumberFormatter from './factories/createD3NumberFormatter';
|
||||||
|
import createSmartNumberFormatter from './factories/createSmartNumberFormatter';
|
||||||
import NumberFormats from './NumberFormats';
|
import NumberFormats from './NumberFormats';
|
||||||
import NumberFormatter from './NumberFormatter';
|
import NumberFormatter from './NumberFormatter';
|
||||||
|
|
||||||
@ -9,10 +10,16 @@ export default class NumberFormatterRegistry extends RegistryWithDefaultKey<
|
|||||||
> {
|
> {
|
||||||
constructor() {
|
constructor() {
|
||||||
super({
|
super({
|
||||||
initialDefaultKey: NumberFormats.SI,
|
|
||||||
name: 'NumberFormatter',
|
name: 'NumberFormatter',
|
||||||
overwritePolicy: OverwritePolicy.WARN,
|
overwritePolicy: OverwritePolicy.WARN,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.registerValue(NumberFormats.SMART_NUMBER, createSmartNumberFormatter());
|
||||||
|
this.registerValue(
|
||||||
|
NumberFormats.SMART_NUMBER_SIGNED,
|
||||||
|
createSmartNumberFormatter({ signed: true }),
|
||||||
|
);
|
||||||
|
this.setDefaultKey(NumberFormats.SMART_NUMBER);
|
||||||
}
|
}
|
||||||
|
|
||||||
get(formatterId?: string) {
|
get(formatterId?: string) {
|
||||||
|
@ -0,0 +1,48 @@
|
|||||||
|
/* eslint-disable no-magic-numbers */
|
||||||
|
|
||||||
|
import { format as d3Format } from 'd3-format';
|
||||||
|
import NumberFormatter from '../NumberFormatter';
|
||||||
|
import NumberFormats from '../NumberFormats';
|
||||||
|
|
||||||
|
const siFormatter = d3Format(`.3~s`);
|
||||||
|
const float2PointFormatter = d3Format(`.2~f`);
|
||||||
|
const float4PointFormatter = d3Format(`.4~f`);
|
||||||
|
|
||||||
|
export default function createSmartNumberFormatter(
|
||||||
|
config: {
|
||||||
|
description?: string;
|
||||||
|
signed?: boolean;
|
||||||
|
id?: string;
|
||||||
|
label?: string;
|
||||||
|
} = {},
|
||||||
|
) {
|
||||||
|
const { description, signed = false, id, label } = config;
|
||||||
|
const getSign = signed ? (value: number) => (value > 0 ? '+' : '') : () => '';
|
||||||
|
|
||||||
|
function formatValue(value: number) {
|
||||||
|
if (value === 0) {
|
||||||
|
return '0';
|
||||||
|
}
|
||||||
|
const absoluteValue = Math.abs(value);
|
||||||
|
if (absoluteValue >= 1000) {
|
||||||
|
// Normal human being are more familiar
|
||||||
|
// with billion (B) that giga (G)
|
||||||
|
return siFormatter(value).replace('G', 'B');
|
||||||
|
} else if (absoluteValue >= 1) {
|
||||||
|
return float2PointFormatter(value);
|
||||||
|
} else if (absoluteValue >= 0.001) {
|
||||||
|
return float4PointFormatter(value);
|
||||||
|
} else if (absoluteValue > 0.000001) {
|
||||||
|
return `${siFormatter(value * 1000000)}µ`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return siFormatter(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
return new NumberFormatter({
|
||||||
|
description,
|
||||||
|
formatFunc: value => `${getSign(value)}${formatValue(value)}`,
|
||||||
|
id: id || signed ? NumberFormats.SMART_NUMBER_SIGNED : NumberFormats.SMART_NUMBER,
|
||||||
|
label: label || 'Adaptive formatter',
|
||||||
|
});
|
||||||
|
}
|
@ -1,11 +1,15 @@
|
|||||||
import NumberFormatterRegistry from '../src/NumberFormatterRegistry';
|
import NumberFormatterRegistry from '../src/NumberFormatterRegistry';
|
||||||
import NumberFormatter from '../src/NumberFormatter';
|
import NumberFormatter from '../src/NumberFormatter';
|
||||||
|
import { NumberFormats } from '../src';
|
||||||
|
|
||||||
describe('NumberFormatterRegistry', () => {
|
describe('NumberFormatterRegistry', () => {
|
||||||
let registry: NumberFormatterRegistry;
|
let registry: NumberFormatterRegistry;
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
registry = new NumberFormatterRegistry();
|
registry = new NumberFormatterRegistry();
|
||||||
});
|
});
|
||||||
|
it('has SMART_NUMBER as default formatter out of the box', () => {
|
||||||
|
expect(registry.getDefaultKey()).toBe(NumberFormats.SMART_NUMBER);
|
||||||
|
});
|
||||||
describe('.get(format)', () => {
|
describe('.get(format)', () => {
|
||||||
it('creates and returns a new formatter if does not exist', () => {
|
it('creates and returns a new formatter if does not exist', () => {
|
||||||
const formatter = registry.get('.2f');
|
const formatter = registry.get('.2f');
|
||||||
|
@ -0,0 +1,130 @@
|
|||||||
|
import NumberFormatter from '../../src/NumberFormatter';
|
||||||
|
import createSmartNumberFormatter from '../../src/factories/createSmartNumberFormatter';
|
||||||
|
|
||||||
|
describe('createSmartNumberFormatter(options)', () => {
|
||||||
|
it('creates an instance of NumberFormatter', () => {
|
||||||
|
const formatter = createSmartNumberFormatter();
|
||||||
|
expect(formatter).toBeInstanceOf(NumberFormatter);
|
||||||
|
});
|
||||||
|
describe('using default options', () => {
|
||||||
|
const formatter = createSmartNumberFormatter();
|
||||||
|
it('formats 0 correctly', () => {
|
||||||
|
expect(formatter(0)).toBe('0');
|
||||||
|
});
|
||||||
|
describe('for positive numbers', () => {
|
||||||
|
it('formats billion with B in stead of G', () => {
|
||||||
|
expect(formatter(1000000000)).toBe('1B');
|
||||||
|
expect(formatter(4560000000)).toBe('4.56B');
|
||||||
|
});
|
||||||
|
it('formats numbers that are >= 1,000 & <= 1,000,000,000 as SI format with precision 3', () => {
|
||||||
|
expect(formatter(1000)).toBe('1k');
|
||||||
|
expect(formatter(10001)).toBe('10k');
|
||||||
|
expect(formatter(10100)).toBe('10.1k');
|
||||||
|
expect(formatter(111000000)).toBe('111M');
|
||||||
|
});
|
||||||
|
it('formats number that are >= 1 & < 1,000 as integer or float with at most 2 decimal points', () => {
|
||||||
|
expect(formatter(1)).toBe('1');
|
||||||
|
expect(formatter(1.0)).toBe('1');
|
||||||
|
expect(formatter(10)).toBe('10');
|
||||||
|
expect(formatter(10.0)).toBe('10');
|
||||||
|
expect(formatter(10.23432)).toBe('10.23');
|
||||||
|
expect(formatter(274.2856)).toBe('274.29');
|
||||||
|
expect(formatter(999)).toBe('999');
|
||||||
|
});
|
||||||
|
it('formats numbers that are < 1 & >= 0.001 as float with at most 4 decimal points', () => {
|
||||||
|
expect(formatter(0.1)).toBe('0.1');
|
||||||
|
expect(formatter(0.23)).toBe('0.23');
|
||||||
|
expect(formatter(0.699)).toBe('0.699');
|
||||||
|
expect(formatter(0.0023)).toBe('0.0023');
|
||||||
|
expect(formatter(0.002300001)).toBe('0.0023');
|
||||||
|
});
|
||||||
|
it('formats numbers that are < 0.001 & >= 0.000001 as micron', () => {
|
||||||
|
expect(formatter(0.0002300001)).toBe('230µ');
|
||||||
|
expect(formatter(0.000023)).toBe('23µ');
|
||||||
|
expect(formatter(0.000001)).toBe('1µ');
|
||||||
|
});
|
||||||
|
it('formats numbers that are less than 0.000001 as SI format with precision 3', () => {
|
||||||
|
expect(formatter(0.0000001)).toBe('100n');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
describe('for negative numbers', () => {
|
||||||
|
it('formats billion with B in stead of G', () => {
|
||||||
|
expect(formatter(-1000000000)).toBe('-1B');
|
||||||
|
expect(formatter(-4560000000)).toBe('-4.56B');
|
||||||
|
});
|
||||||
|
it('formats numbers that are >= 1,000 & <= 1,000,000,000 as SI format with precision 3', () => {
|
||||||
|
expect(formatter(-1000)).toBe('-1k');
|
||||||
|
expect(formatter(-10001)).toBe('-10k');
|
||||||
|
expect(formatter(-10100)).toBe('-10.1k');
|
||||||
|
expect(formatter(-111000000)).toBe('-111M');
|
||||||
|
});
|
||||||
|
it('formats number that are >= 1 & < 1,000 as integer or float with at most 2 decimal points', () => {
|
||||||
|
expect(formatter(-1)).toBe('-1');
|
||||||
|
expect(formatter(-1.0)).toBe('-1');
|
||||||
|
expect(formatter(-10)).toBe('-10');
|
||||||
|
expect(formatter(-10.0)).toBe('-10');
|
||||||
|
expect(formatter(-10.23432)).toBe('-10.23');
|
||||||
|
expect(formatter(-274.2856)).toBe('-274.29');
|
||||||
|
expect(formatter(-999)).toBe('-999');
|
||||||
|
});
|
||||||
|
it('formats numbers that are < 1 & >= 0.001 as float with at most 4 decimal points', () => {
|
||||||
|
expect(formatter(-0.1)).toBe('-0.1');
|
||||||
|
expect(formatter(-0.23)).toBe('-0.23');
|
||||||
|
expect(formatter(-0.699)).toBe('-0.699');
|
||||||
|
expect(formatter(-0.0023)).toBe('-0.0023');
|
||||||
|
expect(formatter(-0.002300001)).toBe('-0.0023');
|
||||||
|
});
|
||||||
|
it('formats numbers that are < 0.001 & >= 0.000001 as micron', () => {
|
||||||
|
expect(formatter(-0.0002300001)).toBe('-230µ');
|
||||||
|
expect(formatter(-0.000023)).toBe('-23µ');
|
||||||
|
expect(formatter(-0.000001)).toBe('-1µ');
|
||||||
|
});
|
||||||
|
it('formats numbers that are less than 0.000001 as SI format with precision 3', () => {
|
||||||
|
expect(formatter(-0.0000001)).toBe('-100n');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('when options.signed is true, it adds + for positive numbers', () => {
|
||||||
|
const formatter = createSmartNumberFormatter({ signed: true });
|
||||||
|
it('formats 0 correctly', () => {
|
||||||
|
expect(formatter(0)).toBe('0');
|
||||||
|
});
|
||||||
|
describe('for positive numbers', () => {
|
||||||
|
it('formats billion with B in stead of G', () => {
|
||||||
|
expect(formatter(1000000000)).toBe('+1B');
|
||||||
|
expect(formatter(4560000000)).toBe('+4.56B');
|
||||||
|
});
|
||||||
|
it('formats numbers that are >= 1,000 & <= 1,000,000,000 as SI format with precision 3', () => {
|
||||||
|
expect(formatter(1000)).toBe('+1k');
|
||||||
|
expect(formatter(10001)).toBe('+10k');
|
||||||
|
expect(formatter(10100)).toBe('+10.1k');
|
||||||
|
expect(formatter(111000000)).toBe('+111M');
|
||||||
|
});
|
||||||
|
it('formats number that are >= 1 & < 1,000 as integer or float with at most 2 decimal points', () => {
|
||||||
|
expect(formatter(1)).toBe('+1');
|
||||||
|
expect(formatter(1.0)).toBe('+1');
|
||||||
|
expect(formatter(10)).toBe('+10');
|
||||||
|
expect(formatter(10.0)).toBe('+10');
|
||||||
|
expect(formatter(10.23432)).toBe('+10.23');
|
||||||
|
expect(formatter(274.2856)).toBe('+274.29');
|
||||||
|
expect(formatter(999)).toBe('+999');
|
||||||
|
});
|
||||||
|
it('formats numbers that are < 1 & >= 0.001 as float with at most 4 decimal points', () => {
|
||||||
|
expect(formatter(0.1)).toBe('+0.1');
|
||||||
|
expect(formatter(0.23)).toBe('+0.23');
|
||||||
|
expect(formatter(0.699)).toBe('+0.699');
|
||||||
|
expect(formatter(0.0023)).toBe('+0.0023');
|
||||||
|
expect(formatter(0.002300001)).toBe('+0.0023');
|
||||||
|
});
|
||||||
|
it('formats numbers that are < 0.001 & >= 0.000001 as micron', () => {
|
||||||
|
expect(formatter(0.0002300001)).toBe('+230µ');
|
||||||
|
expect(formatter(0.000023)).toBe('+23µ');
|
||||||
|
expect(formatter(0.000001)).toBe('+1µ');
|
||||||
|
});
|
||||||
|
it('formats numbers that are less than 0.000001 as SI format with precision 3', () => {
|
||||||
|
expect(formatter(0.0000001)).toBe('+100n');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue
Block a user