Skip to content

Commit

Permalink
feat(sankey): 桑基图支持 state 配置 (#2757)
Browse files Browse the repository at this point in the history
* feat(sankey): 桑基图支持 state 配置

新增 nodeState & edgeState
✅ 文档

* test(sankey): 增加桑基图文本样式修改
  • Loading branch information
visiky authored Aug 5, 2021
1 parent 669f881 commit 44770b4
Show file tree
Hide file tree
Showing 8 changed files with 204 additions and 13 deletions.
65 changes: 65 additions & 0 deletions __tests__/unit/plots/sankey/state-spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { Datum, Sankey } from '../../../../src';
import { createDiv, removeDom } from '../../../utils/dom';
import { ENERGY_RELATIONS } from '../../../data/sankey-energy';
import { EDGES_VIEW_ID, NODES_VIEW_ID } from '../../../../src/plots/sankey/constant';

describe('sankey', () => {
const div = createDiv();
const sankey = new Sankey(div, {
height: 500,
data: ENERGY_RELATIONS,
sourceField: 'source',
targetField: 'target',
weightField: 'value',
});

sankey.render();
it('state', () => {
sankey.update({
nodeState: {
active: {
style: {
fill: 'red',
},
},
selected: {
style: {
stroke: 'red',
},
},
},
edgeState: {
active: {
style: {
fill: 'blue',
},
},
},
});

sankey.setState('active', (datum: Datum) => {
return datum.isNode;
});

let elements = sankey.chart.views.find((v) => v.id === NODES_VIEW_ID).geometries[0].elements;
elements.forEach((element) => expect(element.shape.attr('fill')).toBe('red'));

sankey.setState('selected', (datum: Datum) => {
return datum.isNode;
});

elements = sankey.chart.views.find((v) => v.id === NODES_VIEW_ID).geometries[0].elements;
elements.forEach((element) => expect(element.shape.attr('stroke')).toBe('red'));

sankey.setState('active', (datum: Datum) => {
return !datum.isNode;
});
elements = sankey.chart.views.find((v) => v.id === EDGES_VIEW_ID).geometries[0].elements;
elements.forEach((element) => expect(element.shape.attr('fill')).toBe('blue'));
});

afterAll(() => {
sankey.destroy();
removeDom(div);
});
});
16 changes: 16 additions & 0 deletions docs/api/plots/sankey.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,28 @@ Raw fields of original data. With the 'rawsFields' definition, you can get the o

Sankey diagram node style configuration.

#### nodeState

<description>**optional** _StyleAttr | Function_</description>

State style configuration of Sankey node.

`markdown:docs/common/state-style.zh.md`

#### edgeStyle

<description>**optional** _StyleAttr | Function_</description>

Sankey diagram variable style configuration.

#### edgeState

<description>**optional** _StyleAttr | Function_</description>

State style configuration of Sankey edge.

`markdown:docs/common/state-style.zh.md`

`markdown:docs/common/color.en.md`

#### nodeWidthRatio
Expand Down
16 changes: 16 additions & 0 deletions docs/api/plots/sankey.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,14 @@ order: 27

桑基图节点样式的配置。

#### nodeState

<description>**optional** _StyleAttr | Function_</description>

桑基图节点状态样式的配置。

`markdown:docs/common/state-style.zh.md`

#### edgeStyle

<description>**optional** _StyleAttr | Function_</description>
Expand All @@ -57,6 +65,14 @@ order: 27

`markdown:docs/common/color.en.md`

#### edgeState

<description>**optional** _StyleAttr | Function_</description>

桑基图边状态样式的配置。

`markdown:docs/common/state-style.zh.md`

#### nodeWidthRatio

<description>**optional** _number_</description>
Expand Down
9 changes: 9 additions & 0 deletions examples/relation-plots/sankey/demo/meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,15 @@
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*bLulSLk-VskAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "set-state.ts",
"title": {
"zh": "桑基图状态交互",
"en": "Sankey with state"
},
"new": true,
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/rAuJKL%24Y6n/7a301a5e-4864-44f3-acb7-ebefb9c2402b.png"
},
{
"filename": "energy.ts",
"title": {
Expand Down
40 changes: 40 additions & 0 deletions examples/relation-plots/sankey/demo/set-state.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { Sankey } from '@antv/g2plot';

const DATA = [
{ source1: '首次打开', target: '首页 UV', value: 160 },
{ source1: '结果页', target: '首页 UV', value: 40 },
{ source1: '验证页', target: '首页 UV', value: 10 },
{ source1: '我的', target: '首页 UV', value: 10 },
{ source1: '朋友', target: '首页 UV', value: 8 },
{ source1: '其他来源', target: '首页 UV', value: 27 },
{ source1: '首页 UV', target: '理财', value: 30 },
{ source1: '首页 UV', target: '扫一扫', value: 40 },
{ source1: '首页 UV', target: '服务', value: 35 },
{ source1: '首页 UV', target: '蚂蚁森林', value: 25 },
{ source1: '首页 UV', target: '跳失', value: 10 },
{ source1: '首页 UV', target: '借呗', value: 30 },
{ source1: '首页 UV', target: '花呗', value: 40 },
{ source1: '首页 UV', target: '其他流向', value: 45 },
];

const sankey = new Sankey('container', {
data: DATA,
sourceField: 'source1',
targetField: 'target',
weightField: 'value',
nodeWidthRatio: 0.018,
nodePaddingRatio: 0.03,
nodeState: {
active: {
style: {
linewidth: 1.5
}
}
},
tooltip: { showTitle: true }
});

sankey.render();
sankey.setState('active', (datum) => {
return datum.isNode && datum.name === '首次打开'
});
12 changes: 3 additions & 9 deletions src/plots/sankey/adaptor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ function defaultOptions(params: Params<SankeyOptions>): Params<SankeyOptions> {
*/
function geometry(params: Params<SankeyOptions>): Params<SankeyOptions> {
const { chart, options } = params;
const { color, nodeStyle, edgeStyle, label, tooltip } = options;
const { color, nodeStyle, edgeStyle, label, tooltip, nodeState, edgeState } = options;

// 1. 组件,优先设置,因为子 view 会继承配置
chart.legend(false);
Expand Down Expand Up @@ -67,14 +67,7 @@ function geometry(params: Params<SankeyOptions>): Params<SankeyOptions> {
shape: 'arc',
},
tooltip,
state: {
active: {
style: {
opacity: 0.8,
lineWidth: 0,
},
},
},
state: edgeState,
},
});

Expand All @@ -93,6 +86,7 @@ function geometry(params: Params<SankeyOptions>): Params<SankeyOptions> {
},
label,
tooltip,
state: nodeState,
},
});

Expand Down
49 changes: 46 additions & 3 deletions src/plots/sankey/index.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { get } from '@antv/util';
import { get, each } from '@antv/util';
import { Element } from '@antv/g2';
import { Plot } from '../../core/plot';
import { Adaptor } from '../../core/adaptor';
import { Data, Datum } from '../../types';
import { findViewById } from '../../utils';
import { Data, Datum, StateCondition, StateName, StateObject } from '../../types';
import { findViewById, getAllElementsRecursively } from '../../utils';
import { SankeyOptions } from './types';
import { adaptor } from './adaptor';
import { transformToViewsData } from './helper';
Expand Down Expand Up @@ -32,6 +33,14 @@ export class Sankey extends Plot<SankeyOptions> {
opacity: 0.3,
lineWidth: 0,
},
edgeState: {
active: {
style: {
opacity: 0.8,
lineWidth: 0,
},
},
},
label: {
formatter: ({ name }) => name,
callback: (x: number[]) => {
Expand Down Expand Up @@ -95,6 +104,40 @@ export class Sankey extends Plot<SankeyOptions> {
edgesView.changeData(edges);
}

/**
* 设置状态
* @param type 状态类型,支持 'active' | 'inactive' | 'selected' 三种
* @param conditions 条件,支持数组
* @param status 是否激活,默认 true
*/
public setState(type: StateName, condition: StateCondition, status: boolean = true) {
const elements = getAllElementsRecursively(this.chart);

each(elements, (ele: Element) => {
if (condition(ele.getData())) {
ele.setState(type, status);
}
});
}

/**
* 获取状态
*/
public getStates(): StateObject[] {
const elements = getAllElementsRecursively(this.chart);

const stateObjects: StateObject[] = [];
each(elements, (element: Element) => {
const data = element.getData();
const states = element.getStates();
each(states, (state) => {
stateObjects.push({ data, state, geometry: element.geometry, element });
});
});

return stateObjects;
}

/**
* 获取适配器
*/
Expand Down
10 changes: 9 additions & 1 deletion src/plots/sankey/types.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Data, Options, StyleAttr } from '../../types';
import { Data, Options, State, StyleAttr } from '../../types';
import { NodeDepth, NodeSort } from './layout';

/** 配置类型定义 */
Expand Down Expand Up @@ -55,10 +55,18 @@ export interface SankeyOptions extends Omit<Options, 'xField' | 'yField' | 'xAxi
* 节点样式
*/
readonly nodeStyle?: StyleAttr;
/**
* 节点状态样式
*/
readonly nodeState?: State;
/**
* 边样式
*/
readonly edgeStyle?: StyleAttr;
/**
* 边状态样式
*/
readonly edgeState?: State;
/**
* 节点位置是否可以拖拽,默认为 false
*/
Expand Down

0 comments on commit 44770b4

Please sign in to comment.