feat: treemap layout optimize (#2337)

* feat(treemap): add sort layout option, add default sort is desc

* test: fix ci

__tests__/data/treemap.ts

@@ -1,8 +1,8 @@
 export const TREEMAP = {
   name: 'root',
   children: [
-    { name: '分类 1', value: 560, ext: '自定义数据' },
-    { name: '分类 2', value: 500, ext: '自定义数据' },
+    { name: '分类 1', value: 500, ext: '自定义数据' },
+    { name: '分类 2', value: 800, ext: '自定义数据' },
     { name: '分类 3', value: 150, ext: '自定义数据' },
     { name: '分类 4', value: 140, ext: '自定义数据' },
     { name: '分类 5', value: 115, ext: '自定义数据' },

__tests__/unit/plots/sunburst/index-spec.ts

@@ -146,7 +146,7 @@ describe('sunburst', () => {
     sunburstPlot.chart.showTooltip({ x: bbox.maxX, y: bbox.maxY });
     expect(
       document.getElementById('sunburst-id-one').getElementsByClassName('g2-tooltip-list-item-value')[0].innerHTML
-    ).toBe('0.0153');
+    ).toBe('0.0211');
     sunburstPlot.chart.hideTooltip();
 
     sunburstPlot.destroy();

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

@@ -95,7 +95,7 @@ describe('treemap color', () => {
     });
 
     const elements = treemapPlot.chart.geometries[0].elements;
-    expect(elements[0].model.color).toBe('#f00');
+    expect(elements[1].model.color).toBe('#f00');
     expect(elements[5].model.color).toBe('#0f0');
   });
 

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

@@ -98,8 +98,8 @@ describe('drill-down intera', () => {
     // @ts-ignore
     const nowData = treemapPlot.chart.getData();
     expect(nowData.length).toBe(2);
-    expect(nowData[0].name).toBe('东欧');
-    expect(nowData[1].name).toBe('西欧');
+    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]);
 

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

@@ -33,7 +33,7 @@ describe('treemap basic', () => {
     // @ts-ignore
     expect(treemapPlot.chart.geometries[0].labelOption.cfg.position).toEqual('top');
     expect(treemapPlot.chart.geometries[0].labelsContainer.getChildren()[0].cfg.children[0].attrs.text).toBe(
-      TREEMAP.children[0].name + TREEMAP.children[0].ext
+      '分类 2自定义数据'
     );
 
     // label with custom

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

@@ -0,0 +1,30 @@
+import { Treemap } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+import { TREEMAP } from '../../../data/treemap';
+
+describe('treemap sort', () => {
+  it('treemap sort', () => {
+    const treemapPlot = new Treemap(createDiv(), {
+      data: TREEMAP,
+      colorField: 'name',
+    });
+
+    treemapPlot.render();
+
+    // 1. 图形经过排序
+    // @ts-ignore
+    expect(treemapPlot.chart.geometries[0].elements[0].getModel().data.name).toBe('分类 2');
+    // @ts-ignore
+    expect(treemapPlot.chart.geometries[0].elements[0].getModel().data.value).toBe(800);
+    // @ts-ignore
+    expect(treemapPlot.chart.geometries[0].elements[1].getModel().data.name).toBe('分类 1');
+    // @ts-ignore
+    expect(treemapPlot.chart.geometries[0].elements[1].getModel().data.value).toBe(500);
+
+    // 2. reflect y
+    // @ts-ignore
+    expect(treemapPlot.chart.getCoordinate().isReflectY).toBe(true);
+
+    treemapPlot.destroy();
+  });
+});

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

@@ -25,7 +25,7 @@ describe('treemap tooltip', () => {
     expect(tooltipOption.showMarkers).toBe(false);
     expect(tooltipOption.showTitle).toBe(false);
     expect(tooltipOption.fields).toEqual(['name', 'value', 'name']);
-    expect(tooltipOption.formatter(TREEMAP.children[0])).toEqual({ name: '分类 1', value: 560 });
+    expect(tooltipOption.formatter(TREEMAP.children[0])).toEqual({ name: '分类 1', value: 500 });
   });
 
   it('treemap tooltip custom', () => {

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

@@ -151,6 +151,9 @@ describe('treemap transformData', () => {
       data: data2,
       colorField: 'name',
       openDrillDown: false,
+      hierarchyConfig: {
+        sort: () => 1,
+      },
     });
 
     const areaArr = data.map((dt) => {

src/plots/treemap/adaptor.ts

@@ -81,6 +81,9 @@ function geometry(params: Params<TreemapOptions>): Params<TreemapOptions> {
     })
   );
 
+  // 做一个反转，这样配合排序，可以将最大值放到左上角，最小值放到右下角
+  chart.coordinate().reflect('y');
+
   return params;
 }
 

src/utils/hierarchy/treemap.ts

@@ -17,6 +17,8 @@ const DEFAULT_OPTIONS: HierarchyOption = {
   paddingBottom: 0,
   paddingLeft: 0,
   as: ['x', 'y'],
+  // 默认降序
+  sort: (a, b) => b.value - a.value,
 };
 
 export function treemap(data: any, options: HierarchyOption): any[] {
@@ -55,7 +57,10 @@ export function treemap(data: any, options: HierarchyOption): any[] {
        * ignoreParentValue 为 false 时，父元素的值由当前节点 及子元素累加而来，该值为 10 + 5 + 5 = 20
        * sum 函数中，d 为用户传入的 data, children 为保留字段
        */
-      d3Hierarchy.hierarchy(data).sum((d) => (options.ignoreParentValue && d.children ? 0 : d[field]))
+      d3Hierarchy
+        .hierarchy(data)
+        .sum((d) => (options.ignoreParentValue && d.children ? 0 : d[field]))
+        .sort(options.sort)
     );
   const root = partition(data);
 

src/utils/hierarchy/types.ts

@@ -23,4 +23,5 @@ export interface HierarchyOption {
   paddingBottom?: number;
   paddingLeft?: number;
   as: [string, string];
+  sort?(a: any, b: any): number;
 }