feat: v2增强子弹图 (#1566)

* fix: 修复之前v2-bullet合并问题 * feat: 增加支持垂直方向的子弹图
antvis · Sep 14, 2020 · 37e0c31 · 37e0c31
1 parent b8e6a4b
commit 37e0c31
Show file tree

Hide file tree

Showing 11 changed files with 186 additions and 23 deletions.
diff --git a/__tests__/unit/plots/bullet/axis-spec.ts b/__tests__/unit/plots/bullet/axis-spec.ts
@@ -31,7 +31,7 @@ describe('axis bullet', () => {
     const rangeGeometry = bullet.chart.geometries[0];
     expect(rangeGeometry.getAdjust('stack')).toMatchObject({
       xField: 'title',
-      yField: 'range',
+      yField: 'ranges',
     });
     expect(rangeGeometry.getAttribute('color').values).toEqual(rangeColors);
 

diff --git a/__tests__/unit/plots/bullet/index-spec.ts b/__tests__/unit/plots/bullet/index-spec.ts
@@ -2,7 +2,7 @@ import { Bullet } from '../../../../src';
 import { bulletData, bulletDatas } from '../../../data/bullet';
 import { createDiv } from '../../../utils/dom';
 
-describe.skip('bullet', () => {
+describe('bullet', () => {
   it('default', () => {
     const bullet = new Bullet(createDiv('basic bullet'), {
       width: 400,
@@ -23,7 +23,7 @@ describe.skip('bullet', () => {
     expect(rangeGeometry.getAttribute('size').values[0]).toEqual(30);
     expect(rangeGeometry.getAdjust('stack')).toMatchObject({
       xField: 'title',
-      yField: 'range',
+      yField: 'ranges',
     });
     expect(rangeGeometry.getYScale().max).toEqual(100);
     expect(rangeGeometry.getYScale().min).toEqual(0);
@@ -61,11 +61,11 @@ describe.skip('bullet', () => {
 
     expect(rangeGeometry.getAttribute('size').values[0]).toEqual(30);
     expect(rangeGeometry.getAdjust('stack')).toMatchObject({
-      yField: 'range',
+      yField: 'ranges',
     });
 
     expect(measureGeometry.getAdjust('stack')).toMatchObject({
-      yField: 'measure',
+      yField: 'measures',
     });
     expect(measureGeometry.getYScale().max).toEqual(100);
     expect(measureGeometry.getYScale().min).toEqual(0);
@@ -94,7 +94,7 @@ describe.skip('bullet', () => {
     expect(measureGeometry.getAttribute('size').values[0]).toEqual(20);
     expect(measureGeometry.getAdjust('stack')).toMatchObject({
       xField: 'title',
-      yField: 'measure',
+      yField: 'measures',
     });
     expect(measureGeometry.getAttribute('color').values).toEqual('#ff0000');
   });
@@ -148,7 +148,7 @@ describe.skip('bullet', () => {
     expect(rangeGeometry.getAttribute('size').values[0]).toEqual(30);
     expect(rangeGeometry.getAdjust('stack')).toMatchObject({
       xField: 'title',
-      yField: 'range',
+      yField: 'ranges',
     });
     expect(rangeGeometry.getAttribute('color').values).toEqual(rangeColors);
   });
@@ -176,7 +176,7 @@ describe.skip('bullet', () => {
     const measureGeometry = chart.geometries[1];
     expect(measureGeometry.getAdjust('stack')).toMatchObject({
       xField: 'title',
-      yField: 'measure',
+      yField: 'measures',
     });
     expect(measureGeometry.getAttribute('color').values).toEqual(measureColors);
   });
@@ -208,14 +208,14 @@ describe.skip('bullet', () => {
     expect(rangeGeometry.getAttribute('size').values[0]).toEqual(rangeSize);
     expect(rangeGeometry.getAdjust('stack')).toMatchObject({
       xField: 'title',
-      yField: 'range',
+      yField: 'ranges',
     });
 
     const measureGeometry = chart.geometries[1];
     expect(measureGeometry.getAttribute('size').values[0]).toEqual(measureSize);
     expect(measureGeometry.getAdjust('stack')).toMatchObject({
       xField: 'title',
-      yField: 'measure',
+      yField: 'measures',
     });
   });
 
@@ -250,14 +250,14 @@ describe.skip('bullet', () => {
     expect(rangeGeometry.getAttribute('size').values[0]).toEqual(rangeSize);
     expect(rangeGeometry.getAdjust('stack')).toMatchObject({
       xField: 'title',
-      yField: 'range',
+      yField: 'ranges',
     });
 
     const measureGeometry = chart.geometries[1];
     expect(measureGeometry.getAttribute('size').values[0]).toEqual(measureSize);
     expect(measureGeometry.getAdjust('stack')).toMatchObject({
       xField: 'title',
-      yField: 'measure',
+      yField: 'measures',
     });
 
     const targetGeometry = chart.geometries[2];

diff --git a/__tests__/unit/plots/bullet/label-spec.ts b/__tests__/unit/plots/bullet/label-spec.ts
@@ -26,7 +26,7 @@ describe('bullet*label', () => {
     const measureGeometry = chart.geometries[1];
     expect(measureGeometry.getAdjust('stack')).toMatchObject({
       xField: 'title',
-      yField: 'measure',
+      yField: 'measures',
     });
     // @ts-ignore
     expect(measureGeometry.labelOption.cfg.position).toEqual('middle');

diff --git a/__tests__/unit/plots/bullet/layout-spec.ts b/__tests__/unit/plots/bullet/layout-spec.ts
@@ -0,0 +1,72 @@
+import { Bullet } from '../../../../src';
+import { bulletDatas } from '../../../data/bullet';
+import { createDiv } from '../../../utils/dom';
+
+describe('bullet*label', () => {
+  it('layout*default*horizontal', () => {
+    const bullet = new Bullet(createDiv('layout*default*horizontal bullet'), {
+      width: 400,
+      height: 400,
+      data: bulletDatas,
+      measureField: 'measures',
+      rangeField: 'ranges',
+      targetField: 'target',
+      xField: 'title',
+    });
+
+    bullet.render();
+
+    const chart = bullet.chart;
+    const [rangeGeometry, measureGeometry, targetGeometry] = chart.geometries;
+    expect(rangeGeometry.getAdjust('stack')).toMatchObject({
+      xField: 'title',
+      yField: 'ranges',
+    });
+    expect(measureGeometry.getAdjust('stack')).toMatchObject({
+      xField: 'title',
+      yField: 'measures',
+    });
+    // @ts-ignore 默认水平的时候会转换坐标轴
+    expect(chart.getCoordinate().isTransposed).toBe(true);
+    const shapeArr = [];
+    const elements = targetGeometry.elements;
+    elements.forEach((ele) => {
+      shapeArr.push(ele.getModel().shape);
+    });
+    expect(shapeArr).toContain('line');
+  });
+
+  it('layout vertical', () => {
+    const bullet = new Bullet(createDiv('layout*vertical bullet'), {
+      width: 400,
+      height: 400,
+      data: bulletDatas,
+      measureField: 'measures',
+      rangeField: 'ranges',
+      targetField: 'target',
+      xField: 'title',
+      layout: 'vertical',
+    });
+
+    bullet.render();
+
+    const chart = bullet.chart;
+    const [rangeGeometry, measureGeometry, targetGeometry] = chart.geometries;
+    expect(rangeGeometry.getAdjust('stack')).toMatchObject({
+      xField: 'title',
+      yField: 'ranges',
+    });
+    expect(measureGeometry.getAdjust('stack')).toMatchObject({
+      xField: 'title',
+      yField: 'measures',
+    });
+    // @ts-ignore 垂直的时候不会转换坐标轴
+    expect(chart.getCoordinate().isTransposed).toBe(false);
+    const shapeArr = [];
+    const elements = targetGeometry.elements;
+    elements.forEach((ele) => {
+      shapeArr.push(ele.getModel().shape);
+    });
+    expect(shapeArr).toContain('hyphen');
+  });
+});
diff --git a/examples/bullet/basic/API.en.md b/examples/bullet/basic/API.en.md
@@ -18,7 +18,7 @@ title: API
 
 默认配置： 无
 
-数据源为对象集合，例如：`[{title: '满意度', ranges: [100], measures: [80], target: 85}]`。
+数据源为对象集合，例如：`[{title: '满意度', ranges: [50,100], measures: [80], target: 85}]`。
 
 ### meta
 
@@ -88,6 +88,14 @@ bulletPlot.render();
 
 默认配置： 无
 
+### layout
+
+**可选**, 'horizontal' | 'vertical'
+
+功能描述： 表示子弹图方向。
+
+默认配置： 'horizontal'
+
 ## 图形样式
 
 bulletStyle ✨
@@ -96,8 +104,8 @@ bulletStyle ✨
 
 功能描述： 设置子弹图样式。
 
-| 细分配置 | 类型       | 功能描述     |
-| -------- | ---------- | ------------ |
+| 细分配置 | 类型         | 功能描述     |
+| -------- | ------------ | ------------ |
 | range    | _BasicStyle_ | 区间背景样式 |
 | measure  | _BasicStyle_ | 实际值样式   |
 | target   | _BasicStyle_ | 目标值样式   |

diff --git a/examples/bullet/basic/API.zh.md b/examples/bullet/basic/API.zh.md
@@ -88,6 +88,14 @@ bulletPlot.render();
 
 默认配置： 无
 
+### layout
+
+**可选**, 'horizontal' | 'vertical'
+
+功能描述： 表示子弹图方向。
+
+默认配置： 'horizontal'
+
 ## 图形样式
 
 bulletStyle ✨

diff --git a/examples/bullet/basic/demo/layout.ts b/examples/bullet/basic/demo/layout.ts
@@ -0,0 +1,49 @@
+import { Bullet } from '@antv/g2plot';
+
+const data = [
+  {
+    title: '满意度',
+    ranges: [100],
+    measures: [80],
+    target: 85,
+  },
+];
+
+// @TODO 差一张垂直方向的缩略图
+const bulletPlot = new Bullet('container', {
+  data,
+  measureField: 'measures',
+  rangeField: 'ranges',
+  targetField: 'target',
+  xField: 'title',
+  xAxis: {
+    line: null,
+  },
+  yAxis: false,
+  layout: 'vertical',
+  label: {
+    position: 'middle',
+    style: {
+      fill: '#fff',
+    },
+  },
+  // 自定义 legend
+  legend: {
+    custom: true,
+    position: 'bottom',
+    items: [
+      {
+        value: '实际值',
+        name: '实际值',
+        marker: { symbol: 'square', style: { fill: '#5B8FF9', r: 5 } },
+      },
+      {
+        value: '目标值',
+        name: '目标值',
+        marker: { symbol: 'line', style: { stroke: '#5B8FF9', r: 5 } },
+      },
+    ],
+  },
+});
+
+bulletPlot.render();
diff --git a/examples/bullet/basic/demo/meta.json b/examples/bullet/basic/demo/meta.json
@@ -7,7 +7,15 @@
     {
       "filename": "basic.ts",
       "title": {
-        "zh": "基础子弹图",
+        "zh": "基础水平方向子弹图",
+        "en": "basic Bullet chart"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Vk43S5pvUJcAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "layout.ts",
+      "title": {
+        "zh": "基础垂直方向子弹图",
         "en": "basic Bullet chart"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Vk43S5pvUJcAAAAAAAAAAABkARQnAQ"

diff --git a/src/plots/bullet/adaptor.ts b/src/plots/bullet/adaptor.ts
@@ -12,7 +12,7 @@ import { transformData } from './utils';
  */
 function field(params: Params<BulletOptions>): Params<BulletOptions> {
   const { chart, options } = params;
-  const { bulletStyle, targetField, rangeField, measureField, xField } = options;
+  const { bulletStyle, targetField, rangeField, measureField, xField, layout } = options;
   const { range, measure, target } = bulletStyle;
   // 处理数据
   const { min, max, ds } = transformData(options);
@@ -31,11 +31,15 @@ function field(params: Params<BulletOptions>): Params<BulletOptions> {
     },
   });
   chart.data(ds);
-  chart.coordinate().transpose();
   chart.axis(`${rangeField}`, false);
   chart.axis(`${targetField}`, false);
 
-  const rangeGeometry = chart.interval().position('title*range').adjust('stack').color('index').tooltip(false);
+  const rangeGeometry = chart
+    .interval()
+    .position(`${xField}*${rangeField}`)
+    .adjust('stack')
+    .color('index')
+    .tooltip(false);
 
   if (isNumber(range.size)) {
     rangeGeometry.size(range.size);
@@ -45,7 +49,12 @@ function field(params: Params<BulletOptions>): Params<BulletOptions> {
     rangeGeometry.color('index', range.color);
   }
 
-  const measureGeometry = chart.interval().position('title*measure').label('measure').adjust('stack').color('index');
+  const measureGeometry = chart
+    .interval()
+    .position(`${xField}*${measureField}`)
+    .label('measure')
+    .adjust('stack')
+    .color('index');
 
   if (isNumber(measure.size)) {
     measureGeometry.size(measure.size);
@@ -55,15 +64,20 @@ function field(params: Params<BulletOptions>): Params<BulletOptions> {
     measureGeometry.color('index', measure.color);
   }
 
-  const targetGeometry = chart.point().position('title*target').shape('line');
-
+  const targetGeometry = chart.point().position(`${xField}*${targetField}`).shape('hyphen');
   if (isNumber(target.size)) {
     targetGeometry.size(target.size / 2); // 是半径
   }
   if (target.color) {
     targetGeometry.color('index', target.color);
   }
 
+  // 水平的时候，要转换坐标轴和换图形为 line
+  if (layout === 'horizontal') {
+    chart.coordinate().transpose();
+    targetGeometry.shape('line');
+  }
+
   return params;
 }
 

diff --git a/src/plots/bullet/index.ts b/src/plots/bullet/index.ts
@@ -22,6 +22,7 @@ export class Bullet extends Plot<BulletOptions> {
       label: {
         position: 'right',
       },
+      layout: 'horizontal',
       legend: false,
       bulletStyle: {
         target: {

diff --git a/src/plots/bullet/types.ts b/src/plots/bullet/types.ts
@@ -29,4 +29,7 @@ export interface BulletOptions extends Options {
     target?: BasicStyle;
     range?: BasicStyle;
   };
+
+  /** layout 方向选择*/
+  layout?: 'horizontal' | 'vertical';
 }