feat(area): add plot area (#1361)

* feat(area): add plot area

* fix(area): plot type typo

* refactor(area): use common helper

__tests__/unit/plots/area/animation-spec.ts

@@ -0,0 +1,49 @@
+import { Area } from '../../../../src';
+import { partySupport } from '../../../data/party-support';
+import { createDiv } from '../../../utils/dom';
+
+describe('area', () => {
+  it('x*y with animation', () => {
+    const area = new Area(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      appendPadding: 10,
+      smooth: true,
+      animation: {
+        enter: {
+          animation: 'fade-in',
+        },
+        leave: {
+          animation: 'fade-out',
+        },
+      },
+    });
+
+    area.render();
+
+    // 追加默认的动画配置
+    expect(area.chart.geometries[0].animateOption).toEqual({
+      appear: {
+        duration: 450,
+        easing: 'easeQuadOut',
+      },
+      update: {
+        duration: 400,
+        easing: 'easeQuadInOut',
+      },
+      enter: {
+        duration: 400,
+        easing: 'easeQuadInOut',
+        animation: 'fade-in',
+      },
+      leave: {
+        duration: 350,
+        easing: 'easeQuadIn',
+        animation: 'fade-out',
+      },
+    });
+  });
+});

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

@@ -0,0 +1,43 @@
+import { Area } from '../../../../src';
+import { partySupport } from '../../../data/party-support';
+import { createDiv } from '../../../utils/dom';
+
+describe('area', () => {
+  it('x*y*color and axis options', () => {
+    const area = new Area(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+      color: ['blue', 'red'],
+      appendPadding: 10,
+      xAxis: {
+        label: {
+          style: {
+            fill: 'red',
+          },
+        },
+      },
+      yAxis: {
+        tickCount: 3,
+      },
+    });
+
+    area.render();
+
+    const geometry = area.chart.geometries[0];
+    const elements = geometry.elements;
+
+    expect(elements.length).toBe(2);
+    expect(elements[0].getModel().color).toBe('blue');
+    expect(elements[1].getModel().color).toBe('red');
+
+    expect(geometry.scales.value.min).toBe(0);
+    expect(geometry.scales.value.max).toBe(6000);
+
+    // @ts-ignore
+    expect(area.chart.options.axes.date.label.style.fill).toBe('red');
+  });
+});

__tests__/unit/plots/area/index-spec.ts

@@ -0,0 +1,51 @@
+import { Area } from '../../../../src';
+import { partySupport } from '../../../data/party-support';
+import { createDiv } from '../../../utils/dom';
+
+describe('area', () => {
+  it('x*y', () => {
+    const area = new Area(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data: partySupport.filter((o) => o.type === 'FF'),
+      xField: 'date',
+      yField: 'value',
+    });
+
+    area.render();
+
+    expect(area.chart.geometries[0].elements.length).toBe(1);
+  });
+
+  it('x*y with color', () => {
+    const area = new Area(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+      color: ['blue', 'red'],
+      appendPadding: 10,
+      meta: {
+        value: {
+          min: 0,
+          max: 5000,
+        },
+      },
+    });
+
+    area.render();
+
+    const geometry = area.chart.geometries[0];
+    const elements = geometry.elements;
+
+    expect(elements.length).toBe(2);
+    expect(elements[0].getModel().color).toBe('blue');
+    expect(elements[1].getModel().color).toBe('red');
+
+    expect(geometry.scales.value.min).toBe(0);
+    expect(geometry.scales.value.max).toBe(5000);
+  });
+});

__tests__/unit/plots/area/label-spec.ts

@@ -0,0 +1,61 @@
+import { Area } from '../../../../src';
+import { partySupport } from '../../../data/party-support';
+import { createDiv } from '../../../utils/dom';
+
+describe('area', () => {
+  it('x*y and label', () => {
+    const area = new Area(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      appendPadding: 10,
+      label: {
+        layout: {
+          type: 'overlap',
+        },
+      },
+    });
+
+    area.render();
+    // @ts-ignore
+    expect(area.chart.geometries[0].labelOption.cfg).toEqual({
+      layout: {
+        type: 'overlap',
+      },
+    });
+
+    area.update({
+      ...area.options,
+      label: false,
+    });
+    // @ts-ignore
+    expect(area.chart.geometries[0].labelOption).toBe(false);
+  });
+
+  it('x*y*color and label', () => {
+    const area = new Area(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+      appendPadding: 10,
+      label: {
+        layout: {
+          type: 'overlap',
+        },
+      },
+    });
+
+    area.render();
+    // @ts-ignore
+    expect(area.chart.geometries[0].labelOption.cfg).toEqual({
+      layout: {
+        type: 'overlap',
+      },
+    });
+  });
+});

__tests__/unit/plots/area/line-spec.ts

@@ -0,0 +1,54 @@
+import { Geometry } from '@antv/g2';
+import { Area } from '../../../../src';
+import { partySupport } from '../../../data/party-support';
+import { createDiv } from '../../../utils/dom';
+
+describe('area', () => {
+  it('x*y*color point', () => {
+    const area = new Area(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+      appendPadding: 10,
+    });
+
+    area.render();
+    expect(area.chart.geometries.length).toBe(1);
+
+    let xValue;
+    let yValue;
+    let colorValue;
+    area.update({
+      ...area.options,
+      point: {
+        size: 2,
+        shape: 'circle',
+        style: (x: string, y: number, color: string) => {
+          xValue = x;
+          yValue = y;
+          colorValue = color;
+          return {
+            fill: color === 'FF' ? 'red' : 'blue',
+          };
+        },
+      },
+      line: {
+        size: 2,
+      },
+    });
+    expect(area.chart.geometries.length).toBe(3);
+    expect(xValue).toBe('25/01/2018');
+    expect(yValue).toBe(400);
+    expect(colorValue).toBe('Lab');
+
+    const point = area.chart.geometries.find((g: Geometry) => g.type === 'line');
+    expect(point.shapeType).toBe('line');
+    // @ts-ignore
+    expect(point.attributeOption.size.values).toEqual([2]);
+    // @ts-ignore
+    // expect(point.attributeOption.shape.values).toEqual(['circle']);
+  });
+});

__tests__/unit/plots/area/point-spec.ts

@@ -0,0 +1,51 @@
+import { Geometry } from '@antv/g2';
+import { Area } from '../../../../src';
+import { partySupport } from '../../../data/party-support';
+import { createDiv } from '../../../utils/dom';
+
+describe('area', () => {
+  it('x*y*color point', () => {
+    const area = new Area(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+      appendPadding: 10,
+    });
+
+    area.render();
+    expect(area.chart.geometries.length).toBe(1);
+
+    let xValue;
+    let yValue;
+    let colorValue;
+    area.update({
+      ...area.options,
+      point: {
+        size: 2,
+        shape: 'circle',
+        style: (x: string, y: number, color: string) => {
+          xValue = x;
+          yValue = y;
+          colorValue = color;
+          return {
+            fill: color === 'FF' ? 'red' : 'blue',
+          };
+        },
+      },
+    });
+    expect(area.chart.geometries.length).toBe(2);
+    expect(xValue).toBe('25/01/2018');
+    expect(yValue).toBe(400);
+    expect(colorValue).toBe('Lab');
+
+    const point = area.chart.geometries.find((g: Geometry) => g.type === 'point');
+    expect(point.shapeType).toBe('point');
+    // @ts-ignore
+    expect(point.attributeOption.size.values).toEqual([2]);
+    // @ts-ignore
+    // expect(point.attributeOption.shape.values).toEqual(['circle']);
+  });
+});

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

@@ -0,0 +1,36 @@
+import { Area } from '../../../../src';
+import { partySupport } from '../../../data/party-support';
+import { createDiv } from '../../../utils/dom';
+
+describe('area', () => {
+  it('x*y and shape', () => {
+    const area = new Area(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      appendPadding: 10,
+      smooth: false,
+    });
+
+    area.render();
+    expect(area.chart.geometries[0].attributes.shape.values).toEqual(['area']);
+  });
+
+  it('x*y*color and shape', () => {
+    const area = new Area(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+      appendPadding: 10,
+      smooth: true,
+    });
+
+    area.render();
+    expect(area.chart.geometries[0].attributes.shape.values).toEqual(['smooth']);
+  });
+});