fix: bignumber format by time formatter

plugins/legacy-preset-chart-big-number/src/BigNumber/BigNumber.tsx

@@ -76,7 +76,7 @@ type BigNumberVisProps = {
   height: number;
   bigNumber?: number | null;
   bigNumberFallback?: TimeSeriesDatum;
-  formatNumber: NumberFormatter;
+  headerFormatter: NumberFormatter | TimeFormatter;
   formatTime: TimeFormatter;
   fromDatetime?: number;
   toDatetime?: number;
@@ -98,7 +98,7 @@ class BigNumberVis extends React.PureComponent<BigNumberVisProps, {}> {
 
   static defaultProps = {
     className: '',
-    formatNumber: defaultNumberFormatter,
+    headerFormatter: defaultNumberFormatter,
     formatTime: smartDateVerboseFormatter,
     headerFontSize: PROPORTION.HEADER,
     kickerFontSize: PROPORTION.KICKER,
@@ -173,8 +173,8 @@ class BigNumberVis extends React.PureComponent<BigNumberVisProps, {}> {
   }
 
   renderHeader(maxHeight: number) {
-    const { bigNumber, formatNumber, width } = this.props;
-    const text = bigNumber === null ? t('No data') : formatNumber(bigNumber);
+    const { bigNumber, headerFormatter, width } = this.props;
+    const text = bigNumber === null ? t('No data') : headerFormatter(bigNumber);
 
     const container = this.createTemporaryContainer();
     document.body.append(container);
@@ -246,7 +246,7 @@ class BigNumberVis extends React.PureComponent<BigNumberVisProps, {}> {
       mainColor,
       subheader,
       startYAxisAtZero,
-      formatNumber,
+      headerFormatter,
       formatTime,
       fromDatetime,
       timeRangeFixed,
@@ -283,7 +283,8 @@ class BigNumberVis extends React.PureComponent<BigNumberVisProps, {}> {
       <XYChart
         snapTooltipToDataX
         ariaLabel={`Big number visualization ${subheader}`}
-        renderTooltip={renderTooltipFactory(formatTime, formatNumber)}
+        // headerFormatter always NumberFormatter in BigNumber with treadline
+        renderTooltip={renderTooltipFactory(formatTime, headerFormatter as NumberFormatter)}
         xScale={xScale}
         yScale={{
           type: 'linear',

plugins/legacy-preset-chart-big-number/src/BigNumber/transformProps.ts

@@ -78,6 +78,7 @@ export default function transformProps(chartProps: BigNumberChartProps) {
   } = formData;
   const granularity = extractTimegrain(rawFormData as QueryFormData);
   let { yAxisFormat } = formData;
+  const { headerFormatSelector, headerTimestampFormat } = formData;
   const { data = [], from_dttm: fromDatetime, to_dttm: toDatetime } = queriesData[0];
   const metricName = typeof metric === 'string' ? metric : metric.label;
   const compareLag = Number(compareLag_) || 0;
@@ -146,7 +147,9 @@ export default function transformProps(chartProps: BigNumberChartProps) {
     });
   }
 
-  const formatNumber = getNumberFormatter(yAxisFormat);
+  const headerFormatter = headerFormatSelector
+    ? getTimeFormatter(headerTimestampFormat)
+    : getNumberFormatter(yAxisFormat);
   const formatTime =
     timeFormat === smartDateFormatter.id
       ? getTimeFormatterForGranularity(granularity)
@@ -158,7 +161,7 @@ export default function transformProps(chartProps: BigNumberChartProps) {
     bigNumber,
     bigNumberFallback,
     className,
-    formatNumber,
+    headerFormatter,
     formatTime,
     headerFontSize,
     subheaderFontSize,

plugins/legacy-preset-chart-big-number/src/BigNumberTotal/controlPanel.ts

@@ -17,7 +17,12 @@
  * under the License.
  */
 import { t } from '@superset-ui/core';
-import { ControlPanelConfig, sections } from '@superset-ui/chart-controls';
+import {
+  ControlPanelConfig,
+  D3_FORMAT_DOCS,
+  D3_TIME_FORMAT_OPTIONS,
+  sections,
+} from '@superset-ui/chart-controls';
 import { headerFontSize, subheaderFontSize } from '../sharedControls';
 
 export default {
@@ -43,6 +48,36 @@ export default {
           },
         ],
         ['y_axis_format'],
+        [
+          {
+            name: 'header_format_selector',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Timestamp Format'),
+              renderTrigger: true,
+              default: false,
+              description: t('Whether to format the timestamp'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'header_timestamp_format',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: t('Date format'),
+              renderTrigger: true,
+              choices: D3_TIME_FORMAT_OPTIONS,
+              default: '%d-%m-%Y %H:%M:%S',
+              description: D3_FORMAT_DOCS,
+              visibility(props) {
+                const { header_format_selector } = props.form_data;
+                return !!header_format_selector;
+              },
+            },
+          },
+        ],
       ],
     },
     {

plugins/legacy-preset-chart-big-number/test/transformProps.test.ts

@@ -135,7 +135,7 @@ describe('BigNumber', () => {
         },
       };
       const transformed = transformProps(propsWithDatasource);
-      expect(transformed.formatNumber(transformed.bigNumber)).toStrictEqual('1.23');
+      expect(transformed.headerFormatter(transformed.bigNumber)).toStrictEqual('1.23');
     });
   });
 });