From d20ca5329465a6f33db200864b46a8f739ccbe01 Mon Sep 17 00:00:00 2001 From: zengyue ye Date: Thu, 28 Dec 2023 17:56:42 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9D=90=E6=A0=87=E8=BD=B4=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89=E5=AE=BD=E9=AB=98=20(#1906?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/f2/src/components/axis/types.d.ts | 2 + packages/f2/src/components/axis/withAxis.tsx | 21 +++++-- ...71\211\345\256\275\351\253\230-1-snap.png" | Bin 0 -> 9372 bytes .../f2/test/components/axis/axis.test.tsx | 53 ++++++++++++++++++ 4 files changed, 72 insertions(+), 4 deletions(-) create mode 100644 "packages/f2/test/components/axis/__image_snapshots__/axis-test-tsx-axis-\350\275\264-\345\256\232\344\271\211\345\256\275\351\253\230-1-snap.png" diff --git a/packages/f2/src/components/axis/types.d.ts b/packages/f2/src/components/axis/types.d.ts index 7b31cf2de..b73bfa667 100644 --- 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 { } export interface StyleProps extends Omit { + width?: number | string; + height?: number | string; label?: StyleText | LabelCallback; grid?: LineStyleProps | GridCallBack; labelOffset?: number | string; diff --git a/packages/f2/src/components/axis/withAxis.tsx b/packages/f2/src/components/axis/withAxis.tsx index 35bf38406..397e694e3 100644 --- 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/packages/f2/test/components/axis/__image_snapshots__/axis-test-tsx-axis-\350\275\264-\345\256\232\344\271\211\345\256\275\351\253\230-1-snap.png" "b/packages/f2/test/components/axis/__image_snapshots__/axis-test-tsx-axis-\350\275\264-\345\256\232\344\271\211\345\256\275\351\253\230-1-snap.png" new file mode 100644 index 0000000000000000000000000000000000000000..6bf8077fbb28ad6bad4e7f7ba987f73498ab40b3 GIT binary patch literal 9372 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 { 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 } = ( + + + + + + + + ); + const canvas = new Canvas(props); + await canvas.render(); + + await delay(1000); + expect(context).toMatchImageSnapshot(); + }); });