feat: treemap drilldown 1.0.0 (#6038)

* feat(interaction): add drilldown in treemap

* feat(interaction): add drilldown in treemap

* feat(interaction): add drilldown in treemap

* feat(interaction): add drilldown in treemap

---------

Co-authored-by: wb-xcf804241 <wb-xcf804241@alibaba-inc.com>

__tests__/integration/snapshots/tooltip/flare-treemap-default/step0.html

@@ -3,12 +3,6 @@
   class="g2-tooltip"
   style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 10px; top: 10px;"
 >
-  <div
-    class="g2-tooltip-title"
-    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
-  >
-    flare.vis.Visualization
-  </div>
   <ul
     class="g2-tooltip-list"
     style="margin: 0px; list-style-type: none; padding: 0px;"

__tests__/plots/static/flare-treemap-custom.ts

@@ -35,8 +35,8 @@ export async function flareTreemapCustom(): Promise<G2Spec> {
           },
           labelFill: '#000',
           labelPosition: 'top-left',
-          dx: 3,
-          dy: 3,
+          labelDx: 3,
+          labelDy: 3,
           // shape style
           fillOpacity: 0.5,
         },

__tests__/plots/static/flare-treemap-drill-down.ts

@@ -0,0 +1,68 @@
+import { G2Spec } from '../../../src';
+
+export function flareTreemapDrillDown(): G2Spec {
+  return {
+    type: 'treemap',
+    width: 600,
+    height: 400,
+    layout: { tile: 'treemapBinary', paddingInner: 5 },
+    data: {
+      value: {
+        name: '商品',
+        children: [
+          {
+            name: '文具',
+            children: [
+              {
+                name: '笔',
+                children: [
+                  { name: '铅笔', value: 430 },
+                  { name: '圆珠笔', value: 530 },
+                  { name: '钢笔', value: 80 },
+                  { name: '水彩', value: 130 },
+                ],
+              },
+              { name: '铅笔盒', value: 30 },
+              { name: '直尺', value: 60 },
+              { name: '笔记本', value: 160 },
+              { name: '其他', value: 80 },
+            ],
+          },
+          {
+            name: '零食',
+            children: [
+              { name: '饼干', value: 280 },
+              { name: '辣条', value: 150 },
+              { name: '牛奶糖', value: 210 },
+              { name: '泡泡糖', value: 80 },
+              {
+                name: '饮品',
+                children: [
+                  { name: '可乐', value: 122 },
+                  { name: '矿泉水', value: 244 },
+                  { name: '果汁', value: 49 },
+                  { name: '牛奶', value: 82 },
+                ],
+              },
+              { name: '其他', value: 40 },
+            ],
+          },
+          { name: '其他', value: 450 },
+        ],
+      },
+    },
+    encode: { value: 'value' },
+    style: {
+      labelFill: '#000',
+      labelStroke: '#fff',
+      labelLineWidth: 1.5,
+      labelFontSize: 14,
+      labelPosition: 'top-left',
+      labelDx: 5,
+      labelDy: 5,
+    },
+    interaction: {
+      treemapDrillDown: { breadCrumbY: 12, activeFill: '#873bf4' },
+    },
+  };
+}

__tests__/plots/static/index.ts

@@ -144,6 +144,7 @@ export { londonTubeLineGeo } from './london-tube-lines-geo';
 export { countries50mProjectionComparison } from './countries-50m-projection-comparison';
 export { flareTreemapDefault } from './flare-treemap-default';
 export { flareTreemapCustom } from './flare-treemap-custom';
+export { flareTreemapDrillDown } from './flare-treemap-drill-down';
 export { metrosLinkTrending } from './metros-link-trending';
 export { incomeLinkAnnotation } from './income-link-annotation';
 export { alphabetIntervalSpaceLayer } from './alphabet-interval-space-layer';

__tests__/plots/tooltip/flare-treemap-default.ts

@@ -20,6 +20,10 @@ export async function flareTreemapDefault(): Promise<G2Spec> {
       value: 'size',
       color: (d) => d.parent.data.name.split('.')[1],
     },
+    tooltip: {
+      title: null,
+      items: [{ field: 'value' }],
+    },
     style: {
       labelText: (d) => {
         const name = d.data.name
@@ -30,11 +34,11 @@ export async function flareTreemapDefault(): Promise<G2Spec> {
       },
       labelFill: '#000',
       labelPosition: 'top-left',
-      dx: 3,
-      dy: 3,
+      labelDx: 3,
+      labelDy: 3,
       fillOpacity: 0.5,
     },
-  };
+  } as any;
 }
 
 flareTreemapDefault.steps = tooltipSteps(0);

__tests__/plots/tooltip/flare-treemap-poptip-custom.ts

@@ -2,7 +2,7 @@ import { schemeTableau10 } from 'd3-scale-chromatic';
 import { CustomEvent, DisplayObject } from '@antv/g';
 import { G2Spec, PLOT_CLASS_NAME } from '../../../src';
 
-export async function flareTreemapPoptipCustom(): Promise<G2Spec> {
+export function flareTreemapPoptipCustom(): G2Spec {
   return {
     type: 'view',
     height: 600,
@@ -35,8 +35,8 @@ export async function flareTreemapPoptipCustom(): Promise<G2Spec> {
           },
           labelFill: '#000',
           labelPosition: 'top-left',
-          dx: 3,
-          dy: 3,
+          labelDx: 3,
+          labelDy: 3,
           fillOpacity: 0.5,
         },
       },

__tests__/plots/tooltip/flare-treemap-poptip.ts

@@ -2,7 +2,7 @@ import { schemeTableau10 } from 'd3-scale-chromatic';
 import { CustomEvent, DisplayObject } from '@antv/g';
 import { G2Spec, PLOT_CLASS_NAME } from '../../../src';
 
-export async function flareTreemapPoptip(): Promise<G2Spec> {
+export function flareTreemapPoptip(): G2Spec {
   return {
     type: 'view',
     height: 600,
@@ -35,8 +35,8 @@ export async function flareTreemapPoptip(): Promise<G2Spec> {
           },
           labelFill: '#000',
           labelPosition: 'top-left',
-          dx: 3,
-          dy: 3,
+          labelDx: 3,
+          labelDy: 3,
           fillOpacity: 0.5,
         },
       },

__tests__/unit/lib/core.spec.ts

@@ -101,6 +101,7 @@ import {
   ScrollbarFilter,
   LegendHighlight,
   Poptip,
+  TreemapDrillDown,
 } from '../../../src/interaction';
 import {
   SpaceLayer,
@@ -301,6 +302,7 @@ describe('corelib', () => {
       'interaction.sliderFilter': SliderFilter,
       'interaction.scrollbarFilter': ScrollbarFilter,
       'interaction.poptip': Poptip,
+      'interaction.treemapDrillDown': TreemapDrillDown,
       'composition.spaceLayer': SpaceLayer,
       'composition.spaceFlex': SpaceFlex,
       'composition.facetRect': FacetRect,

__tests__/unit/lib/std.spec.ts

@@ -111,6 +111,7 @@ import {
   ScrollbarFilter,
   LegendHighlight,
   Poptip,
+  TreemapDrillDown,
 } from '../../../src/interaction';
 import {
   SpaceLayer,
@@ -329,6 +330,7 @@ describe('stdlib', () => {
       'interaction.sliderFilter': SliderFilter,
       'interaction.scrollbarFilter': ScrollbarFilter,
       'interaction.poptip': Poptip,
+      'interaction.treemapDrillDown': TreemapDrillDown,
       'composition.spaceLayer': SpaceLayer,
       'composition.spaceFlex': SpaceFlex,
       'composition.facetRect': FacetRect,

package.json

@@ -24,6 +24,7 @@
     "dist"
   ],
   "scripts": {
+    "start": "cd site && npm run start",
     "dev": "cross-env TZ=Asia/Shanghai vite",
     "dev:link": "cross-env LINK=1 vite",
     "clean": "rimraf lib esm dist",
@@ -163,7 +164,7 @@
     },
     {
       "path": "dist/g2.lite.min.js",
-      "limit": "240 Kb",
+      "limit": "250 Kb",
       "gzip": true
     }
   ],

site/docs/spec/graph/treemap.zh.md

@@ -31,7 +31,6 @@ chart
     paddingInner: 1,
   })
   .encode('value', 'size')
-  .encode('color', (d) => d.parent.data.name.split('.')[1])
   .scale('color', { range: schemeTableau10 })
   .style(
     'labelText',

site/docs/spec/interaction/poptip.zh.md

@@ -30,7 +30,6 @@ chart
     paddingInner: 1,
   })
   .encode('value', 'size')
-  .encode('color', (d) => d.parent.data.name.split('.')[1])
   .scale('color', { range: schemeTableau10 })
   .style(
     'labelText',

site/examples/general/sunburst/demo/sunburst-interaction.ts

@@ -24,7 +24,7 @@ chart
     ],
   })
   .interaction({
-    drillDown: {
+    treemapDrillDown: {
       breadCrumb: {
         rootText: '起始',
         style: {
@@ -35,7 +35,7 @@ chart
           fill: 'red',
         },
       },
-      // FixedColor default: true, true -> drillDown update scale, false -> scale keep.
+      // FixedColor default: true, true -> treemapDrillDown update scale, false -> scale keep.
       fixedColor: false,
     },
   })

site/examples/graph/hierarchy/demo/meta.json

@@ -12,6 +12,14 @@
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*BD2zQIr7D5MAAAAAAAAAAAAADmJ7AQ/original"
     },
+    {
+      "filename": "treemap-drill-down.ts",
+      "title": {
+        "zh": "矩阵树图下钻",
+        "en": "Treemap DrillDown"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*FwWXQqqpc_UAAAAAAAAAAAAADmJ7AQ/original"
+    },
     {
       "filename": "circle-packing.ts",
       "title": {

site/examples/graph/hierarchy/demo/treemap-drill-down.ts

@@ -0,0 +1,79 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  width: 600,
+  height: 400,
+});
+
+const data = {
+  name: '商品',
+  children: [
+    {
+      name: '文具',
+      children: [
+        {
+          name: '笔',
+          children: [
+            { name: '铅笔', value: 430 },
+            { name: '圆珠笔', value: 530 },
+            { name: '钢笔', value: 80 },
+            { name: '水彩', value: 130 },
+          ],
+        },
+        { name: '铅笔盒', value: 30 },
+        { name: '直尺', value: 60 },
+        { name: '笔记本', value: 160 },
+        { name: '其他', value: 80 },
+      ],
+    },
+    {
+      name: '零食',
+      children: [
+        { name: '饼干', value: 280 },
+        { name: '辣条', value: 150 },
+        { name: '牛奶糖', value: 210 },
+        { name: '泡泡糖', value: 80 },
+        {
+          name: '饮品',
+          children: [
+            { name: '可乐', value: 122 },
+            { name: '矿泉水', value: 244 },
+            { name: '果汁', value: 49 },
+            { name: '牛奶', value: 82 },
+          ],
+        },
+        { name: '其他', value: 40 },
+      ],
+    },
+    { name: '其他', value: 450 },
+  ],
+};
+
+chart
+  .treemap()
+  .data({
+    value: data,
+  })
+  .layout({
+    tile: 'treemapBinary',
+    paddingInner: 5,
+  })
+  .encode('value', 'value')
+  .interaction({
+    treemapDrillDown: {
+      breadCrumbY: 12,
+      activeFill: '#873bf4',
+    },
+  })
+  .style({
+    labelFill: '#000',
+    labelStroke: '#fff',
+    labelLineWidth: 1.5,
+    labelFontSize: 14,
+    labelPosition: 'top-left',
+    labelDx: 5,
+    labelDy: 5,
+  });
+
+chart.render();

site/examples/graph/hierarchy/demo/treemap.ts

@@ -19,7 +19,6 @@ chart
     paddingInner: 1,
   })
   .encode('value', 'size')
-  .encode('color', (d) => d.parent.data.name.split('.')[1])
   .scale('color', { range: schemeTableau10 })
   .style(
     'labelText',

src/interaction/index.ts

@@ -20,3 +20,4 @@ export { SliderFilter } from './sliderFilter';
 export { ScrollbarFilter } from './scrollbarFilter';
 export { Poptip } from './poptip';
 export { Event } from './event';
+export { TreemapDrillDown } from './treemapDrillDown';

src/interaction/legendFilter.ts

@@ -33,6 +33,14 @@ export function legendsContinuousOf(root) {
   return root.getElementsByClassName(CONTINUOUS_LEGEND_CLASS_NAME);
 }
 
+export function legendClearSetState(root, setState) {
+  const legends = [...legendsOf(root), ...legendsContinuousOf(root)];
+
+  legends.forEach((legend) => {
+    setState(legend, (v) => v);
+  });
+}
+
 export function dataOf(root) {
   // legend -> layout -> container
   let parent = root.parentNode;