From 0f86e3e1bc4a67d00cab3440e6bda1c1e0fa3617 Mon Sep 17 00:00:00 2001
From: BENcorry <bencorryall@outlook.com>
Date: Thu, 9 Nov 2023 11:31:04 +0800
Subject: [PATCH] feat: add default format to tooltip title #5684 (#5748)

Co-authored-by: ben.wen <ben.wen@narwal.com>
---
 .../tooltip/aapl-line-date-default-format.ts  | 23 +++++++++++++++++++
 __tests__/plots/tooltip/index.ts              |  1 +
 src/transform/maybeTitle.ts                   |  9 +++++++-
 src/utils/dateFormat.ts                       | 22 ++++++++++++++++++
 4 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 __tests__/plots/tooltip/aapl-line-date-default-format.ts
 create mode 100644 src/utils/dateFormat.ts

diff --git a/__tests__/plots/tooltip/aapl-line-date-default-format.ts b/__tests__/plots/tooltip/aapl-line-date-default-format.ts
new file mode 100644
index 0000000000..09a5950c02
--- /dev/null
+++ b/__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]);
diff --git a/__tests__/plots/tooltip/index.ts b/__tests__/plots/tooltip/index.ts
index 8d94a0df09..50ed27a899 100644
--- a/__tests__/plots/tooltip/index.ts
+++ b/__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';
diff --git a/src/transform/maybeTitle.ts b/src/transform/maybeTitle.ts
index f1fbc4038e..f3c8ffc83d 100644
--- a/src/transform/maybeTitle.ts
+++ b/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,
diff --git a/src/utils/dateFormat.ts b/src/utils/dateFormat.ts
new file mode 100644
index 0000000000..3ff224782c
--- /dev/null
+++ b/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;
+}