feat: radial-bar chart

__tests__/data/antv-star.ts

@@ -0,0 +1,10 @@
+export const antvStar = [
+  { name: 'X6', star: 297 },
+  { name: 'G', star: 506 },
+  { name: 'AVA', star: 805 },
+  { name: 'G2Plot', star: 1478 },
+  { name: 'L7', star: 2029 },
+  { name: 'F2', star: 7346 },
+  { name: 'G6', star: 7100 },
+  { name: 'G2', star: 10178 },
+];

__tests__/unit/plots/radial-bar/axis-spec.ts

@@ -0,0 +1,34 @@
+import { RadialBar } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+import { antvStar } from '../../../data/antv-star';
+
+const xField = 'name';
+const yField = 'star';
+
+describe('radial-bar axis', () => {
+  it('xAxis*yAxis', () => {
+    const bar = new RadialBar(createDiv(), {
+      width: 400,
+      height: 300,
+      data: antvStar,
+      xField,
+      yField,
+      yAxis: {
+        line: {
+          style: {
+            lineWidth: 1,
+            fill: 'red',
+          },
+        },
+      },
+    });
+    bar.render();
+    const axisOptions = bar.chart.getOptions().axes;
+    expect(axisOptions[yField]).toBeUndefined();
+    expect(axisOptions[xField]).toMatchObject({
+      grid: null,
+      line: null,
+      tickLine: null,
+    });
+  });
+});

__tests__/unit/plots/radial-bar/index-spec.ts

@@ -0,0 +1,51 @@
+import { RadialBar } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+import { antvStar } from '../../../data/antv-star';
+
+const xField = 'name';
+const yField = 'star';
+
+describe('radial-bar', () => {
+  it('xField*yField', () => {
+    const bar = new RadialBar(createDiv(), {
+      width: 400,
+      height: 300,
+      data: antvStar,
+      xField,
+      yField,
+      radius: 0.8,
+      innerRadius: 0.2,
+      xAxis: false,
+    });
+    bar.render();
+    const geometry = bar.chart.geometries[0];
+    const positionFields = geometry.getAttribute('position').getFields();
+    expect(geometry.type).toBe('interval');
+    expect(geometry.coordinate.type).toBe('polar');
+    expect(geometry.coordinate.innerRadius).toBe(0.2);
+    expect(geometry.coordinate.isTransposed).toBe(true);
+    expect(bar.chart.geometries[0].elements.length).toBe(antvStar.length);
+    expect(positionFields).toHaveLength(2);
+    expect(positionFields[0]).toBe(xField);
+    expect(positionFields[1]).toBe(yField);
+  });
+
+  it('xField*yField*color', () => {
+    const color = 'red';
+    const bar = new RadialBar(createDiv(), {
+      width: 400,
+      height: 300,
+      data: antvStar,
+      xField,
+      yField,
+      color,
+      xAxis: false,
+    });
+
+    bar.render();
+    const geometry = bar.chart.geometries[0];
+    const colorFields = geometry.getAttribute('color').getFields();
+    expect(colorFields).toHaveLength(1);
+    expect(colorFields[0]).toBe(color);
+  });
+});

__tests__/unit/plots/radial-bar/style-spec.ts

@@ -0,0 +1,30 @@
+import { RadialBar } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+import { antvStar } from '../../../data/antv-star';
+
+const xField = 'name';
+const yField = 'star';
+
+describe('radial-bar style', () => {
+  it('bar styles', () => {
+    const bar = new RadialBar(createDiv(), {
+      width: 400,
+      height: 300,
+      data: antvStar,
+      xField,
+      yField,
+      barStyle: {
+        fill: 'red',
+        fillOpacity: 0.6,
+        cursor: 'pointer',
+      },
+    });
+    bar.render();
+    const geometry = bar.chart.geometries[0];
+    expect(geometry.elements[0].getModel().style).toMatchObject({
+      fill: 'red',
+      fillOpacity: 0.6,
+      cursor: 'pointer',
+    });
+  });
+});

__tests__/unit/plots/radial-bar/tooltip-spec.ts

@@ -0,0 +1,32 @@
+import { RadialBar } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+import { Datum } from '../../../../src/types';
+import { antvStar } from '../../../data/antv-star';
+
+const xField = 'name';
+const yField = 'star';
+
+describe('radial-bar tooltip', () => {
+  const formatter = (datum: Datum) => {
+    return { name: 'star', value: datum.percent * 100 + '%' };
+  };
+  it('tooltip default', () => {
+    const bar = new RadialBar(createDiv(), {
+      width: 400,
+      height: 300,
+      data: antvStar,
+      xField,
+      yField,
+      tooltip: {
+        formatter,
+      },
+    });
+    bar.render();
+    // @ts-ignore
+    const tooltip = bar.chart.options.tooltip;
+    // @ts-ignore
+    expect(tooltip.showMarkers).toBe(false);
+    // @ts-ignore
+    expect(tooltip.formatter).toBe(formatter);
+  });
+});

__tests__/unit/plots/radial-bar/utils-spec.ts

@@ -0,0 +1,14 @@
+import { getScaleMax } from '../../../../src/plots/radial-bar/utils';
+import { antvStar } from '../../../data/antv-star';
+
+const yField = 'star';
+
+describe('utils of radial-bar', () => {
+  const starArr = antvStar.map((item) => item[yField]);
+  const maxValue = Math.max(...starArr);
+  it('getScaleMax: normal', () => {
+    expect(getScaleMax(300, yField, antvStar)).toBe((maxValue * 360) / 300);
+    expect(getScaleMax(-300, yField, antvStar)).toBe((maxValue * 360) / 300);
+    expect(getScaleMax(660, yField, antvStar)).toBe((maxValue * 360) / 300);
+  });
+});

docs/manual/plots/radial-bar.en.md

@@ -0,0 +1,67 @@
+---
+title: 玉珏图
+order: 0
+---
+
+## 配置属性
+
+### 图表容器
+
+`markdown:docs/common/chart-options.en.md`
+
+### 数据映射
+
+#### data 📌
+
+**必选**, _array object_
+
+功能描述： 设置图表数据源
+
+默认配置： 无
+
+数据源为对象集合，例如：`[{ time: '1991'，value: 20 }, { time: '1992'，value: 30 }]`。
+
+`markdown:docs/common/xy-field.en.md`
+
+`markdown:docs/common/meta.en.md`
+
+### 图形样式
+
+#### radius
+
+**可选**, _string_
+
+功能描述: 半径， 0 ~ 1。
+
+默认配置： `1`
+
+#### innerRadius
+
+**可选**, _number_;
+
+功能描述： 内径，0 ~ 1。
+
+#### maxAngle
+
+**可选**, _number_
+
+功能描述： 最大旋转角度，由 data 中最大的数值决定，最大值是 360 度。
+
+默认配置： 240
+
+
+#### barStyle
+
+**可选**, _StyleAttr | Function_
+
+功能描述： 样式配置 。
+
+默认配置： 无
+
+`markdown:docs/common/shape-style.en.md`
+
+`markdown:docs/common/color.en.md`
+
+### 图表组件
+
+`markdown:docs/common/component.en.md`

docs/manual/plots/radial-bar.zh.md

@@ -0,0 +1,67 @@
+---
+title: 玉珏图
+order: 0
+---
+
+## 配置属性
+
+### 图表容器
+
+`markdown:docs/common/chart-options.zh.md`
+
+### 数据映射
+
+#### data 📌
+
+**必选**, _array object_
+
+功能描述： 设置图表数据源
+
+默认配置： 无
+
+数据源为对象集合，例如：`[{ time: '1991'，value: 20 }, { time: '1992'，value: 30 }]`。
+
+`markdown:docs/common/xy-field.zh.md`
+
+`markdown:docs/common/meta.zh.md`
+
+### 图形样式
+
+#### radius
+
+**可选**, _string_
+
+功能描述: 半径， 0 ~ 1。
+
+默认配置： `1`
+
+#### innerRadius
+
+**可选**, _number_;
+
+功能描述： 内径，0 ~ 1。
+
+#### maxAngle
+
+**可选**, _number_
+
+功能描述： 最大旋转角度，由 data 中最大的数值决定，最大值是 360 度。
+
+默认配置： 240
+
+
+#### barStyle
+
+**可选**, _StyleAttr | Function_
+
+功能描述： 样式配置 。
+
+默认配置： 无
+
+`markdown:docs/common/shape-style.zh.md`
+
+`markdown:docs/common/color.en.md`
+
+### 图表组件
+
+`markdown:docs/common/component.zh.md`

examples/radial-bar/basic/API.en.md

@@ -0,0 +1,70 @@
+## 配置属性
+
+### 图表容器
+
+`markdown:docs/common/chart-options.en.md`
+
+### 数据映射
+
+#### data 📌
+
+**必选**, _array object_
+
+功能描述： 设置图表数据源
+
+默认配置： 无
+
+数据源为对象集合，例如：`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。
+
+`markdown:docs/common/meta.en.md`
+
+
+#### colorField 📌
+
+**可选**, _string_
+
+功能描述： 颜色映射对应的数据字段名。
+
+默认配置： 无
+
+### 图形样式
+
+#### radius
+
+**可选**, _string_
+
+功能描述: 半径， 0 ~ 1。
+
+默认配置： `1`
+
+#### innerRadius
+
+**可选**, _number_;
+
+功能描述： 内径，0 ~ 1。
+
+
+#### maxAngle
+
+**可选**, _number_
+
+功能描述： 最大旋转角度，由 data 中最大的数值决定，最大值是 360 度。
+
+默认配置： 240
+
+`markdown:docs/common/color.en.md`
+
+#### barStyle
+
+**可选**, _StyleAttr | Function_
+
+功能描述： 样式配置 。
+
+默认配置： 无
+
+`markdown:docs/common/shape-style.en.md`
+
+
+### 图表组件
+
+`markdown:docs/common/component-no-axis.en.md`