diff --git a/__tests__/integration/snapshots/static/mockLineSmallInterval.png b/__tests__/integration/snapshots/static/mockLineSmallInterval.png new file mode 100644 index 0000000000..9836efb42f Binary files /dev/null and b/__tests__/integration/snapshots/static/mockLineSmallInterval.png differ 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": {