From c3a0a045f199afd0e49c21a994a4dd7c8751bba8 Mon Sep 17 00:00:00 2001 From: Acery Date: Mon, 7 Mar 2022 10:28:50 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20getSnapshot=E6=94=AF=E6=8C=81=E9=A5=BC?= =?UTF-8?q?=E5=9B=BE=20(#1380)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/f2/src/chart/index.ts | 1 + packages/f2/src/components/geometry/index.tsx | 46 +++++++-- packages/f2/src/coord/polar.ts | 38 +++++++ ...4\344\272\222\345\274\217label-1-snap.png" | Bin 0 -> 11219 bytes .../components/interval/example/pie.test.tsx | 94 +++++++++++++++++- 5 files changed, 168 insertions(+), 11 deletions(-) create mode 100644 "packages/f2/test/components/interval/example/__image_snapshots__/pie-test-tsx-\351\245\274\345\233\276-\351\245\274\345\233\276-\344\272\244\344\272\222\345\274\217label-1-snap.png" diff --git a/packages/f2/src/chart/index.ts b/packages/f2/src/chart/index.ts index 3f4b66eda..785f05bc3 100644 --- a/packages/f2/src/chart/index.ts +++ b/packages/f2/src/chart/index.ts @@ -229,6 +229,7 @@ class Chart extends Component implements IChart, InteractionMixin { getGeometrys() { const { children } = this; const geometrys: Component[] = []; + // @ts-ignore Children.toArray(children).forEach((element) => { if (!element) return false; const { component } = element; diff --git a/packages/f2/src/components/geometry/index.tsx b/packages/f2/src/components/geometry/index.tsx index 6ad4cd7ef..771837d94 100644 --- a/packages/f2/src/components/geometry/index.tsx +++ b/packages/f2/src/components/geometry/index.tsx @@ -433,14 +433,15 @@ class Geometry extends Component { return this.getAttr('y').scale; } - _getSnap(scale, invertPointX) { - if (scale.isCategory) { - return scale.invert(invertPointX); + _getXSnap(invertPointX) { + const xScale = this.getXScale(); + if (xScale.isCategory) { + return xScale.invert(invertPointX); } // linear 类型 - const invertValue = scale.invert(invertPointX); - const values = scale.values; + const invertValue = xScale.invert(invertPointX); + const values = xScale.values; const len = values.length; // 如果只有1个点直接返回第1个点 if (len === 1) { @@ -466,6 +467,24 @@ class Geometry extends Component { return null; } + _getYSnapRecords(invertPointY, records) { + const yScale = this.getYScale(); + const { field: yField } = yScale; + const yValue = yScale.invert(invertPointY); + // category + if (yScale.isCategory) { + return records.filter((record) => record[FIELD_ORIGIN][yField] === yValue); + } + // linear + return records.filter((record) => { + const rangeY = record[yField]; + if (rangeY[0] <= yValue && rangeY[1] >= yValue) { + return true; + } + return false; + }); + } + // 把 records 拍平 flatRecords() { const { records } = this; @@ -476,7 +495,7 @@ class Geometry extends Component { getSnapRecords(point) { const { props } = this; - const { coord } = props; + const { coord, adjust } = props; const invertPoint = coord.invertPoint(point); const xScale = this.getXScale(); const yScale = this.getYScale(); @@ -486,14 +505,24 @@ class Geometry extends Component { return []; } + const records = this.flatRecords(); + + // 处理饼图 + if (adjust === 'stack' && coord.isPolar && coord.transposed) { + // 弧度在半径范围内 + if (invertPoint.x >= 0 && invertPoint.x <= 1) { + const snapRecords = this._getYSnapRecords(invertPoint.y, records); + return snapRecords; + } + } + const rst = []; - const value = this._getSnap(xScale, invertPoint.x); + const value = this._getXSnap(invertPoint.x); if (!value) { return rst; } const { field: xField } = xScale; const { field: yField } = yScale; - const records = this.flatRecords(); for (let i = 0, len = records.length; i < len; i++) { const record = { ...records[i], @@ -507,6 +536,7 @@ class Geometry extends Component { rst.push(record); } } + return rst; } diff --git a/packages/f2/src/coord/polar.ts b/packages/f2/src/coord/polar.ts index e86c6ec00..cacfc973e 100644 --- a/packages/f2/src/coord/polar.ts +++ b/packages/f2/src/coord/polar.ts @@ -1,5 +1,6 @@ import Base from './base'; import { Range, Option } from './types'; +import { Vector2, Matrix } from '@antv/f2-graphic'; interface PolarOption extends Option { radius: number; // 内半径比例 @@ -64,6 +65,43 @@ class Polar extends Base { y: center.y + Math.sin(angle) * radius, }; } + + invertPoint(point) { + const { center, transposed, x: rangeX, y: rangeY } = this; + const x = { start: rangeX[0], end: rangeX[1] } + const y = { start: rangeY[0], end: rangeY[1] } + const xDim = transposed ? 'y' : 'x'; + const yDim = transposed ? 'x' : 'y'; + + const m = [1, 0, 0, 1, 0, 0]; + Matrix.rotate(m, m, x.start); + + let startV = [1, 0]; + Vector2.transformMat2d(startV, startV, m); + startV = [startV[0], startV[1]]; + + const pointV = [point.x - center.x, point.y - center.y]; + if (Vector2.zero(pointV)) { + return { + x: 0, + y: 0 + }; + } + + let theta = Vector2.angleTo(startV, pointV, x.end < x.start); + if (Math.abs(theta - Math.PI * 2) < 0.001) { + theta = 0; + } + const l = Vector2.length(pointV); + let percentX = theta / (x.end - x.start); + percentX = x.end - x.start > 0 ? percentX : -percentX; + const percentY = (l - y.start) / (y.end - y.start); + const rst = {}; + rst[xDim] = percentX; + rst[yDim] = percentY; + return rst; + } + } export default Polar; diff --git "a/packages/f2/test/components/interval/example/__image_snapshots__/pie-test-tsx-\351\245\274\345\233\276-\351\245\274\345\233\276-\344\272\244\344\272\222\345\274\217label-1-snap.png" "b/packages/f2/test/components/interval/example/__image_snapshots__/pie-test-tsx-\351\245\274\345\233\276-\351\245\274\345\233\276-\344\272\244\344\272\222\345\274\217label-1-snap.png" new file mode 100644 index 0000000000000000000000000000000000000000..f43bc32d05c17b6ffa497b440dec204680693848 GIT binary patch literal 11219 zcmbVy^;=s_&~|V_ad#&1@3ODk70~-_hbpH@p0st@q zAo8+0z9vV3KwsV2#;f}y!EIVb7&f7d3?Y^)fJIb8kui$6CTxDLy}nzQE5u~^uD-T( z>8?f%So_#Y=Xh{*Syx*cj&EpH7>brSLdggW3x5S< zdVdHj-5tzhS-Xq4HrkbRC~uvs$F72)v!D{AWH8DIpJ_L}BKm@@h|UO9#z&0`mhTY8 zR_v-$E&iEDj1m>h!YzjRU)N86+h=uGM@{ZX-nVIwo;zQm@Lk@icVj|j$1`B-}~`!W#~=2g)44R`?QZKAaBn(nRv z$1rI186XYft|!Gyt!k%v#Do3~m26s;UuTY*|Cs`wcv zJfso>W`YP`P4D}s15xS>6?q18VBjNtoEuVvN`c{ zsoC|vN8-|B>Nn!k3<9FQGa)L=ycX zf#5CBKdGZk{|!*_<@Z;`S;c%SXgdKiKbH-4s!r3?pdw`;JjR7ZQ&ju(J=MZ}htb>H z;e=R)t7?3tYY~Yt;gXd@j>TO4qb%IDKEo*s15R7KDC>qV{bMDwrA5@g&7|=yRE4n; zehIgVdc(5QLr^fQu0aOx;H)n4B+>JnnbXZ&1Sv2_n=kh$|Kw-?o% z+cs+rUN*%GY82j&1uD1AukU^muMm9+&lmq$#KqlQ>P@R7VfzW(ew-`h5J5)OT!)zr zwHHLZ2sO*4uqeKBG=jsO_7{_=FXUy2Q?hOMb4n07SDJ+MSczo9`Di)UA`24#g zeeYNw3{4RB@xZwbjQAmeZ}y&gg|DY(BV6GFNC18b_O7EL zR%7*P9k9S~m~P zKuhHiO?seuHa8COko8NX*HqAr(m1&aGf>w32;ZeUF6nr@Bhj-Q*{K~66&jq$0nsoU zmJ>=&z47~3TywiF*NsG|_#0?GzBPld$|u?hT8YBE+!n;}Illi65d z=}A{rp&cI}r;OSdqbKhK2qipG~Fliv;=hgVTEkF}L&4QNx~mm4C>HR-zYI zl?)PXg(XqPMj0ggl6tBNCRF6=I|s%G)KWKPF-6Hc#f{gcuubZFPevkb8Y{!fypwWS zTvoxKQ1Nn0p8>s+pXOa6ylFt81t6h=Uw@t zd#tS8wDM7W#`!AeSzB^PZ_5R2pmjggR$Qm^1bpOo6xDpffQ3SLsFd z4mx4$goM?QzR<9;tSWNEQ|O7_Kg1Ng+RggrYpz{?{nQL6qpEjiPb!?Xf$k>Wxg*Wd zIyU0!pPLY#&wQN!v9_IkA`nzuQ_9JV9rI{IlQ-`~YtE&SX6iCF-oC6SWwc-bfr3~I z5IM&#i~}K5{nOaUuqrYt!grh~xJp*@n=jm1*=cE6elw(08H3F0%AYng^`Q5{GVU_o zT~o-;CiO7EdsWaOqPw9%rZ*bd*Y2*wEA<@&`f4XY4Yu;nbM-kj_dddFKC6OMii)bf zsQ`wbkq1rCixySxQbLh|=&ghmh`@>-3Cg1IR=Aui>U=Doj6L8_DgjturA}C3tWkjm zu&hG)+hmqz@wSXrshX|vm$lI8WhX?l+(kA(@EC_Uxz~ctIjZyUGMz#0qU7M?;WRqXT-RZD5jYs|b zUeHpe!k8dkN`R$;g4xwWP1`_J@bCLgvns*(qTi^#?&o)Q>oujk`FHr2P--< zq~FAa`Oad<>OH>kcB@Ux4!2tD9s^mX1y>Xof0q#U+6U3ih?#t3;l_IfH}`*Q8l;m& za7v1|sf8YF65jiRL_Bw1C(i9np}crl%e^$gAIXZTNw3Fc)m;*%<||^b z3~yI-T%kcs<3zq$0fLJJp$+_7lo4Dy5}DLm6ChR3mhwU?X!`o ztE|jTpZu-F&524GOo^qP4685?J4h)J!;2FSn*XH7ebOnk(p&q3v;2XaCVxpspB3hX z=3^kcqAqjut7y^n3%}(5LrZD-z6%s$~foh$%*RY~&I%^^SxLqr;X-p1k#hCwId5EVt*)aw54w@=ML6XYH7 z9L6Ht+}Yl+HbAn`9_+m#0O}62^;NfQ_7jXZK zYJKa}ug3Tn=&Uf~FMpzr z9d0_!>PQTq1%96DTDr%+xVOYiJv`S$*J4EsgwGzC;V+WS6U>*8zrNgnYFT$5Oko^J9m}BjB*-7?7Q=P~h zJ_aM)(+>ATIjH>MQxivZBQXRD$bN0#u-eVf-&_>{G#SS2N8$wFs?3VD^GBk9JM+b5 zro%SlXO;bkA)jx_3@Gyx6pAza1$@_V=GpXD`Eb^>lpLDT72%--{fmq*UZGd%xb2Qmqp^ zq|JFNw79=XK4sHdyv+1g2A9*hG}G{@Eu%mA0O){BBwCn`=O~rKW~wR3)H@dlUl)NN*#pp2{`olTn%oAZSq>*yzgLBNMB6i1{-WScr^*mdCWT>)&49}SgBs}M zPCoghpjVbJIGRS?jtxEdmGMj-8FqaWwD1XvyO|5+A3BuX#S9oE)N>qICEM=^OM#0Q zu8;ghX>mak1DGXz1-c`&oANMdfI>ZC;f964mxT|t-x_8q4Ep_b^25t$pd2~C+GGSyjn}6 zA-p=J16_A#fGY0wt$SU+Z9CRcPuRLr7bjQoy#(byHBmIMac(#n%|wG?tK*s_nz53h zmvqacHDRp}OKC@BTzGTIucUV8aC@!;Pj(pDT$B^8kD(a9_cf2^|3vLK!6hCAD2^Hf zL-5Cg7TYZ6+7EoE_Fg8pl6vREwn6W~(0ql<#3;Yy$&M!Dpxkh)+U_wbTf}j{vQF-v zXvt23EJ^YCj&ogc(7T&$5OP?B0Vv^Eu>kG;2X@pbWVAZ@OZ(rd4JYLuNAV~JSmbdy zCBn8diT4_ZS{m0XtK$9dcR0KJ>ugUdCsQafE zESjPxouD$dRNUgetZzL_-Ryvktj(M;vCAZb)d&srV!5!DrSQK=Kh+?^b77UtzOM08mS6+SLb!DnE7I6biWAe& zas)BN`W@$PyfCavz7Ge(5xSb3SIOD_ATWLO&2i%Fe?@9iBTM57 zSS{%1*lBebz0|B|@XpEQx}}N#7rx2jE)3noU7nLZbNt}$m4{J}V|=`vqUp6yDA;JW z^RG}{S_BR{buJo1D*kMlaWbpXV+Ne{j-@B41iFTkX73wF;qzkb zEm-&Voc`eFE)C!cuzSociqBY0LlcI=jmr09daXCvhaK=xGkx+7u-9_M?z!q8qUIK~ z83RD2c<+^hXNCee>m@pvDM0BkD6MS%PifBFWKQ011z=3a*Rv9Jw7wOjXH{J+bGw|# z#Dw*>lhP4P$r&Js z@_^c54q)b`6fQt%L0!iLoB*JHUt!4vGKV1~{o8MZz$ALetuB_)aVk8Vbc!q_hKT%H zvWnmT_H{ST#ASbm3;M*ma1|)ET@hh15ocE(36_@SNZb_UJ}Y=eTQAQ_;O0z;WR^5V zKh??feWD5G$Y+jJC0uK}L8zEDqIN6;?$CTGIu?|1(;NUF#8wMR?xoaG33+AU7&-3_ z);&aFM_eeco=eDZUllN*QZOU-bd$LncY$X|#SZ5=t=<3=@x#ud7Yy2-wH8)ZXa5E_ zD^-j4zHgacUC8-9~J7 z_QTaF=EVQmI}_1!_r=!yXkXo!w3L)a6~ir3h+9@A9+l9PWz+2}%GZ?t1@RwtYlqxb zIF(cjxw?cLPL}yQwlYx3=fs8g>+glu9sxbF|J2bqqQ{5iqwFdpSn1I|mRbRN4AXaZ zJi83B*2zb06=hcl_u?ut7~5{0DDIugxQSWT~Kcv*_$`r zv?a2m7qil8qqOlh&oq8-aVV+9q(kLKE5k1*KCgsi;(zyzVIs%35~K<_MsCsW{qDyr z2&1Etry5&GFhSGRQc2m=e$-@gM!_hV3)Xo3Jb)YJ^zudpLO5{CX05!*vp>J-0&K^T zNxCCyClM@e@5KnhUsq)BBBp4<5g=}-7=CSj|JJ69*afKYLq*oi{LFL!JAv50*FWth zpsQX_ETv*crR15Ct7YlWc+ndQaE|zYsj41LN$0~>!Hk6Mn&cN#JMF#CR^=GVuR2IU zf_s9<;&PlMc43Kel{ESik#NJj$PKUorSI7rh54eBR=+v(KK(#LZTj;&Nf6o%UvRBk zC`rB_I!qEjQ@olBTMJJn4LH^Sp%R5Pgsee8W-~UUX!T!y=F;=!GGp@5eO7>#QJWKH~gIJKJ5~$+{ zBWx#$cQbFF`v9P2PiybF*2!Aq;k~j9Lia(irh*dhACcba$32okE7mmQ8**w#3AtZFL$&E7j zjRi2Q>DyVS(pwq3S$E<3|}5L3@a+@PNuXv`CI7B*4$vG42uR(LnRL)8C2ps~!H z=b@nY+sB5k2`4c zVdLicly$$}S|6~Ema)?0cvSPwoUYYdB|stb*+b>Ov60Pv2Q-vWOTO?FOh?Lh9Gkb*Hy^%ReA~i47+k)_J?(9YQ%ax% zFZ&@&qsl-G8@dDcv)^wEirsH`ndEv5^qmb@V3mrVGj(0$B^eLzrRs)6pP~g`%2zZM)p|oz70c#dPCXgqC?QzW0gTDm7%Ss??PEL zu3`x1dIggsH>t$YPF{wP{FB;otVy-PjMkmvfil-Bo?EPhxrHk{@~=hmt%rgTM*o{# zqLkln?4vqgVRH#PUMmURyY6ZY@SvT|XGzsG)P+|T4Z>8)hj@KvQtP*{9n>^eRz{vV zK-T*=U;3V+f*BEe3ztRyhni`&MuA_Q5Cv$ zFME+-Az(Qz1DB#Hu?V|TKL#tOV)?~8vwn5L0XO}IS8$fMc;JW#hny)h&gLh6kCtH;f%4Yei$<=Z$6C-uNapL6880uM#(zcNL0; z-BcL+bJ-z%&~+nqODEjBfTKt&WAErz2v-taA~-nxd-2$J_91fd|DDW!o2qA7UyWlQ zvnz{?jSqqR+Y9$4$y0%RxF-W~es{=cEd3g;w}x*yr^~trL=B6sHZCXOXvMQq`XcTV zzT-bJ2B=c-Fgr859@i`iH><#l7vP*<6t#5pO0{hpH39N*Q=%N6$Hh%SPHoL~ho{?f zKDur{ic~LWPc}^oMEdS7mwsL~o0oiJjXD4Oo$H5Y8H_5d1a8O*`x{~PDRl435vLxn zV8x(2DR6#ABWy>UzO~V-hjF_&tWH7Wm{@iQvBB1LIVodEJW7MI1}luVl$MD?-zw^v5y$Mp3YuV#SZ1nSy7o9GdV*b4g9W*2y5Ea zvGmEb_OjN6UY8p=C%wkOx|GwYnboQB&SdK@^+C z%kwT|;M@B38sYWA-$}Ll?q(ks#BPzQ{hHawC7+uJXgjwgskq^%-+!GSFH*=4$CLdsh3E1AW2?^VDei5GAvy-7gvMq8V_X3dV}=eQ5jpkCo2bN)q9jlbtilej2{X z`=F&%Kg?!3rQ?R$E3vomivA>Ga&=Xo%Lr`qRp?~+g6z2PRCPJofm4P;#QTCn0N*9v z>a5t-d#$&!^KG8%F^h^GZSBNBa~fCvN3T(I(e336D5l!%F2|>r`crk8nnPIKNi)v( z!aOnAlb=$s+A2DScCqu04p-_w1!Tdc=R|54L6$vC_#kVeHpE}&B@Oja4FlMU8sJ%L zTR^CE=Yq{OkgfI&-Ve}P?NG{Bw7oBZBDz<0ru27n%X(~xAc#HgjPIAQ{$h*P*7Lm7 z%W|E2%Zx<7$I<~KkBj~p!dNQ>uaeG*gXAVAslMc@_?JR~Zh!tH55>`Mp1npZh^?_H zb5?iM-YZfd84)Tj7eZBw>V3${BnuD(74~oLtq&WRlDxB9HcZxsR}M>mu5u_ed28xK zvwy3QluAC+su*tYwAtnfpr6sP!$T z8j;UB_G<4-9O+Y3KVi{0jAt(e*3Xn(1-95%Nw&_9J0$PfT5wasnT6#8B|(3pEok{X z>qgco_6*g23D^kD*DNV}a^qA$Dn!M!_9A)mx$msk(>$N*>) zF>rnK^d9G1^0CBqIu_9>YGpH!bUp!hR+ogv^Ui5m_Z?|4p>D6&K~KWU<#`Wo)f_dZ zEaHMcCi`uFcYm2P#)=4S>X+r1O{+;v7uEBqwYgv9ud&im2f>f)C>FKA!K8<{Qj*et z2~79t7xdB43aG_u0$`Sk7qxp64om9?MX#v4s*%6+?In;oYq>a91OxfZS|0IpZOI2; zBBy~LXqWSx8E^BF=tP#dZLZu?_dHL}+Ob}}ZJ!dlLX|OfQLl8F{|9~kB@O;WP^2l? z+_LpG{iI~<`!zU_$LMW_1@K_e4y&&($u>V&Oum2V>t!8=m@2ijH4;qSeG?eh4N z;APzMk;CfgM1R6_oKr??;?+PpLdw-dYq+$bx&PO13e}PW56CA^Qde#m@UvmT_#ICq z!vqm;5hoD6Wu5_g{OtI#bc~dZ=of1fUj^eAnzmu$G0OGuJYY$w@0>p60~eZWA}5JV zaFzONJouJzV=WWPNCG+QT|$uD^hx5e%UN6;8zQlnRYX2y7I0{E*0G7Em>BS+sIZ6S z0xf!-!d8F8(W7~})WOs5y)fy+BPIT=VoZ{pJe3=ZPxl3-Rv#leHkRD@Nc#xmk(LuJ z3ToVqd$*VxX3uT7ki}fJ8GL3CQuEfa6Pyw(Fuu^KyL>kw;!(La-!s&EO@0EDd@E&Ygcm zHv<-iXBi_R8dx2ecUQ8hTP~4eF@d$CWj~mAj4f5GK`zunsxkQ3DjB`7r{O&O^rvaL zAQgGe^E1z@55W*}OLYIU&memazaAR^coFv>7eL^~H+~8ueJpxNU~=SqH=^B)$_3Z6 zM<{&OyZM7}_wlR=+;D#g#v z8f{f?*YJJ}XQ!u*A`}zK)DrB2-`ph)e?$P*O{|@I(TQ?4YXoqYGkLCCOAk}{!8l&( zf<#34Zy!1s(i6WsJ7|DESUz6L%52eT9l${E-XQM^?pGUT;7A#dPmxsCPjh^gCAS0%^W?_rbj}a{n@DQpEU$-(gnD z%J+Og$8(?!K=K%1CO2*RJK`f3kgF}_@-?9Udu!EF@D(Y%;x%9Cj$X;F6;}`?*;5ou zzYL=(r6P_j^@AG9&Z2z|sKa1f7o385Y|P%yp*6_5G5iGFpwQNY&9{}Ya(}I;+f2Bo z{DS4KO53Wmrd=XP54Wj`V#~6&Pm~rpTymc-V?(5Dre6~cRASuo+(Phr>OQu$?}3!> ztg#B-OEeSzbrXX1&Q}Qo8V2z#W~rpyJqkT#rEPl5{YlHRjUiok717e9EKc+1K!Ogy0Up=#VNW#5q! zq6yMc{t~D#Yo)LX!+&~KVf(Tl8SS*^8D_syL6=FUKV6%-(0XZ{$#HNeggA#dWoiDS zrCf72Pbei%6hQb{^&RToB9D-}o*o9j(>%3&d=wlNf!>w*c_#HUBHEPk zG)1^`M*b0xo(kG9igjjSNe0R^$YQ6&?AF$n)XJ}q z9!lO&Am{9~hiZmOj?7#>R3BTjE|rj%VgWq8*QRQxZ5ZpE;_M5>ZCqkb4uWlU9};vQ zl~YY|53d8b#VNs!McQh^cr~5h2N)INQV+E#ef+--a>D z@;}JxKdfOPJ_#R8_jpGy*UwGi$nMOaO9km0=n&Xb399Vq5A`mlJEO}- zcOoC7L)HCUaCv8ddf<|;;mI=oMlm*UsvJ}H3594Abd+(SPkQKW4V~Ni^V1>^jjGbA zXbLpQyVIJD3xcA$zt!31n+z<-({rB?z@?Zj(Zig0S*beydiz7;hRbm04>}YGbgA<0 zlcloTpo^l3&v$fph9kMBh3s_#@>nHW3$qSkg#bHzGnVq(-~f z(facmtgw7+8wWQCN$?@*Y(rhZ`l?rnq&}V7Fq17r?^T>9@{Svoqp6-WHS;Co&oIvU zqSM_Y!~NF4Pc+VGxEz@=jL7z6Usf(aD-uy#?o`4{xB1rv`jJ(ND+odP48F@hAm&~s=>@Q|6 z_vgF$)72S=`{m~P2{>x%Zs}-;qePs7(os)3{=gOjHxIT47vm<6`Ix-#A-H9K^E~Aj zk}vWS0>#`|0|isdOGKF%atWO!;n@*LEm`q4o1f!XF$#%f;8Lf2oB`rxCEL3bcT?4be zZ1iRbhi2ZVK>Fsx5c8X>0nOzQ7r{?RR!3UJ+-5?$nFN-c3(2VAnofm<{@$6$k?$fH zOD2BcAKwlhKLol13mns0zDO4d*%QP3mFBqAv=g~3H_km!RTgIKUl*byvETfvWy%`9 zykrc4+9|Ges*m7*1nKZk`}5)L@Yo6HfJ`$74_zR;uRWvBq}$T&uvgp<8+abPz9c48 zOr?!jOxwUsnEXkrHqlT`jr2AK#hfqA;X-Dw&($5_VzJ$Qv%iqhBK9~cNI!JpdT$|r z!6BIRra4jg{3+hWc%#*-+-sOs@Np_tHsAAclGzRoxj(XS$KZx;)sKH8)xP0Jm4Xqa zs(5t=JcevPjq5=x)n?v()Y#7=OrhBS271{f%my4rh3p;5Ik*iv0yYIkiO4-hHGGnu z*hQ>AJg#Km3MJ&Yqo(?+UvTExdD##ja`xiMA<0Iv9lvsgAI<_k-Q+%jWp9cd=t%-A z?$?cAUXhj(Zg9h$Uk;CD+`9lFS<@ zXe~p}g+();49?TX3bT`aH7dYv{lV_@(2z=m7OJcDw-x@852r;K0R!DTYq`u(Llv3( zrBLFO)kx~Xa;LiyO_et!GEpQ416VetCgASwdTMN#%`6X~9XD5c2rQjQIN$l1g&TRd zV$@riyVyO@Ef{qpomnG#!gFWV7-Sz?>4F1fs8I5-pbZf7oUX*I_FzBCM^c>-GpEW9 zCrd@wHkKF?J|wR7xfAV+fgvW1`vU<~*JXmmBO^F`qn8*NCch3QzRvYPwjfA;4wu~? zV)o4U3{Ah}^f%t=3INe&(V~3HQPL`KlU3jU_aiq7IGxW_*G{&t=a-EBw&ICRfD!&BdSGq!>D47*k122ZfmUcQ!g{Ysv|&%D+g;jsTte zId0u=uOOGqGxA{DZ(S0xAr7O}*_rtoe;*P7{%ormbAlE`=9RZ0MsY`qE$xReEF=SM zkx3bJ>x*dkgNc!b-{oW$iSwO4OXuJh+fA#8w+4s6yRa@L!cy2yEx)cYE5(Em;|_ob z0>xJ}7hvN44w?LA-sK|MKaWL--W_Vg??~$*;=PcJJHJKd?(M@l} z>K^RjxnH0`PVH*!d)aC|Ioyt=W%UfOrkHbvOU@#!q0gMEv6EF})A&5*#EgO;9fw+GH~P>mNapYOI*RAV?>AC`MozY9*zv0{e5ds^N z6h9#er6I@257zz&BuCVY=0Dr8=}u`PiK0l|v}pekPo4hjoS_2&vm)825U4w@B9eGo z_g^qOX|d8JBiW}&HYYzLl6bm+iEOWfBzx*0*{A;rMN0WU3w@GK#*Rs`6y#7ul63(P M1vU9HIkV9J2k&WRZvX%Q literal 0 HcmV?d00001 diff --git a/packages/f2/test/components/interval/example/pie.test.tsx b/packages/f2/test/components/interval/example/pie.test.tsx index 7deb456fe..af1459082 100644 --- a/packages/f2/test/components/interval/example/pie.test.tsx +++ b/packages/f2/test/components/interval/example/pie.test.tsx @@ -1,8 +1,61 @@ import { jsx } from '../../../../src'; import { Polar, Rect } from '../../../../src/coord'; -import { Canvas, Chart } from '../../../../src'; -import { Interval, Legend } from '../../../../src/components'; -import { createContext, delay } from '../../../util'; +import { isArray } from '@antv/util'; +import { Canvas, Chart, Component } from '../../../../src'; +import { Interval } from '../../../../src/components'; +import { createContext, delay, gestureSimulator } from '../../../util'; + +// @ts-ignore +class Test extends Component { + constructor(props) { + super(props); + this.state = { + record: null, + }; + } + didMount() { + super.didMount(); + this._initEvent(); + } + + _handleEvent = (ev) => { + const { chart } = this.props; + const point = ev.points[0]; + const pieData = chart.getSnapRecords(point); + if (isArray(pieData) && pieData.length > 0) { + this.setState({ record: pieData[0] }); + } + }; + + _initEvent() { + const { context } = this; + const { canvas } = context; + canvas.on('click', this._handleEvent); + } + + render() { + if (!this.state.record) { + return null; + } + const { record } = this.state; + const { coord } = this.props; + const { x, y } = coord?.center; + const { radius } = coord; + + const { xMax, xMin } = record; + return ( + + ); + } +} const data = [ { @@ -70,4 +123,39 @@ describe('饼图', () => { await delay(1000); expect(context).toMatchImageSnapshot(); }); + + it('饼图-交互式label', async () => { + const context = createContext('饼图-交互式label'); + const chartRef = { current: null }; + const { type, props } = ( + + + + + + + ); + + const canvas = new Canvas(props); + canvas.render(); + + await gestureSimulator(context.canvas, 'click', { x: 205, y: 76 }); + await delay(1000); + expect(context).toMatchImageSnapshot(); + }); });