fix: 修复 chart filter 的逻辑

packages/f2/src/chart/index.ts

@@ -322,21 +322,28 @@ class Chart extends Component implements IChart, InteractionMixin {
     });
   }
 
+  _getRenderData() {
+    const { props, state } = this;
+    const { data } = props;
+    const { filters } = state;
+    if (!filters || !Object.keys(filters).length) {
+      return data;
+    }
+    let filteredData = data;
+    each(filters, (condition, field) => {
+      if (!condition) return;
+      filteredData = filteredData.filter((record) => {
+        return condition(record[field], record);
+      });
+    });
+    return filteredData;
+  }
+
   render(): JSX.Element {
     const { props, state, layout, coord } = this;
-    const { children, data: originData } = props;
-    const { filters, zoomRange } = state;
-
-    let data = originData;
-    if (filters && Object.keys(filters).length) {
-      each(filters, (condition, field) => {
-        if (!condition) return;
-        data = data.filter((record) => {
-          return condition(record[field], record);
-        });
-      });
-      this.scaleController.changeData(data);
-    }
+    const { children } = props;
+    const { zoomRange } = state;
+    const data = this._getRenderData();
 
     return Children.map(children, (child) => {
       return Children.cloneElement(child, {

packages/f2/src/components/legend/withLegend.tsx

@@ -160,12 +160,15 @@ export default (View) => {
 
       if (position === 'left') {
         style.flexDirection = 'column';
+        style.justifyContent = 'center';
         style.width = itemMaxWidth;
         style.height = customHeight ? customHeight : layoutHeight;
       }
 
       if (position === 'right') {
         style.flexDirection = 'column';
+        style.alignItems = 'flex-start';
+        style.justifyContent = 'center';
         style.width = itemMaxWidth;
         style.height = customHeight ? customHeight : layoutHeight;
         style.left = right - itemMaxWidth;

packages/f2/test/components/legend/interval.test.tsx

@@ -0,0 +1,46 @@
+import { jsx } from '../../../src';
+import { Canvas, Chart } from '../../../src';
+import { Interval, Legend, Axis } from '../../../src/components';
+import { createContext, delay, gestureSimulator } from '../../util';
+
+const data = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 115 },
+  { genre: 'Action', sold: 120 },
+  { genre: 'Shooter', sold: 350 },
+  { genre: 'Other', sold: -110 },
+];
+
+describe('Interval', () => {
+  it('legend 点击', async () => {
+    const context = createContext();
+    const { type, props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={data}>
+          <Legend />
+          <Axis field="genre" />
+          <Axis field="sold" />
+          <Interval x="genre" y="sold" color="genre" />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    canvas.render();
+
+    await delay(800);
+    expect(context).toMatchImageSnapshot();
+
+    await gestureSimulator(context.canvas, 'click', { x: 165, y: 26 });
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
+
+    await gestureSimulator(context.canvas, 'click', { x: 109, y: 24 });
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
+
+    await gestureSimulator(context.canvas, 'click', { x: 165, y: 26 });
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
+  });
+});

packages/f2/test/components/legend/position.test.tsx → packages/f2/test/components/legend/pie.test.tsx

@@ -2,7 +2,7 @@ import { jsx } from '../../../src';
 import { Polar } from '../../../src/coord';
 import { Canvas, Chart } from '../../../src';
 import { Interval, Legend } from '../../../src/components';
-import { createContext } from '../../util';
+import { createContext, delay, gestureSimulator } from '../../util';
 
 const data = [
   {
@@ -38,11 +38,11 @@ const data = [
 ];
 
 describe('图例 - position', () => {
-  it('饼图图例 - top', () => {
+  it('饼图图例 - top', async () => {
     const context = createContext('饼图图例 - top');
     const chartRef = { current: null };
     const { type, props } = (
-      <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+      <Canvas context={context} pixelRatio={1}>
         <Chart
           ref={chartRef}
           data={data}
@@ -60,13 +60,26 @@ describe('图例 - position', () => {
 
     const canvas = new Canvas(props);
     canvas.render();
+
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
+
+    // legend click
+    await gestureSimulator(context.canvas, 'click', { x: 137, y: 44 });
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
+
+    // 反选
+    await gestureSimulator(context.canvas, 'click', { x: 137, y: 44 });
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
   });
 
-  it('饼图图例 - bottom', () => {
+  it('饼图图例 - bottom', async () => {
     const context = createContext('饼图图例 - bottom');
     const chartRef = { current: null };
     const { type, props } = (
-      <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+      <Canvas context={context} pixelRatio={1}>
         <Chart
           ref={chartRef}
           data={data}
@@ -83,13 +96,16 @@ describe('图例 - position', () => {
 
     const canvas = new Canvas(props);
     canvas.render();
+
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
   });
 
-  it('饼图图例 - left', () => {
+  it('饼图图例 - left', async () => {
     const context = createContext('饼图图例 - left');
     const chartRef = { current: null };
     const { type, props } = (
-      <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+      <Canvas context={context} pixelRatio={1}>
         <Chart
           ref={chartRef}
           data={data}
@@ -106,18 +122,21 @@ describe('图例 - position', () => {
 
     const canvas = new Canvas(props);
     canvas.render();
+
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
   });
 
-  it('饼图图例 - right', () => {
+  it('饼图图例 - right', async () => {
     const context = createContext('饼图图例 - right');
     const chartRef = { current: null };
     const { type, props } = (
-      <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+      <Canvas context={context} pixelRatio={1}>
         <Chart
           ref={chartRef}
           data={data}
           coord={{
-            type: Polar,
+            type: 'polar',
             transposed: true,
           }}
         >
@@ -129,5 +148,8 @@ describe('图例 - position', () => {
 
     const canvas = new Canvas(props);
     canvas.render();
+
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
   });
 });

packages/f2/test/components/tooltip/tooltip.test.tsx

@@ -46,7 +46,7 @@ describe('tooltip', () => {
     const canvas = new Canvas(props);
     canvas.render();
     await delay(500);
-    await gestureSimulator(context.canvas, 'press', { clientX: 170, clientY: 21 });
+    await gestureSimulator(context.canvas, 'press', { x: 170, y: 21 });
     expect(onChangeMockCallback.mock.calls.length).toBe(1); // 验证 onChange 有被调用
     expect(onChangeMockCallback.mock.calls[0][0].length).toBe(1); // 验证 onChange 参数有效
 
@@ -105,7 +105,7 @@ describe('tooltip', () => {
     const canvas = new Canvas(props);
     canvas.render();
     await delay(500);
-    await gestureSimulator(context.canvas, 'press', { clientX: -10, clientY: 21 }); // 不合理坐标范围
+    await gestureSimulator(context.canvas, 'press', { x: -10, y: 21 }); // 不合理坐标范围
     expect(onChangeMockCallback.mock.calls.length).toBe(0); // 验证 onChange 未被调用
 
     await delay(500);
@@ -217,7 +217,7 @@ describe('tooltip', () => {
     canvas.render();
 
     await delay(500);
-    await gestureSimulator(context.canvas, 'press', { clientX: 170, clientY: 21 });
+    await gestureSimulator(context.canvas, 'press', { x: 160, y: 21 });
 
     await delay(500);
     expect(context).toMatchImageSnapshot();

packages/f2/test/util.ts

@@ -19,44 +19,51 @@ const createContext = (title = '', { width = '300px', height = '225px' } = {}) =
 };
 
 const dispatchEvent = (dom: HTMLElement, eventType: string, exData) => {
-  let event = document.createEvent('event');
+  let event = new Event(eventType, { bubbles: true, cancelable: true });
   event = Object.assign(event, exData);
-  event.initEvent(eventType, true, true);
   dom.dispatchEvent(event);
 };
 
-const gestureSimulator = async (
-  dom,
-  eventType: string,
-  option: { clientX: number; clientY: number }
-) => {
-  const exData = {
-    targetTouches: [option],
-    touches: [option],
-    changedTouches: [option],
+const gestureSimulator = async (dom, eventType: string, option: { x: number; y: number }) => {
+  const { top, left } = dom.getBoundingClientRect();
+  const { x, y } = option;
+  const clientX = left + x;
+  const clientY = top + y;
+  const event = {
+    x,
+    y,
+    clientX,
+    clientY,
+  };
+
+  const touchEvent = {
+    ...event,
+    targetTouches: [event],
+    touches: [event],
+    changedTouches: [event],
   };
 
   if (['touchstart', 'touchmove', 'touchend'].indexOf(eventType) !== -1) {
-    dispatchEvent(dom, eventType, exData);
+    dispatchEvent(dom, eventType, touchEvent);
     return;
   }
 
   if (eventType === 'press') {
-    dispatchEvent(dom, 'touchstart', exData);
+    dispatchEvent(dom, 'touchstart', touchEvent);
     await delay(270);
-    dispatchEvent(dom, 'touchend', exData);
+    dispatchEvent(dom, 'touchend', touchEvent);
     return;
   }
 
   if (eventType === 'tap') {
-    dispatchEvent(dom, 'touchstart', exData);
+    dispatchEvent(dom, 'touchstart', touchEvent);
     await delay(50);
-    dispatchEvent(dom, 'touchend', exData);
+    dispatchEvent(dom, 'touchend', touchEvent);
     return;
   }
 
   if (eventType === 'click') {
-    dispatchEvent(dom, 'click', option);
+    dispatchEvent(dom, 'click', event);
     return;
   }
 };