Feat/duax plot expand (#1827)

* feat: 双轴图新增区间柱状图/百分比柱状图/阶梯折线图的支持 * fix: 更新 test * fix: 减少 deepmix 的使用 Co-authored-by: aiyin.lzy <nadia.lzy@antfin.com>
antvis · Oct 30, 2020 · 79ec44b · 79ec44b
1 parent 5e13404
commit 79ec44b
Show file tree

Hide file tree

Showing 18 changed files with 343 additions and 61 deletions.
diff --git a/__tests__/data/pv-uv.ts b/__tests__/data/pv-uv.ts
@@ -33,11 +33,11 @@ export const PV_DATA_MULTI = [
   { date: '0608', pv: 159987, site: 'a' },
   { date: '0609', pv: 121233, site: 'a' },
   { date: '0601', pv: 12300, site: 'b' },
-  { date: '0602', pv: 23400, site: 'b' },
-  { date: '0603', pv: 12350, site: 'b' },
-  { date: '0604', pv: 36532, site: 'b' },
-  { date: '0605', pv: 63421, site: 'b' },
-  { date: '0606', pv: 39611, site: 'b' },
+  { date: '0602', pv: 2400, site: 'b' },
+  { date: '0603', pv: 1350, site: 'b' },
+  { date: '0604', pv: 96532, site: 'b' },
+  { date: '0605', pv: 33421, site: 'b' },
+  { date: '0606', pv: 19611, site: 'b' },
   { date: '0607', pv: 12732, site: 'b' },
   { date: '0608', pv: 15987, site: 'b' },
   { date: '0609', pv: 12133, site: 'b' },

diff --git a/__tests__/unit/plots/column/percent-spec.ts b/__tests__/unit/plots/column/percent-spec.ts
@@ -97,4 +97,30 @@ describe('column percent', () => {
     expect(document.getElementsByClassName('g2-tooltip-title')[1]).toBeUndefined();
     expect(document.getElementsByClassName('tooltip-class')[0].innerHTML).toBe('123');
   });
+  it('percent: custom tooltip formatter', () => {
+    const column = new Column(createDiv('percent', undefined, 'percent'), {
+      width: 400,
+      height: 300,
+      data,
+      xField: 'year',
+      yField: 'value',
+      seriesField: 'country',
+      isStack: true,
+      isPercent: true,
+      tooltip: {
+        formatter: () => ({
+          name: 'test',
+          value: '123',
+        }),
+      },
+    });
+
+    column.render();
+    const geometry = column.chart.geometries[0];
+    const elements = geometry.elements;
+    const bbox = elements[elements.length - 1].getBBox();
+    column.chart.showTooltip({ x: bbox.maxX, y: bbox.maxY });
+    expect(document.querySelectorAll('#percent .g2-tooltip-list-item .g2-tooltip-name')[0].innerHTML).toBe('test');
+    expect(document.querySelectorAll('#percent .g2-tooltip-list-item .g2-tooltip-value')[0].innerHTML).toBe('123');
+  });
 });
diff --git a/__tests__/unit/plots/dual-axes/column-spec.ts b/__tests__/unit/plots/dual-axes/column-spec.ts
@@ -4,6 +4,14 @@ import { createDiv } from '../../../utils/dom';
 import { LEFT_AXES_VIEW, RIGHT_AXES_VIEW } from '../../../../src/plots/dual-axes/constant';
 import { findViewById } from '../../../../src/utils/view';
 
+const RANGE_DATA = [
+  { time: '2019-03', value: [200, 350], count: 800 },
+  { time: '2019-04', value: [400, 650], count: 600 },
+  { time: '2019-05', value: [150, 350], count: 400 },
+  { time: '2019-06', value: [100, 450], count: 380 },
+  { time: '2019-07', value: [500, 550], count: 220 },
+];
+
 describe('Line-Column', () => {
   it('Line-Colomn', () => {
     const dualAxes = new DualAxes(createDiv(), {
@@ -107,4 +115,34 @@ describe('Line-Column', () => {
     expect(rightGeometry.shapeType).toBe('line');
     dualAxes.destroy();
   });
+
+  it('Range-Colomn', () => {
+    const dualAxes = new DualAxes(createDiv(), {
+      height: 500,
+      data: [RANGE_DATA, RANGE_DATA],
+      xField: 'time',
+      yField: ['value', 'count'],
+      geometryOptions: [
+        {
+          geometry: 'column',
+          isRange: true,
+          label: {
+            position: 'top',
+          },
+        },
+        {
+          geometry: 'line',
+        },
+      ],
+    });
+    dualAxes.render();
+    // 依赖于 geometry，测试label 即可
+    const leftView = findViewById(dualAxes.chart, LEFT_AXES_VIEW);
+    const leftGeometry = leftView.geometries.find((g) => g.type === 'interval');
+    // @ts-ignore
+    const cfg = leftGeometry.labelOption.cfg;
+    expect(cfg.content(RANGE_DATA[0])).toBe('200-350');
+    expect(cfg.position).toBe('top');
+    dualAxes.destroy();
+  });
 });
diff --git a/__tests__/unit/plots/dual-axes/stack-spec.ts b/__tests__/unit/plots/dual-axes/stack-spec.ts
@@ -1,6 +1,8 @@
 import { DualAxes } from '../../../../src';
 import { PV_DATA_MULTI, UV_DATA_MULTI } from '../../../data/pv-uv';
 import { createDiv } from '../../../utils/dom';
+import { LEFT_AXES_VIEW } from '../../../../src/plots/dual-axes/constant';
+import { findViewById } from '../../../../src/utils/view';
 
 describe('stack', () => {
   it('stack line/column', () => {
@@ -35,4 +37,60 @@ describe('stack', () => {
     expect(dualAxes.chart.views[1].geometries[0].getAdjust('stack')).toBeDefined();
     expect(dualAxes.chart.views[1].geometries[1].getAdjust('stack')).toBeDefined();
   });
+
+  it('stack percent column', () => {
+    const option = {
+      width: 400,
+      height: 500,
+      data: [PV_DATA_MULTI, UV_DATA_MULTI],
+      xField: 'date',
+      yField: ['pv', 'uv'],
+      geometryOptions: [
+        {
+          geometry: 'column',
+          seriesField: 'site',
+          isStack: true,
+          isPercent: true,
+        },
+        {
+          geometry: 'line',
+          seriesField: 'site',
+          isStack: true,
+          point: {},
+        },
+      ],
+    };
+    // 依赖于百分比柱状图，测试下 tooltip
+    const dualAxes = new DualAxes(createDiv('stack percent column', undefined, 'stack_percent_column'), option);
+
+    dualAxes.render();
+    const leftView = findViewById(dualAxes.chart, LEFT_AXES_VIEW);
+    const leftGeometry = leftView.geometries.find((g) => g.type === 'interval');
+
+    const bbox = leftGeometry.elements[leftGeometry.elements.length - 1].getBBox();
+    dualAxes.chart.showTooltip({ x: bbox.maxX, y: bbox.maxY });
+    expect(document.querySelectorAll('#stack_percent_column .g2-tooltip-list-item .g2-tooltip-name')[0].innerHTML).toBe(
+      'a'
+    );
+    expect(
+      document.querySelectorAll('#stack_percent_column .g2-tooltip-list-item .g2-tooltip-value')[0].innerHTML
+    ).toBe('90.90%');
+
+    dualAxes.update({
+      ...option,
+      tooltip: {
+        formatter: () => ({
+          name: 'test',
+          value: '123',
+        }),
+      },
+    });
+    dualAxes.chart.showTooltip({ x: bbox.maxX, y: bbox.maxY });
+    expect(document.querySelectorAll('#stack_percent_column .g2-tooltip-list-item .g2-tooltip-name')[0].innerHTML).toBe(
+      'test'
+    );
+    expect(
+      document.querySelectorAll('#stack_percent_column .g2-tooltip-list-item .g2-tooltip-value')[0].innerHTML
+    ).toBe('123');
+  });
 });
diff --git a/__tests__/unit/plots/dual-axes/util/option-spec.ts b/__tests__/unit/plots/dual-axes/util/option-spec.ts
@@ -12,8 +12,12 @@ describe('DualAxes option', () => {
   });
 
   it('yAxis option', () => {
-    // @ts-ignore
-    expect(getOption({ yAxis: [{ a: 1 }, false], geometryOptions: [] })).toEqual({
+    expect(
+      // @ts-ignore
+      getOption({ xField: 'test', yField: ['test1', 'test2'], yAxis: [{ a: 1 }, false], geometryOptions: [] })
+    ).toEqual({
+      xField: 'test',
+      yField: ['test1', 'test2'],
       yAxis: [
         {
           nice: true,
@@ -37,11 +41,13 @@ describe('DualAxes option', () => {
       ],
     });
 
-    // @ts-ignore
-    expect(getOption({ yAxis: [false, false], geometryOptions: [] }).yAxis).toEqual([false, false]);
+    expect(
+      // @ts-ignore
+      getOption({ xField: 'test', yField: ['test1', 'test2'], yAxis: [false, false], geometryOptions: [] }).yAxis
+    ).toEqual([false, false]);
 
     // @ts-ignore
-    expect(getOption({ yAxis: [], geometryOptions: [] }).yAxis).toEqual([
+    expect(getOption({ xField: 'test', yField: ['test1', 'test2'], yAxis: [], geometryOptions: [] }).yAxis).toEqual([
       {
         nice: true,
         label: {
@@ -59,7 +65,7 @@ describe('DualAxes option', () => {
     ]);
 
     // @ts-ignore
-    expect(getOption({ geometryOptions: [] }).yAxis).toEqual([
+    expect(getOption({ xField: 'test', yField: ['test1', 'test2'], geometryOptions: [] }).yAxis).toEqual([
       {
         nice: true,
         label: {

diff --git a/__tests__/utils/dom.ts b/__tests__/utils/dom.ts
@@ -3,14 +3,18 @@
  * @param title
  * @param container
  */
-export function createDiv(title: string = '', container: HTMLElement = document.body): HTMLElement {
+export function createDiv(title: string = '', container: HTMLElement = document.body, id?: string): HTMLElement {
   const div = document.createElement('div');
 
   if (title) {
     const titleDiv = document.createElement('div').appendChild(document.createTextNode(title));
     container.appendChild(titleDiv);
   }
 
+  if (id) {
+    div.setAttribute('id', id);
+  }
+
   container.appendChild(div);
 
   return div;

diff --git a/examples/dual-axes/column-line/demo/meta.json b/examples/dual-axes/column-line/demo/meta.json
@@ -20,6 +20,14 @@
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*e9DmR451GDwAAAAAAAAAAABkARQnAQ"
     },
+    {
+      "filename": "range-column-line.ts",
+      "title": {
+        "zh": "柱线混合图表-区间柱",
+        "en": "range-column-line"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*e9DmR451GDwAAAAAAAAAAABkARQnAQ"
+    },
     {
       "filename": "column-multi-line.ts",
       "title": {

diff --git a/examples/dual-axes/column-line/demo/range-column-line.ts b/examples/dual-axes/column-line/demo/range-column-line.ts
@@ -0,0 +1,32 @@
+import { DualAxes } from '@antv/g2plot';
+
+const data = [
+  { time: '2019-03', value: [200, 350], count: 800 },
+  { time: '2019-04', value: [400, 650], count: 600 },
+  { time: '2019-05', value: [150, 350], count: 400 },
+  { time: '2019-06', value: [100, 450], count: 380 },
+  { time: '2019-07', value: [500, 550], count: 220 },
+];
+
+const dualAxes = new DualAxes('container', {
+  data: [data, data],
+  xField: 'time',
+  yField: ['value', 'count'],
+  geometryOptions: [
+    {
+      geometry: 'column',
+      color: '#5B8FF9',
+      isRange: true,
+    },
+    {
+      geometry: 'line',
+      color: '#5AD8A6',
+      lineStyle: {
+        lineWidth: 2,
+        stroke: '#5AD8A6',
+      },
+    },
+  ],
+});
+
+dualAxes.render();
diff --git a/examples/dual-axes/dual-line/demo/dual-step-line.ts b/examples/dual-axes/dual-line/demo/dual-step-line.ts
@@ -0,0 +1,34 @@
+import { DualAxes } from '@antv/g2plot';
+
+const data = [
+  { year: '1991', value: 3, count: 10 },
+  { year: '1992', value: 4, count: 4 },
+  { year: '1993', value: 3.5, count: 5 },
+  { year: '1994', value: 5, count: 5 },
+  { year: '1995', value: 4.9, count: 4.9 },
+  { year: '1996', value: 6, count: 35 },
+  { year: '1997', value: 7, count: 7 },
+  { year: '1998', value: 9, count: 1 },
+  { year: '1999', value: 13, count: 20 },
+];
+
+const dualAxes = new DualAxes('container', {
+  data: [data, data],
+  xField: 'year',
+  yField: ['value', 'count'],
+  geometryOptions: [
+    {
+      geometry: 'line',
+      smooth: false,
+      color: '#29cae4',
+      stepType: 'vh',
+    },
+    {
+      geometry: 'line',
+      color: '#586bce',
+      smooth: true,
+    },
+  ],
+});
+
+dualAxes.render();
diff --git a/examples/dual-axes/dual-line/demo/meta.json b/examples/dual-axes/dual-line/demo/meta.json
@@ -20,6 +20,14 @@
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*kAgfTZPPjAsAAAAAAAAAAABkARQnAQ"
     },
+    {
+      "filename": "dual-step-line.ts",
+      "title": {
+        "zh": "双折线图 - 阶梯折线",
+        "en": "Dual Step Line"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*kAgfTZPPjAsAAAAAAAAAAABkARQnAQ"
+    },
     {
       "filename": "dual-multi-line.ts",
       "title": {

diff --git a/examples/dual-axes/stacked-column-line/demo/meta.json b/examples/dual-axes/stacked-column-line/demo/meta.json
@@ -20,6 +20,14 @@
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*9IptSKDIopIAAAAAAAAAAAAAARQnAQ"
     },
+    {
+      "filename": "stacked-percent-column-line.ts",
+      "title": {
+        "zh": "百分比堆叠柱线图表-显示多折线",
+        "en": "stacked-percent-column-line"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*El_nTpXUXHMAAAAAAAAAAABkARQnAQ"
+    },
     {
       "filename": "stacked-column-multi-line.ts",
       "title": {

diff --git a/examples/dual-axes/stacked-column-line/demo/stacked-percent-column-line.ts b/examples/dual-axes/stacked-column-line/demo/stacked-percent-column-line.ts
@@ -0,0 +1,42 @@
+import { DualAxes } from '@antv/g2plot';
+
+const uvBillData = [
+  { time: '2019-03', value: 350, type: 'uv' },
+  { time: '2019-04', value: 900, type: 'uv' },
+  { time: '2019-05', value: 300, type: 'uv' },
+  { time: '2019-06', value: 450, type: 'uv' },
+  { time: '2019-07', value: 470, type: 'uv' },
+  { time: '2019-03', value: 220, type: 'bill' },
+  { time: '2019-04', value: 300, type: 'bill' },
+  { time: '2019-05', value: 250, type: 'bill' },
+  { time: '2019-06', value: 220, type: 'bill' },
+  { time: '2019-07', value: 362, type: 'bill' },
+];
+
+const transformData = [
+  { time: '2019-03', count: 800 },
+  { time: '2019-04', count: 600 },
+  { time: '2019-05', count: 400 },
+  { time: '2019-06', count: 380 },
+  { time: '2019-07', count: 220 },
+];
+
+const dualAxes = new DualAxes('container', {
+  data: [uvBillData, transformData],
+  xField: 'time',
+  yField: ['value', 'count'],
+  geometryOptions: [
+    {
+      geometry: 'column',
+      isStack: true,
+      isPercent: true,
+      seriesField: 'type',
+    },
+    {
+      geometry: 'line',
+      color: '#FAA219',
+    },
+  ],
+});
+
+dualAxes.render();