fix: radar tootip value=0 (#1769)

Co-authored-by: xuying.xu <xuying.xu@alibaba-inc.com>
antvis · Apr 10, 2023 · 0f6ec64 · 0f6ec64
1 parent 3aeaf09
commit 0f6ec64
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 6 deletions.
diff --git a/packages/f2/src/chart/index.tsx b/packages/f2/src/chart/index.tsx
@@ -248,6 +248,13 @@ class Chart<
     return geometrys[0].getSnapRecords(point, inCoordRange);
   }
 
+  getRecords(data, field) {
+    const geometrys = this.getGeometrys();
+    if (!geometrys.length) return;
+    // @ts-ignore
+    return geometrys[0].getRecords(data, field);
+  }
+
   getLegendItems(point?) {
     const geometrys = this.getGeometrys();
     if (!geometrys.length) return;

diff --git a/packages/f2/src/components/geometry/index.tsx b/packages/f2/src/components/geometry/index.tsx
@@ -597,6 +597,7 @@ class Geometry<
   getSnapRecords(point, inCoordRange?): any[] {
     const { props } = this;
     const { coord, adjust } = props;
+
     const invertPoint = coord.invertPoint(point);
     const xScale = this.getXScale();
     const yScale = this.getYScale();
@@ -650,6 +651,30 @@ class Geometry<
     return rst;
   }
 
+  getRecords(data, field = 'xfield') {
+    const records = this.flatRecords();
+    const xScale = this.getXScale();
+    const yScale = this.getYScale();
+    const { field: xField } = xScale;
+    const { field: yField } = yScale;
+    const value = data[xField];
+    const rst = [];
+
+    for (let i = 0, len = records.length; i < len; i++) {
+      const record = {
+        ...records[i],
+        xField,
+        yField,
+      };
+      const originValue = record[FIELD_ORIGIN][field === 'xfield' ? xField : yField];
+      if (originValue === value) {
+        rst.push(record);
+      }
+    }
+
+    return rst;
+  }
+
   getLegendItems() {
     const { attrController } = this;
     const colorAttr = attrController.getAttr('color');

diff --git a/packages/f2/src/components/tooltip/withTooltip.tsx b/packages/f2/src/components/tooltip/withTooltip.tsx
@@ -134,10 +134,11 @@ export default (View) => {
       if (!dataItem) return;
       const { props } = this;
       const { chart } = props;
+
       // 因为 tooltip 有可能在 geometry 之前，所以需要等 geometry render 完后再执行
       setTimeout(() => {
-        const point = chart.getPosition(dataItem);
-        this.show(point);
+        const snapRecords = chart.getRecords(dataItem, 'xfield');
+        this.showSnapRecords(snapRecords);
       }, 0);
     }
     _triggerOn = (ev) => {
@@ -155,9 +156,14 @@ export default (View) => {
 
     show(point, _ev?) {
       const { props } = this;
-      const { chart, onChange } = props;
+      const { chart } = props;
       const snapRecords = chart.getSnapRecords(point, true); // 超出边界会自动调整
       if (!snapRecords || !snapRecords.length) return;
+      this.showSnapRecords(snapRecords);
+    }
+
+    showSnapRecords(snapRecords) {
+      const { chart, onChange } = this.props;
       const legendItems = chart.getLegendItems();
       const { xField, yField } = snapRecords[0];
       const xScale = chart.getScale(xField);

diff --git a/...ents/line/__image_snapshots__/radar-test-tsx-雷达图-面积雷达图-雷达图展示-数据为-0-时-1-snap.png b/...ents/line/__image_snapshots__/radar-test-tsx-雷达图-面积雷达图-雷达图展示-数据为-0-时-1-snap.png
diff --git a/packages/f2/test/components/line/radar.test.tsx b/packages/f2/test/components/line/radar.test.tsx
@@ -1,6 +1,7 @@
 import { jsx, Canvas, Chart, Area } from '../../../src';
 import { Line, Point, Tooltip, Axis } from '../../../src/components';
 import { createContext, delay } from '../../util';
+import { clone } from '@antv/util';
 
 const data = [
   {
@@ -205,6 +206,36 @@ describe('雷达图', () => {
       expect(context).toMatchImageSnapshot();
     });
 
+    it('雷达图展示 数据为0 时', async () => {
+      const context = createContext('雷达图展示 数据为0 时');
+      let data = clone(data1);
+      data[1].value = 0;
+      const { props } = (
+        <Canvas context={context} pixelRatio={1}>
+          <Chart data={data} coord="polar">
+            <Axis field="time" grid="line" />
+            <Axis field="value" grid="line" style={{ label: null }} />
+            <Line x="time" y="value" color="name" />
+            <Tooltip
+              custom={true}
+              defaultItem={data[1]}
+              snap
+              showCrosshairs
+              crosshairsStyle={{
+                stroke: '#999',
+                lineWidth: '4px',
+              }}
+            />
+          </Chart>
+        </Canvas>
+      );
+
+      const canvas = new Canvas(props);
+      canvas.render();
+
+      await delay(1000);
+      expect(context).toMatchImageSnapshot();
+    });
     it('雷达图展示辅助线', async () => {
       const context = createContext();
       const { props } = (

diff --git a/packages/f2/test/util.ts b/packages/f2/test/util.ts
@@ -91,10 +91,18 @@ const gestureSimulator = async (dom, eventType: string, option: Option | Option[
     return;
   }
 
+  // click 事件监听原生
   if (eventType === 'click') {
-    dispatchEvent(dom, 'touchstart', touchEvent);
-    await delay(50);
-    dispatchEvent(dom, 'touchend', touchEvent);
+    const { x, y } = options[0];
+    const clientX = left + x;
+    const clientY = top + y;
+    const event = {
+      x,
+      y,
+      clientX,
+      clientY,
+    };
+    dispatchEvent(dom, 'click', event);
     return;
   }
 };