feat(drill-down): 优化下下钻的面包屑位置 (#2664)

* feat(drill-down): 优化下下钻的面包屑位置 * test(drill-down): 添加下钻交互的面包屑位置单测 * chore: 适当增大包大小限制 * fix: 修复单测问题
antvis · Jun 30, 2021 · 81beae6 · 81beae6
1 parent ab4ce2b
commit 81beae6
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 10 deletions.
diff --git a/__tests__/unit/interactions/drill-down-spec.ts b/__tests__/unit/interactions/drill-down-spec.ts
@@ -1,4 +1,10 @@
+import InteractionContext from '@antv/g2/lib/interaction/context';
 import { isParentNode } from '../../../src/interactions/drill-down';
+import { CirclePacking, Sunburst, Treemap } from '../../../src';
+import { TREEMAP } from '../../data/treemap';
+import { DATA as CirclePackingData } from '../../data/circle-packing';
+import { createDiv } from '../../utils/dom';
+import { BREAD_CRUMB_NAME, DrillDownAction } from '../../../src/interactions/actions/drill-down';
 
 describe('drill-down interaction', () => {
   it('utils: is-parent-node', () => {
@@ -53,4 +59,147 @@ describe('drill-down interaction', () => {
       })
     ).toBeTruthy();
   });
+
+  it('drilldown breadcrumb position', () => {
+    // ① treemap
+    const treemap = new Treemap(createDiv(), {
+      data: TREEMAP,
+      colorField: 'name',
+      legend: {
+        position: 'top-left',
+      },
+      drilldown: {
+        enabled: true,
+        breadCrumb: {
+          position: 'top-left',
+        },
+      },
+    });
+    treemap.render();
+
+    // @ts-ignore
+    let context = new InteractionContext(treemap.chart);
+    let drillDownAction = new DrillDownAction(context);
+
+    // 模拟一次点击
+    context.event = {
+      type: 'click',
+      data: {
+        data: treemap.chart.getData()[0],
+      },
+    };
+
+    drillDownAction.click();
+
+    // 图例和面包屑不互相遮挡
+    expect(treemap.chart.getController('legend').getComponents()[0].component.getLayoutBBox().maxY).toBeLessThan(
+      treemap.chart.foregroundGroup.findAllByName(BREAD_CRUMB_NAME)[0].getCanvasBBox().y
+    );
+
+    // ② sunburst
+    const sunburst = new Sunburst(createDiv(), {
+      data: CirclePackingData,
+      colorField: 'name',
+      drilldown: {
+        enabled: true,
+        breadCrumb: {
+          position: 'top-left',
+        },
+      },
+    });
+    sunburst.render();
+
+    // @ts-ignore
+    context = new InteractionContext(sunburst.chart);
+    drillDownAction = new DrillDownAction(context);
+
+    // 模拟一次点击
+    context.event = {
+      type: 'click',
+      data: {
+        data: sunburst.chart.getData()[0],
+      },
+    };
+
+    drillDownAction.click();
+    const sunburstBreadCrumbBBox = sunburst.chart.foregroundGroup.findAllByName(BREAD_CRUMB_NAME)[0].getCanvasBBox();
+
+    sunburst.update({
+      drilldown: {
+        breadCrumb: {
+          position: 'bottom-left',
+        },
+      },
+    });
+
+    // 模拟一次点击
+    context.event = {
+      type: 'click',
+      data: {
+        data: sunburst.chart.getData()[0],
+      },
+    };
+
+    drillDownAction.click();
+
+    const sunburstBottomBreadCrumbBBox = sunburst.chart.foregroundGroup
+      .findAllByName(BREAD_CRUMB_NAME)[0]
+      .getCanvasBBox();
+    expect(sunburstBottomBreadCrumbBBox.x).toBe(sunburstBreadCrumbBBox.x);
+    expect(sunburstBottomBreadCrumbBBox.y).not.toBe(sunburstBreadCrumbBBox.y);
+
+    // ③ circle-packing: 更新面包屑位置，x 方向保持相等，y 方向不同
+    const circlePacking = new CirclePacking(createDiv(), {
+      data: CirclePackingData,
+      colorField: 'name',
+      drilldown: {
+        enabled: true,
+        breadCrumb: {
+          position: 'top-left',
+        },
+      },
+    });
+    circlePacking.render();
+
+    // @ts-ignore
+    context = new InteractionContext(circlePacking.chart);
+    drillDownAction = new DrillDownAction(context);
+
+    // 模拟一次点击
+    context.event = {
+      type: 'click',
+      data: {
+        data: circlePacking.chart.getData()[0],
+      },
+    };
+
+    drillDownAction.click();
+    const circlePackingBreadCrumbBBox = circlePacking.chart.foregroundGroup
+      .findAllByName(BREAD_CRUMB_NAME)[0]
+      .getCanvasBBox();
+
+    circlePacking.update({
+      drilldown: {
+        breadCrumb: {
+          position: 'bottom-left',
+        },
+      },
+    });
+
+    // 模拟一次点击
+    context.event = {
+      type: 'click',
+      data: {
+        data: circlePacking.chart.getData()[0],
+      },
+    };
+
+    drillDownAction.click();
+
+    const circlePackingBottomBreadCrumbBBox = circlePacking.chart.foregroundGroup
+      .findAllByName(BREAD_CRUMB_NAME)[0]
+      .getCanvasBBox();
+    expect(circlePackingBreadCrumbBBox.x).toBe(circlePackingBottomBreadCrumbBBox.x);
+    expect(circlePackingBreadCrumbBBox.y).not.toBe(circlePackingBottomBreadCrumbBBox.y);
+  });
 });
diff --git a/__tests__/unit/plots/circle-packing/index-spec.ts b/__tests__/unit/plots/circle-packing/index-spec.ts
@@ -2,14 +2,12 @@ import { CirclePacking } from '../../../../src';
 import { createDiv } from '../../../utils/dom';
 import { DATA } from '../../../data/circle-packing';
 import { DEFAULT_OPTIONS } from '../../../../src/plots/circle-packing/constant';
-import { getContainerSize } from '../../../../src/utils';
 
 describe('Circle-Packing', () => {
   const div = createDiv();
   const plot = new CirclePacking(div, {
     padding: 0,
     data: DATA,
-    legend: false,
     hierarchyConfig: {
       sort: (a, b) => b.depth - a.depth,
     },

diff --git a/__tests__/unit/plots/treemap/interactions/drill-down-spec.ts b/__tests__/unit/plots/treemap/interactions/drill-down-spec.ts
@@ -152,7 +152,6 @@ describe('sunburst: drill-down', () => {
 
     expect(breadCrumb.getBBox().x).toBe(0);
     expect(breadCrumb.getBBox().y).toBe(-32 /** font-size */);
-    expect(breadCrumb.getCanvasBBox().y).toBe(PADDING_TOP);
     // activeTextStyle
     // @ts-ignore
     const textShape: IShape = breadCrumb.getChildren()[0];

diff --git a/examples/more-plots/circle-packing/demo/meta.json b/examples/more-plots/circle-packing/demo/meta.json
@@ -18,15 +18,15 @@
         "zh": "多层 circle packing",
         "en": "Nest circle packing"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/0OctH62S1l/fb31a01b-f609-4239-a5c3-358da994432e.png"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/WllYxjrsTq/0bd24155-db51-4c5c-9f82-e77761227d4d.png"
     },
     {
       "filename": "label.ts",
       "title": {
         "zh": "展示数据标签",
         "en": "Display label"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/0OctH62S1l/fb31a01b-f609-4239-a5c3-358da994432e.png"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/o6c3MPudxC/c7ec18d6-ae65-46ea-857f-c499684c9fc5.png"
     },
     {
       "filename": "custom-padding.ts",

diff --git a/package.json b/package.json
@@ -65,7 +65,7 @@
   },
   "devDependencies": {
     "@antv/data-set": "^0.11.5",
-    "@antv/gatsby-theme-antv": "^1.1.2",
+    "@antv/gatsby-theme-antv": "1.1.6-beta.2",
     "@babel/core": "^7.10.4",
     "@babel/plugin-transform-runtime": "^7.11.5",
     "@babel/preset-env": "^7.10.4",
@@ -141,7 +141,7 @@
   "limit-size": [
     {
       "path": "dist/g2plot.min.js",
-      "limit": "920 Kb"
+      "limit": "925 Kb"
     },
     {
       "path": "dist/g2plot.min.js",

diff --git a/src/interactions/actions/drill-down.ts b/src/interactions/actions/drill-down.ts
@@ -94,11 +94,16 @@ export class DrillDownAction extends Action {
 
     const { position } = this.getButtonCfg();
 
-    // 默认，左上角直接出发
-    let point = coordinate.convert({ x: 0, y: 1 });
+    // @todo 后续抽取一个函数来处理，以及增加 margin 或者 padding 的设置
+    // 非 polar 的，需要使用 coordinate，除却图表组件
+    let point = { x: coordinate.start.x, y: coordinate.end.y - (bbox.height + PADDING_TOP * 2) };
+    if (coordinate.isPolar) {
+      // 默认，左上角直接出发
+      point = { x: 0, y: 0 };
+    }
     if (position === 'bottom-left') {
       // 涉及到坐标反转的问题
-      point = coordinate.convert({ x: 0, y: 0 });
+      point = { x: coordinate.start.x, y: coordinate.start.y };
     }
     /** PADDING_LEFT, PADDING_TOP 与画布边缘的距离 */
     const matrix = Util.transform(null, [['t', point.x + PADDING_LEFT, point.y + bbox.height + PADDING_TOP]]);

diff --git a/src/plots/circle-packing/constant.ts b/src/plots/circle-packing/constant.ts
@@ -11,6 +11,7 @@ export const DEFAULT_OPTIONS: Partial<CirclePackingOptions> = {
     lineWidth: 0,
     stroke: '#fff',
   },
+  // 默认不开启图例
   legend: false,
   hierarchyConfig: {
     size: [1, 1] as [number, number], // width, height