refactor(bullet): 子弹图升级下 & 修复 axis 配置失效 (#2228)

* refactor(bullet): 重构下子弹图的 adaptor

使用通用的 scale adaptor 来处理
fix: 修复子弹图 axis 在没有配置 meta 的时候，axis配置如 tickCount 等失效

* docs(demo): 子弹图 demo 的优化

* docs(bullet): 子弹图 api 文档优化

目前 color 应该只支持 string 或 string[], 不支持回调

* test: 添加测试用例

* fix: demo 的引用路径问题

* test(bullet): 增加测试用例

* docs(bullet): 子弹图默认关闭 x 轴line & 补充子弹图图表指引

Author: visiky

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

@@ -3,6 +3,24 @@ import { bulletData } from '../../../data/bullet';
 import { createDiv } from '../../../utils/dom';
 
 describe('axis bullet', () => {
+  it('axis without meta', () => {
+    const bullet = new Bullet(createDiv('axis*meta bullet'), {
+      width: 400,
+      height: 100,
+      data: bulletData,
+      measureField: 'measures',
+      rangeField: 'ranges',
+      targetField: 'target',
+      xField: 'title',
+      yAxis: { tickCount: 10 },
+    });
+
+    bullet.render();
+    const measureGeometry = bullet.chart.geometries[1];
+    expect(measureGeometry.scales.measures.tickCount).toBe(10);
+
+    bullet.destroy();
+  });
   it('axis*meta', () => {
     const rangeColors = ['#FFB1AC', '#FFDBA2', '#B4EBBF'];
     const bullet = new Bullet(createDiv('axis*meta bullet'), {

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

@@ -16,9 +16,14 @@ describe('bullet', () => {
 
     bullet.render();
 
+    expect(bullet.type).toBe('bullet');
+
     const chart = bullet.chart;
 
     expect(chart.getController('legend').getComponents().length).toEqual(0);
+    // 默认关闭 showMarkers
+    // @ts-ignore
+    expect(chart.getController('tooltip').getTooltipCfg().showMarkers).toEqual(false);
     // @ts-ignore
     expect(chart.options.axes.ranges).toEqual(false);
     // @ts-ignore
@@ -291,4 +296,30 @@ describe('bullet', () => {
 
     bullet.destroy();
   });
+
+  it('meta', () => {
+    const bullet = new Bullet(createDiv(), {
+      width: 400,
+      height: 100,
+      data: [{ title: '数学', ranges: [30, 50, 100], measures: [120], target: 85 }],
+      measureField: 'measures',
+      rangeField: 'ranges',
+      targetField: 'target',
+      xField: 'title',
+      meta: {
+        measures: { max: 100 },
+      },
+    });
+
+    bullet.render();
+    expect(bullet.chart.getScaleByField('measures').max).toBe(100);
+
+    bullet.update({
+      meta: {
+        measures: { max: 90, maxLimit: 120 },
+      },
+    });
+    expect(bullet.chart.getScaleByField('measures').max).toBe(120);
+    expect(bullet.chart.getScaleByField('measures').maxLimit).toBe(120);
+  });
 });

docs/api/plots/bullet.en.md

@@ -17,82 +17,51 @@ order: 10
 
 `markdown:docs/common/meta.en.md`
 
-```ts
-const data = [
-  {
-    title: '满意度',
-    ranges: [100],
-    measures: [80],
-    target: 85,
-  },
-];
-
-const bulletPlot = new Bullet('container', {
-  data,
-  measureField: 'measures',
-  rangeField: 'ranges',
-  targetField: 'target',
-  xField: 'title',
-});
-
-bulletPlot.render();
-```
-
 #### measureField 
 
-<description>**required** _number[]_</description>
+<description>**required** _string_</description>
 
 使用数据条的长度，实际数值的设置字段，表示实际数值。
 
 #### rangeField 
 
-<description>**required** _number[]_</description>
+<description>**required** _string_</description>
 
 使用背景色条的长度的设置字段，表示区间范围。
 
 #### targetField 
 
-<description>**required** _number_</description>
+<description>**required** _string_</description>
 
 使用测量标记的刻度轴位置的设置字段，表示目标值。
 
-#### layout
+#### xField 
 
-<description>**optional** _'horizontal' | 'vertical'_ _default:_ 'horizontal'</description>
+<description>**optional** _string_</description>
 
-表示子弹图方向。
+用于区分不同的类型，适用于分组子弹图。
 
 ### Geometry Style
 
-#### bulletStyle 
-
-<description>**optional** _object_</description>
-
-设置子弹图各图形 style 属性。
+#### layout
 
-| 细分配置 | 类型        | 功能描述     | 默认配置             |
-| -------- | ----------- | ------------ | -------------------- |
-| range    | _StyleAttr_ | 区间背景样式 | { fillOpacity: 0.5 } |
-| measure  | _StyleAttr_ | 实际值样式   | 无                   |
-| target   | _StyleAttr_ | 目标值样式   | 无                   |
+<description>**optional** _'horizontal' | 'vertical'_ _default:_ 'horizontal'</description>
 
-`markdown:docs/common/shape-style.en.md`
+表示子弹图方向。
 
-### color 
+#### color 
 
 <description>**optional** _object_</description>
 
 设置子弹图各图形 color 属性。
 
 | 细分配置 | 类型        | 功能描述     | 默认配置 |
 | -------- | ----------- | ------------ | -------- |
-| range    | _colorAttr_ | 区间背景颜色 | 无       |
-| measure  | _colorAttr_ | 实际值颜色   | 无       |
-| target   | _colorAttr_ | 目标值颜色   | 无       |
-
-`markdown:docs/common/color.en.md`
+| range    | _string\|string[]_ | 区间背景颜色 | 无       |
+| measure  | _string\|string[]_ | 实际值颜色   | 无       |
+| target   | _string\|string[]_ | 目标值颜色   | 无       |
 
-### size 
+#### size 
 
 <description>**optional** _object_</description>
 
@@ -108,7 +77,29 @@ bulletPlot.render();
 type SizeAttr = number | [number, number] | ((datum: Datum) => number);
 ```
 
-### label 
+#### bulletStyle 
+
+<description>**optional** _object_</description>
+
+设置子弹图各图形 style 属性。
+
+| 细分配置 | 类型        | 功能描述     | 默认配置             |
+| -------- | ----------- | ------------ | -------------------- |
+| range    | _StyleAttr_ | 区间背景样式 | { fillOpacity: 0.5 } |
+| measure  | _StyleAttr_ | 实际值样式   | 无                   |
+| target   | _StyleAttr_ | 目标值样式   | 无                   |
+
+```plain
+type StyleAttr = ShapeStyle | ((datum: object) => ShapeStyle);
+```
+
+`ShapeStyle` 结构可以参考：
+
+`markdown:docs/common/shape-style.en.md`
+
+### Plot Components
+
+#### label 
 
 <description>**optional** _object_</description>
 
@@ -122,10 +113,19 @@ type SizeAttr = number | [number, number] | ((datum: Datum) => number);
 
 `markdown:docs/common/label.en.md`
 
-### Plot Components
+#### tooltip
+
+`markdown:docs/common/tooltip.en.md`
+
+#### axis
+
+Same for xAxis and yAxis.
+
+`markdown:docs/common/axis.en.md`
 
-`markdown:docs/common/component.en.md`
+#### legend
 
+`markdown:docs/common/legend.en.md`
 ### Event
 
 `markdown:docs/common/events.en.md`

docs/api/plots/bullet.zh.md

@@ -17,82 +17,51 @@ order: 10
 
 `markdown:docs/common/meta.zh.md`
 
-```ts
-const data = [
-  {
-    title: '满意度',
-    ranges: [100],
-    measures: [80],
-    target: 85,
-  },
-];
-
-const bulletPlot = new Bullet('container', {
-  data,
-  measureField: 'measures',
-  rangeField: 'ranges',
-  targetField: 'target',
-  xField: 'title',
-});
-
-bulletPlot.render();
-```
-
 #### measureField 
 
-<description>**required** _number[]_</description>
+<description>**required** _string_</description>
 
 使用数据条的长度，实际数值的设置字段，表示实际数值。
 
 #### rangeField 
 
-<description>**required** _number[]_</description>
+<description>**required** _string_</description>
 
 使用背景色条的长度的设置字段，表示区间范围。
 
 #### targetField 
 
-<description>**required** _number_</description>
+<description>**required** _string_</description>
 
 使用测量标记的刻度轴位置的设置字段，表示目标值。
 
-#### layout
+#### xField 
 
-<description>**optional** _'horizontal' | 'vertical'_ _default:_ 'horizontal'</description>
+<description>**optional** _string_</description>
 
-表示子弹图方向。
+用于区分不同的类型，适用于分组子弹图。
 
 ### 图形样式
 
-#### bulletStyle 
-
-<description>**optional** _object_</description>
-
-设置子弹图各图形 style 属性。
+#### layout
 
-| 细分配置 | 类型        | 功能描述     | 默认配置             |
-| -------- | ----------- | ------------ | -------------------- |
-| range    | _StyleAttr_ | 区间背景样式 | { fillOpacity: 0.5 } |
-| measure  | _StyleAttr_ | 实际值样式   | 无                   |
-| target   | _StyleAttr_ | 目标值样式   | 无                   |
+<description>**optional** _'horizontal' | 'vertical'_ _default:_ 'horizontal'</description>
 
-`markdown:docs/common/shape-style.zh.md`
+表示子弹图方向。
 
-### color 
+#### color 
 
 <description>**optional** _object_</description>
 
 设置子弹图各图形 color 属性。
 
 | 细分配置 | 类型        | 功能描述     | 默认配置 |
 | -------- | ----------- | ------------ | -------- |
-| range    | _colorAttr_ | 区间背景颜色 | 无       |
-| measure  | _colorAttr_ | 实际值颜色   | 无       |
-| target   | _colorAttr_ | 目标值颜色   | 无       |
-
-`markdown:docs/common/color.zh.md`
+| range    | _string\|string[]_ | 区间背景颜色 | 无       |
+| measure  | _string\|string[]_ | 实际值颜色   | 无       |
+| target   | _string\|string[]_ | 目标值颜色   | 无       |
 
-### size 
+#### size 
 
 <description>**optional** _object_</description>
 
@@ -108,7 +77,29 @@ bulletPlot.render();
 type SizeAttr = number | [number, number] | ((datum: Datum) => number);
 ```
 
-### label 
+#### bulletStyle 
+
+<description>**optional** _object_</description>
+
+设置子弹图各图形 style 属性。
+
+| 细分配置 | 类型        | 功能描述     | 默认配置             |
+| -------- | ----------- | ------------ | -------------------- |
+| range    | _StyleAttr_ | 区间背景样式 | { fillOpacity: 0.5 } |
+| measure  | _StyleAttr_ | 实际值样式   | 无                   |
+| target   | _StyleAttr_ | 目标值样式   | 无                   |
+
+```plain
+type StyleAttr = ShapeStyle | ((datum: object) => ShapeStyle);
+```
+
+`ShapeStyle` 结构可以参考：
+
+`markdown:docs/common/shape-style.zh.md`
+
+### 图表组件
+
+#### label 
 
 <description>**optional** _object_</description>
 
@@ -122,9 +113,19 @@ type SizeAttr = number | [number, number] | ((datum: Datum) => number);
 
 `markdown:docs/common/label.zh.md`
 
-### 图表组件
+#### tooltip
+
+`markdown:docs/common/tooltip.zh.md`
 
-`markdown:docs/common/component.zh.md`
+#### axis
+
+xAxis、yAxis 配置相同（由于 DualAxes 是双轴， yAxis 类型是数组类型）。
+
+`markdown:docs/common/axis.zh.md`
+
+#### 图例
+
+`markdown:docs/common/legend.zh.md`
 
 ### 事件
 
@@ -134,8 +135,6 @@ type SizeAttr = number | [number, number] | ((datum: Datum) => number);
 
 `markdown:docs/common/chart-methods.zh.md`
 
-
-
 ### 图表主题
 
 `markdown:docs/common/theme.zh.md`