-
Notifications
You must be signed in to change notification settings - Fork 604
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(interaction): 内置封装 brush 交互 (#2719)
* feat(interaction): add brush features and add to scatter * feat: add brush to column and bar plot, add docs and demos * docs: 修改 brush demo 截图 * feat(brush): 新增 brush-x, brush-y 的刷选高亮交互 & 增加 demo * test(brush): 添加column, bar, scatter 等 brush 单测 * feat(brush): 添加 brush filter 的事件监听文档 & demo * docs(brush): 增加 brush demo * feat(brush): 添加 brush 交互事件文档和 demo * docs(brush): 补充 brush 刷选交互的文档 * docs(brush): 优化 brush 文档 * feat(brush-type): 支持更多 brush 类型,如 circle, path * docs(brush): 刷选demo优化 * test: 修改 brush 单测 * feat(brush): 添加 brush filter 的重置按钮的相关配置
- Loading branch information
Showing
35 changed files
with
1,474 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import { Bar } from '../../../../src'; | ||
| import { salesByArea } from '../../../data/sales'; | ||
| import { createDiv } from '../../../utils/dom'; | ||
|
|
||
| describe('bar interaction', () => { | ||
| const plot = new Bar(createDiv('x*y'), { | ||
| width: 400, | ||
| height: 300, | ||
| data: salesByArea, | ||
| yField: 'area', | ||
| xField: 'sales', | ||
| }); | ||
|
|
||
| plot.render(); | ||
|
|
||
| it('brush', () => { | ||
| plot.update({ | ||
| brush: { | ||
| enabled: true, | ||
| }, | ||
| }); | ||
| expect(plot.chart.interactions['brush']).toBeDefined(); | ||
|
|
||
| plot.update({ brush: { type: 'circle' } }); | ||
| expect(plot.chart.interactions['brush']).toBeDefined(); | ||
|
|
||
| plot.update({ brush: { type: 'x-rect' } }); | ||
| // 不同 brush 是互斥的 | ||
| expect(plot.chart.interactions['brush']).not.toBeDefined(); | ||
| expect(plot.chart.interactions['brush-x']).toBeDefined(); | ||
|
|
||
| plot.update({ brush: { type: 'path' } }); | ||
| expect(plot.chart.interactions['brush-x']).not.toBeDefined(); | ||
| expect(plot.chart.interactions['brush']).toBeDefined(); | ||
|
|
||
| plot.update({ brush: { type: 'y-rect' } }); | ||
| expect(plot.chart.interactions['brush-x']).not.toBeDefined(); | ||
| expect(plot.chart.interactions['brush-y']).toBeDefined(); | ||
|
|
||
| plot.update({ brush: { type: 'y-rect', action: 'highlight' } }); | ||
| expect(plot.chart.interactions['brush-y']).not.toBeDefined(); | ||
| expect(plot.chart.interactions['brush-y-highlight']).toBeDefined(); | ||
|
|
||
| plot.update({ brush: { type: 'x-rect', action: 'highlight' } }); | ||
| expect(plot.chart.interactions['brush-x']).not.toBeDefined(); | ||
| expect(plot.chart.interactions['brush-y-highlight']).not.toBeDefined(); | ||
| expect(plot.chart.interactions['brush-x-highlight']).toBeDefined(); | ||
|
|
||
| plot.update({ brush: { type: 'rect', action: 'highlight' } }); | ||
| expect(plot.chart.interactions['brush-x']).not.toBeDefined(); | ||
| expect(plot.chart.interactions['brush']).not.toBeDefined(); | ||
| expect(plot.chart.interactions['brush-highlight']).toBeDefined(); | ||
| }); | ||
|
|
||
| afterAll(() => { | ||
| plot.destroy(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import { Column } from '../../../../src'; | ||
| import { salesByArea } from '../../../data/sales'; | ||
| import { createDiv } from '../../../utils/dom'; | ||
|
|
||
| describe('column interaction', () => { | ||
| const plot = new Column(createDiv('x*y'), { | ||
| width: 400, | ||
| height: 300, | ||
| data: salesByArea, | ||
| xField: 'area', | ||
| yField: 'sales', | ||
| }); | ||
|
|
||
| plot.render(); | ||
|
|
||
| it('brush', () => { | ||
| plot.update({ | ||
| brush: { | ||
| enabled: true, | ||
| }, | ||
| }); | ||
| expect(plot.chart.interactions['brush']).toBeDefined(); | ||
|
|
||
| plot.update({ brush: { type: 'circle' } }); | ||
| expect(plot.chart.interactions['brush']).toBeDefined(); | ||
|
|
||
| plot.update({ brush: { type: 'x-rect' } }); | ||
| // 不同 brush 是互斥的 | ||
| expect(plot.chart.interactions['brush']).not.toBeDefined(); | ||
| expect(plot.chart.interactions['brush-x']).toBeDefined(); | ||
|
|
||
| plot.update({ brush: { type: 'path' } }); | ||
| expect(plot.chart.interactions['brush-x']).not.toBeDefined(); | ||
| expect(plot.chart.interactions['brush']).toBeDefined(); | ||
|
|
||
| plot.update({ brush: { type: 'y-rect' } }); | ||
| expect(plot.chart.interactions['brush-x']).not.toBeDefined(); | ||
| expect(plot.chart.interactions['brush-y']).toBeDefined(); | ||
|
|
||
| plot.update({ brush: { type: 'y-rect', action: 'highlight' } }); | ||
| expect(plot.chart.interactions['brush-y']).not.toBeDefined(); | ||
| expect(plot.chart.interactions['brush-y-highlight']).toBeDefined(); | ||
|
|
||
| plot.update({ brush: { type: 'x-rect', action: 'highlight' } }); | ||
| expect(plot.chart.interactions['brush-x']).not.toBeDefined(); | ||
| expect(plot.chart.interactions['brush-y-highlight']).not.toBeDefined(); | ||
| expect(plot.chart.interactions['brush-x-highlight']).toBeDefined(); | ||
|
|
||
| plot.update({ brush: { type: 'rect', action: 'highlight' } }); | ||
| expect(plot.chart.interactions['brush-x']).not.toBeDefined(); | ||
| expect(plot.chart.interactions['brush']).not.toBeDefined(); | ||
| expect(plot.chart.interactions['brush-highlight']).toBeDefined(); | ||
| }); | ||
|
|
||
| afterAll(() => { | ||
| plot.destroy(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| #### brush | ||
|
|
||
| <description>**optional** _BrushCfg_</description> | ||
|
|
||
| Configuration of brush interaction. | ||
|
|
||
| **Properties** | ||
|
|
||
| Types of _BrushCfg_ are as follows: | ||
|
|
||
| | Properties | Type | Description | | ||
| | ---------- | ----------- | ------------------------------------------------------------------------------------------------ | | ||
| | enabled | _boolean_ | 是否开启 brush 刷选交互，默认为：'false' | | ||
| | type | _string_ | brush 类型，可选项：'rect' \| 'x-rect' \| 'y-rect' \| 'cirlce' \| 'path' (polygon). 默认: 'rect' | | ||
| | action | _string_ | brush action, options: 'filter' \| 'highlight'. Default: 'filter' | | ||
| | mask | _MaskCfg_ | Configuration of mask. | | ||
| | button | _ButtonCfg_ | Configuration of rRset Button，works when action is equal to 'filter' | | ||
|
|
||
| Types of _MaskCfg_ are as follows: | ||
|
|
||
| | Properties | Type | Description | | ||
| | ---------- | ------------ | ----------- | | ||
| | style | _ShapeAttrs_ | mask 样式 | | ||
|
|
||
| Types of _ButtonCfg_ are as follows: | ||
|
|
||
| ```ts | ||
| export type ButtonCfg = { | ||
| /** | ||
| * padding of button | ||
| */ | ||
| padding?: number | number[]; | ||
| /** | ||
| * text of button | ||
| */ | ||
| text?: string; | ||
| /** | ||
| * custom style of text | ||
| */ | ||
| textStyle?: { | ||
| default?: ShapeAttrs; | ||
| }; | ||
| /** | ||
| * custom style of button | ||
| */ | ||
| buttonStyle?: { | ||
| default?: ShapeAttrs; | ||
| active?: ShapeAttrs; | ||
| }; | ||
| }; | ||
| ``` | ||
|
|
||
| **Events** | ||
|
|
||
| 1. List of vents of `brush-filter` interaction, | ||
|
|
||
| | Event Name | Description | | ||
| | -------------------------------------- | -------------------------------------------------------- | | ||
| | `G2.BRUSH_FILTER_EVENTS.BEFORE_FILTER` | Hook before brush event to trigger `filter` append | | ||
| | `G2.BRUSH_FILTER_EVENTS.AFTER_FILTER` | Hook after brush event to trigger `filter` append | | ||
| | `G2.BRUSH_FILTER_EVENTS.BEFORE_RESET` | Hook before brush event to trigger filter `reset` append | | ||
| | `G2.BRUSH_FILTER_EVENTS.AFTER_RESET` | Hook after brush event to trigger filter `reset` append | | ||
|
|
||
| example: | ||
|
|
||
| <playground path="dynamic-plots/brush/demo/advanced-brush1.ts" rid="brush-filter-event"></playground> | ||
|
|
||
| 2. List of vents of `brush-highlight` interaction, | ||
|
|
||
| | Event Name | Description | | ||
| | ---------------------------------------------------- | ------------------------------------------------------------------- | | ||
| | `G2.ELEMENT_RANGE_HIGHLIGHT_EVENTS.BEFORE_HIGHLIGHT` | Hook before event to trigger element-range `highlight` append | | ||
| | `G2.ELEMENT_RANGE_HIGHLIGHT_EVENTS.AFTER_HIGHLIGHT` | Hook after event to trigger element-range `highlight` append | | ||
| | `G2.ELEMENT_RANGE_HIGHLIGHT_EVENTS.BEFORE_CLEAR` | Hook before event to trigger element-range-highlight `reset` append | | ||
| | `G2.ELEMENT_RANGE_HIGHLIGHT_EVENTS.AFTER_CLEAR` | Hook after event to trigger element-range-highlight `reset` append | | ||
|
|
||
| example: | ||
|
|
||
| <playground path="dynamic-plots/brush/demo/advanced-brush2.ts" rid="brush-highlight-event"></playground> |
Oops, something went wrong.