fix(inset): relative position for text in polar (#5223)

antvis · Jun 25, 2023 · 567717b · 567717b
1 parent 0194cae
commit 567717b
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 3 deletions.
diff --git a/...integration/snapshots/static/population2015IntervalDonutTextAnnotationInset.png b/...integration/snapshots/static/population2015IntervalDonutTextAnnotationInset.png
diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts
@@ -261,3 +261,4 @@ export { disastersPointBubbleLegendRight } from './disasters-point-bubble-legend
 export { mockLegendColor } from './mock-legend-color';
 export { mockLegendColorSize } from './mock-legend-color-size';
 export { weatherLineMultiAxesLegend } from './weather-line-multi-axes-legend';
+export { population2015IntervalDonutTextAnnotationInset } from './population2015-interval-donut-text-annotation-inset';
diff --git a/__tests__/plots/static/population2015-interval-donut-text-annotation-inset.ts b/__tests__/plots/static/population2015-interval-donut-text-annotation-inset.ts
@@ -0,0 +1,61 @@
+import { G2Spec } from '../../../src';
+
+export function population2015IntervalDonutTextAnnotationInset(): G2Spec {
+  return {
+    type: 'view',
+    height: 640,
+    inset: 50,
+    coordinate: { type: 'theta', innerRadius: 0.6 },
+    style: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
+    children: [
+      {
+        type: 'interval',
+        data: {
+          type: 'fetch',
+          value: 'data/population2015.csv',
+        },
+        transform: [{ type: 'stackY' }],
+        scale: {
+          color: {
+            palette: 'spectral',
+            offset: (t) => t * 0.8 + 0.1,
+          },
+        },
+        legend: false,
+        encode: {
+          y: 'value',
+          color: 'name',
+        },
+      },
+      {
+        type: 'text',
+        style: {
+          text: 'Donut',
+          // Relative position.
+          x: '50%',
+          y: '50%',
+          fontSize: 40,
+          textAlign: 'center',
+          fontWeight: 'bold',
+        },
+      },
+      {
+        type: 'text',
+        style: {
+          text: 'chart',
+          // Absolute position.
+          x: 290,
+          y: 320,
+          fontSize: 20,
+          textAlign: 'center',
+          fontWeight: 'bold',
+        },
+      },
+    ],
+  };
+}
diff --git a/src/mark/utils.ts b/src/mark/utils.ts
@@ -102,12 +102,12 @@ export function p(d) {
 
 export function visualMark(index: number[], scale, value, coordinate) {
   const { x: X, y: Y } = value;
-  const { width, height } = coordinate.getOptions();
+  const { innerWidth, innerHeight } = coordinate.getOptions();
   const P: Vector2[][] = Array.from(index, (i) => {
     const x0 = X[i];
     const y0 = Y[i];
-    const x = typeof x0 === 'string' ? p(x0) * width : +x0;
-    const y = typeof y0 === 'string' ? p(y0) * height : +y0;
+    const x = typeof x0 === 'string' ? p(x0) * innerWidth : +x0;
+    const y = typeof y0 === 'string' ? p(y0) * innerHeight : +y0;
     return [[x, y]];
   });
   return [index, P];