fix(axis): unexpected radius in polar (#4850)

antvis · May 16, 2023 · 0458493 · 0458493
1 parent 7860a7e
commit 0458493
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 1 deletion.
diff --git a/__tests__/integration/snapshots/static/scoreByItemAreaRadarSize.png b/__tests__/integration/snapshots/static/scoreByItemAreaRadarSize.png
diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts
@@ -190,3 +190,4 @@ export { soldIntervalCustomShape } from './sold-interval-custom-shape';
 export { gaugeDefault } from './gauge-default';
 export { gaugeCustomColor } from './gauge-custom-color';
 export { gaugeCustomShape } from './gauge-custom-shape';
+export { scoreByItemAreaRadarSize } from './score-by-item-area-radar-size';
diff --git a/__tests__/plots/static/score-by-item-area-radar-size.ts b/__tests__/plots/static/score-by-item-area-radar-size.ts
@@ -0,0 +1,40 @@
+import { G2Spec } from '../../../src';
+import { scoreByItem } from '../../data/score-by-item';
+
+export function scoreByItemAreaRadarSize(): G2Spec {
+  return {
+    type: 'view',
+    data: scoreByItem,
+    width: 400,
+    height: 600,
+    coordinate: { type: 'polar' },
+    axis: {
+      x: { grid: true },
+      y: {
+        zIndex: 1,
+        title: false,
+        direction: 'center',
+        style: {
+          gridStrokeWidth: 10,
+        },
+      },
+    },
+    scale: {
+      x: { padding: 0.5, align: 0 },
+      y: { tickCount: 5, domainMax: 80 },
+    },
+    legend: { color: { layout: { justifyContent: 'flex-start' } } },
+    children: [
+      {
+        type: 'area',
+        encode: { x: 'item', y: 'score', color: 'type' },
+        style: { fillOpacity: 0.5 },
+      },
+      {
+        type: 'line',
+        encode: { x: 'item', y: 'score', color: 'type' },
+        style: { lineWidth: 2 },
+      },
+    ],
+  };
+}
diff --git a/src/component/axis.ts b/src/component/axis.ts
@@ -313,7 +313,7 @@ function inferAxisLinearOverrideStyle(
       const [cx, cy] = coordinate.getCenter();
       const [innerRadius, outerRadius] = radiusOf(coordinate);
       const [startAngle, endAngle] = angleOf(coordinate);
-      const r = height / 2;
+      const r = Math.min(width, height) / 2;
 
       const innerR = innerRadius * r;
       const outerR = outerRadius * r;