feat: 对称条形图（Bi-directional） (#1746)

* feat: 对称条形图（new） * feat: 完善小细节部分 * feat: 完整的实现和单测 * feat: 基本完善对称条形图 * fix: 优化几个小问题
antvis · Oct 29, 2020 · e420761 · e420761
1 parent ef7d201
commit e420761
Show file tree

Hide file tree

Showing 14 changed files with 716 additions and 0 deletions.
diff --git a/__tests__/data/bi-directional.ts b/__tests__/data/bi-directional.ts
@@ -0,0 +1,11 @@
+export const data = [
+  { country: '乌拉圭', '2016年耕地总面积': 13.4, '2016年转基因种植面积': 12.3 },
+  { country: '巴拉圭', '2016年耕地总面积': 14.4, '2016年转基因种植面积': 6.3 },
+  { country: '南非', '2016年耕地总面积': 18.4, '2016年转基因种植面积': 8.3 },
+  { country: '巴基斯坦', '2016年耕地总面积': 34.4, '2016年转基因种植面积': 13.8 },
+  { country: '阿根廷', '2016年耕地总面积': 44.4, '2016年转基因种植面积': 19.5 },
+  { country: '巴西', '2016年耕地总面积': 24.4, '2016年转基因种植面积': 18.8 },
+  { country: '加拿大', '2016年耕地总面积': 54.4, '2016年转基因种植面积': 24.7 },
+  { country: '中国', '2016年耕地总面积': 104.4, '2016年转基因种植面积': 5.3 },
+  { country: '美国', '2016年耕地总面积': 165.2, '2016年转基因种植面积': 72.9 },
+];
diff --git a/__tests__/unit/plots/bidirectional-bar/axis-spec.ts b/__tests__/unit/plots/bidirectional-bar/axis-spec.ts
@@ -0,0 +1,77 @@
+import { BidirectionalBar } from '../../../../src';
+import { data } from '../../../data/bi-directional';
+import { createDiv } from '../../../utils/dom';
+
+describe('Bidirectional axis', () => {
+  it('x*y*yAxis', () => {
+    const bidirectional = new BidirectionalBar(createDiv('x*y*xAxis'), {
+      width: 400,
+      height: 400,
+      data,
+      xField: 'country',
+      yField: ['2016年耕地总面积', '2016年转基因种植面积'],
+      yAxis: {
+        '2016年耕地总面积': {
+          nice: true,
+        },
+        '2016年转基因种植面积': {
+          nice: true,
+          min: 0,
+          max: 100,
+        },
+      },
+    });
+    bidirectional.render();
+
+    const firstView = bidirectional.chart.views[0];
+    const secondView = bidirectional.chart.views[1];
+
+    //@ts-ignore
+    expect(firstView.options.axes['2016年耕地总面积'].nice).toEqual(true);
+    //@ts-ignore
+    expect(secondView.options.axes['2016年转基因种植面积'].nice).toEqual(true);
+    //@ts-ignore
+    expect(secondView.options.axes['2016年转基因种植面积'].min).toEqual(0);
+    //@ts-ignore
+    expect(secondView.options.axes['2016年转基因种植面积'].max).toEqual(100);
+    //@ts-ignore
+    expect(secondView.options.axes.country).toEqual(false);
+  });
+
+  it('x*y*xAxis*false', () => {
+    const bidirectional = new BidirectionalBar(createDiv('x*y*xAxis*false'), {
+      width: 400,
+      height: 400,
+      data,
+      xField: 'country',
+      yField: ['2016年耕地总面积', '2016年转基因种植面积'],
+      xAxis: false,
+    });
+    bidirectional.render();
+
+    const firstView = bidirectional.chart.views[0];
+    const secondView = bidirectional.chart.views[1];
+    // @ts-ignore
+    expect(firstView.options.axes.country).toEqual(false);
+    //@ts-ignore
+    expect(secondView.options.axes.country).toEqual(false);
+  });
+  it('x*y*yAxis*false', () => {
+    const bidirectional = new BidirectionalBar(createDiv('x*y*yAxis*false'), {
+      width: 400,
+      height: 400,
+      data,
+      xField: 'country',
+      yField: ['2016年耕地总面积', '2016年转基因种植面积'],
+      yAxis: false,
+    });
+    bidirectional.render();
+
+    const firstView = bidirectional.chart.views[0];
+    const secondView = bidirectional.chart.views[1];
+    // @ts-ignore
+    expect(firstView.options.axes['2016年耕地总面积']).toEqual(false);
+    //@ts-ignore
+    expect(secondView.options.axes['2016年转基因种植面积']).toEqual(false);
+  });
+});
diff --git a/__tests__/unit/plots/bidirectional-bar/data-spec.ts b/__tests__/unit/plots/bidirectional-bar/data-spec.ts
@@ -0,0 +1,31 @@
+import { transformData } from '../../../../src/plots/bidirectional-bar/utils';
+import { data } from '../../../data/bi-directional';
+
+export const hopedata = [
+  { country: '乌拉圭', type: '2016年耕地总面积', '2016年耕地总面积': 13.4 },
+  { country: '巴拉圭', type: '2016年耕地总面积', '2016年耕地总面积': 14.4 },
+  { country: '南非', type: '2016年耕地总面积', '2016年耕地总面积': 18.4 },
+  { country: '巴基斯坦', type: '2016年耕地总面积', '2016年耕地总面积': 34.4 },
+  { country: '阿根廷', type: '2016年耕地总面积', '2016年耕地总面积': 44.4 },
+  { country: '巴西', type: '2016年耕地总面积', '2016年耕地总面积': 24.4 },
+  { country: '加拿大', type: '2016年耕地总面积', '2016年耕地总面积': 54.4 },
+  { country: '中国', type: '2016年耕地总面积', '2016年耕地总面积': 104.4 },
+  { country: '美国', type: '2016年耕地总面积', '2016年耕地总面积': 165.2 },
+
+  { country: '乌拉圭', type: '2016年转基因种植面积', '2016年转基因种植面积': 12.3 },
+  { country: '巴拉圭', type: '2016年转基因种植面积', '2016年转基因种植面积': 6.3 },
+  { country: '南非', type: '2016年转基因种植面积', '2016年转基因种植面积': 8.3 },
+  { country: '巴基斯坦', type: '2016年转基因种植面积', '2016年转基因种植面积': 13.8 },
+  { country: '阿根廷', type: '2016年转基因种植面积', '2016年转基因种植面积': 19.5 },
+  { country: '巴西', type: '2016年转基因种植面积', '2016年转基因种植面积': 18.8 },
+  { country: '加拿大', type: '2016年转基因种植面积', '2016年转基因种植面积': 24.7 },
+  { country: '中国', type: '2016年转基因种植面积', '2016年转基因种植面积': 5.3 },
+  { country: '美国', type: '2016年转基因种植面积', '2016年转基因种植面积': 72.9 },
+];
+describe('bullet*data*transfrom', () => {
+  it('data*transfrom', () => {
+    // 校验数据转换
+    const transDS = transformData('country', ['2016年耕地总面积', '2016年转基因种植面积'], data);
+    expect(transDS).toEqual(hopedata);
+  });
+});
diff --git a/__tests__/unit/plots/bidirectional-bar/index-spec.ts b/__tests__/unit/plots/bidirectional-bar/index-spec.ts
@@ -0,0 +1,126 @@
+import { BidirectionalBar } from '../../../../src';
+import { data } from '../../../data/bi-directional';
+import { createDiv } from '../../../utils/dom';
+
+describe('Bidirectional', () => {
+  it('default', () => {
+    const bidirectional = new BidirectionalBar(createDiv('default'), {
+      width: 400,
+      height: 400,
+      data,
+      xField: 'country',
+      yField: ['2016年耕地总面积', '2016年转基因种植面积'],
+    });
+    bidirectional.render();
+
+    expect(bidirectional.type).toEqual('bidirectional-bar');
+
+    const leftView = bidirectional.chart.views[0];
+    const rightView = bidirectional.chart.views[1];
+    const leftG = bidirectional.chart.views[0].geometries[0];
+    const rightG = bidirectional.chart.views[1].geometries[0];
+    //@ts-ignore
+    expect(leftView.options.axes.country.position).toEqual('top');
+    //@ts-ignore
+    expect(rightView.options.axes.country).toEqual(false);
+    expect(bidirectional.chart.getOptions().scales.type.sync).toEqual(true);
+
+    // 类型
+    expect(leftG.type).toBe('interval');
+    expect(rightG.type).toBe('interval');
+
+    // x & y
+    const LpositionFields = leftG.getAttribute('position').getFields();
+    const RpositionFields = rightG.getAttribute('position').getFields();
+    expect(LpositionFields).toHaveLength(2);
+    expect(LpositionFields[0]).toBe('country');
+    expect(LpositionFields[1]).toBe('2016年耕地总面积');
+
+    expect(RpositionFields).toHaveLength(2);
+    expect(RpositionFields[0]).toBe('country');
+    expect(RpositionFields[1]).toBe('2016年转基因种植面积');
+
+    const LcolorAttribute = leftG.getAttribute('color');
+    const LseriesFields = LcolorAttribute.getFields();
+
+    expect(LseriesFields).toHaveLength(1);
+    expect(LseriesFields[0]).toBe('type');
+
+    const RcolorAttribute = rightG.getAttribute('color');
+    const RseriesFields = RcolorAttribute.getFields();
+
+    expect(RseriesFields).toHaveLength(1);
+    expect(RseriesFields[0]).toBe('type');
+
+    expect(bidirectional.chart.getController('legend').visible).toEqual(true);
+
+    expect(bidirectional.chart.getController('legend').getComponents()[0].direction).toEqual('bottom');
+
+    expect(bidirectional.chart.getController('legend').getComponents()[0].extra.scale.field).toEqual('type');
+  });
+  it('x*y*color', () => {
+    const bidirectional = new BidirectionalBar(createDiv('x*y*color'), {
+      width: 400,
+      height: 400,
+      data,
+      xField: 'country',
+      yField: ['2016年耕地总面积', '2016年转基因种植面积'],
+    });
+    bidirectional.render();
+
+    const leftG = bidirectional.chart.views[0].geometries[0];
+    const rightG = bidirectional.chart.views[1].geometries[0];
+    const LseriesFields = leftG.getAttribute('color').getFields();
+    const RseriesFields = rightG.getAttribute('color').getFields();
+
+    expect(LseriesFields).toHaveLength(1);
+    expect(LseriesFields[0]).toBe('type');
+    expect(RseriesFields).toHaveLength(1);
+    expect(RseriesFields[0]).toBe('type');
+  });
+
+  it('x*y*color with color', () => {
+    const palette = ['red', 'green'];
+    const bidirectional = new BidirectionalBar(createDiv('x*y*color with color'), {
+      width: 400,
+      height: 400,
+      data,
+      xField: 'country',
+      yField: ['2016年耕地总面积', '2016年转基因种植面积'],
+      color: palette,
+    });
+    bidirectional.render();
+
+    bidirectional.render();
+
+    const leftG = bidirectional.chart.views[0].geometries[0];
+    const rightG = bidirectional.chart.views[1].geometries[0];
+
+    leftG.elements.forEach((element) => {
+      const color = element.getModel().color;
+      expect(color).toBe(palette[0]);
+    });
+
+    rightG.elements.forEach((element) => {
+      const color = element.getModel().color;
+      expect(color).toBe(palette[1]);
+    });
+  });
+
+  it('widthRatio', () => {
+    const bidirectional = new BidirectionalBar(createDiv('widthRatio'), {
+      width: 400,
+      height: 400,
+      data,
+      xField: 'country',
+      yField: ['2016年耕地总面积', '2016年转基因种植面积'],
+      widthRatio: 0.7,
+    });
+    bidirectional.render();
+
+    const leftG = bidirectional.chart.views[0].geometries[0];
+    const rightG = bidirectional.chart.views[1].geometries[0];
+    expect(leftG.theme.columnWidthRatio).toBe(0.7);
+    expect(rightG.theme.columnWidthRatio).toBe(0.7);
+  });
+});
diff --git a/__tests__/unit/plots/bidirectional-bar/label-spec.ts b/__tests__/unit/plots/bidirectional-bar/label-spec.ts
@@ -0,0 +1,35 @@
+import { BidirectionalBar } from '../../../../src';
+import { data } from '../../../data/bi-directional';
+import { createDiv } from '../../../utils/dom';
+
+describe('Bidirectional laebl', () => {
+  it('x*y*label*true', () => {
+    const bidirectional = new BidirectionalBar(createDiv(), {
+      width: 400,
+      height: 400,
+      data,
+      xField: 'country',
+      yField: ['2016年转基因种植面积', '2016年耕地总面积'],
+      label: {
+        position: 'middle',
+        style: {
+          fill: '#fff',
+        },
+      },
+    });
+    bidirectional.render();
+
+    const leftG = bidirectional.chart.views[0].geometries[0];
+    const rightG = bidirectional.chart.views[1].geometries[0];
+
+    // @ts-ignore
+    expect(leftG.labelOption.cfg.position).toEqual('middle');
+    // @ts-ignore
+    expect(leftG.labelOption.cfg.style.fill).toEqual('#fff');
+
+    // @ts-ignore
+    expect(rightG.labelOption.cfg.position).toEqual('middle');
+    // @ts-ignore
+    expect(rightG.labelOption.cfg.style.fill).toEqual('#fff');
+  });
+});
diff --git a/__tests__/unit/plots/bidirectional-bar/layout-spec.ts b/__tests__/unit/plots/bidirectional-bar/layout-spec.ts
@@ -0,0 +1,58 @@
+import { BidirectionalBar } from '../../../../src';
+import { data } from '../../../data/bi-directional';
+import { createDiv } from '../../../utils/dom';
+
+describe('Bidirectional layout', () => {
+  it('layout*default*horizontal', () => {
+    const bidirectional = new BidirectionalBar(createDiv('x*y*horizontal'), {
+      width: 400,
+      height: 400,
+      data,
+      xField: 'country',
+      yField: ['2016年耕地总面积', '2016年转基因种植面积'],
+    });
+    bidirectional.render();
+
+    const firstView = bidirectional.chart.views[0];
+    const secondView = bidirectional.chart.views[1];
+    expect(firstView.getCoordinate().isTransposed).toBe(true);
+    expect(secondView.getCoordinate().isTransposed).toBe(true);
+    //@ts-ignore
+    expect(firstView.getCoordinate().isReflectX).toBe(true);
+  });
+  it('layout*default*vertical', () => {
+    const bidirectional = new BidirectionalBar(createDiv('x*y*vertical'), {
+      width: 400,
+      height: 600,
+      data,
+      xField: 'country',
+      yField: ['2016年耕地总面积', '2016年转基因种植面积'],
+      layout: 'vertical',
+      yAxis: {
+        '2016年耕地总面积': {
+          nice: true,
+        },
+        '2016年转基因种植面积': {
+          min: 0,
+          max: 100,
+        },
+      },
+    });
+    bidirectional.render();
+
+    const firstView = bidirectional.chart.views[0];
+    const secondView = bidirectional.chart.views[1];
+
+    //@ts-ignore
+    expect(firstView.options.axes.country.position).toEqual('bottom');
+
+    expect(firstView.getCoordinate().isTransposed).toBe(false);
+    expect(secondView.getCoordinate().isTransposed).toBe(false);
+    //@ts-ignore
+    expect(secondView.getCoordinate().isReflectY).toBe(true);
+    //@ts-ignore
+    expect(secondView.options.axes['2016年转基因种植面积'].min).toEqual(0);
+    //@ts-ignore
+    expect(secondView.options.axes['2016年转基因种植面积'].max).toEqual(100);
+  });
+});
diff --git a/__tests__/unit/plots/bidirectional-bar/legend-spec.ts b/__tests__/unit/plots/bidirectional-bar/legend-spec.ts
@@ -0,0 +1,32 @@
+import { BidirectionalBar } from '../../../../src';
+import { data } from '../../../data/bi-directional';
+import { createDiv } from '../../../utils/dom';
+
+describe('Bidirectional legend', () => {
+  it('x*y*legend*top', () => {
+    const bidirectional = new BidirectionalBar(createDiv(), {
+      width: 400,
+      height: 400,
+      data,
+      xField: 'country',
+      yField: ['2016年耕地总面积', '2016年转基因种植面积'],
+      legend: {
+        position: 'top',
+      },
+    });
+    bidirectional.render();
+    expect(bidirectional.chart.getController('legend').getComponents()[0].direction).toEqual('top');
+  });
+  it('x*y*legend*false', () => {
+    const bidirectional = new BidirectionalBar(createDiv(), {
+      width: 400,
+      height: 400,
+      data,
+      xField: 'country',
+      yField: ['2016年耕地总面积', '2016年转基因种植面积'],
+      legend: false,
+    });
+    bidirectional.render();
+    expect(bidirectional.chart.getController('legend').getComponents().length).toEqual(0);
+  });
+});