fix(#2651): when scatter data length = 1 and x is cat (#2661)

* fix(#2651): when scatter data length = 1 and x is cat

* chore: destroy after test

* chore: remove unused code

Author: hustcc

__tests__/bugs/issue-2651-spec.ts

@@ -0,0 +1,37 @@
+import { Scatter } from '../../src';
+import { createDiv } from '../utils/dom';
+
+describe('#2651', () => {
+  it('scatter with 1 record, and x is cat', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      autoFit: false,
+      data: [
+        {
+          x: 'x',
+          y: 10,
+          radiusField: 10,
+          colorField: 'D',
+          shapeField: 'C',
+        },
+        // {
+        //   x: 'y',
+        //   y: 20,
+        //   radiusField: 10,
+        //   colorField: 'D',
+        //   shapeField: 'C'
+        // },
+      ],
+      xField: 'x',
+      yField: 'y',
+    });
+    scatter.render();
+
+    expect(scatter.chart.getScaleByField('x').min).toEqual(0);
+    expect(scatter.chart.getScaleByField('x').max).toEqual(1);
+    expect(scatter.chart.getScaleByField('x').range).toEqual([0.5, 1]);
+
+    scatter.destroy();
+  });
+});

__tests__/unit/utils/get-meta-spec.ts

@@ -143,5 +143,20 @@ describe('getMeta', () => {
         max: 0,
       },
     });
+
+    // x 分类
+    expect(
+      getMeta({
+        data: [{ gender: 'female', weight: 'a', height: 160 }],
+        xField: 'weight',
+        yField: 'height',
+      })
+    ).toEqual({
+      weight: {},
+      height: {
+        min: 0,
+        max: 320,
+      },
+    });
   });
 });

src/plots/scatter/adaptor.ts

@@ -1,6 +1,6 @@
-import { isNumber, min, max } from '@antv/util';
+import { isNumber } from '@antv/util';
 import { Params } from '../../core/adaptor';
-import { flow, deepAssign } from '../../utils';
+import { flow, deepAssign, pick } from '../../utils';
 import { point } from '../../adaptor/geometries';
 import { interaction, animation, theme, scale, annotation } from '../../adaptor/common';
 import { findGeometry, transformLabel } from '../../utils';
@@ -17,25 +17,39 @@ export function transformOptions(options: ScatterOptions): ScatterOptions {
   const { data = [], xField, yField } = options;
 
   if (data.length) {
-    const xValues = data.map((d) => d[xField]);
-    const minX = min(xValues);
-    const maxX = max(xValues);
-    const yValues = data.map((d) => d[yField]);
-    const minY = min(yValues);
-    const maxY = max(yValues);
-    if (minX === maxX && minY === maxY) {
-      return deepAssign({}, options, {
-        meta: getMeta(options, ['x', 'y']),
-      });
-    } else if (minX === maxX) {
-      return deepAssign({}, options, {
-        meta: getMeta(options, ['x']),
-      });
-    } else if (minY === maxY) {
-      return deepAssign({}, options, {
-        meta: getMeta(options, ['y']),
-      });
+    // x y 字段知否只有一个值，如果只有一个值，则进行优化
+    let isOneX = true;
+    let isOneY = true;
+
+    let prev = data[0];
+    let curr;
+
+    for (let i = 1; i < data.length; i++) {
+      curr = data[i];
+
+      if (prev[xField] !== curr[xField]) {
+        isOneX = false;
+      }
+
+      if (prev[yField] !== curr[yField]) {
+        isOneY = false;
+      }
+
+      // 如果都不是 oneValue，那么可提前跳出循环
+      if (!isOneX && !isOneY) {
+        break;
+      }
+
+      prev = curr;
     }
+
+    const keys = [];
+    isOneX && keys.push(xField);
+    isOneY && keys.push(yField);
+
+    const meta = pick(getMeta(options), keys);
+
+    return deepAssign({}, options, { meta });
   }
 
   return options;

src/plots/scatter/index.ts

@@ -19,7 +19,7 @@ export class Scatter extends Plot<ScatterOptions> {
   }
 
   /** 图表类型 */
-  public type: string = 'point';
+  public type: string = 'scatter';
 
   constructor(container: string | HTMLElement, options: ScatterOptions) {
     super(container, options);

src/plots/scatter/util.ts

@@ -168,48 +168,62 @@ export const getPath = (config: RenderOptions) => {
  * @returns
  */
 export const getMeta = (
-  options: Pick<ScatterOptions, 'meta' | 'xField' | 'yField' | 'data'>,
-  dims: string[] = ['x', 'y']
+  options: Pick<ScatterOptions, 'meta' | 'xField' | 'yField' | 'data'>
 ): ScatterOptions['meta'] => {
   const { meta = {}, xField, yField, data } = options;
   const xFieldValue = data[0][xField];
   const yFieldValue = data[0][yField];
   const xIsPositiveNumber = xFieldValue > 0;
   const yIsPositiveNumber = yFieldValue > 0;
 
-  const getValue = (field: string, type: 'min' | 'max', axis: 'x' | 'y') => {
-    const customValue = get(meta, [field, type]);
-    if (isNumber(customValue)) {
-      return customValue;
+  /**
+   * 获得对应字段的 min max scale 配置
+   */
+  function getMetaMinMax(field: string, axis: 'x' | 'y') {
+    const fieldMeta = get(meta, [field]);
+
+    function getCustomValue(type: 'min' | 'max') {
+      return get(fieldMeta, type);
     }
+
+    const range = {};
+
     if (axis === 'x') {
-      const rangeX = {
-        min: xIsPositiveNumber ? 0 : xFieldValue * 2,
-        max: xIsPositiveNumber ? xFieldValue * 2 : 0,
-      };
-      return rangeX[type];
+      if (isNumber(xFieldValue)) {
+        if (!isNumber(getCustomValue('min'))) {
+          range['min'] = xIsPositiveNumber ? 0 : xFieldValue * 2;
+        }
+
+        if (!isNumber(getCustomValue('max'))) {
+          range['max'] = xIsPositiveNumber ? xFieldValue * 2 : 0;
+        }
+      }
+
+      return range;
     }
-    const rangeY = {
-      min: yIsPositiveNumber ? 0 : yFieldValue * 2,
-      max: yIsPositiveNumber ? yFieldValue * 2 : 0,
-    };
-    return rangeY[type];
-  };
+
+    if (isNumber(yFieldValue)) {
+      if (!isNumber(getCustomValue('min'))) {
+        range['min'] = yIsPositiveNumber ? 0 : yFieldValue * 2;
+      }
+
+      if (!isNumber(getCustomValue('max'))) {
+        range['max'] = yIsPositiveNumber ? yFieldValue * 2 : 0;
+      }
+    }
+
+    return range;
+  }
+
   return {
     ...meta,
-    [xField]: dims.includes('x')
-      ? {
-          ...meta[xField],
-          min: getValue(xField, 'min', 'x'),
-          max: getValue(xField, 'max', 'x'),
-        }
-      : {},
-    [yField]: dims.includes('y')
-      ? {
-          ...meta[yField],
-          min: getValue(yField, 'min', 'y'),
-          max: getValue(yField, 'max', 'y'),
-        }
-      : {},
+    [xField]: {
+      ...meta[xField],
+      ...getMetaMinMax(xField, 'x'),
+    },
+    [yField]: {
+      ...meta[yField],
+      ...getMetaMinMax(yField, 'y'),
+    },
   };
 };