feat(timebar): add timebar

__tests__/integration/components/timebar/controller.ts

@@ -38,7 +38,7 @@ export const TimebarController = it((group) => {
         height: 50,
         speed: 2,
         align: 'right',
-        chartType: 'bar',
+        chartType: 'column',
         selectionType: 'value',
       },
     })

__tests__/integration/components/timebar/index.ts

@@ -1,3 +1,6 @@
 export * from './icons';
 export * from './handle';
 export * from './controller';
+export * from './timebar-basic';
+export * from './timebar-time';
+export * from './timebar-chart';

__tests__/integration/components/timebar/timebar-basic.ts

@@ -0,0 +1,51 @@
+import { it } from '../../utils';
+import { Timebar } from '../../../../src/ui/timebar';
+
+export const TimebarBasic = it({ width: 500, height: 150 }, (group) => {
+  const start = new Date('2023-08-01');
+  const interval = 'day';
+  const diff = 3600 * 24 * 1000;
+  const data = [10, 2, 3, 4, 15, 10, 5, 0, 3, 1].map((value, index) => ({
+    time: new Date(start.getTime() + index * diff),
+    value,
+  }));
+  group.appendChild(
+    new Timebar({
+      style: {
+        type: 'chart',
+        width: 500,
+        height: 150,
+        data,
+        interval,
+        values: [0.25, 0.75],
+        onChange: (value) => {
+          console.log('onChange', value);
+        },
+        onReset: () => {
+          console.log('onReset');
+        },
+        onSpeedChange: (speed) => {
+          console.log('onSpeedChange', speed);
+        },
+        onBackward: () => {
+          console.log('onBackward');
+        },
+        onPlay: () => {
+          console.log('onPlay');
+        },
+        onPause: () => {
+          console.log('onPause');
+        },
+        onForward: () => {
+          console.log('onForward');
+        },
+        onSelectionTypeChange: (type) => {
+          console.log('onSelectionTypeChange', type);
+        },
+        onChartTypeChange: (type) => {
+          console.log('onChartTypeChange', type);
+        },
+      },
+    })
+  );
+});

__tests__/integration/components/timebar/timebar-chart.ts

@@ -0,0 +1,75 @@
+import { it } from '../../utils';
+import { Timebar } from '../../../../src/ui/timebar';
+
+export const TimebarChart = it((group) => {
+  const start = new Date('2023-08-01');
+  const interval = 'day';
+  const diff = 3600 * 24 * 1000;
+  const data = [10, 2, 3, 4, 15, 10, 5, 0, 3, 1].map((value, index) => ({
+    time: new Date(start.getTime() + index * diff),
+    value,
+  }));
+  group.appendChild(
+    new Timebar({
+      style: {
+        x: 0,
+        y: 0,
+        type: 'chart',
+        height: 100,
+        width: 500,
+        interval,
+        data,
+        values: [0.25, 0.75],
+      },
+    })
+  );
+
+  group.appendChild(
+    new Timebar({
+      style: {
+        x: 0,
+        y: 110,
+        height: 100,
+        width: 500,
+        data,
+        interval,
+        values: [0, 0.4],
+        type: 'chart',
+        selectionType: 'value',
+      },
+    })
+  );
+
+  group.appendChild(
+    new Timebar({
+      style: {
+        x: 0,
+        y: 220,
+        height: 100,
+        width: 500,
+        data,
+        interval,
+        values: [0.1, 0.9],
+        type: 'chart',
+        chartType: 'column',
+      },
+    })
+  );
+
+  group.appendChild(
+    new Timebar({
+      style: {
+        x: 0,
+        y: 330,
+        height: 100,
+        width: 500,
+        data,
+        interval,
+        values: [0, 0.6],
+        type: 'chart',
+        chartType: 'column',
+        selectionType: 'value',
+      },
+    })
+  );
+});

__tests__/integration/components/timebar/timebar-time.ts

@@ -0,0 +1,47 @@
+import { it } from '../../utils';
+import { Timebar } from '../../../../src/ui/timebar';
+
+export const TimebarTime = it((group) => {
+  group.appendChild(
+    new Timebar({
+      style: {
+        x: 10,
+        y: 20,
+        type: 'time',
+        height: 50,
+        width: 500,
+        values: [0.25, 0.75],
+      },
+    })
+  );
+
+  group.appendChild(
+    new Timebar({
+      style: {
+        x: 10,
+        y: 90,
+        type: 'time',
+        height: 50,
+        width: 500,
+        values: [0, 0.5],
+        selectionType: 'value',
+      },
+    })
+  );
+
+  group.appendChild(
+    new Timebar({
+      style: {
+        x: 10,
+        y: 160,
+        type: 'time',
+        height: 50,
+        width: 500,
+        values: [0, 0.5],
+        selectionType: 'value',
+        speed: 1.5,
+        playing: true,
+      },
+    })
+  );
+});

package.json

@@ -62,9 +62,9 @@
   "devDependencies": {
     "@antv/g": "^5.14.1",
     "@antv/g-canvas": "^1.9.18",
+    "@antv/g-plugin-control": "^1.9.6",
     "@antv/g-svg": "^1.8.27",
     "@antv/g-webgl": "^1.9.6",
-    "@antv/g-plugin-control": "^1.9.6",
     "@babel/plugin-proposal-decorators": "^7.20.5",
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
@@ -83,12 +83,13 @@
     "@typescript-eslint/parser": "^4.19.0",
     "@vitejs/plugin-react": "^2.2.0",
     "ali-oss": "^6.17.1",
-    "archiver": "^5.3.1",
     "antd": "^5.0.2",
+    "archiver": "^5.3.1",
     "babel-loader": "^8.2.3",
     "canvas": "2.11.0",
     "core-js": "^3.14.0",
     "cross-env": "^7.0.3",
+    "dayjs": "^1.11.9",
     "eslint": "^7.22.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.1.0",

src/ui/timebar/controller.ts

@@ -88,7 +88,7 @@ export class Controller extends GUI<ControllerStyleProps> {
         style.onChange = (value: any) => this.handleFunctionChange(name, { value });
         if (Ctor === PlayPause) style.type = this.attributes.playing ? 'pause' : 'play';
         if (Ctor === SelectionType) style.type = this.attributes.selectionType === 'range' ? 'value' : 'range';
-        if (Ctor === ChartType) style.type = this.attributes.chartType === 'line' ? 'bar' : 'line';
+        if (Ctor === ChartType) style.type = this.attributes.chartType === 'line' ? 'column' : 'line';
       } else {
         // IconBase
         style.onClick = () => this.handleFunctionChange(name, { value: name });