feat: [V2_combo] 混合图表-双折线图 (#1331)

* feat: add baseCombo & dualline

* fix: 部分lint 错误

* fix: npm run fix

* fix: 删除无用变量

* feat: push geogemtry 拆分方式

* feat: lint

* fix: lint

* fix: github test 失败

* feat: 双轴图打平

* feat: line

* feat: 更改双轴图引用

* feat: test 用例

* fix: lint

* feat: fix lint

* fix:  fix 不必要的提交

* fix: merge

* fix: typescript

* feat: 更改 cr 问题

Co-authored-by: aiyin.lzy <nadia.lzy@antfin.com>

__tests__/data/pv-uv.ts

@@ -0,0 +1,23 @@
+export const PV_DATA = [
+  { date: '0601', pv: 123000 },
+  { date: '0602', pv: 234000 },
+  { date: '0603', pv: 123550 },
+  { date: '0604', pv: 365432 },
+  { date: '0605', pv: 634121 },
+  { date: '0606', pv: 396111 },
+  { date: '0607', pv: 127332 },
+  { date: '0608', pv: 159987 },
+  { date: '0609', pv: 121233 },
+];
+
+export const UV_DATA = [
+  { date: '0601', uv: 1212 },
+  { date: '0602', uv: 4323 },
+  { date: '0603', uv: 5121 },
+  { date: '0604', uv: 5234 },
+  { date: '0605', uv: 7492 },
+  { date: '0606', uv: 4351 },
+  { date: '0607', uv: 7321 },
+  { date: '0608', uv: 1431 },
+  { date: '0609', uv: 2054 },
+];

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

@@ -0,0 +1,93 @@
+import { Biax } from '../../../../src';
+import { PV_DATA, UV_DATA } from '../../../data/pv-uv';
+import { createDiv } from '../../../utils/dom';
+
+describe('Biax meta', () => {
+  it('hide axis', () => {
+    document.body.append('hide axis');
+    const biax = new Biax(createDiv(), {
+      width: 400,
+      height: 500,
+      data: [PV_DATA, UV_DATA],
+      xField: 'date',
+      yField: ['pv', 'uv'],
+      xAxis: false,
+      yAxis: [false, false],
+    });
+
+    biax.render();
+
+    const leftAxes = biax.chart.getComponents().filter((co) => co.type === 'axis');
+    const rightAxes = biax.chart.views[0].getComponents().filter((co) => co.type === 'axis');
+    expect(leftAxes.length + rightAxes.length).toBe(0);
+
+    // Biax.destroy();
+  });
+
+  it('axis style', () => {
+    document.body.append('axis');
+    const biax = new Biax(createDiv(), {
+      width: 400,
+      height: 500,
+      data: [PV_DATA, UV_DATA],
+      xField: 'date',
+      yField: ['pv', 'uv'],
+      xAxis: {
+        position: 'bottom',
+        title: {
+          offset: 10,
+          style: {
+            color: '#333',
+            autoRotate: true,
+          },
+        },
+      },
+      yAxis: [
+        {
+          position: 'left',
+          line: {
+            style: {
+              lineWidth: 2,
+            },
+          },
+          tickLine: {
+            style: {
+              lineWidth: 2,
+            },
+            alignTick: true,
+          },
+          subTickLine: {
+            style: {
+              lineWidth: 1,
+              count: 4,
+            },
+          },
+        },
+        {
+          position: 'right',
+          line: {
+            style: {
+              lineWidth: 2,
+            },
+          },
+          tickLine: {
+            style: {
+              lineWidth: 2,
+            },
+            alignTick: true,
+          },
+          subTickLine: {
+            style: {
+              lineWidth: 1,
+              count: 4,
+            },
+          },
+        },
+      ],
+    });
+
+    biax.render();
+
+    // TODO 补充用例
+  });
+});

__tests__/unit/plots/biax/double-line-spec.ts

@@ -0,0 +1,59 @@
+import { Biax } from '../../../../src';
+import { PV_DATA, UV_DATA } from '../../../data/pv-uv';
+import { createDiv } from '../../../utils/dom';
+
+describe('Biax dualline', () => {
+  it('Doubal Line', () => {
+    document.body.append('test Biax doubal line');
+
+    const biax = new Biax(createDiv(), {
+      width: 400,
+      height: 500,
+      data: [PV_DATA, UV_DATA],
+      xField: 'date',
+      yField: ['pv', 'uv'],
+      xAxis: false,
+      geometryConfigs: [
+        {
+          geometry: 'Line',
+          connectNulls: false,
+          smooth: true,
+          style: {
+            stroke: 'red',
+          },
+          point: {
+            size: 3,
+            shape: 'circle',
+          },
+        },
+      ],
+    });
+
+    biax.render();
+
+    // line
+    // const lineGeometrys = biax.chart.geometries.filter((g) => g.type === 'line');
+
+    // expect(lineGeometrys.length).toBe(2);
+
+    // expect(lineGeometrys[0].attributes.color.values).toEqual(['#180']);
+    // expect(lineGeometrys[0].attributes.size.values).toEqual([5]);
+    // // @ts-ignore
+    // expect(lineGeometrys[0].connectNulls).toBe(false);
+    // expect(lineGeometrys[0].attributes.shape.values).toEqual(['smooth']);
+
+    // expect(lineGeometrys[1].attributes.color.values).toEqual(['#e76c5e']);
+    // expect(lineGeometrys[1].attributes.size.values).toEqual([2]);
+    // // @ts-ignore
+    // expect(lineGeometrys[1].connectNulls).toBe(true);
+    // expect(lineGeometrys[1].attributes.shape.values).toEqual(['line']);
+
+    // // point
+    // const pointGeometrys = biax.chart.geometries.filter((g) => g.type === 'point');
+    // expect(pointGeometrys.length).toBe(1);
+    // expect(pointGeometrys[0].attributes.size.values).toEqual([3]);
+    // expect(pointGeometrys[0].attributes.shape.values).toEqual(['circle']);
+
+    // Biax.destroy();
+  });
+});

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

@@ -0,0 +1,33 @@
+import { Biax } from '../../../../src';
+import { PV_DATA, UV_DATA } from '../../../data/pv-uv';
+import { createDiv } from '../../../utils/dom';
+
+describe('Biax data', () => {
+  it('data', () => {
+    document.body.append('test Biax data');
+    const yField = ['pv', 'uv'];
+    const biax = new Biax(createDiv(), {
+      width: 400,
+      height: 500,
+      data: [PV_DATA, UV_DATA],
+      xField: 'date',
+      yField,
+    });
+
+    biax.render();
+    const leftChart = biax.chart;
+    const rightView = biax.chart.views[0];
+
+    expect(leftChart.geometries[0].data.length).toBe(PV_DATA.length);
+    expect(rightView.geometries[0].data.length).toBe(UV_DATA.length);
+
+    const pvData = PV_DATA.map((item) => item.pv);
+
+    expect(leftChart.geometries[0].scales[yField[0]].max).toBe(Math.max(...pvData));
+    expect(leftChart.geometries[0].scales[yField[0]].min).toBe(Math.min(...pvData));
+
+    const uvData = UV_DATA.map((item) => item.uv);
+    expect(rightView.geometries[0].scales[yField[1]].max).toBe(Math.max(...uvData));
+    expect(rightView.geometries[0].scales[yField[1]].min).toBe(Math.min(...uvData));
+  });
+});

__tests__/unit/plots/biax/scale.ts

@@ -0,0 +1,41 @@
+import { Biax } from '../../../../src';
+import { CountryEconomy } from '../../../data/country-economy';
+import { createDiv } from '../../../utils/dom';
+
+describe('Biax meta', () => {
+  it('meta(include some axis attribute)', () => {
+    document.body.append('meta(include some axis attribute)');
+    const biax = new Biax(createDiv(), {
+      width: 400,
+      height: 500,
+      data: CountryEconomy,
+      xField: 'Country',
+      yField: ['GDP', 'Population'],
+      yAxis: [
+        {
+          min: 0,
+          max: 50000,
+          nice: false,
+        },
+        {
+          tickCount: 5,
+          nice: false,
+        },
+      ],
+    });
+
+    biax.render();
+
+    const yScales = biax.chart.getYScales();
+    expect(yScales[0].min).toBe(0);
+    expect(yScales[0].max).toBe(50000);
+    // @ts-ignore
+    expect(yScales[0].nice).toBe(false);
+
+    expect(yScales[1].tickCount).toBe(5);
+    // @ts-ignore
+    expect(yScales[1].nice).toBe(false);
+
+    // biax.destroy();
+  });
+});

src/adaptor/geometries/area.ts

@@ -3,21 +3,23 @@ import { Params } from '../../core/adaptor';
 import { Options } from '../../types';
 import { ShapeStyle } from '../../types/style';
 
+type AreaOption = {
+  /** 是否平滑 */
+  readonly smooth?: boolean;
+  /** point color 映射, 提供回调的方式, 不开放 field 映射配置 */
+  readonly color?: string | string[] | ((series: any) => string);
+  /** 样式映射 */
+  readonly style?: ShapeStyle | ((x: any, y: any, series?: any) => ShapeStyle);
+};
+
 export interface AreaGeometryOptions extends Options {
   /** x 轴字段 */
   readonly xField?: string;
   /** y 轴字段 */
   readonly yField?: string;
   /** 分组字段 */
   readonly seriesField?: string;
-  readonly area?: {
-    /** 是否平滑 */
-    readonly smooth?: boolean;
-    /** point color 映射, 提供回调的方式, 不开放 field 映射配置 */
-    readonly color?: string | string[] | ((series: any) => string);
-    /** 样式映射 */
-    readonly style?: ShapeStyle | ((x: any, y: any, series?: any) => ShapeStyle);
-  };
+  readonly area?: AreaOption;
 }
 
 /**

src/adaptor/geometries/line.ts

@@ -3,25 +3,27 @@ import { Params } from '../../core/adaptor';
 import { Options } from '../../types';
 import { ShapeStyle } from '../../types/style';
 
+type LineOption = {
+  /** line color 映射, 提供回调的方式, 不开放 field 映射配置 */
+  readonly color?: string | string[] | ((series: any) => string);
+  /** 是否平滑 */
+  readonly smooth?: boolean;
+  /** 是否连接空数据 */
+  readonly connectNulls?: boolean;
+  /** 样式映射 */
+  readonly style?: ShapeStyle | ((x: any, y: any, series?: any) => ShapeStyle);
+  /** 折线宽度 */
+  readonly size?: number;
+};
+
 export interface LineGeometryOptions extends Options {
   /** x 轴字段 */
   readonly xField?: string;
   /** y 轴字段 */
   readonly yField?: string;
   /** 分组字段 */
   readonly seriesField?: string;
-  readonly line?: {
-    /** line color 映射, 提供回调的方式, 不开放 field 映射配置 */
-    readonly color?: string | string[] | ((series: any) => string);
-    /** 是否平滑 */
-    readonly smooth?: boolean;
-    /** 是否连接空数据 */
-    readonly connectNulls?: boolean;
-    /** 样式映射 */
-    readonly style?: ShapeStyle | ((x: any, y: any, series?: any) => ShapeStyle);
-    /** 折线宽度 */
-    readonly size?: number;
-  };
+  readonly line?: LineOption;
 }
 
 /**

src/adaptor/geometries/point.ts

@@ -3,23 +3,25 @@ import { Params } from '../../core/adaptor';
 import { Options } from '../../types';
 import { ShapeStyle } from '../../types/style';
 
+type PointOption = {
+  /** point color 映射, 提供回调的方式, 不开放 field 映射配置 */
+  readonly color?: string | string[] | ((series: any) => string);
+  /** point shape 映射, 提供回调的方式, 不开放 field 映射配置 */
+  readonly shape?: string | ((x: any, y: any, series?: any) => string);
+  /** 大小映射, 提供回调的方式, 不开放 field 映射配置 */
+  readonly size?: number | ((x: any, y: any, series?: any) => number);
+  /** 样式映射 */
+  readonly style?: ShapeStyle | ((x: any, y: any, series?: any) => ShapeStyle);
+};
+
 export interface PointGeometryOptions extends Options {
   /** x 轴字段 */
   readonly xField?: string;
   /** y 轴字段 */
   readonly yField?: string;
   /** 分组字段 */
   readonly seriesField?: string;
-  readonly point?: {
-    /** point color 映射, 提供回调的方式, 不开放 field 映射配置 */
-    readonly color?: string | string[] | ((series: any) => string);
-    /** point shape 映射, 提供回调的方式, 不开放 field 映射配置 */
-    readonly shape?: string | ((x: any, y: any, series?: any) => string);
-    /** 大小映射, 提供回调的方式, 不开放 field 映射配置 */
-    readonly size?: number | ((x: any, y: any, series?: any) => number);
-    /** 样式映射 */
-    readonly style?: ShapeStyle | ((x: any, y: any, series?: any) => ShapeStyle);
-  };
+  readonly point?: PointOption;
 }
 
 /**

src/common/helper.ts

@@ -1,10 +1,10 @@
-import { Chart, Geometry } from '@antv/g2';
+import { Geometry, View } from '@antv/g2';
 
 /**
  * 在 Chart 中查找第一个指定 type 类型的 geometry
  * @param chart
  * @param type
  */
-export function findGeometry(chart: Chart, type: string): Geometry {
+export function findGeometry(chart: View, type: string): Geometry {
   return chart.geometries.find((g: Geometry) => g.type === type);
 }

src/core/adaptor.ts

@@ -1,10 +1,10 @@
-import { Chart } from '@antv/g2';
+import { View } from '@antv/g2';
 
 /**
  * adaptor flow 的参数
  */
 export type Params<O> = {
-  readonly chart: Chart;
+  readonly chart: View;
   readonly options: O;
 };
 

src/index.ts

@@ -21,6 +21,9 @@ export { Pie, PieOptions } from './plots/pie';
 // 散点图及类型定义
 export { Scatter, ScatterOptions } from './plots/scatter';
 
+// 混合图形
+export { Biax, BiaxOption } from './plots/biax';
+
 // 迷你折线图及类型定义
 export { TinyLine, TinyLineOptions } from './plots/tiny-line';