feat(tooltip): 调整snap和辅助线渲染顺序,并使得snap可自动设置填充色 (#1459)

antvis · Apr 28, 2022 · 46fb275 · 46fb275
1 parent a46d888
commit 46fb275
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 10 deletions.
diff --git a/packages/f2/src/components/tooltip/tooltipView.tsx b/packages/f2/src/components/tooltip/tooltipView.tsx
@@ -371,6 +371,16 @@ export default class TooltipView extends Component {
           {showTooltipMarker ? (
             <RenderItemMarker coord={coord} context={context} records={records} />
           ) : null}
+          {/* 辅助线 */}
+          {showCrosshairs ? (
+            <RenderCrosshairs
+              chart={chart}
+              coord={coord}
+              records={records}
+              crosshairsType={crosshairsType}
+              crosshairsStyle={{...defaultStyle.crosshairsStyle, ...crosshairsStyle}}
+            />
+          ) : null}
           {/* 辅助点 */}
           {snap
             ? records.map((item) => {
@@ -382,23 +392,14 @@ export default class TooltipView extends Component {
                       y,
                       r: '6px',
                       stroke: color,
+                      fill: color,
                       ...shape,
                       ...tooltipMarkerStyle,
                     }}
                   />
                 );
               })
             : null}
-          {/* 辅助线 */}
-          {showCrosshairs ? (
-            <RenderCrosshairs
-              chart={chart}
-              coord={coord}
-              records={records}
-              crosshairsType={crosshairsType}
-              crosshairsStyle={{...defaultStyle.crosshairsStyle, ...crosshairsStyle}}
-            />
-          ) : null}
         </group>
         {/* X 轴辅助信息 */}
         {showXTip && (

diff --git a/...__image_snapshots__/radar-test-tsx-雷达图-面积雷达图-雷达图交互：选中维度的-snap-点设置不同色-1-snap.png b/...__image_snapshots__/radar-test-tsx-雷达图-面积雷达图-雷达图交互：选中维度的-snap-点设置不同色-1-snap.png
diff --git a/packages/f2/test/components/line/radar.test.tsx b/packages/f2/test/components/line/radar.test.tsx
@@ -113,6 +113,34 @@ const data1 = [
   },
 ];
 
+const data2 = [
+  ...data1,
+  {
+    time: '10-01',
+    value: 15380,
+    name: '本店',
+  },
+  {
+    time: '12-02',
+    value: 13661,
+    name: '本店',
+  },
+  {
+    time: '12-03',
+    value: 16054,
+    name: '本店',
+  },
+  {
+    time: '12-04',
+    value: 12345,
+    name: '本店',
+  },
+  {
+    time: '12-05',
+    value: 11345,
+    name: '本店',
+  },  
+];
 describe('雷达图', () => {
   describe('面积雷达图', () => {
     it('面积雷达图图', async () => {
@@ -221,5 +249,34 @@ describe('雷达图', () => {
       await delay(1000);
       expect(context).toMatchImageSnapshot();
     });
+
+    it('雷达图交互：选中维度的 snap 点设置不同色', async () => {
+      const context = createContext('雷达图交互：选中维度的 snap 点设置不同色');
+      const { props } = (
+        <Canvas context={context} pixelRatio={1}>
+          <Chart data={data2} coord="polar">
+            <Axis field="time" grid="line" />
+            <Axis field="value" grid="line" style={{ label: null }} />
+            <Line x="time" y="value" color="name" />
+            <Point x="time" y="value" color="name" />
+            <Tooltip custom={true} alwaysShow defaultItem={data2[0]} snap showCrosshairs 
+                // tooltipMarkerStyle中不设置fill时，默认使用record 记录中color自动填充                
+                tooltipMarkerStyle = {{
+                  r: 5,
+                  stroke: '#fff',
+                  lineWidth: '4px',      
+                }}
+            />
+          </Chart>
+        </Canvas>
+      );
+
+      const canvas = new Canvas(props);
+      canvas.render();
+
+      await delay(1000);
+      expect(context).toMatchImageSnapshot();
+    });
+
   });
 });