From c86bc8774b089a50c7a285db8e98a669f9088a15 Mon Sep 17 00:00:00 2001 From: "xuying.xu" Date: Thu, 28 Dec 2023 14:43:18 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20axis=20=E5=A2=9E=E5=8A=A0width/height?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/f2/src/components/axis/withAxis.tsx | 10 +++- ...56\276\347\275\256width-height-1-snap.png" | Bin 0 -> 9550 bytes .../f2/test/components/axis/axis.test.tsx | 53 ++++++++++++++++++ 3 files changed, 61 insertions(+), 2 deletions(-) create mode 100644 "packages/f2/test/components/axis/__image_snapshots__/axis-test-tsx-axis-\350\275\264-\350\256\276\347\275\256width-height-1-snap.png" diff --git a/packages/f2/src/components/axis/withAxis.tsx b/packages/f2/src/components/axis/withAxis.tsx index 35bf38406..741af645f 100644 --- 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/packages/f2/test/components/axis/__image_snapshots__/axis-test-tsx-axis-\350\275\264-\350\256\276\347\275\256width-height-1-snap.png" "b/packages/f2/test/components/axis/__image_snapshots__/axis-test-tsx-axis-\350\275\264-\350\256\276\347\275\256width-height-1-snap.png" new file mode 100644 index 0000000000000000000000000000000000000000..62bc88cb2acfb1073b9a235c5b8b91c7a5dbbc4d GIT binary patch literal 9550 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 Dm$xEh literal 0 HcmV?d00001 diff --git a/packages/f2/test/components/axis/axis.test.tsx b/packages/f2/test/components/axis/axis.test.tsx index aacfae96d..2a2606461 100644 --- 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 } = ( + + + + + + + + ); + const canvas = new Canvas(props); + await canvas.render(); + + await delay(1000); + expect(context).toMatchImageSnapshot(); + }); });