feat: treemap init (#2023)

* feat: treemap init

* feat: 补充文档

* feat: 去除 treemap seriesfield 属性

* feat: 补充测试用例

Co-authored-by: aiyin.lzy <[email protected]>

Author: liuzhenying

__tests__/data/treemap-nest.ts

@@ -0,0 +1,25 @@
+export const TREEMAP = {
+  name: 'root',
+  children: [
+    { name: '分类 1', value: 560 },
+    { name: '分类 2', value: 500 },
+    { name: '分类 3', value: 150 },
+    { name: '分类 4', value: 140 },
+    { name: '分类 5', value: 115 },
+    { name: '分类 6', value: 95 },
+    { name: '分类 7', value: 90 },
+    { name: '分类 8', value: 75 },
+    { name: '分类 9', value: 98 },
+    { name: '分类 10', value: 60 },
+    { name: '分类 11', value: 45 },
+    { name: '分类 12', value: 40 },
+    { name: '分类 13', value: 40 },
+    { name: '分类 14', value: 35 },
+    { name: '分类 15', value: 40 },
+    { name: '分类 16', value: 40 },
+    { name: '分类 17', value: 40 },
+    { name: '分类 18', value: 30 },
+    { name: '分类 19', value: 28 },
+    { name: '分类 20', value: 16 },
+  ],
+};

__tests__/data/treemap.ts

@@ -0,0 +1,19 @@
+import { Treemap } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+import { TREEMAP } from '../../../data/treemap';
+
+describe('treemap axis', () => {
+  it('treemap axis', () => {
+    const treemapPlot = new Treemap(createDiv(), {
+      data: TREEMAP,
+      colorField: 'name',
+    });
+
+    treemapPlot.render();
+
+    // @ts-ignore
+    expect(treemapPlot.chart.getController('axis').option).toBeFalsy();
+
+    treemapPlot.destroy();
+  });
+});

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

@@ -0,0 +1,63 @@
+import { Treemap } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+import { TREEMAP } from '../../../data/treemap';
+
+const color = [
+  '#5B8FF9',
+  '#CDDDFD',
+  '#5AD8A6',
+  '#CDF3E4',
+  '#5D7092',
+  '#CED4DE',
+  '#F6BD16',
+  '#FCEBB9',
+  '#6F5EF9',
+  '#D3CEFD',
+  '#6DC8EC',
+  '#D3EEF9',
+  '#945FB9',
+  '#DECFEA',
+  '#FF9845',
+  '#FFE0C7',
+  '#1E9493',
+  '#BBDEDE',
+  '#FF99C3',
+  '#FFE0ED',
+];
+
+describe('treemap basic', () => {
+  it('basic treemap', () => {
+    const treemapPlot = new Treemap(createDiv(), {
+      data: TREEMAP,
+      colorField: 'name',
+      color,
+    });
+
+    treemapPlot.render();
+
+    const geometry = treemapPlot.chart.geometries[0];
+    expect(geometry.type).toBe('polygon');
+
+    // label
+    // @ts-ignore
+    expect(geometry.attributeOption.color.fields).toEqual(['name']);
+
+    // @ts-ignore
+    expect(geometry.attributeOption.color.values).toEqual(color);
+
+    // label
+    // @ts-ignore
+    expect(geometry.labelOption.fields).toEqual(['name']);
+
+    // position
+    const positionFields = geometry.getAttribute('position').getFields();
+    expect(geometry.elements.length).toBe(geometry.data.length);
+    expect(positionFields).toHaveLength(2);
+    expect(positionFields).toEqual(['x', 'y']);
+
+    // @ts-ignore
+    // expect(treemapPlot.chart.getController('axis').option).toBeFalsy();
+
+    treemapPlot.destroy();
+  });
+});

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

@@ -0,0 +1,48 @@
+import { Treemap } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+import { TREEMAP } from '../../../data/treemap';
+
+describe('treemap legend', () => {
+  let treemapPlot;
+
+  const options = {
+    data: TREEMAP,
+    colorField: 'name',
+  };
+
+  beforeAll(() => {
+    treemapPlot = new Treemap(createDiv(''), options);
+    treemapPlot.render();
+  });
+
+  afterAll(() => {
+    treemapPlot.destroy();
+  });
+
+  it('treemap legend default', () => {
+    const legendComponent = treemapPlot.chart.getController('legend').getComponents()[0];
+
+    expect(legendComponent.direction).toBe('bottom');
+    expect(legendComponent.component.cfg.items.length).toBe(TREEMAP.children.length);
+  });
+
+  it('treemap legend custom', () => {
+    treemapPlot.update({
+      ...options,
+      legend: {
+        position: 'top',
+      },
+    });
+
+    expect(treemapPlot.chart.getController('legend').getComponents()[0].direction).toBe('top');
+  });
+
+  it('treemap legend false', () => {
+    treemapPlot.update({
+      ...options,
+      legend: false,
+    });
+
+    expect(treemapPlot.chart.getController('legend').getComponents().length).toBe(0);
+  });
+});

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

@@ -0,0 +1,55 @@
+import { Treemap } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+import { TREEMAP } from '../../../data/treemap';
+import { TREEMAP_CHILDREN } from '../../../data/treemap-nest';
+
+describe('treemap tooltip', () => {
+  let treemapPlot;
+
+  const options = {
+    data: TREEMAP,
+    colorField: 'name',
+  };
+
+  beforeAll(() => {
+    treemapPlot = new Treemap(createDiv(''), options);
+    treemapPlot.render();
+  });
+
+  afterAll(() => {
+    treemapPlot.destroy();
+  });
+
+  it('treemap tooltip default', () => {
+    const tooltipOption = treemapPlot.chart.options.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 });
+  });
+
+  it('treemap tooltip custom', () => {
+    treemapPlot.update({
+      data: TREEMAP_CHILDREN,
+      colorField: 'brand',
+      tooltip: {
+        showTitle: true,
+        title: 'test',
+      },
+    });
+
+    const customTooltipOption = treemapPlot.chart.options.tooltip;
+
+    expect(customTooltipOption.showTitle).toBe(true);
+    expect(customTooltipOption.title).toBe('test');
+  });
+
+  it('treemap tooltip false', () => {
+    treemapPlot.update({
+      tooltip: false,
+    });
+
+    expect(treemapPlot.chart.options.tooltip).toBe(false);
+    expect(treemapPlot.chart.getComponents().find((co) => co.type === 'tooltip')).toBe(undefined);
+  });
+});

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

@@ -0,0 +1,54 @@
+import { Treemap } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+import { TREEMAP_CHILDREN } from '../../../data/treemap-nest';
+
+const color = [
+  '#5B8FF9',
+  '#CDDDFD',
+  '#5AD8A6',
+  '#CDF3E4',
+  '#5D7092',
+  '#CED4DE',
+  '#F6BD16',
+  '#FCEBB9',
+  '#6F5EF9',
+  '#D3CEFD',
+  '#6DC8EC',
+  '#D3EEF9',
+];
+
+describe('treemap nest', () => {
+  it('basic treemap', () => {
+    const treemapPlot = new Treemap(createDiv(), {
+      data: TREEMAP_CHILDREN,
+      colorField: 'brand',
+      color,
+      label: {
+        fields: ['name'],
+      },
+    });
+
+    treemapPlot.render();
+
+    const geometry = treemapPlot.chart.geometries[0];
+    expect(geometry.type).toBe('polygon');
+
+    // @ts-ignore
+    expect(geometry.attributeOption.color.fields).toEqual(['brand']);
+    // @ts-ignore
+    expect(geometry.attributeOption.color.values).toEqual(color);
+    const positionFields = geometry.getAttribute('position').getFields();
+    expect(geometry.elements.length).toBe(geometry.data.length);
+    expect(positionFields).toHaveLength(2);
+    expect(positionFields).toEqual(['x', 'y']);
+
+    // @ts-ignore
+    expect(treemapPlot.chart.getController('axis').option).toBeFalsy();
+    // @ts-ignore
+    expect(geometry.labelOption.cfg.layout.type).toBe('limit-in-shape');
+    // @ts-ignore
+    expect(geometry.labelOption.fields).toEqual(['name']);
+
+    treemapPlot.destroy();
+  });
+});

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

@@ -0,0 +1,94 @@
+import { transformData } from '../../../../src/plots/treemap/utils';
+
+const data1 = {
+  name: 'root',
+  children: [
+    {
+      name: '分类 1',
+      value: 100,
+    },
+    {
+      name: '分类 2',
+      value: 50,
+    },
+    {
+      name: '分类 3',
+      value: 50,
+    },
+  ],
+};
+
+const data2 = {
+  name: 'root',
+  children: [
+    {
+      name: '三星',
+      children: [
+        {
+          name: '三星1',
+          value: 100,
+        },
+        {
+          name: '三星2',
+          value: 50,
+        },
+      ],
+    },
+    {
+      name: '小米',
+      children: [
+        {
+          name: '小米1',
+          value: 10,
+        },
+        {
+          name: '小米2',
+          value: 20,
+        },
+      ],
+    },
+  ],
+};
+
+describe('treemap transformData', () => {
+  it('transformData, basic treemap', () => {
+    const data = transformData({
+      data: data1,
+      colorField: 'name',
+    });
+
+    const areaArr = data.map((dt) => {
+      const w = dt.x[1] - dt.x[0];
+      const h = dt.y[1] - dt.y[2];
+      return Number((w * h).toFixed(3));
+    });
+
+    expect(data.length).toBe(3);
+    expect(areaArr[1] / areaArr[0]).toEqual(data1.children[1].value / data1.children[0].value);
+    expect(areaArr[2] / areaArr[1]).toEqual(data1.children[2].value / data1.children[1].value);
+  });
+
+  it('transformData, nest treemap', () => {
+    const data = transformData({
+      data: data2,
+      colorField: 'name',
+    });
+
+    const areaArr = data.map((dt) => {
+      const w = dt.x[1] - dt.x[0];
+      const h = dt.y[1] - dt.y[2];
+      return Number((w * h).toFixed(3));
+    });
+
+    expect(data.length).toBe(4);
+    expect((areaArr[1] / areaArr[0]).toFixed(1)).toEqual(
+      (data2.children[0].children[1].value / data2.children[0].children[0].value).toFixed(1)
+    );
+    expect((areaArr[3] / areaArr[2]).toFixed(1)).toEqual(
+      (data2.children[1].children[1].value / data2.children[1].children[0].value).toFixed(1)
+    );
+    expect((areaArr[3] / areaArr[1]).toFixed(1)).toEqual(
+      (data2.children[1].children[1].value / data2.children[0].children[1].value).toFixed(1)
+    );
+  });
+});

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

@@ -1,4 +1,4 @@
-import { partition } from '../../../../../src/plots/sunburst/hierarchy/partition';
+import { partition } from '../../../../src/utils/hierarchy/partition';
 
 describe('hierarchy/partition', () => {
   it('partition', () => {

__tests__/unit/plots/sunburst/hierarchy/partition-spec.ts renamed to __tests__/unit/utils/hierarchy/partition-spec.ts

@@ -1,4 +1,4 @@
-import { getField, getAllNodes } from '../../../../../src/plots/sunburst/hierarchy/util';
+import { getField, getAllNodes } from '../../../../src/utils/hierarchy/util';
 
 describe('hierarchy/util', () => {
   it('getField', () => {