From 3fce9dcd2fd0ade4cb67a911fff371cfb6d822a4 Mon Sep 17 00:00:00 2001 From: Leonardo Sanches Date: Tue, 20 Apr 2021 10:46:03 -0300 Subject: [PATCH 1/2] Update README --- README.md | 18 ++++++++++++++++++ docs/image7.png | Bin 0 -> 13618 bytes 2 files changed, 18 insertions(+) create mode 100644 docs/image7.png diff --git a/README.md b/README.md index dc67512..a0de01a 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,7 @@ You can try out the [Speedometer Chart Example | percentSize | 0.5 | number | no | | | showIndicator | false | bool | no | Show a needle | | indicatorColor | #808080 | string | no | `value` color | +| indicatorValue | undefined | number | no | Show a needle in diferrent position | ## Basic Usage @@ -104,5 +105,22 @@ export default class Main extends Component { ``` ![](docs/image6.png?raw=true "Needle indicator") +```javascript + + + +``` +![](docs/image7.png?raw=true "Needle indicator 80 130") + ## License MIT diff --git a/docs/image7.png b/docs/image7.png new file mode 100644 index 0000000000000000000000000000000000000000..e2a675d827b5d1e9731d52504cc995e06e30365e GIT binary patch literal 13618 zcmdsei8q^T_qLwCs;Z^twuBa?YN`_Ra9Wg>L`zLI)huF;2sND+HB;46F%?DCJjD>A zs97i>W--P*#yozB^SGX{&NAQqyCtxu$yy{{Ni7Bk3f&8s7hk!jxDIkuW4O1 zj9^q$Odgcq3lp~7UQ|?)txr`Sz4S6$9jEmehbNwGnmfC@>?(quvDYLx3!736zkis~ zMRi4jlO`sVi&2sDrdo)^oAR$b0qj9Ht%K-!7jC}bWK_^`Wx4)Aj_ny;Fx&S}AG4im z_#w!wr^u6lwD}|f+6qXVWHkX@Yc5M59c2B5`k>^ub>f#$KJlH3YEtdH*aa%C=Rp^K z@`gX4@=|5IL=|(dk!q4r?FN-X#^sBDsk2y6ZG`e%rQ&+=zw%Fzx)**ue|7EaXqG%*$3M#+{H*`oiAw9^g^91JoeT)&`nIoY<{H z?#?(VuBDaK*JtLaNF=kZiJ|n1o6?K3Pb6g1Ik6gTtfqov8Q=3XU{B_*VsjUD0~?bc z`#C4$zbDEzu+B}pme^XnKU%glntF&WFE9W4_3NK$Z+k7}{`hwcwbWn#a_mUYEfd_I zOEq7DncAfg(?z9ogplYYVBV`dNqL{~^0!*tZIxTQzLIslF`FL|GTNlE%ASGpp5`-= zV`Xg1V`-6CKnGs9?Zy|+FUhh-WePf6EJ5QjJ=m1I>RJ!)=Y}#5;1@U<)NZs|QzKNG z-cO#U>@CBb)C+832C(0Nlj|p9znT8@H^vZyT};2m6R{`K$7_!6z*wiC639DP*@akd}(df>QPhCGtr zg?1d88pp_|k}67`_fN-vH{B+xAt7~;M=r=CprRX|895GF8EXcq)F={wLQKLs=epv5#hFgOJ9rQ1*C4)nX`N@YJj!%{A;!J=!9u+-9jO_&tyF=VJ*I8I2t3=S=68WWzOG!dZn=}Fe5Zc z$pXnE`ywbVl65RKHFdIKiDswz(6u6aXrxpR7oP}MQ&xS*Hk#h`-EH(Uy9*3fHvQ-6 z1?&Kw0rc>7v#j)|JVD}oH^cqX``g1PO))VySi729p$u<{IDlL}y|e;h@1G#94A1y* z4f;BsSv`Uu{YevffrP*YXooL7+*@}zS=m8uw$a~4#w&tIc%#ZoWpuX7ut!R|tYP8c z|CE}RI^S)dgI(uNbi*2c{Lpv3+Xo1hAE%QZHGEr-`sN-++#Xp(T6S7jzM3t_b%F4| z>w0ecKmwYrM37m1f)$k2mDJ>2d;UiMDh!B9LUfnHU z@3k9!mb_pbZZ%a~*@Mfsch#)_1(h(v<^TBJrzLr?xMp3IMXd?!xhJDS>IfGK-1gXe z98)Nx^de|xs3EX$f1+|m3Cqr5)}O!lz4y}$uV4)?Vlz7eNcV~+ybpP>b|w2Hcr8Ct z)dm_>_Sgt%H=DvJ+-Cl@XAq3hkK1Y93|_o^zPIk7H-wx$Wq?BQ@&!Lsg3}F-gra&A zi9SWwFGmtN%9-Bxd?sx_SX)$r(>{5BBs!J3;7sI(L8d>&&To!_N#cO1#DW9Ag5J86 zv-a*ZduQiiPLFNR1&Nj?Pb!a4$4$%1`H(k#Z{86^j|!9!Spwar-c6rViTdg$I^=M| znTv4cn$Og1ZL@9f%^p6~*ZD=CLV-a6P8Ix)v*K)Y91E18aKP7^z>9PbELjNif9=Rx zUcI(99pxN`j4cZ~b3NqVmc1!I700s{JciYE!JB+SYru-jB@xi_0zvwaCZw<(M}P+f zQd3;78qyrw&LklbF7?K`FDvvQBOtaL%IfGBDx6)4H;y4wY1`HEpG@qWzo{uJ>6|k9 zVNi`u_{%xfqI-sp&O>t3kyoYDx=l8RGMULZy%5wIn{rS*EhZ#Mu=iHM5&ft~qpj@l z7$anki?S(hMQDP(R$<=84~zmEqQuTTCbV~|A7nm#=w=Sw)qz zlvR;YV1UVq71jW0*8AxqVzMVA#aZv?m?8{_-K8B39JIp}_LSPn+*Iuwi+40)bhGFU zK2%_{-cjY7KCLv86_;9|vCv@oYYXi@C<3#B z>0Y@~rDvr>>DC>LZ~&~@wmqE*R0cWB{#u%$lg3=foO(U+>%m;EIbH#{_Y%AL&}$&* z_1v$v7eU&8n);b;6ciBp<_E6j0U7H>{dRP)`C!Cykdd^VX>p#10l_ZpsgzBqrsjCj z=3!jnU>Cg&G+KIeE&21@>9|g0NX&WC{+)B;e?)>& ze0_8H3bQSwytee%YPU-9xEpl7@Y*i>-CgQ5U5Olrk*5%nI}y@?1ZfU&x>-yuAQrQ( z{EuW7|054o(C1rx_y}9K>LdH^;f2}CIj9*0O+B%_QyUf_BftxT=Q%xLOICB-xZ3RL zTOf2_8~f;Q3mlW98`rJBlUL!YkaSVMZz=I9R&muwGWG_)Wc9VHo?m?4#4IxqvPYx3g=TMRuJ;oX z2CxU=T5%64=Pl7vdSC=IntKRZ4w`$#yV4 zNr{P!uk6(3vIjzbX?N*`+H@iXe`%>x{bk_M=$AUQt4h$le(c)H09=+|239ljmWbq= zeTPUpeA}r3J0il4=;teL7EuGH=>5R|VvW6mP0AVLOpZq&l>~SeLlco-$>md|gJC{} z&lLd;)?7P(tD4$bijB4Uhzz4tVXv@~Ao*Q4^#gkBU`~DN^-AHkN z_OBNWcr0~kD8W|y4`F)ojD4zAh@0UQeOM1~Qz*X1M`J{Nhqv!$?;Ti!6t}S4V}Kl! zg_5CGxK`h$v|2zWZ|{7dnznXKbaeDWK*WN*qho*UGo8}Q>k7rXt!YbVEGv#NO6oKp zW0K>uGh46W;@D22xB)3sU_jXP^mGKgt2?!TH_-!uShja@8SL%v|HjMufYOb!UNSn{ zJN~xNy`IP5uHybM4jO6QX2j@e7PLUCCO@^X&=%@X#|hYU2JdnLxP=eCMq7JYt0!N< zF`uIph4?)S1Hhyj&gu#XIA7GM5q3A#6U3L(sE@#{mm!a(?c%-Smes*Hy$C}I1lGUS3`uf!(?ezr*1-6>n5&R#GA+TIxUq=?w zJA@?3pguP4?jBwIUC>qiRZB!e=YptU9bXk>3v{Tk->Mr7@PSCfK7IOR&(ECAOZ7AJ zn`mQz(uN(Nhs#Sp#N($&LoV+aD_*=`ZfbYi6R>G(X>ED7|GYh<{35tn)UZu@>7ksw zJe+UFftFHZ_XHzcZA`Q16EDW!2`L-Bu&Mz#Sq?(u;9pJwu$#SW_vNO89aZ8>YVEzx zz9cWMwQ9mqb>17%HP(*=$gSq?z|v)OK518^5~^f=R?9!goRyt;Wap5IIq?9Y@!tho z{ZfwIrnrG<+{_GBT5h5)&_K<`=1YwC>aRy7W~>d4GZbQ;+`!`3KLKSJjKw!s#+~L;J1fFOM<-kH$Q*5lbH+pS~A2f@K>uGy-eHd2a(M@|P)%@@Br7vbObvn^d)4E0d+;LH^n%WkTy-BtidgQ}l~ zu$W)j*k~t46&8vD!h8WtI7X_;7me&wb`EK@W{zGj)a_hy=)a+!YnL-eN2kkK$aeHa zmu?yR9B%EK;0pt zd~rh!CD2(6Z^-q1ITuzM=qD#9=fTHw{t(j>zANtU1~zo02nDW9><{k*^_D;#-ElA= zsp&ve!h~pB#U1mlT6QAx`IGDP)km#;xUrAr-CTQ0Un`sap0ZR51eGvi<{OAwu8+2cZ7@5SG^qnc?+ z1pI}1OcL{$Ioh1Wu6zpt2FaW;&qKMwIs3+NC;_jW1AyN|U#%K!eX0(rSf_}z zvd~8z0sU8Jiy-c=kA~=iP0S&HlF+>;WLG91kN)mX0U<_Dr!M-2R3*7M3dS zIWfOQO(d_l*Uqm_8Z*2}g^ynG?$1|#&MO{+#oVj%Wop$ClIzGh`h|x5vT6&9kYg5B zR!9rSc>=7-Pc;be`q?cbB-4KQJd?|6W|w>P^%P2uXt4%M=Cr6v$3Z*eGoR7zQOWtas?WDW zMUuFq2dgdqbF~D|Yqg&-nOpSOA5D75P=HYcy4*Tf$y{mC9b5LSd&zu|L)+!h+-r&& zJCJ7pMXE)NjjiYzR0E(^?HD1S%7gLO@PebWRoNB%4Rie!jOOKDl9vUkX?S=Tx$At} zY(tL>+RaV^joQkq(wiP;C^I82_P*c4N+2&gQ}fw zc*j>68I7RyW;zN2pKAmxl{iL*x|0t?Mfvq!7SlTC=xbIzV4J>XGu^W6>?b%A7#4^uvqJ-XF+5sQ=coac2G4>}+Yi1dw(x=ei>Q}l z+pgu&mye2St$v#8xH|^)?H}l6V$rYftTS6{?8#IGc44stcVKS=8IGda-N);%9(fbz z=l5c~jt}_h660b*Oe2oj$v`rlec5FM{Zw67JB~hCX4!x4%^ePN^L;pgM4DgL;K$Q) zx65fQ%glT}Id*q;Ow+D@Af zBkJG_AOx}SbExfE&lQZ{QYAdu*wgv!1L@sr*QB*X|Cm`u7cFIlE-B5dCttAM;8FSE|<42W?D7xg+Db|*dN`hUp*4ao$<=!oragSxDNLa zPM_0;H2DQk3s`R4r{(?^CFzjB=wxt_4VRL zGcWQAz#7;MO!8+MY1x-Fnq?nXvuU)%hE!|j+-s7XwzejX$7-n3fFqs8Lhrh$?U(q) zEZVO^2HwUdB}z-|PmhT$Y1rhN1c6E&H8w@E$YR`26-HFpx=09W;b+^Nt!h1WRCEva z)a3as!GYM0Sx?KGD)7eKje?q!TX8#gt@Fub{m<|)Z$^|dWaQ1L$LrZ{K}Gct6WyS< zvKI28&ENWxi|amAFys4hIQVPp6?AU8)M+FQ1?0}vz2@4>MPns8>Y9jc~Te z9=@-qX*^hhBMwiWIdC|HA?v<93ucG4_!mgA2F8{Yr5j?to)4lF!SF>_#72C)h};9; zQbi*rHWuOEB~|t%^fD?S^`S~)Zn507h9@_m)g-z*R>-MES1Y1e^k~8TVp9TR$8U>4 ze1hHQWexZ)M^;6JUI?p&aiI;Y@#f9mfPmiEXDbX`#9;MSOuVJrk6Y)ggZ$~^b{(8v zCi(L>JNkPAbY2nEe?TcbxVJaGY3Pm=%B?|e<|Us%zQt@lGfF)592UN?P3avOG8}z7 zbjkE+uM|BOoy?rg>@Q|~_uUkS0=L2hK>QpjM!{8?qKE2Q+jpdNMQFv8lZ#ZM^Jj-T z>OE^^EsO!NOOCi__luZr3X+4a!AM@ZR9EzHKHPtDA1o$ks_yxwJTrp6mL1mEWOb(G z_2Iiwp9U0=ndN*Oh9G)m7|N2r-jh z&v@>hTnqr2#g|u9EXr)ng_*iTl2|4U)w{BzrZkav9YTEQmlqZQ`|*seQsPj{4~bkN z{Jn4A60V}8yk=UW8aP~P)0+yVOBZQ{8cj`2wG&=GC~%r1Jh9#;z; zHEnp?eep2T>S*#8!=*~$Dz!AareI{Q##%J<=g*&!J&JqD#I@n$+)3JdsUQs34-8F>EUV~^t*BkRza=mho)O`j8Db7;7-meSSr^z`KL`9_&4 za<6Zy7t$)-I`WyFONmrI-HegjT^Y{g)hhwZD3JqRxmUjY;c?_tEGbY0(o2x+jSZJ_ z8u?~L!1&3%*Y%CzlW=ua-JNWI;`?5i&)2!m5vB z7XmoE|p0vxupKe=?qMYP(;PMi%hD_;H9MeCuLU_Av6c9aVuM{wO@HI0e zuK&GCceD(8+tDxDpE)=2iX(E8gRuWTdkiF_|4dU8XpnE1p6ForbjSrR>jrl9{IxMW z*x}`f4}Hpb={r^4%hWN#LWU##dz_l{43 zaw}4y%ofs4T`BSgG}pE7HHHc?^K1RKpf0PeHEFdUsxkDwBVaYv7%caf*JH{^Z3uW< z_0rfluiA6<6-f3eXlOv8^{}*Jkd%8lXSN@)thqF6k z5)~E2CyQIXw{>wY%0-z?6f+v{3_^ZvmA4l?)u6Q=U*$S z^COY9;|lp_`(~&Bi^bI>Ry=AA^%~m%JQSWKH3;q$SLEq&3mFTMSvJ{D+8P{rbLrF! z*Nf{lS1lNN*1$IP;mGZ1-uy6ZjRDoP1?AyG52#jcI zeq`|^T}e#HBwMhrZ%jL~F>3Q~|3x6uAHOICm!hs8BWe1vk=qh7q-Mkr2$*p>~Dl63rC8!&%@tN>IXv8LEZi0!8BB5RFDfjQFm zd03HBes|(oh3S-FTXx&ByyFE!lQvvW-ua#9GHpHjk4rRCV`>~BpDNb% z(a5Mu3m4xkB5If~7@r`*KyE*Wj$-=@pTuvd$uzY0H=f9kAm{bEqr3YxL6W*t_s7)CXNR1$h7I zKjHvJnw92Jw8*+c_;>*txIXUf@_cmBtZMj;8K1Je1I!k$1#+7y=K$u+YAq@YB-%KI z#qg}OH?#yIi==8t%ze}Hy>)a~AcRaoj(bC@7h=;=i>k|CLtLLU+&uKP2{!f-?!%2I zKMa;FIq$H&w5=3t<|4+W)ek8qRePh~qkn-k8R)*?FV14*B0LBTlh`s*7iOCk`(5j~ zRgo_NzWp}}Zpg&JG1H4D+E6934FmESz7)xdKHmP;758q`mXO_}DIhkWdVEgx$$rBZ z5ow=-O&~UHg)VVMs}RIr+_%6S@oD2$j*?9!@S5n;Jf@{T9^d64!8 zR@0K5-}u+74HbvSZ5VaQx%ex+%qLVWxTmpkk}j!lV8!?s{OC|8;Mp4y+J z|4VOwCUtF-;+ssbts-djob(PID-Ee;ARB7mxCPHbi50Aam!>48#~-jHva?Bv#Ktz< z&BFX!yymsGQ_A1(yn>Z}HSwEeizzzAIrQ$Rtbo7VdJZ!9W-yZ1BBi+C>sQ`r!1?0? z@5?yc8mp$a^y%E4Y#mU>&r{qGPTz@(*M&UmFv98*>};k(dy;QFnT*M{$DUE6)akuO zm10Op$Pey57P8~Px&kHS^yD7}YtOT$=6EklBChorma!wGKrdb`b&ItOS)DgXW~Ij} zf%2~NsjGYTN~ZJl6O0Ap1+`v*2xcDUcVgNnrAlc?pC3f8xac9X5n8jcsDJOz>qE_9 z&7`q$eO6B%hd%U=%|fJF3V2?f7 zTf|JhPLSvLBUC*dbGpDGfk_wa?p8*x3n~o*JR9+h6577L=jvCVXCnxEvGTU^|1=e7 zf8|Ali}oFNw43*8N#a>?jNIp?{HZ);gLyP{fqXCAYy0W8es*>IG$p*LdaC!|CFN8# zjc9kugCt&DTMJ!$9}`VMv1c9N{lU-m^!jUt!+S>8`{DQ<#S5FAo(-mYo_ZUb;W5iF zKFQ);sn~Wo%h72q^<%U1UFpCZV+@oE1ryxX90|ESe`XY4d_xw_R#t`&leMB1w$)uX z7%0!=GfT=w_r=2HlLi#Gy^_H?p88_gtS+;1mN)!h0NK9O#v!M3;u#$z(s(Uu?J;WLlt?94i+>Xrs>X+|d332AzY!U2B1{{(cr;m*u@f zCAxQZ%V`6S>yW{JF}0^itoJJb#iRxYTa(CjMiEgG9sc1@pPu6wuYuNV#yWm{Zg7G6 z=k;V{X7(u1CByM8#iMt12zjA$337WAk=u8u==Hc!7^e zK2n{2fe|IhDA#`ODY^jK!`!^lHv;L6K%1M(2$uQmpd2jr=t<; zzkO@gAlU8+Fz9ygY}PzAA$8NqPwDPF3n((u35vquh1DMB-?61scz7PqvDT`D97P*H zcPlikJ0s$0U@+p+&xJPW<%cyjH6BCrZrh+^+H{JPGHnU=n(^P`S=&X7bysyrA@o(X zU1In@XgJy>?~jxhQA?ECZu`A2xxLqyNXyK>t$0_I0$KM&<)&x|{?B1^-Jg-;b>m14 z-(6ed+3a}-VhAblIMUaz8|$jf&jX3Q%{yC@?Alg$L0cQv87Jp6hQ1&#{YztnYrLqO6TbFQU(zoR`K>P+Lnm+f@No%!m4Mk@B5lntlJaZcmbnX+-j~$mx%pKkGz1@ zs#cAf&Pd6UG+gN8Ptkq!4EK$%B7b`Ia2Ot*LYEWiC8wSu&9heAQ^ts9`#z*)NT{ zLDpv8UR1>FhtVy;Yg>)phskkD#cG2@gjG8++NOJm7^Mc!lTUZ?J2{-px+u0t8pXOm z!+VcW`^U3AP_tKWa)M|j7Z1={ z>g@7i_Y7*yNqu1nm&!I9deQX5{{!&y*)S*H@!Xd()9Wnvz z1pE#hDy4h8`d3;;1`k&CJU5%mnNj4JBT)VVUO(0Z{i2(1fjQ01-Y2!D7(5WG`nvLm zA6o*bMho`Xc6uFrOY{i&Da%QF#s6`dd2WCj%%{^6bO-vEOOk(*QctH_=hmcpM)$SW z^2_z*opn@D z0o8h@QYT9-_d;HVx(L^mLc&&79I>jh#E(U{$ce|FQVdd2C_Q2XZDuZUQv>Rp2bnE} z1e!!R(EcquNc;t|ssk;}Um9|(O#P6_D*x)pbG@Q^+-F1O)Hrk;jeug-{nl}jh;t@F z@g2k4J$^xt%y7p`qviuFKBMCo?%xPN={mjYmc*{7?wW#(sNa@Y;TW;li^~&e^f0v? z{>__9^rlM-3zt3D#&UZ&q-$X93;=g|Uge|V9*6kPpCK(m=S9MwvZ3Ol{LQ$xn5jdKnexS-s`~SZR7z zg1SBTzWAL*u0z9vsp*bVuZyizBC(9d>Iz=%dJoIYbKscAH3aDiFO{_Ar6tLbkEv_% zujnyb{%d2^4aWzh9q;e5=0`^}J8yjdA;3|i9>22dk|bTme64=>16`vZw7dtD@=BW= zFAJXi=-FcG4(i({0nGriA{O#1E#9`j>5QHA&CLk`#b6totn3>OQAM#5?^c6HJ_+hd z+VyZ%4cN%E>WwfaY`y`WRN={-RmX5>T^_8MkK$*%F6Te-zSpFws!{M8g zp!-L=tK=h1Kl;Y%0|L$<;VRg-#<9r?!*w&)C2YGE(mJu7umt*VSy5}Bl#SIGUGn(s z6UZL3_-YW%x^?w|m^8G|#iS^VS-=3BuCD-ZEozT@=-@K~5&(-2vIPiXY!P-|YH^T0b zB*Px(k@jQGG*jiXonZ4p7VgyTDU1LgU6Rn}YMd83OU2(=y>OkC*JuU`_`d4MoRi}D z>MRjitR)9^H`uZAR49|K{}NW`6>%nH1tTP46+6o6|%#7UrmL z#YW>Mimt9HSuM8B@a~ZXsn#dAl1KoDtU&A>8#|h$l?_fAAzWZcjR34Z3t^^&qUGCV zm)!A;gEQ2rGHCNj*^yMRiqDf){DsblN@KRMj2;QnB}|lxdzlI}|8lr^vh1;t{z?q0 zTuV|?l9P01o_)&^Q1nH~ug2E98m%CeT9_77>D2X)=U}gu&5K_($~nlwUWCPm)Qlt5 zBf;P&(ZoIQk=cf{O+aRk60v78A?1;a~(~n%Qs2O%gcX}azZN684-jmD_Rf=ZEvO;#?fN`Sv$?= z0EUF#!rNPV*v?_kS#h`TpJilifYwkzsI&R~t280&>cnHk#^@Lp)QT3-FXYh41y-%j z#VweV*sL-r6F(~)R$5w$={c62;t>|3JGD4bUVxbnmQ;#PFStv%1M4dmjFHpR;Soov zRIUDb9qY34r|!i|OAc6oyyvz#gR)o3X75mhgkb6PY@9YeS;j5HR-s@W04y}d$923DN(pS#z7*<^FnBP|P!c69tInCiY!=tD|3qd)&n3KcGK=aizJ%Zhh z+;^^ziY?z7o1Y+<&%n&ZbPt`>f{MqT#4!6Ag*&V&C%Y9pby9V=FKIuzimBuId<|3G zG??pf9#8TX(+o*ruV>Pu{L(C{91&x~S$2D3pfZk6vB;IH1SAqk?nW;4C#dY93a9}A z*E`G@MLx`Xvg|`cu#9zF_HBJPE-&C)aFYwph*HT>-aHg|w;D2D`SgYox^#gAQ{wiu zJQUdW-ay&#DH}JurbcwKAw(-cuVR4SGm9a*`*e~?3dp!z z(RmMC3dZ=&?cd&51VM0nhTki<7|)4DrfhV z!8E{#n8L;!3S}hk@@zEeEc>8LQCXfSk}o5-{8s_*lj+i;0QqVyed#at$8%yQIZ4-= zCw`}S^gTtE=2|wqqdrvlsEa`+B>|nBZ?sB#osP*(8M;`XlTh-C0q`aRU;r7?$<+Mq zR67HDCn=z6g8@0bcri!jj(A)8;*%N^G#^gROdhMn>Ew@>D_q2l|F|LF-bH+4quXqc z-y2!FB0KzH9jxAcivIORmyR;=NG^f*Vatbwl5%aIpYXb!29bd4#_nnSOzLFBCyrD= zfx#x+eDg=)Gbj3`(TL$v8>AEg3K$A2Ei{(1(AS7eE?|z{d8BlnKcVs#@)FZ{#F)tS zyk!HZrPt})r-0t$*==nH9{;Noxp+K2TTloIN(%5 zSIP*utU-R*u{n@4)j$70FHyam9zoXrk?yEKK{2tIgQvEoW?w2AdF_@f=ISBB+BzI= zjHjeRW$45U?+{{lQ|rV#+ScwXC>{l%-4FhWP7LSjGsIDpMa0soaZ4|!jzra$5%kR=2=S=VYbLb2Ac$~B$XOaD7|=I+euf`+%Co!IY~J!lgZIYt_fC`e%c z3&&VLdMb}aqpDr<7(8mw#jcLr$@`D6l;&V`BYHJ4YqJGo%B7&TF$U||sUJ|@at0nf ztN>QorNHBf-t#Fr5F86iN#C=S7G3ukzfZrDLtG_^JqNdD3;mtv~b+Saj=PDfOf>ssWf^JzekU0ZtUI#sg|;6cgGalU5zOMd;L<| z@9j_r20Y)nh*cREzQP@?-E&+{yjJG?J2J?GQA6z^a3jL}IOA+MazpdQu$-k(hv&di zFWJ|qT!*|?2{yUuLWAP#q)sg5Y1B`+s^rPsN|A5BePtvUKH(6C<#s+x=TGpZ?@{hK zu)}I&_dnS_K`u|~gcTV1Z8oz9o*kr}_0BV&cn;SX_*C156b*R%E4`w&}%~BfI?QEp9)!7%1G#YskH=h=O zA@*fy0_o^ZR-tsJa zchLtQLjQXN0mrz}kqrpS=RnC?pf_|y3s{<)n~_FFMo3St2YI(YoYS Date: Tue, 20 Apr 2021 10:46:47 -0300 Subject: [PATCH 2/2] =?UTF-8?q?Possibilita=20a=20customiza=C3=A7=C3=A3o=20?= =?UTF-8?q?do=20indicador,=20possuindo=20o=20pr=C3=B3prio=20valor.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.js | 16 ++++++++++++---- src/rules.js | 4 ++-- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index ca7ca98..b70aec3 100644 --- a/src/index.js +++ b/src/index.js @@ -4,13 +4,19 @@ import PropTypes from 'prop-types'; import { getStyles } from './rules'; const Speedometer = (props) => { - const { value, totalValue, style, innerCircleStyle, outerCircleStyle, halfCircleStyle, showText, text, textStyle, showLabels, labelStyle, labelTextStyle, labelFormatter, showPercent, percentStyle, showIndicator } = props; + const { value, totalValue, style, innerCircleStyle, outerCircleStyle, halfCircleStyle, showText, text, textStyle, showLabels, labelStyle, labelTextStyle, labelFormatter, showPercent, percentStyle, showIndicator, indicatorValue } = props; const percentValue = parseInt(String((value * 100) / totalValue).split('.')[0]); const degreesValue = (value > totalValue) ? totalValue : value; const degrees = ((degreesValue * 180) / ((totalValue === 0) ? 1 : totalValue)) - 90; - const styles = getStyles(props, degrees, degreesValue); + const degressIndicatorValue = (indicatorValue > totalValue) ? totalValue : indicatorValue; + const degressIndicator = + (showIndicator && indicatorValue) ? + ((degressIndicatorValue * 180) / ((totalValue === 0) ? 1 : totalValue)) - 90 + : degrees; + + const styles = getStyles(props, degrees, degreesValue, degressIndicator); const percentElement = (showPercent) ? ( {percentValue}% @@ -36,7 +42,7 @@ const Speedometer = (props) => { return ( - + {percentElement} {textElement} @@ -98,6 +104,7 @@ Speedometer.propTypes = { percentSize: PropTypes.number, showIndicator: PropTypes.bool, indicatorColor: PropTypes.string, + indicatorValue: PropTypes.number, }; Speedometer.defaultProps = { @@ -120,7 +127,8 @@ Speedometer.defaultProps = { halfCircleStyle: {}, percentSize: 0.5, showIndicator: false, - indicatorColor: 'grey' + indicatorColor: 'grey', + indicatorValue: undefined }; export default Speedometer; diff --git a/src/rules.js b/src/rules.js index 8f0b9fa..3351c07 100644 --- a/src/rules.js +++ b/src/rules.js @@ -1,6 +1,6 @@ import color from 'color'; -export const getStyles = ({ size, percentSize, internalColor, innerColor, outerColor, indicatorColor, showIndicator }, degrees, degreesValue) => ({ +export const getStyles = ({ size, percentSize, internalColor, innerColor, outerColor, indicatorColor, showIndicator }, degrees, degreesValue, degressIndicator) => ({ outerCircle: { justifyContent: 'flex-end', alignItems: 'center', @@ -50,7 +50,7 @@ export const getStyles = ({ size, percentSize, internalColor, innerColor, outerC height: 4, zIndex: 1000, justifyContent: 'center', - transform: [{ translateX: size / 4 }, { rotate: `${(degrees + 90)}deg` }, { translateX: (size / 4 * -1) }], + transform: [{ translateX: size / 4 }, { rotate: `${(degressIndicator + 90)}deg` }, { translateX: (size / 4 * -1) }], width: size / 2, backgroundColor: indicatorColor, position: 'absolute',