feat: violin

.github/workflows/auto-inspection.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v2
       - name: Get branch name (pull request)
         run: echo "BRANCH_NAME=$(echo ${GITHUB_HEAD_REF})" >> $GITHUB_ENV
-      - uses: lxfu1/surge-preview@v2.0.1
+      - uses: lxfu1/surge-preview@v2.0.1 
         id: preview_step
         with:
           project_name: 'G2Plot'

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

@@ -0,0 +1,85 @@
+import { Violin } from '../../../../src';
+import { BASE_VIOLIN_DATA } from '../../../data/violin';
+import { createDiv } from '../../../utils/dom';
+
+describe('violin legend', () => {
+  const violin = new Violin(createDiv(), {
+    width: 400,
+    height: 500,
+    data: BASE_VIOLIN_DATA,
+    xField: 'type',
+    yField: 'value',
+    animation: {
+      enter: {
+        animation: 'fade-in',
+      },
+      leave: {
+        animation: 'fade-out',
+      },
+    },
+  });
+
+  violin.render();
+
+  it('default', () => {
+    // 新的 geometry violin 暂时未追加
+    expect(violin.chart.views[0].geometries[0].animateOption).toEqual({
+      enter: {
+        animation: 'fade-in',
+      },
+      leave: {
+        animation: 'fade-out',
+      },
+    });
+
+    // 追加默认的动画配置
+    expect(violin.chart.views[1].geometries[0].animateOption).toMatchObject({
+      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',
+      },
+    });
+  });
+
+  it('update', () => {
+    violin.update({
+      animation: {
+        appear: {
+          animation: 'fade-in',
+        },
+        leave: {
+          animation: 'wave-out',
+        },
+      },
+    });
+    expect(violin.chart.views[0].geometries[0].animateOption).toEqual({
+      appear: {
+        animation: 'fade-in',
+      },
+      enter: {
+        animation: 'fade-in',
+      },
+      leave: {
+        animation: 'wave-out',
+      },
+    });
+  });
+
+  afterAll(() => {
+    violin.destroy();
+  });
+});

__tests__/unit/plots/violin/annotation-spec.ts

@@ -0,0 +1,65 @@
+import { Violin } from '../../../../src';
+import { BASE_VIOLIN_DATA } from '../../../data/violin';
+import { createDiv } from '../../../utils/dom';
+
+describe('violin legend', () => {
+  const violin = new Violin(createDiv(), {
+    width: 400,
+    height: 500,
+    data: BASE_VIOLIN_DATA,
+    xField: 'type',
+    yField: 'value',
+  });
+
+  violin.render();
+
+  it('text annotation', () => {
+    violin.update({
+      annotations: [
+        {
+          type: 'text',
+          position: ['median', 'median'],
+          content: '辅助文本',
+        },
+      ],
+    });
+
+    const controller = violin.chart.views[0].getController('annotation');
+    expect(controller.getComponents().length).toBe(1);
+    expect(controller.getComponents()[0].component.get('content')).toBe('辅助文本');
+  });
+
+  it('text annotation and line annotation', () => {
+    violin.update({
+      ...violin.options,
+      annotations: [
+        {
+          type: 'text',
+          position: ['min', 'median'],
+          content: '辅助文本',
+          offsetY: -4,
+          style: {
+            textBaseviolin: 'bottom',
+          },
+        },
+        {
+          type: 'line',
+          start: ['min', 'median'],
+          end: ['max', 'median'],
+          style: {
+            stroke: 'red',
+            violinDash: [2, 2],
+          },
+        },
+      ],
+    });
+    const controller = violin.chart.views[0].getController('annotation');
+    expect(controller.getComponents().length).toBe(2);
+    expect(controller.getComponents()[0].component.get('content')).toBe('辅助文本');
+    expect(controller.getComponents()[1].component.get('type')).toBe('line');
+  });
+
+  afterAll(() => {
+    violin.destroy();
+  });
+});

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

@@ -0,0 +1,65 @@
+import { Violin } from '../../../../src';
+import { BASE_VIOLIN_DATA } from '../../../data/violin';
+import { createDiv } from '../../../utils/dom';
+
+describe('violin axis', () => {
+  it('没有 seriesField', () => {
+    const violin = new Violin(createDiv(), {
+      width: 400,
+      height: 500,
+      data: BASE_VIOLIN_DATA,
+      xField: 'type',
+      yField: 'value',
+    });
+
+    violin.render();
+
+    let axisController = violin.chart.views[0].getController('axis');
+    expect(axisController.getComponents().length).toBe(4);
+
+    violin.update({ xAxis: { grid: null } });
+    axisController = violin.chart.views[0].getController('axis');
+    expect(axisController.getComponents().length).toBe(3);
+
+    violin.update({ xAxis: { title: { text: 'xx' } } });
+    axisController = violin.chart.views[0].getController('axis');
+    expect(axisController.getComponents()[0].component.get('title').text).toBe('xx');
+
+    // 关闭 xAxis
+    violin.update({ xAxis: false });
+    axisController = violin.chart.views[0].getController('axis');
+    expect(axisController.getComponents().length).toBe(2);
+
+    violin.destroy();
+  });
+
+  it('有 seriesField', () => {
+    const violin = new Violin(createDiv(), {
+      width: 400,
+      height: 500,
+      data: BASE_VIOLIN_DATA,
+      xField: 'type',
+      yField: 'value',
+      seriesField: 'species',
+    });
+
+    violin.render();
+    let axisController = violin.chart.views[0].getController('axis');
+    expect(axisController.getComponents().length).toBe(4);
+
+    violin.update({ xAxis: { grid: null } });
+    axisController = violin.chart.views[0].getController('axis');
+    expect(axisController.getComponents().length).toBe(3);
+
+    violin.update({ xAxis: { title: { text: 'xx' } } });
+    axisController = violin.chart.views[0].getController('axis');
+    expect(axisController.getComponents()[0].component.get('title').text).toBe('xx');
+
+    // 关闭 xAxis
+    violin.update({ xAxis: false });
+    axisController = violin.chart.views[0].getController('axis');
+    expect(axisController.getComponents().length).toBe(2);
+
+    violin.destroy();
+  });
+});

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

@@ -0,0 +1,50 @@
+import { Violin } from '../../../../src';
+import { MIN_MAX_VIEW_ID, QUANTILE_VIEW_ID, MEDIAN_VIEW_ID } from '../../../../src/plots/violin/constant';
+import { BASE_VIOLIN_DATA } from '../../../data/violin';
+import { createDiv } from '../../../utils/dom';
+
+describe('violin', () => {
+  it('renders box views.', () => {
+    const violin = new Violin(createDiv(), {
+      width: 400,
+      height: 500,
+      data: BASE_VIOLIN_DATA,
+      xField: 'type',
+      yField: 'value',
+    });
+
+    violin.render();
+    const minMaxView = violin.chart.views.find((view) => view.id === MIN_MAX_VIEW_ID);
+    const quantileView = violin.chart.views.find((view) => view.id === QUANTILE_VIEW_ID);
+    const medianView = violin.chart.views.find((view) => view.id === MEDIAN_VIEW_ID);
+
+    expect(minMaxView.geometries[0].type).toBe('interval');
+    expect(quantileView.geometries[0].type).toBe('interval');
+    expect(medianView.geometries[0].type).toBe('point');
+
+    violin.destroy();
+  });
+
+  // 暂时不开放 box 配置
+  it("should not render box views when 'box' set to false.", () => {
+    const violin = new Violin(createDiv(), {
+      width: 400,
+      height: 500,
+      data: BASE_VIOLIN_DATA,
+      xField: 'type',
+      yField: 'value',
+      box: false,
+    });
+
+    violin.render();
+    const minMaxView = violin.chart.views.find((view) => view.id === MIN_MAX_VIEW_ID);
+    const quantileView = violin.chart.views.find((view) => view.id === QUANTILE_VIEW_ID);
+    const medianView = violin.chart.views.find((view) => view.id === MEDIAN_VIEW_ID);
+
+    expect(minMaxView).toBeUndefined();
+    expect(quantileView).toBeUndefined();
+    expect(medianView).toBeUndefined();
+
+    violin.destroy();
+  });
+});

__tests__/unit/plots/violin/change-data-spec.ts

@@ -0,0 +1,30 @@
+import { group } from '@antv/util';
+import { Violin } from '../../../../src';
+import { VIOLIN_VIEW_ID } from '../../../../src/plots/violin/constant';
+import { BASE_VIOLIN_DATA } from '../../../data/violin';
+import { createDiv } from '../../../utils/dom';
+
+describe('violin change data', () => {
+  it('renders new violins when data changed', () => {
+    const violin = new Violin(createDiv(), {
+      width: 400,
+      height: 500,
+      data: BASE_VIOLIN_DATA,
+      xField: 'type',
+      yField: 'value',
+    });
+
+    violin.render();
+    const g = violin.chart.views.find((view) => view.id === VIOLIN_VIEW_ID).geometries[0];
+    expect(g.elements.length).toBe(group(BASE_VIOLIN_DATA, 'type').length);
+
+    const newData = BASE_VIOLIN_DATA.filter((data) => data.type !== 'PetalWidth');
+
+    violin.changeData(newData);
+    const newG = violin.chart.views.find((view) => view.id === VIOLIN_VIEW_ID).geometries[0];
+    expect(violin.options.data).toEqual(newData);
+    expect(newG.elements.length).toBe(group(newData, 'type').length);
+
+    violin.destroy();
+  });
+});