Merge pull request #1 from antvis/v2

V2

__tests__/data/sales.ts

@@ -0,0 +1,8 @@
+export const salesByArea = [
+  { area: '东北', sales: 2681567.469000001 },
+  { area: '中南', sales: 4137415.0929999948 },
+  { area: '华东', sales: 4684506.442 },
+  { area: '华北', sales: 2447301.017000004 },
+  { area: '西北', sales: 815039.5959999998 },
+  { area: '西南', sales: 1303124.508000002 },
+];

__tests__/unit/core/index-spec.ts

@@ -1,7 +1,11 @@
-import { Line } from '../../../src';
+import { Line, registerTheme } from '../../../src';
 import { partySupport } from '../../data/party-support';
 import { createDiv } from '../../utils/dom';
 
+registerTheme('new-theme', {
+  colors10: ['green'],
+});
+
 describe('core', () => {
   it('autoFit', () => {
     const line = new Line(createDiv(), {
@@ -46,4 +50,31 @@ describe('core', () => {
 
     expect(line.chart.localRefresh).toBe(false);
   });
+
+  it('theme', () => {
+    const line = new Line(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+      theme: {
+        colors10: ['red'],
+      },
+    });
+
+    line.render();
+
+    expect(line.chart.getTheme().colors10).toEqual(['red']);
+    expect(line.chart.getTheme().defaultColor).toBe('#5B8FF9');
+
+    line.update({
+      ...line.options,
+      theme: 'new-theme',
+    });
+
+    expect(line.chart.getTheme().colors10).toEqual(['green']);
+  });
 });

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

@@ -0,0 +1,75 @@
+import { Column } from '../../../../src';
+import { salesByArea } from '../../../data/sales';
+import { createDiv } from '../../../utils/dom';
+
+describe('column axis', () => {
+  it('meta', () => {
+    const formatter = (v) => `${Math.floor(v / 10000)}万`;
+    const column = new Column(createDiv(), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+      meta: {
+        sales: {
+          nice: true,
+          formatter,
+        },
+      },
+    });
+
+    column.render();
+
+    const geometry = column.chart.geometries[0];
+    // @ts-ignore
+    expect(geometry.scales.sales.nice).toBe(true);
+    expect(geometry.scales.sales.formatter).toBe(formatter);
+  });
+
+  it('xAxis', () => {
+    const column = new Column(createDiv(), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+      xAxis: {
+        label: {
+          rotate: -Math.PI / 2,
+        },
+      },
+    });
+
+    column.render();
+    const axisOptions = column.chart.getOptions().axes;
+
+    // @ts-ignore
+    expect(axisOptions.area.label.rotate).toBe(-Math.PI / 2);
+  });
+
+  it('yAxis', () => {
+    const column = new Column(createDiv(), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+      yAxis: {
+        minLimit: 10000,
+        nice: true,
+      },
+    });
+
+    column.render();
+
+    const geometry = column.chart.geometries[0];
+    const axisOptions = column.chart.getOptions().axes;
+
+    // @ts-ignore
+    expect(axisOptions.sales.minLimit).toBe(10000);
+    expect(geometry.scales.sales.minLimit).toBe(10000);
+    // @ts-ignore
+    expect(geometry.scales.sales.nice).toBe(true);
+  });
+});

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

@@ -0,0 +1,74 @@
+import { Column } from '../../../../src';
+import { salesByArea } from '../../../data/sales';
+import { createDiv } from '../../../utils/dom';
+
+describe('column', () => {
+  it('x*y', () => {
+    const column = new Column(createDiv(), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+    });
+
+    column.render();
+
+    const geometry = column.chart.geometries[0];
+    const positionFields = geometry.getAttribute('position').getFields();
+
+    // 类型
+    expect(geometry.type).toBe('interval');
+    // 图形元素个数
+    expect(column.chart.geometries[0].elements.length).toBe(salesByArea.length);
+    // x & y
+    expect(positionFields).toHaveLength(2);
+    expect(positionFields[0]).toBe('area');
+    expect(positionFields[1]).toBe('sales');
+  });
+
+  it('x*y*color', () => {
+    const column = new Column(createDiv(), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+      colorField: 'area',
+    });
+
+    column.render();
+
+    const geometry = column.chart.geometries[0];
+    const colorFields = geometry.getAttribute('color').getFields();
+
+    expect(colorFields).toHaveLength(1);
+    expect(colorFields[0]).toBe('area');
+  });
+
+  it('x*y*color with color', () => {
+    const palette = ['red', 'yellow', 'green'];
+    const column = new Column(createDiv(), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+      colorField: 'area',
+      color: palette,
+    });
+
+    column.render();
+
+    const geometry = column.chart.geometries[0];
+    const colorAttribute = geometry.getAttribute('color');
+    const colorFields = colorAttribute.getFields();
+
+    expect(colorFields).toHaveLength(1);
+    expect(colorFields[0]).toBe('area');
+    geometry.elements.forEach((element, index) => {
+      const color = element.getModel().color;
+      expect(color).toBe(palette[index % palette.length]);
+    });
+  });
+});

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

@@ -0,0 +1,90 @@
+import { Column } from '../../../../src';
+import { salesByArea } from '../../../data/sales';
+import { createDiv } from '../../../utils/dom';
+
+describe('column label', () => {
+  it('position: top', () => {
+    const column = new Column(createDiv(), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+      meta: {
+        sales: {
+          nice: true,
+          formatter: (v) => `${Math.floor(v / 10000)}万`,
+        },
+      },
+      label: {
+        position: 'top',
+      },
+    });
+
+    column.render();
+
+    const geometry = column.chart.geometries[0];
+    const labelGroups = geometry.labelsContainer.getChildren();
+
+    // @ts-ignore
+    expect(geometry.labelOption.cfg).toEqual({
+      position: 'top',
+    });
+    expect(labelGroups).toHaveLength(salesByArea.length);
+    labelGroups.forEach((label, index) => {
+      expect(label.get('children')[0].attr('text')).toBe(`${Math.floor(salesByArea[index].sales / 10000)}万`);
+    });
+  });
+
+  it('label position middle', () => {
+    const column = new Column(createDiv(), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+      meta: {
+        sales: {
+          nice: true,
+          formatter: (v) => `${Math.floor(v / 10000)}万`,
+        },
+      },
+      label: {
+        position: 'middle',
+      },
+    });
+
+    column.render();
+
+    const geometry = column.chart.geometries[0];
+
+    // @ts-ignore
+    expect(geometry.labelOption.cfg).toEqual({ position: 'middle' });
+  });
+
+  it('label position bottom', () => {
+    const column = new Column(createDiv(), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+      meta: {
+        sales: {
+          nice: true,
+          formatter: (v) => `${Math.floor(v / 10000)}万`,
+        },
+      },
+      label: {
+        position: 'bottom',
+      },
+    });
+
+    column.render();
+
+    const geometry = column.chart.geometries[0];
+
+    // @ts-ignore
+    expect(geometry.labelOption.cfg).toEqual({ position: 'bottom' });
+  });
+});

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

@@ -0,0 +1,61 @@
+import { Column } from '../../../../src';
+import { salesByArea } from '../../../data/sales';
+import { createDiv } from '../../../utils/dom';
+
+describe('column style', () => {
+  it('style config', () => {
+    const column = new Column(createDiv(), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+      meta: {
+        sales: {
+          nice: true,
+          formatter: (v) => `${Math.floor(v / 10000)}万`,
+        },
+      },
+      columnStyle: {
+        stroke: 'black',
+        lineWidth: 2,
+      },
+    });
+
+    column.render();
+
+    const geometry = column.chart.geometries[0];
+    const elements = geometry.elements;
+    expect(elements[0].shape.attr('stroke')).toBe('black');
+    expect(elements[0].shape.attr('lineWidth')).toBe(2);
+  });
+
+  it('style callback', () => {
+    const column = new Column(createDiv(), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+      meta: {
+        sales: {
+          nice: true,
+          formatter: (v) => `${Math.floor(v / 10000)}万`,
+        },
+      },
+      columnStyle: (x, y) => {
+        return {
+          stroke: 'black',
+          lineWidth: 2,
+        };
+      },
+    });
+
+    column.render();
+
+    const geometry = column.chart.geometries[0];
+    const elements = geometry.elements;
+    expect(elements[0].shape.attr('stroke')).toBe('black');
+    expect(elements[0].shape.attr('lineWidth')).toBe(2);
+  });
+});