diff --git a/README-zh_CN.md b/README-zh_CN.md index 977518e31a2..b83c9417bd4 100644 --- a/README-zh_CN.md +++ b/README-zh_CN.md @@ -115,6 +115,16 @@ graph.render(); ```bash $ npm install +# lerna bootstrap for multiple packages +$ npm run bootstrap + +# build the packages +$ npm run build:all + +# if you wanna watch one of the packages, e.g. packages/core +$ cd ./packages/core +$ npm run watch + # run test case $ npm test diff --git a/README.md b/README.md index aa79bde69d7..105aecbcc3d 100644 --- a/README.md +++ b/README.md @@ -115,6 +115,16 @@ For more information of the usage, please refer to [Getting Started](https://ant ```bash $ npm install +# lerna bootstrap for multiple packages +$ npm run bootstrap + +# build the packages +$ npm run build:all + +# if you wanna watch one of the packages, e.g. packages/core +$ cd ./packages/core +$ npm run watch + # run test case $ npm test diff --git a/packages/core/package.json b/packages/core/package.json index b33e6208454..c8e458c317c 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -59,7 +59,7 @@ ] }, "dependencies": { - "@antv/algorithm": "^0.0.6", + "@antv/algorithm": "^0.0.7", "@antv/dom-util": "^2.0.1", "@antv/event-emitter": "~0.1.0", "@antv/g-base": "^0.5.1", diff --git a/packages/pc/package.json b/packages/pc/package.json index d2959c99688..8df447d1b9c 100644 --- a/packages/pc/package.json +++ b/packages/pc/package.json @@ -78,7 +78,7 @@ "@antv/g6-core": "^0.0.7", "@antv/g6-plugin": "^0.0.6", "@antv/g6-element": "^0.0.6", - "@antv/algorithm": "^0.0.6", + "@antv/algorithm": "^0.0.7", "@antv/hierarchy": "^0.6.2", "@antv/layout": "^0.0.16", "@antv/matrix-util": "^3.0.4", diff --git a/packages/pc/src/behavior/drag-canvas.ts b/packages/pc/src/behavior/drag-canvas.ts index 67f88327f88..bc80a5c1e10 100644 --- a/packages/pc/src/behavior/drag-canvas.ts +++ b/packages/pc/src/behavior/drag-canvas.ts @@ -94,6 +94,10 @@ export default { return; } + if (!this.shouldBegin.call(this, e)) { + return; + } + if (self.keydown) return; if (!(e.target && e.target.isCanvas && e.target.isCanvas())) return; diff --git a/packages/site/docs/api/Plugins.en.md b/packages/site/docs/api/Plugins.en.md index 676163d5e5f..1019065373a 100644 --- a/packages/site/docs/api/Plugins.en.md +++ b/packages/site/docs/api/Plugins.en.md @@ -339,122 +339,307 @@ const graph = new G6.Graph({ ## TimeBar -**Important Note:** The latest Timebar document is to be updated, please refer to the components in the official website -> TimeBar DEMO. +There are three types of built-in TimeBar in G6: -The built-in TimeBar plugin has the following abilities: +- Time bar with a line chart as background; +- Simple time bar; +- Time bar with descrete ticks. -- Filtering the data of the graph by changing the time range; -- Demonstrating the trending of the data by an attribute on the TimeBar. +All the three types of timebar supports play, fast forward, and fast backward. -img + +
Time bar with a line chart as background
-**Description:** It is a beta version of TimeBar, which will support complex time series graph and analysis in the future. + +
Simple time bar
-### Configuration + +
Time bar with descrete ticks
-| Name | Type | Default | Description | -| --- | --- | --- | --- | -| container | HTMLDivElement | null | The container of the TimeBar. A DOM container with className 'g6-component-timebar' will be used by default | -| width | number | 400 | The width of the TimeBar's container | -| height | number | 400 | The height of the TimeBar's container | -| timebar | TimeBarOption | {} | The style configurations for TimeBar | -| rangeChange | (graph: IGraph, min: number, max: number) => void | null | The callback function after changing the time range | +
Refer to the demos [HERE](https://g6.antv.vision/en/examples/tool/timebar#timebar)
+ +### Common Usage + +Same to other plugins of G6, the users can initiate the TimeBar and assign it to the graph as: + +```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], +}); +``` + +
If you want to use the TimeBar with line chart, assign the `type` to be `trend` when instantiating the TimeBar, which results in: + + + +
Assigning the `type` to be `simple` results in: -**TimeBarOption for timebar** + +
And assigning the `type` to be `tick` results in a TimeBar with descrete ticks. Note that it is different from the above two types of TimeBar, \*\*The TimeBar with decrete ticks is configured with the `tick` object but not the `trend` object. + +```javascript +const timebar = new G6.TimeBar({ + width, + height: 150, + type: 'tick', + tick: { + data: timeBarData, + width, + height: 42, + tickLabelFormatter: (d) => { + const dateStr = `${d.date}`; + if ((count - 1) % 10 === 0) { + return `${dateStr.substr(0, 4)}-${dateStr.substr(4, 2)}-${dateStr.substr(6, 2)}`; + } + return false; + }, + tooltipFomatter: (d) => { + const dateStr = `${d}`; + return `${dateStr.substr(0, 4)}-${dateStr.substr(4, 2)}-${dateStr.substr(6, 2)}`; + }, + }, +}); ``` -interface HandleStyle { - width: number; - height: number; - style: ShapeStyle; + + + +### Definition of the Configurations + +#### Definition of the Interfaces + +The complete interfaces for the TimeBar is shown below: + +```javascript +interface TimeBarConfig extends IPluginBaseConfig { + // position size + readonly x?: number; + readonly y?: number; + readonly width?: number; + readonly height?: number; + readonly padding?: number; + + readonly type?: 'trend' | 'simple' | 'tick'; + // the configuration for the TimeBar with line chart and simple TimeBar, takes effect whtn the type is 'trend' or 'simple' + readonly trend?: TrendConfig; + + // the configurations for the two sliders + readonly slider?: SliderOption; + + // the configuration for the TimeBar with descrete ticks, takes effect whtn the type is 'tick' + readonly tick?: TimeBarSliceOption; + + // the buttons for play, fast forward, and back forward + readonly controllerCfg?: ControllerCfg; + + rangeChange?: (graph: IGraph, minValue: string, maxValue: string) => void; + valueChange?: (graph: IGraph, value: string) => void; } ``` -| Name | Type | Default | Description | +#### The Parameters of the Interfaces + +| Name | Type | Default Value | Description | | --- | --- | --- | --- | -| x | number | 0 | The begining x of the TimeBar | -| y | number | 0 | The begining y of the TimeBar | -| width | number | 400 | The width of the TimeBar | -| height | number | 400 | The height of the TimeBar | -| backgroundStyle | ShapeStyle | {} | The background style of the TimeBar | -| foregroundStyle | ShapeStyle | {} | The foreground style of the TimeBar, which indicates the selected area | -| handlerStyle | HandleStyle | null | The style of the slider handler | -| textStyle | ShapeStyle | null | The style of the texts | -| minLimit | number | 0 | The minimum position for the slider on the left, range from 0 to 1 | -| maxLimit | number | 1 | The maximum position for the slider on the right, range from 0 to 1 | -| start | number | 0 | The initial start position of the slider | -| end | number | 1 | The initial end position of the slider | -| minText | string | null | The text for the minimum value | -| maxText | string | null | The text for the maximum value | -| trend | TrendConfig | null | The configuration of the trend chart on the TimeBar | - -**TrendConfig for trend** - -``` -interface Data { - date: string; - value: number; +| container | HTMLDivElement | null | The DOM container of the TimeBar. By default, the plugin will create a container DOM with 'g6-component-timebar' as className | +| x | number | 0 | The beginning x position of the TimeBar plugin | +| y | number | 0 | The beginning y position of the TimeBar plugin | +| width | number | | **Requred**, the width of the TimBar | +| height | number | | **Requred**, the height of the TimBar | +| padding | number/number[] | 10 | The padding of the container of the TimeBar | +| type | 'trend' / 'simple' / 'tick' | trend | The type of the TimeBar, 'trend' by default | +| trend | TrendConfig | null | The configuration for the TimeBar with line chart and simple TimeBar, takes effect whtn the type is 'trend' or 'simple' | +| slider | SliderOption | null | The configurations for the two sliders | +| tick | TimeBarSliceOption | null | The configuration for the TimeBar with descrete ticks, takes effect whtn the type is 'tick' | +| controllerCfg | ControllerCfg | null | The buttons for play, fast forward, and back forward | +| rangeChange | Function | null | The callback function after the time range is changed. When it is not assigned, the graph elements will be filtered after the time range is changed | + +#### Interface for TrendConfig + +> Does not support the configurations for the style of the tick labels. + +```javascript +interface TrendConfig { + // The data + readonly data: { + date: string; + value: string; + }[]; + // The position and size + readonly x?: number; + readonly y?: number; + readonly width?: number; + readonly height?: number; + // The styles + readonly smooth?: boolean; + readonly isArea?: boolean; + readonly lineStyle?: ShapeStyle; + readonly areaStyle?: ShapeStyle; + readonly interval?: Interval; } ``` -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| data | Data[] | [] | The data of the TimeBar | -| smooth | boolean | false | Whether use the smooth curve instead of polylines for the trend chart | -| isArea | boolean | false | Whether use the area chart instead of line chart | -| lineStyle | ShapeStyle | null | The style of the line for line chart, takes effect when `isArea` is `false` | -| areaStyle | ShapeStyle | null | The style of the area for area chart, takes effect when `isArea` is `true` | +#### Parameters of the TrendConfig -### Usage +| Name | Type | Default Value | Description | +| --- | --- | --- | --- | --- | +| x | number | 0 | The beginning x position of the trend line chart | +| y | number | 0 | The beginning y position of the trend line chart | +| width | number | The width of the TimeBar | The width of the trend line chart of the TimeBar, we suggest to use the default value. If you wanna custom it, please assign the `width` of the slider in the same time | +| height | number | 28 when type='trend'
8 when type='simple' | The height of the TimeBar | The width of the trend line chart of the TimeBar, we suggest to use the default value. If you wanna custom it, please assign the `height` of the slider in the same time | +| smooth | boolean | false | Whether to show a smooth line on the trend line chart | +| isArea | boolean | false | Whether to show a area chart instead | +| lineStyle | ShapeStyle | null | The configurations for the style of the line in the line chart | +| areaStyle | ShapeStyle | null | The configuration for the style of the area in the chart when `isArea` is `true` | +| interval | Interval | null | The configuration for the style of the bars in the chart. When it is assigned, a mixed trend chart will take place | + +#### Interfaces of SliderOption -#### Default Usage +```javascript +export type SliderOption = Partial<{ + readonly width?: number; + readonly height?: number; + readonly backgroundStyle?: ShapeStyle; + readonly foregroundStyle?: ShapeStyle; + // The style of the sliders + readonly handlerStyle?: { + width?: number; + height?: number; + style?: ShapeStyle; + }; + readonly textStyle?: ShapeStyle; + // The start and end position for the sliders, which indicate the data range for the filtering. Ranges from 0 to 1 + readonly start: number; + readonly end: number; + // The labels for the sliders + readonly minText: string; + readonly maxText: string; +}>; +``` + +#### Parameters for the SliderOption + +| Name | Type | Default Value | Description | +| --- | --- | --- | --- | +| width | number | The width of the container of the TimeBar - 2 \* padding | The width of the background trend chart. We suggest to use the default value. If you wanna custom it, assign it the the `width` in the `trend` in the same time | +| height | number | 28 when type='trend'
8 when type='simple' | The height of the background trend chart. We suggest to use the default value. If you wanna custom it, assign it the the `height` in the `trend` in the same time | +| backgroundStyle | ShapeStyle | null | The configuration for the style of the background | +| foregroundStyle | ShapeStyle | null | The configuration for the style of the forground | +| handlerStyle | ShapeStyle | null | The configuration for the style of the two sliders | +| textStyle | ShapeStyle | null | The configuration for the style of the labels on the two sliders | +| start | number | 0.1 | The start position for the sliders, which indicate the start of the data range for the filtering. Ranges from 0 to `end` | +| end | number | 0.9 | The end position for the sliders, which indicate the end of the data range for the filtering. Ranges from `start` to 1 | +| minText | string | min | The label for the left slider | +| maxText | string | max | The label for the right slider | + +#### TimeBarSliceOption +```javascript +export interface TimeBarSliceOption { + // position size + readonly x?: number; + readonly y?: number; + readonly width?: number; + readonly height?: number; + readonly padding?: number; + + // styles + readonly selectedTickStyle?: TickStyle; + readonly unselectedTickStyle?: TickStyle + readonly tooltipBackgroundColor?: string; + + readonly start?: number; + readonly end?: number; + + // data + readonly data: { + date: string; + value: string; + }[]; + + // custom the formatter function for the tick labels + readonly tickLabelFormatter?: (d: any) => string | boolean; + // custom the formatter function for the tooltip + readonly tooltipFomatter?: (d: any) => string; +} ``` -const timebar = new G6.TimeBar(); -const graph = new G6.Graph({ - //... Other configurations - plugins: [timebar], // Use timebar plugin -}); -``` +#### Parameters for the TimeBarSliceOption -##### Style Configuration +| Name | Type | Default Value | Description | +| --- | --- | --- | --- | +| x | number | 0 | The beginning x position for the TimeBar | +| y | number | 0 | The beginning y position for the TimeBar | +| width | number | | **Requred**, the width of the TimeBar | +| height | number | | **Requred**, the height of the TimeBar | +| padding | number / number[] | 0 | The padding of the container of the TimeBar | +| selectedTickStyle | ShapeStyle | null | The style of the tick(s) which is(are) selected | +| unselectedTickStyle | ShapeStyle | null | The style of the tick(s) which is(are) unselected | +| tooltipBackgroundColor | ShapeStyle | null | The background style for the tooltip | +| start | number | 0.1 | The start position for the sliders, which indicate the start of the data range for the filtering. Ranges from 0 to `end` | +| end | number | 0.9 | The end position for the sliders, which indicate the end of the data range for the filtering. Ranges from `start` to 1 | +| data | any[] | [] | **Requred**, the data for the ticks | +| tickLabelFormatter | Function | null | The formatter function for customing the labels of the ticks | +| tooltipFomatter | Function | null | The formatter function for customing the tooltip | -It is free to configure the style for the TimeBar, and listen to the value changing to do some response. +#### Interface of the ControllerCfg -``` -const timebar = new G6.TimeBar({ - width: 600, - timebar: { - width: 600, - backgroundStyle: { - fill: '#08979c', - opacity: 0.3 - }, - foregroundStyle: { - fill: '#40a9ff', - opacity: 0.4 - }, - trend: { - data: timeBarData, - isArea: false, - smooth: true, - lineStyle: { - stroke: '#9254de' - } - } - }, - rangeChange: (graph, min, max) => { - // Get the instance of the graph and the range of the timebar, you can control the rendering of the graph by yourself here - console.log(graph, min, max) - } -}); +> Does not support for now -const graph = new G6.Graph({ - //... Other configurations - plugins: [timebar], // Use timebar plugin -}); -``` +> Does not support the style configuration for controller buttons + +> Does not support loop play + +```javascript +type ControllerCfg = Partial<{ + readonly x?: number; + readonly y?: number; + readonly width: number; + readonly height: number; + /** the play spped, means the playing time for 1 tick */ + readonly speed?: number; + /** whether play in loop */ + readonly loop?: boolean; + readonly hiddleToggle: boolean; + readonly fill?: string; + readonly stroke?: string; + readonly preBtnStyle?: ShapeStyle; + readonly nextBtnStyle?: ShapeStyle; + readonly playBtnStyle?: ShapeStyle; +}> +``` + +#### Parameters for ControllerCfg + +| Name | Type | Default Value | Description | +| --- | --- | --- | --- | +| x | number | 0 | The beginning x position for the buttons group of the TimeBar | +| y | number | 0 | The beginning y position for the buttons group of the TimeBar | +| width | number | The width of the TimeBar | The width of the buttons group of the TimeBar | +| height | number | 40 | The width of the buttons group of the TimeBar | +| speed | number | 1 | The play speed | +| loop | boolean | false | _Does not support for now_, whether play in loop | +| hiddleToggle | boolean | true | Whther hide the switch of the time range type | +| fill | string | | The fillling color for the buttons group | +| stroke | string | | The stroke color for the buttons group | +| preBtnStyle | ShapeStyle | null | The style configuration for the backward button | +| nextBtnStyle | ShapeStyle | null | The style configuration for the forward button | +| playBtnStyle | ShapeStyle | null | The style configuration for the play button | ## ToolTip @@ -486,7 +671,7 @@ const tooltip = new G6.Tooltip({ const outDiv = document.createElement('div'); outDiv.style.width = '180px'; outDiv.innerHTML = ` -

自定义tooltip

+

Custom Tooltip

` diff --git a/packages/site/docs/api/Plugins.zh.md b/packages/site/docs/api/Plugins.zh.md index 8e74a7e99ac..44c91ddb835 100644 --- a/packages/site/docs/api/Plugins.zh.md +++ b/packages/site/docs/api/Plugins.zh.md @@ -649,8 +649,8 @@ interface TimeBarConfig extends IPluginBaseConfig { | container | HTMLDivElement | null | TimeBar 容器，如果不设置，则默认创建 className 为 g6-component-timebar 的 DOM 容器 | | x | number | 0 | TimeBar 开始 x 坐标 | | y | number | 0 | TimeBar 开始 y 坐标 | -| width | number | | 必选，TimeBar 容器宽度 | -| height | number | | 必选，TimeBar 高度 | +| width | number | | **必选**，TimeBar 容器宽度 | +| height | number | | **必选**，TimeBar 高度 | | padding | number/number[] | 10 | TimeBar 距离容器的间距值 | | type | 'trend' / 'simple' / 'tick' | trend | 默认的 TimeBar 类型，默认为趋势图样式 | | trend | TrendConfig | null | Timebar 中趋势图的配置项，当 type 为 trend 或 simple 时，该字段必选 | diff --git a/packages/site/examples/case/australiaFire/demo/index.js b/packages/site/examples/case/australiaFire/demo/index.js index dd84f81e3ab..6816611a91c 100644 --- a/packages/site/examples/case/australiaFire/demo/index.js +++ b/packages/site/examples/case/australiaFire/demo/index.js @@ -197,8 +197,8 @@ G6.registerNode( const tooltip = new G6.Tooltip({ // offsetX and offsetY include the padding of the parent container // offsetX 与 offsetY 需要加上父容器的 padding - offsetX: 140 + 10, - offsetY: 100 + 10, + offsetX: 10, + offsetY: 10, // the types of items that allow the tooltip show up // 允许出现 tooltip 的 item 类型 itemTypes: ['node'], diff --git a/packages/site/examples/case/christmasBubbles/demo/christmasBubbles.js b/packages/site/examples/case/christmasBubbles/demo/christmasBubbles.js index a5fd97aa5fd..c3884057e05 100644 --- a/packages/site/examples/case/christmasBubbles/demo/christmasBubbles.js +++ b/packages/site/examples/case/christmasBubbles/demo/christmasBubbles.js @@ -1,6 +1,6 @@ import G6 from '@antv/g6'; +import AntVUtil from '@antv/util'; -const Util = G6.Util; let showNodes = []; let showEdges = []; let curShowNodes = []; @@ -308,7 +308,7 @@ G6.registerEdge( drawShape(cfg, group) { const self = this; let shapeStyle = self.getShapeStyle(cfg); - shapeStyle = Util.mix(shapeStyle, { + shapeStyle = AntVUtil.mix(shapeStyle, { opacity: 0, strokeOpacity: 0, }); diff --git a/packages/site/examples/case/decisionTree/demo/index.js b/packages/site/examples/case/decisionTree/demo/index.js index 1e6eee5801e..007388df6c1 100644 --- a/packages/site/examples/case/decisionTree/demo/index.js +++ b/packages/site/examples/case/decisionTree/demo/index.js @@ -538,8 +538,8 @@ const initGraph = (data) => { const tooltip = new G6.Tooltip({ // offsetX and offsetY include the padding of the parent container // offsetX 与 offsetY 需要加上父容器的 padding - offsetX: 140 + 10, - offsetY: 100 + 10, + offsetX: 20, + offsetY: 30, // the types of items that allow the tooltip show up // 允许出现 tooltip 的 item 类型 itemTypes: ['node'], diff --git a/packages/site/examples/case/metroLines/demo/index.js b/packages/site/examples/case/metroLines/demo/index.js index 39ed81c8b2a..a10ac7026dd 100644 --- a/packages/site/examples/case/metroLines/demo/index.js +++ b/packages/site/examples/case/metroLines/demo/index.js @@ -222,7 +222,8 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/8c2353b0-99a9-4a93-a5e1-3e7 graph.get('container').style.background = '#000'; graph.get('container').style.backgroundImage = 'url("https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*G23iRqkiibIAAAAAAAAAAABkARQnAQ")'; -graph.get('container').style.backgroundSize = 'auto 100%'; +graph.get('container').style.backgroundSize = '500px 500px'; +graph.get('container').style.backgroundRepeat = 'no-repeat'; function scaleNodesPoints(nodes, edges, graphSize) { const size = graphSize[0] < graphSize[1] ? graphSize[0] : graphSize[1]; diff --git a/packages/site/examples/interaction/highlight/demo/activateRelations.js b/packages/site/examples/interaction/highlight/demo/activateRelations.js index f176eab5fd0..55a2ab5a055 100644 --- a/packages/site/examples/interaction/highlight/demo/activateRelations.js +++ b/packages/site/examples/interaction/highlight/demo/activateRelations.js @@ -16,8 +16,8 @@ insertCss(` const tooltip = new G6.Tooltip({ // offsetX and offsetY include the padding of the parent container // offsetX 与 offsetY 需要加上父容器的 padding - offsetX: 140 + 10, - offsetY: 100 + 10, + offsetX: 30, + offsetY: 30, // the types of items that allow the tooltip show up // 允许出现 tooltip 的 item 类型 itemTypes: ['node', 'edge'], diff --git a/packages/site/examples/interaction/highlight/demo/highlightDark.js b/packages/site/examples/interaction/highlight/demo/highlightDark.js index ac50efb2b2b..f3c0cd69044 100644 --- a/packages/site/examples/interaction/highlight/demo/highlightDark.js +++ b/packages/site/examples/interaction/highlight/demo/highlightDark.js @@ -16,8 +16,8 @@ insertCss(` const tooltip = new G6.Tooltip({ // offsetX and offsetY include the padding of the parent container // offsetX 与 offsetY 需要加上父容器的 padding - offsetX: 140 + 10, - offsetY: 100 + 10, + offsetX: 30, + offsetY: 30, // the types of items that allow the tooltip show up // 允许出现 tooltip 的 item 类型 itemTypes: ['node', 'edge'], diff --git a/packages/site/examples/scatter/node/demo/node.js b/packages/site/examples/scatter/node/demo/node.js index fe7fea3dfe8..c459d51d8f6 100644 --- a/packages/site/examples/scatter/node/demo/node.js +++ b/packages/site/examples/scatter/node/demo/node.js @@ -195,8 +195,10 @@ G6.registerNode( }); image.animate( (ratio) => { - const matrix = Util.mat3.create(); - const toMatrix = Util.transform(matrix, [['r', ratio * Math.PI * 2]]); + const toMatrix = Util.transform( + [1, 0, 0, 0, 1, 0, 0, 0, 1], + [['r', ratio * Math.PI * 2]], + ); return { matrix: toMatrix, }; diff --git a/packages/site/examples/tool/toolbar/demo/toolbar.js b/packages/site/examples/tool/toolbar/demo/toolbar.js index 23437eaa5a3..97ed1a9b82f 100644 --- a/packages/site/examples/tool/toolbar/demo/toolbar.js +++ b/packages/site/examples/tool/toolbar/demo/toolbar.js @@ -69,7 +69,7 @@ const width = container.scrollWidth; const height = container.scrollHeight || 500; const toolbar = new G6.ToolBar({ - position: { x: 130, y: 70 }, + position: { x: 10, y: 10 }, }); const graph = new G6.Graph({