fix: ci

__tests__/integration/api-chart-on-focus-context.spec.ts

@@ -4,12 +4,13 @@ import {
   brush,
   dragMask,
 } from '../plots/interaction/penguins-point-brush';
+import { PLOT_CLASS_NAME } from '../../src';
 import { createNodeGCanvas } from './utils/createNodeGCanvas';
 import { kebabCase } from './utils/kebabCase';
-import './utils/useSnapshotMatchers';
-import { PLOT_CLASS_NAME } from '../../src';
 import { sleep } from './utils/sleep';
+import './utils/useSnapshotMatchers';
 import './utils/useCustomFetch';
+import { createPromise } from './utils/event';
 
 function plotOf(canvas) {
   const { document } = canvas;
@@ -22,13 +23,13 @@ describe('chart.on', () => {
   const canvas1 = createNodeGCanvas(640, 360);
   const canvas2 = createNodeGCanvas(640, 80);
   const assetSnapshots = async (step) => {
-    await sleep(100);
+    await sleep(20);
     await expect(canvas1).toMatchCanvasSnapshot(dir, step + '-focus');
     await expect(canvas2).toMatchCanvasSnapshot(dir, step + '-context');
   };
 
   it('chart.on({...}) should enables different charts to communicate.', async () => {
-    const { focused, contexted } = render({
+    const { focused, contexted, focusView } = render({
       canvas1,
       canvas2,
       container: document.createElement('div'),
@@ -40,11 +41,17 @@ describe('chart.on', () => {
     const contextPlot = plotOf(canvas2);
 
     // Brush context view.
+    const [p1, r1] = createPromise();
+    focusView.on('brush:filter', () => r1());
     brush(focusPlot, 100, 100, 300, 300);
+    await p1;
     await assetSnapshots('step0');
 
     // Brush context view again.
+    const [p2, r2] = createPromise();
+    focusView.on('brush:filter', () => r2());
     brush(focusPlot, 200, 200, 400, 400);
+    await p2;
     await assetSnapshots('step1');
 
     // Drag focus view.
@@ -56,7 +63,10 @@ describe('chart.on', () => {
     await assetSnapshots('step3');
 
     // Brush focus view.
+    const [p3, r3] = createPromise();
+    focusView.on('brush:filter', () => r3());
     brush(focusPlot, 30, 30, 180, 180);
+    await p3;
     await assetSnapshots('step4');
 
     // Drag focus view.

__tests__/plots/api/chart-on-focus-context.ts

@@ -69,13 +69,16 @@ export function chartOnFocusContext(context) {
     }
   });
 
-  contextView.on('brush:highlight brush:end', (e) => {
-    const { nativeEvent } = e;
+  contextView.on('brush:highlight', (e) => {
+    const { nativeEvent, data } = e;
     if (!nativeEvent) return;
+    const { selection } = data;
+    focusView.emit('brush:filter', { data: { selection } });
+  });
+
+  contextView.on('brush:end', () => {
     const { x: scaleX, y: scaleY } = contextView.getScale();
-    const selection = e.data
-      ? e.data.selection
-      : [scaleX.getOptions().domain, scaleY.getOptions().domain];
+    const selection = [scaleX.getOptions().domain, scaleY.getOptions().domain];
     focusView.emit('brush:filter', { data: { selection } });
   });
 

site/examples/interaction/interaction/demo/focus-context.ts

@@ -70,12 +70,15 @@ focus.on('brush:filter', (e) => {
   }
 });
 
-context.on('brush:highlight brush:end', (e) => {
-  const { nativeEvent } = e;
+context.on('brush:highlight', (e) => {
+  const { nativeEvent, data } = e;
   if (!nativeEvent) return;
+  const { selection } = data;
+  focus.emit('brush:filter', { data: { selection } });
+});
+
+context.on('brush:end', () => {
   const { x: scaleX, y: scaleY } = context.getScale();
-  const selection = e.data
-    ? e.data.selection
-    : [scaleX.getOptions().domain, scaleY.getOptions().domain]; // Rest data.
+  const selection = [scaleX.getOptions().domain, scaleY.getOptions().domain];
   focus.emit('brush:filter', { data: { selection } });
 });

src/api/chart.ts

@@ -272,8 +272,7 @@ export class Chart extends View<ChartOptions> {
   }
 
   on(event: string, callback: (...args: any[]) => any, once?: boolean): this {
-    const events = event.split(' ');
-    for (const name of events) this._emitter.on(name, callback, once);
+    this._emitter.on(event, callback, once);
     return this;
   }