feat: a new chart type - Box Chart (#1382)

Author: BBSQQ

__tests__/data/box.ts

@@ -8,3 +8,29 @@ export const boxData = [
   { x: 'West Europe', low: 1, q1: 7, median: 10, q3: 17, high: 22 },
   { x: 'West Africa', low: 1, q1: 6, median: 8, q3: 13, high: 16 },
 ];
+
+export const groupBoxData = [
+  { Species: 'I. setosa', type: 'SepalLength', value: 5.1, _bin: [4.3, 4.8, 5, 5.2, 5.8] },
+  { Species: 'I. setosa', type: 'SepalWidth', value: 3.5, _bin: [2.3, 3.2, 3.4, 3.7, 4.4] },
+  { Species: 'I. setosa', type: 'PetalLength', value: 1.4, _bin: [1, 1.4, 1.5, 1.6, 1.9] },
+  { Species: 'I. setosa', type: 'PetalWidth', value: 0.2, _bin: [0.1, 0.2, 0.2, 0.3, 0.6] },
+  { Species: 'I. versicolor', type: 'SepalLength', value: 7, _bin: [4.9, 5.6, 5.9, 6.3, 7] },
+  { Species: 'I. versicolor', type: 'SepalWidth', value: 3.2, _bin: [2, 2.5, 2.8, 3, 3.4] },
+  { Species: 'I. versicolor', type: 'PetalLength', value: 4.7, _bin: [3, 4, 4.35, 4.6, 5.1] },
+  { Species: 'I. versicolor', type: 'PetalWidth', value: 1.4, _bin: [1, 1.2, 1.3, 1.5, 1.8] },
+  { Species: 'I. virginica', type: 'SepalLength', value: 6.3, _bin: [4.9, 6.2, 6.5, 6.9, 7.9] },
+  { Species: 'I. virginica', type: 'SepalWidth', value: 3.3, _bin: [2.2, 2.8, 3, 3.2, 3.8] },
+  { Species: 'I. virginica', type: 'PetalLength', value: 6, _bin: [4.5, 5.1, 5.55, 5.9, 6.9] },
+  { Species: 'I. virginica', type: 'PetalWidth', value: 2.5, _bin: [1.4, 1.8, 2, 2.3, 2.5] },
+];
+
+export const outliersData = [
+  { x: '职业 A', low: 20000, q1: 26000, median: 27000, q3: 32000, high: 38000, outliers: [50000, 52000] },
+  { x: '职业 B', low: 40000, q1: 49000, median: 62000, q3: 73000, high: 88000, outliers: [32000, 29000, 106000] },
+  { x: '职业 C', low: 52000, q1: 59000, median: 65000, q3: 74000, high: 83000, outliers: [91000] },
+  { x: '职业 D', low: 58000, q1: 96000, median: 130000, q3: 170000, high: 200000, outliers: [42000, 210000, 215000] },
+  { x: '职业 E', low: 24000, q1: 28000, median: 32000, q3: 38000, high: 42000, outliers: [48000] },
+  { x: '职业 F', low: 47000, q1: 56000, median: 69000, q3: 85000, high: 100000, outliers: [110000, 115000, 32000] },
+  { x: '职业 G', low: 64000, q1: 74000, median: 83000, q3: 93000, high: 100000, outliers: [110000] },
+  { x: '职业 H', low: 67000, q1: 72000, median: 84000, q3: 95000, high: 110000, outliers: [57000, 54000] },
+];

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

@@ -0,0 +1,75 @@
+import { Box } from '../../../../src';
+import { BOX_RANGE } from '../../../../src/plots/box/constant';
+import { boxData } from '../../../data/box';
+import { createDiv } from '../../../utils/dom';
+
+describe('box axis', () => {
+  it('meta', () => {
+    const box = new Box(createDiv(), {
+      width: 400,
+      height: 500,
+      data: boxData,
+      xField: 'x',
+      yField: ['low', 'q1', 'median', 'q3', 'high'],
+      meta: {
+        [BOX_RANGE]: {
+          nice: true,
+        },
+      },
+    });
+
+    box.render();
+
+    const geometry = box.chart.geometries[0];
+    // @ts-ignore
+    expect(geometry.scales[BOX_RANGE].nice).toBe(true);
+  });
+
+  it('xAxis', () => {
+    const box = new Box(createDiv(), {
+      width: 400,
+      height: 500,
+      data: boxData,
+      xField: 'x',
+      yField: ['low', 'q1', 'median', 'q3', 'high'],
+      xAxis: {
+        label: {
+          rotate: -Math.PI / 2,
+        },
+      },
+    });
+
+    box.render();
+    const axisOptions = box.chart.getOptions().axes;
+
+    // @ts-ignore
+    expect(axisOptions.x.label.rotate).toBe(-Math.PI / 2);
+  });
+
+  it('yAxis', () => {
+    const box = new Box(createDiv(), {
+      width: 400,
+      height: 500,
+      data: boxData,
+      xField: 'x',
+      yField: ['low', 'q1', 'median', 'q3', 'high'],
+      yAxis: {
+        minLimit: 0,
+        maxLimit: 50,
+        nice: true,
+      },
+    });
+
+    box.render();
+
+    const geometry = box.chart.geometries[0];
+    const axisOptions = box.chart.getOptions().axes;
+
+    // @ts-ignore
+    expect(axisOptions[BOX_RANGE].minLimit).toBe(0);
+    expect(geometry.scales[BOX_RANGE].minLimit).toBe(0);
+    expect(geometry.scales[BOX_RANGE].maxLimit).toBe(50);
+    // @ts-ignore
+    expect(geometry.scales[BOX_RANGE].nice).toBe(true);
+  });
+});

__tests__/unit/plots/box/group-spec.ts

@@ -0,0 +1,26 @@
+import { Box } from '../../../../src';
+import { groupBoxData } from '../../../data/box';
+import { createDiv } from '../../../utils/dom';
+
+describe('grouped box', () => {
+  it('grouped box', () => {
+    const box = new Box(createDiv('grouped box'), {
+      width: 400,
+      height: 500,
+      data: groupBoxData,
+      xField: 'type',
+      yField: '_bin',
+      groupField: 'Species',
+    });
+
+    box.render();
+
+    const geometry = box.chart.geometries[0];
+    expect(geometry.getAdjust('dodge')).toMatchObject({
+      xField: 'type',
+      yField: '_bin',
+    });
+    expect(geometry.getAdjust('stack')).toBeUndefined();
+    expect(geometry.getAttribute('color')?.getFields()).toEqual(['Species']);
+  });
+});

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

@@ -0,0 +1,32 @@
+import { Box } from '../../../../src';
+import { BOX_RANGE } from '../../../../src/plots/box/constant';
+import { boxData } from '../../../data/box';
+import { createDiv } from '../../../utils/dom';
+
+describe('box', () => {
+  it('x*range range.min default as 0', () => {
+    const box = new Box(createDiv('x*range range.min default as 0'), {
+      width: 400,
+      height: 500,
+      data: boxData,
+      xField: 'x',
+      yField: ['low', 'q1', 'median', 'q3', 'high'],
+    });
+
+    box.render();
+
+    const geometry = box.chart.geometries[0];
+    const positionFields = geometry.getAttribute('position').getFields();
+
+    // 类型
+    expect(geometry.type).toBe('schema');
+    // 图形元素个数
+    expect(box.chart.geometries[0].elements.length).toBe(boxData.length);
+    // x & range
+    expect(positionFields).toHaveLength(2);
+
+    // range meta default min = 0
+    // @ts-ignore
+    expect(geometry.scales[BOX_RANGE].min).toBe(0);
+  });
+});

__tests__/unit/plots/box/legend-spec.ts

@@ -0,0 +1,30 @@
+import { Box } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+import { groupBoxData } from '../../../data/box';
+
+describe('box legend', () => {
+  it('legend position', () => {
+    const box = new Box(createDiv('legend position'), {
+      width: 400,
+      height: 500,
+      data: groupBoxData,
+      xField: 'type',
+      yField: '_bin',
+      groupField: 'Species',
+    });
+
+    box.render();
+
+    // @ts-ignore
+    expect(box.chart.options.legends['Species'].position).toBe('bottom');
+
+    box.update({
+      ...box.options,
+      legend: {
+        position: 'right',
+      },
+    });
+    // @ts-ignore
+    expect(box.chart.options.legends['Species'].position).toBe('right');
+  });
+});

__tests__/unit/plots/box/outliers-spec.ts

@@ -0,0 +1,48 @@
+import { Box } from '../../../../src';
+import { outliersData } from '../../../data/box';
+import { createDiv } from '../../../utils/dom';
+
+describe('box outliers', () => {
+  it('with outliersField', () => {
+    const box = new Box(createDiv('outliers'), {
+      width: 400,
+      height: 500,
+      data: outliersData,
+      xField: 'x',
+      yField: ['low', 'q1', 'median', 'q3', 'high'],
+      outliersField: 'outliers',
+    });
+
+    box.render();
+
+    const view = box.chart.views[0];
+    const geometry = view.geometries[0];
+
+    // 类型
+    expect(geometry.type).toBe('point');
+    // 图形元素个数
+    expect(geometry.elements.length).toBe(outliersData.length);
+  });
+
+  it('with outliersField style', () => {
+    const box = new Box(createDiv('outliers'), {
+      width: 400,
+      height: 500,
+      data: outliersData,
+      xField: 'x',
+      yField: ['low', 'q1', 'median', 'q3', 'high'],
+      outliersField: 'outliers',
+      outliersStyle: {
+        fill: '#f6f',
+      },
+    });
+
+    box.render();
+
+    const view = box.chart.views[0];
+    const elements = view.geometries[0].elements;
+
+    // 类型
+    expect(elements[0].shape.cfg.children[0].attr('fill')).toBe('#f6f');
+  });
+});

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

@@ -0,0 +1,53 @@
+import { Box } from '../../../../src';
+import { boxData } from '../../../data/box';
+import { createDiv } from '../../../utils/dom';
+
+describe('box style', () => {
+  it('style config', () => {
+    const box = new Box(createDiv('style config'), {
+      width: 400,
+      height: 500,
+      data: boxData,
+      xField: 'x',
+      yField: ['low', 'q1', 'median', 'q3', 'high'],
+      boxStyle: {
+        stroke: 'black',
+        lineWidth: 2,
+        fill: '#1890FF',
+      },
+    });
+
+    box.render();
+
+    const geometry = box.chart.geometries[0];
+    const elements = geometry.elements;
+
+    expect(elements[0].shape.attr('stroke')).toBe('black');
+    expect(elements[0].shape.attr('lineWidth')).toBe(2);
+    expect(elements[0].shape.attr('fill')).toBe('#1890FF');
+  });
+
+  it('style callback', () => {
+    const box = new Box(createDiv('style config'), {
+      width: 400,
+      height: 500,
+      data: boxData,
+      xField: 'x',
+      yField: ['low', 'q1', 'median', 'q3', 'high'],
+      boxStyle: () => {
+        return {
+          stroke: 'black',
+          lineWidth: 2,
+          fill: '#1890FF',
+        };
+      },
+    });
+
+    box.render();
+
+    const geometry = box.chart.geometries[0];
+    const elements = geometry.elements;
+    expect(elements[0].shape.attr('stroke')).toBe('black');
+    expect(elements[0].shape.attr('fill')).toBe('#1890FF');
+  });
+});

__tests__/unit/plots/box/tooltip-spec.ts

@@ -0,0 +1,47 @@
+import { Box } from '../../../../src';
+import { boxData, groupBoxData } from '../../../data/box';
+import { createDiv } from '../../../utils/dom';
+
+describe('box tooltip', () => {
+  it('x*y and tooltip', () => {
+    const box = new Box(createDiv('box tooltip'), {
+      width: 400,
+      height: 500,
+      data: boxData,
+      xField: 'x',
+      yField: ['low', 'q1', 'median', 'q3', 'high'],
+      tooltip: {
+        title: 'hello world',
+      },
+    });
+
+    box.render();
+    // @ts-ignore
+    expect(box.chart.options.tooltip.title).toBe('hello world');
+
+    box.update({
+      ...box.options,
+      tooltip: false,
+    });
+    // @ts-ignore
+    expect(box.chart.options.tooltip).toBe(false);
+    expect(box.chart.getComponents().find((co) => co.type === 'tooltip')).toBe(undefined);
+  });
+
+  it('default toolip', () => {
+    const box = new Box(createDiv('default tooltip'), {
+      width: 400,
+      height: 500,
+      data: groupBoxData,
+      xField: 'type',
+      yField: '_bin',
+      groupField: 'Species',
+    });
+
+    box.render();
+    // @ts-ignore
+    expect(box.chart.options.tooltip.shared).toBe(true);
+    // @ts-ignore
+    expect(box.chart.options.tooltip.showCrosshairs).toBe(true);
+  });
+});

examples/box/basic/demo/basic.ts

@@ -0,0 +1,28 @@
+import { Box } from '@antv/g2plot';
+
+const data = [
+  { x: 'Oceania', low: 1, q1: 9, median: 16, q3: 22, high: 24 },
+  { x: 'East Europe', low: 1, q1: 5, median: 8, q3: 12, high: 16 },
+  { x: 'Australia', low: 1, q1: 8, median: 12, q3: 19, high: 26 },
+  { x: 'South America', low: 2, q1: 8, median: 12, q3: 21, high: 28 },
+  { x: 'North Africa', low: 1, q1: 8, median: 14, q3: 18, high: 24 },
+  { x: 'North America', low: 3, q1: 10, median: 17, q3: 28, high: 30 },
+  { x: 'West Europe', low: 1, q1: 7, median: 10, q3: 17, high: 22 },
+  { x: 'West Africa', low: 1, q1: 6, median: 8, q3: 13, high: 16 },
+];
+
+const boxPlot = new Box('container', {
+  width: 400,
+  height: 500,
+  data: data,
+  xField: 'x',
+  yField: ['low', 'q1', 'median', 'q3', 'high'],
+  boxStyle: {
+    stroke: '#545454',
+    fill: '#1890FF',
+    fillOpacity: 0.3,
+  },
+  animation: false,
+});
+
+boxPlot.render();