Add time duration formatter

Introduced a new `createTimeDurationFormatter` function for formatting durations in hours and minutes. Updated relevant tests, utilities, and setup files to include and use the new formatter where necessary.

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

@@ -57,6 +57,7 @@ export const D3_FORMAT_OPTIONS: [string, string][] = [
   ...d3Formatted,
   ['DURATION', t('Duration in ms (66000 => 1m 6s)')],
   ['DURATION_SUB', t('Duration in ms (1.40008 => 1ms 400µs 80ns)')],
+  ['TIME_DURATION', t('Duration in m (61 => 1:01)')],
   ['MEMORY_DECIMAL', t('Memory in bytes - decimal (1024B => 1.024kB)')],
   ['MEMORY_BINARY', t('Memory in bytes - binary (1024B => 1KiB)')],
 ];

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

@@ -0,0 +1,43 @@
+/*
+ * 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 NumberFormatter from '../NumberFormatter';
+
+export default function createTimeDurationFormatter(
+  config: {
+    description?: string;
+    id?: string;
+    label?: string;
+    multiplier?: number;
+  } = {},
+) {
+  const { description, id, label } = config;
+
+  return new NumberFormatter({
+    description,
+    formatFunc: value => {
+      const v = Math.abs(Math.round(value));
+      const h = Math.floor(v / 60);
+      const m = v % 60;
+      return `${h}:${String(m).padStart(2, '0')}`;
+    },
+    id: id ?? 'duration_format',
+    label: label ?? `Duration formatter`,
+  });
+}

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

@@ -34,3 +34,4 @@ export { default as createDurationFormatter } from './factories/createDurationFo
 export { default as createMemoryFormatter } from './factories/createMemoryFormatter';
 export { default as createSiAtMostNDigitFormatter } from './factories/createSiAtMostNDigitFormatter';
 export { default as createSmartNumberFormatter } from './factories/createSmartNumberFormatter';
+export { default as createTimeDurationFormatter } from './factories/createTimeDurationFormatter';

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

@@ -0,0 +1,36 @@
+/*
+ * 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 { NumberFormatter, createTimeDurationFormatter } from '@superset-ui/core';
+
+describe('createTimeDurationFormatter()', () => {
+  it('creates an instance of NumberFormatter', () => {
+    const formatter = createTimeDurationFormatter();
+    expect(formatter).toBeInstanceOf(NumberFormatter);
+  });
+  it('format seconds in human readable format with default options', () => {
+    const formatter = createTimeDurationFormatter();
+    expect(formatter(0)).toBe('0:00');
+    expect(formatter(1)).toBe('0:01');
+    expect(formatter(59)).toBe('0:59');
+    expect(formatter(59.4)).toBe('0:59');
+    expect(formatter(59.5)).toBe('1:00');
+    expect(formatter(61)).toBe('1:01');
+  });
+});

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

@@ -20,6 +20,7 @@
 import {
   createD3NumberFormatter,
   createDurationFormatter,
+  createTimeDurationFormatter,
   createSiAtMostNDigitFormatter,
   createMemoryFormatter,
   formatNumber,
@@ -35,6 +36,7 @@ describe('index', () => {
     [
       createD3NumberFormatter,
       createDurationFormatter,
+      createTimeDurationFormatter,
       createSiAtMostNDigitFormatter,
       createMemoryFormatter,
       formatNumber,

superset-frontend/src/setup/setupFormatters.ts

@@ -29,6 +29,7 @@ import {
   createSmartDateVerboseFormatter,
   createSmartDateDetailedFormatter,
   createMemoryFormatter,
+  createTimeDurationFormatter,
 } from '@superset-ui/core';
 import { FormatLocaleDefinition } from 'd3-format';
 import { TimeLocaleDefinition } from 'd3-time-format';
@@ -78,6 +79,7 @@ export default function setupFormatters(
       'DURATION_SUB',
       createDurationFormatter({ formatSubMilliseconds: true }),
     )
+    .registerValue('TIME_DURATION', createTimeDurationFormatter())
     .registerValue('MEMORY_DECIMAL', createMemoryFormatter({ binary: false }))
     .registerValue('MEMORY_BINARY', createMemoryFormatter({ binary: true }));