feat(plugins): add timebar (#5666)

* feat(plugins): add timebar

* refactor: adjust timebar component

---------

Co-authored-by: wb-xcf804241 <[email protected]>
Co-authored-by: Aaron <[email protected]>

package.json

@@ -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"
   }
 }

packages/g6/__tests__/demos/index.ts

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

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>('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;
+};