fix: timebar docs

examples/tool/timebar/demo/slice-timebar.js

@@ -45,8 +45,8 @@ const timebar = new G6.TimeBar({
   width: width,
   height: 150,
   padding: 10,
-  type: 'slice',
-  slice: {
+  type: 'tick',
+  tick: {
     data: timeBarData,
     width: width,
     height: 42,

examples/tool/timebar/index.zh.md

@@ -3,8 +3,50 @@ title: 时间轴
 order: 5
 ---
 
-G6 中内置的 TimeBar 组件。
+[AntV G6](https://github.com/antvis/G6) 内置了三种形态的 TimeBar 组件：
+
+- 带有趋势图的 TimeBar 组件；
+- 简易版的 TimeBar 组件；
+- 刻度 TimeBar 组件。
+
+并且每种类型的 TimeBar 组件都可以配合播放、快进、后退等控制按钮组使用。
+
+<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*DOo6QpfFfMUAAAAAAAAAAAAAARQnAQ' width='500' />
+<br />趋势图 TimeBar 组件<br />
+
+<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*bzGBQKkewZMAAAAAAAAAAAAAARQnAQ' width='500' />
+<br />简易版 TimeBar 组件<br />
+
+<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*kHRkQpnvBmwAAAAAAAAAAAAAARQnAQ' width='500' />
+<br />刻度 TimeBar 组件<br />
+
+<br />在趋势图 TimeBar 基础上，我们可以通过配置数据，实现更加复杂的趋势图 TimeBar 组件，如下图所示。
+
+<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*17VoSoTm9o8AAAAAAAAAAAAAARQnAQ' width='500' />
+
+<br />虽然 G6 提供了各种不同类型的 TimeBar 组件，但在使用的方式却非常简单，通过配置字段就可以进行区分。<br />
 
 ## 使用指南
 
-下面的代码演示展示了如何在图上使用 TimeBar。目前仅提供了三种类型的默认时间轴组件，更多配置的时间轴组件敬请期待。
+使用 G6 内置的 TimeBar 组件，和使用其他组件的方式完全相同。
+
+```javascript
+import G6 from '@antv/g6'
+
+const timebar = new G6.TimeBar({
+  width: 500,
+  height: 150,
+  padding: 10,
+  type: 'trend',
+  trend: {
+    data: timeBarData
+  },
+});
+
+const graph = new G6.Graph({
+  container: 'container',
+  width,
+  height,
+  plugins: [timebar],
+});
+```

site/pages/graphmarker.zh.tsx

@@ -21,7 +21,7 @@ const GraphMarker = () => {
 						title="GraphMarker"
 						style={{ width: '100%', height: '100%', border: 0, borderRadius: '4px', overflow: 'hidden' }}
 						allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
-						sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+						sandbox="allow-downloads allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
 				/>
 			</div>
 		</>

src/plugins/timeBar/index.ts

@@ -7,12 +7,13 @@ import { IGroup, ICanvas } from '@antv/g-base';
 import createDOM from '@antv/dom-util/lib/create-dom'
 import modifyCSS from '@antv/dom-util/lib/modify-css'
 import Base, { IPluginBaseConfig } from '../base';
-import TrendTimeBar, { SliderOption, ControllerCfg } from './trendTimeBar'
+import TrendTimeBar, { SliderOption } from './trendTimeBar'
 import TimeBarSlice, { TimeBarSliceOption } from './timeBarSlice'
 import { IGraph } from '../../interface/graph';
 import { VALUE_CHANGE } from './constant'
-import { GraphData, ShapeStyle } from '../../types';
+import { GraphData, ShapeStyle, TimeBarType } from '../../types';
 import { Interval } from './trend';
+import { ControllerCfg } from './controllerBtn';
 
 // simple 版本默认高度
 const DEFAULT_SIMPLE_HEIGHT = 8
@@ -40,7 +41,7 @@ interface TrendConfig {
   // 样式
   readonly smooth?: boolean;
   readonly isArea?: boolean;
-  readonly backgroundStyle?: ShapeStyle;
+  // readonly backgroundStyle?: ShapeStyle;
   readonly lineStyle?: ShapeStyle;
   readonly areaStyle?: ShapeStyle;
   readonly interval?: Interval;
@@ -54,20 +55,19 @@ interface TimeBarConfig extends IPluginBaseConfig {
   readonly height?: number;
   readonly padding?: number;
 
-  readonly type?: 'trend' | 'simple' | 'slice';
+  readonly type?: TimeBarType;
   // 趋势图配置项
   readonly trend?: TrendConfig;
   // 滑块、及前后背景的配置
   readonly slider?: SliderOption;
 
   // 刻度时间轴配置项
-  readonly slice?: TimeBarSliceOption;
+  readonly tick?: TimeBarSliceOption;
 
   // 控制按钮
   readonly controllerCfg?: ControllerCfg;
 
   rangeChange?: (graph: IGraph, minValue: string, maxValue: string) => void;
-  valueChange?: (graph: IGraph, value: string) => void;
 }
 
 export default class TimeBar extends Base {
@@ -94,7 +94,7 @@ export default class TimeBar extends Base {
         minText: 'min',
         maxText: 'max',
       },
-      slice: {
+      tick: {
         start: 0.1,
         end: 0.9,
         data: []
@@ -192,16 +192,16 @@ export default class TimeBar extends Base {
         },
         controllerCfg
       })
-    } else if (type === 'slice') {
-      const { slice } = this._cfgs
+    } else if (type === 'tick') {
+      const { tick } = this._cfgs
       // 刻度时间轴
       timebar = new TimeBarSlice({
         graph,
         canvas,
         group,
         x: x + padding,
         y: y + padding,
-        ...slice
+        ...tick
       })
     }
 
@@ -215,8 +215,8 @@ export default class TimeBar extends Base {
     const type = this._cfgs.type
     if (type === 'trend' || type === 'simple') {
       trendData = this._cfgs.trend.data
-    } else if (type === 'slice') {
-      trendData = this._cfgs.slice.data
+    } else if (type === 'tick') {
+      trendData = this._cfgs.tick.data
     }
 
     if (!trendData || trendData.length === 0) {
@@ -234,7 +234,7 @@ export default class TimeBar extends Base {
     const minText = trendData[min].date;
     const maxText = trendData[max].date;
 
-    if (type !== 'slice') {
+    if (type !== 'tick') {
       const timebar = this.get('timebar');
       timebar.setText(minText, maxText)
     }
@@ -278,9 +278,9 @@ export default class TimeBar extends Base {
     if (!type || type === 'trend' || type === 'simple') {
       start = this._cfgs.slider.start
       end = this._cfgs.slider.end
-    } else if (type === 'slice') {
-      start = this._cfgs.slice.start
-      end = this._cfgs.slice.end
+    } else if (type === 'tick') {
+      start = this._cfgs.tick.start
+      end = this._cfgs.tick.end
     }
 
     const graph: IGraph = this.get('graph');

src/plugins/timeBar/timeBarSlice.ts

@@ -17,15 +17,6 @@ const DEFAULT_UNSELECTEDTICK_STYLE = {
   fill: '#e6e8e9'
 }
 
-interface TickStyle {
-  fill?: string,
-  stroke?: string,
-  lineWidth?: number,
-  opacity?: number,
-  fillOpacity?: number,
-  strokeOpacity?: number
-}
-
 export interface TimeBarSliceConfig extends TimeBarSliceOption {
   readonly graph: IGraph;
   readonly group: IGroup;
@@ -43,8 +34,8 @@ export interface TimeBarSliceOption {
   readonly padding?: number;
 
   // styles
-  readonly selectedTickStyle?: TickStyle;
-  readonly unselectedTickStyle?: TickStyle
+  readonly selectedTickStyle?: ShapeStyle;
+  readonly unselectedTickStyle?: ShapeStyle
   readonly tooltipBackgroundColor?: string;
 
   readonly start?: number;
@@ -136,8 +127,8 @@ export default class TimeBarSlice {
       data,
       start,
       end,
-      x,
-      y,
+      x = 0,
+      y = 0,
       tickLabelFormatter,
       selectedTickStyle = DEFAULT_SELECTEDTICK_STYLE,
       unselectedTickStyle = DEFAULT_UNSELECTEDTICK_STYLE,

src/plugins/timeBar/trend.ts

@@ -33,7 +33,7 @@ export interface TrendCfg {
   // 样式
   readonly smooth?: boolean;
   readonly isArea?: boolean;
-  readonly backgroundStyle?: ShapeStyle;
+  // readonly backgroundStyle?: ShapeStyle;
   readonly lineStyle?: ShapeStyle;
   readonly areaStyle?: ShapeStyle;
   readonly interval?: Interval;
@@ -77,7 +77,7 @@ export default class Trend {
       smooth = true,
       isArea = false,
       data = [],
-      backgroundStyle,
+      // backgroundStyle,
       lineStyle,
       areaStyle,
       group,
@@ -95,7 +95,7 @@ export default class Trend {
 
     this.smooth = smooth;
     this.isArea = isArea;
-    this.backgroundStyle = Object.assign({} as any, BACKGROUND_STYLE, backgroundStyle);
+    // this.backgroundStyle = Object.assign({} as any, BACKGROUND_STYLE, backgroundStyle);
     this.lineStyle = Object.assign({} as any, LINE_STYLE, lineStyle);
     this.areaStyle = Object.assign({} as any, AREA_STYLE, areaStyle);
     this.intervalConfig = interval
@@ -113,15 +113,15 @@ export default class Trend {
       name: 'trend-group'
     })
     // 背景
-    trendGroup.addShape('rect', {
-      attrs: {
-        x,
-        y,
-        width,
-        height,
-        ...backgroundStyle,
-      },
-    });
+    // trendGroup.addShape('rect', {
+    //   attrs: {
+    //     x,
+    //     y,
+    //     width,
+    //     height,
+    //     ...backgroundStyle,
+    //   },
+    // });
 
     if (data) {
       const path = dataToPath(data, width, height, smooth);

src/plugins/timeBar/trendTimeBar.ts

@@ -2,7 +2,7 @@ import { Event, IGroup, ICanvas, IShape } from '@antv/g-base';
 import { get, size, assign, each } from '@antv/util';
 import Trend, { TrendCfg } from './trend';
 import Handler from './handler';
-import ControllerBtn from './controllerBtn'
+import ControllerBtn, { ControllerCfg } from './controllerBtn'
 import { IGraph } from '../../interface/graph';
 import { ShapeStyle } from '../../types';
 import {
@@ -44,24 +44,6 @@ export const TEXT_STYLE = {
   opacity: 0.45,
 };
 
-export type ControllerCfg = Partial<{
-  readonly x: number;
-  readonly y: number;
-  readonly width: number;
-  readonly height: number;
-  readonly padding: number;
-  /** 播放速度，1 个 tick 花费时间 */
-  readonly speed?: number;
-  /** 是否循环播放 */
-  readonly loop?: boolean;
-
-  readonly fill: string;
-  readonly stroke: string;
-  readonly preBtnStyle: ShapeStyle;
-  readonly nextBtnStyle: ShapeStyle;
-  readonly playBtnStyle: ShapeStyle;
-}>
-
 export type SliderOption = Partial<{
   readonly width?: number;
   readonly height?: number;
@@ -74,9 +56,6 @@ export type SliderOption = Partial<{
     style?: ShapeStyle;
   };
   readonly textStyle?: ShapeStyle;
-  // 允许滑动位置
-  readonly minLimit?: number;
-  readonly maxLimit?: number;
   // 初始位置
   readonly start: number;
   readonly end: number;

src/types/index.ts

@@ -710,3 +710,5 @@ export interface BubblesetCfg {
   memberInfluenceFactor?: number; // member influence factor
   nonMemberInfluenceFactor?: number; // nonMember influence factor
 }
+
+export type TimeBarType = 'trend' | 'simple' | 'tick'