Skip to content

Commit

Permalink
feat/duax: 关闭多个图例 (#1888)
Browse files Browse the repository at this point in the history 
* feat: 支持关闭多个图例

* fix: remove console & unit destory

Co-authored-by: aiyin.lzy <nadia.lzy@antfin.com>
  • Loading branch information
@liuzhenying
liuzhenying and aiyin.lzy authored Nov 10, 2020
1 parent 2d33fbb commit e213ddc
Show file tree
Hide file tree
Showing 2 changed files with 124 additions and 24 deletions.
138 changes: 116 additions & 22 deletions __tests__/unit/plots/dual-axes/legend-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,8 +144,8 @@ describe('Legend', () => {
dualAxes.destroy();
});

it('Legend with option', () => {
const dualAxes = new DualAxes(createDiv('test DualAxes doubal line'), {
it('Legend with click', () => {
const dualAxes = new DualAxes(createDiv('test DualAxes doubal line', undefined, 'click_legend'), {
width: 400,
height: 500,
data: [PV_DATA, UV_DATA_MULTI],
Expand All @@ -168,26 +168,28 @@ describe('Legend', () => {
},
],
legend: {
layout: 'vertical',
position: 'right',
itemName: {
formatter: (val) => `${val}_test`,
},
},
});

dualAxes.render();

const legendController = dualAxes.chart.getController('legend');
const legendComponent = legendController.getComponents()[0];
const cfg = legendComponent.component.cfg;

expect(legendComponent.direction).toEqual('right');
expect(cfg.items.length).toBe(4);
expect(cfg.items[0].name).toBe('页面访问量');
expect(cfg.items[1].name).toBe('a');
expect(cfg.items[2].name).toBe('b');
expect(cfg.items[3].name).toBe('c');
const legendContainer = legendComponent.component.get('container');
const cfgItems = legendComponent.component.cfg.items;
expect(cfgItems.length).toBe(4);
expect(cfgItems[0].name).toBe('页面访问量');
expect(cfgItems[1].name).toBe('a');
expect(cfgItems[2].name).toBe('b');
expect(cfgItems[3].name).toBe('c');

dualAxes.chart.once('afterrender', () => {
// 点击页面访问量，期望单折线图 visible 隐藏, 图例 unchecked 为 true
dualAxes.chart.emit('legend-item:click', {
target: legendContainer.findById('-legend-item-页面访问量-name'),
gEvent: {
delegateObject: {
item: {
Expand All @@ -200,9 +202,71 @@ describe('Legend', () => {
},
},
});

expect(dualAxes.chart.views[0].geometries[0].visible).toEqual(false);
expect(cfgItems.find((item) => item.id === '页面访问量').unchecked).toEqual(true);

// 点击分类数据 A，期望多折线图 view 过滤掉数据 a
dualAxes.chart.emit('legend-item:click', {
target: legendContainer.findById('-legend-item-a-name'),
gEvent: {
delegateObject: {
item: {
id: 'a',
name: 'a',
value: 'a',
viewId: RIGHT_AXES_VIEW,
unchecked: true,
},
},
},
});

expect(dualAxes.chart.views[1].geometries[0].data.filter((item) => item.site === 'a').length === 0).toEqual(true);
expect(cfgItems.find((item) => item.id === 'a').unchecked).toEqual(true);

// 点击分类数据 B，期望多折线图 view 过滤掉数据 b
dualAxes.chart.emit('legend-item:click', {
target: legendContainer.findById('-legend-item-b-name'),
gEvent: {
delegateObject: {
item: {
id: 'b',
name: 'b',
value: 'b',
viewId: RIGHT_AXES_VIEW,
unchecked: true,
},
},
},
});

expect(dualAxes.chart.views[1].geometries[0].data.filter((item) => item.site === 'b').length === 0).toEqual(true);
expect(cfgItems.find((item) => item.id === 'b').unchecked).toEqual(true);

// 点击分类数据 C，期望多折线图 view 过滤掉数据 c, yaxis 右侧仅留 0 一个刻度
dualAxes.chart.emit('legend-item:click', {
target: legendContainer.findById('-legend-item-c-name'),
gEvent: {
delegateObject: {
item: {
id: 'c',
name: 'c',
value: 'c',
viewId: RIGHT_AXES_VIEW,
unchecked: true,
},
},
},
});

expect(dualAxes.chart.views[1].geometries[0].data.filter((item) => item.site === 'c').length === 0).toEqual(true);
expect(cfgItems.find((item) => item.id === 'c').unchecked).toEqual(true);
expect(dualAxes.chart.views[1].getController('axis').getComponents()[0].component.cfg.ticks.length).toBe(1);

// 再次点击页面访问量，期望单折线图 visible 出现, 图例 unchecked 为 false
dualAxes.chart.emit('legend-item:click', {
target: legendContainer.findById('-legend-item-页面访问量-name'),
gEvent: {
delegateObject: {
item: {
Expand All @@ -216,43 +280,71 @@ describe('Legend', () => {
},
});
expect(dualAxes.chart.views[0].geometries[0].visible).toEqual(true);
expect(cfgItems.find((item) => item.id === '页面访问量').unchecked).toEqual(false);
expect(dualAxes.chart.views[1].getController('axis').getComponents()[0].component.cfg.ticks.length).toBe(1);

// 再次点击分类数据 A，期望多折线图 view 重新包含数据 a，右轴出现多个刻度
dualAxes.chart.emit('legend-item:click', {
target: legendContainer.findById('-legend-item-a-name'),
gEvent: {
delegateObject: {
item: {
id: 'a',
name: 'a',
value: 'a',
viewId: RIGHT_AXES_VIEW,
unchecked: true,
unchecked: false,
},
},
},
});
expect(dualAxes.chart.views[1].geometries[0].data.filter((item) => item.site === 'a').length > 0).toEqual(true);
expect(cfgItems.find((item) => item.id === 'a').unchecked).toEqual(false);
expect(
dualAxes.chart.views[1].getController('axis').getComponents()[0].component.cfg.ticks.length > 1
).toBeTruthy();

expect(dualAxes.chart.views[1].geometries[0].data.filter((item) => item.site === 'a').length === 0).toEqual(true);

// 再次点击分类数据 B，期望多折线图 view 重新包含数据 B
dualAxes.chart.emit('legend-item:click', {
target: legendContainer.findById('-legend-item-b-name'),
gEvent: {
delegateObject: {
item: {
id: 'a',
name: 'a',
value: 'a',
id: 'b',
name: 'b',
value: 'b',
viewId: RIGHT_AXES_VIEW,
unchecked: false,
},
},
},
});
expect(dualAxes.chart.views[1].geometries[0].data.filter((item) => item.site === 'b').length > 0).toEqual(true);
expect(cfgItems.find((item) => item.id === 'b').unchecked).toEqual(false);

expect(dualAxes.chart.views[1].geometries[0].data.filter((item) => item.site === 'a').length > 0).toEqual(true);
// 再次点击分类数据 C，期望多折线图 view 重新包含数据 C
dualAxes.chart.emit('legend-item:click', {
target: legendContainer.findById('-legend-item-c-name'),
gEvent: {
delegateObject: {
item: {
id: 'c',
name: 'c',
value: 'c',
viewId: RIGHT_AXES_VIEW,
unchecked: false,
},
},
},
});
expect(dualAxes.chart.views[1].geometries[0].data.filter((item) => item.site === 'c').length > 0).toEqual(true);
expect(cfgItems.find((item) => item.id === 'c').unchecked).toEqual(false);

// 提高if else 覆盖率，事件为空，不受影响
dualAxes.chart.emit('legend-item:click', {});

expect(dualAxes.chart.views[1].geometries[0].data.filter((item) => item.site === 'a').length > 0).toEqual(true);

// 提高if else 覆盖率，传入一个 id 错误的 item，不受影响
dualAxes.chart.emit('legend-item:click', {
gEvent: {
delegateObject: {
Expand All @@ -270,6 +362,7 @@ describe('Legend', () => {

expect(dualAxes.chart.views[0].geometries[0].visible).toEqual(true);

// 提高if else 覆盖率，传入一个 id 错误的 item，不受影响
dualAxes.chart.emit('legend-item:click', {
gEvent: {
delegateObject: {
Expand Down Expand Up @@ -299,7 +392,8 @@ describe('Legend', () => {
yField: ['pv', 'uv'],
legend: {
custom: true,
position: 'bottom',
layout: 'vertical',
position: 'right',
items: [
{
value: 'test',
Expand All @@ -326,7 +420,7 @@ describe('Legend', () => {
expect(cfg.items[0].marker.symbol).toBe('square');
expect(cfg.items[1].name).toBe('测试2');
expect(cfg.items[1].marker.symbol).toBe('square');

expect(legendComponent.direction).toEqual('right');
dualAxes.destroy();
});
});
10 changes: 8 additions & 2 deletions src/plots/dual-axes/adaptor.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { each, findIndex, get, isObject, every } from '@antv/util';
import { each, findIndex, get, find, isObject, every } from '@antv/util';
import { Scale } from '@antv/g2/lib/dependents';
import { LegendItem } from '@antv/g2/lib/interface';
import {
theme as commonTheme,
animation as commonAnimation,
Expand Down Expand Up @@ -275,13 +276,18 @@ export function legend(params: Params<DualAxesOptions>): Params<DualAxesOptions>
});
}
} else {
const legendItem = get(chart.getController('legend'), 'option.items', []);
// 分组柱线图
each(chart.views, (view) => {
// 单折柱图
const groupScale = view.getGroupScales();
each(groupScale, (scale: Scale) => {
if (scale.values && scale.values.indexOf(field) > -1) {
view.filter(scale.field, (value) => !delegateObject.item.unchecked || value !== field);
view.filter(scale.field, (value) => {
const curLegendItem: LegendItem = find(legendItem, (item: LegendItem) => item.value === value);
// 使用 legend 中的 unchecked 来判断，使得支持关闭多个图例
return !curLegendItem.unchecked;
});
}
});
chart.render(true);
Expand Down

0 comments on commit e213ddc

Please sign in to comment.