From 89d4bdbbbf38aaffb407296ab363a8ecc4f46794 Mon Sep 17 00:00:00 2001 From: Nick Partridge Date: Fri, 15 Jan 2021 08:24:11 -0600 Subject: [PATCH] docs: add histogram small multiples example (#975) --- ...ram-bars-visually-looks-correct-1-snap.png | Bin 0 -> 10277 bytes stories/small_multiples/5_histogram_bars.tsx | 85 ++++++++++++++++++ .../small_multiples.stories.tsx | 1 + 3 files changed, 86 insertions(+) create mode 100644 integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-histogram-bars-visually-looks-correct-1-snap.png create mode 100644 stories/small_multiples/5_histogram_bars.tsx diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-histogram-bars-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-histogram-bars-visually-looks-correct-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..1777c2d4eae4a1d54cf47f073904b5ffa7bf7f29 GIT binary patch literal 10277 zcmc(F2UJsOw>I`JilcytsDOwx3rH_2iUBE7r3)Bo0@6YU%Lo>VgpyH8lrAlR5G0i7 zC?Ft&-a-+nq4$yyxce|O-`u-yS?gQ>f4{3N51#YB=e%dXd++Dj&pyw!G*tHOKDwKQ zg=HV=hO#yb%Vru2%O;zh+u_XUC-fK`Ho0o6Tw%$sI|f%yu%MJL>w3mcbo=<~E<9SA znR@-YtLo|2ZETNNE^jN^omQ-uFY>s2_Z6YDAF16W`lv#bXrt-kf>tqs*qUAD_MUQ< zkWFuQH&;q}$!fPP>XbHm+sn6t)wSCrUU9wJQ}pUJpQ|*5NBF~6zPtA>;CQNrnFcPR zu4Mw!!?>wf>5IAdsl;utrcWH9$~)l5Qh%7A8xH68{>Lqn=q;hND4e)A&@re%{OBd;jK z5j9cM-(ZB&O;fg|BwS=o?o(Trd~bP(d@>u}#n6%EPZDK80>%^Ehsv0as#qXz{;) zFnPXT%g89*fl8#oju{c}zfQUN`V`8}!9fpRDm^`2+`d&<#3=vFXB6_n%Qrkxl-k;s zZjat9(_)PK>-fmXq?NhhjFgn??(XipR1u&1ia*G2y0NSB5)yh(pFWlGqr085g!wGH zzR3UaW^Dfa^7@+}Dcz{?UD>SwS6%_c>Q7^ev8q--6Y=qWY!SsV{X z8ye-@d30JcKK4@*tVqe1uLOyc(aGYe)@;*ah(H^g`kqps0+&J6g2F=kZjw7`G(95{ z{=EHj!YT&W)nyXGasEm)+Wocv^0b9|yquw+pkQ@fU2EE{L|r4JH*X`6o3Fynmr|0G zuNfK|ex7o5acORB#C}rVcrJ%=Bl$aVLRkg=$MW-3-%`@jX(1uC+S=OBQ!z0y5*EMz z`l^j}Fuj;EtfQ)`s=UJTLt7iusc))AVVBJoBHhhy;~+4b&aND-!^Al9OQU_5^4Sq? z1GOtn+?xCB5~jTDuNR4%N-tk+d2zdAzM? zwa@G9Z6BwwISsjGtQTUg=AmC|#7dp4$#bjZ_OSW=*Imy; zk%aO!HrJqWX@Z(sSErF>RG_-l8$dP-V7hPH{7AWSBXQQXWBo^)1w(ig&7#qQva-hS z-@i{!OS|DF4AV~xK_cW;32kmjR2f`i=$V@nbW$~7gkVE1Tz>f5#l`sfjt|yj^Ry=K z#SZJJh=|1VRu$j+b~2@(wvA1=a*}&_TCI==&D^<<@{l@4>JOED+`B%DBRA(*e7Ryq zhBQk-Z+`Uf`09wMbX=X|oa1q6qxG>juTMI$G7D+T7Ntg*%u25@#}f4~+D$)WcW(K7 zb-hr>fxA0ZQ^?I`aH3-WBfy8ccCuDnT->a8DZozsqb)lIT#9tHv<}SD0Sh+L$il5J zRmX=9-@O}HBBHD^*m16`V>4)U^b??Y}QXr)H~{A7m&X8d-Mi75Pp zaLelJ>FJ%s%~w=ZDByN&-OLPmeGZ+aE<^(B_ zS8j&Qo!-ZtGCmL~B|!S97`>ypZ%jd6sJ5|XoBrySlXmG`4tkQE@^vwnD&9pVO*R=* zlX>;z!|W$|Y*M(od{d2^{XY&b-RLlbjb`CMb{1Sh#%17{BZ+o;#aAH;ha2m(C+zcL zYB`43Iyp^ge*KlcWEIdH;JaoUHW&C2>(<)F6q_v(s-QiU-ebu`Zl#lHJiZOGVV8*;k8CIzxCsn(nO3JpodDyJlx%=O0 zbMUSRIpj7tDY5H@__;{201fLGisK4j2J81uy_{hcSMpo87o+u?qPtUAdE&C#&g%1@ zILKBzf_0=4*On_4M?df2+3VAN@@n9GQ80BPly4)Lbgr9U6cQ5BxpyxGV1$huNxjdw z64mG*o%`qOud?#XAXUQwgX=gqINmvz@W=k_Do$GOz%yUR`_pNnO)p-)Trdb&Fu1h` znZEa)1dhNs<@hi;8^)f zb~Ws={Xs~cOGrp)=R*v;{q-v~y1HaHAIf_?w^IDxcMem(g_iSwE)HUNu57V@V9QvX z=p?yk$Q{?jc`2^Vge4x?i##OrcTt)mlcu?_NOfA03fq9idGmIDCUdFR0L6X1SWjWGpQyBEfO)8{Ck4zlyL6a-U@<80E)UEI)IBG+)3t;^vOMAlJ7 zf8QHpZ7nU=Bv@Ha%+#%|r5ObT6bEbcllInWf`QF^2e>kKL1N%3E2!8jekcjSgs(}prPmP$bFPNhZqf<2EItSG=;7vX$9mb#(*N19{ zhVHerw%QGR3kNbA>U|DHnk0?6b-TBf59A^y(t!={b}T&ZGk)How@hAYf=G323iF@m zO$L@LaSTSB<9N!Xi2|tm=Dd}S(?B&+oyb}2W}YWWRdDs;<+J11H6YvRZ{I3`FEjvf z?r`YHyS8oHw$36~YvEbsDNi)o`Ac(iZ$T<+9%)GAMtOug(>N#c8*RJ-x^+_Pe0ZFO<7?&XIKzMkSimNN3IY2#EG!;$%uom@`|Sep}V znkrrD`76Z1MShmQL{o{EoO&_=X`uwQr!^)U<=fo)dmY_*!hU1My^V!s3t6`ZkkxH3 zebp;P2Q;HWerT%X3Ft!8;onTgWU(fJ+%reE-AF|75ZVE2!vX2p*&0nL>SGuDI`eIz zSj#u_8jSkuEnp0|jPC8*9IHF74@<{sAn<+o@Znpmf5x4khPM;`sTq($r4t9Dl;H87 z?y$R{coh9hpy*$S>0M2!na7#?8^WZsXV1RymVzO7&h1`lGCd+@mU%U3Kdnjt-<+Zz z15EAh=%}5ZzP>6pTG){7!>f&(vALkk^KHWSAD2t(U0Wr z=!hZQpXJPB>~S#x&G_bv6uHFU;JqkqaK~s-(>H&j5`ZxO`{tr;+!?MoX}l6U3i~Brn=S8UR{*r1%cqx zF(8}+0|R$Xik&^HjlmE{$Ht=Yc%DYOs6lV>k)2!VQ3szFF6kCbcC6Ti&Bc@Y#z^*E zU!?>#A4u=tvmVxo3FvX~o^7`v4ZRdN^lB%|cZ>TdMc1L=3l}dA0!!A@O9p2?BPl64 zu+Y@lNH?h<)}STi%TY(RCP13S-%h^VXKMD^_K>=LXHXFG3wAB8_}6?pIa zZ{Z^xa6+kT=3p>lfPaC0@uxx(EQSa*^eRpN1X!hj41#dL&~fuw#)YHRLWG-c2ppYo z1i9nE`2czoJ~BQ&8`!(Mn;V}DQmesWGt|3Z@Hcr;y;=S+xt|s*I@-oV`e2R^TXzA+8 zMBq2#w7NEE0SSp4o`JrP($vt{@6Ww+D^wQusTy}q!MmJL0P>C1H8srw^h_@*GE|Ee zzJ<6G?;q~uwvjeRTQc+v3{v6grmnRTzqrH1y`I;BZ-^F;UqIix2ilbCwQJW-W;Hc8 zHxFNcjUhL{n1^W)bpT<4pj3e1k)DyE13(OP?24HpFK;3REh8gCKZH<&XS<*y_lJWOYP(Q`d)sf1TFqh?L=(^Mfjru<+^#w&l zT8IwR=GNAf`FS@HlaE^c6(MSW*XmVORU|+a!1>hKSr>=)oXcTyvp4<@R~~t9HylA$ zMg~g00T)g#PQ)B9)PBa#1A91p(TSf5=weF`^EH5QsTct;vQT?%6gZTzek6QFc7d<(C%}M9mFT4Aj*_ zMn^~4xDi-<#s#%A3Yd+B#XA#GE4&JvV>u5A7rD4y=ntv!w@p4`C_g_xBu8)u@xc`( z&+Ye7l$x3`SI)4?Lw}xvV0omZ6sEZLvBZqvtAO9nEtABUBAb5+Vr8}UtI4yBJpfam z?XyxNed()zBVo_RjhObCY|sClhq8b0S#q4{_@EMvw*CBg+Z#DAm%pO>KI*^MFGn`~ z<|ZdpdVODlB)n$tCMPAG0W~V|dWg2It?l0)48`RweSQ6DMr`b{g8Y2Gb4WxV;Hl`D zoJA8If(lBg6O*o-gf{A!9G=47XvJ4up0~94VV1$fjVpM`9WV0n)aU?r9+LsN$YN@$ z{5T;ok$1dOO;vStNyNyEP}qhKaadZFV_1^y@f7Uc1u4n|rUpH(v-GVULt)sjt<*E7 zs`_WrQb#5xw4K__02G?@7WlAuwA1VR)X9YzQJKYUKQAu2V=#*{ghId36-lqU^0l7% zMbAe{CmbsY0Q~M|B^Q*fgeS(wOGe80jQED1&{q8e2y>^TE2&g!$eLkNYO2b@jIeCi zB9{O{Y1GtSA|(^5k-jh{0W3y6R_c7x0=2Uf;CgJKn&`kUAh0B4f2PaPqdCA!erClN zL~&O3CWE4@<&kfLuE^2P}%Leg`QN@&uJh=^b?g9bss1L5qMYW&MS z-w__DOCYzZ&H9c^%>d^NkKD3YDV|eq zf*vnz*0U}xs?w8C5%WJ^irGze70r6e0c&fPU+OwEOMkcew#%^)YIL9if%| z;k{E~R3a!(mj0(e(ykd>s6gW(Q3FbgrZ#cTIXtb-%lycl7|R-N@8o3Q?d{zh|HJgY z?2HW0@8RG9xV!@dD}ngot0fhUk31EA6*|u7f%Vqp!HUEW6kkh%7y_&!^#yX}V&8af}s~?Gu-De4H z8IK=t7BMC1YNYA_j1fv^UsP9D16@h+nJP5^;_Y=ith=)_9gr0Amu+jNAyPg(=%M&8 zUMw;h_D=@1pfkwpJ}7Nh*AI~8S{fS@4)R_f>G7G;1EPwj(rcak6Z_Og-+o3FZgHx z_@r#|nm4LJ9wQokvUB(gG+`c-FG3{^0y%TsS}_7`cyL0;$tuc$YEPI z$N9jQ$3sK+L(8Z5{rjpl;Hj2{g@x2dN}v3HJ{K5=U8hbhQ7LkB!KP+r$7e8b7v@M} zSSJ+aVBo_!gF~$lewyA01skzZfs9}q4Relr`pxex4r9>IMu?ANm~|ogMR1W zGh7$92uc#;`={GSeVzhHB#Z{df4$SkTp=+j*i*agE^pmLlO@7ubOt9!x&_2 zNlD3%Hg0b2*%e>YXhG;dU%ws*`bjInuloD0uH39 zu#yDkDw~ZWjL^pj2G-W8eA~>~YU=7HXMX+2fv2QC*}-ZDS%Td(8`Pc}$^`)d6%i2; z3x|xPq@+rLlkD+1%vIzLP6W>mOPL5EGWQ;8v?6s`~B&jCyGtCxn(TG z%ktg(xMg%hLPES}%Go7+m#2T|rQImBr4m8OIjsIh9A#AzyvwKi0l>Kpc)$0LM>|M2 zS+{PckAI-#y9`zz=aKB1=yGo}1-gLfxQkQ0gcwH>3XAkYM*_JV>!E{FU{$%_Z&clC( zDIf2VcR}KI&1pYsUa&jX5GO<_BZ(Fx_3yBCrN7G9HuAx&ZTN%n0n$@72F3K*R%55C zz6UlvC0>4_F;P*6XDE5^-d!#)FE=Xl^_s3dJM6c%GJN#BrSkOP`?bjkKHw1`&n8yl z@<69dM|5rgB*;E%%PwU$JhI^19$n5sYm-xJ8oeuZ9?jqx7GDC(2Yf%)zdCspEWj7^ zyj>LgT^|6>ox89$#GX)Z{8= zX{wiJb`9B38TZl1GUkL+kX!E%5Iy8;3(!*1-oHmd;)awm>RQ^`s$V+asAiOR_c=)4 z#kK3RyQp|S;DM2DlP?+t@V;!m1_AKV$n;tjgzZ_#3LxqK^n0P}w36UA?uNmnXJx5l z-F|%91URIczG{MJ@(uh+!@fOrq6Zi@VA{VkO2?TR~)L0wA zKt(0UL==Z`k#3h75o}UQO3Dv;!*^0lViB~WMTBYUX zRRk;zK8}FqHlmm7W$2@@Jpt=rn$J6sj}|H<%ie+F95_Gc4PtU+c=*9sBt?K|Qa!dX z%1&N>3K^z*FhnSPJc3VteRU4ee4+7!gbg%-gdi_Fk(os3VW_Mf9GfGLMG6!O6LjHX9Z8gZCWbg~bSu i$L;?A@^#N|>#Te5kv2zdg^>;p3+kGNa`u%wkN*vJ1GYr~ literal 0 HcmV?d00001 diff --git a/stories/small_multiples/5_histogram_bars.tsx b/stories/small_multiples/5_histogram_bars.tsx new file mode 100644 index 0000000000..d03e2f3f86 --- /dev/null +++ b/stories/small_multiples/5_histogram_bars.tsx @@ -0,0 +1,85 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { boolean, number } from '@storybook/addon-knobs'; +import { NumberTypeKnobOptions } from '@storybook/addon-knobs/dist/components/types'; +import React from 'react'; + +import { ScaleType, Position, Chart, Axis, GroupBy, SmallMultiples, Settings, BarSeries } from '../../src'; +import { SB_SOURCE_PANEL } from '../utils/storybook'; + +const data = [ + { x: 30, split: 'Cloudy', y: 9 }, + { x: 45, split: 'Sunny', y: 8 }, + { x: 60, split: 'Rain', y: 5 }, + { x: 75, split: 'Sunny', y: 7 }, + { x: 90, split: 'Rain', y: 6 }, + { x: 105, split: 'Rain', y: 7 }, + { x: 120, split: 'Clear', y: 7 }, + { x: 135, split: 'Cloudy', y: 8 }, + { x: 150, split: 'Cloudy', y: 8 }, + { x: 165, split: 'Rain', y: 8 }, + { x: 180, split: 'Rain', y: 10 }, + { x: 195, split: 'Rain', y: 10 }, + { x: 210, split: 'Sunny', y: 9 }, + { x: 225, split: 'Rain', y: 10 }, + { x: 240, split: 'Clear', y: 12 }, + { x: 255, split: 'Cloudy', y: 9 }, + { x: 270, split: 'Clear', y: 12 }, + { x: 285, split: 'Cloudy', y: 5 }, + { x: 300, split: 'Rain', y: 7 }, + { x: 315, split: 'Sunny', y: 8 }, + { x: 330, split: 'Cloudy', y: 8 }, + { x: 345, split: 'Sunny', y: 8 }, + { x: 360, split: 'Sunny', y: 10 }, +]; +const numberOptions: NumberTypeKnobOptions = { + min: 0, + max: 1, + step: 0.01, +}; + +export const Example = () => { + const enableHistogramMode = boolean('EnableHistogramMode', true); + const barsPadding = number('barsPadding', 0, numberOptions); + const histogramPadding = number('histogramPadding', 0, numberOptions); + + return ( + + + + + + datum.split} sort="dataIndex" /> + + + + + ); +}; +Example.story = { + parameters: { + options: { selectedPanel: SB_SOURCE_PANEL }, + }, +}; diff --git a/stories/small_multiples/small_multiples.stories.tsx b/stories/small_multiples/small_multiples.stories.tsx index de4b73c45f..40b3c66aff 100644 --- a/stories/small_multiples/small_multiples.stories.tsx +++ b/stories/small_multiples/small_multiples.stories.tsx @@ -29,3 +29,4 @@ export default { export { Example as verticalAreas } from './2_vertical_areas'; export { Example as horizontalBars } from './4_horizontal_bars'; export { Example as gridLines } from './3_grid_lines'; +export { Example as histogramBars } from './5_histogram_bars';