From 2774818a44f0b99f65f9150919d415eaf08eee53 Mon Sep 17 00:00:00 2001 From: Aaron Date: Sun, 28 Apr 2024 16:27:20 +0800 Subject: [PATCH] refactor: adjust timebar component --- packages/g6/__tests__/demos/index.ts | 3 +- .../__tests__/demos/plugin-timebar-modify.ts | 68 - .../demos/plugin-timebar-visibility.ts | 68 - packages/g6/__tests__/demos/plugin-timebar.ts | 125 ++ .../timebar/backward-1-time-modify.svg | 138 ++ .../timebar/backward-1-time-visibility.svg | 1188 +++++++++++++++++ .../snapshots/plugins/timebar/default.svg | 1188 +++++++++++++++++ .../plugins/timebar/forward-1-time-modify.svg | 313 +++++ .../timebar/forward-1-time-visibility.svg | 1188 +++++++++++++++++ .../plugins/timebar/forward-2-time-modify.svg | 488 +++++++ .../plugins/timebar/play-1-time-modify.svg | 138 ++ .../plugins/timebar/play-2-time-modify.svg | 313 +++++ .../timebar-chart-backward.svg | 157 --- .../timebar-chart-pause.svg | 217 --- .../timebar-chart-play.svg | 97 -- .../timebar-chart-reset.svg | 277 ---- .../timebar-time-backward.svg | 97 -- .../timebar-time-pause.svg | 97 -- .../timebar-time-play.svg | 97 -- .../timebar-time-reset.svg | 600 --------- .../timebar-chart-backward.svg | 600 --------- .../timebar-chart-pause.svg | 600 --------- .../timebar-chart-play.svg | 600 --------- .../timebar-chart-reset.svg | 600 --------- .../timebar-time-backward.svg | 600 --------- .../timebar-time-pause.svg | 600 --------- .../timebar-time-play.svg | 600 --------- .../timebar-time-reset.svg | 600 --------- .../plugins/timebar/reset-modify.svg | 1188 +++++++++++++++++ .../plugins/timebar/reset-visibility.svg | 1188 +++++++++++++++++ .../g6/__tests__/unit/plugins/timebar.spec.ts | 92 ++ .../timebar/plugin-timebar-modify.spec.ts | 59 - .../timebar/plugin-timebar-visibility.spec.ts | 59 - .../unit/plugins/timebar/util.spec.ts | 13 - packages/g6/src/exports.ts | 2 + packages/g6/src/plugins/timebar.ts | 450 +++++++ packages/g6/src/plugins/timebar/index.ts | 277 ---- packages/g6/src/plugins/timebar/util.ts | 39 - 38 files changed, 8000 insertions(+), 7024 deletions(-) delete mode 100644 packages/g6/__tests__/demos/plugin-timebar-modify.ts delete mode 100644 packages/g6/__tests__/demos/plugin-timebar-visibility.ts create mode 100644 packages/g6/__tests__/demos/plugin-timebar.ts create mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/backward-1-time-modify.svg create mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/backward-1-time-visibility.svg create mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/default.svg create mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/forward-1-time-modify.svg create mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/forward-1-time-visibility.svg create mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/forward-2-time-modify.svg create mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/play-1-time-modify.svg create mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/play-2-time-modify.svg delete mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-chart-backward.svg delete mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-chart-pause.svg delete mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-chart-play.svg delete mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-chart-reset.svg delete mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-time-backward.svg delete mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-time-pause.svg delete mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-time-play.svg delete mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-time-reset.svg delete mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-chart-backward.svg delete mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-chart-pause.svg delete mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-chart-play.svg delete mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-chart-reset.svg delete mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-time-backward.svg delete mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-time-pause.svg delete mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-time-play.svg delete mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-time-reset.svg create mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/reset-modify.svg create mode 100644 packages/g6/__tests__/snapshots/plugins/timebar/reset-visibility.svg create mode 100644 packages/g6/__tests__/unit/plugins/timebar.spec.ts delete mode 100644 packages/g6/__tests__/unit/plugins/timebar/plugin-timebar-modify.spec.ts delete mode 100644 packages/g6/__tests__/unit/plugins/timebar/plugin-timebar-visibility.spec.ts delete mode 100644 packages/g6/__tests__/unit/plugins/timebar/util.spec.ts create mode 100644 packages/g6/src/plugins/timebar.ts delete mode 100644 packages/g6/src/plugins/timebar/index.ts delete mode 100644 packages/g6/src/plugins/timebar/util.ts diff --git a/packages/g6/__tests__/demos/index.ts b/packages/g6/__tests__/demos/index.ts index 38a566456d..f59db2e213 100644 --- a/packages/g6/__tests__/demos/index.ts +++ b/packages/g6/__tests__/demos/index.ts @@ -95,8 +95,7 @@ export * from './plugin-grid-line'; export * from './plugin-history'; export * from './plugin-hull'; export * from './plugin-legend'; -export * from './plugin-timebar-modify'; -export * from './plugin-timebar-visibility'; +export * from './plugin-timebar'; export * from './plugin-toolbar-build-in'; export * from './plugin-toolbar-iconfont'; export * from './plugin-tooltip'; diff --git a/packages/g6/__tests__/demos/plugin-timebar-modify.ts b/packages/g6/__tests__/demos/plugin-timebar-modify.ts deleted file mode 100644 index 8e44d18407..0000000000 --- a/packages/g6/__tests__/demos/plugin-timebar-modify.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { Graph } from '@/src'; - -export const pluginTimeBarModifyBuildIn: TestCase = async (context) => { - const startTime = new Date('2023-08-01').getTime(); - const diff = 3600 * 24 * 1000; - const timebarData = [10, 2, 3, 4, 15, 10, 5, 0, 3, 1].map((value, index) => ({ - time: new Date(startTime + index * diff), - value, - label: new Date(startTime + index * diff).toLocaleString(), - })); - const graphData = { - nodes: new Array(49).fill(0).map((_, index) => ({ - id: `node-${index}`, - data: { - timestamp: startTime + (index % 10) * diff, - value: index % 20, - label: new Date(startTime + (index % 10) * diff).toLocaleString(), - parentId: index < 2 ? `combo-${index}` : null, - }, - })), - edges: new Array(49).fill(0).map((_, i) => ({ - id: `edge-${i}`, - source: `node-${i % 30}`, - target: `node-${(i % 20) + 29}`, - data: { - edgeType: 'e1', - }, - })), - combo: [ - { - id: 'combo-0', - data: { - timestamp: startTime + diff, - value: 1, - label: new Date(startTime + diff).toLocaleString(), - }, - }, - { - id: 'combo-1', - data: { - timestamp: startTime + 3 * diff, - value: 3, - label: new Date(startTime + 3 * diff).toLocaleString(), - }, - }, - ], - }; - - const graph = new Graph({ - ...context, - data: graphData, - layout: { - type: 'grid', - }, - plugins: [ - { - type: 'timebar', - key: 'timebar', - data: timebarData, - mode: 'modify', - }, - ], - }); - - await graph.render(); - - return graph; -}; diff --git a/packages/g6/__tests__/demos/plugin-timebar-visibility.ts b/packages/g6/__tests__/demos/plugin-timebar-visibility.ts deleted file mode 100644 index e3b10ca87d..0000000000 --- a/packages/g6/__tests__/demos/plugin-timebar-visibility.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { Graph } from '@/src'; - -export const pluginTimeBarVisibilityBuildIn: TestCase = async (context) => { - const startTime = new Date('2023-08-01').getTime(); - const diff = 3600 * 24 * 1000; - const timebarData = [10, 2, 3, 4, 15, 10, 5, 0, 3, 1].map((value, index) => ({ - time: new Date(startTime + index * diff), - value, - label: new Date(startTime + index * diff).toLocaleString(), - })); - const graphData = { - nodes: new Array(49).fill(0).map((_, index) => ({ - id: `node-${index}`, - data: { - timestamp: startTime + (index % 10) * diff, - value: index % 20, - label: new Date(startTime + (index % 10) * diff).toLocaleString(), - parentId: index < 2 ? `combo-${index}` : null, - }, - })), - edges: new Array(49).fill(0).map((_, i) => ({ - id: `edge-${i}`, - source: `node-${i % 30}`, - target: `node-${(i % 20) + 29}`, - data: { - edgeType: 'e1', - }, - })), - combo: [ - { - id: 'combo-0', - data: { - timestamp: startTime + diff, - value: 1, - label: new Date(startTime + diff).toLocaleString(), - }, - }, - { - id: 'combo-1', - data: { - timestamp: startTime + 3 * diff, - value: 3, - label: new Date(startTime + 3 * diff).toLocaleString(), - }, - }, - ], - }; - - const graph = new Graph({ - ...context, - data: graphData, - layout: { - type: 'grid', - }, - plugins: [ - { - type: 'timebar', - key: 'timebar', - data: timebarData, - mode: 'visibility', - }, - ], - }); - - await graph.render(); - - return graph; -}; diff --git a/packages/g6/__tests__/demos/plugin-timebar.ts b/packages/g6/__tests__/demos/plugin-timebar.ts new file mode 100644 index 0000000000..a4fe5b416b --- /dev/null +++ b/packages/g6/__tests__/demos/plugin-timebar.ts @@ -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'); + 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; +}; diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/backward-1-time-modify.svg b/packages/g6/__tests__/snapshots/plugins/timebar/backward-1-time-modify.svg new file mode 100644 index 0000000000..6a21df28fd --- /dev/null +++ b/packages/g6/__tests__/snapshots/plugins/timebar/backward-1-time-modify.svg @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/backward-1-time-visibility.svg b/packages/g6/__tests__/snapshots/plugins/timebar/backward-1-time-visibility.svg new file mode 100644 index 0000000000..b55b74c9b7 --- /dev/null +++ b/packages/g6/__tests__/snapshots/plugins/timebar/backward-1-time-visibility.svg @@ -0,0 +1,1188 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/default.svg b/packages/g6/__tests__/snapshots/plugins/timebar/default.svg new file mode 100644 index 0000000000..5ec7065a41 --- /dev/null +++ b/packages/g6/__tests__/snapshots/plugins/timebar/default.svg @@ -0,0 +1,1188 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/forward-1-time-modify.svg b/packages/g6/__tests__/snapshots/plugins/timebar/forward-1-time-modify.svg new file mode 100644 index 0000000000..2eab8a1485 --- /dev/null +++ b/packages/g6/__tests__/snapshots/plugins/timebar/forward-1-time-modify.svg @@ -0,0 +1,313 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/forward-1-time-visibility.svg b/packages/g6/__tests__/snapshots/plugins/timebar/forward-1-time-visibility.svg new file mode 100644 index 0000000000..d6454efcd6 --- /dev/null +++ b/packages/g6/__tests__/snapshots/plugins/timebar/forward-1-time-visibility.svg @@ -0,0 +1,1188 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/forward-2-time-modify.svg b/packages/g6/__tests__/snapshots/plugins/timebar/forward-2-time-modify.svg new file mode 100644 index 0000000000..39518c9a29 --- /dev/null +++ b/packages/g6/__tests__/snapshots/plugins/timebar/forward-2-time-modify.svg @@ -0,0 +1,488 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-3 + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/play-1-time-modify.svg b/packages/g6/__tests__/snapshots/plugins/timebar/play-1-time-modify.svg new file mode 100644 index 0000000000..6a21df28fd --- /dev/null +++ b/packages/g6/__tests__/snapshots/plugins/timebar/play-1-time-modify.svg @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/play-2-time-modify.svg b/packages/g6/__tests__/snapshots/plugins/timebar/play-2-time-modify.svg new file mode 100644 index 0000000000..2eab8a1485 --- /dev/null +++ b/packages/g6/__tests__/snapshots/plugins/timebar/play-2-time-modify.svg @@ -0,0 +1,313 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-chart-backward.svg b/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-chart-backward.svg deleted file mode 100644 index fa1ea6909d..0000000000 --- a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-chart-backward.svg +++ /dev/null @@ -1,157 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-chart-pause.svg b/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-chart-pause.svg deleted file mode 100644 index 5fda0d0968..0000000000 --- a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-chart-pause.svg +++ /dev/null @@ -1,217 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-chart-play.svg b/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-chart-play.svg deleted file mode 100644 index ebeb34820c..0000000000 --- a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-chart-play.svg +++ /dev/null @@ -1,97 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-chart-reset.svg b/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-chart-reset.svg deleted file mode 100644 index 00d2abb0fe..0000000000 --- a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-chart-reset.svg +++ /dev/null @@ -1,277 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-time-backward.svg b/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-time-backward.svg deleted file mode 100644 index ebeb34820c..0000000000 --- a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-time-backward.svg +++ /dev/null @@ -1,97 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-time-pause.svg b/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-time-pause.svg deleted file mode 100644 index ebeb34820c..0000000000 --- a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-time-pause.svg +++ /dev/null @@ -1,97 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-time-play.svg b/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-time-play.svg deleted file mode 100644 index ebeb34820c..0000000000 --- a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-time-play.svg +++ /dev/null @@ -1,97 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-time-reset.svg b/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-time-reset.svg deleted file mode 100644 index e7da69aec2..0000000000 --- a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-modify/timebar-time-reset.svg +++ /dev/null @@ -1,600 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-chart-backward.svg b/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-chart-backward.svg deleted file mode 100644 index 211c0c20f0..0000000000 --- a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-chart-backward.svg +++ /dev/null @@ -1,600 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-chart-pause.svg b/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-chart-pause.svg deleted file mode 100644 index 46be32df6c..0000000000 --- a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-chart-pause.svg +++ /dev/null @@ -1,600 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-chart-play.svg b/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-chart-play.svg deleted file mode 100644 index 81f4536c4b..0000000000 --- a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-chart-play.svg +++ /dev/null @@ -1,600 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-chart-reset.svg b/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-chart-reset.svg deleted file mode 100644 index ef0450a5db..0000000000 --- a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-chart-reset.svg +++ /dev/null @@ -1,600 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-time-backward.svg b/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-time-backward.svg deleted file mode 100644 index 81f4536c4b..0000000000 --- a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-time-backward.svg +++ /dev/null @@ -1,600 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-time-pause.svg b/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-time-pause.svg deleted file mode 100644 index 81f4536c4b..0000000000 --- a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-time-pause.svg +++ /dev/null @@ -1,600 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-time-play.svg b/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-time-play.svg deleted file mode 100644 index 81f4536c4b..0000000000 --- a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-time-play.svg +++ /dev/null @@ -1,600 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-time-reset.svg b/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-time-reset.svg deleted file mode 100644 index 91de88533b..0000000000 --- a/packages/g6/__tests__/snapshots/plugins/timebar/plugin-timebar-visibility/timebar-time-reset.svg +++ /dev/null @@ -1,600 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/reset-modify.svg b/packages/g6/__tests__/snapshots/plugins/timebar/reset-modify.svg new file mode 100644 index 0000000000..6760b3e36b --- /dev/null +++ b/packages/g6/__tests__/snapshots/plugins/timebar/reset-modify.svg @@ -0,0 +1,1188 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/snapshots/plugins/timebar/reset-visibility.svg b/packages/g6/__tests__/snapshots/plugins/timebar/reset-visibility.svg new file mode 100644 index 0000000000..1832505e39 --- /dev/null +++ b/packages/g6/__tests__/snapshots/plugins/timebar/reset-visibility.svg @@ -0,0 +1,1188 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + + + + + 2023-8-1 + + + + + + + + + + + + 2023-8-2 + + + + + + + + + + + + 2023-8-3 + + + + + + + + + + + + 2023-8-4 + + + + + + + + + + + + 2023-8-5 + + + + + + + + + + + + 2023-8-6 + + + + + + + + + + + + 2023-8-7 + + + + + + + + \ No newline at end of file diff --git a/packages/g6/__tests__/unit/plugins/timebar.spec.ts b/packages/g6/__tests__/unit/plugins/timebar.spec.ts new file mode 100644 index 0000000000..fdc03ee2eb --- /dev/null +++ b/packages/g6/__tests__/unit/plugins/timebar.spec.ts @@ -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.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.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.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); + }); +}); diff --git a/packages/g6/__tests__/unit/plugins/timebar/plugin-timebar-modify.spec.ts b/packages/g6/__tests__/unit/plugins/timebar/plugin-timebar-modify.spec.ts deleted file mode 100644 index 9fa9ed2148..0000000000 --- a/packages/g6/__tests__/unit/plugins/timebar/plugin-timebar-modify.spec.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { pluginTimeBarModifyBuildIn } from '@/__tests__/demos'; -import { createDemoGraph, sleep } from '@@/utils'; - -describe('plugin timebar modify', () => { - it('timebar', async () => { - const graph = await createDemoGraph(pluginTimeBarModifyBuildIn); - const container = graph.getCanvas().getContainer()!; - - expect(graph.getPlugins().length).toBe(1); - expect(container.querySelectorAll('.g6-timebar').length).toBe(1); - - graph.emit('timebar:handle', { handle: 'play' }); - await sleep(2000); - - await expect(graph).toMatchSnapshot(__filename, 'timebar-time-play'); - - graph.emit('timebar:handle', { handle: 'backward' }); - await sleep(1000); - - await expect(graph).toMatchSnapshot(__filename, 'timebar-time-backward'); - - graph.emit('timebar:handle', { handle: 'pause' }); - await sleep(1000); - - await expect(graph).toMatchSnapshot(__filename, 'timebar-time-pause'); - - graph.emit('timebar:handle', { handle: 'reset' }); - await expect(graph).toMatchSnapshot(__filename, 'timebar-time-reset'); - - graph.updatePlugin({ - type: 'timebar', - key: 'timebar', - width: 550, - height: 120, - elementTypes: ['node', 'combo'], - timebarType: 'chart', - }); - - graph.emit('timebar:handle', { handle: 'play' }); - await sleep(2000); - - await expect(graph).toMatchSnapshot(__filename, 'timebar-chart-play'); - - graph.emit('timebar:handle', { handle: 'backward' }); - await sleep(1000); - - await expect(graph).toMatchSnapshot(__filename, 'timebar-chart-backward'); - - graph.emit('timebar:handle', { handle: 'pause' }); - await sleep(1000); - - await expect(graph).toMatchSnapshot(__filename, 'timebar-chart-pause'); - - graph.emit('timebar:handle', { handle: 'reset' }); - await expect(graph).toMatchSnapshot(__filename, 'timebar-chart-reset'); - - graph.destroy(); - }); -}); diff --git a/packages/g6/__tests__/unit/plugins/timebar/plugin-timebar-visibility.spec.ts b/packages/g6/__tests__/unit/plugins/timebar/plugin-timebar-visibility.spec.ts deleted file mode 100644 index 31b83a53c2..0000000000 --- a/packages/g6/__tests__/unit/plugins/timebar/plugin-timebar-visibility.spec.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { pluginTimeBarVisibilityBuildIn } from '@/__tests__/demos'; -import { createDemoGraph, sleep } from '@@/utils'; - -describe('plugin timebar visibility', () => { - it('timebar', async () => { - const graph = await createDemoGraph(pluginTimeBarVisibilityBuildIn); - const container = graph.getCanvas().getContainer()!; - - expect(graph.getPlugins().length).toBe(1); - expect(container.querySelectorAll('.g6-timebar').length).toBe(1); - - graph.emit('timebar:handle', { handle: 'play' }); - await sleep(2000); - - await expect(graph).toMatchSnapshot(__filename, 'timebar-time-play'); - - graph.emit('timebar:handle', { handle: 'backward' }); - await sleep(1000); - - await expect(graph).toMatchSnapshot(__filename, 'timebar-time-backward'); - - graph.emit('timebar:handle', { handle: 'pause' }); - await sleep(1000); - - await expect(graph).toMatchSnapshot(__filename, 'timebar-time-pause'); - - graph.emit('timebar:handle', { handle: 'reset' }); - await expect(graph).toMatchSnapshot(__filename, 'timebar-time-reset'); - - graph.updatePlugin({ - type: 'timebar', - key: 'timebar', - width: 550, - height: 120, - elementTypes: ['node', 'combo'], - timebarType: 'chart', - }); - - graph.emit('timebar:handle', { handle: 'play' }); - await sleep(2000); - - await expect(graph).toMatchSnapshot(__filename, 'timebar-chart-play'); - - graph.emit('timebar:handle', { handle: 'backward' }); - await sleep(1000); - - await expect(graph).toMatchSnapshot(__filename, 'timebar-chart-backward'); - - graph.emit('timebar:handle', { handle: 'pause' }); - await sleep(1000); - - await expect(graph).toMatchSnapshot(__filename, 'timebar-chart-pause'); - - graph.emit('timebar:handle', { handle: 'reset' }); - await expect(graph).toMatchSnapshot(__filename, 'timebar-chart-reset'); - - graph.destroy(); - }); -}); diff --git a/packages/g6/__tests__/unit/plugins/timebar/util.spec.ts b/packages/g6/__tests__/unit/plugins/timebar/util.spec.ts deleted file mode 100644 index 08187ea5e8..0000000000 --- a/packages/g6/__tests__/unit/plugins/timebar/util.spec.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { parseLevelPositionToStyle, tryToGet } from '@/src/plugins/timebar/util'; - -describe('util', () => { - it('parseLevelPositionToStyle', () => { - expect(parseLevelPositionToStyle('top', [200, 40])).toEqual('position:relative;top:0;'); - expect(parseLevelPositionToStyle('bottom', [200, 40])).toEqual('position:relative;bottom:-40px;'); - }); - it('tryToGet', () => { - expect(tryToGet({ key1: 1, key2: 2 }, ['key1'])).toEqual(1); - expect(tryToGet({ key1: 1, key2: 2 }, ['key2'])).toEqual(2); - expect(tryToGet({ key1: 1, key2: 2 }, ['key3'])).toEqual(undefined); - }); -}); diff --git a/packages/g6/src/exports.ts b/packages/g6/src/exports.ts index 0064b26f55..9103ebb6f7 100644 --- a/packages/g6/src/exports.ts +++ b/packages/g6/src/exports.ts @@ -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, diff --git a/packages/g6/src/plugins/timebar.ts b/packages/g6/src/plugins/timebar.ts new file mode 100644 index 0000000000..e81bc73d83 --- /dev/null +++ b/packages/g6/src/plugins/timebar.ts @@ -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; + +/** + * Timebar 时间条的配置项。 + * The configuration item of the Timebar. + */ +export interface TimebarOptions extends BasePluginOptions { + /** + * 给工具栏的 DOM 追加的类名，便于自定义样式 + * + * The class name appended to the menu DOM for custom styles + * @defaultValue 'g6-timebar' + */ + className?: string; + /** + * X 位置 + * + * X position + * @remarks + * 设置后 `position` 会失效 + * + * Setting will invalidate `position` + */ + x?: number; + /** + * Y 位置 + * + * Y position + * 设置后 `position` 会失效 + * + * Setting will invalidate `position` + */ + y?: number; + /** + * 时间条宽度 + * + * Timebar width + * @defaultValue 450 + */ + width?: number; + /** + * 时间条高度 + * + * Timebar height + * @defaultValue 60 + */ + height?: number; + /** + * Timebar 的位置, 当前可配置 'bottom' | 'top' + * + * Timebar location, currently configurable 'bottom' | 'top' + * @defaultValue 'bottom' + */ + position?: 'bottom' | 'top'; + /** + * 获取元素时间 + * + * Get element time + */ + getTime?: (datum: ElementDatum) => number; + /** + * 时间数据 + * + * Time data + * @remarks + * timebarType 为 'chart' 时，需要额外传入 value 字段作为图表数据 + * + * When timebarType is 'chart', you need to pass in the value field as chart data + */ + data: number[] | { time: number; value: number }[]; + /** + * Timebar 展示类型 + * - time: 显示为时间轴 + * - chart: 显示为趋势图 + * + * Timebar Displays the type + * - time: Display as a timeline + * - chart: Display as a trend chart + * @defaultValue 'time' + */ + timebarType?: 'time' | 'chart'; + /** + * 筛选类型 + * + * Filter element types + */ + elementTypes?: ElementType[]; + /** + * 筛选模式 + * - modify: 通过修改图数据进行筛选 + * - visibility: 通过修改元素可见性进行筛选 + * + * Filter mode + * - modify: Filter by modifying the graph data. + * - visibility: Filter by modifying element visibility + * @defaultValue 'modify' + */ + mode?: 'modify' | 'visibility'; + /** + * 当前时间值 + * + * Current time value + */ + values?: number | [number, number] | Date | [Date, Date]; + /** + * 图表模式下自定义时间格式化 + * + * Custom time formatting in chart mode + */ + labelFormatter?: (time: number | Date) => string; + /** + * 是否循环播放 + * + * Whether to loop + */ + loop?: boolean; + /** + * 时间区间变化时执行的回调 + * + * Callback executed when the time interval changes + */ + onChange?: (values: number | [number, number]) => void; + /** + * 重置时执行的回调 + * + * Callback executed when reset + */ + onReset?: () => void; + /** + * 播放速度变化时执行的回调 + * + * Callback executed when the playback speed changes + */ + onSpeedChange?: (speed: number) => void; + /** + * 开始播放时执行的回调 + * + * Callback executed when playback starts + */ + onPlay?: () => void; + /** + * 暂停时执行的回调 + * + * Callback executed when paused + */ + onPause?: () => void; + /** + * 后退时执行的回调 + * + * Callback executed when backward + */ + onBackward?: () => void; + /** + * 前进时执行的回调 + * + * Callback executed when forward + */ + onForward?: () => void; +} + +/** + * 时间组件 + * + * Timebar + */ +export class Timebar extends BasePlugin { + static defaultOptions: Partial = { + 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(); + } + + /** + * 播放 + * + * Play + */ + public play() { + this.timebar?.play(); + } + + /** + * 暂停 + * + * Pause + */ + public pause() { + this.timebar?.pause(); + } + + /** + * 前进 + * + * Forward + */ + public forward() { + this.timebar?.forward(); + } + + /** + * 后退 + * + * Backward + */ + public backward() { + this.timebar?.backward(); + } + + /** + * 重置 + * + * Reset + */ + public reset() { + this.timebar?.reset(); + } + + public update(options: Partial) { + super.update(options); + this.backup(); + + Object.keys(options).forEach((key) => { + switch (key) { + case 'position': + this.upsertWrapper(); + break; + default: + this.upsertTimebar(); + break; + } + }); + } + + /** + * 备份数据 + * + * 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); + } + + /** + * 销毁时间条 + * + * 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; +}; diff --git a/packages/g6/src/plugins/timebar/index.ts b/packages/g6/src/plugins/timebar/index.ts deleted file mode 100644 index bc05118110..0000000000 --- a/packages/g6/src/plugins/timebar/index.ts +++ /dev/null @@ -1,277 +0,0 @@ -import { Timebar as GUITimebar } from '@antv/component'; -import { Canvas } from '@antv/g'; -import { createDOM, get, isArray, isDate, isFunction, isNumber, set } from '@antv/util'; -import { BasePlugin } from '../base-plugin'; -import { parseLevelPositionToStyle, tryToGet } from './util'; - -import { Renderer as CanvasRenderer } from '@antv/g-canvas'; - -import type { TimebarStyleProps } from '@antv/component'; -import type { RuntimeContext } from '../../runtime/types'; -import type { EdgeData, GraphData, NodeData } from '../../spec'; -import type { ElementType, ID } from '../../types'; -import type { BasePluginOptions } from '../base-plugin'; -import type { Datum } from './util'; - -const prospectiveTimeKeys = ['timestamp', 'time', 'date', 'datetime']; -const prospectiveValueKeys = ['value', 'date', 'data']; - -type TimebarChangeData = number | [number, number] | Date | [Date, Date]; - -/** - * Timebar 时间条的配置项。 - * The configuration item of the Timebar. - */ -export type TimebarOptions = BasePluginOptions & - Partial & { - /** - * 给工具栏的 DOM 追加的 classname，便于自定义样式。默认是包含 `g6-timebar`。 - * The classname appended to the menu DOM for custom styles. The default is `g6-timebar`. - */ - className?: string; - /** - * Timebar 的位置, 当前可配置 'bottom' | 'top'。 - * Timebar location, currently configurable 'bottom' | 'top'. - */ - position?: 'bottom' | 'top'; - /** - * Timebar 展示类型。 - * Timebar Displays the type. - */ - timebarType?: 'time' | 'chart'; - /** - * 筛选类型。 - * Filter element types. - */ - elementTypes?: ElementType[]; - /** - * 筛选模式 - * - modify: 通过修改图数据进行筛选 - * - visibility: 通过修改元素可见性进行筛选 - * Filter mode. - * - modify: Filter by modifying the graph data. - * - visibility: Filter by modifying element visibility. - */ - mode?: 'modify' | 'visibility'; - }; - -/** - * 时间组件 - * - * Timebar. - */ -export class Timebar extends BasePlugin { - static defaultOptions: Partial = { - position: 'bottom', - enable: true, - timebarType: 'time', - className: 'g6-timebar', - width: 450, - height: 60, - zIndex: 3, - padding: 4, - elementTypes: ['node'], - mode: 'modify', - getTime: (datum: Datum) => tryToGet(datum, prospectiveTimeKeys, undefined), - getvalue: (datum: Datum) => tryToGet(datum, prospectiveValueKeys, undefined), - }; - - private timebar?: GUITimebar; - private timebarCanvas?: Canvas; - private wrapper?: HTMLElement; - private originalData?: GraphData; - - constructor(context: RuntimeContext, options: TimebarOptions) { - super(context, Object.assign({}, Timebar.defaultOptions, options)); - this.update(options); - } - - public async update(options: Partial) { - super.update(options); - this.createTimebar(); - this.originalData = { ...this.context.graph.getData() }; - } - - private createTimebar() { - const { canvas, graph } = this.context; - const { onChange, timebarType, x, y, width, height, mode, padding, ...style } = this.options; - - const data = this.getTimeData(); - - const bound = canvas.getSize(); - - this.createTimeBarCanvas(); - if (!this.timebarCanvas) return; - - this.timebarCanvas.ready.then(() => { - this.timebar = new GUITimebar({ - style: { - onChange: (v) => { - const timestamps = this.getTimestamps(v); - if (mode === 'modify') { - this.filterElements(timestamps); - } else { - this.hiddenElments(timestamps); - } - onChange?.(v); - }, - x: isNumber(x) ? x : (bound[0] - Number(width)) / 2, - y: isNumber(y) ? y : padding, - ...style, - data, - width, - height, - type: timebarType, - }, - }); - - this.timebarCanvas?.appendChild(this.timebar); - graph.on('timebar:handle', this.timebarHandle); - }); - } - - private timebarHandle = (ev: any) => { - if (!this.timebar || !ev) return; - const handle = ev.handle as 'play' | 'pause' | 'reset' | 'backward'; - - if (isFunction(this.timebar[handle])) { - this.timebar[handle](); - } - }; - - private getTimeData() { - const { data, getTime, getvalue } = this.options; - return data.map((datum: Datum) => ({ - time: getTime?.(datum) || datum?.time, - value: getvalue?.(datum) || datum?.value, - })); - } - - private createTimeBarCanvas() { - const { canvas } = this.context; - const { className, height, padding, position } = this.options; - const container = canvas.getContainer(); - - const bound = canvas.getSize(); - - this.wrapper = createDOM( - `
`, - ); - container?.appendChild(this.wrapper); - - this.timebarCanvas = new Canvas({ - container: this.wrapper, - width: bound[0], - height: Number(height) + padding * 2, - devicePixelRatio: undefined, - renderer: new CanvasRenderer(), - supportsMutipleCanvasesInOneContainer: true, - background: '#fff', - }); - } - - private getTimestamps = (changeTime: TimebarChangeData) => - (isArray(changeTime) ? changeTime : [changeTime, changeTime]).map((v) => (isDate(v) ? v.getTime() : v)); - - private async filterElements(timestamps: number[]) { - if (!this.originalData) return; - const { elementTypes, getTime } = this.options; - const { graph, element } = this.context; - - const filterId = [] as ID[]; - - const newData = { ...this.originalData }; - - elementTypes.forEach((type) => { - const key = `${type}s`; - const data = get(newData, [key]) as NodeData[]; - if (data) { - set( - newData, - [key], - data.filter(({ id, data }) => { - if (!id) return true; - const timestamp = getTime(data); - if (timestamp && (timestamps[0] > timestamp || timestamps[1] < timestamp)) { - filterId.push(id); - return false; - } - return true; - }), - ); - } - }); - - set( - newData, - ['edges'], - get(newData, ['edges'], []).filter(({ id, target, source }: EdgeData) => { - if (!id) return true; - return !filterId.includes(target) && !filterId.includes(source); - }), - ); - - graph.setData(newData); - await element!.draw({ animation: false, silence: true }); - } - - private hiddenElments(timestamps: number[]) { - const { graph } = this.context; - const { elementTypes } = this.options; - const hideElementId: ID[] = []; - const showElementId: ID[] = []; - - const edgeData = this.originalData?.edges || []; - - const filterElements = []; - - if (elementTypes.includes('node')) { - const nodeData = this.originalData?.nodes || []; - filterElements.push(...nodeData); - } - if (elementTypes.includes('combo')) { - const comboData = this.originalData?.combos || []; - filterElements.push(...comboData); - } - - filterElements.forEach(({ id, data }) => { - const timestamp = get(data, ['timestamp']); - if (!id) return; - if (!timestamp || timestamps[0] > timestamp || timestamps[1] < timestamp) { - hideElementId.push(id); - } else { - showElementId.push(id); - } - }); - - edgeData.forEach(({ id, target, source }) => { - if (!id) return; - if (hideElementId.includes(target) || hideElementId.includes(source)) { - hideElementId.push(id); - } else { - showElementId.push(id); - } - }); - - graph.hideElement(hideElementId, false); - graph.showElement(showElementId, false); - } - - /** - * 销毁工具栏。 - * Destroy the toolbar. - */ - public destroy(): void { - const { graph } = this.context; - graph.off('timebar:handle', this.timebarHandle); - this.originalData && graph.setData({ ...this.originalData }); - this.timebar?.destroy(); - this.wrapper?.remove(); - this.originalData = undefined; - this.wrapper = undefined; - this.timebar = undefined; - this.timebarCanvas = undefined; - - super.destroy(); - } -} diff --git a/packages/g6/src/plugins/timebar/util.ts b/packages/g6/src/plugins/timebar/util.ts deleted file mode 100644 index 160e100fdd..0000000000 --- a/packages/g6/src/plugins/timebar/util.ts +++ /dev/null @@ -1,39 +0,0 @@ -export type Datum = Record; - -/** - * 水平方向的位置转化为 timebar 外部 dom 对应样式. - * - * The horizontal position is converted to a timebar external dom corresponding style. - * @param position 'bottom' | 'top' - * @param bound [number, number] - * @returns string - */ -export function parseLevelPositionToStyle(position: 'bottom' | 'top', bound: [number, number]) { - let style = 'position:relative;'; - - if (position === 'top') { - style += `top:0;`; - } else { - style += `bottom:-${bound[1]}px;`; - } - - return style; -} - -/** - * 从对象中获取 keys 数组中的任意一个key的值 - * - * Gets the value of any key in the keys array from the object. - * @param datum Datum - * @param optionsKeys string[] - * @param defaultValue any - * @returns any - */ -export function tryToGet(datum: Datum, optionsKeys: string[], defaultValue?: T): T | undefined { - for (let i = 0; i < optionsKeys.length; i++) { - const key = optionsKeys[i]; - const val = datum?.[key] as T; - if (val) return val; - } - return defaultValue; -}