feat(interaction): emit element select (#5119)

__tests__/integration/api-chart-emit-element-select-single.spec.ts

@@ -0,0 +1,31 @@
+import { chartEmitElementSelectSingle as render } from '../plots/api/chart-emit-element-select-single';
+import { createNodeGCanvas } from './utils/createNodeGCanvas';
+import { sleep } from './utils/sleep';
+import { kebabCase } from './utils/kebabCase';
+import './utils/useSnapshotMatchers';
+import './utils/useCustomFetch';
+
+describe('chart.emit', () => {
+  const dir = `${__dirname}/snapshots/api/${kebabCase(render.name)}`;
+  const canvas = createNodeGCanvas(800, 500);
+
+  it('chart.on("element:select", {single: true}) should receive expected data.', async () => {
+    const { chart, finished } = render({
+      canvas,
+      container: document.createElement('div'),
+    });
+    await finished;
+    await sleep(20);
+
+    // chart.emit('element:select', options) should trigger slider.
+    chart.emit('element:select', {
+      data: { data: [{ population: 5038433 }, { population: 3983091 }] },
+    });
+    await sleep(20);
+    await expect(canvas).toMatchCanvasSnapshot(dir, 'step0');
+  });
+
+  afterAll(() => {
+    canvas?.destroy();
+  });
+});

__tests__/integration/api-chart-emit-element-select.spec.ts

@@ -0,0 +1,74 @@
+import { chartEmitElementSelect as render } from '../plots/api/chart-emit-element-select';
+import { createNodeGCanvas } from './utils/createNodeGCanvas';
+import { sleep } from './utils/sleep';
+import { kebabCase } from './utils/kebabCase';
+import {
+  createPromise,
+  dispatchFirstElementEvent,
+  dispatchPlotEvent,
+} from './utils/event';
+import './utils/useSnapshotMatchers';
+import './utils/useCustomFetch';
+
+describe('chart.emit', () => {
+  const dir = `${__dirname}/snapshots/api/${kebabCase(render.name)}`;
+  const canvas = createNodeGCanvas(800, 500);
+
+  it('chart.on("element:select") should receive expected data.', async () => {
+    const { chart, finished } = render({
+      canvas,
+      container: document.createElement('div'),
+    });
+    await finished;
+    await sleep(20);
+
+    // chart.emit('element:select', options) should trigger slider.
+    chart.emit('element:select', {
+      data: { data: [{ population: 5038433 }, { population: 3983091 }] },
+    });
+    await sleep(20);
+    await expect(canvas).toMatchCanvasSnapshot(dir, 'step0');
+
+    // chart.emit('element:unselect', options) should reset.
+    chart.emit('element:unselect', {});
+    await sleep(20);
+    await expect(canvas).toMatchCanvasSnapshot(dir, 'step1');
+
+    chart.off();
+
+    // chart.on("element:unselect") should be called.
+    const [unselect, resolveUnselect] = createPromise();
+    chart.on('element:unselect', (event) => {
+      if (!event.nativeEvent) return;
+      resolveUnselect();
+    });
+    dispatchPlotEvent(canvas, 'click');
+    await sleep(20);
+    await unselect;
+
+    // chart.on("element:select") should receive expected data.
+    const [select, resolveHighlight] = createPromise();
+    chart.on('element:select', (event) => {
+      if (!event.nativeEvent) return;
+      expect(event.data.data).toEqual([
+        { age: '<10', population: 5038433, state: 'CA' },
+        { age: '10-19', population: 5170341, state: 'CA' },
+        { age: '20-29', population: 5809455, state: 'CA' },
+        { age: '30-39', population: 5354112, state: 'CA' },
+        { age: '40-49', population: 5179258, state: 'CA' },
+        { age: '50-59', population: 5042094, state: 'CA' },
+        { age: '60-69', population: 3737461, state: 'CA' },
+        { age: '70-79', population: 2011678, state: 'CA' },
+        { age: '≥80', population: 1311374, state: 'CA' },
+      ]);
+      resolveHighlight();
+    });
+    dispatchFirstElementEvent(canvas, 'click');
+    await sleep(20);
+    await select;
+  });
+
+  afterAll(() => {
+    canvas?.destroy();
+  });
+});

__tests__/plots/api/chart-emit-element-select-single.ts

@@ -0,0 +1,74 @@
+import { Chart } from '../../../src';
+
+export function chartEmitElementSelectSingle(context) {
+  const { container, canvas } = context;
+
+  // button
+  const button = document.createElement('button');
+  button.innerText = 'Select';
+  container.appendChild(button);
+
+  const button1 = document.createElement('button');
+  button1.innerText = 'reset';
+  container.appendChild(button1);
+
+  // wrapperDiv
+  const wrapperDiv = document.createElement('div');
+  container.appendChild(wrapperDiv);
+
+  const chart = new Chart({
+    theme: 'classic',
+    container: wrapperDiv,
+    padding: 'auto',
+    canvas,
+  });
+
+  chart.options({
+    type: 'interval',
+    transform: [
+      { type: 'sortX', by: 'y', reverse: true, reducer: 'sum', slice: 6 },
+      { type: 'dodgeX' },
+    ],
+    data: {
+      type: 'fetch',
+      value: 'data/stateages.csv',
+    },
+    encode: {
+      x: 'state',
+      y: 'population',
+      color: 'age',
+    },
+    state: {
+      selected: { fill: 'red' },
+      unselected: { opacity: 0.6 },
+    },
+    interaction: {
+      elementSelectByX: { delay: 0, single: true },
+      tooltip: false,
+    },
+  });
+
+  const finished = chart.render();
+
+  chart.on('element:select', (event) => {
+    const { data, nativeEvent } = event;
+    if (nativeEvent) console.log('element:select', data);
+  });
+
+  chart.on('element:unselect', (event) => {
+    const { nativeEvent } = event;
+    if (nativeEvent) console.log('reset');
+  });
+
+  button.onclick = () => {
+    chart.emit('element:select', {
+      data: { data: [{ population: 5038433 }, { population: 3983091 }] },
+    });
+  };
+
+  button1.onclick = () => {
+    chart.emit('element:unselect', {});
+  };
+
+  return { chart, finished };
+}

__tests__/plots/api/chart-emit-element-select.ts

@@ -0,0 +1,74 @@
+import { Chart } from '../../../src';
+
+export function chartEmitElementSelect(context) {
+  const { container, canvas } = context;
+
+  // button
+  const button = document.createElement('button');
+  button.innerText = 'Select';
+  container.appendChild(button);
+
+  const button1 = document.createElement('button');
+  button1.innerText = 'reset';
+  container.appendChild(button1);
+
+  // wrapperDiv
+  const wrapperDiv = document.createElement('div');
+  container.appendChild(wrapperDiv);
+
+  const chart = new Chart({
+    theme: 'classic',
+    container: wrapperDiv,
+    padding: 'auto',
+    canvas,
+  });
+
+  chart.options({
+    type: 'interval',
+    transform: [
+      { type: 'sortX', by: 'y', reverse: true, reducer: 'sum', slice: 6 },
+      { type: 'dodgeX' },
+    ],
+    data: {
+      type: 'fetch',
+      value: 'data/stateages.csv',
+    },
+    encode: {
+      x: 'state',
+      y: 'population',
+      color: 'age',
+    },
+    state: {
+      selected: { fill: 'red' },
+      unselected: { opacity: 0.6 },
+    },
+    interaction: {
+      elementSelectByX: { delay: 0 },
+      tooltip: false,
+    },
+  });
+
+  const finished = chart.render();
+
+  chart.on('element:select', (event) => {
+    const { data, nativeEvent } = event;
+    if (nativeEvent) console.log('element:select', data);
+  });
+
+  chart.on('element:unselect', (event) => {
+    const { nativeEvent } = event;
+    if (nativeEvent) console.log('reset');
+  });
+
+  button.onclick = () => {
+    chart.emit('element:select', {
+      data: { data: [{ population: 5038433 }, { population: 3983091 }] },
+    });
+  };
+
+  button1.onclick = () => {
+    chart.emit('element:unselect', {});
+  };
+
+  return { chart, finished };
+}

__tests__/plots/api/index.ts

@@ -27,3 +27,5 @@ export { chartRenderBrushEnd } from './chart-render-brush-end';
 export { chartChangeDataEmpty } from './chart-change-data-empty';
 export { chartEmitSliderFilter } from './chart-emit-slider-filter';
 export { chartEmitElementHighlight } from './chart-emit-element-highlight';
+export { chartEmitElementSelect } from './chart-emit-element-select';
+export { chartEmitElementSelectSingle } from './chart-emit-element-select-single';

site/docs/spec/interaction/elementSelect.zh.md

@@ -42,3 +42,29 @@ chart.render();
 | offset                    | 主方向的偏移量 | `number`     | 0      |
 | `background${StyleAttrs}` | 背景的样式     | `StyleAttrs` | -      |
 | single                    | 是否单选       | `boolean`    | false  |
+
+## 案例
+
+### 获得数据
+
+```js
+chart.on('element:select', (event) => {
+  const { data, nativeEvent } = event;
+  if (nativeEvent) console.log('element:select', data);
+});
+
+chart.on('element:unselect', (event) => {
+  const { nativeEvent } = event;
+  if (nativeEvent) console.log('reset');
+});
+```
+
+### 触发交互
+
+```js
+chart.emit('element:select', {
+  data: { data: [{ population: 5038433 }, { population: 3983091 }] },
+});
+
+chart.emit('element:unselect', {});
+```