test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-11-29 18:28:19 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat(plugins): add timebar (#5666)

Browse Source 
* feat(plugins): add timebar

* refactor: adjust timebar component

---------

Co-authored-by: wb-xcf804241 <wb-xcf804241@alibaba-inc.com>
Co-authored-by: Aaron <yangtao.yangtao@antgroup.com>
This commit is contained in:
Frank William 2024-04-28 17:00:01 +08:00 committed by GitHub
parent 6986bb61b7
commit 9cf0677773
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
20 changed files with 8040 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -31,7 +31,7 @@
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-terser": "^0.4.4",
"@rollup/plugin-typescript": "^11.1.6",
"@swc/core": "^1.4.13",
"@swc/core": "^1.4.16",
"@swc/jest": "^0.2.36",
"@types/jest": "^29.5.12",
"@types/jsdom": "^21.1.6",
@ -55,13 +55,13 @@
"prettier-plugin-organize-imports": "^3.2.4",
"prettier-plugin-packagejson": "^2.5.0",
"rimraf": "^5.0.5",
"rollup": "^4.14.1",
"rollup": "^4.16.1",
"rollup-plugin-polyfill-node": "^0.13.0",
"rollup-plugin-visualizer": "^5.12.0",
"stats.js": "^0.17.0",
"turbo": "^1.13.2",
"typescript": "^5.4.5",
"vite": "^5.2.8",
"vite": "^5.2.10",
"xml-formatter": "^3.6.2"
}
}

1
packages/g6/__tests__/demos/index.ts
View File

@ -96,6 +96,7 @@ export * from './plugin-grid-line';
export * from './plugin-history';
export * from './plugin-hull';
export * from './plugin-legend';
export * from './plugin-timebar';
export * from './plugin-toolbar-build-in';
export * from './plugin-toolbar-iconfont';
export * from './plugin-tooltip';

125
packages/g6/__tests__/demos/plugin-timebar.ts Normal file
View File

@ -0,0 +1,125 @@
import type { GraphData, Timebar } from '@/src';
import { Graph } from '@/src';
const formatId = (index: number) => `0${index}`.slice(-2);
const formatTime = (time: number) => {
const year = new Date(time).getFullYear();
const month = new Date(time).getMonth() + 1;
const date = new Date(time).getDate();
return `${year}-${month}-${date}`;
};
export const pluginTimebar: TestCase = async (context) => {
const startTime = new Date('2023-08-01 00:00:00').getTime();
const diff = 3600 * 24 * 1000;
const timebarData = [10, 2, 3, 4, 15, 10, 6].map((value, index) => ({
time: new Date(startTime + index * diff),
value,
}));
const [rows, cols] = [7, 7];
const data: GraphData = {
nodes: new Array(rows * cols).fill(0).map((_, index) => ({
id: `${formatId(index)}`,
data: {
timestamp: startTime + (index % cols) * diff,
value: index % 20,
label: formatTime(startTime + (index % cols) * diff),
},
})),
edges: [],
};
for (let i = 0; i < rows * cols; i++) {
if (i % cols < cols - 1) {
data.edges!.push({
source: `${formatId(i)}`,
target: `${formatId(i + 1)}`,
});
}
if (i / rows < rows - 1) {
data.edges!.push({
source: `${formatId(i)}`,
target: `${formatId(i + rows)}`,
});
}
}
const graph = new Graph({
...context,
data,
node: {
style: {
labelText: (d) => `${d.data!.label}`,
},
},
layout: {
type: 'grid',
sortBy: 'id',
cols,
rows,
},
autoFit: 'view',
padding: [10, 0, 65, 0],
behaviors: ['drag-element'],
plugins: [
{
type: 'timebar',
key: 'timebar',
data: timebarData,
mode: 'modify',
},
],
});
pluginTimebar.form = (panel) => {
const config = { position: 'bottom', mode: 'modify', timebarType: 'time' };
const timebar = graph.getPluginInstance<Timebar>('timebar');
const operation = {
play: () => timebar.play(),
pause: () => timebar.pause(),
reset: () => timebar.reset(),
backward: () => timebar.backward(),
forward: () => timebar.forward(),
};
const handleChange = () => {
graph.updatePlugin({
key: 'timebar',
...config,
});
};
return [
panel.add(config, 'position', ['top', 'bottom']).onChange((position: 'top' | 'bottom') => {
graph.setOptions({
padding: position === 'top' ? [100, 0, 10, 0] : [10, 0, 65, 0],
});
graph.updatePlugin({
key: 'timebar',
position,
});
graph.fitView();
}),
panel.add(config, 'mode', ['modify', 'visibility']).onChange(handleChange),
panel.add(config, 'timebarType', ['time', 'chart']).onChange(() => {
graph.setOptions({
padding: config.position === 'top' ? [100, 0, 10, 0] : [10, 0, 100, 0],
});
graph.updatePlugin({
key: 'timebar',
...config,
height: 100,
});
graph.fitView();
}),
...Object.keys(operation).map((key) => panel.add(operation, key)),
];
};
await graph.render();
return graph;
};

138
packages/g6/__tests__/snapshots/plugins/timebar/backward-1-time-modify.svg Normal file
View File

@ -0,0 +1,138 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g transform="matrix(0.893662,0,0,0.893662,25.869619,-11.192552)">
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,0,0)"/>
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,47.714287)">
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,119.142860)">
<path fill="none" d="M 0,0 L 0,47.428565979003906" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,190.571426)">
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,262)">
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,333.428558)">
<path fill="none" d="M 0,0 L 0,47.4285888671875" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,404.857147)">
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,35.714287,35.714287)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,107.142860)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,178.571426)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,321.428558)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,392.857147)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,464.285706)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

1188
packages/g6/__tests__/snapshots/plugins/timebar/backward-1-time-visibility.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

1188
packages/g6/__tests__/snapshots/plugins/timebar/default.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

313
packages/g6/__tests__/snapshots/plugins/timebar/forward-1-time-modify.svg Normal file
View File

@ -0,0 +1,313 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g transform="matrix(0.893662,0,0,0.893662,25.869619,-11.192552)">
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,0,0)"/>
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,47.714287)">
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,119.142860)">
<path fill="none" d="M 0,0 L 0,47.428565979003906" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,190.571426)">
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,262)">
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,333.428558)">
<path fill="none" d="M 0,0 L 0,47.4285888671875" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,404.857147)">
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,35.714287)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,107.142860,47.714287)">
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,107.142860)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,107.142860,119.142860)">
<path fill="none" d="M 0,0 L 0,47.428565979003906" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.428565979003906" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,178.571426)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,107.142860,190.571426)">
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,250)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,107.142860,262)">
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,321.428558)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,107.142860,333.428558)">
<path fill="none" d="M 0,0 L 0,47.4285888671875" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.4285888671875" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,392.857147)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,107.142860,404.857147)">
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,464.285706)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,35.714287,35.714287)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,107.142860)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,178.571426)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,321.428558)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,392.857147)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,464.285706)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,35.714287)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,107.142860)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,178.571426)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,321.428558)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,392.857147)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,464.285706)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

1188
packages/g6/__tests__/snapshots/plugins/timebar/forward-1-time-visibility.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

488
packages/g6/__tests__/snapshots/plugins/timebar/forward-2-time-modify.svg Normal file
View File

@ -0,0 +1,488 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g transform="matrix(0.893662,0,0,0.893662,25.869619,-11.192552)">
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,0,0)"/>
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,47.714287)">
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,119.142860)">
<path fill="none" d="M 0,0 L 0,47.428565979003906" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,190.571426)">
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,262)">
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,333.428558)">
<path fill="none" d="M 0,0 L 0,47.4285888671875" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,404.857147)">
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,35.714287)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,107.142860,47.714287)">
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,107.142860)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,107.142860,119.142860)">
<path fill="none" d="M 0,0 L 0,47.428565979003906" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.428565979003906" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,178.571426)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,107.142860,190.571426)">
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,250)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,107.142860,262)">
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,321.428558)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,107.142860,333.428558)">
<path fill="none" d="M 0,0 L 0,47.4285888671875" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.4285888671875" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,392.857147)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,107.142860,404.857147)">
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,464.285706)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,119.142860,35.714287)">
<path fill="none" d="M 0,0 L 47.428565979003906,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.428565979003906,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,178.571426,47.714287)">
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,119.142860,107.142860)">
<path fill="none" d="M 0,0 L 47.428565979003906,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.428565979003906,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,178.571426,119.142860)">
<path fill="none" d="M 0,0 L 0,47.428565979003906" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.428565979003906" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,119.142860,178.571426)">
<path fill="none" d="M 0,0 L 47.428565979003906,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.428565979003906,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,178.571426,190.571426)">
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,119.142860,250)">
<path fill="none" d="M 0,0 L 47.428565979003906,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.428565979003906,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,178.571426,262)">
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,119.142860,321.428558)">
<path fill="none" d="M 0,0 L 47.428565979003906,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.428565979003906,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,178.571426,333.428558)">
<path fill="none" d="M 0,0 L 0,47.4285888671875" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.4285888671875" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,119.142860,392.857147)">
<path fill="none" d="M 0,0 L 47.428565979003906,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.428565979003906,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,178.571426,404.857147)">
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,119.142860,464.285706)">
<path fill="none" d="M 0,0 L 47.428565979003906,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.428565979003906,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,35.714287,35.714287)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,107.142860)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,178.571426)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,321.428558)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,392.857147)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,464.285706)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,35.714287)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,107.142860)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,178.571426)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,321.428558)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,392.857147)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,464.285706)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,178.571426,35.714287)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-3
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,178.571426,107.142860)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-3
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,178.571426,178.571426)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-3
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,178.571426,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-3
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,178.571426,321.428558)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-3
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,178.571426,392.857147)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-3
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,178.571426,464.285706)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-3
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

138
packages/g6/__tests__/snapshots/plugins/timebar/play-1-time-modify.svg Normal file
View File

@ -0,0 +1,138 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g transform="matrix(0.893662,0,0,0.893662,25.869619,-11.192552)">
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,0,0)"/>
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,47.714287)">
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,119.142860)">
<path fill="none" d="M 0,0 L 0,47.428565979003906" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,190.571426)">
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,262)">
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,333.428558)">
<path fill="none" d="M 0,0 L 0,47.4285888671875" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,404.857147)">
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,35.714287,35.714287)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,107.142860)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,178.571426)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,321.428558)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,392.857147)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,464.285706)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

313
packages/g6/__tests__/snapshots/plugins/timebar/play-2-time-modify.svg Normal file
View File

@ -0,0 +1,313 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g transform="matrix(0.893662,0,0,0.893662,25.869619,-11.192552)">
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,0,0)"/>
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,47.714287)">
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,119.142860)">
<path fill="none" d="M 0,0 L 0,47.428565979003906" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,190.571426)">
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,262)">
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,333.428558)">
<path fill="none" d="M 0,0 L 0,47.4285888671875" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,35.714287,404.857147)">
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,35.714287)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,107.142860,47.714287)">
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,107.142860)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,107.142860,119.142860)">
<path fill="none" d="M 0,0 L 0,47.428565979003906" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.428565979003906" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,178.571426)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,107.142860,190.571426)">
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.42857360839844" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,250)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,107.142860,262)">
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,321.428558)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,107.142860,333.428558)">
<path fill="none" d="M 0,0 L 0,47.4285888671875" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.4285888671875" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,392.857147)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,107.142860,404.857147)">
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 0,47.428558349609375" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,47.714287,464.285706)">
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 47.42857360839844,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,35.714287,35.714287)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,107.142860)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,178.571426)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,321.428558)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,392.857147)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,35.714287,464.285706)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-1
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,35.714287)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,107.142860)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,178.571426)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,321.428558)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,392.857147)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,107.142860,464.285706)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
2023-8-2
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

1188
packages/g6/__tests__/snapshots/plugins/timebar/reset-modify.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

1188
packages/g6/__tests__/snapshots/plugins/timebar/reset-visibility.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

92
packages/g6/__tests__/unit/plugins/timebar.spec.ts Normal file
View File

@ -0,0 +1,92 @@
import type { Timebar } from '@/src';
import { pluginTimebar } from '@@/demos';
import { createDemoGraph, sleep } from '@@/utils';
describe('plugin timebar', () => {
it('time type, modify', async () => {
const graph = await createDemoGraph(pluginTimebar);
await expect(graph).toMatchSnapshot(__filename);
const timebar = graph.getPluginInstance<Timebar>('timebar');
timebar.play();
await sleep(1000);
await expect(graph).toMatchSnapshot(__filename, 'play-1-time-modify');
await sleep(1000);
await expect(graph).toMatchSnapshot(__filename, 'play-2-time-modify');
timebar.pause();
timebar.backward();
await expect(graph).toMatchSnapshot(__filename, 'backward-1-time-modify');
timebar.forward();
await expect(graph).toMatchSnapshot(__filename, 'forward-1-time-modify');
timebar.forward();
await expect(graph).toMatchSnapshot(__filename, 'forward-2-time-modify');
timebar.reset();
await expect(graph).toMatchSnapshot(__filename, 'reset-modify');
graph.destroy();
});
it('time type, visibility', async () => {
const graph = await createDemoGraph(pluginTimebar);
const timebar = graph.getPluginInstance<Timebar>('timebar');
timebar.update({
mode: 'visibility',
});
timebar.forward();
await expect(graph).toMatchSnapshot(__filename, 'forward-1-time-visibility');
timebar.forward();
timebar.forward();
timebar.backward();
await expect(graph).toMatchSnapshot(__filename, 'backward-1-time-visibility');
timebar.reset();
await expect(graph).toMatchSnapshot(__filename, 'reset-visibility');
graph.destroy();
});
it('chart type', async () => {
// In current, cannot capture the timebar snapshot
});
it('event callback', async () => {
const onChange = jest.fn();
const onRest = jest.fn();
const onPlay = jest.fn();
const onPause = jest.fn();
const onBackward = jest.fn();
const onForward = jest.fn();
const graph = await createDemoGraph(pluginTimebar);
const timebar = graph.getPluginInstance<Timebar>('timebar');
timebar.update({
onChange,
onRest,
onPlay,
onPause,
onBackward,
onForward,
});
// api calls do not trigger event callbacks
// timebar.play();
// expect(onPlay).toHaveBeenCalledTimes(1);
// timebar.pause();
// expect(onPause).toHaveBeenCalledTimes(1);
// timebar.forward();
// expect(onForward).toHaveBeenCalledTimes(1);
// timebar.backward();
// expect(onBackward).toHaveBeenCalledTimes(1);
});
});

2
packages/g6/src/exports.ts
View File

@ -67,6 +67,7 @@ export {
History,
Hull,
Legend,
Timebar,
Toolbar,
Tooltip,
Watermark,
@ -143,6 +144,7 @@ export type {
HistoryOptions,
HullOptions,
LegendOptions,
TimebarOptions,
ToolbarOptions,
TooltipOptions,
WatermarkOptions,

2
packages/g6/src/plugins/index.ts
View File

@ -6,6 +6,7 @@ export { GridLine } from './grid-line';
export { History } from './history';
export { Hull } from './hull';
export { Legend } from './legend';
export { Timebar } from './timebar';
export { Toolbar } from './toolbar';
export { Tooltip } from './tooltip';
export { Watermark } from './watermark';
@ -18,6 +19,7 @@ export type { GridLineOptions } from './grid-line';
export type { HistoryOptions } from './history';
export type { HullOptions } from './hull';
export type { LegendOptions } from './legend';
export type { TimebarOptions } from './timebar';
export type { ToolbarOptions } from './toolbar';
export type { TooltipOptions } from './tooltip';
export type { WatermarkOptions } from './watermark';

450
packages/g6/src/plugins/timebar.ts Normal file
View File

@ -0,0 +1,450 @@
import { Timebar as TimebarComponent } from '@antv/component';
import { Canvas } from '@antv/g';
import { Renderer as CanvasRenderer } from '@antv/g-canvas';
import { isArray, isDate, isNumber } from '@antv/util';
import { idOf } from '../utils/id';
import { BasePlugin } from './base-plugin';
import type { TimebarStyleProps as TimebarComponentStyleProps } from '@antv/component';
import type { RuntimeContext } from '../runtime/types';
import type { GraphData } from '../spec';
import type { ElementDatum, ElementType, ID } from '../types';
import type { BasePluginOptions } from './base-plugin';
const prospectiveTimeKeys = ['timestamp', 'time', 'date', 'datetime'];
const PADDING = 10;
/**
* <zh/> Timebar 时间条的配置项。
* <en/> The configuration item of the Timebar.
*/
export interface TimebarOptions extends BasePluginOptions {
/**
* <zh/> 给工具栏的 DOM 追加的类名，便于自定义样式
*
* <en/> The class name appended to the menu DOM for custom styles
* @defaultValue 'g6-timebar'
*/
className?: string;
/**
* <zh/> X 位置
*
* <en/> X position
* @remarks
* <zh/> 设置后 `position` 会失效
*
* <en/> Setting will invalidate `position`
*/
x?: number;
/**
* <zh/> Y 位置
*
* <en/> Y position
* <zh/> 设置后 `position` 会失效
*
* <en/> Setting will invalidate `position`
*/
y?: number;
/**
* <zh/> 时间条宽度
*
* <en/> Timebar width
* @defaultValue 450
*/
width?: number;
/**
* <zh/> 时间条高度
*
* <en/> Timebar height
* @defaultValue 60
*/
height?: number;
/**
* <zh/> Timebar 的位置, 当前可配置 'bottom' | 'top'
*
* <en/> Timebar location, currently configurable 'bottom' | 'top'
* @defaultValue 'bottom'
*/
position?: 'bottom' | 'top';
/**
* <zh/> 获取元素时间
*
* <en/> Get element time
*/
getTime?: (datum: ElementDatum) => number;
/**
* <zh/> 时间数据
*
* <en/> Time data
* @remarks
* <zh/> timebarType 为 'chart' 时，需要额外传入 value 字段作为图表数据
*
* <en/> When timebarType is 'chart', you need to pass in the value field as chart data
*/
data: number[] | { time: number; value: number }[];
/**
* <zh/> Timebar 展示类型
* - time: 显示为时间轴
* - chart: 显示为趋势图
*
* <en/> Timebar Displays the type
* - time: Display as a timeline
* - chart: Display as a trend chart
* @defaultValue 'time'
*/
timebarType?: 'time' | 'chart';
/**
* <zh/> 筛选类型
*
* <en/> Filter element types
*/
elementTypes?: ElementType[];
/**
* <zh/> 筛选模式
* - modify: 通过修改图数据进行筛选
* - visibility: 通过修改元素可见性进行筛选
*
* <en/> Filter mode
* - modify: Filter by modifying the graph data.
* - visibility: Filter by modifying element visibility
* @defaultValue 'modify'
*/
mode?: 'modify' | 'visibility';
/**
* <zh/> 当前时间值
*
* <en/> Current time value
*/
values?: number | [number, number] | Date | [Date, Date];
/**
* <zh/> 图表模式下自定义时间格式化
*
* <en/> Custom time formatting in chart mode
*/
labelFormatter?: (time: number | Date) => string;
/**
* <zh/> 是否循环播放
*
* <en/> Whether to loop
*/
loop?: boolean;
/**
* <zh/> 时间区间变化时执行的回调
*
* <en/> Callback executed when the time interval changes
*/
onChange?: (values: number | [number, number]) => void;
/**
* <zh/> 重置时执行的回调
*
* <en/> Callback executed when reset
*/
onReset?: () => void;
/**
* <zh/> 播放速度变化时执行的回调
*
* <en/> Callback executed when the playback speed changes
*/
onSpeedChange?: (speed: number) => void;
/**
* <zh/> 开始播放时执行的回调
*
* <en/> Callback executed when playback starts
*/
onPlay?: () => void;
/**
* <zh/> 暂停时执行的回调
*
* <en/> Callback executed when paused
*/
onPause?: () => void;
/**
* <zh/> 后退时执行的回调
*
* <en/> Callback executed when backward
*/
onBackward?: () => void;
/**
* <zh/> 前进时执行的回调
*
* <en/> Callback executed when forward
*/
onForward?: () => void;
}
/**
* <zh/> 时间组件
*
* <en/> Timebar
*/
export class Timebar extends BasePlugin<TimebarOptions> {
static defaultOptions: Partial<TimebarOptions> = {
position: 'bottom',
enable: true,
timebarType: 'time',
className: 'g6-timebar',
width: 450,
height: 60,
zIndex: 3,
elementTypes: ['node'],
mode: 'modify',
getTime: (datum) => inferTime(datum, prospectiveTimeKeys, undefined),
};
private timebar?: TimebarComponent;
private canvas?: Canvas;
private wrapper?: HTMLElement;
private originalData?: GraphData;
constructor(context: RuntimeContext, options: TimebarOptions) {
super(context, Object.assign({}, Timebar.defaultOptions, options));
this.backup();
this.upsertTimebar();
}
/**
* <zh/> 播放
*
* <en/> Play
*/
public play() {
this.timebar?.play();
}
/**
* <zh/> 暂停
*
* <en/> Pause
*/
public pause() {
this.timebar?.pause();
}
/**
* <zh/> 前进
*
* <en/> Forward
*/
public forward() {
this.timebar?.forward();
}
/**
* <zh/> 后退
*
* <en/> Backward
*/
public backward() {
this.timebar?.backward();
}
/**
* <zh/> 重置
*
* <en/> Reset
*/
public reset() {
this.timebar?.reset();
}
public update(options: Partial<TimebarOptions>) {
super.update(options);
this.backup();
Object.keys(options).forEach((key) => {
switch (key) {
case 'position':
this.upsertWrapper();
break;
default:
this.upsertTimebar();
break;
}
});
}
/**
* <zh/> 备份数据
*
* <en/> Backup data
*/
private backup() {
this.originalData = shallowCopy(this.context.graph.getData());
}
private upsertTimebar() {
const { canvas } = this.context;
const { onChange, timebarType, data, x, y, width, height, mode, ...restOptions } = this.options;
const canvasSize = canvas.getSize();
this.upsertCanvas().ready.then(() => {
const style: TimebarComponentStyleProps = {
x: canvasSize[0] / 2 - width / 2,
y: PADDING,
onChange: (value) => {
const range = (isArray(value) ? value : [value, value]).map((time) =>
isDate(time) ? time.getTime() : time,
) as [number, number];
if (this.options.mode === 'modify') this.filterElements(range);
else this.hiddenElements(range);
onChange?.(range);
},
...restOptions,
data: data.map((datum) => (isNumber(datum) ? { time: datum, value: 0 } : datum)),
width,
height,
type: timebarType,
};
if (!this.timebar) {
this.timebar = new TimebarComponent({ style });
this.canvas?.appendChild(this.timebar);
} else {
this.timebar.update(style);
}
});
}
private upsertWrapper() {
if (!this.wrapper) {
const wrapper = document.createElement('div');
wrapper.style.position = 'absolute';
this.wrapper = wrapper;
}
const { x, y, className, position } = this.options;
if (className) this.wrapper.className = className;
if (isNumber(x) || isNumber(y)) {
Object.assign(this.wrapper.style, {
left: `${x ?? 0}px`,
top: `${y ?? 0}px`,
});
} else {
Object.assign(this.wrapper.style, {
[position === 'top' ? 'bottom' : 'top']: 'unset',
[position === 'top' ? 'top' : 'bottom']: '0px',
});
}
this.context.canvas.getContainer()?.appendChild(this.wrapper);
return this.wrapper;
}
private upsertCanvas() {
const wrapper = this.upsertWrapper();
if (this.canvas) return this.canvas;
const { height } = this.options;
const [width] = this.context.canvas.getSize();
this.canvas = new Canvas({
container: wrapper,
width,
height: height + PADDING,
renderer: this.context.options.renderer?.('main') || new CanvasRenderer(),
supportsMutipleCanvasesInOneContainer: true,
});
return this.canvas;
}
private async filterElements(range: number | [number, number]) {
if (!this.originalData) return;
const { elementTypes, getTime } = this.options;
const { graph, element } = this.context;
const newData = shallowCopy(this.originalData);
elementTypes.forEach((type) => {
const key = `${type}s` as const;
newData[key] = (this.originalData![key] || []).filter((datum) => {
const time = getTime(datum);
if (match(time, range)) return true;
return false;
}) as any;
});
const nodeLikeIds = [...newData.nodes, ...newData.combos].map((datum) => idOf(datum));
newData.edges = newData.edges!.filter((edge) => {
const source = edge.source;
const target = edge.target;
return nodeLikeIds.includes(source) && nodeLikeIds.includes(target);
});
graph.setData(newData);
await element!.draw({ animation: false, silence: true });
}
private hiddenElements(range: number | [number, number]) {
const { graph } = this.context;
const { elementTypes, getTime } = this.options;
const hideElementId: ID[] = [];
const showElementId: ID[] = [];
elementTypes.forEach((elementType) => {
const key = `${elementType}s` as const;
const elementData = this.originalData?.[key] || [];
elementData.forEach((elementDatum) => {
const id = idOf(elementDatum);
const time = getTime(elementDatum);
if (match(time, range)) showElementId.push(id);
else hideElementId.push(id);
});
});
graph.hideElement(hideElementId, false);
graph.showElement(showElementId, false);
}
/**
* <zh/> 销毁时间条
*
* <en/> Destroy the timebar
*/
public destroy(): void {
const { graph } = this.context;
this.originalData && graph.setData({ ...this.originalData });
this.timebar?.destroy();
this.canvas?.destroy();
this.wrapper?.remove();
this.originalData = undefined;
this.wrapper = undefined;
this.timebar = undefined;
this.canvas = undefined;
super.destroy();
}
}
const shallowCopy = (data: GraphData) => {
const { nodes = [], edges = [], combos = [] } = data;
return {
nodes: [...nodes],
edges: [...edges],
combos: [...combos],
};
};
const match = (time: number, range: number | [number, number]) => {
if (isNumber(range)) return time === range;
const [start, end] = range;
return time >= start && time <= end;
};
const inferTime = (datum: ElementDatum, optionsKeys: string[], defaultValue?: any): number => {
for (let i = 0; i < optionsKeys.length; i++) {
const key = optionsKeys[i];
const val = datum.data?.[key];
if (val) return val as number;
}
return defaultValue;
};

14
packages/g6/src/registry/build-in.ts
View File

@ -54,7 +54,18 @@ import {
mindmap,
} from '../layouts';
import { blues, greens, oranges, spectral, tableau } from '../palettes';
import { BubbleSets, Contextmenu, GridLine, History, Hull, Legend, Toolbar, Tooltip, Watermark } from '../plugins';
import {
BubbleSets,
Contextmenu,
GridLine,
History,
Hull,
Legend,
Timebar,
Toolbar,
Tooltip,
Watermark,
} from '../plugins';
import { dark, light } from '../themes';
import { ArrangeDrawOrder, CollapseExpandCombo, ProcessParallelEdges, UpdateRelatedEdge } from '../transforms';
import type { ExtensionRegistry } from './types';
@ -143,6 +154,7 @@ export const BUILT_IN_EXTENSIONS: ExtensionRegistry = {
'grid-line': GridLine,
contextmenu: Contextmenu,
history: History,
timebar: Timebar,
hull: Hull,
legend: Legend,
toolbar: Toolbar,

34
packages/site/examples/plugin/timebar/demo/timebar-chart.ts
View File

@ -1,15 +1,4 @@
import { Graph as BaseGraph, Extensions, extend } from '@antv/g6';
const Graph = extend(BaseGraph, {
plugins: {
toolbar: Extensions.Toolbar,
timebar: Extensions.Timebar,
},
});
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = (container.scrollHeight || 500) - 110;
import { Graph } from '@antv/g6';
const startTime = new Date('2023-08-01').getTime();
const diff = 3600 * 24 * 1000;
@ -37,22 +26,25 @@ const graphData = {
})),
};
new Graph({
container,
width,
height,
const graph = new Graph({
container: 'container',
height: 400,
data: graphData,
modes: {
default: ['drag-canvas', 'drag-element', 'zoom-canvas'],
behaviors: ['drag-canvas', 'drag-element', 'zoom-canvas'],
layout: {
type: 'grid',
},
plugins: [
{
type: 'timebar',
key: 'timebar',
timebarType: 'chart',
width: 450,
height: 120,
data: timebarData,
width: 450,
height: 100,
loop: true,
timebarType: 'chart',
},
],
});
graph.render();

27
packages/site/examples/plugin/timebar/demo/timebar-time.ts
View File

@ -1,15 +1,4 @@
import { Graph as BaseGraph, Extensions, extend } from '@antv/g6';
const Graph = extend(BaseGraph, {
plugins: {
toolbar: Extensions.Toolbar,
timebar: Extensions.Timebar,
},
});
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = (container.scrollHeight || 500) - 110;
import { Graph } from '@antv/g6';
const startTime = new Date('2023-08-01').getTime();
const diff = 3600 * 24 * 1000;
@ -37,13 +26,13 @@ const graphData = {
})),
};
new Graph({
container,
width,
height,
const graph = new Graph({
container: 'container',
data: graphData,
modes: {
default: ['drag-canvas', 'drag-element', 'zoom-canvas'],
height: 400,
behaviors: ['drag-canvas', 'drag-element', 'zoom-canvas'],
layout: {
type: 'grid',
},
plugins: [
{
@ -55,3 +44,5 @@ new Graph({
},
],
});
graph.render();