feat(interaction): add scrollbarFilter

[pearmini]

Scrollbar Filter

添加 Scrollbar 交互，并且抛出数据和支持手动触发。

• close 滚动条无效bug #5142

开始使用

const chart = new Chart({
  theme: 'classic',
  paddingBottom: 120,
  width: 400,
});

chart
  .interval()
  .data([
    { date: '2001-01', value: 100 },
    { date: '2001-02', value: 400 },
    { date: '2001-03', value: 500 },
    { date: '2001-04', value: 600 },
    { date: '2001-05', value: 300 },
    { date: '2001-06', value: 600 },
    { date: '2001-07', value: 300 },
    { date: '2001-08', value: 600 },
    { date: '2001-09', value: 109 },
    { date: '2001-10', value: 100 },
    { date: '2001-11', value: 102 },
    { date: '2001-12', value: 103 },
    { date: '2002-01', value: 102 },
    { date: '2002-02', value: 101 },
    { date: '2002-03', value: 200 },
    { date: '2002-04', value: 500 },
    { date: '2002-05', value: 100 },
    { date: '2002-06', value: 100 },
    { date: '2002-07', value: 102 },
    { date: '2002-08', value: 109 },
  ])
  .encode('x', 'date')
  .encode('y', 'value')
  .axis('x', { size: 80, style: { labelTransform: 'rotate(90deg)' } })
  .scrollbar('x', { ratio: 0.25 }) // 通过 ratio 去指定暂时的数据范围，范围 [0，1]
  .scrollbar('y', { ratio: 0.75 }); // 通过 ratio 去指定暂时的数据范围，范围 [0，1]

chart.render();

触发事件

chart.emit('scrollbarX:filter', {
  data: { selection: [['2001-03'], undefined] },
});

chart.emit('scrollbarY:filter', {
  data: { selection: [undefined, [50, 550]] },
});

监听数据

chart.on('scrollbarX:filter', (event) => {
  const { data, nativeEvent } = event;
  if (nativeEvent) console.log('scrollbarX:filter', data.selection);
});

chart.on('scrollbarY:filter', (event) => {
  const { data, nativeEvent } = event;
  if (nativeEvent) console.log('scrollbarY:filter', data.selection);
});

TODO

• 代码
• 文档
• 测试