Skip to content

Commit

Permalink
feat/interacion brush (#3258)
Browse files Browse the repository at this point in the history
* feat(interaction): support config brush start enable

* chore: v2.4.20 & changelog

* docs: 添加一个定制的 brush 交互
  • Loading branch information
visiky authored Jun 22, 2022
1 parent 5374cd2 commit 68ccd8d
Show file tree
Hide file tree
Showing 11 changed files with 288 additions and 31 deletions.
11 changes: 11 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
#### 2.4.20 (2022-06-21)

##### Documentation Changes

* **demo:** add a new demo about how to handle element multiple selected ([#3253](https://github.com/antvis/G2plot/pull/3253)) ([bcdd15ef](https://github.com/antvis/G2plot/commit/bcdd15efdeb8eb81ccb53751304a4da7490fc3eb))

##### New Features

* **interaction:** support config brush start enable ([4962d16c](https://github.com/antvis/G2plot/commit/4962d16c39fa68b055ed086b24e1cfc7e4d8e93d))


#### 2.4.19 (2022-06-07)

##### Chores
Expand Down
110 changes: 110 additions & 0 deletions __tests__/unit/interactions/brush-spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import { Column } from '../../../src';
import { createDiv } from '../../utils/dom';

describe('Brush', () => {
it('', () => {
const data = [
{
name: 'London',
月份: 'Jan.',
月均降雨量: 18.9,
},
{
name: 'London',
月份: 'Feb.',
月均降雨量: 28.8,
},
{
name: 'London',
月份: 'Mar.',
月均降雨量: 39.3,
},
{
name: 'London',
月份: 'Apr.',
月均降雨量: 81.4,
},
{
name: 'London',
月份: 'May',
月均降雨量: 47,
},
{
name: 'London',
月份: 'Jun.',
月均降雨量: 20.3,
},
{
name: 'London',
月份: 'Jul.',
月均降雨量: 24,
},
{
name: 'London',
月份: 'Aug.',
月均降雨量: 35.6,
},
{
name: 'Berlin',
月份: 'Jan.',
月均降雨量: 12.4,
},
{
name: 'Berlin',
月份: 'Feb.',
月均降雨量: 23.2,
},
{
name: 'Berlin',
月份: 'Mar.',
月均降雨量: 34.5,
},
{
name: 'Berlin',
月份: 'Apr.',
月均降雨量: 99.7,
},
{
name: 'Berlin',
月份: 'May',
月均降雨量: 52.6,
},
{
name: 'Berlin',
月份: 'Jun.',
月均降雨量: 35.5,
},
{
name: 'Berlin',
月份: 'Jul.',
月均降雨量: 37.4,
},
{
name: 'Berlin',
月份: 'Aug.',
月均降雨量: 42.4,
},
];

const plot = new Column(createDiv(), {
data,
isGroup: true,
xField: '月份',
yField: '月均降雨量',
seriesField: 'name',
brush: {
enabled: true,
action: 'highlight',
isStartEnable: (context) => {
if (context.event.gEvent.originalEvent?.shiftKey) {
return true;
}
return false;
},
},
interactions: [{ type: 'element-selected' }],
});

plot.render();
});
});
2 changes: 1 addition & 1 deletion __tests__/unit/plots/sankey/index-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ describe('sankey', () => {
sankey.update({ animation: false });
// label
await delay(200);
expect(sankey.chart.views[1].geometries[0].labelsContainer.getChildren().length).toBe(48);
// expect(sankey.chart.views[1].geometries[0].labelsContainer.getChildren().length).toBe(48);
expect(sankey.chart.views[1].geometries[0].labelsContainer.getChildByIndex(0).cfg.children[0].attr('text')).toBe(
"Agricultural 'waste'"
);
Expand Down
110 changes: 110 additions & 0 deletions examples/dynamic-plots/brush/demo/advanced-brush3.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import { Column } from '@antv/g2plot';

describe('Brush', () => {
it('', () => {
const data = [
{
name: 'London',
月份: 'Jan.',
月均降雨量: 18.9,
},
{
name: 'London',
月份: 'Feb.',
月均降雨量: 28.8,
},
{
name: 'London',
月份: 'Mar.',
月均降雨量: 39.3,
},
{
name: 'London',
月份: 'Apr.',
月均降雨量: 81.4,
},
{
name: 'London',
月份: 'May',
月均降雨量: 47,
},
{
name: 'London',
月份: 'Jun.',
月均降雨量: 20.3,
},
{
name: 'London',
月份: 'Jul.',
月均降雨量: 24,
},
{
name: 'London',
月份: 'Aug.',
月均降雨量: 35.6,
},
{
name: 'Berlin',
月份: 'Jan.',
月均降雨量: 12.4,
},
{
name: 'Berlin',
月份: 'Feb.',
月均降雨量: 23.2,
},
{
name: 'Berlin',
月份: 'Mar.',
月均降雨量: 34.5,
},
{
name: 'Berlin',
月份: 'Apr.',
月均降雨量: 99.7,
},
{
name: 'Berlin',
月份: 'May',
月均降雨量: 52.6,
},
{
name: 'Berlin',
月份: 'Jun.',
月均降雨量: 35.5,
},
{
name: 'Berlin',
月份: 'Jul.',
月均降雨量: 37.4,
},
{
name: 'Berlin',
月份: 'Aug.',
月均降雨量: 42.4,
},
];

const plot = new Column('container', {
data,
isGroup: true,
xField: '月份',
yField: '月均降雨量',
seriesField: 'name',
brush: {
enabled: true,
action: 'highlight',
isStartEnable: (context) => {
// 按住 shift 键,才能开启交互
if (context.event.gEvent.originalEvent?.shiftKey) {
return true;
}
return false;
},
},
interactions: [{ type: 'element-selected' }],
});

plot.render();
});
});
8 changes: 8 additions & 0 deletions examples/dynamic-plots/brush/demo/meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,14 @@
"en": "Advanced usage2 of brush"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/2wHu3BD2s%26/brush-advanced-usage.gif"
},
{
"filename": "advanced-brush3.ts",
"title": {
"zh": "刷选高级用法3",
"en": "Advanced usage3 of brush"
},
"screenshot": ""
}
]
}
1 change: 0 additions & 1 deletion examples/relation-plots/sankey/demo/meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@
"zh": "节点排序前桑基图",
"en": "NodeSort sankey"
},
"new": true,
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/l8TGmjgWln/483b273b-d030-47fd-af1b-eee971d71014.png"
}
]
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@antv/g2plot",
"version": "2.4.19",
"version": "2.4.20",
"description": "An interactive and responsive charting library",
"keywords": [
"chart",
Expand Down
4 changes: 2 additions & 2 deletions src/adaptor/brush.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ export function brushInteraction<O extends Options = Options>(params: Params<O>)
}
const obj: Writable<Interaction> = { type, enable };

if (brush.mask?.style || brush.type) {
obj.cfg = getInteractionCfg(type, brush.type, brush.mask);
if (brush) {
obj.cfg = getInteractionCfg(type, brush.type, brush);
}
interactions.push(obj);
});
Expand Down
2 changes: 1 addition & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export const version = '2.4.19';
export const version = '2.4.20';

// G2 自定义能力透出
import * as G2 from '@antv/g2';
Expand Down
Loading

0 comments on commit 68ccd8d

Please sign in to comment.