feat: multiview 支持 multi-plots && 支持 association 🎉🎉🎉

__tests__/unit/adaptor/geometries/interval-spec.ts

@@ -59,4 +59,17 @@ describe('adaptor - interval', () => {
     plot.update({ columnBackground: null });
     expect(plot.chart.geometries[0].elements[0].shape.isGroup()).toBe(false);
   });
+
+  it('column-width', () => {
+    const plot = getPlot();
+
+    plot.update({
+      minColumnWidth: 20,
+      maxColumnWidth: 20,
+    });
+    const elements = plot.chart.geometries[0].elements;
+    expect(elements.length).toBe(2);
+    expect(elements[0].shape.getCanvasBBox().width).toBe(20);
+    expect(elements[1].shape.getCanvasBBox().width).toBe(20);
+  });
 });

__tests__/unit/plots/multi-view/interactions/association-spec.ts

@@ -0,0 +1,217 @@
+import { registerInteraction } from '@antv/g2';
+import { MultiView } from '../../../../../src';
+import { createDiv } from '../../../../utils/dom';
+
+describe('assocation between views in multi-view plot', () => {
+  const data = [
+    { type: '1', value: 123 },
+    { type: '2', value: 41 },
+  ];
+  const div = createDiv();
+  const plot = new MultiView(div, {
+    width: 400,
+    height: 200,
+    autoFit: false,
+    tooltip: false,
+    plots: [
+      {
+        type: 'pie',
+        region: { start: { x: 0, y: 0 }, end: { x: 0.45, y: 1 } },
+        options: {
+          data: [...data, { type: '4', value: 41 }],
+          angleField: 'value',
+          colorField: 'type',
+          tooltip: {},
+          interactions: [
+            { type: 'association-active' },
+            { type: 'association-highlight' },
+            { type: 'association-tooltip' },
+          ],
+        },
+      },
+      {
+        type: 'pie',
+        region: { start: { x: 0.5, y: 0 }, end: { x: 1, y: 1 } },
+        options: {
+          data: [...data, { type: '3', value: 41 }],
+          angleField: 'value',
+          colorField: 'type',
+          tooltip: {},
+          interactions: [{ type: 'association-active' }, { type: 'association-selected' }],
+        },
+      },
+      {
+        type: 'line',
+        options: {
+          data: [
+            { date: '02-12', value: 12, type: '1' },
+            { date: '02-12', value: 124, type: '2' },
+            { date: '02-13', value: 22, type: '1' },
+            { date: '02-13', value: 94, type: '2' },
+          ],
+          xField: 'date',
+          yField: 'value',
+          seriesField: 'type',
+        },
+      },
+      {
+        type: 'column',
+        options: {
+          data,
+          xField: 'type',
+          yField: 'value',
+          seriesField: 'type',
+        },
+      },
+    ],
+  });
+
+  plot.render();
+  let view1 = plot.chart.views[0];
+  let view2 = plot.chart.views[1];
+  let view3 = plot.chart.views[2];
+
+  it('association: active & highlight & selected', async () => {
+    const shape11 = view1.geometries[0].elements[0].shape;
+    view1.emit('element:mouseenter', { target: shape11, data: { data: data[0] } });
+    expect(view1.geometries[0].elements[0].getStates()).toMatchObject(['active']);
+    expect(view2.geometries[0].elements[0].getStates()).toMatchObject(['active']);
+    expect(view1.geometries[0].elements[1].getStates()).toMatchObject(['inactive']);
+    expect(view2.geometries[0].elements[1].getStates()).toMatchObject(['inactive']);
+
+    view1.emit('element:mouseleave', {});
+    expect(view1.geometries[0].elements[0].getStates()).toMatchObject([]);
+    expect(view2.geometries[0].elements[0].getStates()).toMatchObject([]);
+    expect(view1.geometries[0].elements[1].getStates()).toMatchObject([]);
+    expect(view2.geometries[0].elements[1].getStates()).toMatchObject([]);
+
+    view2.emit('element:mouseenter', { target: view2.geometries[0].elements[0].shape, data: { data: data[0] } });
+    expect(view1.geometries[0].elements[0].getStates()).toMatchObject(['active', 'selected']);
+    expect(view2.geometries[0].elements[0].getStates()).toMatchObject(['active', 'selected']);
+
+    view2.emit('element:mouseleave', {});
+    view2.emit('element:mouseenter', {
+      target: view2.geometries[0].elements[2].shape,
+      data: { data: { type: '3', value: 41 } },
+    });
+    expect(view1.geometries[0].elements[2].getStates()).not.toMatchObject(['active']);
+    expect(view1.geometries[0].elements[2].getStates()).not.toMatchObject(['selected']);
+    expect(view2.geometries[0].elements[2].getStates()).toMatchObject(['active', 'selected']);
+    view2.emit('element:mouseleave', {});
+  });
+
+  it('association: with action args', () => {
+    const shape11 = view1.geometries[0].elements[0].shape;
+    view1.emit('element:mouseenter', { target: shape11, data: { data: data[0] } });
+    expect(view1.geometries[0].elements[0].getStates()).toMatchObject(['active']);
+    expect(view3.geometries[0].elements[0].getStates()).toMatchObject(['active']);
+    view1.emit('element:mouseleave', {});
+
+    const plots = plot.options.plots;
+    // @ts-ignore
+    plots[0].options.interactions = [
+      {
+        // 联动交互只作用在 x 字段上
+        type: 'association-active',
+        cfg: {
+          start: [
+            { trigger: 'element:mouseenter', action: 'association:active', arg: { dim: 'x', linkField: 'type' } },
+          ],
+        },
+      },
+    ];
+    plot.update({ plots });
+    view1 = plot.chart.views[0];
+    view2 = plot.chart.views[1];
+    view3 = plot.chart.views[2];
+
+    view1.emit('element:mouseenter', {
+      target: view1.geometries[0].elements[0].shape,
+      data: { data: data[0] },
+    });
+    expect(view1.geometries[0].elements[0].getStates()).toMatchObject(['active']);
+    expect(view2.geometries[0].elements[0].getStates()).toMatchObject(['active']);
+    expect(view3.geometries[0].elements[0].getStates()).not.toMatchObject(['active']);
+    expect(plot.chart.views[3].geometries[0].elements[0].getStates()).toMatchObject(['active']);
+    view1.emit('element:mouseleave', {});
+
+    // @ts-ignore
+    plots[0].options.interactions = [
+      {
+        // 联动交互只作用在 x 字段上
+        type: 'association-active',
+        cfg: {
+          start: [
+            { trigger: 'element:mouseenter', action: 'association:active', arg: { dim: 'y', linkField: 'type1' } },
+          ],
+        },
+      },
+    ];
+    plot.update({ plots });
+    view1 = plot.chart.views[0];
+    view2 = plot.chart.views[1];
+    view3 = plot.chart.views[2];
+
+    view1.emit('element:mouseenter', {
+      target: view1.geometries[0].elements[0].shape,
+      data: { data: data[0] },
+    });
+    expect(view1.geometries[0].elements[0].getStates()).not.toMatchObject(['active']);
+    expect(view2.geometries[0].elements[0].getStates()).not.toMatchObject(['active']);
+    expect(view3.geometries[0].elements[0].getStates()).not.toMatchObject(['active']);
+    expect(plot.chart.views[3].geometries[0].elements[0].getStates()).not.toMatchObject(['active']);
+    view1.emit('element:mouseleave', {});
+  });
+
+  it('register-action', () => {
+    registerInteraction('association', {
+      start: [
+        { trigger: 'element:mouseenter', action: 'association:active' },
+        { trigger: 'element:mousemove', action: 'association:highlight', arg: { dim: 'x', linkField: 'type' } },
+        { trigger: 'element:mouseenter', action: 'association:showTooltip', arg: { dim: 'x', linkField: 'type' } },
+      ],
+      end: [
+        { trigger: 'element:mouseleave', action: 'association:hideTooltip' },
+        { trigger: 'element:mouseleave', action: 'association:reset' },
+      ],
+    });
+
+    const plots = plot.options.plots;
+    // @ts-ignore
+    plots[0].options.interactions = [{ type: 'association' }];
+    plot.update({ plots });
+    view1 = plot.chart.views[0];
+    view2 = plot.chart.views[1];
+    view3 = plot.chart.views[2];
+    const view4 = plot.chart.views[3];
+
+    view1.emit('element:mouseenter', {
+      target: view1.geometries[0].elements[0].shape,
+      data: { data: data[0] },
+    });
+    expect(view1.geometries[0].elements[0].getStates()).toMatchObject(['active']);
+    expect(view2.geometries[0].elements[0].getStates()).toMatchObject(['active']);
+    expect(view3.geometries[0].elements[0].getStates()).toMatchObject(['active']);
+    expect(view4.geometries[0].elements[0].getStates()).toMatchObject(['active']);
+    view1.emit('element:mouseleave', {});
+
+    view1.emit('element:mousemove', {
+      target: view1.geometries[0].elements[0].shape,
+      data: { data: data[0] },
+    });
+    expect(view1.geometries[0].elements[1].getStates()).toMatchObject([]);
+    expect(view2.geometries[0].elements[1].getStates()).toMatchObject([]);
+
+    // view3 在 x 字段上没有关联
+    expect(view3.geometries[0].elements[0].getStates()).toMatchObject(['inactive']);
+    expect(view3.geometries[0].elements[1].getStates()).toMatchObject(['inactive']);
+    // view4 关联高亮
+    expect(view4.geometries[0].elements[0].getStates()).not.toMatchObject(['inactive']);
+    expect(view4.geometries[0].elements[1].getStates()).toMatchObject(['inactive']);
+    view1.emit('element:mouseleave', {});
+  });
+
+  afterAll(() => {
+    plot.destroy();
+  });
+});

__tests__/unit/plots/multi-view/multi-plots-spec.ts

@@ -0,0 +1,93 @@
+import { MultiView } from '../../../../src/plots/multi-view';
+import { createDiv } from '../../../utils/dom';
+import { DEFAULT_OPTIONS as pieDft } from '../../../../src/plots/pie/contants';
+
+describe('multi-plots in multi-view', () => {
+  const plot = new MultiView(createDiv(), {
+    plots: [
+      {
+        type: 'line',
+        options: {
+          data: [
+            { x: 'x', y: 1 },
+            { x: 'x1', y: 20 },
+          ],
+          xField: 'x',
+          yField: 'y',
+        },
+      },
+      {
+        type: 'pie',
+        options: {
+          data: [
+            { x: 'x', y: 1 },
+            { x: 'x1', y: 20 },
+          ],
+          angleField: 'y',
+          colorField: 'x',
+        },
+      },
+    ],
+  });
+
+  plot.render();
+
+  it('normal', () => {
+    expect(plot.chart.views.length).toBe(2);
+    expect(plot.chart.views[0].geometries[0].getShapes()[0].get('type')).toBe('path');
+    expect(plot.chart.views[1].geometries[0].getShapes()[0].get('type')).toBe('path');
+    expect(plot.chart.views[0].geometries[0].elements.length).toBe(1);
+    expect(plot.chart.views[1].geometries[0].elements.length).toBe(2);
+    expect(plot.chart.views[1].getOptions().tooltip).toMatchObject(pieDft.tooltip);
+  });
+
+  it('innormal, 带不合法的 plot type', () => {
+    plot.update({
+      // @ts-ignore `pass illegal type`
+      plots: [
+        ...plot.options.plots,
+        {
+          type: 'xxx',
+          options: {
+            data: [
+              { x: 'x', y: 1 },
+              { x: 'x1', y: 20 },
+            ],
+            xField: 'x',
+            yField: 'y',
+          },
+        },
+      ],
+    });
+
+    expect(plot.chart.views.length).toBe(3);
+    expect(plot.chart.views[2].geometries.length).toBe(0);
+  });
+
+  it('plots 混合 views', () => {
+    plot.update({
+      tooltip: { showMarkers: false },
+      views: [
+        {
+          data: [
+            { x: 'x', y: 1 },
+            { x: 'x1', y: 20 },
+          ],
+          geometries: [{ type: 'area', xField: 'x', yField: 'y', mapping: {} }],
+        },
+        {
+          data: [],
+          geometries: [{ type: 'interval' }],
+        },
+      ],
+    });
+    expect(plot.chart.views.length).toBe(5);
+    // 先渲染 view，再渲染 plots
+    expect(plot.chart.views[0].geometries[0].type).toBe('area');
+    expect(plot.chart.views[1].geometries.length).toBe(0);
+  });
+
+  afterAll(() => {
+    plot.destroy();
+  });
+});

__tests__/unit/plots/multi-view/tooltip-spec.ts

@@ -0,0 +1,65 @@
+import { MultiView } from '../../../../src/plots/multi-view';
+import { createDiv } from '../../../utils/dom';
+
+describe('multi-view tooltip', () => {
+  const plot = new MultiView(createDiv(), {
+    tooltip: { showMarkers: false },
+    plots: [
+      {
+        type: 'line',
+        options: {
+          data: [
+            { x: 'x', y: 1 },
+            { x: 'x1', y: 20 },
+          ],
+          xField: 'x',
+          yField: 'y',
+        },
+      },
+      {
+        type: 'pie',
+        options: {
+          data: [
+            { x: 'x', y: 1 },
+            { x: 'x1', y: 20 },
+          ],
+          angleField: 'y',
+          colorField: 'x',
+        },
+      },
+    ],
+  });
+
+  plot.render();
+
+  it('setting tooltip to sub-views works', () => {
+    // @ts-ignore
+    expect(plot.chart.getController('tooltip').visible).toBe(true);
+    // @ts-ignore
+    expect(plot.chart.getController('tooltip').getTooltipCfg().showMarkers).toBe(false);
+
+    plot.update({
+      tooltip: false,
+      views: [
+        {
+          data: [
+            { x: 'x', y: 1 },
+            { x: 'x1', y: 20 },
+          ],
+          tooltip: { showCrosshairs: false },
+          geometries: [{ type: 'area', xField: 'x', yField: 'y', mapping: {} }],
+        },
+      ],
+    });
+
+    expect(plot.chart.views.length).toBe(3);
+    // @ts-ignore
+    expect(plot.chart.getController('tooltip').isVisible()).toBe(false);
+    // @ts-ignore
+    expect(plot.chart.views[0].getController('tooltip').getTooltipCfg().showCrosshairs).toBe(false);
+  });
+
+  afterAll(() => {
+    plot.destroy();
+  });
+});