refactor: sunburst 重构和优化 (#2603)

* refactor(hierarchy-utils): 优化 partition 算法

* refactor(sunburst): 重构下旭日图

- [x] style
- [x] tooltip
- [x] data
- [ ] label 待办

* docs(sunburst): 增加若干旭日图 demo

* test(sunburst): 暂时修复下旭日图单测

* feat(sunburst): 旭日图 tooltip、label & 文档完善

* test(sunburst): 旭日图增加单测

* docs: 增加 faq

* fix(lint): 修复 lint 问题

* docs(sunburst): 移除无用的类型定义 & 增加 rawFields 配置文档

* fix(sunburst): 修复旭日图 cr 和 lint 问题

Author: visiky

__tests__/bugs/issue-2572-spec.ts

@@ -143,7 +143,7 @@ describe('#2572', () => {
   it('堆叠分组柱状图 tooltip 更新 formatter', () => {
     plot.update({
       tooltip: {
-        formatter: (datum) => ({ name: 'xx', value: 100 }),
+        formatter: () => ({ name: 'xx', value: 100 }),
       },
     });
     plot.chart.showTooltip(point);

__tests__/data/sunburst.ts

@@ -562,3 +562,137 @@ export const SUNBRUST_DATA = {
     },
   ],
 };
+
+export const SIMPLE_SUNBURST_DATA = {
+  name: 'root',
+  children: [
+    {
+      name: '非洲',
+      value: 4,
+      children: [
+        {
+          continent: '非洲',
+          country: '埃塞俄比亚',
+          symbol: '🇪🇹',
+          area: '耶加雪菲',
+          name: '埃塞俄比亚',
+          value: 1,
+        },
+        {
+          continent: '非洲',
+          country: '肯尼亚',
+          symbol: '🇰🇪',
+          coffee: '阿拉比加卡豆',
+          name: '肯尼亚',
+          value: 1,
+        },
+        {
+          continent: '非洲',
+          country: '坦桑尼亚',
+          symbol: '🇹🇿',
+          coffee: '乞力马扎罗咖啡',
+          name: '坦桑尼亚',
+          value: 1,
+        },
+        {
+          continent: '非洲',
+          country: '乌干达',
+          symbol: '🇺🇬',
+          name: '乌干达',
+          value: 1,
+        },
+      ],
+    },
+    {
+      name: '中南美洲',
+      value: 6,
+      children: [
+        {
+          continent: '中南美洲',
+          country: '巴西',
+          symbol: '🇧🇷',
+          name: '巴西',
+          value: 1,
+        },
+        {
+          continent: '中南美洲',
+          country: '哥伦比亚',
+          symbol: '🇨🇴',
+          name: '哥伦比亚',
+          value: 1,
+        },
+        {
+          continent: '中南美洲',
+          country: '牙买加',
+          symbol: '🇯🇲',
+          name: '牙买加',
+          value: 1,
+        },
+        {
+          continent: '中南美洲',
+          country: '巴拿马',
+          symbol: '🇵🇦',
+          name: '巴拿马',
+          value: 1,
+        },
+        {
+          continent: '中南美洲',
+          country: '危地马拉',
+          symbol: '🇬🇹',
+          name: '危地马拉',
+          value: 1,
+        },
+        {
+          continent: '中南美洲',
+          country: '哥斯达黎加',
+          symbol: '🇨🇷',
+          name: '哥斯达黎加',
+          value: 1,
+        },
+      ],
+    },
+    {
+      name: '亚洲',
+      value: 5,
+      children: [
+        {
+          continent: '亚洲',
+          country: '印度尼西亚',
+          symbol: '🇮🇩',
+          area: '苏门答腊',
+          coffee: '曼特宁咖啡',
+          name: '印度尼西亚',
+          value: 1,
+        },
+        {
+          continent: '亚洲',
+          country: '印度',
+          symbol: '🇮🇳',
+          name: '印度',
+          value: 1,
+        },
+        {
+          continent: '亚洲',
+          country: '越南',
+          symbol: '🇻🇳',
+          name: '越南',
+          value: 1,
+        },
+        {
+          continent: '亚洲',
+          country: '也门',
+          symbol: '🇾🇪',
+          name: '也门',
+          value: 1,
+        },
+        {
+          continent: '亚洲',
+          country: '中国',
+          symbol: '🇨🇳',
+          name: '中国',
+          value: 1,
+        },
+      ],
+    },
+  ],
+};

__tests__/unit/plots/facet/geometries-spec.ts

@@ -21,7 +21,7 @@ describe('facet', () => {
     data,
     type: 'rect',
     fields: ['type'],
-    eachView: (view, facet) => {
+    eachView: () => {
       return {
         geometries: [
           { type: 'interval', xField: 'date', yField: 'value', colorField: 'name', mapping: {} },

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

@@ -22,7 +22,7 @@ describe('facet', () => {
     data,
     type: 'rect',
     fields: ['type'],
-    eachView: (view, facet) => {
+    eachView: () => {
       return { geometries: [{ type: 'interval', xField: 'date', yField: 'value', colorField: 'name', mapping: {} }] };
     },
     theme: {
@@ -62,7 +62,7 @@ describe('facet', () => {
       meta: { name: { sync: true, values: ['d', 'c', 'b', 'a'] } },
     });
 
-    const [view0, view1, view2, view3] = plot.chart.views;
+    const [view0, , view2, view3] = plot.chart.views;
     expect(view0.geometries[0].elements[0].getModel().color).toBe('red');
     const data0 = view0.geometries[0].elements[0].getModel().data as any;
     const data1 = view0.geometries[0].elements[1].getModel().data as any;
@@ -167,7 +167,7 @@ describe('facet', () => {
     expect(element1.shape.attr('stroke')).not.toBe('#000');
 
     plot.update({
-      eachView: (view, facet) => {
+      eachView: () => {
         return {
           geometries: [{ type: 'interval', xField: 'date', yField: 'value', colorField: 'name', mapping: {} }],
           interactions: [{ type: 'element-active', enable: false }],

__tests__/unit/plots/stock/style-spec.ts

@@ -18,8 +18,6 @@ describe('Stock', () => {
 
     k.render();
 
-    const geometry = k.chart.geometries[0];
-
     // 图形元素个数
     expect(k.chart.geometries[0].elements[0].shape.attr('stroke')).toBe('red');
     expect(k.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(2);

__tests__/unit/plots/sunburst/change-data-spec.ts

@@ -4,11 +4,12 @@ import { delay } from '../../../utils/delay';
 import { SUNBRUST_DATA } from '../../../data/sunburst';
 
 describe('sunburst', () => {
-  it('init: change data', async () => {
+  it('旧版本', async () => {
     const sunburstPlot = new Sunburst(createDiv(), {
       width: 400,
       height: 400,
       data: [],
+      // @ts-ignore
       seriesField: 'sum',
       colorField: 'value',
       color: ['#BAE7FF', '#1890FF', '#0050B3'],
@@ -30,7 +31,8 @@ describe('sunburst', () => {
       labelOption: { fields, cfg },
       coordinate,
     } = geometry;
-    expect(fields).toEqual(['sum']);
+    // 默认展示 name（不进行兼容））
+    expect(fields).toEqual(['name']);
     expect(cfg.position).toBe('middle');
     const positionFields = geometry.getAttribute('position').getFields();
     expect(geometry.elements.length).toBe(geometry.data.length);
@@ -42,11 +44,12 @@ describe('sunburst', () => {
     sunburstPlot.destroy();
   });
 
-  it('init: update', async () => {
+  it('旧版本: update', async () => {
     const sunburstPlot = new Sunburst(createDiv(), {
       width: 400,
       height: 400,
       data: SUNBRUST_DATA,
+      // @ts-ignore
       seriesField: 'sum',
       innerRadius: 0.3,
       radius: 1,
@@ -63,7 +66,8 @@ describe('sunburst', () => {
       labelOption: { fields },
       coordinate,
     } = geometry;
-    expect(fields).toEqual(['sum']);
+    // 默认展示 name（不进行兼容））
+    expect(fields).toEqual(['name']);
     expect(coordinate.innerRadius).toBe(0.3);
     // @ts-ignore
     sunburstPlot.update({