feat: 坐标轴支持自定义宽高 (#1906)

antvis · Dec 28, 2023 · d20ca53 · d20ca53
1 parent cf9f566
commit d20ca53
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 4 deletions.
diff --git a/packages/f2/src/components/axis/types.d.ts b/packages/f2/src/components/axis/types.d.ts
@@ -34,6 +34,8 @@ export interface Style<Type = void> {
 }
 
 export interface StyleProps<Type = void> extends Omit<Style, 'label' | 'grid' | 'labelOffset'> {
+  width?: number | string;
+  height?: number | string;
   label?: StyleText<Type> | LabelCallback<Type>;
   grid?: LineStyleProps | GridCallBack;
   labelOffset?: number | string;

diff --git a/packages/f2/src/components/axis/withAxis.tsx b/packages/f2/src/components/axis/withAxis.tsx
@@ -1,5 +1,15 @@
 import { jsx, isEqual, Component } from '@antv/f-engine';
-import { deepMix, isFunction, mix, each, clone, isString, isNumber, isArray } from '@antv/util';
+import {
+  deepMix,
+  isFunction,
+  mix,
+  each,
+  clone,
+  isString,
+  isNumber,
+  isArray,
+  isNil,
+} from '@antv/util';
 import { ChartChildProps, PositionLayout } from '../../chart';
 import { Style, Tick, AxisProps } from './types';
 import { DataRecord } from '../../chart/Data';
@@ -214,18 +224,21 @@ export default (View) => {
     }
 
     measureLayout(): PositionLayout | PositionLayout[] {
-      const { props } = this;
-      const { visible, coord } = props;
+      const { props, context } = this;
+      const { visible, coord, style } = props;
       if (visible === false) {
         return null;
       }
+      const { width: customWidth, height: customHeight } = style || {};
 
       const ticks = this.getTicks();
       const bbox = this.getMaxBBox(ticks, this.axisStyle);
 
       const { isPolar } = coord;
       const dimType = this._getDimType();
-      const { width, height } = bbox;
+      // const { width, height } = bbox;
+      const width = isNil(customWidth) ? bbox.width : context.px2hd(customWidth);
+      const height = isNil(customHeight) ? bbox.height : context.px2hd(customHeight);
       if (isPolar) {
         // 机坐标系的 y 不占位置
         if (dimType === 'y') {

diff --git a/...2/test/components/axis/__image_snapshots__/axis-test-tsx-axis-轴-定义宽高-1-snap.png b/...2/test/components/axis/__image_snapshots__/axis-test-tsx-axis-轴-定义宽高-1-snap.png
diff --git a/packages/f2/test/components/axis/axis.test.tsx b/packages/f2/test/components/axis/axis.test.tsx
@@ -744,4 +744,57 @@ describe('Axis 轴', () => {
     await delay(1000);
     expect(context).toMatchImageSnapshot();
   });
+
+  // 定义宽高
+  it('定义宽高', async () => {
+    const context = createContext('定义宽高');
+    const data = [
+      {
+        time: 'Jan',
+        value: 551990,
+      },
+      {
+        time: 'Feb',
+        value: 513513,
+      },
+      {
+        time: 'Mar',
+        value: 538780,
+      },
+      {
+        time: 'Apr',
+        value: 419562,
+      },
+      {
+        time: 'May',
+        value: 332167,
+      },
+      {
+        time: 'Jun',
+        value: 297956,
+      },
+      {
+        time: 'Jul',
+        value: 311760,
+      },
+      {
+        time: 'Aug',
+        value: 330824,
+      },
+    ];
+    const { props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={data}>
+          <Axis field="time" style={{ height: '100px' }} />
+          <Axis field="value" style={{ width: '100px' }} />
+          <Interval x="time" y="value" color="#2FC25B" />
+        </Chart>
+      </Canvas>
+    );
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
 });