From 5f221d5b9db6cb5e576c753d045238bed53fc742 Mon Sep 17 00:00:00 2001 From: "xuying.xu" Date: Mon, 16 Oct 2023 11:21:22 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=95=B0=E6=8D=AE=E5=AF=B9=E8=B1=A1?= =?UTF-8?q?=E4=B8=AD=E5=AD=98=E5=9C=A8=20x,y=20=E7=AD=89=E5=85=B3=E9=94=AE?= =?UTF-8?q?=E5=AD=97=E6=AE=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/f2/src/components/geometry/index.tsx | 36 ++++++++++++------ ...33\276\345\261\236\346\200\247-1-snap.png" | Bin 0 -> 1371 bytes .../test/components/geometry/index.test.tsx | 24 +++++++++++- 3 files changed, 47 insertions(+), 13 deletions(-) create mode 100644 "packages/f2/test/components/geometry/__image_snapshots__/index-test-tsx-geometry-\345\216\237\345\247\213\346\225\260\346\215\256\344\270\255\346\234\211\347\273\230\345\233\276\345\261\236\346\200\247-1-snap.png" diff --git a/packages/f2/src/components/geometry/index.tsx b/packages/f2/src/components/geometry/index.tsx index 9b28f73ee..e08c52335 100644 --- a/packages/f2/src/components/geometry/index.tsx +++ b/packages/f2/src/components/geometry/index.tsx @@ -28,6 +28,8 @@ class Geometry< // 预处理后的数据 dataArray: any; + // data 预处理后，records mapping 前的数据 + dataRecords: any[]; records: any[]; mappedArray: any; // x 轴居中 @@ -73,17 +75,17 @@ class Geometry< const lastAttrOptions = attrController.getAttrOptions(lastProps, justifyContentCenter); if (!equal(nextAttrOptions, lastAttrOptions)) { attrController.update(nextAttrOptions); - this.records = null; + this.dataRecords = null; } // 重新处理数据 if (nextData !== lastData) { - this.records = null; + this.dataRecords = null; } // 重新处理数据 if (nextAdjust !== lastAdjust) { - this.records = null; + this.dataRecords = null; } // zoomRange发生变化,records也需要重新计算 @@ -94,13 +96,13 @@ class Geometry< willMount() { this._createAttrs(); - if (!this.records) { + if (!this.dataRecords) { this._processData(); } } willUpdate() { this._createAttrs(); - if (!this.records) { + if (!this.dataRecords) { this._processData(); } } @@ -302,7 +304,7 @@ class Geometry< this._sortData(records); } - this.records = records; + this.dataRecords = records; } _sortData(records) { @@ -391,6 +393,7 @@ class Geometry< const { linearAttrs, nonlinearAttrs } = attrController.getAttrsByLinear(); const defaultAttrValues = attrController.getDefaultAttrValues(); + const mappedRecords = []; for (let i = 0, len = records.length; i < len; i++) { const record = records[i]; const { children } = record; @@ -399,6 +402,7 @@ class Geometry< }; const firstChild = children[0]; if (children.length === 0) { + mappedRecords.push({ ...record }); continue; } // 非线性映射 @@ -410,6 +414,7 @@ class Geometry< } // 线性属性映射 + const mappedChildren = []; for (let j = 0, childrenLen = children.length; j < childrenLen; j++) { const child = children[j]; const normalized: any = {}; @@ -430,11 +435,14 @@ class Geometry< }); // 获取 shape 的 style + const { origin } = child; const shapeName = attrValues.shape; - const shape = this._getShapeStyle(shapeName, child.origin); + const shape = this._getShapeStyle(shapeName, origin); const selected = this.isSelected(child); - mix(child, attrValues, { + mappedChildren.push({ + ...child, + ...attrValues, normalized, x, y, @@ -443,17 +451,21 @@ class Geometry< selected, }); } + mappedRecords.push({ + ...record, + children: mappedChildren, + }); } - return records; + return mappedRecords; } // 数据映射 mapping() { - const { records } = this; + const { dataRecords } = this; // 数据映射 - this._mapping(records); + this.records = this._mapping(dataRecords); - return records; + return this.records; } getClip() { diff --git "a/packages/f2/test/components/geometry/__image_snapshots__/index-test-tsx-geometry-\345\216\237\345\247\213\346\225\260\346\215\256\344\270\255\346\234\211\347\273\230\345\233\276\345\261\236\346\200\247-1-snap.png" "b/packages/f2/test/components/geometry/__image_snapshots__/index-test-tsx-geometry-\345\216\237\345\247\213\346\225\260\346\215\256\344\270\255\346\234\211\347\273\230\345\233\276\345\261\236\346\200\247-1-snap.png" new file mode 100644 index 0000000000000000000000000000000000000000..3ccaea528f69be63e5075b8ebd4f935ab4bf24e9 GIT binary patch literal 1371 zcmeAS@N?(olHy`uVBq!ia0vp^CqS5k4M?tyST~P>fmO-V#WAEJ?(Nl$f(HzEj%=v- zztp%fc0=uwaK#gQ=A3tLI1u_^gQCL&Jq3aF%?F$v6y~urHdZjR%xbXrC^j}#QkXE& zIeIfE$C8~hr33{|oLIQ_CJW1@J3hS}94SvOT+3l%%FJ8l#=>G$l#y-5*l1!NtjxqD zX}QI8c7wyL*((JZ8+&AK&GL0nID7U=M}vbKU+!5og$d8nvRoV#l-swZ2@8x`Ga6{4 iDQz_03{YY7gHbz#;pC(pPqzUJO$JX_KbLh*2~7aFk^xTu literal 0 HcmV?d00001 diff --git a/packages/f2/test/components/geometry/index.test.tsx b/packages/f2/test/components/geometry/index.test.tsx index 22bde1250..285cb5fa1 100644 --- a/packages/f2/test/components/geometry/index.test.tsx +++ b/packages/f2/test/components/geometry/index.test.tsx @@ -1,4 +1,4 @@ -import { jsx } from '../../../src/jsx'; +import { jsx, Line } from '../../../src'; import Geometry from '../../../src/components/geometry'; import { createContext, delay } from '../../util'; import { Canvas, Chart, Interval, Axis } from '../../../src'; @@ -84,4 +84,26 @@ describe('geometry', () => { await delay(50); expect(context).toMatchImageSnapshot(); }); + + it('原始数据中有绘图属性', async () => { + const data = [ + { type: 'FULFILLMENT', y: 171, x: '守约记录' }, + { type: 'BEHAVIOR', y: 180, x: '行为积累' }, + { type: 'CHARACTERISTICS', y: 179, x: '身份证明' }, + { type: 'CAPITAL', y: 160, x: '资产证明' }, + { type: 'RELATIONSHIP', y: 146, x: '人脉关系' }, + ]; + const { props } = ( + + + + + + ); + const canvas = new Canvas(props); + canvas.render(); + canvas.resize(200, 200); + + expect(context).toMatchImageSnapshot(); + }); });