You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.min.js 160 KiB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423442444254426442744284429443044314432443344344435443644374438443944404441444244434444444544464447444844494450445144524453445444554456445744584459446044614462446344644465446644674468446944704471447244734474447544764477447844794480448144824483448444854486448744884489449044914492449344944495449644974498449945004501450245034504450545064507450845094510451145124513451445154516451745184519452045214522452345244525452645274528452945304531453245334534453545364537453845394540454145424543454445454546454745484549455045514552455345544555455645574558455945604561456245634564456545664567456845694570457145724573457445754576457745784579458045814582458345844585458645874588458945904591459245934594459545964597459845994600460146024603460446054606460746084609461046114612461346144615461646174618461946204621462246234624462546264627462846294630463146324633463446354636463746384639464046414642464346444645464646474648464946504651465246534654465546564657465846594660466146624663466446654666466746684669467046714672467346744675467646774678467946804681468246834684468546864687468846894690469146924693469446954696469746984699470047014702470347044705470647074708470947104711471247134714471547164717471847194720472147224723472447254726472747284729473047314732473347344735473647374738473947404741474247434744474547464747474847494750475147524753475447554756475747584759476047614762476347644765476647674768476947704771477247734774477547764777477847794780478147824783478447854786478747884789479047914792479347944795479647974798479948004801480248034804480548064807480848094810481148124813481448154816481748184819482048214822482348244825482648274828482948304831483248334834483548364837483848394840484148424843484448454846484748484849485048514852485348544855485648574858485948604861486248634864486548664867486848694870487148724873487448754876487748784879488048814882488348844885488648874888488948904891489248934894489548964897489848994900490149024903490449054906490749084909491049114912491349144915491649174918491949204921492249234924492549264927492849294930493149324933493449354936493749384939494049414942494349444945494649474948494949504951495249534954495549564957495849594960496149624963496449654966496749684969497049714972497349744975497649774978497949804981498249834984498549864987498849894990499149924993499449954996499749984999500050015002500350045005500650075008500950105011501250135014501550165017501850195020502150225023502450255026502750285029503050315032503350345035503650375038503950405041504250435044504550465047504850495050505150525053505450555056505750585059506050615062506350645065506650675068506950705071507250735074507550765077507850795080508150825083508450855086508750885089509050915092509350945095509650975098509951005101510251035104510551065107510851095110511151125113511451155116511751185119512051215122512351245125512651275128512951305131513251335134513551365137513851395140514151425143514451455146514751485149515051515152515351545155515651575158515951605161516251635164516551665167516851695170517151725173517451755176517751785179518051815182518351845185518651875188518951905191519251935194519551965197519851995200520152025203520452055206520752085209521052115212521352145215521652175218521952205221522252235224522552265227522852295230523152325233523452355236523752385239524052415242524352445245524652475248524952505251525252535254525552565257525852595260526152625263526452655266526752685269527052715272527352745275527652775278527952805281528252835284528552865287528852895290529152925293529452955296529752985299530053015302530353045305530653075308530953105311531253135314531553165317531853195320532153225323532453255326532753285329533053315332533353345335533653375338533953405341534253435344534553465347534853495350535153525353535453555356535753585359536053615362536353645365536653675368536953705371537253735374537553765377537853795380538153825383538453855386538753885389539053915392539353945395539653975398539954005401540254035404540554065407540854095410541154125413541454155416541754185419542054215422542354245425542654275428542954305431543254335434543554365437543854395440544154425443544454455446544754485449545054515452545354545455545654575458545954605461546254635464546554665467546854695470547154725473547454755476547754785479548054815482548354845485548654875488548954905491549254935494549554965497549854995500550155025503550455055506550755085509551055115512551355145515551655175518551955205521552255235524552555265527552855295530553155325533553455355536553755385539554055415542554355445545554655475548554955505551555255535554555555565557555855595560556155625563556455655566556755685569557055715572557355745575557655775578557955805581558255835584558555865587558855895590559155925593559455955596559755985599560056015602560356045605560656075608560956105611561256135614561556165617561856195620562156225623562456255626562756285629563056315632563356345635563656375638563956405641564256435644564556465647564856495650565156525653
  1. (function () {
  2. 'use strict';
  3. var asyncGenerator = function () {
  4. function AwaitValue(value) {
  5. this.value = value;
  6. }
  7. function AsyncGenerator(gen) {
  8. var front, back;
  9. function send(key, arg) {
  10. return new Promise(function (resolve, reject) {
  11. var request = {
  12. key: key,
  13. arg: arg,
  14. resolve: resolve,
  15. reject: reject,
  16. next: null
  17. };
  18. if (back) {
  19. back = back.next = request;
  20. } else {
  21. front = back = request;
  22. resume(key, arg);
  23. }
  24. });
  25. }
  26. function resume(key, arg) {
  27. try {
  28. var result = gen[key](arg);
  29. var value = result.value;
  30. if (value instanceof AwaitValue) {
  31. Promise.resolve(value.value).then(function (arg) {
  32. resume("next", arg);
  33. }, function (arg) {
  34. resume("throw", arg);
  35. });
  36. } else {
  37. settle(result.done ? "return" : "normal", result.value);
  38. }
  39. } catch (err) {
  40. settle("throw", err);
  41. }
  42. }
  43. function settle(type, value) {
  44. switch (type) {
  45. case "return":
  46. front.resolve({
  47. value: value,
  48. done: true
  49. });
  50. break;
  51. case "throw":
  52. front.reject(value);
  53. break;
  54. default:
  55. front.resolve({
  56. value: value,
  57. done: false
  58. });
  59. break;
  60. }
  61. front = front.next;
  62. if (front) {
  63. resume(front.key, front.arg);
  64. } else {
  65. back = null;
  66. }
  67. }
  68. this._invoke = send;
  69. if (typeof gen.return !== "function") {
  70. this.return = undefined;
  71. }
  72. }
  73. if (typeof Symbol === "function" && Symbol.asyncIterator) {
  74. AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
  75. return this;
  76. };
  77. }
  78. AsyncGenerator.prototype.next = function (arg) {
  79. return this._invoke("next", arg);
  80. };
  81. AsyncGenerator.prototype.throw = function (arg) {
  82. return this._invoke("throw", arg);
  83. };
  84. AsyncGenerator.prototype.return = function (arg) {
  85. return this._invoke("return", arg);
  86. };
  87. return {
  88. wrap: function (fn) {
  89. return function () {
  90. return new AsyncGenerator(fn.apply(this, arguments));
  91. };
  92. },
  93. await: function (value) {
  94. return new AwaitValue(value);
  95. }
  96. };
  97. }();
  98. var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
  99. function $(expr, con) {
  100. return typeof expr === "string" ? (con || document).querySelector(expr) : expr || null;
  101. }
  102. $.create = function (tag, o) {
  103. var element = document.createElement(tag);
  104. for (var i in o) {
  105. var val = o[i];
  106. if (i === "inside") {
  107. $(val).appendChild(element);
  108. } else if (i === "around") {
  109. var ref = $(val);
  110. ref.parentNode.insertBefore(element, ref);
  111. element.appendChild(ref);
  112. } else if (i === "onClick") {
  113. element.addEventListener('click', val);
  114. } else if (i === "onInput") {
  115. element.addEventListener('input', function (e) {
  116. val(element.value);
  117. });
  118. } else if (i === "styles") {
  119. if ((typeof val === "undefined" ? "undefined" : _typeof(val)) === "object") {
  120. Object.keys(val).map(function (prop) {
  121. element.style[prop] = val[prop];
  122. });
  123. }
  124. } else if (i in element) {
  125. element[i] = val;
  126. } else {
  127. element.setAttribute(i, val);
  128. }
  129. }
  130. return element;
  131. };
  132. // https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
  133. function insertAfter(newNode, referenceNode) {
  134. referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
  135. }
  136. // Fixed 5-color theme,
  137. // More colors are difficult to parse visually
  138. var HEATMAP_COLORS_BLUE = ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'];
  139. var HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
  140. // Universal constants
  141. /**
  142. * Returns whether or not two given arrays are equal.
  143. * @param {Array} arr1 First array
  144. * @param {Array} arr2 Second array
  145. */
  146. /**
  147. * Shuffles array in place. ES6 version
  148. * @param {Array} array An array containing the items.
  149. */
  150. function shuffle(array) {
  151. // Awesomeness: https://bost.ocks.org/mike/shuffle/
  152. // https://stackoverflow.com/a/2450976/6495043
  153. // https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array?noredirect=1&lq=1
  154. for (var i = array.length - 1; i > 0; i--) {
  155. var j = Math.floor(Math.random() * (i + 1));
  156. var _ref = [array[j], array[i]];
  157. array[i] = _ref[0];
  158. array[j] = _ref[1];
  159. }
  160. return array;
  161. }
  162. /**
  163. * Fill an array with extra points
  164. * @param {Array} array Array
  165. * @param {Number} count number of filler elements
  166. * @param {Object} element element to fill with
  167. * @param {Boolean} start fill at start?
  168. */
  169. /**
  170. * Returns pixel width of string.
  171. * @param {String} string
  172. * @param {Number} charWidth Width of single char in pixels
  173. */
  174. // https://stackoverflow.com/a/29325222
  175. function getRandomBias(min, max, bias, influence) {
  176. var range = max - min;
  177. var biasValue = range * bias + min;
  178. var rnd = Math.random() * range + min,
  179. // random in range
  180. mix = Math.random() * influence; // random mixer
  181. return rnd * (1 - mix) + biasValue * mix; // mix full range and bias
  182. }
  183. function toTitleCase(str) {
  184. return str.replace(/\w*/g, function (txt) {
  185. return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
  186. });
  187. }
  188. var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  189. function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
  190. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  191. var docsBuilder = function () {
  192. function docsBuilder(LIB_OBJ) {
  193. _classCallCheck(this, docsBuilder);
  194. this.LIB_OBJ = LIB_OBJ;
  195. }
  196. _createClass(docsBuilder, [{
  197. key: 'makeSection',
  198. value: function makeSection(parent, sys) {
  199. return new docSection(this.LIB_OBJ, parent, sys);
  200. }
  201. }]);
  202. return docsBuilder;
  203. }();
  204. var docSection = function () {
  205. function docSection(LIB_OBJ, parent, sys) {
  206. _classCallCheck(this, docSection);
  207. this.LIB_OBJ = LIB_OBJ;
  208. this.parent = parent; // should be preferably a section
  209. this.sys = sys;
  210. this.blockMap = {};
  211. this.demos = [];
  212. this.make();
  213. }
  214. _createClass(docSection, [{
  215. key: 'make',
  216. value: function make() {
  217. var _this = this;
  218. // const section = document.querySelector(this.parent);
  219. var s = this.sys;
  220. if (s.title) {
  221. $.create('h6', { inside: this.parent, innerHTML: s.title });
  222. }
  223. if (s.contentBlocks) {
  224. s.contentBlocks.forEach(function (blockConf, index) {
  225. _this.blockMap[index] = _this.getBlock(blockConf);
  226. });
  227. } else {
  228. // TODO:
  229. this.blockMap['test'] = this.getDemo(s);
  230. }
  231. }
  232. }, {
  233. key: 'getBlock',
  234. value: function getBlock(blockConf) {
  235. var fnName = 'get' + toTitleCase(blockConf.type);
  236. if (this[fnName]) {
  237. return this[fnName](blockConf);
  238. } else {
  239. throw new Error('Unknown section block type \'' + blockConf.type + '\'.');
  240. }
  241. }
  242. }, {
  243. key: 'getText',
  244. value: function getText(blockConf) {
  245. return $.create('p', {
  246. inside: this.parent,
  247. className: 'new-context',
  248. innerHTML: blockConf.content
  249. });
  250. }
  251. }, {
  252. key: 'getCode',
  253. value: function getCode(blockConf) {
  254. var pre = $.create('pre', { inside: this.parent });
  255. var lang = blockConf.lang || 'javascript';
  256. var code = $.create('code', {
  257. inside: pre,
  258. className: 'hljs ' + lang,
  259. innerHTML: blockConf.content
  260. });
  261. }
  262. }, {
  263. key: 'getCustom',
  264. value: function getCustom(blockConf) {
  265. this.parent.innerHTML += blockConf.html;
  266. }
  267. }, {
  268. key: 'getDemo',
  269. value: function getDemo(blockConf) {
  270. var bc = blockConf;
  271. var args = bc.config;
  272. var figure = void 0,
  273. row = void 0;
  274. if (!bc.sideContent) {
  275. figure = $.create('figure', { inside: this.parent });
  276. } else {
  277. row = $.create('div', {
  278. inside: this.parent,
  279. className: "row",
  280. innerHTML: '<div class="col-sm-8"></div>\n\t\t\t\t\t<div class="col-sm-4"></div>'
  281. });
  282. figure = $.create('figure', { inside: row.querySelector('.col-sm-8') });
  283. row.querySelector('.col-sm-4').innerHTML += bc.sideContent;
  284. }
  285. var libObj = new this.LIB_OBJ(figure, args);
  286. var demoIndex = this.demos.length;
  287. this.demos.push(libObj);
  288. if (bc.postSetup) {
  289. bc.postSetup(this.demos[demoIndex], figure, row);
  290. }
  291. this.getDemoOptions(demoIndex, bc.options, args, figure);
  292. this.getDemoActions(demoIndex, bc.actions, args);
  293. }
  294. }, {
  295. key: 'getDemoOptions',
  296. value: function getDemoOptions(demoIndex) {
  297. var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  298. var _this2 = this;
  299. var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  300. var figure = arguments[3];
  301. options.forEach(function (o) {
  302. var btnGroup = $.create('div', {
  303. inside: _this2.parent,
  304. className: 'btn-group ' + o.name
  305. });
  306. var mapKeys = o.mapKeys;
  307. if (o.type === "number") {
  308. var numOpts = o.numberOptions;
  309. var inputGroup = $.create('input', {
  310. inside: btnGroup,
  311. className: 'form-control',
  312. type: "range",
  313. min: numOpts.min,
  314. max: numOpts.max,
  315. step: numOpts.step,
  316. value: o.activeState ? o.activeState : 0,
  317. // (max - min)/2
  318. onInput: function onInput(value) {
  319. args[o.path[0]][o.path[1]] = value;
  320. _this2.demos[demoIndex] = new _this2.LIB_OBJ(figure, args);
  321. }
  322. });
  323. } else if (["map", "string"].includes(o.type)) {
  324. args[o.path[0]] = {};
  325. Object.keys(o.states).forEach(function (key) {
  326. var state = o.states[key];
  327. var activeClass = key === o.activeState ? 'active' : '';
  328. var button = $.create('button', {
  329. inside: btnGroup,
  330. className: 'btn btn-sm btn-secondary ' + activeClass,
  331. innerHTML: key,
  332. onClick: function onClick(e) {
  333. // map
  334. if (o.type === "map") {
  335. mapKeys.forEach(function (attr, i) {
  336. args[o.path[0]][attr] = state[i];
  337. });
  338. } else {
  339. // boolean, string, number, object
  340. args[o.path[0]] = state;
  341. }
  342. _this2.demos[demoIndex] = new _this2.LIB_OBJ(figure, args);
  343. }
  344. });
  345. if (activeClass) {
  346. button.click();
  347. }
  348. });
  349. }
  350. });
  351. }
  352. }, {
  353. key: 'getDemoActions',
  354. value: function getDemoActions(demoIndex) {
  355. var _this3 = this;
  356. var actions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  357. actions.forEach(function (o) {
  358. var args = o.args || [];
  359. $.create('button', {
  360. inside: _this3.parent,
  361. className: 'btn btn-action btn-sm btn-secondary',
  362. innerHTML: o.name,
  363. onClick: function onClick() {
  364. var _demos$demoIndex;
  365. (_demos$demoIndex = _this3.demos[demoIndex])[o.fn].apply(_demos$demoIndex, _toConsumableArray(args));
  366. }
  367. });
  368. });
  369. }
  370. }]);
  371. return docSection;
  372. }();
  373. var _typeof2 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
  374. function __$styleInject(css, ref) {
  375. if (ref === void 0) ref = {};
  376. var insertAt = ref.insertAt;
  377. if (!css || typeof document === 'undefined') {
  378. return;
  379. }
  380. var head = document.head || document.getElementsByTagName('head')[0];
  381. var style = document.createElement('style');
  382. style.type = 'text/css';
  383. if (insertAt === 'top') {
  384. if (head.firstChild) {
  385. head.insertBefore(style, head.firstChild);
  386. } else {
  387. head.appendChild(style);
  388. }
  389. } else {
  390. head.appendChild(style);
  391. }
  392. if (style.styleSheet) {
  393. style.styleSheet.cssText = css;
  394. } else {
  395. style.appendChild(document.createTextNode(css));
  396. }
  397. }
  398. __$styleInject(".chart-container{position:relative;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .legend-dataset-text{fill:#6c7680;font-weight:600}.graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.graph-svg-tip ol,.graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.graph-svg-tip strong{color:#dfe2e5;font-weight:600}.graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:\" \";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}", {});
  399. var asyncGenerator$1 = function () {
  400. function AwaitValue(value) {
  401. this.value = value;
  402. }
  403. function AsyncGenerator(gen) {
  404. var front, back;
  405. function send(key, arg) {
  406. return new Promise(function (resolve, reject) {
  407. var request = {
  408. key: key,
  409. arg: arg,
  410. resolve: resolve,
  411. reject: reject,
  412. next: null
  413. };
  414. if (back) {
  415. back = back.next = request;
  416. } else {
  417. front = back = request;
  418. resume(key, arg);
  419. }
  420. });
  421. }
  422. function resume(key, arg) {
  423. try {
  424. var result = gen[key](arg);
  425. var value = result.value;
  426. if (value instanceof AwaitValue) {
  427. Promise.resolve(value.value).then(function (arg) {
  428. resume("next", arg);
  429. }, function (arg) {
  430. resume("throw", arg);
  431. });
  432. } else {
  433. settle(result.done ? "return" : "normal", result.value);
  434. }
  435. } catch (err) {
  436. settle("throw", err);
  437. }
  438. }
  439. function settle(type, value) {
  440. switch (type) {
  441. case "return":
  442. front.resolve({
  443. value: value,
  444. done: true
  445. });
  446. break;
  447. case "throw":
  448. front.reject(value);
  449. break;
  450. default:
  451. front.resolve({
  452. value: value,
  453. done: false
  454. });
  455. break;
  456. }
  457. front = front.next;
  458. if (front) {
  459. resume(front.key, front.arg);
  460. } else {
  461. back = null;
  462. }
  463. }
  464. this._invoke = send;
  465. if (typeof gen.return !== "function") {
  466. this.return = undefined;
  467. }
  468. }
  469. if (typeof Symbol === "function" && Symbol.asyncIterator) {
  470. AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
  471. return this;
  472. };
  473. }
  474. AsyncGenerator.prototype.next = function (arg) {
  475. return this._invoke("next", arg);
  476. };
  477. AsyncGenerator.prototype.throw = function (arg) {
  478. return this._invoke("throw", arg);
  479. };
  480. AsyncGenerator.prototype.return = function (arg) {
  481. return this._invoke("return", arg);
  482. };
  483. return {
  484. wrap: function wrap(fn) {
  485. return function () {
  486. return new AsyncGenerator(fn.apply(this, arguments));
  487. };
  488. },
  489. await: function _await(value) {
  490. return new AwaitValue(value);
  491. }
  492. };
  493. }();
  494. var _typeof$2 = typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol" ? function (obj) {
  495. return typeof obj === 'undefined' ? 'undefined' : _typeof2(obj);
  496. } : function (obj) {
  497. return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj === 'undefined' ? 'undefined' : _typeof2(obj);
  498. };
  499. function $$1(expr, con) {
  500. return typeof expr === "string" ? (con || document).querySelector(expr) : expr || null;
  501. }
  502. $$1.create = function (tag, o) {
  503. var element = document.createElement(tag);
  504. for (var i in o) {
  505. var val = o[i];
  506. if (i === "inside") {
  507. $$1(val).appendChild(element);
  508. } else if (i === "around") {
  509. var ref = $$1(val);
  510. ref.parentNode.insertBefore(element, ref);
  511. element.appendChild(ref);
  512. } else if (i === "onClick") {
  513. element.addEventListener('click', val);
  514. } else if (i === "onInput") {
  515. element.addEventListener('input', function (e) {
  516. val(element.value);
  517. });
  518. } else if (i === "styles") {
  519. if ((typeof val === "undefined" ? "undefined" : _typeof$2(val)) === "object") {
  520. Object.keys(val).map(function (prop) {
  521. element.style[prop] = val[prop];
  522. });
  523. }
  524. } else if (i in element) {
  525. element[i] = val;
  526. } else {
  527. element.setAttribute(i, val);
  528. }
  529. }
  530. return element;
  531. };
  532. function getOffset$1(element) {
  533. var rect = element.getBoundingClientRect();
  534. return {
  535. // https://stackoverflow.com/a/7436602/6495043
  536. // rect.top varies with scroll, so we add whatever has been
  537. // scrolled to it to get absolute distance from actual page top
  538. top: rect.top + (document.documentElement.scrollTop || document.body.scrollTop),
  539. left: rect.left + (document.documentElement.scrollLeft || document.body.scrollLeft)
  540. };
  541. }
  542. function isElementInViewport$1(el) {
  543. // Although straightforward: https://stackoverflow.com/a/7557433/6495043
  544. var rect = el.getBoundingClientRect();
  545. return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
  546. rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
  547. ;
  548. }
  549. function getElementContentWidth$1(element) {
  550. var styles = window.getComputedStyle(element);
  551. var padding = parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);
  552. return element.clientWidth - padding;
  553. }
  554. function fire$1(target, type, properties) {
  555. var evt = document.createEvent("HTMLEvents");
  556. evt.initEvent(type, true, true);
  557. for (var j in properties) {
  558. evt[j] = properties[j];
  559. }
  560. return target.dispatchEvent(evt);
  561. }
  562. // https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
  563. var BASE_MEASURES$1 = {
  564. margins: {
  565. top: 10,
  566. bottom: 10,
  567. left: 20,
  568. right: 20
  569. },
  570. paddings: {
  571. top: 20,
  572. bottom: 40,
  573. left: 30,
  574. right: 10
  575. },
  576. baseHeight: 240,
  577. titleHeight: 20,
  578. legendHeight: 30,
  579. titleFontSize: 12
  580. };
  581. function getTopOffset$1(m) {
  582. return m.titleHeight + m.margins.top + m.paddings.top;
  583. }
  584. function getLeftOffset$1(m) {
  585. return m.margins.left + m.paddings.left;
  586. }
  587. function getExtraHeight$1(m) {
  588. var totalExtraHeight = m.margins.top + m.margins.bottom + m.paddings.top + m.paddings.bottom + m.titleHeight + m.legendHeight;
  589. return totalExtraHeight;
  590. }
  591. function getExtraWidth$1(m) {
  592. var totalExtraWidth = m.margins.left + m.margins.right + m.paddings.left + m.paddings.right;
  593. return totalExtraWidth;
  594. }
  595. var INIT_CHART_UPDATE_TIMEOUT$1 = 700;
  596. var CHART_POST_ANIMATE_TIMEOUT$1 = 400;
  597. var AXIS_CHART_DEFAULT_TYPE$1 = 'line';
  598. var AXIS_DATASET_CHART_TYPES$1 = ['line', 'bar'];
  599. var AXIS_LEGEND_BAR_SIZE$1 = 100;
  600. var BAR_CHART_SPACE_RATIO$1 = 1;
  601. var MIN_BAR_PERCENT_HEIGHT$1 = 0.02;
  602. var LINE_CHART_DOT_SIZE$1 = 4;
  603. var DOT_OVERLAY_SIZE_INCR$1 = 4;
  604. var PERCENTAGE_BAR_DEFAULT_HEIGHT$1 = 20;
  605. var PERCENTAGE_BAR_DEFAULT_DEPTH$1 = 2;
  606. // Fixed 5-color theme,
  607. // More colors are difficult to parse visually
  608. var HEATMAP_DISTRIBUTION_SIZE$1 = 5;
  609. var HEATMAP_SQUARE_SIZE$1 = 10;
  610. var HEATMAP_GUTTER_SIZE$1 = 2;
  611. var DEFAULT_CHAR_WIDTH$1 = 7;
  612. var TOOLTIP_POINTER_TRIANGLE_HEIGHT$1 = 5;
  613. var DEFAULT_CHART_COLORS$1 = ['light-blue', 'blue', 'violet', 'red', 'orange', 'yellow', 'green', 'light-green', 'purple', 'magenta', 'light-grey', 'dark-grey'];
  614. var HEATMAP_COLORS_GREEN$1 = ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];
  615. var DEFAULT_COLORS$1 = {
  616. bar: DEFAULT_CHART_COLORS$1,
  617. line: DEFAULT_CHART_COLORS$1,
  618. pie: DEFAULT_CHART_COLORS$1,
  619. percentage: DEFAULT_CHART_COLORS$1,
  620. heatmap: HEATMAP_COLORS_GREEN$1
  621. };
  622. // Universal constants
  623. var ANGLE_RATIO$1 = Math.PI / 180;
  624. var FULL_ANGLE$1 = 360;
  625. var _createClass$3 = function () {
  626. function defineProperties(target, props) {
  627. for (var i = 0; i < props.length; i++) {
  628. var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
  629. }
  630. }return function (Constructor, protoProps, staticProps) {
  631. if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
  632. };
  633. }();
  634. function _classCallCheck$4(instance, Constructor) {
  635. if (!(instance instanceof Constructor)) {
  636. throw new TypeError("Cannot call a class as a function");
  637. }
  638. }
  639. var SvgTip = function () {
  640. function SvgTip(_ref) {
  641. var _ref$parent = _ref.parent,
  642. parent = _ref$parent === undefined ? null : _ref$parent,
  643. _ref$colors = _ref.colors,
  644. colors = _ref$colors === undefined ? [] : _ref$colors;
  645. _classCallCheck$4(this, SvgTip);
  646. this.parent = parent;
  647. this.colors = colors;
  648. this.titleName = '';
  649. this.titleValue = '';
  650. this.listValues = [];
  651. this.titleValueFirst = 0;
  652. this.x = 0;
  653. this.y = 0;
  654. this.top = 0;
  655. this.left = 0;
  656. this.setup();
  657. }
  658. _createClass$3(SvgTip, [{
  659. key: 'setup',
  660. value: function setup() {
  661. this.makeTooltip();
  662. }
  663. }, {
  664. key: 'refresh',
  665. value: function refresh() {
  666. this.fill();
  667. this.calcPosition();
  668. }
  669. }, {
  670. key: 'makeTooltip',
  671. value: function makeTooltip() {
  672. var _this = this;
  673. this.container = $$1.create('div', {
  674. inside: this.parent,
  675. className: 'graph-svg-tip comparison',
  676. innerHTML: '<span class="title"></span>\n\t\t\t\t<ul class="data-point-list"></ul>\n\t\t\t\t<div class="svg-pointer"></div>'
  677. });
  678. this.hideTip();
  679. this.title = this.container.querySelector('.title');
  680. this.dataPointList = this.container.querySelector('.data-point-list');
  681. this.parent.addEventListener('mouseleave', function () {
  682. _this.hideTip();
  683. });
  684. }
  685. }, {
  686. key: 'fill',
  687. value: function fill() {
  688. var _this2 = this;
  689. var title = void 0;
  690. if (this.index) {
  691. this.container.setAttribute('data-point-index', this.index);
  692. }
  693. if (this.titleValueFirst) {
  694. title = '<strong>' + this.titleValue + '</strong>' + this.titleName;
  695. } else {
  696. title = this.titleName + '<strong>' + this.titleValue + '</strong>';
  697. }
  698. this.title.innerHTML = title;
  699. this.dataPointList.innerHTML = '';
  700. this.listValues.map(function (set$$1, i) {
  701. var color = _this2.colors[i] || 'black';
  702. var value = set$$1.formatted === 0 || set$$1.formatted ? set$$1.formatted : set$$1.value;
  703. var li = $$1.create('li', {
  704. styles: {
  705. 'border-top': '3px solid ' + color
  706. },
  707. innerHTML: '<strong style="display: block;">' + (value === 0 || value ? value : '') + '</strong>\n\t\t\t\t\t' + (set$$1.title ? set$$1.title : '')
  708. });
  709. _this2.dataPointList.appendChild(li);
  710. });
  711. }
  712. }, {
  713. key: 'calcPosition',
  714. value: function calcPosition() {
  715. var width = this.container.offsetWidth;
  716. this.top = this.y - this.container.offsetHeight - TOOLTIP_POINTER_TRIANGLE_HEIGHT$1;
  717. this.left = this.x - width / 2;
  718. var maxLeft = this.parent.offsetWidth - width;
  719. var pointer = this.container.querySelector('.svg-pointer');
  720. if (this.left < 0) {
  721. pointer.style.left = 'calc(50% - ' + -1 * this.left + 'px)';
  722. this.left = 0;
  723. } else if (this.left > maxLeft) {
  724. var delta = this.left - maxLeft;
  725. var pointerOffset = 'calc(50% + ' + delta + 'px)';
  726. pointer.style.left = pointerOffset;
  727. this.left = maxLeft;
  728. } else {
  729. pointer.style.left = '50%';
  730. }
  731. }
  732. }, {
  733. key: 'setValues',
  734. value: function setValues(x, y) {
  735. var title = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  736. var listValues = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
  737. var index = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : -1;
  738. this.titleName = title.name;
  739. this.titleValue = title.value;
  740. this.listValues = listValues;
  741. this.x = x;
  742. this.y = y;
  743. this.titleValueFirst = title.valueFirst || 0;
  744. this.index = index;
  745. this.refresh();
  746. }
  747. }, {
  748. key: 'hideTip',
  749. value: function hideTip() {
  750. this.container.style.top = '0px';
  751. this.container.style.left = '0px';
  752. this.container.style.opacity = '0';
  753. }
  754. }, {
  755. key: 'showTip',
  756. value: function showTip() {
  757. this.container.style.top = this.top + 'px';
  758. this.container.style.left = this.left + 'px';
  759. this.container.style.opacity = '1';
  760. }
  761. }]);
  762. return SvgTip;
  763. }();
  764. function floatTwo$1(d) {
  765. return parseFloat(d.toFixed(2));
  766. }
  767. /**
  768. * Returns whether or not two given arrays are equal.
  769. * @param {Array} arr1 First array
  770. * @param {Array} arr2 Second array
  771. */
  772. /**
  773. * Shuffles array in place. ES6 version
  774. * @param {Array} array An array containing the items.
  775. */
  776. /**
  777. * Fill an array with extra points
  778. * @param {Array} array Array
  779. * @param {Number} count number of filler elements
  780. * @param {Object} element element to fill with
  781. * @param {Boolean} start fill at start?
  782. */
  783. function fillArray$1(array, count, element) {
  784. var start = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
  785. if (!element) {
  786. element = start ? array[0] : array[array.length - 1];
  787. }
  788. var fillerArray = new Array(Math.abs(count)).fill(element);
  789. array = start ? fillerArray.concat(array) : array.concat(fillerArray);
  790. return array;
  791. }
  792. /**
  793. * Returns pixel width of string.
  794. * @param {String} string
  795. * @param {Number} charWidth Width of single char in pixels
  796. */
  797. function getStringWidth$1(string, charWidth) {
  798. return (string + "").length * charWidth;
  799. }
  800. // https://stackoverflow.com/a/29325222
  801. function getPositionByAngle$1(angle, radius) {
  802. return {
  803. x: Math.sin(angle * ANGLE_RATIO$1) * radius,
  804. y: Math.cos(angle * ANGLE_RATIO$1) * radius
  805. };
  806. }
  807. function getBarHeightAndYAttr(yTop, zeroLine) {
  808. var height = void 0,
  809. y = void 0;
  810. if (yTop <= zeroLine) {
  811. height = zeroLine - yTop;
  812. y = yTop;
  813. } else {
  814. height = yTop - zeroLine;
  815. y = zeroLine;
  816. }
  817. return [height, y];
  818. }
  819. function equilizeNoOfElements(array1, array2) {
  820. var extraCount = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : array2.length - array1.length;
  821. // Doesn't work if either has zero elements.
  822. if (extraCount > 0) {
  823. array1 = fillArray$1(array1, extraCount);
  824. } else {
  825. array2 = fillArray$1(array2, extraCount);
  826. }
  827. return [array1, array2];
  828. }
  829. var PRESET_COLOR_MAP = {
  830. 'light-blue': '#7cd6fd',
  831. 'blue': '#5e64ff',
  832. 'violet': '#743ee2',
  833. 'red': '#ff5858',
  834. 'orange': '#ffa00a',
  835. 'yellow': '#feef72',
  836. 'green': '#28a745',
  837. 'light-green': '#98d85b',
  838. 'purple': '#b554ff',
  839. 'magenta': '#ffa3ef',
  840. 'black': '#36114C',
  841. 'grey': '#bdd3e6',
  842. 'light-grey': '#f0f4f7',
  843. 'dark-grey': '#b8c2cc'
  844. };
  845. function limitColor(r) {
  846. if (r > 255) return 255;else if (r < 0) return 0;
  847. return r;
  848. }
  849. function lightenDarkenColor(color, amt) {
  850. var col = getColor(color);
  851. var usePound = false;
  852. if (col[0] == "#") {
  853. col = col.slice(1);
  854. usePound = true;
  855. }
  856. var num = parseInt(col, 16);
  857. var r = limitColor((num >> 16) + amt);
  858. var b = limitColor((num >> 8 & 0x00FF) + amt);
  859. var g = limitColor((num & 0x0000FF) + amt);
  860. return (usePound ? "#" : "") + (g | b << 8 | r << 16).toString(16);
  861. }
  862. function isValidColor(string) {
  863. // https://stackoverflow.com/a/8027444/6495043
  864. return (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(string)
  865. );
  866. }
  867. var getColor = function getColor(color) {
  868. return PRESET_COLOR_MAP[color] || color;
  869. };
  870. var _slicedToArray = function () {
  871. function sliceIterator(arr, i) {
  872. var _arr = [];var _n = true;var _d = false;var _e = undefined;try {
  873. for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
  874. _arr.push(_s.value);if (i && _arr.length === i) break;
  875. }
  876. } catch (err) {
  877. _d = true;_e = err;
  878. } finally {
  879. try {
  880. if (!_n && _i["return"]) _i["return"]();
  881. } finally {
  882. if (_d) throw _e;
  883. }
  884. }return _arr;
  885. }return function (arr, i) {
  886. if (Array.isArray(arr)) {
  887. return arr;
  888. } else if (Symbol.iterator in Object(arr)) {
  889. return sliceIterator(arr, i);
  890. } else {
  891. throw new TypeError("Invalid attempt to destructure non-iterable instance");
  892. }
  893. };
  894. }();
  895. var _typeof$2$1 = typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol" ? function (obj) {
  896. return typeof obj === 'undefined' ? 'undefined' : _typeof2(obj);
  897. } : function (obj) {
  898. return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj === 'undefined' ? 'undefined' : _typeof2(obj);
  899. };
  900. var AXIS_TICK_LENGTH = 6;
  901. var LABEL_MARGIN = 4;
  902. var FONT_SIZE = 10;
  903. var BASE_LINE_COLOR = '#dadada';
  904. var FONT_FILL = '#555b51';
  905. function $$1$1(expr, con) {
  906. return typeof expr === "string" ? (con || document).querySelector(expr) : expr || null;
  907. }
  908. function createSVG(tag, o) {
  909. var element = document.createElementNS("http://www.w3.org/2000/svg", tag);
  910. for (var i in o) {
  911. var val = o[i];
  912. if (i === "inside") {
  913. $$1$1(val).appendChild(element);
  914. } else if (i === "around") {
  915. var ref = $$1$1(val);
  916. ref.parentNode.insertBefore(element, ref);
  917. element.appendChild(ref);
  918. } else if (i === "styles") {
  919. if ((typeof val === 'undefined' ? 'undefined' : _typeof$2$1(val)) === "object") {
  920. Object.keys(val).map(function (prop) {
  921. element.style[prop] = val[prop];
  922. });
  923. }
  924. } else {
  925. if (i === "className") {
  926. i = "class";
  927. }
  928. if (i === "innerHTML") {
  929. element['textContent'] = val;
  930. } else {
  931. element.setAttribute(i, val);
  932. }
  933. }
  934. }
  935. return element;
  936. }
  937. function renderVerticalGradient(svgDefElem, gradientId) {
  938. return createSVG('linearGradient', {
  939. inside: svgDefElem,
  940. id: gradientId,
  941. x1: 0,
  942. x2: 0,
  943. y1: 0,
  944. y2: 1
  945. });
  946. }
  947. function setGradientStop(gradElem, offset, color, opacity) {
  948. return createSVG('stop', {
  949. 'inside': gradElem,
  950. 'style': 'stop-color: ' + color,
  951. 'offset': offset,
  952. 'stop-opacity': opacity
  953. });
  954. }
  955. function makeSVGContainer(parent, className, width, height) {
  956. return createSVG('svg', {
  957. className: className,
  958. inside: parent,
  959. width: width,
  960. height: height
  961. });
  962. }
  963. function makeSVGDefs(svgContainer) {
  964. return createSVG('defs', {
  965. inside: svgContainer
  966. });
  967. }
  968. function makeSVGGroup(className) {
  969. var transform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
  970. var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
  971. var args = {
  972. className: className,
  973. transform: transform
  974. };
  975. if (parent) args.inside = parent;
  976. return createSVG('g', args);
  977. }
  978. function makePath(pathStr) {
  979. var className = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
  980. var stroke = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'none';
  981. var fill = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'none';
  982. return createSVG('path', {
  983. className: className,
  984. d: pathStr,
  985. styles: {
  986. stroke: stroke,
  987. fill: fill
  988. }
  989. });
  990. }
  991. function makeArcPathStr(startPosition, endPosition, center, radius) {
  992. var clockWise = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  993. var arcStartX = center.x + startPosition.x,
  994. arcStartY = center.y + startPosition.y;
  995. var arcEndX = center.x + endPosition.x,
  996. arcEndY = center.y + endPosition.y;
  997. return 'M' + center.x + ' ' + center.y + '\n\t\tL' + arcStartX + ' ' + arcStartY + '\n\t\tA ' + radius + ' ' + radius + ' 0 0 ' + (clockWise ? 1 : 0) + '\n\t\t' + arcEndX + ' ' + arcEndY + ' z';
  998. }
  999. function makeGradient(svgDefElem, color) {
  1000. var lighter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
  1001. var gradientId = 'path-fill-gradient' + '-' + color + '-' + (lighter ? 'lighter' : 'default');
  1002. var gradientDef = renderVerticalGradient(svgDefElem, gradientId);
  1003. var opacities = [1, 0.6, 0.2];
  1004. if (lighter) {
  1005. opacities = [0.4, 0.2, 0];
  1006. }
  1007. setGradientStop(gradientDef, "0%", color, opacities[0]);
  1008. setGradientStop(gradientDef, "50%", color, opacities[1]);
  1009. setGradientStop(gradientDef, "100%", color, opacities[2]);
  1010. return gradientId;
  1011. }
  1012. function percentageBar(x, y, width, height) {
  1013. var depth = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : PERCENTAGE_BAR_DEFAULT_DEPTH$1;
  1014. var fill = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'none';
  1015. var args = {
  1016. className: 'percentage-bar',
  1017. x: x,
  1018. y: y,
  1019. width: width,
  1020. height: height,
  1021. fill: fill,
  1022. styles: {
  1023. 'stroke': lightenDarkenColor(fill, -25),
  1024. // Diabolically good: https://stackoverflow.com/a/9000859
  1025. // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
  1026. 'stroke-dasharray': '0, ' + (height + width) + ', ' + width + ', ' + height,
  1027. 'stroke-width': depth
  1028. }
  1029. };
  1030. return createSVG("rect", args);
  1031. }
  1032. function heatSquare(className, x, y, size) {
  1033. var fill = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'none';
  1034. var data = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
  1035. var args = {
  1036. className: className,
  1037. x: x,
  1038. y: y,
  1039. width: size,
  1040. height: size,
  1041. fill: fill
  1042. };
  1043. Object.keys(data).map(function (key) {
  1044. args[key] = data[key];
  1045. });
  1046. return createSVG("rect", args);
  1047. }
  1048. function legendBar(x, y, size) {
  1049. var fill = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'none';
  1050. var label = arguments[4];
  1051. var args = {
  1052. className: 'legend-bar',
  1053. x: 0,
  1054. y: 0,
  1055. width: size,
  1056. height: '2px',
  1057. fill: fill
  1058. };
  1059. var text = createSVG('text', {
  1060. className: 'legend-dataset-text',
  1061. x: 0,
  1062. y: 0,
  1063. dy: FONT_SIZE * 2 + 'px',
  1064. 'font-size': FONT_SIZE * 1.2 + 'px',
  1065. 'text-anchor': 'start',
  1066. fill: FONT_FILL,
  1067. innerHTML: label
  1068. });
  1069. var group = createSVG('g', {
  1070. transform: 'translate(' + x + ', ' + y + ')'
  1071. });
  1072. group.appendChild(createSVG("rect", args));
  1073. group.appendChild(text);
  1074. return group;
  1075. }
  1076. function legendDot(x, y, size) {
  1077. var fill = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'none';
  1078. var label = arguments[4];
  1079. var args = {
  1080. className: 'legend-dot',
  1081. cx: 0,
  1082. cy: 0,
  1083. r: size,
  1084. fill: fill
  1085. };
  1086. var text = createSVG('text', {
  1087. className: 'legend-dataset-text',
  1088. x: 0,
  1089. y: 0,
  1090. dx: FONT_SIZE + 'px',
  1091. dy: FONT_SIZE / 3 + 'px',
  1092. 'font-size': FONT_SIZE * 1.2 + 'px',
  1093. 'text-anchor': 'start',
  1094. fill: FONT_FILL,
  1095. innerHTML: label
  1096. });
  1097. var group = createSVG('g', {
  1098. transform: 'translate(' + x + ', ' + y + ')'
  1099. });
  1100. group.appendChild(createSVG("circle", args));
  1101. group.appendChild(text);
  1102. return group;
  1103. }
  1104. function makeText(className, x, y, content) {
  1105. var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
  1106. var fontSize = options.fontSize || FONT_SIZE;
  1107. var dy = options.dy !== undefined ? options.dy : fontSize / 2;
  1108. var fill = options.fill || FONT_FILL;
  1109. var textAnchor = options.textAnchor || 'start';
  1110. return createSVG('text', {
  1111. className: className,
  1112. x: x,
  1113. y: y,
  1114. dy: dy + 'px',
  1115. 'font-size': fontSize + 'px',
  1116. fill: fill,
  1117. 'text-anchor': textAnchor,
  1118. innerHTML: content
  1119. });
  1120. }
  1121. function makeVertLine(x, label, y1, y2) {
  1122. var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
  1123. if (!options.stroke) options.stroke = BASE_LINE_COLOR;
  1124. var l = createSVG('line', {
  1125. className: 'line-vertical ' + options.className,
  1126. x1: 0,
  1127. x2: 0,
  1128. y1: y1,
  1129. y2: y2,
  1130. styles: {
  1131. stroke: options.stroke
  1132. }
  1133. });
  1134. var text = createSVG('text', {
  1135. x: 0,
  1136. y: y1 > y2 ? y1 + LABEL_MARGIN : y1 - LABEL_MARGIN - FONT_SIZE,
  1137. dy: FONT_SIZE + 'px',
  1138. 'font-size': FONT_SIZE + 'px',
  1139. 'text-anchor': 'middle',
  1140. innerHTML: label + ""
  1141. });
  1142. var line = createSVG('g', {
  1143. transform: 'translate(' + x + ', 0)'
  1144. });
  1145. line.appendChild(l);
  1146. line.appendChild(text);
  1147. return line;
  1148. }
  1149. function makeHoriLine(y, label, x1, x2) {
  1150. var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
  1151. if (!options.stroke) options.stroke = BASE_LINE_COLOR;
  1152. if (!options.lineType) options.lineType = '';
  1153. var className = 'line-horizontal ' + options.className + (options.lineType === "dashed" ? "dashed" : "");
  1154. var l = createSVG('line', {
  1155. className: className,
  1156. x1: x1,
  1157. x2: x2,
  1158. y1: 0,
  1159. y2: 0,
  1160. styles: {
  1161. stroke: options.stroke
  1162. }
  1163. });
  1164. var text = createSVG('text', {
  1165. x: x1 < x2 ? x1 - LABEL_MARGIN : x1 + LABEL_MARGIN,
  1166. y: 0,
  1167. dy: FONT_SIZE / 2 - 2 + 'px',
  1168. 'font-size': FONT_SIZE + 'px',
  1169. 'text-anchor': x1 < x2 ? 'end' : 'start',
  1170. innerHTML: label + ""
  1171. });
  1172. var line = createSVG('g', {
  1173. transform: 'translate(0, ' + y + ')',
  1174. 'stroke-opacity': 1
  1175. });
  1176. if (text === 0 || text === '0') {
  1177. line.style.stroke = "rgba(27, 31, 35, 0.6)";
  1178. }
  1179. line.appendChild(l);
  1180. line.appendChild(text);
  1181. return line;
  1182. }
  1183. function yLine(y, label, width) {
  1184. var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
  1185. if (!options.pos) options.pos = 'left';
  1186. if (!options.offset) options.offset = 0;
  1187. if (!options.mode) options.mode = 'span';
  1188. if (!options.stroke) options.stroke = BASE_LINE_COLOR;
  1189. if (!options.className) options.className = '';
  1190. var x1 = -1 * AXIS_TICK_LENGTH;
  1191. var x2 = options.mode === 'span' ? width + AXIS_TICK_LENGTH : 0;
  1192. if (options.mode === 'tick' && options.pos === 'right') {
  1193. x1 = width + AXIS_TICK_LENGTH;
  1194. x2 = width;
  1195. }
  1196. // let offset = options.pos === 'left' ? -1 * options.offset : options.offset;
  1197. x1 += options.offset;
  1198. x2 += options.offset;
  1199. return makeHoriLine(y, label, x1, x2, {
  1200. stroke: options.stroke,
  1201. className: options.className,
  1202. lineType: options.lineType
  1203. });
  1204. }
  1205. function xLine(x, label, height) {
  1206. var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
  1207. if (!options.pos) options.pos = 'bottom';
  1208. if (!options.offset) options.offset = 0;
  1209. if (!options.mode) options.mode = 'span';
  1210. if (!options.stroke) options.stroke = BASE_LINE_COLOR;
  1211. if (!options.className) options.className = '';
  1212. // Draw X axis line in span/tick mode with optional label
  1213. // y2(span)
  1214. // |
  1215. // |
  1216. // x line |
  1217. // |
  1218. // |
  1219. // ---------------------+-- y2(tick)
  1220. // |
  1221. // y1
  1222. var y1 = height + AXIS_TICK_LENGTH;
  1223. var y2 = options.mode === 'span' ? -1 * AXIS_TICK_LENGTH : height;
  1224. if (options.mode === 'tick' && options.pos === 'top') {
  1225. // top axis ticks
  1226. y1 = -1 * AXIS_TICK_LENGTH;
  1227. y2 = 0;
  1228. }
  1229. return makeVertLine(x, label, y1, y2, {
  1230. stroke: options.stroke,
  1231. className: options.className,
  1232. lineType: options.lineType
  1233. });
  1234. }
  1235. function yMarker(y, label, width) {
  1236. var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
  1237. if (!options.labelPos) options.labelPos = 'right';
  1238. var x = options.labelPos === 'left' ? LABEL_MARGIN : width - getStringWidth$1(label, 5) - LABEL_MARGIN;
  1239. var labelSvg = createSVG('text', {
  1240. className: 'chart-label',
  1241. x: x,
  1242. y: 0,
  1243. dy: FONT_SIZE / -2 + 'px',
  1244. 'font-size': FONT_SIZE + 'px',
  1245. 'text-anchor': 'start',
  1246. innerHTML: label + ""
  1247. });
  1248. var line = makeHoriLine(y, '', 0, width, {
  1249. stroke: options.stroke || BASE_LINE_COLOR,
  1250. className: options.className || '',
  1251. lineType: options.lineType
  1252. });
  1253. line.appendChild(labelSvg);
  1254. return line;
  1255. }
  1256. function yRegion(y1, y2, width, label) {
  1257. var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
  1258. // return a group
  1259. var height = y1 - y2;
  1260. var rect = createSVG('rect', {
  1261. className: 'bar mini', // remove class
  1262. styles: {
  1263. fill: 'rgba(228, 234, 239, 0.49)',
  1264. stroke: BASE_LINE_COLOR,
  1265. 'stroke-dasharray': width + ', ' + height
  1266. },
  1267. // 'data-point-index': index,
  1268. x: 0,
  1269. y: 0,
  1270. width: width,
  1271. height: height
  1272. });
  1273. if (!options.labelPos) options.labelPos = 'right';
  1274. var x = options.labelPos === 'left' ? LABEL_MARGIN : width - getStringWidth$1(label + "", 4.5) - LABEL_MARGIN;
  1275. var labelSvg = createSVG('text', {
  1276. className: 'chart-label',
  1277. x: x,
  1278. y: 0,
  1279. dy: FONT_SIZE / -2 + 'px',
  1280. 'font-size': FONT_SIZE + 'px',
  1281. 'text-anchor': 'start',
  1282. innerHTML: label + ""
  1283. });
  1284. var region = createSVG('g', {
  1285. transform: 'translate(0, ' + y2 + ')'
  1286. });
  1287. region.appendChild(rect);
  1288. region.appendChild(labelSvg);
  1289. return region;
  1290. }
  1291. function datasetBar(x, yTop, width, color) {
  1292. var label = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '';
  1293. var index = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
  1294. var offset = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
  1295. var meta = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : {};
  1296. var _getBarHeightAndYAttr = getBarHeightAndYAttr(yTop, meta.zeroLine),
  1297. _getBarHeightAndYAttr2 = _slicedToArray(_getBarHeightAndYAttr, 2),
  1298. height = _getBarHeightAndYAttr2[0],
  1299. y = _getBarHeightAndYAttr2[1];
  1300. y -= offset;
  1301. if (height === 0) {
  1302. height = meta.minHeight;
  1303. y -= meta.minHeight;
  1304. }
  1305. var rect = createSVG('rect', {
  1306. className: 'bar mini',
  1307. style: 'fill: ' + color,
  1308. 'data-point-index': index,
  1309. x: x,
  1310. y: y,
  1311. width: width,
  1312. height: height
  1313. });
  1314. label += "";
  1315. if (!label && !label.length) {
  1316. return rect;
  1317. } else {
  1318. rect.setAttribute('y', 0);
  1319. rect.setAttribute('x', 0);
  1320. var text = createSVG('text', {
  1321. className: 'data-point-value',
  1322. x: width / 2,
  1323. y: 0,
  1324. dy: FONT_SIZE / 2 * -1 + 'px',
  1325. 'font-size': FONT_SIZE + 'px',
  1326. 'text-anchor': 'middle',
  1327. innerHTML: label
  1328. });
  1329. var group = createSVG('g', {
  1330. 'data-point-index': index,
  1331. transform: 'translate(' + x + ', ' + y + ')'
  1332. });
  1333. group.appendChild(rect);
  1334. group.appendChild(text);
  1335. return group;
  1336. }
  1337. }
  1338. function datasetDot(x, y, radius, color) {
  1339. var label = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '';
  1340. var index = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
  1341. var dot = createSVG('circle', {
  1342. style: 'fill: ' + color,
  1343. 'data-point-index': index,
  1344. cx: x,
  1345. cy: y,
  1346. r: radius
  1347. });
  1348. label += "";
  1349. if (!label && !label.length) {
  1350. return dot;
  1351. } else {
  1352. dot.setAttribute('cy', 0);
  1353. dot.setAttribute('cx', 0);
  1354. var text = createSVG('text', {
  1355. className: 'data-point-value',
  1356. x: 0,
  1357. y: 0,
  1358. dy: FONT_SIZE / 2 * -1 - radius + 'px',
  1359. 'font-size': FONT_SIZE + 'px',
  1360. 'text-anchor': 'middle',
  1361. innerHTML: label
  1362. });
  1363. var group = createSVG('g', {
  1364. 'data-point-index': index,
  1365. transform: 'translate(' + x + ', ' + y + ')'
  1366. });
  1367. group.appendChild(dot);
  1368. group.appendChild(text);
  1369. return group;
  1370. }
  1371. }
  1372. function getPaths(xList, yList, color) {
  1373. var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
  1374. var meta = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
  1375. var pointsList = yList.map(function (y, i) {
  1376. return xList[i] + ',' + y;
  1377. });
  1378. var pointsStr = pointsList.join("L");
  1379. var path = makePath("M" + pointsStr, 'line-graph-path', color);
  1380. // HeatLine
  1381. if (options.heatline) {
  1382. var gradient_id = makeGradient(meta.svgDefs, color);
  1383. path.style.stroke = 'url(#' + gradient_id + ')';
  1384. }
  1385. var paths = {
  1386. path: path
  1387. };
  1388. // Region
  1389. if (options.areaFill) {
  1390. var gradient_id_region = makeGradient(meta.svgDefs, color, true);
  1391. var pathStr = "M" + (xList[0] + ',' + meta.zeroLine + 'L') + pointsStr + ('L' + xList.slice(-1)[0] + ',' + meta.zeroLine);
  1392. paths.region = makePath(pathStr, 'region-fill', 'none', 'url(#' + gradient_id_region + ')');
  1393. }
  1394. return paths;
  1395. }
  1396. var makeOverlay = {
  1397. 'bar': function bar(unit) {
  1398. var transformValue = void 0;
  1399. if (unit.nodeName !== 'rect') {
  1400. transformValue = unit.getAttribute('transform');
  1401. unit = unit.childNodes[0];
  1402. }
  1403. var overlay = unit.cloneNode();
  1404. overlay.style.fill = '#000000';
  1405. overlay.style.opacity = '0.4';
  1406. if (transformValue) {
  1407. overlay.setAttribute('transform', transformValue);
  1408. }
  1409. return overlay;
  1410. },
  1411. 'dot': function dot(unit) {
  1412. var transformValue = void 0;
  1413. if (unit.nodeName !== 'circle') {
  1414. transformValue = unit.getAttribute('transform');
  1415. unit = unit.childNodes[0];
  1416. }
  1417. var overlay = unit.cloneNode();
  1418. var radius = unit.getAttribute('r');
  1419. var fill = unit.getAttribute('fill');
  1420. overlay.setAttribute('r', parseInt(radius) + DOT_OVERLAY_SIZE_INCR$1);
  1421. overlay.setAttribute('fill', fill);
  1422. overlay.style.opacity = '0.6';
  1423. if (transformValue) {
  1424. overlay.setAttribute('transform', transformValue);
  1425. }
  1426. return overlay;
  1427. },
  1428. 'heat_square': function heat_square(unit) {
  1429. var transformValue = void 0;
  1430. if (unit.nodeName !== 'circle') {
  1431. transformValue = unit.getAttribute('transform');
  1432. unit = unit.childNodes[0];
  1433. }
  1434. var overlay = unit.cloneNode();
  1435. var radius = unit.getAttribute('r');
  1436. var fill = unit.getAttribute('fill');
  1437. overlay.setAttribute('r', parseInt(radius) + DOT_OVERLAY_SIZE_INCR$1);
  1438. overlay.setAttribute('fill', fill);
  1439. overlay.style.opacity = '0.6';
  1440. if (transformValue) {
  1441. overlay.setAttribute('transform', transformValue);
  1442. }
  1443. return overlay;
  1444. }
  1445. };
  1446. var updateOverlay = {
  1447. 'bar': function bar(unit, overlay) {
  1448. var transformValue = void 0;
  1449. if (unit.nodeName !== 'rect') {
  1450. transformValue = unit.getAttribute('transform');
  1451. unit = unit.childNodes[0];
  1452. }
  1453. var attributes = ['x', 'y', 'width', 'height'];
  1454. Object.values(unit.attributes).filter(function (attr) {
  1455. return attributes.includes(attr.name) && attr.specified;
  1456. }).map(function (attr) {
  1457. overlay.setAttribute(attr.name, attr.nodeValue);
  1458. });
  1459. if (transformValue) {
  1460. overlay.setAttribute('transform', transformValue);
  1461. }
  1462. },
  1463. 'dot': function dot(unit, overlay) {
  1464. var transformValue = void 0;
  1465. if (unit.nodeName !== 'circle') {
  1466. transformValue = unit.getAttribute('transform');
  1467. unit = unit.childNodes[0];
  1468. }
  1469. var attributes = ['cx', 'cy'];
  1470. Object.values(unit.attributes).filter(function (attr) {
  1471. return attributes.includes(attr.name) && attr.specified;
  1472. }).map(function (attr) {
  1473. overlay.setAttribute(attr.name, attr.nodeValue);
  1474. });
  1475. if (transformValue) {
  1476. overlay.setAttribute('transform', transformValue);
  1477. }
  1478. },
  1479. 'heat_square': function heat_square(unit, overlay) {
  1480. var transformValue = void 0;
  1481. if (unit.nodeName !== 'circle') {
  1482. transformValue = unit.getAttribute('transform');
  1483. unit = unit.childNodes[0];
  1484. }
  1485. var attributes = ['cx', 'cy'];
  1486. Object.values(unit.attributes).filter(function (attr) {
  1487. return attributes.includes(attr.name) && attr.specified;
  1488. }).map(function (attr) {
  1489. overlay.setAttribute(attr.name, attr.nodeValue);
  1490. });
  1491. if (transformValue) {
  1492. overlay.setAttribute('transform', transformValue);
  1493. }
  1494. }
  1495. };
  1496. var _slicedToArray$2 = function () {
  1497. function sliceIterator(arr, i) {
  1498. var _arr = [];var _n = true;var _d = false;var _e = undefined;try {
  1499. for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
  1500. _arr.push(_s.value);if (i && _arr.length === i) break;
  1501. }
  1502. } catch (err) {
  1503. _d = true;_e = err;
  1504. } finally {
  1505. try {
  1506. if (!_n && _i["return"]) _i["return"]();
  1507. } finally {
  1508. if (_d) throw _e;
  1509. }
  1510. }return _arr;
  1511. }return function (arr, i) {
  1512. if (Array.isArray(arr)) {
  1513. return arr;
  1514. } else if (Symbol.iterator in Object(arr)) {
  1515. return sliceIterator(arr, i);
  1516. } else {
  1517. throw new TypeError("Invalid attempt to destructure non-iterable instance");
  1518. }
  1519. };
  1520. }();
  1521. var UNIT_ANIM_DUR = 350;
  1522. var PATH_ANIM_DUR = 350;
  1523. var MARKER_LINE_ANIM_DUR = UNIT_ANIM_DUR;
  1524. var REPLACE_ALL_NEW_DUR = 250;
  1525. var STD_EASING = 'easein';
  1526. function translate(unit, oldCoord, newCoord, duration) {
  1527. var old = typeof oldCoord === 'string' ? oldCoord : oldCoord.join(', ');
  1528. return [unit, { transform: newCoord.join(', ') }, duration, STD_EASING, "translate", { transform: old }];
  1529. }
  1530. function translateVertLine(xLine, newX, oldX) {
  1531. return translate(xLine, [oldX, 0], [newX, 0], MARKER_LINE_ANIM_DUR);
  1532. }
  1533. function translateHoriLine(yLine, newY, oldY) {
  1534. return translate(yLine, [0, oldY], [0, newY], MARKER_LINE_ANIM_DUR);
  1535. }
  1536. function animateRegion(rectGroup, newY1, newY2, oldY2) {
  1537. var newHeight = newY1 - newY2;
  1538. var rect = rectGroup.childNodes[0];
  1539. var width = rect.getAttribute("width");
  1540. var rectAnim = [rect, { height: newHeight, 'stroke-dasharray': width + ', ' + newHeight }, MARKER_LINE_ANIM_DUR, STD_EASING];
  1541. var groupAnim = translate(rectGroup, [0, oldY2], [0, newY2], MARKER_LINE_ANIM_DUR);
  1542. return [rectAnim, groupAnim];
  1543. }
  1544. function animateBar(bar, x, yTop, width) {
  1545. var offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
  1546. var meta = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
  1547. var _getBarHeightAndYAttr = getBarHeightAndYAttr(yTop, meta.zeroLine),
  1548. _getBarHeightAndYAttr2 = _slicedToArray$2(_getBarHeightAndYAttr, 2),
  1549. height = _getBarHeightAndYAttr2[0],
  1550. y = _getBarHeightAndYAttr2[1];
  1551. y -= offset;
  1552. if (bar.nodeName !== 'rect') {
  1553. var rect = bar.childNodes[0];
  1554. var rectAnim = [rect, { width: width, height: height }, UNIT_ANIM_DUR, STD_EASING];
  1555. var oldCoordStr = bar.getAttribute("transform").split("(")[1].slice(0, -1);
  1556. var groupAnim = translate(bar, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);
  1557. return [rectAnim, groupAnim];
  1558. } else {
  1559. return [[bar, { width: width, height: height, x: x, y: y }, UNIT_ANIM_DUR, STD_EASING]];
  1560. }
  1561. // bar.animate({height: args.newHeight, y: yTop}, UNIT_ANIM_DUR, mina.easein);
  1562. }
  1563. function animateDot(dot, x, y) {
  1564. if (dot.nodeName !== 'circle') {
  1565. var oldCoordStr = dot.getAttribute("transform").split("(")[1].slice(0, -1);
  1566. var groupAnim = translate(dot, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);
  1567. return [groupAnim];
  1568. } else {
  1569. return [[dot, { cx: x, cy: y }, UNIT_ANIM_DUR, STD_EASING]];
  1570. }
  1571. // dot.animate({cy: yTop}, UNIT_ANIM_DUR, mina.easein);
  1572. }
  1573. function animatePath(paths, newXList, newYList, zeroLine) {
  1574. var pathComponents = [];
  1575. var pointsStr = newYList.map(function (y, i) {
  1576. return newXList[i] + ',' + y;
  1577. });
  1578. var pathStr = pointsStr.join("L");
  1579. var animPath = [paths.path, { d: "M" + pathStr }, PATH_ANIM_DUR, STD_EASING];
  1580. pathComponents.push(animPath);
  1581. if (paths.region) {
  1582. var regStartPt = newXList[0] + ',' + zeroLine + 'L';
  1583. var regEndPt = 'L' + newXList.slice(-1)[0] + ', ' + zeroLine;
  1584. var animRegion = [paths.region, { d: "M" + regStartPt + pathStr + regEndPt }, PATH_ANIM_DUR, STD_EASING];
  1585. pathComponents.push(animRegion);
  1586. }
  1587. return pathComponents;
  1588. }
  1589. function animatePathStr(oldPath, pathStr) {
  1590. return [oldPath, { d: pathStr }, UNIT_ANIM_DUR, STD_EASING];
  1591. }
  1592. var _slicedToArray$1 = function () {
  1593. function sliceIterator(arr, i) {
  1594. var _arr = [];var _n = true;var _d = false;var _e = undefined;try {
  1595. for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
  1596. _arr.push(_s.value);if (i && _arr.length === i) break;
  1597. }
  1598. } catch (err) {
  1599. _d = true;_e = err;
  1600. } finally {
  1601. try {
  1602. if (!_n && _i["return"]) _i["return"]();
  1603. } finally {
  1604. if (_d) throw _e;
  1605. }
  1606. }return _arr;
  1607. }return function (arr, i) {
  1608. if (Array.isArray(arr)) {
  1609. return arr;
  1610. } else if (Symbol.iterator in Object(arr)) {
  1611. return sliceIterator(arr, i);
  1612. } else {
  1613. throw new TypeError("Invalid attempt to destructure non-iterable instance");
  1614. }
  1615. };
  1616. }();
  1617. function _toConsumableArray$1(arr) {
  1618. if (Array.isArray(arr)) {
  1619. for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
  1620. arr2[i] = arr[i];
  1621. }return arr2;
  1622. } else {
  1623. return Array.from(arr);
  1624. }
  1625. }
  1626. // Leveraging SMIL Animations
  1627. var EASING = {
  1628. ease: "0.25 0.1 0.25 1",
  1629. linear: "0 0 1 1",
  1630. // easein: "0.42 0 1 1",
  1631. easein: "0.1 0.8 0.2 1",
  1632. easeout: "0 0 0.58 1",
  1633. easeinout: "0.42 0 0.58 1"
  1634. };
  1635. function animateSVGElement(element, props, dur) {
  1636. var easingType = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "linear";
  1637. var type = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined;
  1638. var oldValues = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
  1639. var animElement = element.cloneNode(true);
  1640. var newElement = element.cloneNode(true);
  1641. for (var attributeName in props) {
  1642. var animateElement = void 0;
  1643. if (attributeName === 'transform') {
  1644. animateElement = document.createElementNS("http://www.w3.org/2000/svg", "animateTransform");
  1645. } else {
  1646. animateElement = document.createElementNS("http://www.w3.org/2000/svg", "animate");
  1647. }
  1648. var currentValue = oldValues[attributeName] || element.getAttribute(attributeName);
  1649. var value = props[attributeName];
  1650. var animAttr = {
  1651. attributeName: attributeName,
  1652. from: currentValue,
  1653. to: value,
  1654. begin: "0s",
  1655. dur: dur / 1000 + "s",
  1656. values: currentValue + ";" + value,
  1657. keySplines: EASING[easingType],
  1658. keyTimes: "0;1",
  1659. calcMode: "spline",
  1660. fill: 'freeze'
  1661. };
  1662. if (type) {
  1663. animAttr["type"] = type;
  1664. }
  1665. for (var i in animAttr) {
  1666. animateElement.setAttribute(i, animAttr[i]);
  1667. }
  1668. animElement.appendChild(animateElement);
  1669. if (type) {
  1670. newElement.setAttribute(attributeName, "translate(" + value + ")");
  1671. } else {
  1672. newElement.setAttribute(attributeName, value);
  1673. }
  1674. }
  1675. return [animElement, newElement];
  1676. }
  1677. function transform(element, style) {
  1678. // eslint-disable-line no-unused-vars
  1679. element.style.transform = style;
  1680. element.style.webkitTransform = style;
  1681. element.style.msTransform = style;
  1682. element.style.mozTransform = style;
  1683. element.style.oTransform = style;
  1684. }
  1685. function animateSVG(svgContainer, elements) {
  1686. var newElements = [];
  1687. var animElements = [];
  1688. elements.map(function (element) {
  1689. var unit = element[0];
  1690. var parent = unit.parentNode;
  1691. var animElement = void 0,
  1692. newElement = void 0;
  1693. element[0] = unit;
  1694. var _animateSVGElement = animateSVGElement.apply(undefined, _toConsumableArray$1(element));
  1695. var _animateSVGElement2 = _slicedToArray$1(_animateSVGElement, 2);
  1696. animElement = _animateSVGElement2[0];
  1697. newElement = _animateSVGElement2[1];
  1698. newElements.push(newElement);
  1699. animElements.push([animElement, parent]);
  1700. parent.replaceChild(animElement, unit);
  1701. });
  1702. var animSvg = svgContainer.cloneNode(true);
  1703. animElements.map(function (animElement, i) {
  1704. animElement[1].replaceChild(newElements[i], animElement[0]);
  1705. elements[i][0] = newElements[i];
  1706. });
  1707. return animSvg;
  1708. }
  1709. function runSMILAnimation(parent, svgElement, elementsToAnimate) {
  1710. if (elementsToAnimate.length === 0) return;
  1711. var animSvgElement = animateSVG(svgElement, elementsToAnimate);
  1712. if (svgElement.parentNode == parent) {
  1713. parent.removeChild(svgElement);
  1714. parent.appendChild(animSvgElement);
  1715. }
  1716. // Replace the new svgElement (data has already been replaced)
  1717. setTimeout(function () {
  1718. if (animSvgElement.parentNode == parent) {
  1719. parent.removeChild(animSvgElement);
  1720. parent.appendChild(svgElement);
  1721. }
  1722. }, REPLACE_ALL_NEW_DUR);
  1723. }
  1724. var CSSTEXT = ".chart-container{position:relative;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .legend-dataset-text{fill:#6c7680;font-weight:600}.graph-svg-tip{position:absolute;z-index:99999;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.graph-svg-tip ul{padding-left:0;display:flex}.graph-svg-tip ol{padding-left:0;display:flex}.graph-svg-tip ul.data-point-list li{min-width:90px;flex:1;font-weight:600}.graph-svg-tip strong{color:#dfe2e5;font-weight:600}.graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:' ';border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}";
  1725. function downloadFile(filename, data) {
  1726. var a = document.createElement('a');
  1727. a.style = "display: none";
  1728. var blob = new Blob(data, { type: "image/svg+xml; charset=utf-8" });
  1729. var url = window.URL.createObjectURL(blob);
  1730. a.href = url;
  1731. a.download = filename;
  1732. document.body.appendChild(a);
  1733. a.click();
  1734. setTimeout(function () {
  1735. document.body.removeChild(a);
  1736. window.URL.revokeObjectURL(url);
  1737. }, 300);
  1738. }
  1739. function prepareForExport(svg) {
  1740. var clone = svg.cloneNode(true);
  1741. clone.classList.add('chart-container');
  1742. clone.setAttribute('xmlns', "http://www.w3.org/2000/svg");
  1743. clone.setAttribute('xmlns:xlink', "http://www.w3.org/1999/xlink");
  1744. var styleEl = $$1.create('style', {
  1745. 'innerHTML': CSSTEXT
  1746. });
  1747. clone.insertBefore(styleEl, clone.firstChild);
  1748. var container = $$1.create('div');
  1749. container.appendChild(clone);
  1750. return container.innerHTML;
  1751. }
  1752. var _createClass$2 = function () {
  1753. function defineProperties(target, props) {
  1754. for (var i = 0; i < props.length; i++) {
  1755. var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
  1756. }
  1757. }return function (Constructor, protoProps, staticProps) {
  1758. if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
  1759. };
  1760. }();
  1761. function _classCallCheck$3(instance, Constructor) {
  1762. if (!(instance instanceof Constructor)) {
  1763. throw new TypeError("Cannot call a class as a function");
  1764. }
  1765. }
  1766. var BOUND_DRAW_FN = void 0;
  1767. var BaseChart = function () {
  1768. function BaseChart(parent, options) {
  1769. _classCallCheck$3(this, BaseChart);
  1770. this.parent = typeof parent === 'string' ? document.querySelector(parent) : parent;
  1771. if (!(this.parent instanceof HTMLElement)) {
  1772. throw new Error('No `parent` element to render on was provided.');
  1773. }
  1774. this.rawChartArgs = options;
  1775. this.title = options.title || '';
  1776. this.type = options.type || 'line';
  1777. this.realData = this.prepareData(options.data);
  1778. this.data = this.prepareFirstData(this.realData);
  1779. this.colors = this.validateColors(options.colors, this.type);
  1780. this.config = {
  1781. showTooltip: 1, // calculate
  1782. showLegend: 1, // calculate
  1783. isNavigable: options.isNavigable || 0,
  1784. animate: 1
  1785. };
  1786. this.measures = JSON.parse(JSON.stringify(BASE_MEASURES$1));
  1787. var m = this.measures;
  1788. this.setMeasures(options);
  1789. if (!this.title.length) {
  1790. m.titleHeight = 0;
  1791. }
  1792. if (!this.config.showLegend) m.legendHeight = 0;
  1793. this.argHeight = options.height || m.baseHeight;
  1794. this.state = {};
  1795. this.options = {};
  1796. this.initTimeout = INIT_CHART_UPDATE_TIMEOUT$1;
  1797. if (this.config.isNavigable) {
  1798. this.overlays = [];
  1799. }
  1800. this.configure(options);
  1801. }
  1802. _createClass$2(BaseChart, [{
  1803. key: 'prepareData',
  1804. value: function prepareData(data) {
  1805. return data;
  1806. }
  1807. }, {
  1808. key: 'prepareFirstData',
  1809. value: function prepareFirstData(data) {
  1810. return data;
  1811. }
  1812. }, {
  1813. key: 'validateColors',
  1814. value: function validateColors(colors, type) {
  1815. var validColors = [];
  1816. colors = (colors || []).concat(DEFAULT_COLORS$1[type]);
  1817. colors.forEach(function (string) {
  1818. var color = getColor(string);
  1819. if (!isValidColor(color)) {
  1820. console.warn('"' + string + '" is not a valid color.');
  1821. } else {
  1822. validColors.push(color);
  1823. }
  1824. });
  1825. return validColors;
  1826. }
  1827. }, {
  1828. key: 'setMeasures',
  1829. value: function setMeasures() {
  1830. // Override measures, including those for title and legend
  1831. // set config for legend and title
  1832. }
  1833. }, {
  1834. key: 'configure',
  1835. value: function configure() {
  1836. var height = this.argHeight;
  1837. this.baseHeight = height;
  1838. this.height = height - getExtraHeight$1(this.measures);
  1839. // Bind window events
  1840. BOUND_DRAW_FN = this.boundDrawFn.bind(this);
  1841. window.addEventListener('resize', BOUND_DRAW_FN);
  1842. window.addEventListener('orientationchange', this.boundDrawFn.bind(this));
  1843. }
  1844. }, {
  1845. key: 'boundDrawFn',
  1846. value: function boundDrawFn() {
  1847. this.draw(true);
  1848. }
  1849. }, {
  1850. key: 'unbindWindowEvents',
  1851. value: function unbindWindowEvents() {
  1852. window.removeEventListener('resize', BOUND_DRAW_FN);
  1853. window.removeEventListener('orientationchange', this.boundDrawFn.bind(this));
  1854. }
  1855. // Has to be called manually
  1856. }, {
  1857. key: 'setup',
  1858. value: function setup() {
  1859. this.makeContainer();
  1860. this.updateWidth();
  1861. this.makeTooltip();
  1862. this.draw(false, true);
  1863. }
  1864. }, {
  1865. key: 'makeContainer',
  1866. value: function makeContainer() {
  1867. // Chart needs a dedicated parent element
  1868. this.parent.innerHTML = '';
  1869. var args = {
  1870. inside: this.parent,
  1871. className: 'chart-container'
  1872. };
  1873. if (this.independentWidth) {
  1874. args.styles = { width: this.independentWidth + 'px' };
  1875. this.parent.style.overflow = 'auto';
  1876. }
  1877. this.container = $$1.create('div', args);
  1878. }
  1879. }, {
  1880. key: 'makeTooltip',
  1881. value: function makeTooltip() {
  1882. this.tip = new SvgTip({
  1883. parent: this.container,
  1884. colors: this.colors
  1885. });
  1886. this.bindTooltip();
  1887. }
  1888. }, {
  1889. key: 'bindTooltip',
  1890. value: function bindTooltip() {}
  1891. }, {
  1892. key: 'draw',
  1893. value: function draw() {
  1894. var _this = this;
  1895. var onlyWidthChange = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  1896. var init = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  1897. this.updateWidth();
  1898. this.calc(onlyWidthChange);
  1899. this.makeChartArea();
  1900. this.setupComponents();
  1901. this.components.forEach(function (c) {
  1902. return c.setup(_this.drawArea);
  1903. });
  1904. // this.components.forEach(c => c.make());
  1905. this.render(this.components, false);
  1906. if (init) {
  1907. this.data = this.realData;
  1908. setTimeout(function () {
  1909. _this.update(_this.data);
  1910. }, this.initTimeout);
  1911. }
  1912. this.renderLegend();
  1913. this.setupNavigation(init);
  1914. }
  1915. }, {
  1916. key: 'calc',
  1917. value: function calc() {} // builds state
  1918. }, {
  1919. key: 'updateWidth',
  1920. value: function updateWidth() {
  1921. this.baseWidth = getElementContentWidth$1(this.parent);
  1922. this.width = this.baseWidth - getExtraWidth$1(this.measures);
  1923. }
  1924. }, {
  1925. key: 'makeChartArea',
  1926. value: function makeChartArea() {
  1927. if (this.svg) {
  1928. this.container.removeChild(this.svg);
  1929. }
  1930. var m = this.measures;
  1931. this.svg = makeSVGContainer(this.container, 'frappe-chart chart', this.baseWidth, this.baseHeight);
  1932. this.svgDefs = makeSVGDefs(this.svg);
  1933. if (this.title.length) {
  1934. this.titleEL = makeText('title', m.margins.left, m.margins.top, this.title, {
  1935. fontSize: m.titleFontSize,
  1936. fill: '#666666',
  1937. dy: m.titleFontSize
  1938. });
  1939. }
  1940. var top = getTopOffset$1(m);
  1941. this.drawArea = makeSVGGroup(this.type + '-chart chart-draw-area', 'translate(' + getLeftOffset$1(m) + ', ' + top + ')');
  1942. if (this.config.showLegend) {
  1943. top += this.height + m.paddings.bottom;
  1944. this.legendArea = makeSVGGroup('chart-legend', 'translate(' + getLeftOffset$1(m) + ', ' + top + ')');
  1945. }
  1946. if (this.title.length) {
  1947. this.svg.appendChild(this.titleEL);
  1948. }
  1949. this.svg.appendChild(this.drawArea);
  1950. if (this.config.showLegend) {
  1951. this.svg.appendChild(this.legendArea);
  1952. }
  1953. this.updateTipOffset(getLeftOffset$1(m), getTopOffset$1(m));
  1954. }
  1955. }, {
  1956. key: 'updateTipOffset',
  1957. value: function updateTipOffset(x, y) {
  1958. this.tip.offset = {
  1959. x: x,
  1960. y: y
  1961. };
  1962. }
  1963. }, {
  1964. key: 'setupComponents',
  1965. value: function setupComponents() {
  1966. this.components = new Map();
  1967. }
  1968. }, {
  1969. key: 'update',
  1970. value: function update(data) {
  1971. if (!data) {
  1972. console.error('No data to update.');
  1973. }
  1974. this.data = this.prepareData(data);
  1975. this.calc(); // builds state
  1976. this.render();
  1977. }
  1978. }, {
  1979. key: 'render',
  1980. value: function render() {
  1981. var _this2 = this;
  1982. var components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.components;
  1983. var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
  1984. if (this.config.isNavigable) {
  1985. // Remove all existing overlays
  1986. this.overlays.map(function (o) {
  1987. return o.parentNode.removeChild(o);
  1988. });
  1989. // ref.parentNode.insertBefore(element, ref);
  1990. }
  1991. var elementsToAnimate = [];
  1992. // Can decouple to this.refreshComponents() first to save animation timeout
  1993. components.forEach(function (c) {
  1994. elementsToAnimate = elementsToAnimate.concat(c.update(animate));
  1995. });
  1996. if (elementsToAnimate.length > 0) {
  1997. runSMILAnimation(this.container, this.svg, elementsToAnimate);
  1998. setTimeout(function () {
  1999. components.forEach(function (c) {
  2000. return c.make();
  2001. });
  2002. _this2.updateNav();
  2003. }, CHART_POST_ANIMATE_TIMEOUT$1);
  2004. } else {
  2005. components.forEach(function (c) {
  2006. return c.make();
  2007. });
  2008. this.updateNav();
  2009. }
  2010. }
  2011. }, {
  2012. key: 'updateNav',
  2013. value: function updateNav() {
  2014. if (this.config.isNavigable) {
  2015. this.makeOverlay();
  2016. this.bindUnits();
  2017. }
  2018. }
  2019. }, {
  2020. key: 'renderLegend',
  2021. value: function renderLegend() {}
  2022. }, {
  2023. key: 'setupNavigation',
  2024. value: function setupNavigation() {
  2025. var _this3 = this;
  2026. var init = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  2027. if (!this.config.isNavigable) return;
  2028. if (init) {
  2029. this.bindOverlay();
  2030. this.keyActions = {
  2031. '13': this.onEnterKey.bind(this),
  2032. '37': this.onLeftArrow.bind(this),
  2033. '38': this.onUpArrow.bind(this),
  2034. '39': this.onRightArrow.bind(this),
  2035. '40': this.onDownArrow.bind(this)
  2036. };
  2037. document.addEventListener('keydown', function (e) {
  2038. if (isElementInViewport$1(_this3.container)) {
  2039. e = e || window.event;
  2040. if (_this3.keyActions[e.keyCode]) {
  2041. _this3.keyActions[e.keyCode]();
  2042. }
  2043. }
  2044. });
  2045. }
  2046. }
  2047. }, {
  2048. key: 'makeOverlay',
  2049. value: function makeOverlay$$1() {}
  2050. }, {
  2051. key: 'updateOverlay',
  2052. value: function updateOverlay$$1() {}
  2053. }, {
  2054. key: 'bindOverlay',
  2055. value: function bindOverlay() {}
  2056. }, {
  2057. key: 'bindUnits',
  2058. value: function bindUnits() {}
  2059. }, {
  2060. key: 'onLeftArrow',
  2061. value: function onLeftArrow() {}
  2062. }, {
  2063. key: 'onRightArrow',
  2064. value: function onRightArrow() {}
  2065. }, {
  2066. key: 'onUpArrow',
  2067. value: function onUpArrow() {}
  2068. }, {
  2069. key: 'onDownArrow',
  2070. value: function onDownArrow() {}
  2071. }, {
  2072. key: 'onEnterKey',
  2073. value: function onEnterKey() {}
  2074. }, {
  2075. key: 'addDataPoint',
  2076. value: function addDataPoint() {}
  2077. }, {
  2078. key: 'removeDataPoint',
  2079. value: function removeDataPoint() {}
  2080. }, {
  2081. key: 'getDataPoint',
  2082. value: function getDataPoint() {}
  2083. }, {
  2084. key: 'setCurrentDataPoint',
  2085. value: function setCurrentDataPoint() {}
  2086. }, {
  2087. key: 'updateDataset',
  2088. value: function updateDataset() {}
  2089. }, {
  2090. key: 'export',
  2091. value: function _export() {
  2092. var chartSvg = prepareForExport(this.svg);
  2093. downloadFile(this.title || 'Chart', [chartSvg]);
  2094. }
  2095. }]);
  2096. return BaseChart;
  2097. }();
  2098. var _createClass$1 = function () {
  2099. function defineProperties(target, props) {
  2100. for (var i = 0; i < props.length; i++) {
  2101. var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
  2102. }
  2103. }return function (Constructor, protoProps, staticProps) {
  2104. if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
  2105. };
  2106. }();
  2107. var _get$1 = function get$$1(object, property, receiver) {
  2108. if (object === null) object = Function.prototype;var desc = Object.getOwnPropertyDescriptor(object, property);if (desc === undefined) {
  2109. var parent = Object.getPrototypeOf(object);if (parent === null) {
  2110. return undefined;
  2111. } else {
  2112. return get$$1(parent, property, receiver);
  2113. }
  2114. } else if ("value" in desc) {
  2115. return desc.value;
  2116. } else {
  2117. var getter = desc.get;if (getter === undefined) {
  2118. return undefined;
  2119. }return getter.call(receiver);
  2120. }
  2121. };
  2122. function _classCallCheck$2(instance, Constructor) {
  2123. if (!(instance instanceof Constructor)) {
  2124. throw new TypeError("Cannot call a class as a function");
  2125. }
  2126. }
  2127. function _possibleConstructorReturn$1(self, call) {
  2128. if (!self) {
  2129. throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  2130. }return call && ((typeof call === 'undefined' ? 'undefined' : _typeof2(call)) === "object" || typeof call === "function") ? call : self;
  2131. }
  2132. function _inherits$1(subClass, superClass) {
  2133. if (typeof superClass !== "function" && superClass !== null) {
  2134. throw new TypeError("Super expression must either be null or a function, not " + (typeof superClass === 'undefined' ? 'undefined' : _typeof2(superClass)));
  2135. }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
  2136. }
  2137. var AggregationChart = function (_BaseChart) {
  2138. _inherits$1(AggregationChart, _BaseChart);
  2139. function AggregationChart(parent, args) {
  2140. _classCallCheck$2(this, AggregationChart);
  2141. return _possibleConstructorReturn$1(this, (AggregationChart.__proto__ || Object.getPrototypeOf(AggregationChart)).call(this, parent, args));
  2142. }
  2143. _createClass$1(AggregationChart, [{
  2144. key: 'configure',
  2145. value: function configure(args) {
  2146. _get$1(AggregationChart.prototype.__proto__ || Object.getPrototypeOf(AggregationChart.prototype), 'configure', this).call(this, args);
  2147. this.config.maxSlices = args.maxSlices || 20;
  2148. this.config.maxLegendPoints = args.maxLegendPoints || 20;
  2149. }
  2150. }, {
  2151. key: 'calc',
  2152. value: function calc() {
  2153. var _this2 = this;
  2154. var s = this.state;
  2155. var maxSlices = this.config.maxSlices;
  2156. s.sliceTotals = [];
  2157. var allTotals = this.data.labels.map(function (label, i) {
  2158. var total = 0;
  2159. _this2.data.datasets.map(function (e) {
  2160. total += e.values[i];
  2161. });
  2162. return [total, label];
  2163. }).filter(function (d) {
  2164. return d[0] >= 0;
  2165. }); // keep only positive results
  2166. var totals = allTotals;
  2167. if (allTotals.length > maxSlices) {
  2168. // Prune and keep a grey area for rest as per maxSlices
  2169. allTotals.sort(function (a, b) {
  2170. return b[0] - a[0];
  2171. });
  2172. totals = allTotals.slice(0, maxSlices - 1);
  2173. var remaining = allTotals.slice(maxSlices - 1);
  2174. var sumOfRemaining = 0;
  2175. remaining.map(function (d) {
  2176. sumOfRemaining += d[0];
  2177. });
  2178. totals.push([sumOfRemaining, 'Rest']);
  2179. this.colors[maxSlices - 1] = 'grey';
  2180. }
  2181. s.labels = [];
  2182. totals.map(function (d) {
  2183. s.sliceTotals.push(d[0]);
  2184. s.labels.push(d[1]);
  2185. });
  2186. s.grandTotal = s.sliceTotals.reduce(function (a, b) {
  2187. return a + b;
  2188. }, 0);
  2189. this.center = {
  2190. x: this.width / 2,
  2191. y: this.height / 2
  2192. };
  2193. }
  2194. }, {
  2195. key: 'renderLegend',
  2196. value: function renderLegend() {
  2197. var _this3 = this;
  2198. var s = this.state;
  2199. this.legendArea.textContent = '';
  2200. this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints);
  2201. var count = 0;
  2202. var y = 0;
  2203. this.legendTotals.map(function (d, i) {
  2204. var barWidth = 110;
  2205. var divisor = Math.floor((_this3.width - getExtraWidth$1(_this3.measures)) / barWidth);
  2206. if (count > divisor) {
  2207. count = 0;
  2208. y += 20;
  2209. }
  2210. var x = barWidth * count + 5;
  2211. var dot = legendDot(x, y, 5, _this3.colors[i], s.labels[i] + ': ' + d);
  2212. _this3.legendArea.appendChild(dot);
  2213. count++;
  2214. });
  2215. }
  2216. }]);
  2217. return AggregationChart;
  2218. }(BaseChart);
  2219. // Playing around with dates
  2220. var NO_OF_YEAR_MONTHS = 12;
  2221. var NO_OF_DAYS_IN_WEEK = 7;
  2222. var NO_OF_MILLIS = 1000;
  2223. var SEC_IN_DAY = 86400;
  2224. var MONTH_NAMES = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  2225. var DAY_NAMES_SHORT = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
  2226. // https://stackoverflow.com/a/11252167/6495043
  2227. function treatAsUtc(date) {
  2228. var result = new Date(date);
  2229. result.setMinutes(result.getMinutes() - result.getTimezoneOffset());
  2230. return result;
  2231. }
  2232. function getYyyyMmDd(date) {
  2233. var dd = date.getDate();
  2234. var mm = date.getMonth() + 1; // getMonth() is zero-based
  2235. return [date.getFullYear(), (mm > 9 ? '' : '0') + mm, (dd > 9 ? '' : '0') + dd].join('-');
  2236. }
  2237. function clone(date) {
  2238. return new Date(date.getTime());
  2239. }
  2240. // export function getMonthsBetween(startDate, endDate) {}
  2241. function getWeeksBetween(startDate, endDate) {
  2242. var weekStartDate = setDayToSunday(startDate);
  2243. return Math.ceil(getDaysBetween(weekStartDate, endDate) / NO_OF_DAYS_IN_WEEK);
  2244. }
  2245. function getDaysBetween(startDate, endDate) {
  2246. var millisecondsPerDay = SEC_IN_DAY * NO_OF_MILLIS;
  2247. return (treatAsUtc(endDate) - treatAsUtc(startDate)) / millisecondsPerDay;
  2248. }
  2249. function areInSameMonth(startDate, endDate) {
  2250. return startDate.getMonth() === endDate.getMonth() && startDate.getFullYear() === endDate.getFullYear();
  2251. }
  2252. function getMonthName(i) {
  2253. var short = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  2254. var monthName = MONTH_NAMES[i];
  2255. return short ? monthName.slice(0, 3) : monthName;
  2256. }
  2257. function getLastDateInMonth(month, year) {
  2258. return new Date(year, month + 1, 0); // 0: last day in previous month
  2259. }
  2260. // mutates
  2261. function setDayToSunday(date) {
  2262. var newDate = clone(date);
  2263. var day = newDate.getDay();
  2264. if (day !== 0) {
  2265. addDays(newDate, -1 * day);
  2266. }
  2267. return newDate;
  2268. }
  2269. // mutates
  2270. function addDays(date, numberOfDays) {
  2271. date.setDate(date.getDate() + numberOfDays);
  2272. }
  2273. var _slicedToArray$3 = function () {
  2274. function sliceIterator(arr, i) {
  2275. var _arr = [];var _n = true;var _d = false;var _e = undefined;try {
  2276. for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
  2277. _arr.push(_s.value);if (i && _arr.length === i) break;
  2278. }
  2279. } catch (err) {
  2280. _d = true;_e = err;
  2281. } finally {
  2282. try {
  2283. if (!_n && _i["return"]) _i["return"]();
  2284. } finally {
  2285. if (_d) throw _e;
  2286. }
  2287. }return _arr;
  2288. }return function (arr, i) {
  2289. if (Array.isArray(arr)) {
  2290. return arr;
  2291. } else if (Symbol.iterator in Object(arr)) {
  2292. return sliceIterator(arr, i);
  2293. } else {
  2294. throw new TypeError("Invalid attempt to destructure non-iterable instance");
  2295. }
  2296. };
  2297. }();
  2298. var _createClass$4 = function () {
  2299. function defineProperties(target, props) {
  2300. for (var i = 0; i < props.length; i++) {
  2301. var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
  2302. }
  2303. }return function (Constructor, protoProps, staticProps) {
  2304. if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
  2305. };
  2306. }();
  2307. function _classCallCheck$5(instance, Constructor) {
  2308. if (!(instance instanceof Constructor)) {
  2309. throw new TypeError("Cannot call a class as a function");
  2310. }
  2311. }
  2312. var ChartComponent = function () {
  2313. function ChartComponent(_ref) {
  2314. var _ref$layerClass = _ref.layerClass,
  2315. layerClass = _ref$layerClass === undefined ? '' : _ref$layerClass,
  2316. _ref$layerTransform = _ref.layerTransform,
  2317. layerTransform = _ref$layerTransform === undefined ? '' : _ref$layerTransform,
  2318. constants = _ref.constants,
  2319. getData = _ref.getData,
  2320. makeElements = _ref.makeElements,
  2321. animateElements = _ref.animateElements;
  2322. _classCallCheck$5(this, ChartComponent);
  2323. this.layerTransform = layerTransform;
  2324. this.constants = constants;
  2325. this.makeElements = makeElements;
  2326. this.getData = getData;
  2327. this.animateElements = animateElements;
  2328. this.store = [];
  2329. this.labels = [];
  2330. this.layerClass = layerClass;
  2331. this.layerClass = typeof this.layerClass === 'function' ? this.layerClass() : this.layerClass;
  2332. this.refresh();
  2333. }
  2334. _createClass$4(ChartComponent, [{
  2335. key: 'refresh',
  2336. value: function refresh(data) {
  2337. this.data = data || this.getData();
  2338. }
  2339. }, {
  2340. key: 'setup',
  2341. value: function setup(parent) {
  2342. this.layer = makeSVGGroup(this.layerClass, this.layerTransform, parent);
  2343. }
  2344. }, {
  2345. key: 'make',
  2346. value: function make() {
  2347. this.render(this.data);
  2348. this.oldData = this.data;
  2349. }
  2350. }, {
  2351. key: 'render',
  2352. value: function render(data) {
  2353. var _this = this;
  2354. this.store = this.makeElements(data);
  2355. this.layer.textContent = '';
  2356. this.store.forEach(function (element) {
  2357. _this.layer.appendChild(element);
  2358. });
  2359. this.labels.forEach(function (element) {
  2360. _this.layer.appendChild(element);
  2361. });
  2362. }
  2363. }, {
  2364. key: 'update',
  2365. value: function update() {
  2366. var animate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
  2367. this.refresh();
  2368. var animateElements = [];
  2369. if (animate) {
  2370. animateElements = this.animateElements(this.data) || [];
  2371. }
  2372. return animateElements;
  2373. }
  2374. }]);
  2375. return ChartComponent;
  2376. }();
  2377. var componentConfigs = {
  2378. pieSlices: {
  2379. layerClass: 'pie-slices',
  2380. makeElements: function makeElements(data) {
  2381. return data.sliceStrings.map(function (s, i) {
  2382. var slice = makePath(s, 'pie-path', 'none', data.colors[i]);
  2383. slice.style.transition = 'transform .3s;';
  2384. return slice;
  2385. });
  2386. },
  2387. animateElements: function animateElements(newData) {
  2388. return this.store.map(function (slice, i) {
  2389. return animatePathStr(slice, newData.sliceStrings[i]);
  2390. });
  2391. }
  2392. },
  2393. percentageBars: {
  2394. layerClass: 'percentage-bars',
  2395. makeElements: function makeElements(data) {
  2396. var _this2 = this;
  2397. return data.xPositions.map(function (x, i) {
  2398. var y = 0;
  2399. var bar = percentageBar(x, y, data.widths[i], _this2.constants.barHeight, _this2.constants.barDepth, data.colors[i]);
  2400. return bar;
  2401. });
  2402. },
  2403. animateElements: function animateElements(newData) {
  2404. if (newData) return [];
  2405. }
  2406. },
  2407. yAxis: {
  2408. layerClass: 'y axis',
  2409. makeElements: function makeElements(data) {
  2410. var _this3 = this;
  2411. return data.positions.map(function (position, i) {
  2412. return yLine(position, data.labels[i], _this3.constants.width, { mode: _this3.constants.mode, pos: _this3.constants.pos });
  2413. });
  2414. },
  2415. animateElements: function animateElements(newData) {
  2416. var newPos = newData.positions;
  2417. var newLabels = newData.labels;
  2418. var oldPos = this.oldData.positions;
  2419. var oldLabels = this.oldData.labels;
  2420. var _equilizeNoOfElements = equilizeNoOfElements(oldPos, newPos);
  2421. var _equilizeNoOfElements2 = _slicedToArray$3(_equilizeNoOfElements, 2);
  2422. oldPos = _equilizeNoOfElements2[0];
  2423. newPos = _equilizeNoOfElements2[1];
  2424. var _equilizeNoOfElements3 = equilizeNoOfElements(oldLabels, newLabels);
  2425. var _equilizeNoOfElements4 = _slicedToArray$3(_equilizeNoOfElements3, 2);
  2426. oldLabels = _equilizeNoOfElements4[0];
  2427. newLabels = _equilizeNoOfElements4[1];
  2428. this.render({
  2429. positions: oldPos,
  2430. labels: newLabels
  2431. });
  2432. return this.store.map(function (line, i) {
  2433. return translateHoriLine(line, newPos[i], oldPos[i]);
  2434. });
  2435. }
  2436. },
  2437. xAxis: {
  2438. layerClass: 'x axis',
  2439. makeElements: function makeElements(data) {
  2440. var _this4 = this;
  2441. return data.positions.map(function (position, i) {
  2442. return xLine(position, data.calcLabels[i], _this4.constants.height, { mode: _this4.constants.mode, pos: _this4.constants.pos });
  2443. });
  2444. },
  2445. animateElements: function animateElements(newData) {
  2446. var newPos = newData.positions;
  2447. var newLabels = newData.calcLabels;
  2448. var oldPos = this.oldData.positions;
  2449. var oldLabels = this.oldData.calcLabels;
  2450. var _equilizeNoOfElements5 = equilizeNoOfElements(oldPos, newPos);
  2451. var _equilizeNoOfElements6 = _slicedToArray$3(_equilizeNoOfElements5, 2);
  2452. oldPos = _equilizeNoOfElements6[0];
  2453. newPos = _equilizeNoOfElements6[1];
  2454. var _equilizeNoOfElements7 = equilizeNoOfElements(oldLabels, newLabels);
  2455. var _equilizeNoOfElements8 = _slicedToArray$3(_equilizeNoOfElements7, 2);
  2456. oldLabels = _equilizeNoOfElements8[0];
  2457. newLabels = _equilizeNoOfElements8[1];
  2458. this.render({
  2459. positions: oldPos,
  2460. calcLabels: newLabels
  2461. });
  2462. return this.store.map(function (line, i) {
  2463. return translateVertLine(line, newPos[i], oldPos[i]);
  2464. });
  2465. }
  2466. },
  2467. yMarkers: {
  2468. layerClass: 'y-markers',
  2469. makeElements: function makeElements(data) {
  2470. var _this5 = this;
  2471. return data.map(function (m) {
  2472. return yMarker(m.position, m.label, _this5.constants.width, { labelPos: m.options.labelPos, mode: 'span', lineType: 'dashed' });
  2473. });
  2474. },
  2475. animateElements: function animateElements(newData) {
  2476. var _equilizeNoOfElements9 = equilizeNoOfElements(this.oldData, newData);
  2477. var _equilizeNoOfElements10 = _slicedToArray$3(_equilizeNoOfElements9, 2);
  2478. this.oldData = _equilizeNoOfElements10[0];
  2479. newData = _equilizeNoOfElements10[1];
  2480. var newPos = newData.map(function (d) {
  2481. return d.position;
  2482. });
  2483. var newLabels = newData.map(function (d) {
  2484. return d.label;
  2485. });
  2486. var newOptions = newData.map(function (d) {
  2487. return d.options;
  2488. });
  2489. var oldPos = this.oldData.map(function (d) {
  2490. return d.position;
  2491. });
  2492. this.render(oldPos.map(function (pos, i) {
  2493. return {
  2494. position: oldPos[i],
  2495. label: newLabels[i],
  2496. options: newOptions[i]
  2497. };
  2498. }));
  2499. return this.store.map(function (line, i) {
  2500. return translateHoriLine(line, newPos[i], oldPos[i]);
  2501. });
  2502. }
  2503. },
  2504. yRegions: {
  2505. layerClass: 'y-regions',
  2506. makeElements: function makeElements(data) {
  2507. var _this6 = this;
  2508. return data.map(function (r) {
  2509. return yRegion(r.startPos, r.endPos, _this6.constants.width, r.label, { labelPos: r.options.labelPos });
  2510. });
  2511. },
  2512. animateElements: function animateElements(newData) {
  2513. var _equilizeNoOfElements11 = equilizeNoOfElements(this.oldData, newData);
  2514. var _equilizeNoOfElements12 = _slicedToArray$3(_equilizeNoOfElements11, 2);
  2515. this.oldData = _equilizeNoOfElements12[0];
  2516. newData = _equilizeNoOfElements12[1];
  2517. var newPos = newData.map(function (d) {
  2518. return d.endPos;
  2519. });
  2520. var newLabels = newData.map(function (d) {
  2521. return d.label;
  2522. });
  2523. var newStarts = newData.map(function (d) {
  2524. return d.startPos;
  2525. });
  2526. var newOptions = newData.map(function (d) {
  2527. return d.options;
  2528. });
  2529. var oldPos = this.oldData.map(function (d) {
  2530. return d.endPos;
  2531. });
  2532. var oldStarts = this.oldData.map(function (d) {
  2533. return d.startPos;
  2534. });
  2535. this.render(oldPos.map(function (pos, i) {
  2536. return {
  2537. startPos: oldStarts[i],
  2538. endPos: oldPos[i],
  2539. label: newLabels[i],
  2540. options: newOptions[i]
  2541. };
  2542. }));
  2543. var animateElements = [];
  2544. this.store.map(function (rectGroup, i) {
  2545. animateElements = animateElements.concat(animateRegion(rectGroup, newStarts[i], newPos[i], oldPos[i]));
  2546. });
  2547. return animateElements;
  2548. }
  2549. },
  2550. heatDomain: {
  2551. layerClass: function layerClass() {
  2552. return 'heat-domain domain-' + this.constants.index;
  2553. },
  2554. makeElements: function makeElements(data) {
  2555. var _this7 = this;
  2556. var _constants = this.constants,
  2557. index = _constants.index,
  2558. colWidth = _constants.colWidth,
  2559. rowHeight = _constants.rowHeight,
  2560. squareSize = _constants.squareSize,
  2561. xTranslate = _constants.xTranslate;
  2562. var monthNameHeight = -12;
  2563. var x = xTranslate,
  2564. y = 0;
  2565. this.serializedSubDomains = [];
  2566. data.cols.map(function (week, weekNo) {
  2567. if (weekNo === 1) {
  2568. _this7.labels.push(makeText('domain-name', x, monthNameHeight, getMonthName(index, true).toUpperCase(), {
  2569. fontSize: 9
  2570. }));
  2571. }
  2572. week.map(function (day, i) {
  2573. if (day.fill) {
  2574. var _data = {
  2575. 'data-date': day.yyyyMmDd,
  2576. 'data-value': day.dataValue,
  2577. 'data-day': i
  2578. };
  2579. var square = heatSquare('day', x, y, squareSize, day.fill, _data);
  2580. _this7.serializedSubDomains.push(square);
  2581. }
  2582. y += rowHeight;
  2583. });
  2584. y = 0;
  2585. x += colWidth;
  2586. });
  2587. return this.serializedSubDomains;
  2588. },
  2589. animateElements: function animateElements(newData) {
  2590. if (newData) return [];
  2591. }
  2592. },
  2593. barGraph: {
  2594. layerClass: function layerClass() {
  2595. return 'dataset-units dataset-bars dataset-' + this.constants.index;
  2596. },
  2597. makeElements: function makeElements(data) {
  2598. var c = this.constants;
  2599. this.unitType = 'bar';
  2600. this.units = data.yPositions.map(function (y, j) {
  2601. return datasetBar(data.xPositions[j], y, data.barWidth, c.color, data.labels[j], j, data.offsets[j], {
  2602. zeroLine: data.zeroLine,
  2603. barsWidth: data.barsWidth,
  2604. minHeight: c.minHeight
  2605. });
  2606. });
  2607. return this.units;
  2608. },
  2609. animateElements: function animateElements(newData) {
  2610. var newXPos = newData.xPositions;
  2611. var newYPos = newData.yPositions;
  2612. var newOffsets = newData.offsets;
  2613. var newLabels = newData.labels;
  2614. var oldXPos = this.oldData.xPositions;
  2615. var oldYPos = this.oldData.yPositions;
  2616. var oldOffsets = this.oldData.offsets;
  2617. var oldLabels = this.oldData.labels;
  2618. var _equilizeNoOfElements13 = equilizeNoOfElements(oldXPos, newXPos);
  2619. var _equilizeNoOfElements14 = _slicedToArray$3(_equilizeNoOfElements13, 2);
  2620. oldXPos = _equilizeNoOfElements14[0];
  2621. newXPos = _equilizeNoOfElements14[1];
  2622. var _equilizeNoOfElements15 = equilizeNoOfElements(oldYPos, newYPos);
  2623. var _equilizeNoOfElements16 = _slicedToArray$3(_equilizeNoOfElements15, 2);
  2624. oldYPos = _equilizeNoOfElements16[0];
  2625. newYPos = _equilizeNoOfElements16[1];
  2626. var _equilizeNoOfElements17 = equilizeNoOfElements(oldOffsets, newOffsets);
  2627. var _equilizeNoOfElements18 = _slicedToArray$3(_equilizeNoOfElements17, 2);
  2628. oldOffsets = _equilizeNoOfElements18[0];
  2629. newOffsets = _equilizeNoOfElements18[1];
  2630. var _equilizeNoOfElements19 = equilizeNoOfElements(oldLabels, newLabels);
  2631. var _equilizeNoOfElements20 = _slicedToArray$3(_equilizeNoOfElements19, 2);
  2632. oldLabels = _equilizeNoOfElements20[0];
  2633. newLabels = _equilizeNoOfElements20[1];
  2634. this.render({
  2635. xPositions: oldXPos,
  2636. yPositions: oldYPos,
  2637. offsets: oldOffsets,
  2638. labels: newLabels,
  2639. zeroLine: this.oldData.zeroLine,
  2640. barsWidth: this.oldData.barsWidth,
  2641. barWidth: this.oldData.barWidth
  2642. });
  2643. var animateElements = [];
  2644. this.store.map(function (bar, i) {
  2645. animateElements = animateElements.concat(animateBar(bar, newXPos[i], newYPos[i], newData.barWidth, newOffsets[i], { zeroLine: newData.zeroLine }));
  2646. });
  2647. return animateElements;
  2648. }
  2649. },
  2650. lineGraph: {
  2651. layerClass: function layerClass() {
  2652. return 'dataset-units dataset-line dataset-' + this.constants.index;
  2653. },
  2654. makeElements: function makeElements(data) {
  2655. var c = this.constants;
  2656. this.unitType = 'dot';
  2657. this.paths = {};
  2658. if (!c.hideLine) {
  2659. this.paths = getPaths(data.xPositions, data.yPositions, c.color, {
  2660. heatline: c.heatline,
  2661. areaFill: c.areaFill
  2662. }, {
  2663. svgDefs: c.svgDefs,
  2664. zeroLine: data.zeroLine
  2665. });
  2666. }
  2667. this.units = [];
  2668. if (!c.hideDots) {
  2669. this.units = data.yPositions.map(function (y, j) {
  2670. return datasetDot(data.xPositions[j], y, data.radius, c.color, c.valuesOverPoints ? data.values[j] : '', j);
  2671. });
  2672. }
  2673. return Object.values(this.paths).concat(this.units);
  2674. },
  2675. animateElements: function animateElements(newData) {
  2676. var newXPos = newData.xPositions;
  2677. var newYPos = newData.yPositions;
  2678. var newValues = newData.values;
  2679. var oldXPos = this.oldData.xPositions;
  2680. var oldYPos = this.oldData.yPositions;
  2681. var oldValues = this.oldData.values;
  2682. var _equilizeNoOfElements21 = equilizeNoOfElements(oldXPos, newXPos);
  2683. var _equilizeNoOfElements22 = _slicedToArray$3(_equilizeNoOfElements21, 2);
  2684. oldXPos = _equilizeNoOfElements22[0];
  2685. newXPos = _equilizeNoOfElements22[1];
  2686. var _equilizeNoOfElements23 = equilizeNoOfElements(oldYPos, newYPos);
  2687. var _equilizeNoOfElements24 = _slicedToArray$3(_equilizeNoOfElements23, 2);
  2688. oldYPos = _equilizeNoOfElements24[0];
  2689. newYPos = _equilizeNoOfElements24[1];
  2690. var _equilizeNoOfElements25 = equilizeNoOfElements(oldValues, newValues);
  2691. var _equilizeNoOfElements26 = _slicedToArray$3(_equilizeNoOfElements25, 2);
  2692. oldValues = _equilizeNoOfElements26[0];
  2693. newValues = _equilizeNoOfElements26[1];
  2694. this.render({
  2695. xPositions: oldXPos,
  2696. yPositions: oldYPos,
  2697. values: newValues,
  2698. zeroLine: this.oldData.zeroLine,
  2699. radius: this.oldData.radius
  2700. });
  2701. var animateElements = [];
  2702. if (Object.keys(this.paths).length) {
  2703. animateElements = animateElements.concat(animatePath(this.paths, newXPos, newYPos, newData.zeroLine));
  2704. }
  2705. if (this.units.length) {
  2706. this.units.map(function (dot, i) {
  2707. animateElements = animateElements.concat(animateDot(dot, newXPos[i], newYPos[i]));
  2708. });
  2709. }
  2710. return animateElements;
  2711. }
  2712. }
  2713. };
  2714. function getComponent(name, constants, getData) {
  2715. var keys = Object.keys(componentConfigs).filter(function (k) {
  2716. return name.includes(k);
  2717. });
  2718. var config = componentConfigs[keys[0]];
  2719. Object.assign(config, {
  2720. constants: constants,
  2721. getData: getData
  2722. });
  2723. return new ChartComponent(config);
  2724. }
  2725. var _createClass$1$1 = function () {
  2726. function defineProperties(target, props) {
  2727. for (var i = 0; i < props.length; i++) {
  2728. var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
  2729. }
  2730. }return function (Constructor, protoProps, staticProps) {
  2731. if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
  2732. };
  2733. }();
  2734. var _get = function get$$1(object, property, receiver) {
  2735. if (object === null) object = Function.prototype;var desc = Object.getOwnPropertyDescriptor(object, property);if (desc === undefined) {
  2736. var parent = Object.getPrototypeOf(object);if (parent === null) {
  2737. return undefined;
  2738. } else {
  2739. return get$$1(parent, property, receiver);
  2740. }
  2741. } else if ("value" in desc) {
  2742. return desc.value;
  2743. } else {
  2744. var getter = desc.get;if (getter === undefined) {
  2745. return undefined;
  2746. }return getter.call(receiver);
  2747. }
  2748. };
  2749. function _toConsumableArray$1$1(arr) {
  2750. if (Array.isArray(arr)) {
  2751. for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
  2752. arr2[i] = arr[i];
  2753. }return arr2;
  2754. } else {
  2755. return Array.from(arr);
  2756. }
  2757. }
  2758. function _classCallCheck$1(instance, Constructor) {
  2759. if (!(instance instanceof Constructor)) {
  2760. throw new TypeError("Cannot call a class as a function");
  2761. }
  2762. }
  2763. function _possibleConstructorReturn(self, call) {
  2764. if (!self) {
  2765. throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  2766. }return call && ((typeof call === 'undefined' ? 'undefined' : _typeof2(call)) === "object" || typeof call === "function") ? call : self;
  2767. }
  2768. function _inherits(subClass, superClass) {
  2769. if (typeof superClass !== "function" && superClass !== null) {
  2770. throw new TypeError("Super expression must either be null or a function, not " + (typeof superClass === 'undefined' ? 'undefined' : _typeof2(superClass)));
  2771. }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
  2772. }
  2773. var PercentageChart = function (_AggregationChart) {
  2774. _inherits(PercentageChart, _AggregationChart);
  2775. function PercentageChart(parent, args) {
  2776. _classCallCheck$1(this, PercentageChart);
  2777. var _this = _possibleConstructorReturn(this, (PercentageChart.__proto__ || Object.getPrototypeOf(PercentageChart)).call(this, parent, args));
  2778. _this.type = 'percentage';
  2779. _this.setup();
  2780. return _this;
  2781. }
  2782. _createClass$1$1(PercentageChart, [{
  2783. key: 'setMeasures',
  2784. value: function setMeasures(options) {
  2785. var m = this.measures;
  2786. this.barOptions = options.barOptions || {};
  2787. var b = this.barOptions;
  2788. b.height = b.height || PERCENTAGE_BAR_DEFAULT_HEIGHT$1;
  2789. b.depth = b.depth || PERCENTAGE_BAR_DEFAULT_DEPTH$1;
  2790. m.paddings.right = 30;
  2791. m.legendHeight = 80;
  2792. m.baseHeight = (b.height + b.depth * 0.5) * 8;
  2793. }
  2794. }, {
  2795. key: 'setupComponents',
  2796. value: function setupComponents() {
  2797. var s = this.state;
  2798. var componentConfigs = [['percentageBars', {
  2799. barHeight: this.barOptions.height,
  2800. barDepth: this.barOptions.depth
  2801. }, function () {
  2802. return {
  2803. xPositions: s.xPositions,
  2804. widths: s.widths,
  2805. colors: this.colors
  2806. };
  2807. }.bind(this)]];
  2808. this.components = new Map(componentConfigs.map(function (args) {
  2809. var component = getComponent.apply(undefined, _toConsumableArray$1$1(args));
  2810. return [args[0], component];
  2811. }));
  2812. }
  2813. }, {
  2814. key: 'calc',
  2815. value: function calc() {
  2816. var _this2 = this;
  2817. _get(PercentageChart.prototype.__proto__ || Object.getPrototypeOf(PercentageChart.prototype), 'calc', this).call(this);
  2818. var s = this.state;
  2819. s.xPositions = [];
  2820. s.widths = [];
  2821. var xPos = 0;
  2822. s.sliceTotals.map(function (value) {
  2823. var width = _this2.width * value / s.grandTotal;
  2824. s.widths.push(width);
  2825. s.xPositions.push(xPos);
  2826. xPos += width;
  2827. });
  2828. }
  2829. }, {
  2830. key: 'makeDataByIndex',
  2831. value: function makeDataByIndex() {}
  2832. }, {
  2833. key: 'bindTooltip',
  2834. value: function bindTooltip() {
  2835. var _this3 = this;
  2836. var s = this.state;
  2837. this.container.addEventListener('mousemove', function (e) {
  2838. var bars = _this3.components.get('percentageBars').store;
  2839. var bar = e.target;
  2840. if (bars.includes(bar)) {
  2841. var i = bars.indexOf(bar);
  2842. var gOff = getOffset$1(_this3.container),
  2843. pOff = getOffset$1(bar);
  2844. var x = pOff.left - gOff.left + parseInt(bar.getAttribute('width')) / 2;
  2845. var y = pOff.top - gOff.top;
  2846. var title = (_this3.formattedLabels && _this3.formattedLabels.length > 0 ? _this3.formattedLabels[i] : _this3.state.labels[i]) + ': ';
  2847. var fraction = s.sliceTotals[i] / s.grandTotal;
  2848. _this3.tip.setValues(x, y, { name: title, value: (fraction * 100).toFixed(1) + "%" });
  2849. _this3.tip.showTip();
  2850. }
  2851. });
  2852. }
  2853. }]);
  2854. return PercentageChart;
  2855. }(AggregationChart);
  2856. var _createClass$5 = function () {
  2857. function defineProperties(target, props) {
  2858. for (var i = 0; i < props.length; i++) {
  2859. var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
  2860. }
  2861. }return function (Constructor, protoProps, staticProps) {
  2862. if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
  2863. };
  2864. }();
  2865. var _get$2 = function get$$1(object, property, receiver) {
  2866. if (object === null) object = Function.prototype;var desc = Object.getOwnPropertyDescriptor(object, property);if (desc === undefined) {
  2867. var parent = Object.getPrototypeOf(object);if (parent === null) {
  2868. return undefined;
  2869. } else {
  2870. return get$$1(parent, property, receiver);
  2871. }
  2872. } else if ("value" in desc) {
  2873. return desc.value;
  2874. } else {
  2875. var getter = desc.get;if (getter === undefined) {
  2876. return undefined;
  2877. }return getter.call(receiver);
  2878. }
  2879. };
  2880. function _toConsumableArray$2(arr) {
  2881. if (Array.isArray(arr)) {
  2882. for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
  2883. arr2[i] = arr[i];
  2884. }return arr2;
  2885. } else {
  2886. return Array.from(arr);
  2887. }
  2888. }
  2889. function _classCallCheck$6(instance, Constructor) {
  2890. if (!(instance instanceof Constructor)) {
  2891. throw new TypeError("Cannot call a class as a function");
  2892. }
  2893. }
  2894. function _possibleConstructorReturn$2(self, call) {
  2895. if (!self) {
  2896. throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  2897. }return call && ((typeof call === 'undefined' ? 'undefined' : _typeof2(call)) === "object" || typeof call === "function") ? call : self;
  2898. }
  2899. function _inherits$2(subClass, superClass) {
  2900. if (typeof superClass !== "function" && superClass !== null) {
  2901. throw new TypeError("Super expression must either be null or a function, not " + (typeof superClass === 'undefined' ? 'undefined' : _typeof2(superClass)));
  2902. }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
  2903. }
  2904. var PieChart = function (_AggregationChart) {
  2905. _inherits$2(PieChart, _AggregationChart);
  2906. function PieChart(parent, args) {
  2907. _classCallCheck$6(this, PieChart);
  2908. var _this = _possibleConstructorReturn$2(this, (PieChart.__proto__ || Object.getPrototypeOf(PieChart)).call(this, parent, args));
  2909. _this.type = 'pie';
  2910. _this.initTimeout = 0;
  2911. _this.init = 1;
  2912. _this.setup();
  2913. return _this;
  2914. }
  2915. _createClass$5(PieChart, [{
  2916. key: 'configure',
  2917. value: function configure(args) {
  2918. _get$2(PieChart.prototype.__proto__ || Object.getPrototypeOf(PieChart.prototype), 'configure', this).call(this, args);
  2919. this.mouseMove = this.mouseMove.bind(this);
  2920. this.mouseLeave = this.mouseLeave.bind(this);
  2921. this.hoverRadio = args.hoverRadio || 0.1;
  2922. this.config.startAngle = args.startAngle || 0;
  2923. this.clockWise = args.clockWise || false;
  2924. }
  2925. }, {
  2926. key: 'calc',
  2927. value: function calc() {
  2928. var _this2 = this;
  2929. _get$2(PieChart.prototype.__proto__ || Object.getPrototypeOf(PieChart.prototype), 'calc', this).call(this);
  2930. var s = this.state;
  2931. this.radius = this.height > this.width ? this.center.x : this.center.y;
  2932. var radius = this.radius,
  2933. clockWise = this.clockWise;
  2934. var prevSlicesProperties = s.slicesProperties || [];
  2935. s.sliceStrings = [];
  2936. s.slicesProperties = [];
  2937. var curAngle = 180 - this.config.startAngle;
  2938. s.sliceTotals.map(function (total, i) {
  2939. var startAngle = curAngle;
  2940. var originDiffAngle = total / s.grandTotal * FULL_ANGLE$1;
  2941. var diffAngle = clockWise ? -originDiffAngle : originDiffAngle;
  2942. var endAngle = curAngle = curAngle + diffAngle;
  2943. var startPosition = getPositionByAngle$1(startAngle, radius);
  2944. var endPosition = getPositionByAngle$1(endAngle, radius);
  2945. var prevProperty = _this2.init && prevSlicesProperties[i];
  2946. var curStart = void 0,
  2947. curEnd = void 0;
  2948. if (_this2.init) {
  2949. curStart = prevProperty ? prevProperty.startPosition : startPosition;
  2950. curEnd = prevProperty ? prevProperty.endPosition : startPosition;
  2951. } else {
  2952. curStart = startPosition;
  2953. curEnd = endPosition;
  2954. }
  2955. var curPath = makeArcPathStr(curStart, curEnd, _this2.center, _this2.radius, _this2.clockWise);
  2956. s.sliceStrings.push(curPath);
  2957. s.slicesProperties.push({
  2958. startPosition: startPosition,
  2959. endPosition: endPosition,
  2960. value: total,
  2961. total: s.grandTotal,
  2962. startAngle: startAngle,
  2963. endAngle: endAngle,
  2964. angle: diffAngle
  2965. });
  2966. });
  2967. this.init = 0;
  2968. }
  2969. }, {
  2970. key: 'setupComponents',
  2971. value: function setupComponents() {
  2972. var s = this.state;
  2973. var componentConfigs = [['pieSlices', {}, function () {
  2974. return {
  2975. sliceStrings: s.sliceStrings,
  2976. colors: this.colors
  2977. };
  2978. }.bind(this)]];
  2979. this.components = new Map(componentConfigs.map(function (args) {
  2980. var component = getComponent.apply(undefined, _toConsumableArray$2(args));
  2981. return [args[0], component];
  2982. }));
  2983. }
  2984. }, {
  2985. key: 'calTranslateByAngle',
  2986. value: function calTranslateByAngle(property) {
  2987. var radius = this.radius,
  2988. hoverRadio = this.hoverRadio;
  2989. var position = getPositionByAngle$1(property.startAngle + property.angle / 2, radius);
  2990. return 'translate3d(' + position.x * hoverRadio + 'px,' + position.y * hoverRadio + 'px,0)';
  2991. }
  2992. }, {
  2993. key: 'hoverSlice',
  2994. value: function hoverSlice(path, i, flag, e) {
  2995. if (!path) return;
  2996. var color = this.colors[i];
  2997. if (flag) {
  2998. transform(path, this.calTranslateByAngle(this.state.slicesProperties[i]));
  2999. path.style.fill = lightenDarkenColor(color, 50);
  3000. var g_off = getOffset$1(this.svg);
  3001. var x = e.pageX - g_off.left + 10;
  3002. var y = e.pageY - g_off.top - 10;
  3003. var title = (this.formatted_labels && this.formatted_labels.length > 0 ? this.formatted_labels[i] : this.state.labels[i]) + ': ';
  3004. var percent = (this.state.sliceTotals[i] * 100 / this.state.grandTotal).toFixed(1);
  3005. this.tip.setValues(x, y, { name: title, value: percent + "%" });
  3006. this.tip.showTip();
  3007. } else {
  3008. transform(path, 'translate3d(0,0,0)');
  3009. this.tip.hideTip();
  3010. path.style.fill = color;
  3011. }
  3012. }
  3013. }, {
  3014. key: 'bindTooltip',
  3015. value: function bindTooltip() {
  3016. this.container.addEventListener('mousemove', this.mouseMove);
  3017. this.container.addEventListener('mouseleave', this.mouseLeave);
  3018. }
  3019. }, {
  3020. key: 'mouseMove',
  3021. value: function mouseMove(e) {
  3022. var target = e.target;
  3023. var slices = this.components.get('pieSlices').store;
  3024. var prevIndex = this.curActiveSliceIndex;
  3025. var prevAcitve = this.curActiveSlice;
  3026. if (slices.includes(target)) {
  3027. var i = slices.indexOf(target);
  3028. this.hoverSlice(prevAcitve, prevIndex, false);
  3029. this.curActiveSlice = target;
  3030. this.curActiveSliceIndex = i;
  3031. this.hoverSlice(target, i, true, e);
  3032. } else {
  3033. this.mouseLeave();
  3034. }
  3035. }
  3036. }, {
  3037. key: 'mouseLeave',
  3038. value: function mouseLeave() {
  3039. this.hoverSlice(this.curActiveSlice, this.curActiveSliceIndex, false);
  3040. }
  3041. }]);
  3042. return PieChart;
  3043. }(AggregationChart);
  3044. var _slicedToArray$4 = function () {
  3045. function sliceIterator(arr, i) {
  3046. var _arr = [];var _n = true;var _d = false;var _e = undefined;try {
  3047. for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
  3048. _arr.push(_s.value);if (i && _arr.length === i) break;
  3049. }
  3050. } catch (err) {
  3051. _d = true;_e = err;
  3052. } finally {
  3053. try {
  3054. if (!_n && _i["return"]) _i["return"]();
  3055. } finally {
  3056. if (_d) throw _e;
  3057. }
  3058. }return _arr;
  3059. }return function (arr, i) {
  3060. if (Array.isArray(arr)) {
  3061. return arr;
  3062. } else if (Symbol.iterator in Object(arr)) {
  3063. return sliceIterator(arr, i);
  3064. } else {
  3065. throw new TypeError("Invalid attempt to destructure non-iterable instance");
  3066. }
  3067. };
  3068. }();
  3069. function _toConsumableArray$4(arr) {
  3070. if (Array.isArray(arr)) {
  3071. for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
  3072. arr2[i] = arr[i];
  3073. }return arr2;
  3074. } else {
  3075. return Array.from(arr);
  3076. }
  3077. }
  3078. function normalize(x) {
  3079. // Calculates mantissa and exponent of a number
  3080. // Returns normalized number and exponent
  3081. // https://stackoverflow.com/q/9383593/6495043
  3082. if (x === 0) {
  3083. return [0, 0];
  3084. }
  3085. if (isNaN(x)) {
  3086. return { mantissa: -6755399441055744, exponent: 972 };
  3087. }
  3088. var sig = x > 0 ? 1 : -1;
  3089. if (!isFinite(x)) {
  3090. return { mantissa: sig * 4503599627370496, exponent: 972 };
  3091. }
  3092. x = Math.abs(x);
  3093. var exp = Math.floor(Math.log10(x));
  3094. var man = x / Math.pow(10, exp);
  3095. return [sig * man, exp];
  3096. }
  3097. function getChartRangeIntervals(max) {
  3098. var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
  3099. var upperBound = Math.ceil(max);
  3100. var lowerBound = Math.floor(min);
  3101. var range = upperBound - lowerBound;
  3102. var noOfParts = range;
  3103. var partSize = 1;
  3104. // To avoid too many partitions
  3105. if (range > 5) {
  3106. if (range % 2 !== 0) {
  3107. upperBound++;
  3108. // Recalc range
  3109. range = upperBound - lowerBound;
  3110. }
  3111. noOfParts = range / 2;
  3112. partSize = 2;
  3113. }
  3114. // Special case: 1 and 2
  3115. if (range <= 2) {
  3116. noOfParts = 4;
  3117. partSize = range / noOfParts;
  3118. }
  3119. // Special case: 0
  3120. if (range === 0) {
  3121. noOfParts = 5;
  3122. partSize = 1;
  3123. }
  3124. var intervals = [];
  3125. for (var i = 0; i <= noOfParts; i++) {
  3126. intervals.push(lowerBound + partSize * i);
  3127. }
  3128. return intervals;
  3129. }
  3130. function getChartIntervals(maxValue) {
  3131. var minValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
  3132. var _normalize = normalize(maxValue),
  3133. _normalize2 = _slicedToArray$4(_normalize, 2),
  3134. normalMaxValue = _normalize2[0],
  3135. exponent = _normalize2[1];
  3136. var normalMinValue = minValue ? minValue / Math.pow(10, exponent) : 0;
  3137. // Allow only 7 significant digits
  3138. normalMaxValue = normalMaxValue.toFixed(6);
  3139. var intervals = getChartRangeIntervals(normalMaxValue, normalMinValue);
  3140. intervals = intervals.map(function (value) {
  3141. return value * Math.pow(10, exponent);
  3142. });
  3143. return intervals;
  3144. }
  3145. function calcChartIntervals(values) {
  3146. var withMinimum = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  3147. //*** Where the magic happens ***
  3148. // Calculates best-fit y intervals from given values
  3149. // and returns the interval array
  3150. var maxValue = Math.max.apply(Math, _toConsumableArray$4(values));
  3151. var minValue = Math.min.apply(Math, _toConsumableArray$4(values));
  3152. // Exponent to be used for pretty print
  3153. var exponent = 0,
  3154. intervals = []; // eslint-disable-line no-unused-vars
  3155. function getPositiveFirstIntervals(maxValue, absMinValue) {
  3156. var intervals = getChartIntervals(maxValue);
  3157. var intervalSize = intervals[1] - intervals[0];
  3158. // Then unshift the negative values
  3159. var value = 0;
  3160. for (var i = 1; value < absMinValue; i++) {
  3161. value += intervalSize;
  3162. intervals.unshift(-1 * value);
  3163. }
  3164. return intervals;
  3165. }
  3166. // CASE I: Both non-negative
  3167. if (maxValue >= 0 && minValue >= 0) {
  3168. exponent = normalize(maxValue)[1];
  3169. if (!withMinimum) {
  3170. intervals = getChartIntervals(maxValue);
  3171. } else {
  3172. intervals = getChartIntervals(maxValue, minValue);
  3173. }
  3174. }
  3175. // CASE II: Only minValue negative
  3176. else if (maxValue > 0 && minValue < 0) {
  3177. // `withMinimum` irrelevant in this case,
  3178. // We'll be handling both sides of zero separately
  3179. // (both starting from zero)
  3180. // Because ceil() and floor() behave differently
  3181. // in those two regions
  3182. var absMinValue = Math.abs(minValue);
  3183. if (maxValue >= absMinValue) {
  3184. exponent = normalize(maxValue)[1];
  3185. intervals = getPositiveFirstIntervals(maxValue, absMinValue);
  3186. } else {
  3187. // Mirror: maxValue => absMinValue, then change sign
  3188. exponent = normalize(absMinValue)[1];
  3189. var posIntervals = getPositiveFirstIntervals(absMinValue, maxValue);
  3190. intervals = posIntervals.map(function (d) {
  3191. return d * -1;
  3192. });
  3193. }
  3194. }
  3195. // CASE III: Both non-positive
  3196. else if (maxValue <= 0 && minValue <= 0) {
  3197. // Mirrored Case I:
  3198. // Work with positives, then reverse the sign and array
  3199. var pseudoMaxValue = Math.abs(minValue);
  3200. var pseudoMinValue = Math.abs(maxValue);
  3201. exponent = normalize(pseudoMaxValue)[1];
  3202. if (!withMinimum) {
  3203. intervals = getChartIntervals(pseudoMaxValue);
  3204. } else {
  3205. intervals = getChartIntervals(pseudoMaxValue, pseudoMinValue);
  3206. }
  3207. intervals = intervals.reverse().map(function (d) {
  3208. return d * -1;
  3209. });
  3210. }
  3211. return intervals;
  3212. }
  3213. function getZeroIndex(yPts) {
  3214. var zeroIndex = void 0;
  3215. var interval = getIntervalSize(yPts);
  3216. if (yPts.indexOf(0) >= 0) {
  3217. // the range has a given zero
  3218. // zero-line on the chart
  3219. zeroIndex = yPts.indexOf(0);
  3220. } else if (yPts[0] > 0) {
  3221. // Minimum value is positive
  3222. // zero-line is off the chart: below
  3223. var min = yPts[0];
  3224. zeroIndex = -1 * min / interval;
  3225. } else {
  3226. // Maximum value is negative
  3227. // zero-line is off the chart: above
  3228. var max = yPts[yPts.length - 1];
  3229. zeroIndex = -1 * max / interval + (yPts.length - 1);
  3230. }
  3231. return zeroIndex;
  3232. }
  3233. function getIntervalSize(orderedArray) {
  3234. return orderedArray[1] - orderedArray[0];
  3235. }
  3236. function getValueRange(orderedArray) {
  3237. return orderedArray[orderedArray.length - 1] - orderedArray[0];
  3238. }
  3239. function scale(val, yAxis) {
  3240. return floatTwo$1(yAxis.zeroLine - val * yAxis.scaleMultiplier);
  3241. }
  3242. function getClosestInArray(goal, arr) {
  3243. var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
  3244. var closest = arr.reduce(function (prev, curr) {
  3245. return Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev;
  3246. });
  3247. return index ? arr.indexOf(closest) : closest;
  3248. }
  3249. function calcDistribution(values, distributionSize) {
  3250. // Assume non-negative values,
  3251. // implying distribution minimum at zero
  3252. var dataMaxValue = Math.max.apply(Math, _toConsumableArray$4(values));
  3253. var distributionStep = 1 / (distributionSize - 1);
  3254. var distribution = [];
  3255. for (var i = 0; i < distributionSize; i++) {
  3256. var checkpoint = dataMaxValue * (distributionStep * i);
  3257. distribution.push(checkpoint);
  3258. }
  3259. return distribution;
  3260. }
  3261. function getMaxCheckpoint(value, distribution) {
  3262. return distribution.filter(function (d) {
  3263. return d < value;
  3264. }).length;
  3265. }
  3266. var _createClass$6 = function () {
  3267. function defineProperties(target, props) {
  3268. for (var i = 0; i < props.length; i++) {
  3269. var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
  3270. }
  3271. }return function (Constructor, protoProps, staticProps) {
  3272. if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
  3273. };
  3274. }();
  3275. function _toConsumableArray$3(arr) {
  3276. if (Array.isArray(arr)) {
  3277. for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
  3278. arr2[i] = arr[i];
  3279. }return arr2;
  3280. } else {
  3281. return Array.from(arr);
  3282. }
  3283. }
  3284. function _classCallCheck$7(instance, Constructor) {
  3285. if (!(instance instanceof Constructor)) {
  3286. throw new TypeError("Cannot call a class as a function");
  3287. }
  3288. }
  3289. function _possibleConstructorReturn$3(self, call) {
  3290. if (!self) {
  3291. throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  3292. }return call && ((typeof call === 'undefined' ? 'undefined' : _typeof2(call)) === "object" || typeof call === "function") ? call : self;
  3293. }
  3294. function _inherits$3(subClass, superClass) {
  3295. if (typeof superClass !== "function" && superClass !== null) {
  3296. throw new TypeError("Super expression must either be null or a function, not " + (typeof superClass === 'undefined' ? 'undefined' : _typeof2(superClass)));
  3297. }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
  3298. }
  3299. var COL_WIDTH = HEATMAP_SQUARE_SIZE$1 + HEATMAP_GUTTER_SIZE$1;
  3300. var ROW_HEIGHT = COL_WIDTH;
  3301. // const DAY_INCR = 1;
  3302. var Heatmap = function (_BaseChart) {
  3303. _inherits$3(Heatmap, _BaseChart);
  3304. function Heatmap(parent, options) {
  3305. _classCallCheck$7(this, Heatmap);
  3306. var _this = _possibleConstructorReturn$3(this, (Heatmap.__proto__ || Object.getPrototypeOf(Heatmap)).call(this, parent, options));
  3307. _this.type = 'heatmap';
  3308. _this.countLabel = options.countLabel || '';
  3309. var validStarts = ['Sunday', 'Monday'];
  3310. var startSubDomain = validStarts.includes(options.startSubDomain) ? options.startSubDomain : 'Sunday';
  3311. _this.startSubDomainIndex = validStarts.indexOf(startSubDomain);
  3312. _this.setup();
  3313. return _this;
  3314. }
  3315. _createClass$6(Heatmap, [{
  3316. key: 'setMeasures',
  3317. value: function setMeasures(options) {
  3318. var m = this.measures;
  3319. this.discreteDomains = options.discreteDomains === 0 ? 0 : 1;
  3320. m.paddings.top = ROW_HEIGHT * 3;
  3321. m.paddings.bottom = 0;
  3322. m.legendHeight = ROW_HEIGHT * 2;
  3323. m.baseHeight = ROW_HEIGHT * NO_OF_DAYS_IN_WEEK + getExtraHeight$1(m);
  3324. var d = this.data;
  3325. var spacing = this.discreteDomains ? NO_OF_YEAR_MONTHS : 0;
  3326. this.independentWidth = (getWeeksBetween(d.start, d.end) + spacing) * COL_WIDTH + getExtraWidth$1(m);
  3327. }
  3328. }, {
  3329. key: 'updateWidth',
  3330. value: function updateWidth() {
  3331. var spacing = this.discreteDomains ? NO_OF_YEAR_MONTHS : 0;
  3332. var noOfWeeks = this.state.noOfWeeks ? this.state.noOfWeeks : 52;
  3333. this.baseWidth = (noOfWeeks + spacing) * COL_WIDTH + getExtraWidth$1(this.measures);
  3334. }
  3335. }, {
  3336. key: 'prepareData',
  3337. value: function prepareData() {
  3338. var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.data;
  3339. if (data.start && data.end && data.start > data.end) {
  3340. throw new Error('Start date cannot be greater than end date.');
  3341. }
  3342. if (!data.start) {
  3343. data.start = new Date();
  3344. data.start.setFullYear(data.start.getFullYear() - 1);
  3345. }
  3346. if (!data.end) {
  3347. data.end = new Date();
  3348. }
  3349. data.dataPoints = data.dataPoints || {};
  3350. if (parseInt(Object.keys(data.dataPoints)[0]) > 100000) {
  3351. var points = {};
  3352. Object.keys(data.dataPoints).forEach(function (timestampSec$$1) {
  3353. var date = new Date(timestampSec$$1 * NO_OF_MILLIS);
  3354. points[getYyyyMmDd(date)] = data.dataPoints[timestampSec$$1];
  3355. });
  3356. data.dataPoints = points;
  3357. }
  3358. return data;
  3359. }
  3360. }, {
  3361. key: 'calc',
  3362. value: function calc() {
  3363. var s = this.state;
  3364. s.start = clone(this.data.start);
  3365. s.end = clone(this.data.end);
  3366. s.firstWeekStart = clone(s.start);
  3367. s.noOfWeeks = getWeeksBetween(s.start, s.end);
  3368. s.distribution = calcDistribution(Object.values(this.data.dataPoints), HEATMAP_DISTRIBUTION_SIZE$1);
  3369. s.domainConfigs = this.getDomains();
  3370. }
  3371. }, {
  3372. key: 'setupComponents',
  3373. value: function setupComponents() {
  3374. var _this2 = this;
  3375. var s = this.state;
  3376. var lessCol = this.discreteDomains ? 0 : 1;
  3377. var componentConfigs = s.domainConfigs.map(function (config, i) {
  3378. return ['heatDomain', {
  3379. index: config.index,
  3380. colWidth: COL_WIDTH,
  3381. rowHeight: ROW_HEIGHT,
  3382. squareSize: HEATMAP_SQUARE_SIZE$1,
  3383. xTranslate: s.domainConfigs.filter(function (config, j) {
  3384. return j < i;
  3385. }).map(function (config) {
  3386. return config.cols.length - lessCol;
  3387. }).reduce(function (a, b) {
  3388. return a + b;
  3389. }, 0) * COL_WIDTH
  3390. }, function () {
  3391. return s.domainConfigs[i];
  3392. }.bind(_this2)];
  3393. });
  3394. this.components = new Map(componentConfigs.map(function (args, i) {
  3395. var component = getComponent.apply(undefined, _toConsumableArray$3(args));
  3396. return [args[0] + '-' + i, component];
  3397. }));
  3398. var y = 0;
  3399. DAY_NAMES_SHORT.forEach(function (dayName, i) {
  3400. if ([1, 3, 5].includes(i)) {
  3401. var dayText = makeText('subdomain-name', -COL_WIDTH / 2, y, dayName, {
  3402. fontSize: HEATMAP_SQUARE_SIZE$1,
  3403. dy: 8,
  3404. textAnchor: 'end'
  3405. });
  3406. _this2.drawArea.appendChild(dayText);
  3407. }
  3408. y += ROW_HEIGHT;
  3409. });
  3410. }
  3411. }, {
  3412. key: 'update',
  3413. value: function update(data) {
  3414. if (!data) {
  3415. console.error('No data to update.');
  3416. }
  3417. this.data = this.prepareData(data);
  3418. this.draw();
  3419. this.bindTooltip();
  3420. }
  3421. }, {
  3422. key: 'bindTooltip',
  3423. value: function bindTooltip() {
  3424. var _this3 = this;
  3425. this.container.addEventListener('mousemove', function (e) {
  3426. _this3.components.forEach(function (comp) {
  3427. var daySquares = comp.store;
  3428. var daySquare = e.target;
  3429. if (daySquares.includes(daySquare)) {
  3430. var count = daySquare.getAttribute('data-value');
  3431. var dateParts = daySquare.getAttribute('data-date').split('-');
  3432. var month = getMonthName(parseInt(dateParts[1]) - 1, true);
  3433. var gOff = _this3.container.getBoundingClientRect(),
  3434. pOff = daySquare.getBoundingClientRect();
  3435. var width = parseInt(e.target.getAttribute('width'));
  3436. var x = pOff.left - gOff.left + width / 2;
  3437. var y = pOff.top - gOff.top;
  3438. var value = count + ' ' + _this3.countLabel;
  3439. var name = ' on ' + month + ' ' + dateParts[0] + ', ' + dateParts[2];
  3440. _this3.tip.setValues(x, y, { name: name, value: value, valueFirst: 1 }, []);
  3441. _this3.tip.showTip();
  3442. }
  3443. });
  3444. });
  3445. }
  3446. }, {
  3447. key: 'renderLegend',
  3448. value: function renderLegend() {
  3449. var _this4 = this;
  3450. this.legendArea.textContent = '';
  3451. var x = 0;
  3452. var y = ROW_HEIGHT;
  3453. var lessText = makeText('subdomain-name', x, y, 'Less', {
  3454. fontSize: HEATMAP_SQUARE_SIZE$1 + 1,
  3455. dy: 9
  3456. });
  3457. x = COL_WIDTH * 2 + COL_WIDTH / 2;
  3458. this.legendArea.appendChild(lessText);
  3459. this.colors.slice(0, HEATMAP_DISTRIBUTION_SIZE$1).map(function (color, i) {
  3460. var square = heatSquare('heatmap-legend-unit', x + (COL_WIDTH + 3) * i, y, HEATMAP_SQUARE_SIZE$1, color);
  3461. _this4.legendArea.appendChild(square);
  3462. });
  3463. var moreTextX = x + HEATMAP_DISTRIBUTION_SIZE$1 * (COL_WIDTH + 3) + COL_WIDTH / 4;
  3464. var moreText = makeText('subdomain-name', moreTextX, y, 'More', {
  3465. fontSize: HEATMAP_SQUARE_SIZE$1 + 1,
  3466. dy: 9
  3467. });
  3468. this.legendArea.appendChild(moreText);
  3469. }
  3470. }, {
  3471. key: 'getDomains',
  3472. value: function getDomains() {
  3473. var s = this.state;
  3474. var _ref = [s.start.getMonth(), s.start.getFullYear()],
  3475. startMonth = _ref[0],
  3476. startYear = _ref[1];
  3477. var _ref2 = [s.end.getMonth(), s.end.getFullYear()],
  3478. endMonth = _ref2[0],
  3479. endYear = _ref2[1];
  3480. var noOfMonths = endMonth - startMonth + 1 + (endYear - startYear) * 12;
  3481. var domainConfigs = [];
  3482. var startOfMonth = clone(s.start);
  3483. for (var i = 0; i < noOfMonths; i++) {
  3484. var endDate = s.end;
  3485. if (!areInSameMonth(startOfMonth, s.end)) {
  3486. var _ref3 = [startOfMonth.getMonth(), startOfMonth.getFullYear()],
  3487. month = _ref3[0],
  3488. year = _ref3[1];
  3489. endDate = getLastDateInMonth(month, year);
  3490. }
  3491. domainConfigs.push(this.getDomainConfig(startOfMonth, endDate));
  3492. addDays(endDate, 1);
  3493. startOfMonth = endDate;
  3494. }
  3495. return domainConfigs;
  3496. }
  3497. }, {
  3498. key: 'getDomainConfig',
  3499. value: function getDomainConfig(startDate) {
  3500. var endDate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
  3501. var _ref4 = [startDate.getMonth(), startDate.getFullYear()],
  3502. month = _ref4[0],
  3503. year = _ref4[1];
  3504. var startOfWeek = setDayToSunday(startDate); // TODO: Monday as well
  3505. endDate = clone(endDate) || getLastDateInMonth(month, year);
  3506. var domainConfig = {
  3507. index: month,
  3508. cols: []
  3509. };
  3510. addDays(endDate, 1);
  3511. var noOfMonthWeeks = getWeeksBetween(startOfWeek, endDate);
  3512. var cols = [],
  3513. col = void 0;
  3514. for (var i = 0; i < noOfMonthWeeks; i++) {
  3515. col = this.getCol(startOfWeek, month);
  3516. cols.push(col);
  3517. startOfWeek = new Date(col[NO_OF_DAYS_IN_WEEK - 1].yyyyMmDd);
  3518. addDays(startOfWeek, 1);
  3519. }
  3520. if (col[NO_OF_DAYS_IN_WEEK - 1].dataValue !== undefined) {
  3521. addDays(startOfWeek, 1);
  3522. cols.push(this.getCol(startOfWeek, month, true));
  3523. }
  3524. domainConfig.cols = cols;
  3525. return domainConfig;
  3526. }
  3527. }, {
  3528. key: 'getCol',
  3529. value: function getCol(startDate, month) {
  3530. var empty = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
  3531. var s = this.state;
  3532. // startDate is the start of week
  3533. var currentDate = clone(startDate);
  3534. var col = [];
  3535. for (var i = 0; i < NO_OF_DAYS_IN_WEEK; i++, addDays(currentDate, 1)) {
  3536. var config = {};
  3537. // Non-generic adjustment for entire heatmap, needs state
  3538. var currentDateWithinData = currentDate >= s.start && currentDate <= s.end;
  3539. if (empty || currentDate.getMonth() !== month || !currentDateWithinData) {
  3540. config.yyyyMmDd = getYyyyMmDd(currentDate);
  3541. } else {
  3542. config = this.getSubDomainConfig(currentDate);
  3543. }
  3544. col.push(config);
  3545. }
  3546. return col;
  3547. }
  3548. }, {
  3549. key: 'getSubDomainConfig',
  3550. value: function getSubDomainConfig(date) {
  3551. var yyyyMmDd = getYyyyMmDd(date);
  3552. var dataValue = this.data.dataPoints[yyyyMmDd];
  3553. var config = {
  3554. yyyyMmDd: yyyyMmDd,
  3555. dataValue: dataValue || 0,
  3556. fill: this.colors[getMaxCheckpoint(dataValue, this.state.distribution)]
  3557. };
  3558. return config;
  3559. }
  3560. }]);
  3561. return Heatmap;
  3562. }(BaseChart);
  3563. function dataPrep(data, type) {
  3564. data.labels = data.labels || [];
  3565. var datasetLength = data.labels.length;
  3566. // Datasets
  3567. var datasets = data.datasets;
  3568. var zeroArray = new Array(datasetLength).fill(0);
  3569. if (!datasets) {
  3570. // default
  3571. datasets = [{
  3572. values: zeroArray
  3573. }];
  3574. }
  3575. var overridingType = void 0;
  3576. if (AXIS_DATASET_CHART_TYPES$1.includes(type)) {
  3577. overridingType = type;
  3578. }
  3579. datasets.map(function (d) {
  3580. // Set values
  3581. if (!d.values) {
  3582. d.values = zeroArray;
  3583. } else {
  3584. // Check for non values
  3585. var vals = d.values;
  3586. vals = vals.map(function (val) {
  3587. return !isNaN(val) ? val : 0;
  3588. });
  3589. // Trim or extend
  3590. if (vals.length > datasetLength) {
  3591. vals = vals.slice(0, datasetLength);
  3592. } else {
  3593. vals = fillArray$1(vals, datasetLength - vals.length, 0);
  3594. }
  3595. }
  3596. // Set labels
  3597. // Set type
  3598. if (overridingType) {
  3599. d.chartType = overridingType;
  3600. } else if (!d.chartType) {
  3601. d.chartType = AXIS_CHART_DEFAULT_TYPE$1;
  3602. }
  3603. });
  3604. // Markers
  3605. // Regions
  3606. // data.yRegions = data.yRegions || [];
  3607. if (data.yRegions) {
  3608. data.yRegions.map(function (d) {
  3609. if (d.end < d.start) {
  3610. var _ref = [d.end, d.start];
  3611. d.start = _ref[0];
  3612. d.end = _ref[1];
  3613. }
  3614. });
  3615. }
  3616. return data;
  3617. }
  3618. function zeroDataPrep(realData) {
  3619. var datasetLength = realData.labels.length;
  3620. var zeroArray = new Array(datasetLength).fill(0);
  3621. var zeroData = {
  3622. labels: realData.labels.slice(0, -1),
  3623. datasets: realData.datasets.map(function (d) {
  3624. return {
  3625. name: '',
  3626. values: zeroArray.slice(0, -1),
  3627. chartType: d.chartType
  3628. };
  3629. })
  3630. };
  3631. if (realData.yMarkers) {
  3632. zeroData.yMarkers = [{
  3633. value: 0,
  3634. label: ''
  3635. }];
  3636. }
  3637. if (realData.yRegions) {
  3638. zeroData.yRegions = [{
  3639. start: 0,
  3640. end: 0,
  3641. label: ''
  3642. }];
  3643. }
  3644. return zeroData;
  3645. }
  3646. function getShortenedLabels(chartWidth) {
  3647. var labels = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  3648. var isSeries = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
  3649. var allowedSpace = chartWidth / labels.length;
  3650. if (allowedSpace <= 0) allowedSpace = 1;
  3651. var allowedLetters = allowedSpace / DEFAULT_CHAR_WIDTH$1;
  3652. var calcLabels = labels.map(function (label, i) {
  3653. label += "";
  3654. if (label.length > allowedLetters) {
  3655. if (!isSeries) {
  3656. if (allowedLetters - 3 > 0) {
  3657. label = label.slice(0, allowedLetters - 3) + " ...";
  3658. } else {
  3659. label = label.slice(0, allowedLetters) + '..';
  3660. }
  3661. } else {
  3662. var multiple = Math.ceil(label.length / allowedLetters);
  3663. if (i % multiple !== 0) {
  3664. label = "";
  3665. }
  3666. }
  3667. }
  3668. return label;
  3669. });
  3670. return calcLabels;
  3671. }
  3672. var _createClass$7 = function () {
  3673. function defineProperties(target, props) {
  3674. for (var i = 0; i < props.length; i++) {
  3675. var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
  3676. }
  3677. }return function (Constructor, protoProps, staticProps) {
  3678. if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
  3679. };
  3680. }();
  3681. var _get$3 = function get$$1(object, property, receiver) {
  3682. if (object === null) object = Function.prototype;var desc = Object.getOwnPropertyDescriptor(object, property);if (desc === undefined) {
  3683. var parent = Object.getPrototypeOf(object);if (parent === null) {
  3684. return undefined;
  3685. } else {
  3686. return get$$1(parent, property, receiver);
  3687. }
  3688. } else if ("value" in desc) {
  3689. return desc.value;
  3690. } else {
  3691. var getter = desc.get;if (getter === undefined) {
  3692. return undefined;
  3693. }return getter.call(receiver);
  3694. }
  3695. };
  3696. function _toConsumableArray$5(arr) {
  3697. if (Array.isArray(arr)) {
  3698. for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
  3699. arr2[i] = arr[i];
  3700. }return arr2;
  3701. } else {
  3702. return Array.from(arr);
  3703. }
  3704. }
  3705. function _classCallCheck$8(instance, Constructor) {
  3706. if (!(instance instanceof Constructor)) {
  3707. throw new TypeError("Cannot call a class as a function");
  3708. }
  3709. }
  3710. function _possibleConstructorReturn$4(self, call) {
  3711. if (!self) {
  3712. throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  3713. }return call && ((typeof call === 'undefined' ? 'undefined' : _typeof2(call)) === "object" || typeof call === "function") ? call : self;
  3714. }
  3715. function _inherits$4(subClass, superClass) {
  3716. if (typeof superClass !== "function" && superClass !== null) {
  3717. throw new TypeError("Super expression must either be null or a function, not " + (typeof superClass === 'undefined' ? 'undefined' : _typeof2(superClass)));
  3718. }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
  3719. }
  3720. var AxisChart = function (_BaseChart) {
  3721. _inherits$4(AxisChart, _BaseChart);
  3722. function AxisChart(parent, args) {
  3723. _classCallCheck$8(this, AxisChart);
  3724. var _this = _possibleConstructorReturn$4(this, (AxisChart.__proto__ || Object.getPrototypeOf(AxisChart)).call(this, parent, args));
  3725. _this.barOptions = args.barOptions || {};
  3726. _this.lineOptions = args.lineOptions || {};
  3727. _this.init = 1;
  3728. _this.setup();
  3729. return _this;
  3730. }
  3731. _createClass$7(AxisChart, [{
  3732. key: 'setMeasures',
  3733. value: function setMeasures() {
  3734. if (this.data.datasets.length <= 1) {
  3735. this.config.showLegend = 0;
  3736. this.measures.paddings.bottom = 30;
  3737. }
  3738. }
  3739. }, {
  3740. key: 'configure',
  3741. value: function configure(options) {
  3742. _get$3(AxisChart.prototype.__proto__ || Object.getPrototypeOf(AxisChart.prototype), 'configure', this).call(this, options);
  3743. options.axisOptions = options.axisOptions || {};
  3744. options.tooltipOptions = options.tooltipOptions || {};
  3745. this.config.xAxisMode = options.axisOptions.xAxisMode || 'span';
  3746. this.config.yAxisMode = options.axisOptions.yAxisMode || 'span';
  3747. this.config.xIsSeries = options.axisOptions.xIsSeries || 0;
  3748. this.config.formatTooltipX = options.tooltipOptions.formatTooltipX;
  3749. this.config.formatTooltipY = options.tooltipOptions.formatTooltipY;
  3750. this.config.valuesOverPoints = options.valuesOverPoints;
  3751. }
  3752. }, {
  3753. key: 'prepareData',
  3754. value: function prepareData() {
  3755. var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.data;
  3756. return dataPrep(data, this.type);
  3757. }
  3758. }, {
  3759. key: 'prepareFirstData',
  3760. value: function prepareFirstData() {
  3761. var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.data;
  3762. return zeroDataPrep(data);
  3763. }
  3764. }, {
  3765. key: 'calc',
  3766. value: function calc() {
  3767. var onlyWidthChange = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  3768. this.calcXPositions();
  3769. if (!onlyWidthChange) {
  3770. this.calcYAxisParameters(this.getAllYValues(), this.type === 'line');
  3771. }
  3772. this.makeDataByIndex();
  3773. }
  3774. }, {
  3775. key: 'calcXPositions',
  3776. value: function calcXPositions() {
  3777. var s = this.state;
  3778. var labels = this.data.labels;
  3779. s.datasetLength = labels.length;
  3780. s.unitWidth = this.width / s.datasetLength;
  3781. // Default, as per bar, and mixed. Only line will be a special case
  3782. s.xOffset = s.unitWidth / 2;
  3783. // // For a pure Line Chart
  3784. // s.unitWidth = this.width/(s.datasetLength - 1);
  3785. // s.xOffset = 0;
  3786. s.xAxis = {
  3787. labels: labels,
  3788. positions: labels.map(function (d, i) {
  3789. return floatTwo$1(s.xOffset + i * s.unitWidth);
  3790. })
  3791. };
  3792. }
  3793. }, {
  3794. key: 'calcYAxisParameters',
  3795. value: function calcYAxisParameters(dataValues) {
  3796. var withMinimum = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'false';
  3797. var yPts = calcChartIntervals(dataValues, withMinimum);
  3798. var scaleMultiplier = this.height / getValueRange(yPts);
  3799. var intervalHeight = getIntervalSize(yPts) * scaleMultiplier;
  3800. var zeroLine = this.height - getZeroIndex(yPts) * intervalHeight;
  3801. this.state.yAxis = {
  3802. labels: yPts,
  3803. positions: yPts.map(function (d) {
  3804. return zeroLine - d * scaleMultiplier;
  3805. }),
  3806. scaleMultiplier: scaleMultiplier,
  3807. zeroLine: zeroLine
  3808. };
  3809. // Dependent if above changes
  3810. this.calcDatasetPoints();
  3811. this.calcYExtremes();
  3812. this.calcYRegions();
  3813. }
  3814. }, {
  3815. key: 'calcDatasetPoints',
  3816. value: function calcDatasetPoints() {
  3817. var s = this.state;
  3818. var scaleAll = function scaleAll(values) {
  3819. return values.map(function (val) {
  3820. return scale(val, s.yAxis);
  3821. });
  3822. };
  3823. s.datasets = this.data.datasets.map(function (d, i) {
  3824. var values = d.values;
  3825. var cumulativeYs = d.cumulativeYs || [];
  3826. return {
  3827. name: d.name,
  3828. index: i,
  3829. chartType: d.chartType,
  3830. values: values,
  3831. yPositions: scaleAll(values),
  3832. cumulativeYs: cumulativeYs,
  3833. cumulativeYPos: scaleAll(cumulativeYs)
  3834. };
  3835. });
  3836. }
  3837. }, {
  3838. key: 'calcYExtremes',
  3839. value: function calcYExtremes() {
  3840. var s = this.state;
  3841. if (this.barOptions.stacked) {
  3842. s.yExtremes = s.datasets[s.datasets.length - 1].cumulativeYPos;
  3843. return;
  3844. }
  3845. s.yExtremes = new Array(s.datasetLength).fill(9999);
  3846. s.datasets.map(function (d) {
  3847. d.yPositions.map(function (pos, j) {
  3848. if (pos < s.yExtremes[j]) {
  3849. s.yExtremes[j] = pos;
  3850. }
  3851. });
  3852. });
  3853. }
  3854. }, {
  3855. key: 'calcYRegions',
  3856. value: function calcYRegions() {
  3857. var s = this.state;
  3858. if (this.data.yMarkers) {
  3859. this.state.yMarkers = this.data.yMarkers.map(function (d) {
  3860. d.position = scale(d.value, s.yAxis);
  3861. if (!d.options) d.options = {};
  3862. // if(!d.label.includes(':')) {
  3863. // d.label += ': ' + d.value;
  3864. // }
  3865. return d;
  3866. });
  3867. }
  3868. if (this.data.yRegions) {
  3869. this.state.yRegions = this.data.yRegions.map(function (d) {
  3870. d.startPos = scale(d.start, s.yAxis);
  3871. d.endPos = scale(d.end, s.yAxis);
  3872. if (!d.options) d.options = {};
  3873. return d;
  3874. });
  3875. }
  3876. }
  3877. }, {
  3878. key: 'getAllYValues',
  3879. value: function getAllYValues() {
  3880. var _this2 = this,
  3881. _ref;
  3882. var key = 'values';
  3883. if (this.barOptions.stacked) {
  3884. key = 'cumulativeYs';
  3885. var cumulative = new Array(this.state.datasetLength).fill(0);
  3886. this.data.datasets.map(function (d, i) {
  3887. var values = _this2.data.datasets[i].values;
  3888. d[key] = cumulative = cumulative.map(function (c, i) {
  3889. return c + values[i];
  3890. });
  3891. });
  3892. }
  3893. var allValueLists = this.data.datasets.map(function (d) {
  3894. return d[key];
  3895. });
  3896. if (this.data.yMarkers) {
  3897. allValueLists.push(this.data.yMarkers.map(function (d) {
  3898. return d.value;
  3899. }));
  3900. }
  3901. if (this.data.yRegions) {
  3902. this.data.yRegions.map(function (d) {
  3903. allValueLists.push([d.end, d.start]);
  3904. });
  3905. }
  3906. return (_ref = []).concat.apply(_ref, _toConsumableArray$5(allValueLists));
  3907. }
  3908. }, {
  3909. key: 'setupComponents',
  3910. value: function setupComponents() {
  3911. var _this3 = this;
  3912. var componentConfigs = [['yAxis', {
  3913. mode: this.config.yAxisMode,
  3914. width: this.width
  3915. // pos: 'right'
  3916. }, function () {
  3917. return this.state.yAxis;
  3918. }.bind(this)], ['xAxis', {
  3919. mode: this.config.xAxisMode,
  3920. height: this.height
  3921. // pos: 'right'
  3922. }, function () {
  3923. var s = this.state;
  3924. s.xAxis.calcLabels = getShortenedLabels(this.width, s.xAxis.labels, this.config.xIsSeries);
  3925. return s.xAxis;
  3926. }.bind(this)], ['yRegions', {
  3927. width: this.width,
  3928. pos: 'right'
  3929. }, function () {
  3930. return this.state.yRegions;
  3931. }.bind(this)]];
  3932. var barDatasets = this.state.datasets.filter(function (d) {
  3933. return d.chartType === 'bar';
  3934. });
  3935. var lineDatasets = this.state.datasets.filter(function (d) {
  3936. return d.chartType === 'line';
  3937. });
  3938. var barsConfigs = barDatasets.map(function (d) {
  3939. var index = d.index;
  3940. return ['barGraph' + '-' + d.index, {
  3941. index: index,
  3942. color: _this3.colors[index],
  3943. stacked: _this3.barOptions.stacked,
  3944. // same for all datasets
  3945. valuesOverPoints: _this3.config.valuesOverPoints,
  3946. minHeight: _this3.height * MIN_BAR_PERCENT_HEIGHT$1
  3947. }, function () {
  3948. var s = this.state;
  3949. var d = s.datasets[index];
  3950. var stacked = this.barOptions.stacked;
  3951. var spaceRatio = this.barOptions.spaceRatio || BAR_CHART_SPACE_RATIO$1;
  3952. var barsWidth = s.unitWidth / 2 * (2 - spaceRatio);
  3953. var barWidth = barsWidth / (stacked ? 1 : barDatasets.length);
  3954. var xPositions = s.xAxis.positions.map(function (x) {
  3955. return x - barsWidth / 2;
  3956. });
  3957. if (!stacked) {
  3958. xPositions = xPositions.map(function (p) {
  3959. return p + barWidth * index;
  3960. });
  3961. }
  3962. var labels = new Array(s.datasetLength).fill('');
  3963. if (this.config.valuesOverPoints) {
  3964. if (stacked && d.index === s.datasets.length - 1) {
  3965. labels = d.cumulativeYs;
  3966. } else {
  3967. labels = d.values;
  3968. }
  3969. }
  3970. var offsets = new Array(s.datasetLength).fill(0);
  3971. if (stacked) {
  3972. offsets = d.yPositions.map(function (y, j) {
  3973. return y - d.cumulativeYPos[j];
  3974. });
  3975. }
  3976. return {
  3977. xPositions: xPositions,
  3978. yPositions: d.yPositions,
  3979. offsets: offsets,
  3980. // values: d.values,
  3981. labels: labels,
  3982. zeroLine: s.yAxis.zeroLine,
  3983. barsWidth: barsWidth,
  3984. barWidth: barWidth
  3985. };
  3986. }.bind(_this3)];
  3987. });
  3988. var lineConfigs = lineDatasets.map(function (d) {
  3989. var index = d.index;
  3990. return ['lineGraph' + '-' + d.index, {
  3991. index: index,
  3992. color: _this3.colors[index],
  3993. svgDefs: _this3.svgDefs,
  3994. heatline: _this3.lineOptions.heatline,
  3995. areaFill: _this3.lineOptions.areaFill,
  3996. hideDots: _this3.lineOptions.hideDots,
  3997. hideLine: _this3.lineOptions.hideLine,
  3998. // same for all datasets
  3999. valuesOverPoints: _this3.config.valuesOverPoints
  4000. }, function () {
  4001. var s = this.state;
  4002. var d = s.datasets[index];
  4003. var minLine = s.yAxis.positions[0] < s.yAxis.zeroLine ? s.yAxis.positions[0] : s.yAxis.zeroLine;
  4004. return {
  4005. xPositions: s.xAxis.positions,
  4006. yPositions: d.yPositions,
  4007. values: d.values,
  4008. zeroLine: minLine,
  4009. radius: this.lineOptions.dotSize || LINE_CHART_DOT_SIZE$1
  4010. };
  4011. }.bind(_this3)];
  4012. });
  4013. var markerConfigs = [['yMarkers', {
  4014. width: this.width,
  4015. pos: 'right'
  4016. }, function () {
  4017. return this.state.yMarkers;
  4018. }.bind(this)]];
  4019. componentConfigs = componentConfigs.concat(barsConfigs, lineConfigs, markerConfigs);
  4020. var optionals = ['yMarkers', 'yRegions'];
  4021. this.dataUnitComponents = [];
  4022. this.components = new Map(componentConfigs.filter(function (args) {
  4023. return !optionals.includes(args[0]) || _this3.state[args[0]];
  4024. }).map(function (args) {
  4025. var component = getComponent.apply(undefined, _toConsumableArray$5(args));
  4026. if (args[0].includes('lineGraph') || args[0].includes('barGraph')) {
  4027. _this3.dataUnitComponents.push(component);
  4028. }
  4029. return [args[0], component];
  4030. }));
  4031. }
  4032. }, {
  4033. key: 'makeDataByIndex',
  4034. value: function makeDataByIndex() {
  4035. var _this4 = this;
  4036. this.dataByIndex = {};
  4037. var s = this.state;
  4038. var formatX = this.config.formatTooltipX;
  4039. var formatY = this.config.formatTooltipY;
  4040. var titles = s.xAxis.labels;
  4041. titles.map(function (label, index) {
  4042. var values = _this4.state.datasets.map(function (set$$1, i) {
  4043. var value = set$$1.values[index];
  4044. return {
  4045. title: set$$1.name,
  4046. value: value,
  4047. yPos: set$$1.yPositions[index],
  4048. color: _this4.colors[i],
  4049. formatted: formatY ? formatY(value) : value
  4050. };
  4051. });
  4052. _this4.dataByIndex[index] = {
  4053. label: label,
  4054. formattedLabel: formatX ? formatX(label) : label,
  4055. xPos: s.xAxis.positions[index],
  4056. values: values,
  4057. yExtreme: s.yExtremes[index]
  4058. };
  4059. });
  4060. }
  4061. }, {
  4062. key: 'bindTooltip',
  4063. value: function bindTooltip() {
  4064. var _this5 = this;
  4065. // NOTE: could be in tooltip itself, as it is a given functionality for its parent
  4066. this.container.addEventListener('mousemove', function (e) {
  4067. var m = _this5.measures;
  4068. var o = getOffset$1(_this5.container);
  4069. var relX = e.pageX - o.left - getLeftOffset$1(m);
  4070. var relY = e.pageY - o.top;
  4071. if (relY < _this5.height + getTopOffset$1(m) && relY > getTopOffset$1(m)) {
  4072. _this5.mapTooltipXPosition(relX);
  4073. } else {
  4074. _this5.tip.hideTip();
  4075. }
  4076. });
  4077. }
  4078. }, {
  4079. key: 'mapTooltipXPosition',
  4080. value: function mapTooltipXPosition(relX) {
  4081. var s = this.state;
  4082. if (!s.yExtremes) return;
  4083. var index = getClosestInArray(relX, s.xAxis.positions, true);
  4084. var dbi = this.dataByIndex[index];
  4085. this.tip.setValues(dbi.xPos + this.tip.offset.x, dbi.yExtreme + this.tip.offset.y, { name: dbi.formattedLabel, value: '' }, dbi.values, index);
  4086. this.tip.showTip();
  4087. }
  4088. }, {
  4089. key: 'renderLegend',
  4090. value: function renderLegend() {
  4091. var _this6 = this;
  4092. var s = this.data;
  4093. if (s.datasets.length > 1) {
  4094. this.legendArea.textContent = '';
  4095. s.datasets.map(function (d, i) {
  4096. var barWidth = AXIS_LEGEND_BAR_SIZE$1;
  4097. // let rightEndPoint = this.baseWidth - this.measures.margins.left - this.measures.margins.right;
  4098. // let multiplier = s.datasets.length - i;
  4099. var rect = legendBar(
  4100. // rightEndPoint - multiplier * barWidth, // To right align
  4101. barWidth * i, '0', barWidth, _this6.colors[i], d.name);
  4102. _this6.legendArea.appendChild(rect);
  4103. });
  4104. }
  4105. }
  4106. // Overlay
  4107. }, {
  4108. key: 'makeOverlay',
  4109. value: function makeOverlay$$1() {
  4110. var _this7 = this;
  4111. if (this.init) {
  4112. this.init = 0;
  4113. return;
  4114. }
  4115. if (this.overlayGuides) {
  4116. this.overlayGuides.forEach(function (g) {
  4117. var o = g.overlay;
  4118. o.parentNode.removeChild(o);
  4119. });
  4120. }
  4121. this.overlayGuides = this.dataUnitComponents.map(function (c) {
  4122. return {
  4123. type: c.unitType,
  4124. overlay: undefined,
  4125. units: c.units
  4126. };
  4127. });
  4128. if (this.state.currentIndex === undefined) {
  4129. this.state.currentIndex = this.state.datasetLength - 1;
  4130. }
  4131. // Render overlays
  4132. this.overlayGuides.map(function (d) {
  4133. var currentUnit = d.units[_this7.state.currentIndex];
  4134. d.overlay = makeOverlay[d.type](currentUnit);
  4135. _this7.drawArea.appendChild(d.overlay);
  4136. });
  4137. }
  4138. }, {
  4139. key: 'updateOverlayGuides',
  4140. value: function updateOverlayGuides() {
  4141. if (this.overlayGuides) {
  4142. this.overlayGuides.forEach(function (g) {
  4143. var o = g.overlay;
  4144. o.parentNode.removeChild(o);
  4145. });
  4146. }
  4147. }
  4148. }, {
  4149. key: 'bindOverlay',
  4150. value: function bindOverlay() {
  4151. var _this8 = this;
  4152. this.parent.addEventListener('data-select', function () {
  4153. _this8.updateOverlay();
  4154. });
  4155. }
  4156. }, {
  4157. key: 'bindUnits',
  4158. value: function bindUnits() {
  4159. var _this9 = this;
  4160. this.dataUnitComponents.map(function (c) {
  4161. c.units.map(function (unit) {
  4162. unit.addEventListener('click', function () {
  4163. var index = unit.getAttribute('data-point-index');
  4164. _this9.setCurrentDataPoint(index);
  4165. });
  4166. });
  4167. });
  4168. // Note: Doesn't work as tooltip is absolutely positioned
  4169. this.tip.container.addEventListener('click', function () {
  4170. var index = _this9.tip.container.getAttribute('data-point-index');
  4171. _this9.setCurrentDataPoint(index);
  4172. });
  4173. }
  4174. }, {
  4175. key: 'updateOverlay',
  4176. value: function updateOverlay$$1() {
  4177. var _this10 = this;
  4178. this.overlayGuides.map(function (d) {
  4179. var currentUnit = d.units[_this10.state.currentIndex];
  4180. updateOverlay[d.type](currentUnit, d.overlay);
  4181. });
  4182. }
  4183. }, {
  4184. key: 'onLeftArrow',
  4185. value: function onLeftArrow() {
  4186. this.setCurrentDataPoint(this.state.currentIndex - 1);
  4187. }
  4188. }, {
  4189. key: 'onRightArrow',
  4190. value: function onRightArrow() {
  4191. this.setCurrentDataPoint(this.state.currentIndex + 1);
  4192. }
  4193. }, {
  4194. key: 'getDataPoint',
  4195. value: function getDataPoint() {
  4196. var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state.currentIndex;
  4197. var s = this.state;
  4198. var data_point = {
  4199. index: index,
  4200. label: s.xAxis.labels[index],
  4201. values: s.datasets.map(function (d) {
  4202. return d.values[index];
  4203. })
  4204. };
  4205. return data_point;
  4206. }
  4207. }, {
  4208. key: 'setCurrentDataPoint',
  4209. value: function setCurrentDataPoint(index) {
  4210. var s = this.state;
  4211. index = parseInt(index);
  4212. if (index < 0) index = 0;
  4213. if (index >= s.xAxis.labels.length) index = s.xAxis.labels.length - 1;
  4214. if (index === s.currentIndex) return;
  4215. s.currentIndex = index;
  4216. fire$1(this.parent, "data-select", this.getDataPoint());
  4217. }
  4218. // API
  4219. }, {
  4220. key: 'addDataPoint',
  4221. value: function addDataPoint(label, datasetValues) {
  4222. var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.state.datasetLength;
  4223. _get$3(AxisChart.prototype.__proto__ || Object.getPrototypeOf(AxisChart.prototype), 'addDataPoint', this).call(this, label, datasetValues, index);
  4224. this.data.labels.splice(index, 0, label);
  4225. this.data.datasets.map(function (d, i) {
  4226. d.values.splice(index, 0, datasetValues[i]);
  4227. });
  4228. this.update(this.data);
  4229. }
  4230. }, {
  4231. key: 'removeDataPoint',
  4232. value: function removeDataPoint() {
  4233. var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state.datasetLength - 1;
  4234. if (this.data.labels.length <= 1) {
  4235. return;
  4236. }
  4237. _get$3(AxisChart.prototype.__proto__ || Object.getPrototypeOf(AxisChart.prototype), 'removeDataPoint', this).call(this, index);
  4238. this.data.labels.splice(index, 1);
  4239. this.data.datasets.map(function (d) {
  4240. d.values.splice(index, 1);
  4241. });
  4242. this.update(this.data);
  4243. }
  4244. }, {
  4245. key: 'updateDataset',
  4246. value: function updateDataset(datasetValues) {
  4247. var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
  4248. this.data.datasets[index].values = datasetValues;
  4249. this.update(this.data);
  4250. }
  4251. // addDataset(dataset, index) {}
  4252. // removeDataset(index = 0) {}
  4253. }, {
  4254. key: 'updateDatasets',
  4255. value: function updateDatasets(datasets) {
  4256. this.data.datasets.map(function (d, i) {
  4257. if (datasets[i]) {
  4258. d.values = datasets[i];
  4259. }
  4260. });
  4261. this.update(this.data);
  4262. }
  4263. // updateDataPoint(dataPoint, index = 0) {}
  4264. // addDataPoint(dataPoint, index = 0) {}
  4265. // removeDataPoint(index = 0) {}
  4266. }]);
  4267. return AxisChart;
  4268. }(BaseChart);
  4269. function _classCallCheck$1$1(instance, Constructor) {
  4270. if (!(instance instanceof Constructor)) {
  4271. throw new TypeError("Cannot call a class as a function");
  4272. }
  4273. }
  4274. var chartTypes = {
  4275. bar: AxisChart,
  4276. line: AxisChart,
  4277. // multiaxis: MultiAxisChart,
  4278. percentage: PercentageChart,
  4279. heatmap: Heatmap,
  4280. pie: PieChart
  4281. };
  4282. function getChartByType() {
  4283. var chartType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'line';
  4284. var parent = arguments[1];
  4285. var options = arguments[2];
  4286. if (chartType === 'axis-mixed') {
  4287. // options.type = 'line';
  4288. return new AxisChart(parent, options);
  4289. }
  4290. if (!chartTypes[chartType]) {
  4291. console.error("Undefined chart type: " + chartType);
  4292. return;
  4293. }
  4294. return new chartTypes[chartType](parent, options);
  4295. }
  4296. var Chart = function Chart(parent, options) {
  4297. _classCallCheck$1$1(this, Chart);
  4298. return getChartByType(options.type, parent, options);
  4299. };
  4300. // Playing around with dates
  4301. var NO_OF_MILLIS$1 = 1000;
  4302. var SEC_IN_DAY$1 = 86400;
  4303. var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  4304. // https://stackoverflow.com/a/11252167/6495043
  4305. function clone$1(date) {
  4306. return new Date(date.getTime());
  4307. }
  4308. function timestampSec(date) {
  4309. return date.getTime() / NO_OF_MILLIS$1;
  4310. }
  4311. function timestampToMidnight(timestamp) {
  4312. var roundAhead = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  4313. var midnightTs = Math.floor(timestamp - timestamp % SEC_IN_DAY$1);
  4314. if (roundAhead) {
  4315. return midnightTs + SEC_IN_DAY$1;
  4316. }
  4317. return midnightTs;
  4318. }
  4319. // export function getMonthsBetween(startDate, endDate) {}
  4320. // mutates
  4321. // mutates
  4322. function addDays$1(date, numberOfDays) {
  4323. date.setDate(date.getDate() + numberOfDays);
  4324. }
  4325. var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];
  4326. var lineCompositeData = {
  4327. labels: ["2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
  4328. yMarkers: [{
  4329. label: "Average 100 reports/month",
  4330. value: 1200,
  4331. options: { labelPos: 'left' }
  4332. }],
  4333. datasets: [{
  4334. "name": "Events",
  4335. "values": reportCountList
  4336. }]
  4337. };
  4338. var fireball_5_25 = [[4, 0, 3, 1, 1, 2, 1, 1, 1, 0, 1, 1], [2, 3, 3, 2, 1, 3, 0, 1, 2, 7, 10, 4], [5, 6, 2, 4, 0, 1, 4, 3, 0, 2, 0, 1], [0, 2, 6, 2, 1, 1, 2, 3, 6, 3, 7, 8], [6, 8, 7, 7, 4, 5, 6, 5, 22, 12, 10, 11], [7, 10, 11, 7, 3, 2, 7, 7, 11, 15, 22, 20], [13, 16, 21, 18, 19, 17, 12, 17, 31, 28, 25, 29], [24, 14, 21, 14, 11, 15, 19, 21, 41, 22, 32, 18], [31, 20, 30, 22, 14, 17, 21, 35, 27, 50, 117, 24], [32, 24, 21, 27, 11, 27, 43, 37, 44, 40, 48, 32], [31, 38, 36, 26, 23, 23, 25, 29, 26, 47, 61, 50]];
  4339. var fireball_2_5 = [[22, 6, 6, 9, 7, 8, 6, 14, 19, 10, 8, 20], [11, 13, 12, 8, 9, 11, 9, 13, 10, 22, 40, 24], [20, 13, 13, 19, 13, 10, 14, 13, 20, 18, 5, 9], [7, 13, 16, 19, 12, 11, 21, 27, 27, 24, 33, 33], [38, 25, 28, 22, 31, 21, 35, 42, 37, 32, 46, 53], [50, 33, 36, 34, 35, 28, 27, 52, 58, 59, 75, 69], [54, 67, 67, 45, 66, 51, 38, 64, 90, 113, 116, 87], [84, 52, 56, 51, 55, 46, 50, 87, 114, 83, 152, 93], [73, 58, 59, 63, 56, 51, 83, 140, 103, 115, 265, 89], [106, 95, 94, 71, 77, 75, 99, 136, 129, 154, 168, 156], [81, 102, 95, 72, 58, 91, 89, 122, 124, 135, 183, 171]];
  4340. var fireballOver25 = [
  4341. // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  4342. [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0], [1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 2], [3, 2, 1, 3, 2, 0, 2, 2, 2, 3, 0, 1], [2, 3, 5, 2, 1, 3, 0, 2, 3, 5, 1, 4], [7, 4, 6, 1, 9, 2, 2, 2, 20, 9, 4, 9], [5, 6, 1, 2, 5, 4, 5, 5, 16, 9, 14, 9], [5, 4, 7, 5, 1, 5, 3, 3, 5, 7, 22, 2], [5, 13, 11, 6, 1, 7, 9, 8, 14, 17, 16, 3], [8, 9, 8, 6, 4, 8, 5, 6, 14, 11, 21, 12]];
  4343. var barCompositeData = {
  4344. labels: MONTH_NAMES_SHORT,
  4345. datasets: [{
  4346. name: "Over 25 reports",
  4347. values: fireballOver25[9]
  4348. }, {
  4349. name: "5 to 25 reports",
  4350. values: fireball_5_25[9]
  4351. }, {
  4352. name: "2 to 5 reports",
  4353. values: fireball_2_5[9]
  4354. }]
  4355. };
  4356. // Demo Chart multitype Chart
  4357. // ================================================================================
  4358. var typeData = {
  4359. labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
  4360. yMarkers: [{
  4361. label: "Marker",
  4362. value: 43,
  4363. options: { labelPos: 'left'
  4364. // type: 'dashed'
  4365. } }],
  4366. yRegions: [{
  4367. label: "Region",
  4368. start: -10,
  4369. end: 50,
  4370. options: { labelPos: 'right' }
  4371. }],
  4372. datasets: [{
  4373. name: "Some Data",
  4374. values: [18, 40, 30, 35, 8, 52, 17, -4],
  4375. axisPosition: 'right',
  4376. chartType: 'bar'
  4377. }, {
  4378. name: "Another Set",
  4379. values: [30, 50, -10, 15, 18, 32, 27, 14],
  4380. axisPosition: 'right',
  4381. chartType: 'bar'
  4382. }, {
  4383. name: "Yet Another",
  4384. values: [15, 20, -3, -15, 58, 12, -17, 37],
  4385. chartType: 'line'
  4386. }]
  4387. };
  4388. var updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
  4389. var baseLength = 10;
  4390. var fullLength = 30;
  4391. var getRandom = function getRandom() {
  4392. return Math.floor(getRandomBias(-40, 60, 0.8, 1));
  4393. };
  4394. var updateDataAllValues = Array.from({ length: fullLength }, getRandom);
  4395. // We're gonna be shuffling this
  4396. var updateDataAllIndices = updateDataAllLabels.map(function (d, i) {
  4397. return i;
  4398. });
  4399. var getUpdateArray = function getUpdateArray(sourceArray) {
  4400. var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
  4401. var indices = updateDataAllIndices.slice(0, length);
  4402. return indices.map(function (index) {
  4403. return sourceArray[index];
  4404. });
  4405. };
  4406. var currentLastIndex = baseLength;
  4407. function getUpdateData() {
  4408. shuffle(updateDataAllIndices);
  4409. var value = getRandom();
  4410. var start = getRandom();
  4411. var end = getRandom();
  4412. currentLastIndex = baseLength;
  4413. return {
  4414. labels: updateDataAllLabels.slice(0, baseLength),
  4415. datasets: [{
  4416. values: getUpdateArray(updateDataAllValues)
  4417. }],
  4418. yMarkers: [{
  4419. label: "Altitude",
  4420. value: value,
  4421. type: 'dashed'
  4422. }],
  4423. yRegions: [{
  4424. label: "Range",
  4425. start: start,
  4426. end: end
  4427. }]
  4428. };
  4429. }
  4430. function getAddUpdateData() {
  4431. if (currentLastIndex >= fullLength) return;
  4432. // TODO: Fix update on removal
  4433. currentLastIndex++;
  4434. var c = currentLastIndex - 1;
  4435. return [updateDataAllLabels[c], [updateDataAllValues[c]]];
  4436. // updateChart.addDataPoint(
  4437. // updateDataAllLabels[index], [updateDataAllValues[index]]
  4438. // );
  4439. }
  4440. var trendsData = {
  4441. labels: [1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
  4442. datasets: [{
  4443. values: [132.9, 150.0, 149.4, 148.0, 94.4, 97.6, 54.1, 49.2, 22.5, 18.4, 39.3, 131.0, 220.1, 218.9, 198.9, 162.4, 91.0, 60.5, 20.6, 14.8, 33.9, 123.0, 211.1, 191.8, 203.3, 133.0, 76.1, 44.9, 25.1, 11.6, 28.9, 88.3, 136.3, 173.9, 170.4, 163.6, 99.3, 65.3, 45.8, 24.7, 12.6, 4.2, 4.8, 24.9, 80.8, 84.5, 94.0, 113.3, 69.8, 39.8]
  4444. }]
  4445. };
  4446. var moonData = {
  4447. names: ["Ganymede", "Callisto", "Io", "Europa"],
  4448. masses: [14819000, 10759000, 8931900, 4800000],
  4449. distances: [1070.412, 1882.709, 421.700, 671.034],
  4450. diameters: [5262.4, 4820.6, 3637.4, 3121.6]
  4451. };
  4452. var eventsData = {
  4453. labels: ["Ganymede", "Callisto", "Io", "Europa"],
  4454. datasets: [{
  4455. "values": moonData.distances,
  4456. "formatted": moonData.distances.map(function (d) {
  4457. return d * 1000 + " km";
  4458. })
  4459. }]
  4460. };
  4461. // const jupiterMoons = {
  4462. // 'Ganymede': {
  4463. // mass: '14819000 x 10^16 kg',
  4464. // 'semi-major-axis': '1070412 km',
  4465. // 'diameter': '5262.4 km'
  4466. // },
  4467. // 'Callisto': {
  4468. // mass: '10759000 x 10^16 kg',
  4469. // 'semi-major-axis': '1882709 km',
  4470. // 'diameter': '4820.6 km'
  4471. // },
  4472. // 'Io': {
  4473. // mass: '8931900 x 10^16 kg',
  4474. // 'semi-major-axis': '421700 km',
  4475. // 'diameter': '3637.4 km'
  4476. // },
  4477. // 'Europa': {
  4478. // mass: '4800000 x 10^16 kg',
  4479. // 'semi-major-axis': '671034 km',
  4480. // 'diameter': '3121.6 km'
  4481. // },
  4482. // };
  4483. // ================================================================================
  4484. var today = new Date();
  4485. var start = clone$1(today);
  4486. addDays$1(start, 4);
  4487. var end = clone$1(start);
  4488. start.setFullYear(start.getFullYear() - 2);
  4489. end.setFullYear(end.getFullYear() - 1);
  4490. var dataPoints = {};
  4491. var startTs = timestampSec(start);
  4492. var endTs = timestampSec(end);
  4493. startTs = timestampToMidnight(startTs);
  4494. endTs = timestampToMidnight(endTs, true);
  4495. while (startTs < endTs) {
  4496. dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
  4497. startTs += SEC_IN_DAY$1;
  4498. }
  4499. var heatmapData = {
  4500. dataPoints: dataPoints,
  4501. start: start,
  4502. end: end
  4503. };
  4504. var lineComposite = {
  4505. config: {
  4506. title: "Fireball/Bolide Events - Yearly (reported)",
  4507. data: lineCompositeData,
  4508. type: "line",
  4509. height: 190,
  4510. colors: ["green"],
  4511. isNavigable: 1,
  4512. valuesOverPoints: 1,
  4513. lineOptions: {
  4514. dotSize: 8
  4515. }
  4516. }
  4517. };
  4518. var barComposite = {
  4519. config: {
  4520. data: barCompositeData,
  4521. type: "bar",
  4522. height: 210,
  4523. colors: ["violet", "light-blue", "#46a9f9"],
  4524. valuesOverPoints: 1,
  4525. axisOptions: {
  4526. xAxisMode: "tick"
  4527. },
  4528. barOptions: {
  4529. stacked: 1
  4530. }
  4531. }
  4532. };
  4533. var demoSections = [{
  4534. title: "Create a Chart",
  4535. name: "demo-main",
  4536. contentBlocks: [{
  4537. type: "code",
  4538. lang: "html",
  4539. content: ' &lt!--HTML--&gt;\n &lt;figure id="frost-chart"&gt;&lt;/figure&gt;'
  4540. }, {
  4541. type: "code",
  4542. lang: "javascript",
  4543. content: ' // Javascript\n let chart = new frappe.Chart( "#frost-chart", { // or DOM element\n data: {\n labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",\n "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],\n\n datasets: [\n {\n name: "Some Data", chartType: \'bar\',\n values: [25, 40, 30, 35, 8, 52, 17, -4]\n },\n {\n name: "Another Set", chartType: \'bar\',\n values: [25, 50, -10, 15, 18, 32, 27, 14]\n },\n {\n name: "Yet Another", chartType: \'line\',\n values: [15, 20, -3, -15, 58, 12, -17, 37]\n }\n ],\n\n yMarkers: [{ label: "Marker", value: 70,\n options: { labelPos: \'left\' }}],\n yRegions: [{ label: "Region", start: -10, end: 50,\n options: { labelPos: \'right\' }}]\n },\n\n title: "My Awesome Chart",\n type: \'axis-mixed\', // or \'bar\', \'line\', \'pie\', \'percentage\'\n height: 300,\n colors: [\'purple\', \'#ffa3ef\', \'light-blue\'],\n\n tooltipOptions: {\n formatTooltipX: d => (d + \'\').toUpperCase(),\n formatTooltipY: d => d + \' pts\',\n }\n });\n\n chart.export();'
  4544. }, {
  4545. type: "demo",
  4546. config: {
  4547. title: "My Awesome Chart",
  4548. data: typeData,
  4549. type: "axis-mixed",
  4550. height: 300,
  4551. colors: ["purple", "magenta", "light-blue"],
  4552. maxSlices: 10,
  4553. tooltipOptions: {
  4554. formatTooltipX: function formatTooltipX(d) {
  4555. return (d + '').toUpperCase();
  4556. },
  4557. formatTooltipY: function formatTooltipY(d) {
  4558. return d + ' pts';
  4559. }
  4560. }
  4561. },
  4562. options: [{
  4563. name: "type",
  4564. path: ["type"],
  4565. type: "string",
  4566. states: {
  4567. "Mixed": 'axis-mixed',
  4568. "Line": 'line',
  4569. "Bar": 'bar',
  4570. "Pie Chart": 'pie',
  4571. "Percentage Chart": 'percentage'
  4572. },
  4573. activeState: "Mixed"
  4574. }],
  4575. actions: [{ name: "Export ...", fn: "export", args: [] }]
  4576. }]
  4577. }, {
  4578. title: "Update Values",
  4579. name: "updates-chart",
  4580. contentBlocks: [{
  4581. type: "demo",
  4582. config: {
  4583. data: getUpdateData(),
  4584. type: 'line',
  4585. height: 300,
  4586. colors: ['#ff6c03'],
  4587. lineOptions: {
  4588. areaFill: 1
  4589. }
  4590. },
  4591. actions: [{
  4592. name: "Random Data",
  4593. fn: "update",
  4594. args: [getUpdateData()]
  4595. }, {
  4596. name: "Add Value",
  4597. fn: "addDataPoint",
  4598. args: getAddUpdateData()
  4599. }, {
  4600. name: "Remove Value",
  4601. fn: "removeDataPoint",
  4602. args: []
  4603. }, {
  4604. name: "Export ...",
  4605. fn: "export",
  4606. args: []
  4607. }]
  4608. }]
  4609. }, {
  4610. title: "Plot Trends",
  4611. name: "trends-plot",
  4612. contentBlocks: [{
  4613. type: "demo",
  4614. config: {
  4615. title: "Mean Total Sunspot Count - Yearly",
  4616. data: trendsData,
  4617. type: 'line',
  4618. height: 300,
  4619. colors: ['#238e38'],
  4620. axisOptions: {
  4621. xAxisMode: 'tick',
  4622. yAxisMode: 'span',
  4623. xIsSeries: 1
  4624. }
  4625. },
  4626. options: [{
  4627. name: "lineOptions",
  4628. path: ["lineOptions"],
  4629. type: "map",
  4630. mapKeys: ['hideLine', 'hideDots', 'heatline', 'areaFill'],
  4631. states: {
  4632. "Line": [0, 1, 0, 0],
  4633. "Dots": [1, 0, 0, 0],
  4634. "HeatLine": [0, 1, 1, 0],
  4635. "Area": [0, 1, 0, 1]
  4636. },
  4637. activeState: "HeatLine"
  4638. }],
  4639. actions: [{ name: "Export ...", fn: "export", args: [] }]
  4640. }]
  4641. }, {
  4642. title: "Listen to state change",
  4643. name: "state-change",
  4644. contentBlocks: [{
  4645. type: "demo",
  4646. config: {
  4647. title: "Jupiter's Moons: Semi-major Axis (1000 km)",
  4648. data: eventsData,
  4649. type: 'bar',
  4650. height: 330,
  4651. colors: ['grey'],
  4652. isNavigable: 1
  4653. },
  4654. sideContent: '<div class="image-container border">\n <img class="moon-image" src="./assets/img/europa.jpg">\n </div>\n <div class="content-data mt1">\n <h6 class="moon-name">Europa</h6>\n <p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>\n <p>Mass: <span class="mass">4800000</span> x 10^16 kg</p>\n <p>Diameter: <span class="diameter">3121.6</span> km</p>\n </div>',
  4655. postSetup: function postSetup(chart, figure, row) {
  4656. chart.parent.addEventListener('data-select', function (e) {
  4657. var i = e.index;
  4658. var name = moonData.names[i];
  4659. row.querySelector('.moon-name').innerHTML = name;
  4660. row.querySelector('.semi-major-axis').innerHTML = moonData.distances[i] * 1000;
  4661. row.querySelector('.mass').innerHTML = moonData.masses[i];
  4662. row.querySelector('.diameter').innerHTML = moonData.diameters[i];
  4663. row.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
  4664. });
  4665. }
  4666. }, {
  4667. type: "code",
  4668. lang: "javascript",
  4669. content: ' ...\n isNavigable: 1, // Navigate across data points; default 0\n ...\n\n chart.parent.addEventListener(\'data-select\', (e) => {\n update_moon_data(e.index); // e contains index and value of current datapoint\n });'
  4670. }]
  4671. }, {
  4672. title: "And a Month-wise Heatmap",
  4673. name: "heatmap",
  4674. contentBlocks: [{
  4675. type: "demo",
  4676. config: {
  4677. title: "Monthly Distribution",
  4678. data: heatmapData,
  4679. type: 'heatmap',
  4680. discreteDomains: 1,
  4681. countLabel: 'Level',
  4682. colors: HEATMAP_COLORS_BLUE,
  4683. legendScale: [0, 1, 2, 4, 5]
  4684. },
  4685. options: [{
  4686. name: "Discrete domains",
  4687. path: ["discreteDomains"],
  4688. type: 'Boolean',
  4689. // boolNames: ["Continuous", "Discrete"],
  4690. states: { "Discrete": 1, "Continuous": 0 }
  4691. }, {
  4692. name: "Colors",
  4693. path: ["colors"],
  4694. type: "object",
  4695. states: {
  4696. "Green (Default)": [],
  4697. "Blue": HEATMAP_COLORS_BLUE,
  4698. "GitHub's Halloween": HEATMAP_COLORS_YELLOW
  4699. }
  4700. }],
  4701. actions: [{ name: "Export ...", fn: "export", args: [] }]
  4702. }, {
  4703. type: "code",
  4704. lang: "javascript",
  4705. content: ' let heatmap = new frappe.Chart("#heatmap", {\n type: \'heatmap\',\n title: "Monthly Distribution",\n data: {\n dataPoints: {\'1524064033\': 8, /* ... */},\n // object with timestamp-value pairs\n start: startDate\n end: endDate // Date objects\n },\n countLabel: \'Level\',\n discreteDomains: 0 // default: 1\n colors: [\'#ebedf0\', \'#c0ddf9\', \'#73b3f3\', \'#3886e1\', \'#17459e\'],\n // Set of five incremental colors,\n // preferably with a low-saturation color for zero data;\n // def: [\'#ebedf0\', \'#c6e48b\', \'#7bc96f\', \'#239a3b\', \'#196127\']\n });'
  4706. }]
  4707. }, {
  4708. title: "Demo",
  4709. name: "codepen",
  4710. contentBlocks: [{
  4711. type: "custom",
  4712. html: '<p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"\n data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">\n See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>\n by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on\n <a href="https://codepen.io">CodePen</a>.\n </p>'
  4713. }]
  4714. }, {
  4715. title: "Available Options",
  4716. name: "options",
  4717. contentBlocks: [{
  4718. type: "code",
  4719. lang: "javascript",
  4720. content: '\n ...\n {\n data: {\n labels: [],\n datasets: [],\n yRegions: [],\n yMarkers: []\n }\n title: \'\',\n colors: [],\n height: 200,\n\n tooltipOptions: {\n formatTooltipX: d => (d + \'\').toUpperCase(),\n formatTooltipY: d => d + \' pts\',\n }\n\n // Axis charts\n isNavigable: 1, // default: 0\n valuesOverPoints: 1, // default: 0\n barOptions: {\n spaceRatio: 1 // default: 0.5\n stacked: 1 // default: 0\n }\n\n lineOptions: {\n dotSize: 6, // default: 4\n hideLine: 0, // default: 0\n hideDots: 1, // default: 0\n heatline: 1, // default: 0\n areaFill: 1 // default: 0\n }\n\n axisOptions: {\n yAxisMode: \'span\', // Axis lines, default\n xAxisMode: \'tick\', // No axis lines, only short ticks\n xIsSeries: 1 // Allow skipping x values for space\n // default: 0\n },\n\n // Pie/Percentage charts\n maxLegendPoints: 6, // default: 20\n maxSlices: 10, // default: 20\n\n // Percentage chart\n barOptions: {\n height: 15 // default: 20\n depth: 5 // default: 2\n }\n\n // Heatmap\n discreteDomains: 1, // default: 1\n }\n ...\n\n // Updating values\n chart.update(data);\n\n // Axis charts:\n chart.addDataPoint(label, valueFromEachDataset, index)\n chart.removeDataPoint(index)\n chart.updateDataset(datasetValues, index)\n\n // Exporting\n chart.export();\n\n // Unbind window-resize events\n chart.unbindWindowEvents();\n\n '
  4721. }]
  4722. }, {
  4723. title: "Install",
  4724. name: "installation",
  4725. contentBlocks: [{ type: "text", content: 'Install via npm' }, { type: "code", lang: "console", content: ' npm install frappe-charts' }, { type: "text", content: 'And include it in your project' }, { type: "code", lang: "javascript", content: ' import { Chart } from "frappe-charts' }, { type: "text", content: 'Use as:' }, {
  4726. type: "code",
  4727. lang: "javascript",
  4728. content: ' new Chart(); // ES6 module\n // or\n new frappe.Chart(); // Browser'
  4729. }, { type: "text", content: '... or include it directly in your HTML' }, {
  4730. type: "code",
  4731. lang: "html",
  4732. content: ' &lt;script src="https://unpkg.com/frappe-charts@1.1.0"&gt;&lt;/script&gt;'
  4733. }]
  4734. }];
  4735. var dbd = new docsBuilder(Chart);
  4736. var currentElement = document.querySelector('header');
  4737. if (document.querySelectorAll('#line-composite-1').length && !document.querySelector('#home-page').classList.contains("hide")) {
  4738. var lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
  4739. var barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
  4740. lineCompositeChart.parent.addEventListener('data-select', function (e) {
  4741. var i = e.index;
  4742. barCompositeChart.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
  4743. });
  4744. demoSections.forEach(function (sectionConf) {
  4745. var sectionEl = $.create('section', { className: sectionConf.name || sectionConf.title });
  4746. insertAfter(sectionEl, currentElement);
  4747. currentElement = sectionEl;
  4748. dbd.makeSection(sectionEl, sectionConf);
  4749. });
  4750. }
  4751. }());