feat: add default format to tooltip title #5684 (#5748)

Co-authored-by: ben.wen <ben.wen@narwal.com>

__tests__/plots/tooltip/aapl-line-date-default-format.ts

@@ -0,0 +1,23 @@
+import { G2Spec } from '../../../src';
+import { seriesTooltipSteps } from './utils';
+
+export function aaplLineDateDefaultFormat(): G2Spec {
+  return {
+    type: 'view',
+    children: [
+      {
+        type: 'line',
+        data: {
+          type: 'fetch',
+          value: 'data/aapl.csv',
+        },
+        encode: {
+          x: 'date',
+          y: 'close',
+        },
+      },
+    ],
+  };
+}
+
+aaplLineDateDefaultFormat.steps = seriesTooltipSteps([200, 300]);

__tests__/plots/tooltip/index.ts

@@ -58,6 +58,7 @@ export { aaplLineSliderFilter } from './appl-line-slider-filter';
 export { aaplLineAreaBasicSample } from './aapl-line-area-basic-sample';
 export { aaplLineAreaBasicSampleMount } from './aapl-line-area-basic-sample-mount';
 export { aaplAreaMissingDataTranspose } from './aapl-area-missing-data-transpose';
+export { aaplLineDateDefaultFormat } from './aapl-line-date-default-format';
 export { alphabetIntervalBrushTooltip } from './alphabet-interval-brush-tooltip';
 export { mockLineFalsy } from './mock-line-falsy';
 export { provincesLineGroupName } from './provinces-line-group-name';

src/transform/maybeTitle.ts

@@ -1,6 +1,7 @@
 import { deepMix } from '@antv/util';
 import { isUnset } from '../utils/helper';
 import { TransformComponent as TC } from '../runtime';
+import { dynamicFormatDateTime } from '../utils/dateFormat';
 import { columnOf } from './utils/helper';
 
 export type MaybeTitleOptions = {
@@ -27,7 +28,13 @@ export const MaybeTitle: TC<MaybeTitleOptions> = (options = {}) => {
     if (titles.length === 0) return [I, mark];
     const T = [];
     for (const i of I) {
-      T[i] = { value: titles.map((t) => t[i]).join(', ') };
+      T[i] = {
+        value: titles
+          .map((t) =>
+            t[i] instanceof Date ? dynamicFormatDateTime(t[i] as Date) : t[i],
+          )
+          .join(', '),
+      };
     }
     return [
       I,

src/utils/dateFormat.ts

@@ -0,0 +1,22 @@
+function fillZero(digit: number) {
+  if (Math.abs(digit) > 10) return String(digit);
+  return digit.toString().padStart(2, '0');
+}
+
+export function dynamicFormatDateTime(date: Date) {
+  const year = date.getFullYear();
+  const month = fillZero(date.getMonth() + 1);
+  const day = fillZero(date.getDate());
+
+  const yyyyMMDD = `${year}-${month}-${day}`;
+
+  const hour = date.getHours();
+  const minutes = date.getMinutes();
+  const seconds = date.getSeconds();
+
+  if (hour || minutes || seconds)
+    return `${yyyyMMDD} ${fillZero(hour)}:${fillZero(minutes)}:${fillZero(
+      seconds,
+    )}`;
+  return yyyyMMDD;
+}