feat: violin (#2593)

* feat(violin): 添加小提琴图 (#2569)

* feat(violin): 添加小提琴图

* fix(violin): demo 的数据放到 CDN

* doc(violin): 更新截图

* fix(violin): x 轴字段用常量定义

* refactor(violin): 去除 simple-statistics 包依赖，减小体积

* fix(violin): 修复不响应用户 tooltip 选项的问题

* fix(violin): 修复小提琴图中箱线图四分位的计算问题

* fix(violin): smooth 和 hollow API 改为 shape, 重命名字段常量

* docs(violin): 优化 box.textMap 的文档和 Demo

* feat(violin): 使用 geometry 通用 adaptor, 添加格式化支持

* fix(violin): 修复 shape 通道未映射的问题

Co-authored-by: 14 <[email protected]>

* fix(violin): 修复小提琴图轴重复

* fix(violin): 修复小提琴图 axis, legend 问题

* fix(violin): 修复小提琴图单测报错

* test(violin): 增加小提琴图 legend & axis 单测

* refactor(violin): 优化小提琴图 tooltip & 移除无用 series 字段

* chore: 增大包限制到 910kb

* test(violin): 修复单测问题 & 增加单测覆盖

* feat(violin): 修改小提琴图动画和图形标注

* test(violin): 增加小提琴图 meta 单测 & 完善文档

* test(violin): 增加单测

* refactor(violin): 删除无用的配置项

* fix(violin): 暂时修复下小提琴图的 legend 问题

* docs: 优化组件文档，小提琴图没有 slider

* chore: 升级 surge-preivew

* docs: 小提琴图暂时不支持 label

* fix: 修复 violin 单测错误

* feat(violin): 小提琴图增加 box 配置

Co-authored-by: 14 <[email protected]>
Co-authored-by: 14 <[email protected]>

Author: 3 people

.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/[email protected]
+      - uses: lxfu1/[email protected] 
         id: preview_step
         with:
           project_name: 'G2Plot'

__tests__/data/violin.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/animation-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/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 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/axis-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/box-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();
+  });
+});