fix: Scatter regression line and Dual Axes change data (#1848)

lxfu1 · web-flow · commit 654c8e10d1f0 · 2020-11-03T20:41:47.000+08:00
* fix: fix Scatter regression line and Dual Axes change data

* fix: converage
diff --git a/__tests__/unit/plots/dual-axes/change-data-spec.ts b/__tests__/unit/plots/dual-axes/change-data-spec.ts
@@ -0,0 +1,76 @@
+import { DualAxes } from '../../../../src';
+import { PV_DATA, UV_DATA, PV_DATA_MULTI, UV_DATA_MULTI } from '../../../data/pv-uv';
+import {} from '../../../data/pv-uv';
+import { createDiv } from '../../../utils/dom';
+import { LEFT_AXES_VIEW, RIGHT_AXES_VIEW } from '../../../../src/plots/dual-axes/constant';
+import { findViewById } from '../../../../src/utils/view';
+
+describe('Line-Column', () => {
+  it('Line-Colomn', () => {
+    const dualAxes = new DualAxes(createDiv(), {
+      height: 500,
+      data: [[], []],
+      xField: 'date',
+      yField: ['pv', 'uv'],
+      geometryOptions: [
+        {
+          geometry: 'line',
+          connectNulls: false,
+          smooth: true,
+          color: '#f00',
+        },
+        {
+          geometry: 'column',
+        },
+      ],
+    });
+
+    dualAxes.render();
+    // 先柱后线
+    expect(dualAxes.chart.views[0].id).toBe(RIGHT_AXES_VIEW);
+    expect(dualAxes.chart.views[1].id).toBe(LEFT_AXES_VIEW);
+    dualAxes.changeData([PV_DATA, UV_DATA]);
+    const leftView = findViewById(dualAxes.chart, LEFT_AXES_VIEW);
+    const rightView = findViewById(dualAxes.chart, RIGHT_AXES_VIEW);
+    // line
+    const leftGeometry = leftView.geometries.find((g) => g.type === 'line');
+    const rightGeometry = rightView.geometries.find((g) => g.type === 'interval');
+    // @ts-ignore
+    expect(leftGeometry.shapeType).toBe('line');
+    expect(rightGeometry.shapeType).toBe('interval');
+    dualAxes.destroy();
+  });
+
+  it('stack column and mutilpe line', () => {
+    const dualAxes = new DualAxes(createDiv('test DualAxes change data'), {
+      width: 400,
+      height: 500,
+      data: [[], []],
+      xField: 'date',
+      yField: ['pv', 'uv'],
+      geometryOptions: [
+        {
+          geometry: 'column',
+          seriesField: 'site',
+          isStack: true,
+        },
+        {
+          geometry: 'line',
+          seriesField: 'site',
+          isStack: true,
+          point: {
+            style: () => ({ fill: 'red' }),
+          },
+        },
+      ],
+    });
+
+    dualAxes.render();
+    expect(dualAxes.chart.getOptions().data.length).toBe(0);
+    dualAxes.changeData([PV_DATA_MULTI, UV_DATA_MULTI]);
+    const element = dualAxes.chart.views[1].geometries[1].elements[0];
+    expect(element.getModel().shape).toBe('circle');
+    expect(element.getData().site).toBeDefined();
+    expect(element.getModel().style.fill).toBe('red');
+  });
+});
diff --git a/__tests__/unit/plots/histogram/change-data-spec.ts b/__tests__/unit/plots/histogram/change-data-spec.ts
@@ -0,0 +1,26 @@
+import { Histogram } from '../../../../src';
+import { histogramData } from '../../../data/histogram-data';
+import { createDiv } from '../../../utils/dom';
+
+describe('Histogram: change data', () => {
+  const histogram = new Histogram(createDiv(), {
+    width: 400,
+    height: 300,
+    appendPadding: 10,
+    data: [],
+    binField: 'value',
+    binWidth: 2,
+    tooltip: {
+      title: 'hello wold!',
+    },
+  });
+
+  histogram.render();
+
+  it('change data', () => {
+    // @ts-ignore
+    expect(histogram.chart.options.tooltip.title).toBe('hello wold!');
+    histogram.changeData(histogramData);
+    expect(histogram.chart.getData().length).toBe(12);
+  });
+});
diff --git a/__tests__/unit/plots/scatter/legend-spec.ts b/__tests__/unit/plots/scatter/legend-spec.ts
@@ -80,4 +80,61 @@ describe('scatter', () => {
     expect(legendController.getComponents()[0].id).toBe('legend-gender');
     expect(legendController.getComponents()[0].direction).toBe('top-right');
   });
+
+  it('legend: legend * sizeField * false', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      shapeField: 'gender',
+      size: [2, 8],
+      sizeField: 'weight',
+      color: ['red', 'blue'],
+      colorField: 'gender',
+      xAxis: {
+        nice: true,
+      },
+      legend: false,
+    });
+
+    scatter.render();
+    const legendController = scatter.chart.getController('legend');
+    // @ts-ignore
+    const { option } = legendController;
+    expect(option).toBe(false);
+  });
+
+  it('legend: legend * sizeField * true', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      shapeField: 'gender',
+      size: [2, 8],
+      sizeField: 'weight',
+      color: ['red', 'blue'],
+      colorField: 'gender',
+      xAxis: {
+        nice: true,
+      },
+      legend: {},
+    });
+
+    scatter.render();
+    const legendController = scatter.chart.getController('legend');
+    // @ts-ignore
+    const {
+      // @ts-ignore
+      option: { weight, height, gender },
+    } = legendController;
+    expect(weight).toBe(false);
+    expect(height).toBe(false);
+    expect(gender).toBeTruthy();
+  });
 });
diff --git a/__tests__/unit/plots/scatter/regression-line-spec.ts b/__tests__/unit/plots/scatter/regression-line-spec.ts
@@ -1,5 +1,6 @@
 import { Scatter } from '../../../../src';
 import { createDiv } from '../../../utils/dom';
+import { delay } from '../../../utils/delay';
 
 const data = [
   { x: 1, y: 4.181 },
@@ -72,7 +73,7 @@ describe('scatter', () => {
     expect(elements[0].getModel().size).toBe(5);
   });
 
-  it('regressionLine: algorithm', () => {
+  it('regressionLine: algorithm', async () => {
     const scatter = new Scatter(createDiv('regressionLine*algorithm'), {
       data,
       width: 400,
@@ -86,16 +87,18 @@ describe('scatter', () => {
         lineWidth: 1,
         fill: '#5B8FF9',
       },
+      animation: false,
       regressionLine: {
         algorithm: [
-          [0, 0],
-          [200, 200],
+          [8, 6],
+          [16, 7],
+          [24, 7],
         ],
       },
     });
 
     scatter.render();
-
+    await delay(500);
     const geometry = scatter.chart.geometries[0];
     const annotation = scatter.chart.annotation();
     // @ts-ignore
@@ -106,5 +109,50 @@ describe('scatter', () => {
     // @ts-ignore
     expect(elements[0].getModel().style.fill).toBe('#5B8FF9');
     expect(elements[0].getModel().size).toBe(5);
+    const { width } = scatter.chart;
+    const pathGroup = scatter.chart
+      .getComponents()
+      .find((item) => item.type === 'annotation')
+      .component.cfg.group.cfg.children[0].getChildren();
+    const { path } = pathGroup?.[0]?.cfg?.attrs;
+    expect(path.length).toBe(3);
+    expect(scatter.chart.getXScale().scale(8) * width < path[0][1]).toBeTruthy();
+  });
+  it('regressionLine: algorithm callback', async () => {
+    const scatter = new Scatter(createDiv('regressionLine*algorithm'), {
+      data,
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      xField: 'x',
+      yField: 'y',
+      size: 5,
+      pointStyle: {
+        stroke: '#777777',
+        lineWidth: 1,
+        fill: '#5B8FF9',
+      },
+      animation: false,
+      regressionLine: {
+        algorithm: (data) => {
+          return [
+            [8, 6],
+            [16, 7],
+            [24, 7],
+          ];
+        },
+      },
+    });
+
+    scatter.render();
+    await delay(500);
+    const { width } = scatter.chart;
+    const pathGroup = scatter.chart
+      .getComponents()
+      .find((item) => item.type === 'annotation')
+      .component.cfg.group.cfg.children[0].getChildren();
+    const { path } = pathGroup?.[0]?.cfg?.attrs;
+    expect(path.length).toBe(3);
+    expect(scatter.chart.getXScale().scale(8) * width < path[0][1]).toBeTruthy();
   });
 });
diff --git a/__tests__/unit/utils/path-spec.ts b/__tests__/unit/utils/path-spec.ts
@@ -0,0 +1,44 @@
+import { getSplinePath } from '../../../src/utils/path';
+
+describe('PathUtil', () => {
+  test('getSplinePath(), two points', () => {
+    const points = [
+      { x: 0, y: 0 },
+      { x: 0.1, y: 0.1 },
+    ];
+    const path = getSplinePath(points);
+    expect(path).toEqual([
+      ['M', 0, 0],
+      ['L', 0.1, 0.1],
+    ]);
+  });
+
+  test('getSplinePath(), two points isInCircle', () => {
+    const points = [
+      { x: 0, y: 0 },
+      { x: 0.1, y: 0.1 },
+    ];
+    const path = getSplinePath(points, true);
+    expect(path).toEqual([['M', 0, 0], ['L', 0.1, 0.1], ['Z']]);
+  });
+
+  test('getSplinePath(), more than two points', () => {
+    const points = [
+      { x: 0, y: 0 },
+      { x: 0.1, y: 0.5 },
+      { x: 0.2, y: 0.1 },
+    ];
+    const path = getSplinePath(points);
+    expect(path.length).toBe(3);
+  });
+
+  test('getSplinePath(), more than two points isInCircle', () => {
+    const points = [
+      { x: 0, y: 0 },
+      { x: 0.1, y: 0.1 },
+      { x: 0.1, y: 0.3 },
+    ];
+    const path = getSplinePath(points, true);
+    expect(path.length).toBe(4);
+  });
+});
diff --git a/src/plots/dual-axes/index.ts b/src/plots/dual-axes/index.ts
@@ -20,10 +20,9 @@ export class DualAxes extends Plot<DualAxesOptions> {
       geometryOptions,
       ({ geometry }) => geometry === DualAxesGeometry.Line || geometry === undefined
     );
-
     return deepAssign({}, super.getDefaultOptions(options), {
       yAxis: [],
-      geometryOptions: [],
+      geometryOptions,
       meta: {
         [xField]: {
           // x 轴一定是同步 scale 的
diff --git a/src/plots/scatter/adaptor.ts b/src/plots/scatter/adaptor.ts
@@ -3,8 +3,7 @@ import { flow, deepAssign } from '../../utils';
 import { point } from '../../adaptor/geometries';
 import { tooltip, interaction, animation, theme, scale, annotation } from '../../adaptor/common';
 import { findGeometry, transformLabel } from '../../utils';
-import { regressionLine } from './annotations/path';
-import { getQuadrantDefaultConfig } from './util';
+import { getQuadrantDefaultConfig, getPath } from './util';
 import { ScatterOptions } from './types';
 
 /**
@@ -83,15 +82,14 @@ function legend(params: Params<ScatterOptions>): Params<ScatterOptions> {
 
   if (legend) {
     chart.legend(colorField || shapeField, legend);
+    // 隐藏连续图例
+    if (sizeField) {
+      chart.legend(sizeField, false);
+    }
   } else {
     chart.legend(false);
   }
 
-  // 隐藏连续图例
-  if (sizeField) {
-    chart.legend(sizeField, false);
-  }
-
   return params;
 }
 
@@ -173,6 +171,42 @@ function scatterAnnotation(params: Params<ScatterOptions>): Params<ScatterOption
   return flow(annotation(annotationOptions))(params);
 }
 
+// 趋势线
+function regressionLine(params: Params<ScatterOptions>): Params<ScatterOptions> {
+  const { options, chart } = params;
+  const { regressionLine } = options;
+  if (regressionLine) {
+    const { style } = regressionLine;
+    const defaultStyle = {
+      stroke: '#9ba29a',
+      lineWidth: 2,
+      opacity: 0.5,
+    };
+    chart.annotation().shape({
+      render: (container, view) => {
+        const group = container.addGroup({
+          id: `${chart.id}-regression-line`,
+          name: 'regression-line-group',
+        });
+        const path = getPath({
+          view,
+          options,
+        });
+        group.addShape('path', {
+          name: 'regression-line',
+          attrs: {
+            path,
+            ...defaultStyle,
+            ...style,
+          },
+        });
+      },
+    });
+  }
+
+  return params;
+}
+
 /**
  * 散点图适配器
  * @param chart
diff --git a/src/plots/scatter/annotations/path.ts b/src/plots/scatter/annotations/path.ts
diff --git a/src/plots/scatter/util.ts b/src/plots/scatter/util.ts
diff --git a/src/utils/path.ts b/src/utils/path.ts
