From 81beae66c2d33a319358c86664a6f76bd0726dad Mon Sep 17 00:00:00 2001 From: Visiky <736929286@qq.com> Date: Wed, 30 Jun 2021 19:45:55 +0800 Subject: [PATCH] =?UTF-8?q?feat(drill-down):=20=E4=BC=98=E5=8C=96=E4=B8=8B?= =?UTF-8?q?=E4=B8=8B=E9=92=BB=E7=9A=84=E9=9D=A2=E5=8C=85=E5=B1=91=E4=BD=8D?= =?UTF-8?q?=E7=BD=AE=20(#2664)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(drill-down): 优化下下钻的面包屑位置 * test(drill-down): 添加下钻交互的面包屑位置 单测 * chore: 适当增大包大小限制 * fix: 修复单测问题 --- .../unit/interactions/drill-down-spec.ts | 149 ++++++++++++++++++ .../unit/plots/circle-packing/index-spec.ts | 2 - .../treemap/interactions/drill-down-spec.ts | 1 - .../more-plots/circle-packing/demo/meta.json | 4 +- package.json | 4 +- src/interactions/actions/drill-down.ts | 11 +- src/plots/circle-packing/constant.ts | 1 + 7 files changed, 162 insertions(+), 10 deletions(-) diff --git a/__tests__/unit/interactions/drill-down-spec.ts b/__tests__/unit/interactions/drill-down-spec.ts index 644b6fd032..f2375347f9 100644 --- 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 index 6024b0211e..e2bd164ab7 100644 --- 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 index da9ead7c67..b2e4776bae 100644 --- 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 index 4436fe01c2..dfbc261644 100644 --- a/examples/more-plots/circle-packing/demo/meta.json +++ b/examples/more-plots/circle-packing/demo/meta.json @@ -18,7 +18,7 @@ "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", @@ -26,7 +26,7 @@ "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 index 3f38f438d4..6fd40a1a94 100644 --- 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 index d86d0339ab..0f9667a29d 100644 --- 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 index 3f1e21a2e6..790b8cf0bf 100644 --- a/src/plots/circle-packing/constant.ts +++ b/src/plots/circle-packing/constant.ts @@ -11,6 +11,7 @@ export const DEFAULT_OPTIONS: Partial = { lineWidth: 0, stroke: '#fff', }, + // 默认不开启图例 legend: false, hierarchyConfig: { size: [1, 1] as [number, number], // width, height