fix: fix Scatter regression line and Dual Axes change data

lxfu1 · lxfu1 · commit e6c2d24f3247 · 2020-11-03T17:56:22.000+08:00
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,13 @@ 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();
   });
 });
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
@@ -83,15 +83,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;
 }
 
diff --git a/src/plots/scatter/annotations/path.ts b/src/plots/scatter/annotations/path.ts
@@ -36,50 +36,17 @@ type path = {
   y: number;
 };
 
-// 处理用户自行配置 min max的情况
-function adjustScale(viewScale: Scale, pathData: path[], dim: string, config: renderOptions) {
-  const { min, max } = viewScale;
-  const {
-    options: { data, xField, yField },
-  } = config;
-  const field = dim === 'x' ? xField : yField;
-  const dataMin = minBy(data, field)[field];
-  const dataMax = maxBy(data, field)[field];
-  const minRatio = (min - dataMin) / (dataMax - dataMin);
-  const maxRatio = (max - dataMax) / (dataMax - dataMin);
-  const trendMin = minBy(pathData, dim)[dim];
-  const trendMax = maxBy(pathData, dim)[dim];
-  return {
-    min: trendMin + minRatio * (trendMax - trendMin),
-    max: trendMax + maxRatio * (trendMax - trendMin),
-  };
-}
-
 function getPath(data: number[][], config: renderOptions) {
   const {
     view,
     options: { xField, yField },
   } = config;
-  const pathData = data.map((d: [number, number]) => ({ x: d[0], y: d[1] }));
   const xScaleView = view.getScaleByField(xField);
   const yScaleView = view.getScaleByField(yField);
-  const coordinate = view.getCoordinate();
-  const linearScale = getScale('linear');
-  const xRange = adjustScale(xScaleView, pathData, 'x', config);
-  const xScale = new linearScale({
-    min: xRange.min,
-    max: xRange.max,
-  });
-  const yRange = adjustScale(yScaleView, pathData, 'y', config);
-  const yScale = new linearScale({
-    min: yRange.min,
-    max: yRange.max,
-  });
-  const points = pathData.map((d) => ({
-    x: coordinate.start.x + coordinate['width'] * xScale.scale(d.x),
-    y: coordinate.start.y - coordinate['height'] * yScale.scale(d.y),
-  }));
-  return getSplinePath(points, false);
+  const pathData = data.map((d: [number, number]) =>
+    view.getCoordinate().convert({ x: xScaleView.scale(d[0]), y: yScaleView.scale(d[1]) })
+  );
+  return getSplinePath(pathData, false);
 }
 
 function renderPath(config: renderOptions) {
