feat(sunburst): 旭日图增加 activeDepth 配置,允许配置默认展示的层级深度 (#2902)

antvis · Oct 9, 2021 · b3920c9 · b3920c9
1 parent d92443e
commit b3920c9
Show file tree

Hide file tree

Showing 12 changed files with 123 additions and 12 deletions.
diff --git a/__tests__/unit/plots/sunburst/drill-down-spec.ts b/__tests__/unit/plots/sunburst/drill-down-spec.ts
@@ -155,5 +155,63 @@ describe('sunburst: drill-down', () => {
     textShape1.emit('mouseenter', { target: textShape1 });
     expect(textShape1.attr('cursor')).toBe('default');
     expect(textShape.attr('fill')).toBe('rgba(255,0,0,1)');
+
+    drillDownAction.reset();
+  });
+
+  it('activeDepth when drilldown interaction', () => {
+    plot.update({
+      data: {
+        name: 'root',
+        children: [
+          {
+            name: '1',
+            value: 1,
+            children: [
+              {
+                name: '1-1',
+                value: 1,
+                children: [
+                  { name: '1-1-1', value: 1, children: [] },
+                  { name: '1-1-2', value: 1, children: [] },
+                ],
+              },
+              { name: '1-2', value: 1, children: [] },
+            ],
+          },
+        ],
+      },
+    });
+    const context = new InteractionContext(plot.chart);
+    const drillDownAction = new DrillDownAction(context);
+
+    // 模拟一次点击(数据是升序的)
+    context.event = {
+      type: 'click',
+      data: {
+        data: plot.chart.getData()[0],
+      },
+    };
+
+    drillDownAction.click();
+    expect(plot.chart.getData().length).toBe(4);
+    expect(plot.chart.geometries[0].elements.length).toBe(4);
+
+    plot.update({ hierarchyConfig: { activeDepth: 1 } });
+
+    // 模拟一次点击(数据是升序的)
+    context.event = {
+      type: 'click',
+      data: {
+        data: plot.chart.getData()[0],
+      },
+    };
+    drillDownAction.click();
+    expect(plot.chart.getData().length).toBe(2);
+    expect(plot.chart.geometries[0].elements.length).toBe(2);
+  });
+
+  afterAll(() => {
+    plot.destroy();
   });
 });
diff --git a/__tests__/unit/plots/sunburst/index-spec.ts b/__tests__/unit/plots/sunburst/index-spec.ts
@@ -111,6 +111,11 @@ describe('sunburst', () => {
     expect(coordinate.radius).toBe(1);
   });
 
+  it('active-depth', () => {
+    plot.update({ hierarchyConfig: { activeDepth: 1 } });
+    expect(plot.chart.geometries[0].elements.length).toBe(SIMPLE_SUNBURST_DATA.children.length);
+  });
+
   it('defaultOptions 保持从 constants 中获取', () => {
     expect(Sunburst.getDefaultOptions()).toEqual(DEFAULT_OPTIONS);
   });

diff --git a/__tests__/unit/utils/padding-spec.ts b/__tests__/unit/utils/padding-spec.ts
@@ -1,4 +1,4 @@
-import { getAdjustAppendPadding } from '../../../src/utils/padding';
+import { getAdjustAppendPadding, resolveAllPadding } from '../../../src/utils/padding';
 
 describe('getAdjustAppendPadding', () => {
   it('default position: bottom', () => {
@@ -46,3 +46,15 @@ describe('getAdjustAppendPadding', () => {
     expect(getAdjustAppendPadding([10, 20, 30, 40], 'top', 5)).toStrictEqual([15, 20, 30, 40]);
   });
 });
+
+describe('resolveAllPadding', () => {
+  expect(resolveAllPadding([2, 4])).toEqual([6, 6, 6, 6]);
+  expect(resolveAllPadding([[1, 2, 2, 1], 4])).toEqual([5, 6, 6, 5]);
+  expect(resolveAllPadding([[1, 2, 2, 1], 'auto'])).toEqual([1, 2, 2, 1]);
+  expect(
+    resolveAllPadding([
+      [1, 2, 2, 1],
+      [2, 3, 3, 3],
+    ])
+  ).toEqual([3, 5, 5, 4]);
+});
diff --git a/docs/api/plots/sunburst.en.md b/docs/api/plots/sunburst.en.md
@@ -92,7 +92,8 @@ Hierarchy configuration, such as' size ', 'padding', etc., refer to [D3-Hierarch
 
 | Properties        | Type               | Description                                                                                                                          |
 | ----------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
-| field             | _string_           | 数据节点权重映射字段，默认为：`value`. 当你的节点数据格式不是：`{ name: 'xx', value: 'xx' }`, 可以通过该字段来指定，详细见：图表示例 |
+| field             | _string_           | 数据节点权重映射字段，默认为：`value`. 当你的节点数据格式不是：`{ name: 'xx', value: 'xx' }`, 可以通过该字段来指定，详细见: [图表示例](/zh/examples/more-plots/sunburst#basic2) |
+| activeDepth             | _number_           | 默认展示的层级深度。默认空,代表全部展示。 取值范围为: [1, ∞)，详细见：[图表示例](/zh/examples/more-plots/sunburst#active-depth) |
 | padding           | _number\|number[]_ | 默认：`0`。参考：[d3-hierarchy#partition_padding](https://github.com/d3/d3-hierarchy#partition_padding)                              |
 | size              | _number[]_         | 默认：`[1, 1]`。参考：[d3-hierarchy#partition_size](https://github.com/d3/d3-hierarchy#partition_size)                               |
 | round             | _boolean_          | 默认：`false`。参考：[d3-hierarchy#partition_round](https://github.com/d3/d3-hierarchy#partition_round)                              |

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

diff --git a/examples/case/statistical-scenario/demo/meta.json b/examples/case/statistical-scenario/demo/meta.json
@@ -26,7 +26,6 @@
         "zh": "自定义分析漏斗图",
         "en": "Funnel analysis"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/3jrUoywaYN/339d1657-af7b-47d0-8434-da69979d597d.png"
     },
     {
@@ -35,7 +34,6 @@
         "zh": "对比漏斗图",
         "en": "Compare Funnel Diagram"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*gS12TpN1MN8AAAAAAAAAAAAAARQnAQ"
     },
     {

diff --git a/examples/component/annotation/demo/meta.json b/examples/component/annotation/demo/meta.json
@@ -10,7 +10,6 @@
         "zh": "文本标注",
         "en": "Text annotation"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/gAMlNVZrIU/b9cc7e10-2a1a-41f4-b217-4559b4f888d9.png"
     },
     {
@@ -19,7 +18,6 @@
         "zh": "文本标注带包围框",
         "en": "Text annotation with background"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/DhczAubJSh/3c7d4891-1150-4b47-ae9d-26851dec3e16.png"
     },
     {
@@ -28,7 +26,6 @@
         "zh": "辅助线标注",
         "en": "Line annotation with preset-value"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/qFApvvldG3/f67b4331-1db5-471a-8fd1-35f665a9039e.png"
     },
     {
@@ -45,7 +42,6 @@
         "zh": "添加或删除图表标注",
         "en": "Add / Remove annotations"
       },
-      "new": true,
       "screenshot": ""
     },
     {

diff --git a/examples/component/label/demo/meta.json b/examples/component/label/demo/meta.json
@@ -10,7 +10,6 @@
         "zh": "自定义数据标签",
         "en": "Custom Label"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/P7ARYNBdol/3988b5ab-b286-4b2c-befa-eac77afd5bac.png"
     }
   ]

diff --git a/examples/more-plots/sunburst/demo/active-depth.ts b/examples/more-plots/sunburst/demo/active-depth.ts
@@ -0,0 +1,25 @@
+import { Sunburst } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const plot = new Sunburst('container', {
+      data,
+      innerRadius: 0.3,
+      interactions: [{ type: 'element-active' }],
+      hierarchyConfig: {
+        field: 'sum',
+        // 配置展示的层级数
+        activeDepth: 1,
+      },
+      drilldown: {
+        breadCrumb: {
+          rootText: '起始',
+        },
+      },
+      label: {
+        autoRotate: false,
+      },
+    });
+    plot.render();
+  });
diff --git a/examples/more-plots/sunburst/demo/meta.json b/examples/more-plots/sunburst/demo/meta.json
@@ -75,6 +75,15 @@
         "en": "Custom tooltip items"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/yBxQkbPBXF/2a71c7de-1971-4651-bcba-dd18ddd8732e.png"
+    },
+    {
+      "filename": "active-depth.ts",
+      "title": {
+        "zh": "配置激活展示的层级数",
+        "en": "Config active display depth"
+      },
+      "new": true,
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/y9BD5CSBrF/sunburst-active-level.gif"
     }
   ]
 }
diff --git a/src/plots/sunburst/types.ts b/src/plots/sunburst/types.ts
@@ -24,8 +24,10 @@ export interface SunburstOptions extends Omit<Options, 'data' | 'legend' | 'slid
   readonly hierarchyConfig?: Omit<HierarchyOption, 'as' | 'type'> & {
     /** default: 'value', required data to be like: { name: 'xx', [field]: 12, children: [] } */
     readonly field?: string;
-    /** 是否忽略 */
+    /** 是否忽略父节点的权重, 默认: false, 其父节点的权重不由子节点权重总和决定 */
     readonly ignoreParentValue?: boolean;
+    /** 默认展示的层级深度. 默认空, 代表全部展示. 取值 > 0 */
+    readonly activeDepth?: number;
   };
 
   // 其他

diff --git a/src/plots/sunburst/utils.ts b/src/plots/sunburst/utils.ts
@@ -1,3 +1,4 @@
+import { omit } from '@antv/util';
 import { HIERARCHY_DATA_TRANSFORM_PARAMS } from '../../interactions/actions/drill-down';
 import { pick } from '../../utils';
 import { partition } from '../../utils/hierarchy/partition';
@@ -11,6 +12,7 @@ import { SunburstOptions } from './types';
  */
 export function transformData(options: Pick<SunburstOptions, 'data' | 'colorField' | 'rawFields' | 'hierarchyConfig'>) {
   const { data, colorField, rawFields, hierarchyConfig = {} } = options;
+  const { activeDepth } = hierarchyConfig;
   const transform = {
     partition: partition,
     treemap: treemap,
@@ -22,7 +24,7 @@ export function transformData(options: Pick<SunburstOptions, 'data' | 'colorFiel
 
   const nodes = transform[type](data, {
     field: seriesField || 'value',
-    ...hierarchyConfig,
+    ...omit(hierarchyConfig, ['activeDepth']),
     // @ts-ignore
     type: `hierarchy.${type}`,
     as: ['x', 'y'],
@@ -34,6 +36,9 @@ export function transformData(options: Pick<SunburstOptions, 'data' | 'colorFiel
     if (node.depth === 0) {
       return null;
     }
+    if (activeDepth > 0 && node.depth > activeDepth) {
+      return null;
+    }
 
     let path = node.data.name;
     let ancestorNode = { ...node };