feat: add duration formatter (#209)

* feat: add duration formatter

* fix: address review comments

packages/superset-ui-number-format/package.json

@@ -27,7 +27,8 @@
   },
   "dependencies": {
     "@types/d3-format": "^1.3.0",
-    "d3-format": "^1.3.2"
+    "d3-format": "^1.3.2",
+    "pretty-ms": "^5.0.0"
   },
   "peerDependencies": {
     "@superset-ui/core": "^0.12.0"

packages/superset-ui-number-format/src/factories/createDurationFormatter.ts

@@ -0,0 +1,20 @@
+import prettyMsFormatter from 'pretty-ms';
+import NumberFormatter from '../NumberFormatter';
+
+export default function createDurationFormatter(
+  config: {
+    description?: string;
+    id?: string;
+    label?: string;
+    multiplier?: number;
+  } & prettyMsFormatter.Options = {},
+) {
+  const { description, id, label, multiplier = 1, ...prettyMsOptions } = config;
+
+  return new NumberFormatter({
+    description,
+    formatFunc: value => prettyMsFormatter(value * multiplier, prettyMsOptions),
+    id: id || 'duration_format',
+    label: label || `Duration formatter`,
+  });
+}

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

@@ -8,6 +8,7 @@ export {
 } from './NumberFormatterRegistrySingleton';
 
 export { default as createD3NumberFormatter } from './factories/createD3NumberFormatter';
+export { default as createDurationFormatter } from './factories/createDurationFormatter';
 export {
   default as createSiAtMostNDigitFormatter,
 } from './factories/createSiAtMostNDigitFormatter';

packages/superset-ui-number-format/test/factories/createDurationFormatter.test.ts

@@ -0,0 +1,32 @@
+import NumberFormatter from '../../src/NumberFormatter';
+import createDurationFormatter from '../../src/factories/createDurationFormatter';
+
+describe('createDurationFormatter()', () => {
+  it('creates an instance of NumberFormatter', () => {
+    const formatter = createDurationFormatter();
+    expect(formatter).toBeInstanceOf(NumberFormatter);
+  });
+  it('format milliseconds in human readable format with default options', () => {
+    const formatter = createDurationFormatter();
+    expect(formatter(0)).toBe('0ms');
+    expect(formatter(1000)).toBe('1s');
+    expect(formatter(1337)).toBe('1.3s');
+    expect(formatter(10500)).toBe('10.5s');
+    expect(formatter(60 * 1000)).toBe('1m');
+    expect(formatter(90 * 1000)).toBe('1m 30s');
+  });
+  it('format seconds in human readable format with default options', () => {
+    const formatter = createDurationFormatter({ multiplier: 1000 });
+    expect(formatter(0.5)).toBe('500ms');
+    expect(formatter(1)).toBe('1s');
+    expect(formatter(30)).toBe('30s');
+    expect(formatter(60)).toBe('1m');
+    expect(formatter(90)).toBe('1m 30s');
+  });
+  it('format milliseconds in human readable format with additional pretty-ms options', () => {
+    const zeroDecimalFormatter = createDurationFormatter({ secondsDecimalDigits: 0 });
+    expect(zeroDecimalFormatter(10500)).toBe('11s');
+    const subMillisecondFormatter = createDurationFormatter({ formatSubMilliseconds: true });
+    expect(subMillisecondFormatter(100.40008)).toBe('100ms 400µs 80ns');
+  });
+});

packages/superset-ui-number-format/test/index.test.ts

@@ -1,5 +1,6 @@
 import {
   createD3NumberFormatter,
+  createDurationFormatter,
   createSiAtMostNDigitFormatter,
   formatNumber,
   getNumberFormatter,
@@ -13,6 +14,7 @@ describe('index', () => {
   it('exports modules', () => {
     [
       createD3NumberFormatter,
+      createDurationFormatter,
       createSiAtMostNDigitFormatter,
       formatNumber,
       getNumberFormatter,