From 51900599d807b8bd6d34e32605c8ecda2cf14bfa Mon Sep 17 00:00:00 2001
From: MiniPear <subairui@icloud.com>
Date: Mon, 3 Jul 2023 09:40:22 +0800
Subject: [PATCH] feat(interval): micro interval (#5260)

---
 .../static/mockLineSmallInterval.png          | Bin 0 -> 4200 bytes
 __tests__/plots/static/index.ts               |   1 +
 .../plots/static/mock-line-small-interval.ts  |  49 +++++++++++++++
 .../general/interval/demo/bar-range-micro.ts  |  59 ++++++++++++++++++
 site/examples/general/interval/demo/meta.json |   8 +++
 5 files changed, 117 insertions(+)
 create mode 100644 __tests__/integration/snapshots/static/mockLineSmallInterval.png
 create mode 100644 __tests__/plots/static/mock-line-small-interval.ts
 create mode 100644 site/examples/general/interval/demo/bar-range-micro.ts

diff --git a/__tests__/integration/snapshots/static/mockLineSmallInterval.png b/__tests__/integration/snapshots/static/mockLineSmallInterval.png
new file mode 100644
index 0000000000000000000000000000000000000000..9836efb42f63e158f2070301e3425966e7acb194
GIT binary patch
literal 4200
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
JSN_EQ`0vs!nC$=n

literal 0
HcmV?d00001

diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts
index 8bea9e395d..8ef38a8cc0 100644
--- a/__tests__/plots/static/index.ts
+++ b/__tests__/plots/static/index.ts
@@ -267,3 +267,4 @@ export { aaplLineMissingDataTrial } from './aapl-line-missing-data-trial';
 export { mockAreaMissingData } from './mock-area-missing-data';
 export { mockIntervalFacetRectPolar } from './mock-interval-facet-rect-polar';
 export { alphabetIntervalAutoRotate } from './alphabet-interval-auto-padding-rotate';
+export { mockLineSmallInterval } from './mock-line-small-interval';
diff --git a/__tests__/plots/static/mock-line-small-interval.ts b/__tests__/plots/static/mock-line-small-interval.ts
new file mode 100644
index 0000000000..3801c36cac
--- /dev/null
+++ b/__tests__/plots/static/mock-line-small-interval.ts
@@ -0,0 +1,49 @@
+import { G2Spec } from '../../../src';
+
+export function mockLineSmallInterval(): G2Spec {
+  const floatTimestamp = (s) => +new Date(s) + +`0.${s.slice(s.length - 3)}`;
+  return {
+    type: 'interval',
+    padding: 'auto',
+    data: [
+      {
+        task: 'task0',
+        startTime: '2023-06-28 03:30:33.900123',
+        endTime: '2023-06-28 03:30:33.900678',
+        status: '0',
+      },
+      {
+        task: 'task0',
+        startTime: '2023-06-28 03:30:33.901123',
+        endTime: '2023-06-28 03:30:33.902678',
+        status: '1',
+      },
+    ],
+    encode: {
+      x: 'task',
+      y: (d) => floatTimestamp(d.startTime),
+      y1: (d) => floatTimestamp(d.endTime),
+    },
+    scale: {
+      y: {
+        type: 'time',
+        domain: [
+          new Date('2023-06-28 03:30:33.900'),
+          new Date('2023-06-28 03:30:33.903'),
+        ],
+      },
+    },
+    coordinate: { transform: [{ type: 'transpose' }] },
+  };
+}
+
+let toString;
+
+mockLineSmallInterval.before = () => {
+  toString = Date.prototype.toString;
+  Date.prototype.toString = Date.prototype.toUTCString;
+};
+
+mockLineSmallInterval.after = () => {
+  Date.prototype.toString = toString;
+};
diff --git a/site/examples/general/interval/demo/bar-range-micro.ts b/site/examples/general/interval/demo/bar-range-micro.ts
new file mode 100644
index 0000000000..1c07870e2a
--- /dev/null
+++ b/site/examples/general/interval/demo/bar-range-micro.ts
@@ -0,0 +1,59 @@
+import { Chart } from '@antv/g2';
+
+const floatTimestamp = (s) => +new Date(s) + +`0.${s.slice(s.length - 3)}`;
+
+const format = (n) => {
+  const x = Math.floor(n);
+  const s = n + '';
+  const d = new Date(x);
+  const Y = d.getFullYear();
+  const M = d.getMonth() + 1;
+  const D = d.getDate();
+  const H = d.getHours();
+  const MN = d.getMinutes();
+  const S = d.getSeconds();
+  const MS = d.getMilliseconds();
+  const MCM = s.slice(s.length - 3);
+  return `${Y}-${M}-${D} ${H}:${MN}:${S}.${MS}${MCM}`;
+};
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  autoFit: true,
+  padding: 'auto',
+});
+
+chart
+  .interval()
+  .data([
+    {
+      task: 'task0',
+      startTime: '2023-06-28 03:30:33.900123', // micro seconds
+      endTime: '2023-06-28 03:30:33.900678', // micro seconds
+      status: '0',
+    },
+    {
+      task: 'task0',
+      startTime: '2023-06-28 03:30:33.901123',
+      endTime: '2023-06-28 03:30:33.902678',
+      status: '1',
+    },
+  ])
+  .encode('x', 'task')
+  // Add float part to distinguish y and y1
+  .encode('y', (d) => floatTimestamp(d.startTime))
+  .encode('y1', (d) => floatTimestamp(d.endTime))
+  .encode('color', 'status')
+  .scale('y', {
+    type: 'time',
+    domain: [
+      new Date('2023-06-28 03:30:33.900'),
+      new Date('2023-06-28 03:30:33.903'),
+    ],
+  })
+  .coordinate({ transform: [{ type: 'transpose' }] })
+  .tooltip({ channel: 'y', valueFormatter: format })
+  .tooltip({ channel: 'y1', valueFormatter: format });
+
+chart.render();
diff --git a/site/examples/general/interval/demo/meta.json b/site/examples/general/interval/demo/meta.json
index 6d1d0a955f..fe4cd2e012 100644
--- a/site/examples/general/interval/demo/meta.json
+++ b/site/examples/general/interval/demo/meta.json
@@ -52,6 +52,14 @@
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*hTfETY0ObOsAAAAAAAAAAAAADmJ7AQ/original"
     },
+    {
+      "filename": "bar-range-micro.ts",
+      "title": {
+        "zh": "微妙级区间条形图",
+        "en": "Micro Range Bar Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*RGwxTI9J6fwAAAAAAAAAAAAADmJ7AQ/original"
+    },
     {
       "filename": "bar-stacked.ts",
       "title": {