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

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

@@ -0,0 +1,42 @@
+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).not.toBe(0);
+
+    // @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,58 @@
+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).not.toBe(0);
+
+    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];
+
+    // @ts-ignore
+    expect(geometry.attributeOption.color.values.length).toBe(2);
+
+    const elements = geometry.elements;
+
+    expect(elements.length).not.toBe(0);
+
+    expect(elements[0].getModel().color).not.toBe('red');
+  });
+});

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

@@ -0,0 +1,131 @@
+import { Scatter } from '../../../../src';
+import { data } from '../../../data/gender';
+import { createDiv } from '../../../utils/dom';
+
+describe('scatter', () => {
+  it('shape: string options', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      shape: 'weight',
+      xAxis: {
+        nice: true,
+      },
+    });
+
+    scatter.render();
+
+    const geometry = scatter.chart.geometries[0];
+
+    const elements = geometry.elements;
+
+    expect(elements.length).not.toBe(0);
+
+    const shapeArr = [];
+
+    elements.forEach((ele) => {
+      shapeArr.push(ele.getModel().shape);
+    });
+
+    expect(shapeArr).toContain('circle');
+
+    const set = new Set(shapeArr);
+
+    expect(set.size > 2).toBeTruthy();
+  });
+
+  it('shpae: number 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).not.toBe(0);
+
+    expect(elements[~~Math.random() * (elements.length - 1)].getModel().shape).toBe('hollow-diamond');
+  });
+
+  it('shape: number 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];
+
+    // @ts-ignore
+    expect(geometry.attributeOption.shape.values.length).toBe(2);
+
+    const elements = geometry.elements;
+
+    expect(elements.length).not.toBe(0);
+
+    const shapeArr = [];
+
+    elements.forEach((ele) => {
+      shapeArr.push(ele.getModel().shape);
+    });
+
+    const set = new Set(shapeArr);
+
+    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',
+      shape: () => {
+        return 'circle';
+      },
+      xAxis: {
+        nice: true,
+      },
+    });
+
+    scatter.render();
+
+    const geometry = scatter.chart.geometries[0];
+
+    // @ts-ignore
+    expect(geometry.attributeOption.shape.callback).toBeFunction();
+
+    const elements = geometry.elements;
+
+    expect(elements.length).not.toBe(0);
+
+    expect(elements[0].getModel().shape).toBe('circle');
+  });
+});

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

@@ -0,0 +1,117 @@
+import { Scatter } from '../../../../src';
+import { data } from '../../../data/gender';
+import { createDiv } from '../../../utils/dom';
+
+describe('scatter', () => {
+  it('size: string options', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      pointSize: 'weight',
+      xAxis: {
+        nice: true,
+      },
+    });
+
+    scatter.render();
+
+    const geometry = scatter.chart.geometries[0];
+
+    const elements = geometry.elements;
+
+    expect(elements.length).not.toBe(0);
+
+    expect(elements[0].getModel().size).not.toBe(0);
+
+    expect(elements[0].getModel().size).not.toBe(elements[elements.length - 1].getModel().size);
+  });
+
+  it('size: number options', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data,
+      xField: 'weight',
+      yField: 'height',
+      pointSize: 5,
+      xAxis: {
+        nice: true,
+      },
+    });
+
+    scatter.render();
+
+    const geometry = scatter.chart.geometries[0];
+
+    const elements = geometry.elements;
+
+    expect(elements.length).not.toBe(0);
+
+    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',
+      pointSize: [5, 10],
+      xAxis: {
+        nice: true,
+      },
+    });
+
+    scatter.render();
+
+    const geometry = scatter.chart.geometries[0];
+
+    // @ts-ignore
+    expect(geometry.attributeOption.size.values.length).toBe(2);
+
+    const elements = geometry.elements;
+
+    expect(elements.length).not.toBe(0);
+
+    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',
+      pointSize: () => {
+        return 6;
+      },
+      xAxis: {
+        nice: true,
+      },
+    });
+
+    scatter.render();
+
+    const geometry = scatter.chart.geometries[0];
+
+    // @ts-ignore
+    expect(geometry.attributeOption.size.callback).toBeFunction();
+
+    const elements = geometry.elements;
+
+    expect(elements.length).not.toBe(0);
+
+    expect(elements[0].getModel().size).toBe(6);
+  });
+});