docs: 新增旭日图 demos 和 API

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

@@ -14,6 +14,7 @@ describe('sunburst', () => {
       colorField: 'value',
       color: ['#BAE7FF', '#1890FF', '#0050B3'],
       innerRadius: 0.3,
+      radius: 1,
       label: {
         position: 'middle',
       },
@@ -41,6 +42,7 @@ describe('sunburst', () => {
     expect(positionFields).toHaveLength(2);
     expect(positionFields).toEqual(['x', 'y']);
     expect(coordinate.innerRadius).toBe(0.3);
+    expect(coordinate.radius).toBe(1);
   });
 });
 
@@ -94,3 +96,60 @@ describe('sunburst', () => {
     });
   });
 });
+
+describe('sunburst', () => {
+  it('init: hierarchy config', async () => {
+    const fetchData = await fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/mobile.json').then((res) =>
+      res.json()
+    );
+    fetchData.forEach((mobile) => {
+      mobile.value = null;
+    });
+    const data = {
+      name: 'root',
+      children: fetchData,
+    };
+    const sunburstPlot = new Sunburst(createDiv(), {
+      width: 400,
+      height: 400,
+      data,
+      type: 'treemap',
+      seriesField: 'value',
+      reflect: 'y',
+      colorField: 'brand',
+      hierarchyConfig: {
+        size: [1, 0.1],
+      },
+      sunburstStyle: {
+        lineWidth: 1,
+        stroke: '#fff',
+      },
+      interactions: [{ type: 'element-active' }],
+    });
+    sunburstPlot.render();
+    const geometry = sunburstPlot.chart.geometries[0];
+    expect(geometry.type).toBe('polygon');
+    // @ts-ignore
+    const {
+      attributeOption: { color },
+      coordinate,
+      styleOption,
+    } = geometry;
+    expect(color.fields).toEqual(['brand']);
+    const positionFields = geometry.getAttribute('position').getFields();
+    expect(geometry.elements.length).toBe(geometry.data.length);
+    expect(positionFields).toHaveLength(2);
+    expect(positionFields).toEqual(['x', 'y']);
+    expect(coordinate.type).toBe('polar');
+    // @ts-ignore
+    expect(coordinate.isReflectY).toBeTruthy();
+    expect(styleOption.cfg).toEqual({
+      lineWidth: 1,
+      stroke: '#fff',
+    });
+    const transformData = geometry.data[0];
+    expect(transformData.ext).toEqual({
+      size: [1, 0.1],
+    });
+  });
+});

docs/common/component-polygon.en.md

@@ -0,0 +1,15 @@
+#### tooltip
+
+`markdown:docs/common/tooltip.en.md`
+
+#### theme
+
+`markdown:docs/common/theme.en.md`
+
+### 事件
+
+`markdown:docs/common/events.en.md`
+
+### 图表方法
+
+`markdown:docs/common/chart-methods.en.md`

docs/common/component-polygon.zh.md

@@ -0,0 +1,15 @@
+#### tooltip
+
+`markdown:docs/common/tooltip.zh.md`
+
+#### theme
+
+`markdown:docs/common/theme.zh.md`
+
+### 事件
+
+`markdown:docs/common/events.zh.md`
+
+### 图表方法
+
+`markdown:docs/common/chart-methods.zh.md`

examples/sunburst/basic/API.en.md

@@ -0,0 +1,130 @@
+## 配置属性
+
+### 图表容器
+
+`markdown:docs/common/chart-options.en.md`
+
+### 数据映射
+
+#### data 📌
+
+**必选**, _object_
+
+功能描述： 设置图表数据源
+
+默认配置： 无
+
+`markdown:docs/common/meta.en.md`
+
+#### type
+
+**可选**, _partition | treemap_;
+
+功能描述： 布局类型，更多类型探索中。
+
+默认配置： `partition`
+
+#### seriesField
+
+**可选**, _string_;
+
+功能描述： 分组字段，即要映射的数值字段。
+
+默认配置： 无
+
+#### reflect
+
+**可选**, _x | y_;
+
+功能描述： 径向类型，非特殊情况不建议使用。
+
+默认配置： 无
+
+#### hierarchyConfig
+
+**可选**, _object_;
+
+功能描述： 层级布局配置，例如 `size`、`padding` 等，详细配置参考[d3-hierarchy](https://github.com/d3/d3-hierarchy#treemap)。
+
+默认配置： 无
+
+### 图形样式
+
+#### radius
+
+**可选**, _string_
+
+功能描述: 半径， 0 ~ 1。
+
+默认配置： `1`
+
+#### innerRadius
+
+**可选**, _number_;
+
+功能描述： 内径，0 ~ 1。
+
+默认配置： `0`
+
+#### colorField
+
+**可选**, _string_;
+
+功能描述： 颜色映射字段。
+
+默认配置： 无
+
+`markdown:docs/common/color.en.md`
+
+#### sunburstStyle ✨
+
+**可选**, _object_
+
+功能描述： 旭日图形样式。pointStyle 中的`fill`会覆盖 `color` 的配置。sunburstStyle 可以直接指定，也可以通过 callback 的方式，根据数据指定单独的样式。
+
+默认配置：
+
+| 细分配置      | 类型   | 功能描述   |
+| ------------- | ------ | ---------- |
+| fill          | string | 填充颜色   |
+| stroke        | string | 描边颜色   |
+| lineWidth     | number | 线宽       |
+| lineDash      | number | 虚线显示   |
+| opacity       | number | 透明度     |
+| fillOpacity   | number | 填充透明度 |
+| strokeOpacity | number | 描边透明度 |
+
+```ts
+// 直接指定
+{
+  sunburstStyle: {
+    fill: 'red',
+    stroke: 'yellow',
+    opacity: 0.8
+  },
+}
+// Function
+{
+  sunburstStyle: (value, item) => {
+    if (value === 0.5) {
+      return {
+        fill: 'green',
+        stroke: 'yellow',
+        opacity: 0.8,
+      }
+    }
+    // TODO
+    return {
+      fill: 'red',
+      stroke: 'yellow',
+      opacity: 0.8,
+    }
+  }
+}
+```
+
+## 图表组件
+
+### 图表组件
+
+`markdown:docs/common/component-polygon.en.md`

examples/sunburst/basic/API.zh.md

@@ -0,0 +1,130 @@
+## 配置属性
+
+### 图表容器
+
+`markdown:docs/common/chart-options.zh.md`
+
+### 数据映射
+
+#### data 📌
+
+**必选**, _object_
+
+功能描述： 设置图表数据源
+
+默认配置： 无
+
+`markdown:docs/common/meta.zh.md`
+
+#### type
+
+**可选**, _partition | treemap_;
+
+功能描述： 布局类型，更多类型探索中。
+
+默认配置： `partition`
+
+#### seriesField
+
+**可选**, _string_;
+
+功能描述： 分组字段，即要映射的数值字段。
+
+默认配置： 无
+
+#### reflect
+
+**可选**, _x | y_;
+
+功能描述： 径向类型，非特殊情况不建议使用。
+
+默认配置： 无
+
+#### hierarchyConfig
+
+**可选**, _object_;
+
+功能描述： 层级布局配置，例如 `size`、`padding` 等，详细配置参考[d3-hierarchy](https://github.com/d3/d3-hierarchy#treemap)。
+
+默认配置： 无
+
+### 图形样式
+
+#### radius
+
+**可选**, _string_
+
+功能描述: 半径， 0 ~ 1。
+
+默认配置： `1`
+
+#### innerRadius
+
+**可选**, _number_;
+
+功能描述： 内径，0 ~ 1。
+
+默认配置： `0`
+
+#### colorField
+
+**可选**, _string_;
+
+功能描述： 颜色映射字段。
+
+默认配置： 无
+
+`markdown:docs/common/color.zh.md`
+
+#### sunburstStyle ✨
+
+**可选**, _object_
+
+功能描述： 旭日图形样式。pointStyle 中的`fill`会覆盖 `color` 的配置。sunburstStyle 可以直接指定，也可以通过 callback 的方式，根据数据指定单独的样式。
+
+默认配置：
+
+| 细分配置      | 类型   | 功能描述   |
+| ------------- | ------ | ---------- |
+| fill          | string | 填充颜色   |
+| stroke        | string | 描边颜色   |
+| lineWidth     | number | 线宽       |
+| lineDash      | number | 虚线显示   |
+| opacity       | number | 透明度     |
+| fillOpacity   | number | 填充透明度 |
+| strokeOpacity | number | 描边透明度 |
+
+```ts
+// 直接指定
+{
+  sunburstStyle: {
+    fill: 'red',
+    stroke: 'yellow',
+    opacity: 0.8
+  },
+}
+// Function
+{
+  sunburstStyle: (value, item) => {
+    if (value === 0.5) {
+      return {
+        fill: 'green',
+        stroke: 'yellow',
+        opacity: 0.8,
+      }
+    }
+    // TODO
+    return {
+      fill: 'red',
+      stroke: 'yellow',
+      opacity: 0.8,
+    }
+  }
+}
+```
+
+## 图表组件
+
+### 图表组件
+
+`markdown:docs/common/component-polygon.zh.md`

examples/sunburst/basic/demo/basic.ts

@@ -0,0 +1,22 @@
+import { Sunburst } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sunburst.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const sunburstPlot = new Sunburst('container', {
+      data,
+      seriesField: 'sum',
+      colorField: 'value',
+      color: ['#BAE7FF', '#1890FF', '#0050B3'],
+      innerRadius: 0.3,
+      tooltip: {
+        customContent: (_, item) => {
+          const mappingData = item?.[0]?.mappingData;
+          const originData = mappingData?._origin?.data;
+          return `<div>${originData?.label} - ${originData?.sum}</div>`;
+        },
+      },
+      interactions: [{ type: 'element-active' }],
+    });
+    sunburstPlot.render();
+  });