feat(interval): micro interval (#5260)

__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';

__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;
+};

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();

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": {