fix(Axis): 坐标轴文本超界自动对齐 (#1918)

antvis · Jan 3, 2024 · 7bb11e3 · 7bb11e3
1 parent 095ce5f
commit 7bb11e3
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 5 deletions.
diff --git a/packages/f2/src/components/axis/rect/bottom.tsx b/packages/f2/src/components/axis/rect/bottom.tsx
@@ -4,7 +4,7 @@ import { isArray } from '@antv/util';
 
 export default (props: RectProps<'bottom'>, context) => {
   const { ticks, coord, style, animation } = props;
-  const { px2hd } = context;
+  const { px2hd, measureText } = context;
   const { left, right, bottom } = coord;
   const { grid, tickLine, line, labelOffset, label, symbol } = style;
   const filterTicks = ticks.filter((d) => !isNaN(d.value));
@@ -89,11 +89,11 @@ export default (props: RectProps<'bottom'>, context) => {
       {label
         ? filterTicks.map((tick, index) => {
             const { points, text, tickValue, labelStyle } = tick;
-            const start = points[0];
+            const { x, y } = points[0];
             const { align = 'center' } = labelStyle || label || {};
             const textAttrs: TextStyleProps = {
-              x: start.x,
-              y: start.y + labelOffset,
+              x,
+              y: y + labelOffset,
               textBaseline: 'top',
               text,
               ...label,
@@ -108,6 +108,15 @@ export default (props: RectProps<'bottom'>, context) => {
               } else {
                 textAttrs.textAlign = 'center';
               }
+            } else if (align === 'auto') {
+              textAttrs.textAlign = 'center';
+              const { width } = measureText(text, textAttrs);
+              const halfWidth = width / 2;
+              if (x - halfWidth < left) {
+                textAttrs.x = left + width / 2;
+              } else if (x + halfWidth > right) {
+                textAttrs.x = right - width / 2;
+              }
             } else {
               textAttrs.textAlign = align;
             }

diff --git a/packages/f2/src/components/axis/types.d.ts b/packages/f2/src/components/axis/types.d.ts
@@ -7,7 +7,7 @@ interface TickLine extends LineStyleProps {
 }
 
 interface Text extends TextStyleProps {
-  align?: 'left' | 'right' | 'start' | 'center' | 'end' | 'between';
+  align?: 'left' | 'right' | 'start' | 'center' | 'end' | 'between' | 'auto';
   text?: string;
 }
 

diff --git a/...nents/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-1-snap.png b/...nents/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-1-snap.png
diff --git a/...nents/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-2-snap.png b/...nents/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-2-snap.png
diff --git a/packages/f2/test/components/candlestick/pan.test.tsx b/packages/f2/test/components/candlestick/pan.test.tsx
@@ -262,6 +262,9 @@ describe('candlestick', () => {
             type="timeCat"
             tickCount={3}
             style={{
+              label: {
+                align: 'auto',
+              },
               tickLine: {
                 length: 10,
                 lineWidth: '10px',
@@ -297,6 +300,9 @@ describe('candlestick', () => {
             type="timeCat"
             tickCount={3}
             style={{
+              label: {
+                align: 'auto',
+              },
               tickLine: {
                 length: 10,
                 lineWidth: '10px',