From 065673c802d8d4d674647c2748b4f5dc5d1700fc Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 7 Apr 2021 21:55:34 +0200 Subject: [PATCH] fix(xy): negative bar highlight and click (#1109) fix #1100 --- ...d-hovers-visually-looks-correct-1-snap.png | Bin 15295 -> 13297 bytes .../chart_types/xy_chart/rendering/bars.ts | 18 +- .../xy_chart/rendering/rendering.bars.test.ts | 291 ++++++++---------- .../state/chart_state.interactions.test.ts | 66 +++- .../stories/interactions/1_bar_clicks.tsx | 2 +- 5 files changed, 197 insertions(+), 180 deletions(-) diff --git a/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-bar-clicks-and-hovers-visually-looks-correct-1-snap.png b/packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-bar-clicks-and-hovers-visually-looks-correct-1-snap.png index f29728bbd71958884d769285f07e35b91854eb50..7f0a7461e79b1de7296a12aa732d875ef8e1bc34 100644 GIT binary patch literal 13297 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%0A>Se#{ZGzmCy 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 Q;U;vb>nhiBWlit>4>t+dvH$=8 literal 15295 zcmbVz2Ut_*_djZ@RS@a~lu;E_L_lT9uA)FhM7C@fTR_=6s1+O_5|$uK_KvbQC<+P! z5|->O2^eNrfsp@s)%M$A`)_|dJWpCoZtlJBdC&Q*d++=?#m$>`ZDL?x*o;v+rOv>x zmc+oY#{7r%@RzYllW}-iW3R4wk|C>s1ODYF2F$4wnl6!_dawqqb2K`ASz_h*OqKo5 zN;hA<`}x*6E{(Ihn8mTBp4cDr;>65PTi0b|x?RZ`xhB_}SwGjylJ7j3k~z{F(pG@W zxJHhezjAcHh;MvkrTPzn!Dr4lsNLKr*Ra4cs>|emdo7-I)~U>(VPr-U-##R591s@X z>q?czhrJ%1UHT5rt5PIGK^$HgVuemh!pp^Dzc`>jU;P12l)?M$kAyYw8nh>29lY$9 zSK0tCXMG+q!^>l)J)H1zB>dt&Rj;Z36Etdj#e9XWt!?|uJB*^v6Wy|oGBPrU`1sW1 zX9X%FvCvn8Ln`&?q%2ovE9nfE%7& zq8QWXjEjeH%G6dZEv?j&68&@?ytaypznE=r#uM9e-OS9)w3L+dmo7b(l#RiV)F$oT4-u?U2va)Ov^wA~y1Y4Y>N==r=lbVxbW**lJ1@_p4@#r4j*+F)4m5!EO z=H)wd=nPkY*(vJx=UR3`;aGTyUu!l8u?v=wr#HJ9Kt+txIEMVc~8m zgm+eU967DjSLR+YI5;Tc^yz~Jm-BHByON$WN=lC!M`s&jyU0#OJvP{=F0!_ron7VV zW}X&jN5{9LvwVB^?(M&E^J(s-M!}xt(E>l4b!#rzoyg{@HMr`qo535qCh5Y2U0R}` zzrX(~Lv(0p5~q}t63)`fY6myB(3AS4+*}bY9i6)IxwOno75F)G=FFzW(k)xItSdh$ zFYh~X5?0!qfsKn$Qd~^wb)TFoalC9{kqWnv9}{u(iqEavxAUCHde%L~TFPO9Av~{N zy*jvWpZw|5r>U)Yuf)hmj)_le85pL7uBtg@jg9a2v$^t$y}X;3hv!t^a_<6_EOhYT zlgsvzJtdwQ<O9>rFzWoL@b?~6$< zrBwT|$5&S;HMh}MSXsv34~Uhm4APU!{Ff=*{5n>(!EcMNQANmd?=x(%3mb|j-TMe5 zIi_PZax`1d$#QPefUlRr=dYjoF!N%$c!Z^5JZF*|u)sg*&q{f>lD?LCtc#x>r?udr z$kn(-;IX()dif3ClP6D7ysC^cJ!6&T<~DEIxUp$eZb8@c$_RPW=FLsLWy=n;0?uQ_ z<5{h3nYIUcd36`M4O5mU=t5c(DY(Yb=2x@ZC`2Lb)1z0azw=NrG1*~PBBM78Z#_tS zRXaUBI)`lt;Bjzf9i|eKB%t3H+#H^?H2d)k z&W7G;H*&bHS&^HY2krZdE*Z;RQpqy&vlXitowJ3Ku{Vs|$qUrJn)@ctFQ7X!{&udB zm~LEjLN>;sOTaj=Zlq}G$!h!9E|sW=gp!GJoypQ14c4<~T54b7N!g@kYAcud>iMXss59Zz zfZb0L&Z-dTWz=FG5^Z7O5bqLq&Hl4&LcTp&3w?c7E3Ar8%2RlfDmV9W^7GCrfi(dd z*X5(*;yCP%f1=i^w4*!0i(yp>&j=Sz=0AS?0u)ZVkdb>xT5ku59{Kum(`Mt^S=$X8 zHjGaVh>@+k52UxI<+cQ$=yMnz3Sb#qunpl`?qf9{r|Xvdy-F@z+$j0MZf}1&>v@Q<}A+P;#^N^}^V#R8ng8eaJYKzYuUyS55Lw!(Vw}czz@k@HS z+~LD#YaY&d7Jj@pH1O`r;=bdGx!!rjqAA&^#`6%jC*?VIxr#-O;QIW4?DB&R+<`q@ zsb(=o$$d6n+IO6L+YZq5uablx*6&Qi_c`SlbyI@9bPW=83d*wxa@QCOSukhLMC^U= z`q=fS3BN2Jhu%s~b?>XNU5Iv52|uQb6EUg1N={9u*Eo84oVN*3)JQtJ|I2xJ%ng!~ zW%6eT9cuz|22w|do!p1#T__a+a!{#qLZnw2vk9+G!2uneoW@><87;Nk$fqv}b+%J( zddSAW;%?f=tag2>e`n~s7;zmH?oaLGwxx*^6E@av(*TBDIE6U;{sstnnjs`h32h2wjb2d0KRxiztjwRu}RA7_WFMEXA zlc?=yy@}Fq}qa zmsZB_dI#qJ?OgeM$-hl~zX2;k0H;(E4!2cQRFn_8yLk8Y+grC%y|xvWmKx~iUkj`^ z4dSVfku%OQi&@M*p{pBSTUQ62A~-5aAh}s$upKr60~2qRJT*z>iHHS(XUF#K#Kq~M zF%n6_q^G;cUeva?RCZZUUtdd2?di*xCt<=JTwL7nvaHM8(9Y@(#+% z53r%7+1Ui+AOHYkW0tOEMtOO8si~iG6P*+mAYg0I|9-s#$l|&+`VKDc0?b@|{ z=gy>+6%T)IIU}5=wsz9Yj2$346Em|qlEbbW>~K1jkB&+w*mmYZVW_B|IC1kKw_H|q zbhMW!0MN0CiMFxUbS({y`1&W};~$^cYFk;QLpcH7OKE60w}X|HpO^Rao;`ck8*GGQ z9T8zNoUj{yvxVGKqGLbW5c2vmYzz$-7nh1+SeW`q2@PCuL`2%hkEXCltt~BYNDj58 zId2E9A3SqZi&Ih#0#f}ATT2G@c6Ft%+rW%4n{$t27*A?$Zmw}uyf@yNiCU(Tln1*DSPkRPkudo39)=c=*i}p6xOl8`W5J|9%CieoGr0 zZ4Zyq`A;43g@wm4>Q}DBqwNM8_6uk|C@QK2MSDLWAPjDpo?b*-rhfAGj5|}}qmPR^_!o`u1?iP$E$62t72zq@Ds+9`#Gu;8l!V#S-8)>UCC#basd zlutR0Y3b?8H*VZ0p6|5cjk+*DXje3BS0r+!nyIzD-HP0qw~2*C$IGicVcQjufU0I5danI*T z&B!CUF#fL_7Y{MHi(4y-d9v(|T`5D9hGT*IDW(D{E`5)2HujVq|RX z=tvzLyquVjaFB=RYGLPRdef6)Gy$w>Uve|wlluL>RZm~NI@Q|R%HFdRuJF1xQw(Mj zz?`br%(m|V-U|yiSNM&@Sa;>CbQRd@oIH6eRL~HZ8q^~f5G`!|TTl2{rMan#QpM0i zDS)Dx^1jR#J;ja@M=sskuNvK*Y}%P?5g}?7dh6CLO+CFd|J~x2OEV+1YG^IDC7l%& zYrI7b4GmXCXVHO_j(8L)J2>R>SU`7!mfXC7+v7cc|FL80uo=-JzI)fQN?Yc|eCe*n zP|hX=UF&3>RaG0k@h{e6;UN9jfPG3yN;*)8Y8XOOyy6@%AU;9CbGVidABZgd0s;c7 z&kS^RNqCI1vWBB$Ua1kjv$M0Mr6mD=yc@aM*(LhrN9UTa=VDOs<1sV%kMTMYx2=kJ(JFUQJ0!QPNJ=g6`kl zf$n{L^y?b8hpMf;y@D}~$-rgf^Rz({YFErY+L$yB}zI9b5xabX0%sVHvoFp#! zp~J>u_Yal3C5+W^GMz-RBTP)jL5Q&b-zol|>hzYsP5*Kqz5Lc~)!Z$+cBN^hYtN)^wfpq$GtW;a6F73py)pT>lR`T4N}a!dE1s)EDAQ#*3Z7Sg9(q@i!(cpkjo3vCpdDg63Y z4d5T#zmKaKVt?L?Hq8KRn!hX6>d{%xvE`fdG3S1oyUn=`eV4wEFNH`n#}Eo{456OJ zBD)xCtn^2spYdm+Z)0t}IYsdB;luq$(O2e}5F;oLA2M^wxM|{0RhBLEy8kxm*SSDj z1o>bO2FSb?G*j661Oh?R&`(PWm6#Kc6qA_MqEOn+>A95MYnzP|i&a>lsr+qT8~`7r?!cx#z==)eJA zsS>mVEy5xRs*jHh1TUNpOSpAwE#2w-`A0J|Gv{=}LP8QVGBPfaSm1p}UZxa&zYqT7 zy5K*lNPjA^f0Cc}e;}^s0YwDpHg{;NWvg{TPurx6t7}pIwT`{epD+<}*mAfm0n8zO zehv6LfS2r?oDl~}#aw4}<|*NO6X+yWELxwIwl=5E2mq0my``?6^LhFCX>oBU@7%dF z_UV)6jT_I^)z!Ce-FmEB071B_>ZuVy#Q?6>lF9OP{;a~w?_)CmT5mC?5hv&jan z*7D=co8nGq>&ekZ??6YiSe_??*7Kf_h>#WU*J6_>LU)R-o@p~_Zf*`*c7(KRHjG~9 z&SHz^B#X8T-A$V|se>3JX49QAQWv(6KD*>m)gcHUIl@j#&VgOaB_+`ROnx zRi&qYu_>LdmUV=IyGnld?rcbC=o#E6r;=`)0{Y`$)g}6{nQC%!at-~C7CL1fwq1nL z`X{6GW5jaLWeS}9;ySnA#&ZjS5C=^PFq4+HHtfiAI8@w@<82l%Zhb#SB%asM2!i!r zD~pB6=q+l5Utr2&g2NuS_rYW2q6h@_A_GDAg>7v<+7JbodEeh(%f=>)hYx@OJ3Bjo zDO{_i*12;Hu@j%R?%E}JQN`I=yv`h5X53-ft;A$YTidY4QH@ilerd|==g9jeWvSFv z?xXDH{B%vcc=LDt{*gj_Z@H`;cC)Sb>ASTB4)wF~f0j6ZEzTFWX+Hz#la!PcxiNUk zbLzzgx22J=9WcPUyA42kWKs-(FQ}9-dB2Ai?LMLA?p_k@HpbWE)MX8zCzOZWRiN6p z@=@Hk^aQ-G-$0l+BDi_;<}<3Q?aPxDcz}YQ^EokE>gu>&kJ*mrY4#-*j{|S4ePh%G0MOE?v4* z+t}C+)QT5lVq$VgNGR;}Wi=}c3C!uX?>*%!qc364p z;OhsVHzpgFI3Y}e2#c0hh+r`>PS~=a*c9)!(Btg*dWTMAeo}FT;{*szjruVpgAIIs?s@J0^>*%;M=9;YYR zrMDN$W@`EMa?JxX+M4O5{nIX23%YnQa8)q+q3gjfvu~9#>*t+kuYh0(gXxy@N_1j; zz;+m9(6l`%O^OjBAQWt?Q{l0w4dyd*n4wbLpy*YirFCKVN?HGkndLa~?NX>j3t*tE z7e%}Ay4c!Hqz9}*fVWzP0_3t@KVXf?&&tlWJAc6T+O?Kw8FxzMI+hgBvN<_9-3IR+ za2WCzpHH>_g9iMU(ZIr!ut1@Fmg0}Z!53(!w{mOBS?ktb1SX<7`>{UAVNiA)UpjMN zE>>Jj3{hO*nHClnozJiM0&dgN*H2$ubOGrE+C0Kpde1K2gqw%ZOKE8-fOxx&^~n~t zw%imZ#IHYJ1wc2sk@@R~1O!6rMsRf_1V46RO=Dwxo>luHX=#I{rKP_@7U{X|@bUQG z*ox!Scy5{!zfM-maBV)N67ZgW0}*04#iTBjlo)12(5awmq0XYE#RqC0 zzjg-O!_O$(z9Ckg>Rdj{3Ghqbsx3neN)S-<9ISUO$$?oBLBC1~v-fp|plFKHh7ZUE z^7yk0E7SyVx1*220XMtaqc;_q!=BdfqlP}@kcjKDtuWLtuxZU}Hv-7AU%32#ofa!SpyZtH9)Kms#kJ_vLa^dj9-*RTDQH?0N$`C4w?H-VT5#fP*5$tRr~%fR3IxaRRyv_smB)w6}dztUPMx2#y2B#}Im)`!dnB z04GoFB`6D(X?ApU zKpXcQ15Soo2vit`u(C8O>OOxBqyBs0r(Qk;4u529vt&Zet5@cey=4H*f#J1#F7zD0 zKy%=rycO8_07jOAKc|#-Pfw2{6GF~! z>+7`ui6HI{s04^~DiA;5C1x#^&_#Kp9&6Euqb{#i`zxP`QbVibt&19No$+cmb~(Z- zt0_{#9>LRl+YUtE*amKgqyzDhV9BRrDp8Vi!J=LH*3B@ffgi^vDuX#>JsnY z-$d>%(txfD6<=FlAL1~0PWboZo!Qw5uC6l0YPws%;G0hTtmN*2)1C&C2=It)HM1h~tLas=U22HN)=1p0hI z#Zmzax9lhS%TWw;bgtqo_$P1s3zd6lqjK~j9*dFM5TN@6EgeH%3=}hP*O##qX{dko zQ=my3FTP}j1|ZHSC8d8ZS%cNs~U7VTMvpxab+ ze(3;==KE!U6$Z#sQ;a;OPh$vB`g3jiG~0~}U45%g<|Ut7&51Sj34QPlxC9otmGgvq z?!MT?0biOC9G;=U=x1S)tE(%u0J|(s?yE2cybzXm@x@wD1UCPA2K^-^e!IobfnKQr zKo<;2hZof zB{`R=*pCfSU85W0p=$#CmyTaw{g9I%jECaJQ7ID@VEv{Ik$jjlDk@r_y@CSp4YgT# z3@y&*MihShMx2owiB~1^xEf9qW^kCXmoBTp^%v~oYMPpB`6l8S7A$yK>-&pqYG?O$;?Px3lQM{isY4htW5lRdS9SyYjqzp==U^<8mYJ z@m!g%0lX(Sw11*_T(HM|vdj`>9SseQiXpmml~*zQLh~1$FX%*Lf{~AvM;Z|Q0)9+_p%dr1>ji-`8 z6erq`XP+xtoV@T$lQqMUK;hySOCdT&sr>j-0=>Mf%uw+m$24Aur3JJWScgP_UXBh9 zDIfso7~HtSlluHQ2%c&P{(+$LkW>rJbF6uWM@ROmp}I1XRY`GMjIG&)5PUTT)We z37M;WkEUpi&Jk<8n+7YKX}Ut<6GssN@Xe7;9uF##V)w?f;gWy!BwHCbBbQ!RS0bem zoP~exW$ePHDdpuxR_$3@E-r;w3zf5H{XqWL)YRkwzzv=^p#JYXR)0R}rmD*Fm8md! zYMNiWmH}d#s%u7UY-I)K_U#Ux>@yh|hXI9eRz{%1d&_#-Yc*7QRs8+o6xiy-+!`0} zA5rZ%tYtad24#+bU46K)B8V%=8Tb7BD7I#%rfIpknmC{uBTgl>8X(xXpdgSJ zKg*O5fk|F@fm$S+pwGE2NPOwPL?H+RwOEk8d$fU5%-sQ7Ov zjFZ=oulE3KYI-*d30gn+fsg~-5%ix{5I4ad*n`o_zZNc7G`tn4e(i|e+Yvjku}(@k zPXq(&gMx(X=EZ<_RQoOaMqZwJn$<92184}rHJ~=EbSZ}(Zo=^@|5?si+jkckQGW^n zeY?{BWqPRh?`lz1H2_j7E$`pQK6`d#WOURDRt1-koqa4MEUXTs)6b*TK0yezTsCzd z9|sI#HiD&7Cy{K1WH;cOdsQAEd8(=c$iKLxB+qTm61*03sLSG|k55`VJJSHJ?AW<8 z4d&kK*RRiDFlsQpPUxURM#{*Cm7F?#ngrz?%yU{nVXSnvp*e7$A|#S@bgVwU3&$n2 zv}lToi=$Kxv@V$QVoy|nd)>Qt5A25BO;&Ie2A>FvwggyWRH{H`KRLe}nto#g9xmuo zAjn8_sm9O<_ufxVyC`Is!TT>Bf4n!r*}=gaP!@tu^`_&_-CtEkbXxKEz=AC)DVZA% zQnhS|lz?-VF!8S%cm%2ri0xp8W7qfC6x5NOmdAf9MrGwXZ&4u1U@)%l_$hvMA>rc9z&@Bk)caPA{&#~03T<7RgM$OpTPE5bTVJo~cCwiavrnJv zm6sbKTUL4A$A{wMvmQ{bC4H3!_P`?^z+-2_4D9Z~2Kb_qf76|j`m;N8cxT-+16H^( z*Tp~!L+lHR_@)LI|JS@xl#`D%Kff~AGgSoCa4vqQ;c){YtxCCnQK0{!vXL+u?fQ|O z+*_s({#0vi2*0YXhLKSgTo|w^4DMrN3?5YHZ$#k6IpKWRm_azM6RI$<|M;${+JCoP zp3OveQG~dyQHd=KeJLXYT7tE&t7N?WKH#NyZd35Dh*=2*cQvSa>q{3;X z7+{d5^%04&u|GjOL8i7|xrb|oWK5%Y%8dXn8PMi*bi#m3Z}=*FFd0v5z5C{k5)8yQ zAQKApzKzhzN#M-;@M!p!FW#ZwR=Ly@ozq@nh9CB6V)O74Y8tyi=xOi8hj@ zfJ*%X4f$PS?TfWH(10`>wmBvi5@Z;v_!d~VZ(l43JFFYWs~j4cE%_)flyJkTY z{a|R&`r|bHKbO#VyL&2y8>Qm`uUdWj@LaFRZiEj_98GogIM^5YBro`rG7fxxa%y*LBtu z_^|(}F8FliGw`}q!;hT?l`uw6<6ng%c{-7Y;Nw5AN9ISMxge_Hu0Fqj2H&&`^;1~F z7mqK#6AcKTU!Y5^8<<^^oumD{teRX>;$9ii+iRqIIP`=+iVQ^ht8GDcGqk9!Tem{s zb48f=KZh;^u+>x{fJF9ZNd*NuSE~Ia;>+RwdkbIc9Qkh9Xc4&5Xwof98*H-?JWH^DS zOl0~$IU9cr*8XGX*(g?g6LiV4sh5n9n`xqun)ASD_?K32(<-`?2)->q7H@TF6a+^32@HMROl@=nOPt7? z7H7X9|HSc>^z=^7zJ2?4 zO$`10Q~7mml=*pproZ>yfDJ)yq=Oa>@D1!q0&keXUX10x?N&>i%r)LZYf+wBAp&3; z>|1bn5%dH}!lAb7$dMrMIqS%n>*du@L%!vz;aZT z7nL9e@V}~jR5L`<8U2%sklg5nfj%HPGKw}))2k^_QVevjwVmANJwJn9wIPEvHU_y| z#+3PHz(0|#qetz01}hfMOM0yoHVORnGiXxsGwwB(d1(a&&Pvo5#Oo`IH#BHP!XGMB zFGYexn75&;!7XxXYHAO0z5Ltvk0w47aN1;#jdM)+G&W25e_`=?uNYON{jJoyM8|+1PYW%{<%h4{q7Dvk_q<_uzsZ^@6}+4|3gwNd)N;jz zccuruCKo-*_ppzekz$$~33ASDLyzA=KQPJDqhZD9{70K(q_B$%(((Fic0i(b37h%> zc5TXJk`Si#zIcC>qFVI7Edvuv2f#K&!+0=YOd=`<`}>Pu{S@FbAihJgvPJ-uVbtpt z*hK9-d?6OD8d?P;!>8mfK+xT1oY1fl=wIr9?;2Wl@?r^-)WP77Ilh$_mMw5dGYIheW4)k-Sn31G)_v639T7YGcbsRE8DSa zm!*R~+xLG$r2aM=;!hbGMj5$|?0_c(&Z5LA1Rj&lhF?bShETy%@m?2sxcLy`d*7;K zoC({rkC^Yh22!Ijjl}&&sM6q8Adf7oaBve1gix9K-5VBS_k6-2pMsqf?ig>I){g29Qi4&)n|WaH9Ms5* z9)_D&iWt|E!TiMWpilrvN#JWLk?%f|3;NpNc@nfIdcby7 zC|LL1FX0YMopSg`mtSx94z%m9TvIk(y&Jd~TJ*gjWkY<*KdW@+Oc{j9KEMCb!xK^x zwwDk^#;XJ1~gGBA*>u>qxh~D2SuzqMaUgFiZECd3f3~+ee_Tm z2h!H(XEh+M;P{p|jIDc%H`WA7s|i_%>G*Oz2&F0%+*Z2^L}@jTh!{QWDDXI57_M12 zG$D9=pS88M8|VsOWV%?81|RAl+4~cOJaj-`fS$C2ojn!lppYa`DEL08tJpCeNY;)m zTL$`^YdD?F0e`M{y3^DT%iRj=0-z41vcO%NzRjiZ{nt3=e~_5|3W}9*T<)KaCMGA3 zuP#rD7w-UHdkbMrWDpX#;jhcaa92@MFZWWFk9Uo^t?dF9RKlK$3W%{mw5WKMI_?`k zcS-ot%kSWk9gtL;h}sPOk*wDo)-ha6fRz`}%T@Aa<|OFbmL(dm46+t44n6>h#m2#E zpUqnwuU_`mdmuzIygDoCZEpZ+F}M}+F<@{@(pR7fz`$A^5-OwMAiyAE*1&qoc*ERBD$apUTi}R&#XJuu1)fqZX_GUsh1XLvD z@bK_r>R9?*i-zjvRv{UNehpZV$Yy44*$l96Au_1dS%Iy9eYx_~4WLvp_z;dzu&(g9q@#hRjz5mv!rVaY(mur2|RLNGFlE?;~tgd~%KUbl2)og$4J z&KF^&%!1xDDwQfLgFKvF;x>^mD!dj-`bh8uiv}nOdYMuH6`GC^yP}!Hl5X=3e<(sC+SQ>$YvEYCbPn`Et+X7-YGmM)JV)&#%#EL?g=;!aBsCBGAUvIkqGu~t2~Pg59YJU^hL!&*HHhtSx(C0M`45aTu^emDOx(M+V ztCDKN!AZF5xL`;WV>(Nm@jNJ<4($+^02l)MAv6IoA0Es?twk<9JioFhoj(mM|Pojxq@9?d{F#qpvRD5+HYl z!DW@r>(Pjca_W$F@AX_Tq`?*rhC=Ln$-#dVAMW3&A1HOG59o#+y~=smY#gJW^wf0@@)W1&Q zA3Sa6%@)Yaz;JXgC}@{Y0g`%k*MWiI?v`)7@iAlTPc(7$4Oa^QZ!us_pF5Rx^5U)k E2d#-XIRF3v diff --git a/packages/osd-charts/src/chart_types/xy_chart/rendering/bars.ts b/packages/osd-charts/src/chart_types/xy_chart/rendering/bars.ts index 5dabc645ab3..5bf35fb0e9e 100644 --- a/packages/osd-charts/src/chart_types/xy_chart/rendering/bars.ts +++ b/packages/osd-charts/src/chart_types/xy_chart/rendering/bars.ts @@ -39,7 +39,7 @@ export function renderBars( sharedSeriesStyle: BarSeriesStyle, displayValueSettings?: DisplayValueSpec, styleAccessor?: BarStyleAccessor, - minBarHeight?: number, + minBarHeight: number = 0, stackMode?: StackMode, chartRotation?: number, ): { @@ -54,7 +54,6 @@ export function renderBars( // default padding to 1 for now const padding = 1; const { fontSize, fontFamily } = sharedSeriesStyle.displayValue; - const absMinHeight = minBarHeight && Math.abs(minBarHeight); dataSeries.data.forEach((datum) => { const { y0, y1, initialY1, filled } = datum; @@ -78,20 +77,16 @@ export function renderBars( } } else { y = yScale.scale(y1); - if (yScale.isInverted) { - // use always zero as baseline if y0 is null - y0Scaled = y0 === null ? yScale.scale(0) : yScale.scale(y0); - } else { - y0Scaled = y0 === null ? yScale.scale(0) : yScale.scale(y0); - } + // use always zero as baseline if y0 is null + y0Scaled = y0 === null ? yScale.scale(0) : yScale.scale(y0); } if (y === null || y0Scaled === null) { return; } - let height = y0Scaled - y; - // handle minBarHeight adjustment + const absMinHeight = Math.abs(minBarHeight); + let height = y0Scaled - y; if (absMinHeight !== undefined && height !== 0 && Math.abs(height) < absMinHeight) { const heightDelta = absMinHeight - Math.abs(height); if (height < 0) { @@ -102,6 +97,9 @@ export function renderBars( y -= heightDelta; } } + const isUpsideDown = height < 0; + height = Math.abs(height); + y = isUpsideDown ? y - height : y; const xScaled = xScale.scale(datum.x); diff --git a/packages/osd-charts/src/chart_types/xy_chart/rendering/rendering.bars.test.ts b/packages/osd-charts/src/chart_types/xy_chart/rendering/rendering.bars.test.ts index 2486c4c6e9e..14702b121e4 100644 --- a/packages/osd-charts/src/chart_types/xy_chart/rendering/rendering.bars.test.ts +++ b/packages/osd-charts/src/chart_types/xy_chart/rendering/rendering.bars.test.ts @@ -209,164 +209,139 @@ describe('Rendering bars', () => { expect(geometries.bars[0].value[0].displayValue?.width).toBe(50); }); }); - // describe('Multi series bar chart - ordinal', () => { - // const spec1Id = 'bar1'; - // const spec2Id = 'bar2'; - // const barSeriesSpec1: BarSeriesSpec = { - // chartType: ChartType.XYAxis, - // specType: SpecType.Series, - // id: spec1Id, - // groupId: GROUP_ID, - // seriesType: SeriesType.Bar, - // data: [ - // [0, 10], - // [1, 5], - // ], - // xAccessor: 0, - // yAccessors: [1], - // xScaleType: ScaleType.Ordinal, - // yScaleType: ScaleType.Linear, - // }; - // const barSeriesSpec2: BarSeriesSpec = { - // chartType: ChartType.XYAxis, - // specType: SpecType.Series, - // id: spec2Id, - // groupId: GROUP_ID, - // seriesType: SeriesType.Bar, - // data: [ - // [0, 20], - // [1, 10], - // ], - // xAccessor: 0, - // yAccessors: [1], - // xScaleType: ScaleType.Ordinal, - // yScaleType: ScaleType.Linear, - // }; - // const barSeriesMap = [barSeriesSpec1, barSeriesSpec2]; - // const barSeriesDomains = computeSeriesDomains(barSeriesMap, new Map()); - // const xScale = computeXScale({ - // xDomain: barSeriesDomains.xDomain, - // totalBarsInCluster: barSeriesMap.length, - // range: [0, 100], - // }); - // const yScales = computeYScales({ yDomains: barSeriesDomains.yDomain, range: [100, 0] }); - // const getBarGeometry = MockBarGeometry.fromBaseline( - // { - // x: 0, - // y: 0, - // width: 50, - // height: 100, - // color: 'red', - // value: { - // accessor: 'y1', - // x: 0, - // y: 10, - // mark: null, - // }, - // seriesIdentifier: { - // specId: spec1Id, - // key: 'spec{bar1}yAccessor{1}splitAccessors{}', - // yAccessor: 1, - // splitAccessors: new Map(), - // seriesKeys: [1], - // }, - // }, - // 'displayValue', - // ); - // - // test('can render first spec bars', () => { - // const { barGeometries } = renderBars( - // 0, - // barSeriesDomains.formattedDataSeries.nonStacked[0].dataSeries[0], - // xScale, - // yScales.get(GROUP_ID)!, - // 'red', - // LIGHT_THEME.barSeriesStyle, - // ); - // expect(barGeometries.length).toEqual(2); - // expect(barGeometries[0]).toEqual( - // getBarGeometry({ - // x: 0, - // y: 50, - // width: 25, - // height: 50, - // value: { - // x: 0, - // y: 10, - // }, - // }), - // ); - // expect(barGeometries[1]).toEqual( - // getBarGeometry({ - // x: 50, - // y: 75, - // width: 25, - // height: 25, - // value: { - // x: 1, - // y: 5, - // }, - // }), - // ); - // }); - // test('can render second spec bars', () => { - // const { barGeometries } = renderBars( - // 1, - // barSeriesDomains.formattedDataSeries.nonStacked[0].dataSeries[1], - // xScale, - // yScales.get(GROUP_ID)!, - // 'blue', - // LIGHT_THEME.barSeriesStyle, - // ); - // const getBarGeometry = MockBarGeometry.fromBaseline( - // { - // x: 0, - // y: 0, - // width: 50, - // height: 100, - // color: 'blue', - // value: { - // accessor: 'y1', - // x: 0, - // y: 10, - // }, - // seriesIdentifier: { - // specId: spec2Id, - // key: 'spec{bar2}yAccessor{1}splitAccessors{}', - // yAccessor: 1, - // splitAccessors: new Map(), - // seriesKeys: [1], - // }, - // }, - // 'displayValue', - // ); - // expect(barGeometries.length).toEqual(2); - // expect(barGeometries[0]).toEqual( - // getBarGeometry({ - // x: 25, - // y: 0, - // width: 25, - // height: 100, - // value: { - // x: 0, - // y: 20, - // }, - // }), - // ); - // expect(barGeometries[1]).toEqual( - // getBarGeometry({ - // x: 75, - // y: 50, - // width: 25, - // height: 50, - // value: { - // x: 1, - // y: 10, - // }, - // }), - // ); - // }); - // }); + describe('Multi series bar chart - ordinal', () => { + const spec1Id = 'bar1'; + const spec2Id = 'bar2'; + const barSeriesSpec1 = MockSeriesSpec.bar({ + id: spec1Id, + groupId: GROUP_ID, + data: [ + [0, 10], + [1, 5], + ], + xAccessor: 0, + yAccessors: [1], + xScaleType: ScaleType.Ordinal, + yScaleType: ScaleType.Linear, + }); + const barSeriesSpec2 = MockSeriesSpec.bar({ + id: spec2Id, + groupId: GROUP_ID, + data: [ + [0, 20], + [1, 10], + ], + xAccessor: 0, + yAccessors: [1], + xScaleType: ScaleType.Ordinal, + yScaleType: ScaleType.Linear, + }); + const store = MockStore.default({ width: 100, height: 100, top: 0, left: 0 }); + MockStore.addSpecs( + [ + barSeriesSpec1, + barSeriesSpec2, + MockGlobalSpec.settingsNoMargins({ theme: { colors: { vizColors: ['red', 'blue'] } } }), + ], + store, + ); + + const getBarGeometry = MockBarGeometry.fromBaseline( + { + x: 0, + y: 0, + width: 50, + height: 100, + color: 'red', + value: { + accessor: 'y1', + x: 0, + y: 10, + mark: null, + }, + seriesIdentifier: MockSeriesIdentifier.fromSpec(barSeriesSpec1), + }, + 'displayValue', + ); + const { + geometries: { bars }, + } = computeSeriesGeometriesSelector(store.getState()); + + test('can render first spec bars', () => { + expect(bars[0].value.length).toEqual(2); + expect(bars[0].value[0]).toEqual( + getBarGeometry({ + x: 0, + y: 50, + width: 25, + height: 50, + value: { + x: 0, + y: 10, + datum: [0, 10], + }, + }), + ); + expect(bars[0].value[1]).toEqual( + getBarGeometry({ + x: 50, + y: 75, + width: 25, + height: 25, + value: { + x: 1, + y: 5, + datum: [1, 5], + }, + }), + ); + }); + test('can render second spec bars', () => { + const getBarGeometry = MockBarGeometry.fromBaseline( + { + x: 0, + y: 0, + width: 50, + height: 100, + color: 'blue', + value: { + accessor: 'y1', + x: 0, + y: 10, + }, + seriesIdentifier: MockSeriesIdentifier.fromSpec(barSeriesSpec2), + }, + 'displayValue', + ); + expect(bars[1].value.length).toEqual(2); + expect(bars[1].value[0]).toEqual( + getBarGeometry({ + x: 25, + y: 0, + width: 25, + height: 100, + value: { + x: 0, + y: 20, + datum: [0, 20], + }, + }), + ); + expect(bars[1].value[1]).toEqual( + getBarGeometry({ + x: 75, + y: 50, + width: 25, + height: 50, + value: { + x: 1, + y: 10, + datum: [1, 10], + }, + }), + ); + }); + }); // describe('Single series bar chart - linear', () => { // const barSeriesSpec: BarSeriesSpec = { // chartType: ChartType.XYAxis, diff --git a/packages/osd-charts/src/chart_types/xy_chart/state/chart_state.interactions.test.ts b/packages/osd-charts/src/chart_types/xy_chart/state/chart_state.interactions.test.ts index 2645047ecb0..f0b3134c273 100644 --- a/packages/osd-charts/src/chart_types/xy_chart/state/chart_state.interactions.test.ts +++ b/packages/osd-charts/src/chart_types/xy_chart/state/chart_state.interactions.test.ts @@ -24,10 +24,11 @@ import { Store } from 'redux'; import { ChartType } from '../..'; import { Rect } from '../../../geoms/types'; +import { MockGlobalSpec, MockSeriesSpec } from '../../../mocks/specs/specs'; import { MockStore } from '../../../mocks/store'; import { ScaleType } from '../../../scales/constants'; import { SettingsSpec, XScaleType, XYBrushArea } from '../../../specs'; -import { SpecType, DEFAULT_SETTINGS_SPEC, TooltipType, BrushAxis } from '../../../specs/constants'; +import { SpecType, TooltipType, BrushAxis } from '../../../specs/constants'; import { onExternalPointerEvent } from '../../../state/actions/events'; import { onPointerMove, onMouseDown, onMouseUp } from '../../../state/actions/mouse'; import { GlobalChartState } from '../../../state/chart_state'; @@ -44,6 +45,7 @@ import { } from './selectors/get_tooltip_values_highlighted_geoms'; import { isTooltipVisibleSelector } from './selectors/is_tooltip_visible'; import { createOnBrushEndCaller } from './selectors/on_brush_end_caller'; +import { createOnClickCaller } from './selectors/on_click_caller'; import { createOnElementOutCaller } from './selectors/on_element_out_caller'; import { createOnElementOverCaller } from './selectors/on_element_over_caller'; import { createOnPointerMoveCaller } from './selectors/on_pointer_move_caller'; @@ -51,12 +53,9 @@ import { createOnPointerMoveCaller } from './selectors/on_pointer_move_caller'; const SPEC_ID = 'spec_1'; const GROUP_ID = 'group_1'; -const ordinalBarSeries: BarSeriesSpec = { - chartType: ChartType.XYAxis, - specType: SpecType.Series, +const ordinalBarSeries = MockSeriesSpec.bar({ id: SPEC_ID, groupId: GROUP_ID, - seriesType: SeriesType.Bar, data: [ [0, 10], [1, 5], @@ -66,8 +65,8 @@ const ordinalBarSeries: BarSeriesSpec = { xScaleType: ScaleType.Ordinal, yScaleType: ScaleType.Linear, hideInLegend: false, -}; -const linearBarSeries: BarSeriesSpec = { +}); +const linearBarSeries = MockSeriesSpec.bar({ chartType: ChartType.XYAxis, specType: SpecType.Series, id: SPEC_ID, @@ -82,11 +81,10 @@ const linearBarSeries: BarSeriesSpec = { xScaleType: ScaleType.Linear, yScaleType: ScaleType.Linear, hideInLegend: false, -}; +}); const chartTop = 10; const chartLeft = 10; -const settingSpec: SettingsSpec = { - ...DEFAULT_SETTINGS_SPEC, +const settingSpec = MockGlobalSpec.settings({ tooltip: { type: TooltipType.VerticalCursor, }, @@ -98,7 +96,7 @@ const settingSpec: SettingsSpec = { barsPadding: 0, }, }, -}; +}); function initStore(spec: BasicSeriesSpec) { const store = MockStore.default({ width: 100, height: 100, top: chartTop, left: chartLeft }, 'chartId'); @@ -1067,3 +1065,49 @@ function mouseOverTestSuite(scaleType: XScaleType) { }); }); } + +describe('Negative bars click and hover', () => { + let store: Store; + let onElementClick: jest.Mock; + beforeEach(() => { + store = MockStore.default({ width: 100, height: 100, top: 0, left: 0 }, 'chartId'); + onElementClick = jest.fn((): void => undefined); + const onElementClickCaller = createOnClickCaller(); + store.subscribe(() => { + onElementClickCaller(store.getState()); + }); + MockStore.addSpecs( + [ + MockGlobalSpec.settingsNoMargins({ + onElementClick, + }), + MockSeriesSpec.bar({ + xAccessor: 0, + yAccessors: [1], + data: [ + [0, 10], + [1, -10], + [2, 10], + ], + }), + ], + store, + ); + }); + + test('highlight negative bars', () => { + store.dispatch(onPointerMove({ x: 50, y: 75 }, 0)); + const highlightedGeoms = getHighlightedGeomsSelector(store.getState()); + expect(highlightedGeoms.length).toBe(1); + expect(highlightedGeoms[0].value.datum).toEqual([1, -10]); + }); + test('click negative bars', () => { + store.dispatch(onPointerMove({ x: 50, y: 75 }, 0)); + store.dispatch(onMouseDown({ x: 50, y: 75 }, 100)); + store.dispatch(onMouseUp({ x: 50, y: 75 }, 200)); + + expect(onElementClick).toBeCalled(); + const callArgs = onElementClick.mock.calls[0][0]; + expect(callArgs[0][0].datum).toEqual([1, -10]); + }); +}); diff --git a/packages/osd-charts/stories/interactions/1_bar_clicks.tsx b/packages/osd-charts/stories/interactions/1_bar_clicks.tsx index 5ae5bf0c75e..f06e100fb4e 100644 --- a/packages/osd-charts/stories/interactions/1_bar_clicks.tsx +++ b/packages/osd-charts/stories/interactions/1_bar_clicks.tsx @@ -70,7 +70,7 @@ export const Example = () => { data={[ { x: 0, y: 2, obj: { from: 10, to: 20 }, sObj: 'from 10 to 20' }, { x: 1, y: 7, obj: { from: 20, to: 30 }, sObj: 'from 20 to 30' }, - { x: 2, y: 3, obj: { from: 30, to: 40 }, sObj: 'from 30 to 40' }, + { x: 2, y: -3, obj: { from: 30, to: 40 }, sObj: 'from 30 to 40' }, { x: 3, y: 6, obj: { from: 40, to: 50 }, sObj: 'from 40 to 50' }, ]} />