feat(interaction): support focus context

[pearmini]

Focus + Context

实现图表之间的联动。（讨论）

开始使用

通过 chart.on 和 chart.emit 去监听和触发对应的交互。通过 native 去判断是交互内部触发的事件，还是 chart.emit 触发的事件。

import { Chart } from '@antv/g2';

document.getElementById('container').innerHTML = `
<div id="focus" ></div>
<div id="context"></div>
`;

// Render focus View.
const focus = new Chart({
  container: 'focus',
  theme: 'classic',
  height: 360,
});

focus
  .area()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
  })
  .encode('x', 'date')
  .encode('y', 'close')
  .animate(false)
  .axis('x', { grid: false, title: false, tickCount: 5 })
  .axis('y', { grid: false, tickCount: 5 })
  .interaction('tooltip', false)
  .interaction('brushXFilter', true);

focus.render();

// Render context View.
const context = new Chart({
  container: 'context',
  theme: 'classic',
  paddingLeft: 40,
  paddingTop: 0,
  paddingBottom: 0,
  height: 80,
});

context
  .area()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
  })
  .encode('x', 'date')
  .encode('y', 'close')
  .animate(false)
  .axis(false)
  .interaction('tooltip', false)
  .interaction('brushXHighlight', true);

context.render();

// Add event listeners  to communicate.
focus.on('brush:filter', (e) => {
  const { nativeEvent } = e;
  if (!nativeEvent) return;
  const { selection } = e.data;
  const { x: scaleX } = focus.getScale();
  const [[x1, x2]] = selection;
  const domainX = scaleX.getOptions().domain;
  if (x1 === domainX[0] && x2 === domainX[1]) {
    context.emit('brush:remove');
  } else {
    context.emit('brush:highlight', { data: { selection } });
  }
});

context.on('brush:highlight', (e) => {
  const { nativeEvent, data } = e;
  if (!nativeEvent) return;
  const { selection } = data;
  focusView.emit('brush:filter', { data: { selection } });
});

context.on('brush:end', () => {
  const { x: scaleX, y: scaleY } = contextView.getScale();
  const selection = [scaleX.getOptions().domain, scaleY.getOptions().domain];
  focusView.emit('brush:filter', { data: { selection } });
});

未来工作

chart.off 和 chart.on 都支持同时监听多个事件，并且补全单测。

[hustcc]

chart.off 和 chart.on 都支持同时监听多个事件，并且补全单测。

这个我感觉无需这么做，简单不到哪去，反而用户用起来多了选择，和 dom 也不一样。。

[pearmini]

chart.off 和 chart.on 都支持同时监听多个事件，并且补全单测。

这个我感觉无需这么做，简单不到哪去，反而用户用起来多了选择，和 dom 也不一样。。

那我先去掉