feat: 完善散点图功能、新增测试用例

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

@@ -0,0 +1,40 @@
+import { Scatter } from '../../../../src';
+import { data } from '../../../data/gender';
+import { createDiv } from '../../../utils/dom';
+
+describe('scatter', () => {
+  it('axis: axis options', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      shape: ['circle', 'square'],
+      xAxis: {
+        nice: true,
+        label: {
+          formatter: (text: string, item: any, index: number) => {
+            return text;
+          },
+          style: {
+            fill: 'green',
+            fontSize: 16,
+          },
+        },
+      },
+    });
+
+    scatter.render();
+
+    const geometry = scatter.chart.geometries[0];
+    const elements = geometry.elements;
+
+    expect(elements.length).toBe(507);
+    // @ts-ignore
+    expect(scatter.chart.options.axes.weight.label.style.fill).toBe('green');
+    // @ts-ignore
+    expect(scatter.chart.options.axes.weight.label.style.fontSize).toBe(16);
+  });
+});

__tests__/unit/plots/scatter/color-spec.ts

@@ -0,0 +1,53 @@
+import { Scatter } from '../../../../src';
+import { data } from '../../../data/gender';
+import { createDiv } from '../../../utils/dom';
+
+describe('scatter', () => {
+  it('color: string options', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      color: 'red',
+      xAxis: {
+        nice: true,
+      },
+    });
+
+    scatter.render();
+
+    const geometry = scatter.chart.geometries[0];
+    const elements = geometry.elements;
+
+    expect(elements.length).toBe(507);
+    expect(elements[0].getModel().color).toBe('red');
+  });
+
+  it('color: string array options', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      color: ['#e764ff', '#2b0033'],
+      xAxis: {
+        nice: true,
+      },
+    });
+
+    scatter.render();
+
+    const geometry = scatter.chart.geometries[0];
+    const elements = geometry.elements;
+
+    // @ts-ignore
+    expect(geometry.attributeOption.color.values.length).toBe(2);
+    expect(elements.length).toBe(507);
+    expect(elements[0].getModel().color).not.toBe('red');
+  });
+});

__tests__/unit/plots/scatter/shape-spec.ts

@@ -0,0 +1,94 @@
+import { Scatter } from '../../../../src';
+import { data } from '../../../data/gender';
+import { createDiv } from '../../../utils/dom';
+
+describe('scatter', () => {
+  it('shpae: string options', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      shape: 'hollow-diamond',
+      xAxis: {
+        nice: true,
+      },
+    });
+
+    scatter.render();
+
+    const geometry = scatter.chart.geometries[0];
+    const elements = geometry.elements;
+
+    expect(elements.length).toBe(507);
+    expect(elements[0].getModel().shape).toBe('hollow-diamond');
+    expect(elements[elements.length - 1].getModel().shape).toBe('hollow-diamond');
+  });
+
+  it('shape: string array options', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      shape: ['circle', 'square'],
+      xAxis: {
+        nice: true,
+      },
+    });
+
+    scatter.render();
+    const geometry = scatter.chart.geometries[0];
+    const elements = geometry.elements;
+    const shapeArr = [];
+    elements.forEach((ele) => {
+      shapeArr.push(ele.getModel().shape);
+    });
+    const set = new Set(shapeArr);
+
+    // @ts-ignore
+    expect(geometry.attributeOption.shape.values.length).toBe(2);
+    expect(elements.length).toBe(507);
+    expect(set.size).toBe(2);
+  });
+
+  it('shape: callback options', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      shapeField: 'gender',
+      size: 10,
+      shape: (gender: string) => {
+        if (gender === 'female') {
+          return 'square';
+        }
+        return 'circle';
+      },
+      xAxis: {
+        nice: true,
+      },
+    });
+
+    scatter.render();
+    const geometry = scatter.chart.geometries[0];
+    const elements = geometry.elements;
+    const shapeArr = [];
+    elements.forEach((ele) => {
+      shapeArr.push(ele.getModel().shape);
+    });
+
+    // @ts-ignore
+    expect(geometry.attributeOption.shape.callback).toBeFunction();
+    expect(elements.length).toBe(507);
+    expect(shapeArr).toContain('circle');
+    expect(shapeArr).toContain('square');
+  });
+});

__tests__/unit/plots/scatter/size-spec.ts

@@ -0,0 +1,88 @@
+import { Scatter } from '../../../../src';
+import { data } from '../../../data/gender';
+import { createDiv } from '../../../utils/dom';
+
+describe('scatter', () => {
+  it('size: number options', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      sizeField: 'weight',
+      size: [5, 10],
+      xAxis: {
+        nice: true,
+      },
+    });
+
+    scatter.render();
+
+    const geometry = scatter.chart.geometries[0];
+    const elements = geometry.elements;
+
+    expect(elements.length).toBe(507);
+    expect(elements[0].getModel().size).toBe(5);
+    expect(elements[0].getModel().size).toBe(elements[elements.length - 1].getModel().size);
+  });
+
+  it('size: number array options', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      size: [5, 10],
+      xAxis: {
+        nice: true,
+      },
+    });
+
+    scatter.render();
+
+    const geometry = scatter.chart.geometries[0];
+    const elements = geometry.elements;
+
+    // @ts-ignore
+    expect(geometry.attributeOption.size.values.length).toBe(2);
+    expect(elements.length).toBe(507);
+    expect(elements[0].getModel().size).not.toBe(elements[elements.length - 1].getModel().size);
+  });
+
+  it('size: callback options', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      size: (value: number) => {
+        return Math.ceil(value / 10);
+      },
+      xAxis: {
+        nice: true,
+      },
+    });
+
+    scatter.render();
+
+    const geometry = scatter.chart.geometries[0];
+    const elements = geometry.elements;
+    const sizeArr = [];
+    elements.forEach((ele) => {
+      sizeArr.push(ele.getModel().size);
+    });
+    sizeArr.sort((a, b) => a - b);
+
+    // @ts-ignore
+    expect(geometry.attributeOption.size.callback).toBeFunction();
+    expect(elements.length).toBe(507);
+    expect(sizeArr[0] > 0).toBeTruthy();
+    expect(sizeArr[0]).not.toEqual(sizeArr[sizeArr.length - 1]);
+  });
+});

__tests__/unit/plots/scatter/style-spec.ts

@@ -0,0 +1,80 @@
+import { Scatter } from '../../../../src';
+import { data } from '../../../data/gender';
+import { createDiv } from '../../../utils/dom';
+
+describe('scatter', () => {
+  it('style: object options', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      sizeField: 'weight',
+      size: [5, 10],
+      xAxis: {
+        nice: true,
+      },
+      pointStyle: {
+        fill: 'red',
+        stroke: 'yellow',
+        opacity: 0.8,
+      },
+    });
+
+    scatter.render();
+
+    const geometry = scatter.chart.geometries[0];
+    const elements = geometry.elements;
+
+    expect(elements[0].shape.attr('fill')).toBe('red');
+    expect(elements[0].shape.attr('stroke')).toBe('yellow');
+    expect(elements[0].shape.attr('opacity')).toBe(0.8);
+  });
+
+  it('style: callback options', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      sizeField: 'weight',
+      size: [5, 10],
+      colorField: 'gender',
+      xAxis: {
+        nice: true,
+      },
+      pointStyle: (x: number, y: number, colorField: string) => {
+        if (colorField === 'male') {
+          return {
+            fill: 'green',
+            stroke: 'yellow',
+            opacity: 0.8,
+          };
+        }
+        return {
+          fill: 'red',
+          stroke: 'yellow',
+          opacity: 0.8,
+        };
+      },
+    });
+
+    scatter.render();
+
+    const geometry = scatter.chart.geometries[0];
+    const elements = geometry.elements;
+    const colorArr = [];
+    elements.forEach((ele) => {
+      colorArr.push(ele.shape.attr('fill'));
+    });
+
+    expect(colorArr).toContain('red');
+    expect(colorArr).toContain('green');
+    expect(elements[0].shape.attr('stroke')).toBe('yellow');
+    expect(elements[0].shape.attr('opacity')).toBe(0.8);
+  });
+});