feat(interaction): emit slider filter

[pearmini]

SliderFilter

const chart = new Chart({
  theme: 'classic',
  container: 'container',
  paddingLeft: 80,
  paddingBottom: 120,
});

chart.options({
  type: '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', y: 'value' },
  axis: { x: { size: 100, style: { labelTransform: 'rotate(90)' } } },
  slider: { x: {}, y: { labelFormatter: (d) => +d.toFixed(1) + '' } },
});

chart.render();

触发事件

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

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

监听数据

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

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