Skip to content

Commit b3920c9

Browse files
visikyvisiky
authored
feat(sunburst): 旭日图增加 activeDepth 配置,允许配置默认展示的层级深度 (#2902)
1 parent d92443e commit b3920c9

File tree

12 files changed

+123
-12
lines changed

12 files changed

+123
-12
lines changed

‎__tests__/unit/plots/sunburst/drill-down-spec.ts

+58
Original file line numberDiff line numberDiff line change
@@ -155,5 +155,63 @@ describe('sunburst: drill-down', () => {
155155
textShape1.emit('mouseenter', { target: textShape1 });
156156
expect(textShape1.attr('cursor')).toBe('default');
157157
expect(textShape.attr('fill')).toBe('rgba(255,0,0,1)');
158+
159+
drillDownAction.reset();
160+
});
161+
162+
it('activeDepth when drilldown interaction', () => {
163+
plot.update({
164+
data: {
165+
name: 'root',
166+
children: [
167+
{
168+
name: '1',
169+
value: 1,
170+
children: [
171+
{
172+
name: '1-1',
173+
value: 1,
174+
children: [
175+
{ name: '1-1-1', value: 1, children: [] },
176+
{ name: '1-1-2', value: 1, children: [] },
177+
],
178+
},
179+
{ name: '1-2', value: 1, children: [] },
180+
],
181+
},
182+
],
183+
},
184+
});
185+
const context = new InteractionContext(plot.chart);
186+
const drillDownAction = new DrillDownAction(context);
187+
188+
// 模拟一次点击(数据是升序的)
189+
context.event = {
190+
type: 'click',
191+
data: {
192+
data: plot.chart.getData()[0],
193+
},
194+
};
195+
196+
drillDownAction.click();
197+
expect(plot.chart.getData().length).toBe(4);
198+
expect(plot.chart.geometries[0].elements.length).toBe(4);
199+
200+
plot.update({ hierarchyConfig: { activeDepth: 1 } });
201+
202+
// 模拟一次点击(数据是升序的)
203+
context.event = {
204+
type: 'click',
205+
data: {
206+
data: plot.chart.getData()[0],
207+
},
208+
};
209+
drillDownAction.click();
210+
expect(plot.chart.getData().length).toBe(2);
211+
expect(plot.chart.geometries[0].elements.length).toBe(2);
212+
});
213+
214+
afterAll(() => {
215+
plot.destroy();
158216
});
159217
});

‎__tests__/unit/plots/sunburst/index-spec.ts

+5
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,11 @@ describe('sunburst', () => {
111111
expect(coordinate.radius).toBe(1);
112112
});
113113

114+
it('active-depth', () => {
115+
plot.update({ hierarchyConfig: { activeDepth: 1 } });
116+
expect(plot.chart.geometries[0].elements.length).toBe(SIMPLE_SUNBURST_DATA.children.length);
117+
});
118+
114119
it('defaultOptions 保持从 constants 中获取', () => {
115120
expect(Sunburst.getDefaultOptions()).toEqual(DEFAULT_OPTIONS);
116121
});

‎__tests__/unit/utils/padding-spec.ts

+13-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { getAdjustAppendPadding } from '../../../src/utils/padding';
1+
import { getAdjustAppendPadding, resolveAllPadding } from '../../../src/utils/padding';
22

33
describe('getAdjustAppendPadding', () => {
44
it('default position: bottom', () => {
@@ -46,3 +46,15 @@ describe('getAdjustAppendPadding', () => {
4646
expect(getAdjustAppendPadding([10, 20, 30, 40], 'top', 5)).toStrictEqual([15, 20, 30, 40]);
4747
});
4848
});
49+
50+
describe('resolveAllPadding', () => {
51+
expect(resolveAllPadding([2, 4])).toEqual([6, 6, 6, 6]);
52+
expect(resolveAllPadding([[1, 2, 2, 1], 4])).toEqual([5, 6, 6, 5]);
53+
expect(resolveAllPadding([[1, 2, 2, 1], 'auto'])).toEqual([1, 2, 2, 1]);
54+
expect(
55+
resolveAllPadding([
56+
[1, 2, 2, 1],
57+
[2, 3, 3, 3],
58+
])
59+
).toEqual([3, 5, 5, 4]);
60+
});

‎docs/api/plots/sunburst.en.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,8 @@ Hierarchy configuration, such as' size ', 'padding', etc., refer to [D3-Hierarch
9292

9393
| Properties | Type | Description |
9494
| ----------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
95-
| field | _string_ | 数据节点权重映射字段，默认为：`value`. 当你的节点数据格式不是：`{ name: 'xx', value: 'xx' }`, 可以通过该字段来指定，详细见：图表示例 |
95+
| field | _string_ | 数据节点权重映射字段，默认为：`value`. 当你的节点数据格式不是：`{ name: 'xx', value: 'xx' }`, 可以通过该字段来指定，详细见: [图表示例](/zh/examples/more-plots/sunburst#basic2) |
96+
| activeDepth | _number_ | 默认展示的层级深度。默认空,代表全部展示。 取值范围为: [1, ∞)，详细见：[图表示例](/zh/examples/more-plots/sunburst#active-depth) |
9697
| padding | _number\|number[]_ | 默认：`0`。参考：[d3-hierarchy#partition_padding](https://github.com/d3/d3-hierarchy#partition_padding) |
9798
| size | _number[]_ | 默认：`[1, 1]`。参考：[d3-hierarchy#partition_size](https://github.com/d3/d3-hierarchy#partition_size) |
9899
| round | _boolean_ | 默认：`false`。参考：[d3-hierarchy#partition_round](https://github.com/d3/d3-hierarchy#partition_round) |

‎docs/api/plots/sunburst.zh.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,8 @@ meta: {
8888

8989
| Properties | Type | Description |
9090
| ----------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
91-
| field | _string_ | 数据节点权重映射字段，默认为：`value`. 当你的节点数据格式不是：`{ name: 'xx', value: 'xx' }`, 可以通过该字段来指定，详细见：图表示例 |
91+
| field | _string_ | 数据节点权重映射字段，默认为：`value`. 当你的节点数据格式不是：`{ name: 'xx', value: 'xx' }`, 可以通过该字段来指定，详细见：[图表示例](/zh/examples/more-plots/sunburst#basic2) |
92+
| activeDepth | _number_ | 默认展示的层级深度。默认空,代表全部展示。 取值范围为: [1, ∞)，详细见：[图表示例](/zh/examples/more-plots/sunburst#active-depth) |
9293
| padding | _number\|number[]_ | 默认：`0`。参考：[d3-hierarchy#partition_padding](https://github.com/d3/d3-hierarchy#partition_padding) |
9394
| size | _number[]_ | 默认：`[1, 1]`。参考：[d3-hierarchy#partition_size](https://github.com/d3/d3-hierarchy#partition_size) |
9495
| round | _boolean_ | 默认：`false`。参考：[d3-hierarchy#partition_round](https://github.com/d3/d3-hierarchy#partition_round) |

‎examples/case/statistical-scenario/demo/meta.json

-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@
2626
"zh": "自定义分析漏斗图",
2727
"en": "Funnel analysis"
2828
},
29-
"new": true,
3029
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/3jrUoywaYN/339d1657-af7b-47d0-8434-da69979d597d.png"
3130
},
3231
{
@@ -35,7 +34,6 @@
3534
"zh": "对比漏斗图",
3635
"en": "Compare Funnel Diagram"
3736
},
38-
"new": true,
3937
"screenshot": "https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*gS12TpN1MN8AAAAAAAAAAAAAARQnAQ"
4038
},
4139
{

‎examples/component/annotation/demo/meta.json

-4
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
"zh": "文本标注",
1111
"en": "Text annotation"
1212
},
13-
"new": true,
1413
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/gAMlNVZrIU/b9cc7e10-2a1a-41f4-b217-4559b4f888d9.png"
1514
},
1615
{
@@ -19,7 +18,6 @@
1918
"zh": "文本标注带包围框",
2019
"en": "Text annotation with background"
2120
},
22-
"new": true,
2321
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/DhczAubJSh/3c7d4891-1150-4b47-ae9d-26851dec3e16.png"
2422
},
2523
{
@@ -28,7 +26,6 @@
2826
"zh": "辅助线标注",
2927
"en": "Line annotation with preset-value"
3028
},
31-
"new": true,
3229
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/qFApvvldG3/f67b4331-1db5-471a-8fd1-35f665a9039e.png"
3330
},
3431
{
@@ -45,7 +42,6 @@
4542
"zh": "添加或删除图表标注",
4643
"en": "Add / Remove annotations"
4744
},
48-
"new": true,
4945
"screenshot": ""
5046
},
5147
{

‎examples/component/label/demo/meta.json

-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
"zh": "自定义数据标签",
1111
"en": "Custom Label"
1212
},
13-
"new": true,
1413
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/P7ARYNBdol/3988b5ab-b286-4b2c-befa-eac77afd5bac.png"
1514
}
1615
]

‎examples/more-plots/sunburst/demo/active-depth.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Sunburst } from '@antv/g2plot';
2+
3+
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json')
4+
.then((res) => res.json())
5+
.then((data) => {
6+
const plot = new Sunburst('container', {
7+
data,
8+
innerRadius: 0.3,
9+
interactions: [{ type: 'element-active' }],
10+
hierarchyConfig: {
11+
field: 'sum',
12+
// 配置展示的层级数
13+
activeDepth: 1,
14+
},
15+
drilldown: {
16+
breadCrumb: {
17+
rootText: '起始',
18+
},
19+
},
20+
label: {
21+
autoRotate: false,
22+
},
23+
});
24+
plot.render();
25+
});

‎examples/more-plots/sunburst/demo/meta.json

+9
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,15 @@
7575
"en": "Custom tooltip items"
7676
},
7777
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/yBxQkbPBXF/2a71c7de-1971-4651-bcba-dd18ddd8732e.png"
78+
},
79+
{
80+
"filename": "active-depth.ts",
81+
"title": {
82+
"zh": "配置激活展示的层级数",
83+
"en": "Config active display depth"
84+
},
85+
"new": true,
86+
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/y9BD5CSBrF/sunburst-active-level.gif"
7887
}
7988
]
8089
}

‎src/plots/sunburst/types.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,10 @@ export interface SunburstOptions extends Omit<Options, 'data' | 'legend' | 'slid
2424
readonly hierarchyConfig?: Omit<HierarchyOption, 'as' | 'type'> & {
2525
/** default: 'value', required data to be like: { name: 'xx', [field]: 12, children: [] } */
2626
readonly field?: string;
27-
/** 是否忽略 */
27+
/** 是否忽略父节点的权重, 默认: false, 其父节点的权重不由子节点权重总和决定 */
2828
readonly ignoreParentValue?: boolean;
29+
/** 默认展示的层级深度. 默认空, 代表全部展示. 取值 > 0 */
30+
readonly activeDepth?: number;
2931
};
3032

3133
// 其他

‎src/plots/sunburst/utils.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { omit } from '@antv/util';
12
import { HIERARCHY_DATA_TRANSFORM_PARAMS } from '../../interactions/actions/drill-down';
23
import { pick } from '../../utils';
34
import { partition } from '../../utils/hierarchy/partition';
@@ -11,6 +12,7 @@ import { SunburstOptions } from './types';
1112
*/
1213
export function transformData(options: Pick<SunburstOptions, 'data' | 'colorField' | 'rawFields' | 'hierarchyConfig'>) {
1314
const { data, colorField, rawFields, hierarchyConfig = {} } = options;
15+
const { activeDepth } = hierarchyConfig;
1416
const transform = {
1517
partition: partition,
1618
treemap: treemap,
@@ -22,7 +24,7 @@ export function transformData(options: Pick<SunburstOptions, 'data' | 'colorFiel
2224

2325
const nodes = transform[type](data, {
2426
field: seriesField || 'value',
25-
...hierarchyConfig,
27+
...omit(hierarchyConfig, ['activeDepth']),
2628
// @ts-ignore
2729
type: `hierarchy.${type}`,
2830
as: ['x', 'y'],
@@ -34,6 +36,9 @@ export function transformData(options: Pick<SunburstOptions, 'data' | 'colorFiel
3436
if (node.depth === 0) {
3537
return null;
3638
}
39+
if (activeDepth > 0 && node.depth > activeDepth) {
40+
return null;
41+
}
3742

3843
let path = node.data.name;
3944
let ancestorNode = { ...node };

0 commit comments

Comments
 (0)