feat: 下钻数据可设置 hierarchyConfig

Author: aiyin.lzy

__tests__/unit/plots/treemap/interactions/treemap-drill-down-spec.ts

@@ -72,6 +72,9 @@ describe('drill-down intera', () => {
     const treemapPlot = new Treemap(createDiv(), {
       data,
       colorField: 'name',
+      hierarchyConfig: {
+        tile: 'treemapDice',
+      },
       interactions: [
         {
           type: 'treemap-drill-down',
@@ -99,6 +102,8 @@ describe('drill-down intera', () => {
     expect(nowData.length).toBe(2);
     expect(nowData[0].name).toBe('东欧');
     expect(nowData[1].name).toBe('西欧');
+    expect(nowData[0].y).toEqual([1, 1, 0, 0]);
+    expect(nowData[1].y).toEqual([1, 1, 0, 0]);
 
     await delay(1000);
 
@@ -109,5 +114,8 @@ describe('drill-down intera', () => {
     expect(nowData1.length).toBe(2);
     expect(nowData1[0].name).toBe('欧洲');
     expect(nowData1[1].name).toBe('亚洲');
+
+
+    treemapPlot.destroy();
   });
 });

__tests__/unit/plots/treemap/interactions/util-spec.ts

@@ -1,4 +1,4 @@
-import { noHistoryDrill, isTopParentNode } from '../../../../../src/plots/treemap/interactions/util';
+import { hasHistoryDrill, isTopParentNode } from '../../../../../src/plots/treemap/interactions/util';
 
 describe('treemap interactions utl', () => {
   it('isTopParentNode', () => {
@@ -54,12 +54,12 @@ describe('treemap interactions utl', () => {
     ).toBeTruthy();
   });
 
-  it('noHistoryDrill', () => {
-    expect(noHistoryDrill(undefined)).toBeFalsy();
-    expect(noHistoryDrill({})).toBeFalsy();
+  it('hasHistoryDrill', () => {
+    expect(hasHistoryDrill(undefined)).toBeFalsy();
+    expect(hasHistoryDrill({})).toBeFalsy();
 
     expect(
-      noHistoryDrill({
+      hasHistoryDrill({
         getAction: () => {
           return {
             name: 'treemap-element-drill-action',
@@ -71,17 +71,17 @@ describe('treemap interactions utl', () => {
           };
         },
       })
-    ).toBeFalsy();
+    ).toBeTruthy();
 
     expect(
-      noHistoryDrill({
+      hasHistoryDrill({
         getAction: () => {
           return {
             name: 'treemap-element-drill-action',
             cacheDataStack: [],
           };
         },
       })
-    ).toBeTruthy();
+    ).toBeFalsy();
   });
 });

__tests__/unit/plots/treemap/utils-spec.ts

@@ -1,4 +1,4 @@
-import { transformData, isDrillDown } from '../../../../src/plots/treemap/utils';
+import { transformData, isDrillDown, getFommatInteractions} from '../../../../src/plots/treemap/utils';
 
 const data1 = {
   name: 'root',
@@ -52,10 +52,10 @@ const data2 = {
   ],
 };
 
-// 自己有分类，父类有分类
-// 没有，父类有
-// 自己有，父类没有，
-// 自己没有，父类没有
+// 叶节点有分类，父节点有分类
+// 叶节点没有，父节点有
+// 叶节点有，父节点没有，
+// 叶节点没有，父节点没有
 
 const data3 = {
   name: 'root',
@@ -110,8 +110,12 @@ describe('treemap transformData', () => {
   it('isDrillDown', () => {
     expect(isDrillDown(undefined)).toBeFalsy();
     expect(isDrillDown([])).toBeFalsy();
-    expect(isDrillDown([{ type: 'asas' }])).toBeFalsy();
-    expect(isDrillDown([{ type: 'treemap-drill-down' }])).toBeTruthy();
+    expect(isDrillDown([{
+      type: 'asas'
+    }])).toBeFalsy();
+    expect(isDrillDown([{
+      type: 'treemap-drill-down'
+    }])).toBeTruthy();
   });
 
   it('transformData, basic treemap', () => {
@@ -176,6 +180,7 @@ describe('treemap transformData', () => {
     const data = transformData({
       data: data1,
       colorField: 'name',
+      openDrillDown: false,
       hierarchyConfig: {
         tile: 'treemapDice',
       },
@@ -199,4 +204,61 @@ describe('treemap transformData', () => {
     });
     expect(data.length).toEqual(2);
   });
+
+  it('getFommatInteractions', () => {
+    expect(getFommatInteractions(undefined, undefined)).toEqual(undefined);
+    expect(getFommatInteractions(undefined, {
+      tile: 'treemapSlice'
+    })).toEqual(undefined);
+    expect(getFommatInteractions([], {
+      tile: 'treemapSlice'
+    })).toEqual([]);
+    expect(getFommatInteractions([{
+        type: 'treemap'
+      }], {
+        tile: 'treemapSlice'
+      }))
+      .toEqual([{
+        type: 'treemap'
+      }]);
+    expect(getFommatInteractions(
+        [{
+            type: 'treemap'
+          },
+          {
+            type: 'treemap-drill-down'
+          }
+        ], {
+          tile: 'treemapSlice'
+        }))
+      .toEqual([{
+        type: 'treemap'
+      },
+      {
+        type: 'treemap-drill-down',
+        cfg: {
+          hierarchyConfig: {
+            tile: 'treemapSlice'
+          }
+        }
+      }]);
+
+      expect(getFommatInteractions(
+        [{
+            type: 'treemap'
+          },
+          {
+            type: 'treemap-drill-down'
+          }
+        ], undefined))
+      .toEqual([{
+        type: 'treemap'
+      },
+      {
+        type: 'treemap-drill-down',
+        cfg: {
+          hierarchyConfig: undefined
+        }
+      }]);
+  });
 });

src/plots/treemap/adaptor.ts

@@ -1,8 +1,8 @@
 import { polygon as basePolygon } from '../../adaptor/geometries/polygon';
 import { Params } from '../../core/adaptor';
-import { interaction, animation, theme, legend, annotation, tooltip } from '../../adaptor/common';
+import { interaction as commonInteraction, animation, theme, legend, annotation, tooltip } from '../../adaptor/common';
 import { flow, deepAssign } from '../../utils';
-import { transformData, isDrillDown } from './utils';
+import { transformData, isDrillDown, getFommatInteractions } from './utils';
 import { TreemapOptions } from './types';
 
 /**
@@ -94,6 +94,24 @@ function axis(params: Params<TreemapOptions>): Params<TreemapOptions> {
   return params;
 }
 
+/**
+ * Interaction 配置
+ * @param params
+ */
+export function interaction(params: Params<TreemapOptions>): Params<TreemapOptions> {
+  const { chart, options } = params;
+  const { interactions, hierarchyConfig } = options;
+
+  commonInteraction({
+    chart,
+    options: {
+      interactions: getFommatInteractions(interactions, hierarchyConfig),
+    }
+  })
+
+  return params;
+}
+
 /**
  * 矩形树图
  * @param chart

src/plots/treemap/interactions/actions/treemap-drill-down-action.ts

@@ -1,4 +1,4 @@
-import { Action } from '@antv/g2';
+import { Action, getInteraction } from '@antv/g2';
 import { get, isArray } from '@antv/util';
 import { transformData } from '../../utils';
 
@@ -11,12 +11,14 @@ export class TreemapDrillDownAction extends Action {
     const { view } = this.context;
     const currentData = view.getData();
     const groupScales = view.getGroupScales();
+    const hierarchyConfig = get(view, ['interactions', 'treemap-drill-down', 'cfg', 'hierarchyConfig'], {})
 
     // 重新 update 数据
     const drillData = transformData({
       data,
       colorField: get(groupScales, [0, 'field']),
       openDrillDown: true,
+      hierarchyConfig,
     });
 
     view.changeData(drillData);

src/plots/treemap/interactions/treemap-drill-down.ts

@@ -1,6 +1,6 @@
 import { registerInteraction, registerAction } from '@antv/g2';
 import { TreemapDrillDownAction } from './actions/treemap-drill-down-action';
-import { isTopParentNode, noHistoryDrill } from './util';
+import { isTopParentNode, hasHistoryDrill } from './util';
 
 registerAction('treemap-drill-down-action', TreemapDrillDownAction);
 
@@ -21,7 +21,7 @@ registerInteraction('treemap-drill-down', {
     {
       trigger: 'reset-button:click',
       action: ['reset-button:hide'],
-      isEnable: noHistoryDrill,
+      isEnable: (context) => !hasHistoryDrill(context),
     },
   ],
 });

src/plots/treemap/interactions/util.ts

@@ -5,21 +5,21 @@ import { get, isArray } from '@antv/util';
  */
 export function isTopParentNode(context) {
   const data = get(context, ['event', 'data', 'data'], {});
-
   return isArray(data.children) && data.children.length > 0 && data.depth === 1;
 }
 
 /**
- * 判断是否已无历史下钻
+ * 判断是否仍有历史下钻
  */
-export function noHistoryDrill(context) {
-  if (!context || !context.getAction) return;
-  const treemapElementDrillAction = context.getAction('treemap-element-drill-action');
+export function hasHistoryDrill(context) {
+  if (!context || !context.getAction) return false;
+  
+  const treemapElementDrillAction = context.getAction('treemap-drill-down-action');
+
+  if (!treemapElementDrillAction) return false;
+
   // @ts-ignore
   const { cacheDataStack } = treemapElementDrillAction;
 
-  if (!isArray(cacheDataStack) || cacheDataStack.length <= 0) {
-    return true;
-  }
-  return false;
+  return isArray(cacheDataStack) && cacheDataStack.length > 0
 }

src/plots/treemap/utils.ts

@@ -1,17 +1,35 @@
-import { get, isArray } from '@antv/util';
+import { isArray } from '@antv/util';
 import { treemap } from '../../utils/hierarchy/treemap';
-
+import { deepAssign } from '../../utils';
 import { TreemapOptions } from './types';
 
 export function isDrillDown(interactions: TreemapOptions['interactions']) {
   if (!isArray(interactions)) return false;
   return interactions.findIndex((i) => i.type === 'treemap-drill-down') > -1;
 }
 
+export function getFommatInteractions(interactions: TreemapOptions['interactions'], hierarchyConfig: TreemapOptions['hierarchyConfig']) : TreemapOptions['interactions'] {
+  const openDrillDown = isDrillDown(interactions);
+  if (openDrillDown) {
+    return interactions.map(i => {
+      if (i.type === 'treemap-drill-down') {
+        return deepAssign({}, i, {
+          cfg: {
+            hierarchyConfig,
+          }
+        })
+      }
+      return i
+    });
+  }
+  return interactions;
+}
+
 interface TransformDataOptions {
   data: TreemapOptions['data'];
   colorField: TreemapOptions['colorField'];
   openDrillDown: boolean;
+  hierarchyConfig?: TreemapOptions['hierarchyConfig'];
 }
 
 export function transformData(options: TransformDataOptions) {