feat: axis 增加width/height

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

Hide file tree

Showing 3 changed files with 61 additions and 2 deletions.
diff --git a/packages/f2/src/components/axis/withAxis.tsx b/packages/f2/src/components/axis/withAxis.tsx
@@ -214,7 +214,8 @@ export default (View) => {
     }
 
     measureLayout(): PositionLayout | PositionLayout[] {
-      const { props } = this;
+      const { props, context } = this;
+      const { px2hd } = context;
       const { visible, coord } = props;
       if (visible === false) {
         return null;
@@ -225,7 +226,12 @@ export default (View) => {
 
       const { isPolar } = coord;
       const dimType = this._getDimType();
-      const { width, height } = bbox;
+
+      const { width, height } = deepMix(
+        bbox,
+        px2hd({ width: props?.width, height: props?.height })
+      );
+
       if (isPolar) {
         // 机坐标系的 y 不占位置
         if (dimType === 'y') {

diff --git a/...ponents/axis/__image_snapshots__/axis-test-tsx-axis-轴-设置width-height-1-snap.png b/...ponents/axis/__image_snapshots__/axis-test-tsx-axis-轴-设置width-height-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('设置width height', 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" />
+          <Axis field="value" width={100} />
+          <Interval x="time" y="value" color="#2FC25B" />
+        </Chart>
+      </Canvas>
+    );
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
 });