feat(interval): micro interval

[pearmini]

渲染微妙级条形图

这个 PR 添加了一个测试案例和 demo 去展示渲染微妙级条形图的办法。（close: #5252 ）

存在问题

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  theme: 'classic',
  autoFit: true,
  padding: 'auto',
});

chart
  .interval()
  .coordinate({ transform: [{ type: 'transpose' }] })
  .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')
  .encode('y', [(d) => new Date(d.startTime), (d) => new Date(d.endTime)])

chart.render();

下面代码不会去渲染第一个条。出现原因是第一个数据的 startTime 和 endTime 它们的时间戳是一致的：

导致它们会被 Time 比例尺映射为相同的值，从而画不出条形。

解决办法

出现上诉问题的根本原因是：精度丢失，微秒级别的数值在转换为 Date 对象的时候被去掉了。所以我们可以生成一个浮点数的时间戳，然后再交给 Time 比例尺去映射，该过程和 Linear 保持一致。为了展示合适的 ticks，还需要显示地去指定比例尺的 domain，使得其最小值按照微秒级别 floor，以及最大值按照微秒级 ceil。

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' }] },
  };
}