diff --git a/extensions/statistics/js/dist/admin.js b/extensions/statistics/js/dist/admin.js new file mode 100644 index 000000000..f92b3a92b --- /dev/null +++ b/extensions/statistics/js/dist/admin.js @@ -0,0 +1,2 @@ +module.exports=function(t){var e={};function i(n){if(e[n])return e[n].exports;var s=e[n]={i:n,l:!1,exports:{}};return t[n].call(s.exports,s,s.exports,i),s.l=!0,s.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)i.d(n,s,function(e){return t[e]}.bind(null,s));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=8)}([function(t,e){t.exports=flarum.core.compat["utils/abbreviateNumber"]},function(t,e){t.exports=flarum.core.compat.app},function(t,e){t.exports=flarum.core.compat.extend},function(t,e){t.exports=flarum.core.compat["components/DashboardPage"]},function(t,e){t.exports=flarum.core.compat["components/DashboardWidget"]},function(t,e){t.exports=flarum.core.compat["components/SelectDropdown"]},function(t,e){t.exports=flarum.core.compat["components/Button"]},function(t,e){t.exports=flarum.core.compat["helpers/icon"]},function(t,e,i){"use strict";i.r(e);var n=i(1),s=i.n(n),a=i(2),r=i(3),o=i.n(r);function l(t,e){return(l=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function c(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,l(t,e)}var u=i(4),h=i.n(u),d=i(5),p=i.n(d),f=i(6),v=i.n(f),g=i(7),y=i.n(g),b=i(0),x=i.n(b);function w(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function A(t){var e=t.getBoundingClientRect();return{top:e.top+(document.documentElement.scrollTop||document.body.scrollTop),left:e.left+(document.documentElement.scrollLeft||document.body.scrollLeft)}}w.create=function(t,e){var i=document.createElement(t);for(var n in e){var s=e[n];if("inside"===n)w(s).appendChild(i);else if("around"===n){var a=w(s);a.parentNode.insertBefore(i,a),i.appendChild(a)}else"styles"===n?"object"==typeof s&&Object.keys(s).map((function(t){i.style[t]=s[t]})):n in i?i[n]=s:i.setAttribute(n,s)}return i};var P={margins:{top:10,bottom:10,left:20,right:20},paddings:{top:20,bottom:40,left:30,right:10},baseHeight:240,titleHeight:20,legendHeight:30,titleFontSize:12};function k(t){return t.titleHeight+t.margins.top+t.paddings.top}function M(t){return t.margins.left+t.paddings.left}function T(t){return t.margins.top+t.margins.bottom+t.paddings.top+t.paddings.bottom+t.titleHeight+t.legendHeight}function L(t){return t.margins.left+t.margins.right+t.paddings.left+t.paddings.right}var C=["line","bar"],D=["light-blue","blue","violet","red","orange","yellow","green","light-green","purple","magenta","light-grey","dark-grey"],N={bar:D,line:D,pie:D,percentage:D,heatmap:["#ebedf0","#c6e48b","#7bc96f","#239a3b","#196127"],donut:D},S=Math.PI/180,O=function(){function t(t){var e=t.parent,i=void 0===e?null:e,n=t.colors,s=void 0===n?[]:n;this.parent=i,this.colors=s,this.titleName="",this.titleValue="",this.listValues=[],this.titleValueFirst=0,this.x=0,this.y=0,this.top=0,this.left=0,this.setup()}var e=t.prototype;return e.setup=function(){this.makeTooltip()},e.refresh=function(){this.fill(),this.calcPosition()},e.makeTooltip=function(){var t=this;this.container=w.create("div",{inside:this.parent,className:"graph-svg-tip comparison",innerHTML:'\n\t\t\t\t\n\t\t\t\t
'}),this.hideTip(),this.title=this.container.querySelector(".title"),this.dataPointList=this.container.querySelector(".data-point-list"),this.parent.addEventListener("mouseleave",(function(){t.hideTip()}))},e.fill=function(){var t,e=this;this.index&&this.container.setAttribute("data-point-index",this.index),t=this.titleValueFirst?""+this.titleValue+""+this.titleName:this.titleName+""+this.titleValue+"",this.title.innerHTML=t,this.dataPointList.innerHTML="",this.listValues.map((function(t,i){var n=e.colors[i]||"black",s=0===t.formatted||t.formatted?t.formatted:t.value,a=w.create("li",{styles:{"border-top":"3px solid "+n},innerHTML:''+(0===s||s?s:"")+"\n\t\t\t\t\t"+(t.title?t.title:"")});e.dataPointList.appendChild(a)}))},e.calcPosition=function(){var t=this.container.offsetWidth;this.top=this.y-this.container.offsetHeight-5,this.left=this.x-t/2;var e=this.parent.offsetWidth-t,i=this.container.querySelector(".svg-pointer");if(this.left<0)i.style.left="calc(50% - "+-1*this.left+"px)",this.left=0;else if(this.left>e){var n="calc(50% + "+(this.left-e)+"px)";i.style.left=n,this.left=e}else i.style.left="50%"},e.setValues=function(t,e,i,n,s){void 0===i&&(i={}),void 0===n&&(n=[]),void 0===s&&(s=-1),this.titleName=i.name,this.titleValue=i.value,this.listValues=n,this.x=t,this.y=e,this.titleValueFirst=i.valueFirst||0,this.index=s,this.refresh()},e.hideTip=function(){this.container.style.top="0px",this.container.style.left="0px",this.container.style.opacity="0"},e.showTip=function(){this.container.style.top=this.top+"px",this.container.style.left=this.left+"px",this.container.style.opacity="1"},t}();function E(t){return parseFloat(t.toFixed(2))}function z(t,e,i,n){void 0===n&&(n=!1),i||(i=n?t[0]:t[t.length-1]);var s=new Array(Math.abs(e)).fill(i);return t=n?s.concat(t):t.concat(s)}function W(t,e){return(t+"").length*e}function H(t,e){return{x:Math.sin(t*S)*e,y:Math.cos(t*S)*e}}function F(t,e){return void 0===e&&(e=!1),!Number.isNaN(t)&&(void 0!==t&&(!!Number.isFinite(t)&&!(e&&t<0)))}function I(t,e){var i,n;return t<=e?(i=e-t,n=t):(i=t-e,n=e),[i,n]}function R(t,e,i){return void 0===i&&(i=e.length-t.length),i>0?t=z(t,i):e=z(e,i),[t,e]}function j(t,e){if(t)return t.length>e?t.slice(0,e-3)+"...":t}function Y(t,e){for(var i=[],n=0;n255?255:t<0?0:t}function V(t,e){var i=U(t),n=!1;"#"==i[0]&&(i=i.slice(1),n=!0);var s=parseInt(i,16),a=B((s>>16)+e),r=B((s>>8&255)+e);return(n?"#":"")+(B((255&s)+e)|r<<8|a<<16).toString(16)}var U=function(t){return/rgb[a]{0,1}\([\d, ]+\)/gim.test(t)?/\D+(\d*)\D+(\d*)\D+(\d*)/gim.exec(t).map((function(t,e){return 0!==e?Number(t).toString(16):"#"})).reduce((function(t,e){return""+t+e})):_[t]||t};function G(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function q(t,e){var i=document.createElementNS("http://www.w3.org/2000/svg",t);for(var n in e){var s=e[n];if("inside"===n)G(s).appendChild(i);else if("around"===n){var a=G(s);a.parentNode.insertBefore(i,a),i.appendChild(a)}else"styles"===n?"object"==typeof s&&Object.keys(s).map((function(t){i.style[t]=s[t]})):("className"===n&&(n="class"),"innerHTML"===n?i.textContent=s:i.setAttribute(n,s))}return i}function X(t,e,i,n){return q("stop",{inside:t,style:"stop-color: "+i,offset:e,"stop-opacity":n})}function J(t,e,i){void 0===e&&(e=""),void 0===i&&(i=void 0);var n={className:t,transform:e};return i&&(n.inside=i),q("g",n)}function K(t,e,i,n,s){return void 0===e&&(e=""),void 0===i&&(i="none"),void 0===n&&(n="none"),void 0===s&&(s=2),q("path",{className:e,d:t,styles:{stroke:i,fill:n,"stroke-width":s}})}function $(t,e,i){void 0===i&&(i=!1);var n="path-fill-gradient-"+e+"-"+(i?"lighter":"default"),s=function(t,e){return q("linearGradient",{inside:t,id:e,x1:0,x2:0,y1:0,y2:1})}(t,n),a=[1,.6,.2];return i&&(a=[.4,.2,0]),X(s,"0%",e,a[0]),X(s,"50%",e,a[1]),X(s,"100%",e,a[2]),n}function Q(t,e,i,n,s,a,r){void 0===a&&(a="none"),void 0===r&&(r={});var o={className:t,x:e,y:i,width:n,height:n,rx:s,fill:a};return Object.keys(r).map((function(t){o[t]=r[t]})),q("rect",o)}function Z(t,e,i,n,s){void 0===s&&(s={});var a=s.fontSize||10;return q("text",{className:t,x:e,y:i,dy:(void 0!==s.dy?s.dy:a/2)+"px","font-size":a+"px",fill:s.fill||"#555b51","text-anchor":s.textAnchor||"start",innerHTML:n})}function tt(t,e,i,n,s){void 0===s&&(s={}),s.stroke||(s.stroke="#dadada"),s.lineType||(s.lineType=""),s.shortenNumbers&&(e=function(t){var e;if("number"==typeof t)e=t;else if("string"==typeof t&&(e=Number(t),Number.isNaN(e)))return t;var i=Math.floor(Math.log10(Math.abs(e)));if(i<=2)return e;var n=Math.floor(i/3),s=Math.pow(10,i-3*n)*+(e/Math.pow(10,i)).toFixed(1);return Math.round(100*s)/100+" "+["","K","M","B","T"][n]}(e));var a=q("line",{className:"line-horizontal "+s.className+("dashed"===s.lineType?"dashed":""),x1:i,x2:n,y1:0,y2:0,styles:{stroke:s.stroke}}),r=q("text",{x:in?i+4:i-4-10,dy:"10px","font-size":"10px","text-anchor":"middle",innerHTML:e+""}),o=q("g",{transform:"translate("+t+", 0)"});return o.appendChild(a),o.appendChild(r),o}(t,e,s,a,{stroke:n.stroke,className:n.className,lineType:n.lineType})}var it={bar:function(t){var e;"rect"!==t.nodeName&&(e=t.getAttribute("transform"),t=t.childNodes[0]);var i=t.cloneNode();return i.style.fill="#000000",i.style.opacity="0.4",e&&i.setAttribute("transform",e),i},dot:function(t){var e;"circle"!==t.nodeName&&(e=t.getAttribute("transform"),t=t.childNodes[0]);var i=t.cloneNode(),n=t.getAttribute("r"),s=t.getAttribute("fill");return i.setAttribute("r",parseInt(n)+4),i.setAttribute("fill",s),i.style.opacity="0.6",e&&i.setAttribute("transform",e),i},heat_square:function(t){var e;"circle"!==t.nodeName&&(e=t.getAttribute("transform"),t=t.childNodes[0]);var i=t.cloneNode(),n=t.getAttribute("r"),s=t.getAttribute("fill");return i.setAttribute("r",parseInt(n)+4),i.setAttribute("fill",s),i.style.opacity="0.6",e&&i.setAttribute("transform",e),i}},nt={bar:function(t,e){var i;"rect"!==t.nodeName&&(i=t.getAttribute("transform"),t=t.childNodes[0]);var n=["x","y","width","height"];Object.values(t.attributes).filter((function(t){return n.includes(t.name)&&t.specified})).map((function(t){e.setAttribute(t.name,t.nodeValue)})),i&&e.setAttribute("transform",i)},dot:function(t,e){var i;"circle"!==t.nodeName&&(i=t.getAttribute("transform"),t=t.childNodes[0]);var n=["cx","cy"];Object.values(t.attributes).filter((function(t){return n.includes(t.name)&&t.specified})).map((function(t){e.setAttribute(t.name,t.nodeValue)})),i&&e.setAttribute("transform",i)},heat_square:function(t,e){var i;"circle"!==t.nodeName&&(i=t.getAttribute("transform"),t=t.childNodes[0]);var n=["cx","cy"];Object.values(t.attributes).filter((function(t){return n.includes(t.name)&&t.specified})).map((function(t){e.setAttribute(t.name,t.nodeValue)})),i&&e.setAttribute("transform",i)}};function st(t,e,i,n){var s="string"==typeof e?e:e.join(", ");return[t,{transform:i.join(", ")},n,"easein","translate",{transform:s}]}function at(t,e,i){return st(t,[0,i],[0,e],350)}function rt(t,e){return[t,{d:e},350,"easein"]}var ot={ease:"0.25 0.1 0.25 1",linear:"0 0 1 1",easein:"0.1 0.8 0.2 1",easeout:"0 0 0.58 1",easeinout:"0.42 0 0.58 1"};function lt(t,e,i,n,s,a){void 0===n&&(n="linear"),void 0===s&&(s=void 0),void 0===a&&(a={});var r=t.cloneNode(!0),o=t.cloneNode(!0);for(var l in e){var c=void 0;c="transform"===l?document.createElementNS("http://www.w3.org/2000/svg","animateTransform"):document.createElementNS("http://www.w3.org/2000/svg","animate");var u=a[l]||t.getAttribute(l),h=e[l],d={attributeName:l,from:u,to:h,begin:"0s",dur:i/1e3+"s",values:u+";"+h,keySplines:ot[n],keyTimes:"0;1",calcMode:"spline",fill:"freeze"};for(var p in s&&(d.type=s),d)c.setAttribute(p,d[p]);r.appendChild(c),s?o.setAttribute(l,"translate("+h+")"):o.setAttribute(l,h)}return[r,o]}function ct(t,e){t.style.transform=e,t.style.webkitTransform=e,t.style.msTransform=e,t.style.mozTransform=e,t.style.oTransform=e}function ut(t,e){var i=[],n=[];e.map((function(t){var e,s,a=t[0],r=a.parentNode;t[0]=a;var o=lt.apply(void 0,t);e=o[0],s=o[1],i.push(s),n.push([e,r]),r&&r.replaceChild(e,a)}));var s=t.cloneNode(!0);return n.map((function(t,n){t[1]&&(t[1].replaceChild(i[n],t[0]),e[n][0]=i[n])})),s}var ht=function(){function t(t,e){if(e=function t(e){var i,n,s;if(e instanceof Date)return new Date(e.getTime());if("object"!=typeof e||null===e)return e;for(s in i=Array.isArray(e)?[]:{},e)n=e[s],i[s]=t(n);return i}(e),this.parent="string"==typeof t?document.querySelector(t):t,!(this.parent instanceof HTMLElement))throw new Error("No `parent` element to render on was provided.");this.rawChartArgs=e,this.title=e.title||"",this.type=e.type||"",this.realData=this.prepareData(e.data),this.data=this.prepareFirstData(this.realData),this.colors=this.validateColors(e.colors,this.type),this.config={showTooltip:1,showLegend:1,isNavigable:e.isNavigable||0,animate:void 0!==e.animate?e.animate:1,truncateLegends:e.truncateLegends||1},this.measures=JSON.parse(JSON.stringify(P));var i=this.measures;this.setMeasures(e),this.title.length||(i.titleHeight=0),this.config.showLegend||(i.legendHeight=0),this.argHeight=e.height||i.baseHeight,this.state={},this.options={},this.initTimeout=700,this.config.isNavigable&&(this.overlays=[]),this.configure(e)}var e=t.prototype;return e.prepareData=function(t){return t},e.prepareFirstData=function(t){return t},e.validateColors=function(t,e){var i=[];return(t=(t||[]).concat(N[e])).forEach((function(t){var e=U(t);!function(t){return/(^\s*)(#)((?:[A-Fa-f0-9]{3}){1,2})$/i.test(t)||/(^\s*)(rgb|hsl)(a?)[(]\s*([\d.]+\s*%?)\s*,\s*([\d.]+\s*%?)\s*,\s*([\d.]+\s*%?)\s*(?:,\s*([\d.]+)\s*)?[)]$/i.test(t)}(e)?console.warn('"'+t+'" is not a valid color.'):i.push(e)})),i},e.setMeasures=function(){},e.configure=function(){var t=this,e=this.argHeight;this.baseHeight=e,this.height=e-T(this.measures),this.boundDrawFn=function(){return t.draw(!0)},ResizeObserver&&(this.resizeObserver=new ResizeObserver(this.boundDrawFn),this.resizeObserver.observe(this.parent)),window.addEventListener("resize",this.boundDrawFn),window.addEventListener("orientationchange",this.boundDrawFn)},e.destroy=function(){this.resizeObserver&&this.resizeObserver.disconnect(),window.removeEventListener("resize",this.boundDrawFn),window.removeEventListener("orientationchange",this.boundDrawFn)},e.setup=function(){this.makeContainer(),this.updateWidth(),this.makeTooltip(),this.draw(!1,!0)},e.makeContainer=function(){this.parent.innerHTML="";var t={inside:this.parent,className:"chart-container"};this.independentWidth&&(t.styles={width:this.independentWidth+"px"}),this.container=w.create("div",t)},e.makeTooltip=function(){this.tip=new O({parent:this.container,colors:this.colors}),this.bindTooltip()},e.bindTooltip=function(){},e.draw=function(t,e){var i=this;(void 0===t&&(t=!1),void 0===e&&(e=!1),t&&null===this.parent.offsetParent)||(this.updateWidth(),this.calc(t),this.makeChartArea(),this.setupComponents(),this.components.forEach((function(t){return t.setup(i.drawArea)})),this.render(this.components,!1),e&&(this.data=this.realData,setTimeout((function(){i.update(i.data)}),this.initTimeout)),this.renderLegend(),this.setupNavigation(e))},e.calc=function(){},e.updateWidth=function(){var t,e,i;this.baseWidth=(t=this.parent,e=window.getComputedStyle(t),i=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight),t.clientWidth-i),this.width=this.baseWidth-L(this.measures)},e.makeChartArea=function(){this.svg&&this.container.removeChild(this.svg);var t,e,i,n,s=this.measures;this.svg=(t=this.container,e="frappe-chart chart",i=this.baseWidth,n=this.baseHeight,q("svg",{className:e,inside:t,width:i,height:n})),this.svgDefs=q("defs",{inside:this.svg}),this.title.length&&(this.titleEL=Z("title",s.margins.left,s.margins.top,this.title,{fontSize:s.titleFontSize,fill:"#666666",dy:s.titleFontSize}));var a=k(s);this.drawArea=J(this.type+"-chart chart-draw-area","translate("+M(s)+", "+a+")"),this.config.showLegend&&(a+=this.height+s.paddings.bottom,this.legendArea=J("chart-legend","translate("+M(s)+", "+a+")")),this.title.length&&this.svg.appendChild(this.titleEL),this.svg.appendChild(this.drawArea),this.config.showLegend&&this.svg.appendChild(this.legendArea),this.updateTipOffset(M(s),k(s))},e.updateTipOffset=function(t,e){this.tip.offset={x:t,y:e}},e.setupComponents=function(){this.components=new Map},e.update=function(t){t||console.error("No data to update."),this.data=this.prepareData(t),this.calc(),this.render(this.components,this.config.animate),this.renderLegend()},e.render=function(t,e){var i=this;void 0===t&&(t=this.components),void 0===e&&(e=!0),this.config.isNavigable&&this.overlays.map((function(t){return t.parentNode.removeChild(t)}));var n=[];t.forEach((function(t){n=n.concat(t.update(e))})),n.length>0?(!function(t,e,i){if(0!==i.length){var n=ut(e,i);e.parentNode==t&&(t.removeChild(e),t.appendChild(n)),setTimeout((function(){n.parentNode==t&&(t.removeChild(n),t.appendChild(e))}),250)}}(this.container,this.svg,n),setTimeout((function(){t.forEach((function(t){return t.make()})),i.updateNav()}),400)):(t.forEach((function(t){return t.make()})),this.updateNav())},e.updateNav=function(){this.config.isNavigable&&(this.makeOverlay(),this.bindUnits())},e.renderLegend=function(){},e.setupNavigation=function(t){var e=this;void 0===t&&(t=!1),this.config.isNavigable&&t&&(this.bindOverlay(),this.keyActions={13:this.onEnterKey.bind(this),37:this.onLeftArrow.bind(this),38:this.onUpArrow.bind(this),39:this.onRightArrow.bind(this),40:this.onDownArrow.bind(this)},document.addEventListener("keydown",(function(t){var i,n;i=e.container,(n=i.getBoundingClientRect()).top>=0&&n.left>=0&&n.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&n.right<=(window.innerWidth||document.documentElement.clientWidth)&&(t=t||window.event,e.keyActions[t.keyCode]&&e.keyActions[t.keyCode]())})))},e.makeOverlay=function(){},e.updateOverlay=function(){},e.bindOverlay=function(){},e.bindUnits=function(){},e.onLeftArrow=function(){},e.onRightArrow=function(){},e.onUpArrow=function(){},e.onDownArrow=function(){},e.onEnterKey=function(){},e.addDataPoint=function(){},e.removeDataPoint=function(){},e.getDataPoint=function(){},e.setCurrentDataPoint=function(){},e.updateDataset=function(){},e.export=function(){var t=function(t){var e=t.cloneNode(!0);e.classList.add("chart-container"),e.setAttribute("xmlns","http://www.w3.org/2000/svg"),e.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink");var i=w.create("style",{innerHTML:".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}"});e.insertBefore(i,e.firstChild);var n=w.create("div");return n.appendChild(e),n.innerHTML}(this.svg);!function(t,e){var i=document.createElement("a");i.style="display: none";var n=new Blob(e,{type:"image/svg+xml; charset=utf-8"}),s=window.URL.createObjectURL(n);i.href=s,i.download=t,document.body.appendChild(i),i.click(),setTimeout((function(){document.body.removeChild(i),window.URL.revokeObjectURL(s)}),300)}(this.title||"Chart",[t])},t}(),dt=function(t){function e(e,i){return t.call(this,e,i)||this}c(e,t);var i=e.prototype;return i.configure=function(e){t.prototype.configure.call(this,e),this.config.formatTooltipY=(e.tooltipOptions||{}).formatTooltipY,this.config.maxSlices=e.maxSlices||20,this.config.maxLegendPoints=e.maxLegendPoints||20},i.calc=function(){var t=this,e=this.state,i=this.config.maxSlices;e.sliceTotals=[];var n=this.data.labels.map((function(e,i){var n=0;return t.data.datasets.map((function(t){n+=t.values[i]})),[n,e]})).filter((function(t){return t[0]>=0})),s=n;if(n.length>i){n.sort((function(t,e){return e[0]-t[0]})),s=n.slice(0,i-1);var a=n.slice(i-1),r=0;a.map((function(t){r+=t[0]})),s.push([r,"Rest"]),this.colors[i-1]="grey"}e.labels=[],s.map((function(t){e.sliceTotals.push(function(t){return Number(Math.round(t+"e4")+"e-4")}(t[0])),e.labels.push(t[1])})),e.grandTotal=e.sliceTotals.reduce((function(t,e){return t+e}),0),this.center={x:this.width/2,y:this.height/2}},i.renderLegend=function(){var t=this,e=this.state;this.legendArea.textContent="",this.legendTotals=e.sliceTotals.slice(0,this.config.maxLegendPoints);var i=0,n=0;this.legendTotals.map((function(s,a){var r=150,o=Math.floor((t.width-L(t.measures))/r);t.legendTotals.lengtho&&(i=0,n+=20);var l=r*i+5,c=t.config.truncateLegends?j(e.labels[a],r/10):e.labels[a],u=t.config.formatTooltipY?t.config.formatTooltipY(s):s,h=function(t,e,i,n,s,a){void 0===n&&(n="none"),void 0===a&&(a=!1);var r={className:"legend-dot",cx:0,cy:0,r:i,fill:n},o=q("text",{className:"legend-dataset-text",x:0,y:0,dx:"10px",dy:10/3+"px","font-size":"12px","text-anchor":"start",fill:"#555b51",innerHTML:s=a?j(s,15):s}),l=q("g",{transform:"translate("+t+", "+e+")"});return l.appendChild(q("circle",r)),l.appendChild(o),l}(l,n,5,t.colors[a],c+": "+u,!1);t.legendArea.appendChild(h),i++}))},e}(ht),pt=["January","February","March","April","May","June","July","August","September","October","November","December"],ft=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];function vt(t){var e=new Date(t);return e.setMinutes(e.getMinutes()-e.getTimezoneOffset()),e}function mt(t){var e=t.getDate(),i=t.getMonth()+1;return[t.getFullYear(),(i>9?"":"0")+i,(e>9?"":"0")+e].join("-")}function gt(t){return new Date(t.getTime())}function yt(t,e){var i=At(t);return Math.ceil(function(t,e){return(vt(e)-vt(t))/864e5}(i,e)/7)}function bt(t,e){return t.getMonth()===e.getMonth()&&t.getFullYear()===e.getFullYear()}function xt(t,e){void 0===e&&(e=!1);var i=pt[t];return e?i.slice(0,3):i}function wt(t,e){return new Date(e,t+1,0)}function At(t){var e=gt(t),i=e.getDay();return 0!==i&&Pt(e,-1*i),e}function Pt(t,e){t.setDate(t.getDate()+e)}var kt=function(){function t(t){var e=t.layerClass,i=void 0===e?"":e,n=t.layerTransform,s=void 0===n?"":n,a=t.constants,r=t.getData,o=t.makeElements,l=t.animateElements;this.layerTransform=s,this.constants=a,this.makeElements=o,this.getData=r,this.animateElements=l,this.store=[],this.labels=[],this.layerClass=i,this.layerClass="function"==typeof this.layerClass?this.layerClass():this.layerClass,this.refresh()}var e=t.prototype;return e.refresh=function(t){this.data=t||this.getData()},e.setup=function(t){this.layer=J(this.layerClass,this.layerTransform,t)},e.make=function(){this.render(this.data),this.oldData=this.data},e.render=function(t){var e=this;this.store=this.makeElements(t),this.layer.textContent="",this.store.forEach((function(t){e.layer.appendChild(t)})),this.labels.forEach((function(t){e.layer.appendChild(t)}))},e.update=function(t){void 0===t&&(t=!0),this.refresh();var e=[];return t&&(e=this.animateElements(this.data)||[]),e},t}(),Mt={donutSlices:{layerClass:"donut-slices",makeElements:function(t){return t.sliceStrings.map((function(e,i){var n=K(e,"donut-path",t.colors[i],"none",t.strokeWidth);return n.style.transition="transform .3s;",n}))},animateElements:function(t){return this.store.map((function(e,i){return rt(e,t.sliceStrings[i])}))}},pieSlices:{layerClass:"pie-slices",makeElements:function(t){return t.sliceStrings.map((function(e,i){var n=K(e,"pie-path","none",t.colors[i]);return n.style.transition="transform .3s;",n}))},animateElements:function(t){return this.store.map((function(e,i){return rt(e,t.sliceStrings[i])}))}},percentageBars:{layerClass:"percentage-bars",makeElements:function(t){var e=this;return t.xPositions.map((function(i,n){return function(t,e,i,n,s,a){return void 0===s&&(s=2),void 0===a&&(a="none"),q("rect",{className:"percentage-bar",x:t,y:e,width:i,height:n,fill:a,styles:{stroke:V(a,-25),"stroke-dasharray":"0, "+(n+i)+", "+i+", "+n,"stroke-width":s}})}(i,0,t.widths[n],e.constants.barHeight,e.constants.barDepth,t.colors[n])}))},animateElements:function(t){if(t)return[]}},yAxis:{layerClass:"y axis",makeElements:function(t){var e=this;return t.positions.map((function(i,n){return function(t,e,i,n){void 0===n&&(n={}),F(t)||(t=0),n.pos||(n.pos="left"),n.offset||(n.offset=0),n.mode||(n.mode="span"),n.stroke||(n.stroke="#dadada"),n.className||(n.className="");var s=-6,a="span"===n.mode?i+6:0;return"tick"===n.mode&&"right"===n.pos&&(s=i+6,a=i),tt(t,e,s+=n.offset,a+=n.offset,{stroke:n.stroke,className:n.className,lineType:n.lineType,shortenNumbers:n.shortenNumbers})}(i,t.labels[n],e.constants.width,{mode:e.constants.mode,pos:e.constants.pos,shortenNumbers:e.constants.shortenNumbers})}))},animateElements:function(t){var e=t.positions,i=t.labels,n=this.oldData.positions,s=this.oldData.labels,a=R(n,e);n=a[0],e=a[1];var r=R(s,i);return s=r[0],i=r[1],this.render({positions:n,labels:i}),this.store.map((function(t,i){return at(t,e[i],n[i])}))}},xAxis:{layerClass:"x axis",makeElements:function(t){var e=this;return t.positions.map((function(i,n){return et(i,t.calcLabels[n],e.constants.height,{mode:e.constants.mode,pos:e.constants.pos})}))},animateElements:function(t){var e=t.positions,i=t.calcLabels,n=this.oldData.positions,s=this.oldData.calcLabels,a=R(n,e);n=a[0],e=a[1];var r=R(s,i);return s=r[0],i=r[1],this.render({positions:n,calcLabels:i}),this.store.map((function(t,i){return function(t,e,i){return st(t,[i,0],[e,0],350)}(t,e[i],n[i])}))}},yMarkers:{layerClass:"y-markers",makeElements:function(t){var e=this;return t.map((function(t){return function(t,e,i,n){void 0===n&&(n={}),n.labelPos||(n.labelPos="right");var s=q("text",{className:"chart-label",x:"left"===n.labelPos?4:i-W(e,5)-4,y:0,dy:"-5px","font-size":"10px","text-anchor":"start",innerHTML:e+""}),a=tt(t,"",0,i,{stroke:n.stroke||"#dadada",className:n.className||"",lineType:n.lineType});return a.appendChild(s),a}(t.position,t.label,e.constants.width,{labelPos:t.options.labelPos,mode:"span",lineType:"dashed"})}))},animateElements:function(t){var e=R(this.oldData,t);this.oldData=e[0];var i=(t=e[1]).map((function(t){return t.position})),n=t.map((function(t){return t.label})),s=t.map((function(t){return t.options})),a=this.oldData.map((function(t){return t.position}));return this.render(a.map((function(t,e){return{position:a[e],label:n[e],options:s[e]}}))),this.store.map((function(t,e){return at(t,i[e],a[e])}))}},yRegions:{layerClass:"y-regions",makeElements:function(t){var e=this;return t.map((function(t){return function(t,e,i,n,s){void 0===s&&(s={});var a=t-e,r=q("rect",{className:"bar mini",styles:{fill:"rgba(228, 234, 239, 0.49)",stroke:"#dadada","stroke-dasharray":i+", "+a},x:0,y:0,width:i,height:a});s.labelPos||(s.labelPos="right");var o=q("text",{className:"chart-label",x:"left"===s.labelPos?4:i-W(n+"",4.5)-4,y:0,dy:"-5px","font-size":"10px","text-anchor":"start",innerHTML:n+""}),l=q("g",{transform:"translate(0, "+e+")"});return l.appendChild(r),l.appendChild(o),l}(t.startPos,t.endPos,e.constants.width,t.label,{labelPos:t.options.labelPos})}))},animateElements:function(t){var e=R(this.oldData,t);this.oldData=e[0];var i=(t=e[1]).map((function(t){return t.endPos})),n=t.map((function(t){return t.label})),s=t.map((function(t){return t.startPos})),a=t.map((function(t){return t.options})),r=this.oldData.map((function(t){return t.endPos})),o=this.oldData.map((function(t){return t.startPos}));this.render(r.map((function(t,e){return{startPos:o[e],endPos:r[e],label:n[e],options:a[e]}})));var l=[];return this.store.map((function(t,e){l=l.concat(function(t,e,i,n){var s=e-i,a=t.childNodes[0],r=a.getAttribute("width");return[[a,{height:s,"stroke-dasharray":r+", "+s},350,"easein"],st(t,[0,n],[0,i],350)]}(t,s[e],i[e],r[e]))})),l}},heatDomain:{layerClass:function(){return"heat-domain domain-"+this.constants.index},makeElements:function(t){var e=this,i=this.constants,n=i.index,s=i.colWidth,a=i.rowHeight,r=i.squareSize,o=i.radius,l=i.xTranslate,c=l,u=0;return this.serializedSubDomains=[],t.cols.map((function(t,i){1===i&&e.labels.push(Z("domain-name",c,-12,xt(n,!0).toUpperCase(),{fontSize:9})),t.map((function(t,i){if(t.fill){var n={"data-date":t.yyyyMmDd,"data-value":t.dataValue,"data-day":i},s=Q("day",c,u,r,o,t.fill,n);e.serializedSubDomains.push(s)}u+=a})),u=0,c+=s})),this.serializedSubDomains},animateElements:function(t){if(t)return[]}},barGraph:{layerClass:function(){return"dataset-units dataset-bars dataset-"+this.constants.index},makeElements:function(t){var e=this.constants;return this.unitType="bar",this.units=t.yPositions.map((function(i,n){return function(t,e,i,n,s,a,r,o){void 0===s&&(s=""),void 0===a&&(a=0),void 0===r&&(r=0),void 0===o&&(o={});var l=I(e,o.zeroLine),c=l[0],u=l[1];u-=r,0===c&&(c=o.minHeight,u-=o.minHeight),F(t)||(t=0),F(u)||(u=0),F(c,!0)||(c=0),F(i,!0)||(i=0);var h=q("rect",{className:"bar mini",style:"fill: "+n,"data-point-index":a,x:t,y:u,width:i,height:c});if((s+="")||s.length){h.setAttribute("y",0),h.setAttribute("x",0);var d=q("text",{className:"data-point-value",x:i/2,y:0,dy:"-5px","font-size":"10px","text-anchor":"middle",innerHTML:s}),p=q("g",{"data-point-index":a,transform:"translate("+t+", "+u+")"});return p.appendChild(h),p.appendChild(d),p}return h}(t.xPositions[n],i,t.barWidth,e.color,t.labels[n],n,t.offsets[n],{zeroLine:t.zeroLine,barsWidth:t.barsWidth,minHeight:e.minHeight})})),this.units},animateElements:function(t){var e=t.xPositions,i=t.yPositions,n=t.offsets,s=t.labels,a=this.oldData.xPositions,r=this.oldData.yPositions,o=this.oldData.offsets,l=this.oldData.labels,c=R(a,e);a=c[0],e=c[1];var u=R(r,i);r=u[0],i=u[1];var h=R(o,n);o=h[0],n=h[1];var d=R(l,s);l=d[0],s=d[1],this.render({xPositions:a,yPositions:r,offsets:o,labels:s,zeroLine:this.oldData.zeroLine,barsWidth:this.oldData.barsWidth,barWidth:this.oldData.barWidth});var p=[];return this.store.map((function(s,a){p=p.concat(function(t,e,i,n,s,a){void 0===s&&(s=0),void 0===a&&(a={});var r=I(i,a.zeroLine),o=r[0],l=r[1];if(l-=s,"rect"!==t.nodeName){var c=[t.childNodes[0],{width:n,height:o},350,"easein"],u=t.getAttribute("transform").split("(")[1].slice(0,-1);return[c,st(t,u,[e,l],350)]}return[[t,{width:n,height:o,x:e,y:l},350,"easein"]]}(s,e[a],i[a],t.barWidth,n[a],{zeroLine:t.zeroLine}))})),p}},lineGraph:{layerClass:function(){return"dataset-units dataset-line dataset-"+this.constants.index},makeElements:function(t){var e=this.constants;return this.unitType="dot",this.paths={},e.hideLine||(this.paths=function(t,e,i,n,s){void 0===n&&(n={}),void 0===s&&(s={});var a=e.map((function(e,i){return t[i]+","+e})).join("L");n.spline&&(a=Y(t,e));var r=K("M"+a,"line-graph-path",i);if(n.heatline){var o=$(s.svgDefs,i);r.style.stroke="url(#"+o+")"}var l={path:r};if(n.regionFill){var c=$(s.svgDefs,i,!0),u="M"+t[0]+","+s.zeroLine+"L"+a+"L"+t.slice(-1)[0]+","+s.zeroLine;l.region=K(u,"region-fill","none","url(#"+c+")")}return l}(t.xPositions,t.yPositions,e.color,{heatline:e.heatline,regionFill:e.regionFill,spline:e.spline},{svgDefs:e.svgDefs,zeroLine:t.zeroLine})),this.units=[],e.hideDots||(this.units=t.yPositions.map((function(i,n){return function(t,e,i,n,s,a){void 0===s&&(s=""),void 0===a&&(a=0);var r=q("circle",{style:"fill: "+n,"data-point-index":a,cx:t,cy:e,r:i});if((s+="")||s.length){r.setAttribute("cy",0),r.setAttribute("cx",0);var o=q("text",{className:"data-point-value",x:0,y:0,dy:-5-i+"px","font-size":"10px","text-anchor":"middle",innerHTML:s}),l=q("g",{"data-point-index":a,transform:"translate("+t+", "+e+")"});return l.appendChild(r),l.appendChild(o),l}return r}(t.xPositions[n],i,t.radius,e.color,e.valuesOverPoints?t.values[n]:"",n)}))),Object.values(this.paths).concat(this.units)},animateElements:function(t){var e=t.xPositions,i=t.yPositions,n=t.values,s=this.oldData.xPositions,a=this.oldData.yPositions,r=this.oldData.values,o=R(s,e);s=o[0],e=o[1];var l=R(a,i);a=l[0],i=l[1];var c=R(r,n);r=c[0],n=c[1],this.render({xPositions:s,yPositions:a,values:n,zeroLine:this.oldData.zeroLine,radius:this.oldData.radius});var u=[];return Object.keys(this.paths).length&&(u=u.concat(function(t,e,i,n,s){var a=[],r=i.map((function(t,i){return e[i]+","+t})).join("L");s&&(r=Y(e,i));var o=[t.path,{d:"M"+r},350,"easein"];if(a.push(o),t.region){var l=e[0]+","+n+"L",c="L"+e.slice(-1)[0]+", "+n,u=[t.region,{d:"M"+l+r+c},350,"easein"];a.push(u)}return a}(this.paths,e,i,t.zeroLine,this.constants.spline))),this.units.length&&this.units.map((function(t,n){u=u.concat(function(t,e,i){if("circle"!==t.nodeName){var n=t.getAttribute("transform").split("(")[1].slice(0,-1);return[st(t,n,[e,i],350)]}return[[t,{cx:e,cy:i},350,"easein"]]}(t,e[n],i[n]))})),u}}};function Tt(t,e,i){var n=Object.keys(Mt).filter((function(e){return t.includes(e)})),s=Mt[n[0]];return Object.assign(s,{constants:e,getData:i}),new kt(s)}var Lt=function(t){function e(e,i){var n;return(n=t.call(this,e,i)||this).type="percentage",n.setup(),n}c(e,t);var i=e.prototype;return i.setMeasures=function(t){var e=this.measures;this.barOptions=t.barOptions||{};var i=this.barOptions;i.height=i.height||20,i.depth=i.depth||2,e.paddings.right=30,e.legendHeight=60,e.baseHeight=8*(i.height+.5*i.depth)},i.setupComponents=function(){var t=this.state,e=[["percentageBars",{barHeight:this.barOptions.height,barDepth:this.barOptions.depth},function(){return{xPositions:t.xPositions,widths:t.widths,colors:this.colors}}.bind(this)]];this.components=new Map(e.map((function(t){var e=Tt.apply(void 0,t);return[t[0],e]})))},i.calc=function(){var e=this;t.prototype.calc.call(this);var i=this.state;i.xPositions=[],i.widths=[];var n=0;i.sliceTotals.map((function(t){var s=e.width*t/i.grandTotal;i.widths.push(s),i.xPositions.push(n),n+=s}))},i.makeDataByIndex=function(){},i.bindTooltip=function(){var t=this,e=this.state;this.container.addEventListener("mousemove",(function(i){var n=t.components.get("percentageBars").store,s=i.target;if(n.includes(s)){var a=n.indexOf(s),r=A(t.container),o=A(s),l=o.left-r.left+parseInt(s.getAttribute("width"))/2,c=o.top-r.top,u=(t.formattedLabels&&t.formattedLabels.length>0?t.formattedLabels[a]:t.state.labels[a])+": ",h=e.sliceTotals[a]/e.grandTotal;t.tip.setValues(l,c,{name:u,value:(100*h).toFixed(1)+"%"}),t.tip.showTip()}}))},e}(dt),Ct=function(t){function e(e,i){var n;return(n=t.call(this,e,i)||this).type="pie",n.initTimeout=0,n.init=1,n.setup(),n}c(e,t);var i=e.prototype;return i.configure=function(e){t.prototype.configure.call(this,e),this.mouseMove=this.mouseMove.bind(this),this.mouseLeave=this.mouseLeave.bind(this),this.hoverRadio=e.hoverRadio||.1,this.config.startAngle=e.startAngle||0,this.clockWise=e.clockWise||!1},i.calc=function(){var e=this;t.prototype.calc.call(this);var i=this.state;this.radius=this.height>this.width?this.center.x:this.center.y;var n=this.radius,s=this.clockWise,a=i.slicesProperties||[];i.sliceStrings=[],i.slicesProperties=[];var r=180-this.config.startAngle;i.sliceTotals.map((function(t,o){var l,c,u=r,h=t/i.grandTotal*360,d=h>180?1:0,p=s?-h:h,f=r+=p,v=H(u,n),m=H(f,n),g=e.init&&a[o];e.init?(l=g?g.startPosition:v,c=g?g.endPosition:v):(l=v,c=m);var y=360===h?function(t,e,i,n,s,a){void 0===s&&(s=1),void 0===a&&(a=0);var r=i.x+t.x,o=i.y+t.y,l=i.x+e.x,c=2*i.y,u=i.y+e.y;return"M"+i.x+" "+i.y+"\n\t\tL"+r+" "+o+"\n\t\tA "+n+" "+n+" 0 "+a+" "+(s?1:0)+"\n\t\t"+l+" "+c+" z\n\t\tL"+r+" "+c+"\n\t\tA "+n+" "+n+" 0 "+a+" "+(s?1:0)+"\n\t\t"+l+" "+u+" z"}(l,c,e.center,e.radius,s,d):function(t,e,i,n,s,a){void 0===s&&(s=1),void 0===a&&(a=0);var r=i.x+t.x,o=i.y+t.y,l=i.x+e.x,c=i.y+e.y;return"M"+i.x+" "+i.y+"\n\t\tL"+r+" "+o+"\n\t\tA "+n+" "+n+" 0 "+a+" "+(s?1:0)+"\n\t\t"+l+" "+c+" z"}(l,c,e.center,e.radius,s,d);i.sliceStrings.push(y),i.slicesProperties.push({startPosition:v,endPosition:m,value:t,total:i.grandTotal,startAngle:u,endAngle:f,angle:p})})),this.init=0},i.setupComponents=function(){var t=this.state,e=[["pieSlices",{},function(){return{sliceStrings:t.sliceStrings,colors:this.colors}}.bind(this)]];this.components=new Map(e.map((function(t){var e=Tt.apply(void 0,t);return[t[0],e]})))},i.calTranslateByAngle=function(t){var e=this.radius,i=this.hoverRadio,n=H(t.startAngle+t.angle/2,e);return"translate3d("+n.x*i+"px,"+n.y*i+"px,0)"},i.hoverSlice=function(t,e,i,n){if(t){var s=this.colors[e];if(i){ct(t,this.calTranslateByAngle(this.state.slicesProperties[e])),t.style.fill=V(s,50);var a=A(this.svg),r=n.pageX-a.left+10,o=n.pageY-a.top-10,l=(this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels[e]:this.state.labels[e])+": ",c=(100*this.state.sliceTotals[e]/this.state.grandTotal).toFixed(1);this.tip.setValues(r,o,{name:l,value:c+"%"}),this.tip.showTip()}else ct(t,"translate3d(0,0,0)"),this.tip.hideTip(),t.style.fill=s}},i.bindTooltip=function(){this.container.addEventListener("mousemove",this.mouseMove),this.container.addEventListener("mouseleave",this.mouseLeave)},i.mouseMove=function(t){var e=t.target,i=this.components.get("pieSlices").store,n=this.curActiveSliceIndex,s=this.curActiveSlice;if(i.includes(e)){var a=i.indexOf(e);this.hoverSlice(s,n,!1),this.curActiveSlice=e,this.curActiveSliceIndex=a,this.hoverSlice(e,a,!0,t)}else this.mouseLeave()},i.mouseLeave=function(){this.hoverSlice(this.curActiveSlice,this.curActiveSliceIndex,!1)},e}(dt);function Dt(t){if(0===t)return[0,0];if(isNaN(t))return{mantissa:-6755399441055744,exponent:972};var e=t>0?1:-1;if(!isFinite(t))return{mantissa:4503599627370496*e,exponent:972};t=Math.abs(t);var i=Math.floor(Math.log10(t));return[e*(t/Math.pow(10,i)),i]}function Nt(t,e){void 0===e&&(e=0);var i=Dt(t),n=i[0],s=i[1],a=e?e/Math.pow(10,s):0,r=function(t,e){void 0===e&&(e=0);var i=Math.ceil(t),n=Math.floor(e),s=i-n,a=s,r=1;s>5&&(s%2!=0&&(s=++i-n),a=s/2,r=2),s<=2&&(r=s/(a=4)),0===s&&(a=5,r=1);for(var o=[],l=0;l<=a;l++)o.push(n+r*l);return o}(n=n.toFixed(6),a);return r=r.map((function(t){return t*Math.pow(10,s)}))}function St(t){return t[1]-t[0]}function Ot(t,e){return E(e.zeroLine-t*e.scaleMultiplier)}var Et=function(t){function e(e,i){var n;(n=t.call(this,e,i)||this).type="heatmap",n.countLabel=i.countLabel||"";var s=["Sunday","Monday"],a=s.includes(i.startSubDomain)?i.startSubDomain:"Sunday";return n.startSubDomainIndex=s.indexOf(a),n.setup(),n}c(e,t);var i=e.prototype;return i.setMeasures=function(t){var e=this.measures;this.discreteDomains=0===t.discreteDomains?0:1,e.paddings.top=36,e.paddings.bottom=0,e.legendHeight=24,e.baseHeight=84+T(e);var i=this.data,n=this.discreteDomains?12:0;this.independentWidth=12*(yt(i.start,i.end)+n)+L(e)},i.updateWidth=function(){var t=this.discreteDomains?12:0,e=this.state.noOfWeeks?this.state.noOfWeeks:52;this.baseWidth=12*(e+t)+L(this.measures)},i.prepareData=function(t){if(void 0===t&&(t=this.data),t.start&&t.end&&t.start>t.end)throw new Error("Start date cannot be greater than end date.");if(t.start||(t.start=new Date,t.start.setFullYear(t.start.getFullYear()-1)),t.end||(t.end=new Date),t.dataPoints=t.dataPoints||{},parseInt(Object.keys(t.dataPoints)[0])>1e5){var e={};Object.keys(t.dataPoints).forEach((function(i){var n=new Date(1e3*i);e[mt(n)]=t.dataPoints[i]})),t.dataPoints=e}return t},i.calc=function(){var t=this.state;t.start=gt(this.data.start),t.end=gt(this.data.end),t.firstWeekStart=gt(t.start),t.noOfWeeks=yt(t.start,t.end),t.distribution=function(t,e){for(var i=Math.max.apply(Math,t),n=1/(e-1),s=[],a=0;a=n.start&&s<=n.end;i||s.getMonth()!==e||!l?o.yyyyMmDd=mt(s):o=this.getSubDomainConfig(s),a.push(o)}return a},i.getSubDomainConfig=function(t){var e,i,n=mt(t),s=this.data.dataPoints[n];return{yyyyMmDd:n,dataValue:s||0,fill:this.colors[(e=s,i=this.state.distribution,i.filter((function(t){return ti?n.slice(0,i):z(n,i-n.length,0),t.values=n}else t.values=s;t.chartType||(C.includes(e),t.chartType=e)})),t.yRegions&&t.yRegions.map((function(t){if(t.end=0&&n>=0)Dt(i)[1],s=e?Nt(i,n):Nt(i);else if(i>0&&n<0){var r=Math.abs(n);if(i>=r)Dt(i)[1],s=a(i,r);else Dt(r)[1],s=a(r,i).reverse().map((function(t){return-1*t}))}else if(i<=0&&n<=0){var o=Math.abs(n),l=Math.abs(i);Dt(o)[1],s=(s=e?Nt(o,l):Nt(o)).reverse().map((function(t){return-1*t}))}return s}(t,e),s=this.height/((i=n)[i.length-1]-i[0]),a=St(n)*s,r=this.height-function(t){var e,i=St(t);if(t.indexOf(0)>=0)e=t.indexOf(0);else if(t[0]>0){e=-1*t[0]/i}else{e=-1*t[t.length-1]/i+(t.length-1)}return e}(n)*a;this.state.yAxis={labels:n,positions:n.map((function(t){return r-t*s})),scaleMultiplier:s,zeroLine:r},this.calcDatasetPoints(),this.calcYExtremes(),this.calcYRegions()},i.calcDatasetPoints=function(){var t=this.state,e=function(e){return e.map((function(e){return Ot(e,t.yAxis)}))};t.datasets=this.data.datasets.map((function(t,i){var n=t.values,s=t.cumulativeYs||[];return{name:t.name&&t.name.replace(/<|>|&/g,(function(t){return"&"==t?"&":"<"==t?"<":">"})),index:i,chartType:t.chartType,values:n,yPositions:e(n),cumulativeYs:s,cumulativeYPos:e(s)}}))},i.calcYExtremes=function(){var t=this.state;this.barOptions.stacked?t.yExtremes=t.datasets[t.datasets.length-1].cumulativeYPos:(t.yExtremes=new Array(t.datasetLength).fill(9999),t.datasets.map((function(e){e.yPositions.map((function(e,i){ea&&(i?e%s!=0&&(t=""):t=a-3>0?t.slice(0,a-3)+" ...":t.slice(0,a)+".."),t}))}(this.width,t.xAxis.labels,this.config.xIsSeries),t.xAxis}.bind(this)],["yRegions",{width:this.width,pos:"right"},function(){return this.state.yRegions}.bind(this)]],i=this.state.datasets.filter((function(t){return"bar"===t.chartType})),n=this.state.datasets.filter((function(t){return"line"===t.chartType})),s=i.map((function(e){var n=e.index;return["barGraph-"+e.index,{index:n,color:t.colors[n],stacked:t.barOptions.stacked,valuesOverPoints:t.config.valuesOverPoints,minHeight:0*t.height},function(){var t=this.state,e=t.datasets[n],s=this.barOptions.stacked,a=this.barOptions.spaceRatio||.5,r=t.unitWidth*(1-a),o=r/(s?1:i.length),l=t.xAxis.positions.map((function(t){return t-r/2}));s||(l=l.map((function(t){return t+o*n})));var c=new Array(t.datasetLength).fill("");this.config.valuesOverPoints&&(c=s&&e.index===t.datasets.length-1?e.cumulativeYs:e.values);var u=new Array(t.datasetLength).fill(0);return s&&(u=e.yPositions.map((function(t,i){return t-e.cumulativeYPos[i]}))),{xPositions:l,yPositions:e.yPositions,offsets:u,labels:c,zeroLine:t.yAxis.zeroLine,barsWidth:r,barWidth:o}}.bind(t)]})),a=n.map((function(e){var i=e.index;return["lineGraph-"+e.index,{index:i,color:t.colors[i],svgDefs:t.svgDefs,heatline:t.lineOptions.heatline,regionFill:t.lineOptions.regionFill,spline:t.lineOptions.spline,hideDots:t.lineOptions.hideDots,hideLine:t.lineOptions.hideLine,valuesOverPoints:t.config.valuesOverPoints},function(){var t=this.state,e=t.datasets[i],n=t.yAxis.positions[0]k(i)?t.mapTooltipXPosition(s):t.tip.hideTip()}))},i.mapTooltipXPosition=function(t){var e=this.state;if(e.yExtremes){var i=function(t,e,i){void 0===i&&(i=!1);var n=e.reduce((function(e,i){return Math.abs(i-t)=0){var n=this.dataByIndex[i];this.tip.setValues(n.xPos+this.tip.offset.x,n.yExtreme+this.tip.offset.y,{name:n.formattedLabel,value:""},n.values,i),this.tip.showTip()}}},i.renderLegend=function(){var t=this,e=this.data;e.datasets.length>1&&(this.legendArea.textContent="",e.datasets.map((function(e,i){var n=function(t,e,i,n,s,a){void 0===n&&(n="none"),void 0===a&&(a=!1);var r={className:"legend-bar",x:0,y:0,width:i,height:"2px",fill:n},o=q("text",{className:"legend-dataset-text",x:0,y:0,dy:"20px","font-size":"12px","text-anchor":"start",fill:"#555b51",innerHTML:s=a?j(s,15):s}),l=q("g",{transform:"translate("+t+", "+e+")"});return l.appendChild(q("rect",r)),l.appendChild(o),l}(100*i,"0",100,t.colors[i],e.name,t.config.truncateLegends);t.legendArea.appendChild(n)})))},i.makeOverlay=function(){var t=this;this.init?this.init=0:(this.overlayGuides&&this.overlayGuides.forEach((function(t){var e=t.overlay;e.parentNode.removeChild(e)})),this.overlayGuides=this.dataUnitComponents.map((function(t){return{type:t.unitType,overlay:void 0,units:t.units}})),void 0===this.state.currentIndex&&(this.state.currentIndex=this.state.datasetLength-1),this.overlayGuides.map((function(e){var i=e.units[t.state.currentIndex];e.overlay=it[e.type](i),t.drawArea.appendChild(e.overlay)})))},i.updateOverlayGuides=function(){this.overlayGuides&&this.overlayGuides.forEach((function(t){var e=t.overlay;e.parentNode.removeChild(e)}))},i.bindOverlay=function(){var t=this;this.parent.addEventListener("data-select",(function(){t.updateOverlay()}))},i.bindUnits=function(){var t=this;this.dataUnitComponents.map((function(e){e.units.map((function(e){e.addEventListener("click",(function(){var i=e.getAttribute("data-point-index");t.setCurrentDataPoint(i)}))}))})),this.tip.container.addEventListener("click",(function(){var e=t.tip.container.getAttribute("data-point-index");t.setCurrentDataPoint(e)}))},i.updateOverlay=function(){var t=this;this.overlayGuides.map((function(e){var i=e.units[t.state.currentIndex];nt[e.type](i,e.overlay)}))},i.onLeftArrow=function(){this.setCurrentDataPoint(this.state.currentIndex-1)},i.onRightArrow=function(){this.setCurrentDataPoint(this.state.currentIndex+1)},i.getDataPoint=function(t){void 0===t&&(t=this.state.currentIndex);var e=this.state;return{index:t,label:e.xAxis.labels[t],values:e.datasets.map((function(e){return e.values[t]}))}},i.setCurrentDataPoint=function(t){var e=this.state;(t=parseInt(t))<0&&(t=0),t>=e.xAxis.labels.length&&(t=e.xAxis.labels.length-1),t!==e.currentIndex&&(e.currentIndex=t,function(t,e,i){var n=document.createEvent("HTMLEvents");for(var s in n.initEvent(e,!0,!0),i)n[s]=i[s];t.dispatchEvent(n)}(this.parent,"data-select",this.getDataPoint()))},i.addDataPoint=function(e,i,n){void 0===n&&(n=this.state.datasetLength),t.prototype.addDataPoint.call(this,e,i,n),this.data.labels.splice(n,0,e),this.data.datasets.map((function(t,e){t.values.splice(n,0,i[e])})),this.update(this.data)},i.removeDataPoint=function(e){void 0===e&&(e=this.state.datasetLength-1),this.data.labels.length<=1||(t.prototype.removeDataPoint.call(this,e),this.data.labels.splice(e,1),this.data.datasets.map((function(t){t.values.splice(e,1)})),this.update(this.data))},i.updateDataset=function(t,e){void 0===e&&(e=0),this.data.datasets[e].values=t,this.update(this.data)},i.updateDatasets=function(t){this.data.datasets.map((function(e,i){t[i]&&(e.values=t[i])})),this.update(this.data)},e}(ht),Wt={bar:zt,line:zt,percentage:Lt,heatmap:Et,pie:Ct,donut:function(t){function e(e,i){var n;return(n=t.call(this,e,i)||this).type="donut",n.initTimeout=0,n.init=1,n.setup(),n}c(e,t);var i=e.prototype;return i.configure=function(e){t.prototype.configure.call(this,e),this.mouseMove=this.mouseMove.bind(this),this.mouseLeave=this.mouseLeave.bind(this),this.hoverRadio=e.hoverRadio||.1,this.config.startAngle=e.startAngle||0,this.clockWise=e.clockWise||!1,this.strokeWidth=e.strokeWidth||30},i.calc=function(){var e=this;t.prototype.calc.call(this);var i=this.state;this.radius=this.height>this.width?this.center.x-this.strokeWidth/2:this.center.y-this.strokeWidth/2;var n=this.radius,s=this.clockWise,a=i.slicesProperties||[];i.sliceStrings=[],i.slicesProperties=[];var r=180-this.config.startAngle;i.sliceTotals.map((function(t,o){var l,c,u=r,h=t/i.grandTotal*360,d=h>180?1:0,p=s?-h:h,f=r+=p,v=H(u,n),m=H(f,n),g=e.init&&a[o];e.init?(l=g?g.startPosition:v,c=g?g.endPosition:v):(l=v,c=m);var y=360===h?function(t,e,i,n,s,a){void 0===s&&(s=1),void 0===a&&(a=0);var r=i.x+t.x,o=i.y+t.y,l=i.x+e.x,c=2*n+o;return"M"+r+" "+o+"\n\t\tA "+n+" "+n+" 0 "+a+" "+(s?1:0)+"\n\t\t"+l+" "+c+"\n\t\tM"+r+" "+c+"\n\t\tA "+n+" "+n+" 0 "+a+" "+(s?1:0)+"\n\t\t"+l+" "+(i.y+t.y)}(l,c,e.center,e.radius,e.clockWise,d):function(t,e,i,n,s,a){return void 0===s&&(s=1),void 0===a&&(a=0),"M"+(i.x+t.x)+" "+(i.y+t.y)+"\n\t\tA "+n+" "+n+" 0 "+a+" "+(s?1:0)+"\n\t\t"+(i.x+e.x)+" "+(i.y+e.y)}(l,c,e.center,e.radius,e.clockWise,d);i.sliceStrings.push(y),i.slicesProperties.push({startPosition:v,endPosition:m,value:t,total:i.grandTotal,startAngle:u,endAngle:f,angle:p})})),this.init=0},i.setupComponents=function(){var t=this.state,e=[["donutSlices",{},function(){return{sliceStrings:t.sliceStrings,colors:this.colors,strokeWidth:this.strokeWidth}}.bind(this)]];this.components=new Map(e.map((function(t){var e=Tt.apply(void 0,t);return[t[0],e]})))},i.calTranslateByAngle=function(t){var e=this.radius,i=this.hoverRadio,n=H(t.startAngle+t.angle/2,e);return"translate3d("+n.x*i+"px,"+n.y*i+"px,0)"},i.hoverSlice=function(t,e,i,n){if(t){var s=this.colors[e];if(i){ct(t,this.calTranslateByAngle(this.state.slicesProperties[e])),t.style.stroke=V(s,50);var a=A(this.svg),r=n.pageX-a.left+10,o=n.pageY-a.top-10,l=(this.formatted_labels&&this.formatted_labels.length>0?this.formatted_labels[e]:this.state.labels[e])+": ",c=(100*this.state.sliceTotals[e]/this.state.grandTotal).toFixed(1);this.tip.setValues(r,o,{name:l,value:c+"%"}),this.tip.showTip()}else ct(t,"translate3d(0,0,0)"),this.tip.hideTip(),t.style.stroke=s}},i.bindTooltip=function(){this.container.addEventListener("mousemove",this.mouseMove),this.container.addEventListener("mouseleave",this.mouseLeave)},i.mouseMove=function(t){var e=t.target,i=this.components.get("donutSlices").store,n=this.curActiveSliceIndex,s=this.curActiveSlice;if(i.includes(e)){var a=i.indexOf(e);this.hoverSlice(s,n,!1),this.curActiveSlice=e,this.curActiveSliceIndex=a,this.hoverSlice(e,a,!0,t)}else this.mouseLeave()},i.mouseLeave=function(){this.hoverSlice(this.curActiveSlice,this.curActiveSliceIndex,!1)},e}(dt)};var Ht=function(t,e){return function(t,e,i){return void 0===t&&(t="line"),"axis-mixed"===t?(i.type="line",new zt(e,i)):Wt[t]?new Wt[t](e,i):void console.error("Undefined chart type: "+t)}(e.type,t,e)},Ft=function(t){function e(){return t.apply(this,arguments)||this}c(e,t);var i=e.prototype;return i.oninit=function(e){t.prototype.oninit.call(this,e);var i=new Date;i.setTime(i.getTime()+1e3*app.data.statistics.timezoneOffset),i.setUTCHours(0,0,0,0),i.setTime(i.getTime()-1e3*app.data.statistics.timezoneOffset),i/=1e3,this.entities=["users","discussions","posts"],this.periods={today:{start:i,end:i+86400,step:3600},last_7_days:{start:i-604800,end:i,step:86400},last_28_days:{start:i-2419200,end:i,step:86400},last_12_months:{start:i-31449600,end:i,step:604800}},this.selectedEntity="users",this.selectedPeriod="last_7_days"},i.className=function(){return"StatisticsWidget"},i.content=function(){var t=this,e=this.periods[this.selectedPeriod];return m("div",{className:"StatisticsWidget-table"},m("div",{className:"StatisticsWidget-labels"},m("div",{className:"StatisticsWidget-label"},app.translator.trans("flarum-statistics.admin.statistics.total_label")),m("div",{className:"StatisticsWidget-label"},m(p.a,{buttonClassName:"Button Button--text",caretIcon:"fas fa-caret-down"},Object.keys(this.periods).map((function(e){return m(v.a,{active:e===t.selectedPeriod,onclick:t.changePeriod.bind(t,e),icon:e!==t.selectedPeriod||"fas fa-check"},app.translator.trans("flarum-statistics.admin.statistics."+e+"_label"))}))))),this.entities.map((function(i){var n=t.getTotalCount(i),s=t.getPeriodCount(i,e),a=t.getPeriodCount(i,t.getLastPeriod(e)),r=a>0&&(s-a)/a*100;return m("a",{className:"StatisticsWidget-entity"+(t.selectedEntity===i?" active":""),onclick:t.changeEntity.bind(t,i)},m("h3",{className:"StatisticsWidget-heading"},app.translator.trans("flarum-statistics.admin.statistics."+i+"_heading")),m("div",{className:"StatisticsWidget-total",title:n},x()(n)),m("div",{className:"StatisticsWidget-period",title:s},x()(s)," ",r?m("span",{className:"StatisticsWidget-change StatisticsWidget-change--"+(r>0?"up":"down")},y()("fas fa-arrow-"+(r>0?"up":"down")),Math.abs(r.toFixed(1)),"%"):""))})),m("div",{className:"StatisticsWidget-chart",oncreate:this.drawChart.bind(this),onupdate:this.drawChart.bind(this)}))},i.drawChart=function(t){if(!this.chart||this.entity!==this.selectedEntity||this.period!==this.selectedPeriod){for(var e=app.data.statistics.timezoneOffset,i=this.periods[this.selectedPeriod],n=i.end-i.start,s=[],a=[],r=[],o=i.start;o86400&&(l+=" - "+dayjs.unix(o+e+i.step-1).format("D MMM"))),s.push(l),a.push(this.getPeriodCount(this.selectedEntity,{start:o,end:o+i.step})),r.push(this.getPeriodCount(this.selectedEntity,{start:o-n,end:o-n+i.step}))}var c={labels:s,datasets:[{values:r},{values:a}]};this.chart?this.chart.update(c):this.chart=new Ht(t.dom,{data:c,type:"line",height:280,axisOptions:{xAxisMode:"tick",yAxisMode:"span",xIsSeries:!0},lineOptions:{hideDots:1},colors:["black",app.forum.attribute("themePrimaryColor")]}),this.entity=this.selectedEntity,this.period=this.selectedPeriod}},i.changeEntity=function(t){this.selectedEntity=t},i.changePeriod=function(t){this.selectedPeriod=t},i.getTotalCount=function(t){return app.data.statistics[t].total},i.getPeriodCount=function(t,e){var i=app.data.statistics[t].timed,n=0;for(var s in i)s>=e.start&&s {\n\tvar element = document.createElement(tag);\n\n\tfor (var i in o) {\n\t\tvar val = o[i];\n\n\t\tif (i === \"inside\") {\n\t\t\t$(val).appendChild(element);\n\t\t}\n\t\telse if (i === \"around\") {\n\t\t\tvar ref = $(val);\n\t\t\tref.parentNode.insertBefore(element, ref);\n\t\t\telement.appendChild(ref);\n\n\t\t} else if (i === \"styles\") {\n\t\t\tif(typeof val === \"object\") {\n\t\t\t\tObject.keys(val).map(prop => {\n\t\t\t\t\telement.style[prop] = val[prop];\n\t\t\t\t});\n\t\t\t}\n\t\t} else if (i in element ) {\n\t\t\telement[i] = val;\n\t\t}\n\t\telse {\n\t\t\telement.setAttribute(i, val);\n\t\t}\n\t}\n\n\treturn element;\n};\n\nfunction getOffset(element) {\n\tlet rect = element.getBoundingClientRect();\n\treturn {\n\t\t// https://stackoverflow.com/a/7436602/6495043\n\t\t// rect.top varies with scroll, so we add whatever has been\n\t\t// scrolled to it to get absolute distance from actual page top\n\t\ttop: rect.top + (document.documentElement.scrollTop || document.body.scrollTop),\n\t\tleft: rect.left + (document.documentElement.scrollLeft || document.body.scrollLeft)\n\t};\n}\n\n// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent\n// an element's offsetParent property will return null whenever it, or any of its parents,\n// is hidden via the display style property.\nfunction isHidden(el) {\n\treturn (el.offsetParent === null);\n}\n\nfunction isElementInViewport(el) {\n\t// Although straightforward: https://stackoverflow.com/a/7557433/6495043\n\tvar rect = el.getBoundingClientRect();\n\n\treturn (\n\t\trect.top >= 0 &&\n rect.left >= 0 &&\n rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */\n rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */\n\t);\n}\n\nfunction getElementContentWidth(element) {\n\tvar styles = window.getComputedStyle(element);\n\tvar padding = parseFloat(styles.paddingLeft) +\n\t\tparseFloat(styles.paddingRight);\n\n\treturn element.clientWidth - padding;\n}\n\n\n\n\n\nfunction fire(target, type, properties) {\n\tvar evt = document.createEvent(\"HTMLEvents\");\n\n\tevt.initEvent(type, true, true );\n\n\tfor (var j in properties) {\n\t\tevt[j] = properties[j];\n\t}\n\n\treturn target.dispatchEvent(evt);\n}\n\n// https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/\n\nconst BASE_MEASURES = {\n\tmargins: {\n\t\ttop: 10,\n\t\tbottom: 10,\n\t\tleft: 20,\n\t\tright: 20\n\t},\n\tpaddings: {\n\t\ttop: 20,\n\t\tbottom: 40,\n\t\tleft: 30,\n\t\tright: 10\n\t},\n\n\tbaseHeight: 240,\n\ttitleHeight: 20,\n\tlegendHeight: 30,\n\n\ttitleFontSize: 12,\n};\n\nfunction getTopOffset(m) {\n\treturn m.titleHeight + m.margins.top + m.paddings.top;\n}\n\nfunction getLeftOffset(m) {\n\treturn m.margins.left + m.paddings.left;\n}\n\nfunction getExtraHeight(m) {\n\tlet totalExtraHeight = m.margins.top + m.margins.bottom\n\t\t+ m.paddings.top + m.paddings.bottom\n\t\t+ m.titleHeight + m.legendHeight;\n\treturn totalExtraHeight;\n}\n\nfunction getExtraWidth(m) {\n\tlet totalExtraWidth = m.margins.left + m.margins.right\n\t\t+ m.paddings.left + m.paddings.right;\n\n\treturn totalExtraWidth;\n}\n\nconst INIT_CHART_UPDATE_TIMEOUT = 700;\nconst CHART_POST_ANIMATE_TIMEOUT = 400;\n\nconst DEFAULT_AXIS_CHART_TYPE = 'line';\nconst AXIS_DATASET_CHART_TYPES = ['line', 'bar'];\n\nconst AXIS_LEGEND_BAR_SIZE = 100;\n\nconst BAR_CHART_SPACE_RATIO = 0.5;\nconst MIN_BAR_PERCENT_HEIGHT = 0.00;\n\nconst LINE_CHART_DOT_SIZE = 4;\nconst DOT_OVERLAY_SIZE_INCR = 4;\n\nconst PERCENTAGE_BAR_DEFAULT_HEIGHT = 20;\nconst PERCENTAGE_BAR_DEFAULT_DEPTH = 2;\n\n// Fixed 5-color theme,\n// More colors are difficult to parse visually\nconst HEATMAP_DISTRIBUTION_SIZE = 5;\n\nconst HEATMAP_SQUARE_SIZE = 10;\nconst HEATMAP_GUTTER_SIZE = 2;\n\nconst DEFAULT_CHAR_WIDTH = 7;\n\nconst TOOLTIP_POINTER_TRIANGLE_HEIGHT = 5;\n\nconst DEFAULT_CHART_COLORS = ['light-blue', 'blue', 'violet', 'red', 'orange',\n\t'yellow', 'green', 'light-green', 'purple', 'magenta', 'light-grey', 'dark-grey'];\nconst HEATMAP_COLORS_GREEN = ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];\n\n\n\nconst DEFAULT_COLORS = {\n\tbar: DEFAULT_CHART_COLORS,\n\tline: DEFAULT_CHART_COLORS,\n\tpie: DEFAULT_CHART_COLORS,\n\tpercentage: DEFAULT_CHART_COLORS,\n\theatmap: HEATMAP_COLORS_GREEN,\n\tdonut: DEFAULT_CHART_COLORS\n};\n\n// Universal constants\nconst ANGLE_RATIO = Math.PI / 180;\nconst FULL_ANGLE = 360;\n\nclass SvgTip {\n\tconstructor({\n\t\tparent = null,\n\t\tcolors = []\n\t}) {\n\t\tthis.parent = parent;\n\t\tthis.colors = colors;\n\t\tthis.titleName = '';\n\t\tthis.titleValue = '';\n\t\tthis.listValues = [];\n\t\tthis.titleValueFirst = 0;\n\n\t\tthis.x = 0;\n\t\tthis.y = 0;\n\n\t\tthis.top = 0;\n\t\tthis.left = 0;\n\n\t\tthis.setup();\n\t}\n\n\tsetup() {\n\t\tthis.makeTooltip();\n\t}\n\n\trefresh() {\n\t\tthis.fill();\n\t\tthis.calcPosition();\n\t}\n\n\tmakeTooltip() {\n\t\tthis.container = $.create('div', {\n\t\t\tinside: this.parent,\n\t\t\tclassName: 'graph-svg-tip comparison',\n\t\t\tinnerHTML: `\n\t\t\t\t
    \n\t\t\t\t
    `\n\t\t});\n\t\tthis.hideTip();\n\n\t\tthis.title = this.container.querySelector('.title');\n\t\tthis.dataPointList = this.container.querySelector('.data-point-list');\n\n\t\tthis.parent.addEventListener('mouseleave', () => {\n\t\t\tthis.hideTip();\n\t\t});\n\t}\n\n\tfill() {\n\t\tlet title;\n\t\tif(this.index) {\n\t\t\tthis.container.setAttribute('data-point-index', this.index);\n\t\t}\n\t\tif(this.titleValueFirst) {\n\t\t\ttitle = `${this.titleValue}${this.titleName}`;\n\t\t} else {\n\t\t\ttitle = `${this.titleName}${this.titleValue}`;\n\t\t}\n\t\tthis.title.innerHTML = title;\n\t\tthis.dataPointList.innerHTML = '';\n\n\t\tthis.listValues.map((set, i) => {\n\t\t\tconst color = this.colors[i] || 'black';\n\t\t\tlet value = set.formatted === 0 || set.formatted ? set.formatted : set.value;\n\n\t\t\tlet li = $.create('li', {\n\t\t\t\tstyles: {\n\t\t\t\t\t'border-top': `3px solid ${color}`\n\t\t\t\t},\n\t\t\t\tinnerHTML: `${ value === 0 || value ? value : '' }\n\t\t\t\t\t${set.title ? set.title : '' }`\n\t\t\t});\n\n\t\t\tthis.dataPointList.appendChild(li);\n\t\t});\n\t}\n\n\tcalcPosition() {\n\t\tlet width = this.container.offsetWidth;\n\n\t\tthis.top = this.y - this.container.offsetHeight\n\t\t\t- TOOLTIP_POINTER_TRIANGLE_HEIGHT;\n\t\tthis.left = this.x - width/2;\n\t\tlet maxLeft = this.parent.offsetWidth - width;\n\n\t\tlet pointer = this.container.querySelector('.svg-pointer');\n\n\t\tif(this.left < 0) {\n\t\t\tpointer.style.left = `calc(50% - ${-1 * this.left}px)`;\n\t\t\tthis.left = 0;\n\t\t} else if(this.left > maxLeft) {\n\t\t\tlet delta = this.left - maxLeft;\n\t\t\tlet pointerOffset = `calc(50% + ${delta}px)`;\n\t\t\tpointer.style.left = pointerOffset;\n\n\t\t\tthis.left = maxLeft;\n\t\t} else {\n\t\t\tpointer.style.left = `50%`;\n\t\t}\n\t}\n\n\tsetValues(x, y, title = {}, listValues = [], index = -1) {\n\t\tthis.titleName = title.name;\n\t\tthis.titleValue = title.value;\n\t\tthis.listValues = listValues;\n\t\tthis.x = x;\n\t\tthis.y = y;\n\t\tthis.titleValueFirst = title.valueFirst || 0;\n\t\tthis.index = index;\n\t\tthis.refresh();\n\t}\n\n\thideTip() {\n\t\tthis.container.style.top = '0px';\n\t\tthis.container.style.left = '0px';\n\t\tthis.container.style.opacity = '0';\n\t}\n\n\tshowTip() {\n\t\tthis.container.style.top = this.top + 'px';\n\t\tthis.container.style.left = this.left + 'px';\n\t\tthis.container.style.opacity = '1';\n\t}\n}\n\n/**\n * Returns the value of a number upto 2 decimal places.\n * @param {Number} d Any number\n */\nfunction floatTwo(d) {\n\treturn parseFloat(d.toFixed(2));\n}\n\n/**\n * Returns whether or not two given arrays are equal.\n * @param {Array} arr1 First array\n * @param {Array} arr2 Second array\n */\n\n\n/**\n * Shuffles array in place. ES6 version\n * @param {Array} array An array containing the items.\n */\n\n\n/**\n * Fill an array with extra points\n * @param {Array} array Array\n * @param {Number} count number of filler elements\n * @param {Object} element element to fill with\n * @param {Boolean} start fill at start?\n */\nfunction fillArray(array, count, element, start=false) {\n\tif(!element) {\n\t\telement = start ? array[0] : array[array.length - 1];\n\t}\n\tlet fillerArray = new Array(Math.abs(count)).fill(element);\n\tarray = start ? fillerArray.concat(array) : array.concat(fillerArray);\n\treturn array;\n}\n\n/**\n * Returns pixel width of string.\n * @param {String} string\n * @param {Number} charWidth Width of single char in pixels\n */\nfunction getStringWidth(string, charWidth) {\n\treturn (string+\"\").length * charWidth;\n}\n\n\n\n// https://stackoverflow.com/a/29325222\n\n\nfunction getPositionByAngle(angle, radius) {\n\treturn {\n\t\tx: Math.sin(angle * ANGLE_RATIO) * radius,\n\t\ty: Math.cos(angle * ANGLE_RATIO) * radius,\n\t};\n}\n\n/**\n * Check if a number is valid for svg attributes\n * @param {object} candidate Candidate to test\n * @param {Boolean} nonNegative flag to treat negative number as invalid\n */\nfunction isValidNumber(candidate, nonNegative=false) {\n\tif (Number.isNaN(candidate)) return false;\n\telse if (candidate === undefined) return false;\n\telse if (!Number.isFinite(candidate)) return false;\n\telse if (nonNegative && candidate < 0) return false;\n\telse return true;\n}\n\n/**\n * Round a number to the closes precision, max max precision 4\n * @param {Number} d Any Number\n */\nfunction round(d) {\n\t// https://floating-point-gui.de/\n\t// https://www.jacklmoore.com/notes/rounding-in-javascript/\n\treturn Number(Math.round(d + 'e4') + 'e-4');\n}\n\n/**\n * Creates a deep clone of an object\n * @param {Object} candidate Any Object\n */\n function deepClone(candidate) {\n\tlet cloned, value, key;\n \n\tif (candidate instanceof Date) {\n\t return new Date(candidate.getTime());\n\t}\n \n\tif (typeof candidate !== \"object\" || candidate === null) {\n\t return candidate;\n\t}\n \n\tcloned = Array.isArray(candidate) ? [] : {};\n \n\tfor (key in candidate) {\n\t value = candidate[key];\n \n\t cloned[key] = deepClone(value);\n\t}\n \n\treturn cloned;\n }\n\nfunction getBarHeightAndYAttr(yTop, zeroLine) {\n\tlet height, y;\n\tif (yTop <= zeroLine) {\n\t\theight = zeroLine - yTop;\n\t\ty = yTop;\n\t} else {\n\t\theight = yTop - zeroLine;\n\t\ty = zeroLine;\n\t}\n\n\treturn [height, y];\n}\n\nfunction equilizeNoOfElements(array1, array2,\n\textraCount = array2.length - array1.length) {\n\n\t// Doesn't work if either has zero elements.\n\tif(extraCount > 0) {\n\t\tarray1 = fillArray(array1, extraCount);\n\t} else {\n\t\tarray2 = fillArray(array2, extraCount);\n\t}\n\treturn [array1, array2];\n}\n\nfunction truncateString(txt, len) {\n\tif (!txt) {\n\t\treturn;\n\t}\n\tif (txt.length > len) {\n\t\treturn txt.slice(0, len-3) + '...';\n\t} else {\n\t\treturn txt;\n\t}\n}\n\nfunction shortenLargeNumber(label) {\n\tlet number;\n\tif (typeof label === 'number') number = label;\n\telse if (typeof label === 'string') {\n\t\tnumber = Number(label);\n\t\tif (Number.isNaN(number)) return label;\n\t}\n\n\t// Using absolute since log wont work for negative numbers\n\tlet p = Math.floor(Math.log10(Math.abs(number)));\n\tif (p <= 2) return number; // Return as is for a 3 digit number of less\n\tlet\tl = Math.floor(p / 3);\n\tlet shortened = (Math.pow(10, p - l * 3) * +(number / Math.pow(10, p)).toFixed(1));\n\n\t// Correct for floating point error upto 2 decimal places\n\treturn Math.round(shortened*100)/100 + ' ' + ['', 'K', 'M', 'B', 'T'][l];\n}\n\n// cubic bezier curve calculation (from example by François Romain)\nfunction getSplineCurvePointsStr(xList, yList) {\n\n\tlet points=[];\n\tfor(let i=0;i {\n\t\tlet lengthX = pointB[0] - pointA[0];\n\t\tlet lengthY = pointB[1] - pointA[1];\n\t\treturn {\n\t\t\tlength: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),\n\t\t\tangle: Math.atan2(lengthY, lengthX)\n\t\t};\n\t};\n \n\tlet controlPoint = (current, previous, next, reverse) => {\n\t\tlet p = previous || current;\n\t\tlet n = next || current;\n\t\tlet o = line(p, n);\n\t\tlet angle = o.angle + (reverse ? Math.PI : 0);\n\t\tlet length = o.length * smoothing;\n\t\tlet x = current[0] + Math.cos(angle) * length;\n\t\tlet y = current[1] + Math.sin(angle) * length;\n\t\treturn [x, y];\n\t};\n \n\tlet bezierCommand = (point, i, a) => {\n\t\tlet cps = controlPoint(a[i - 1], a[i - 2], point);\n\t\tlet cpe = controlPoint(point, a[i - 1], a[i + 1], true);\n\t\treturn `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;\n\t};\n \n\tlet pointStr = (points, command) => {\n\t\treturn points.reduce((acc, point, i, a) => i === 0\n\t\t\t? `${point[0]},${point[1]}`\n\t\t\t: `${acc} ${command(point, i, a)}`, '');\n\t};\n \n\treturn pointStr(points, bezierCommand);\n}\n\nconst PRESET_COLOR_MAP = {\n\t'light-blue': '#7cd6fd',\n\t'blue': '#5e64ff',\n\t'violet': '#743ee2',\n\t'red': '#ff5858',\n\t'orange': '#ffa00a',\n\t'yellow': '#feef72',\n\t'green': '#28a745',\n\t'light-green': '#98d85b',\n\t'purple': '#b554ff',\n\t'magenta': '#ffa3ef',\n\t'black': '#36114C',\n\t'grey': '#bdd3e6',\n\t'light-grey': '#f0f4f7',\n\t'dark-grey': '#b8c2cc'\n};\n\nfunction limitColor(r){\n\tif (r > 255) return 255;\n\telse if (r < 0) return 0;\n\treturn r;\n}\n\nfunction lightenDarkenColor(color, amt) {\n\tlet col = getColor(color);\n\tlet usePound = false;\n\tif (col[0] == \"#\") {\n\t\tcol = col.slice(1);\n\t\tusePound = true;\n\t}\n\tlet num = parseInt(col,16);\n\tlet r = limitColor((num >> 16) + amt);\n\tlet b = limitColor(((num >> 8) & 0x00FF) + amt);\n\tlet g = limitColor((num & 0x0000FF) + amt);\n\treturn (usePound?\"#\":\"\") + (g | (b << 8) | (r << 16)).toString(16);\n}\n\nfunction isValidColor(string) {\n\t// https://stackoverflow.com/a/32685393\n\tlet HEX_RE = /(^\\s*)(#)((?:[A-Fa-f0-9]{3}){1,2})$/i;\n\tlet RGB_RE = /(^\\s*)(rgb|hsl)(a?)[(]\\s*([\\d.]+\\s*%?)\\s*,\\s*([\\d.]+\\s*%?)\\s*,\\s*([\\d.]+\\s*%?)\\s*(?:,\\s*([\\d.]+)\\s*)?[)]$/i;\n\treturn HEX_RE.test(string) || RGB_RE.test(string);\n}\n\nconst getColor = (color) => {\n\t// When RGB color, convert to hexadecimal (alpha value is omitted)\n\tif((/rgb[a]{0,1}\\([\\d, ]+\\)/gim).test(color)) {\n\t\treturn (/\\D+(\\d*)\\D+(\\d*)\\D+(\\d*)/gim).exec(color)\n\t\t\t.map((x, i) => (i !== 0 ? Number(x).toString(16) : '#'))\n\t\t\t.reduce((c, ch) => `${c}${ch}`);\n\t}\n\treturn PRESET_COLOR_MAP[color] || color;\n};\n\nconst AXIS_TICK_LENGTH = 6;\nconst LABEL_MARGIN = 4;\nconst LABEL_MAX_CHARS = 15;\nconst FONT_SIZE = 10;\nconst BASE_LINE_COLOR = '#dadada';\nconst FONT_FILL = '#555b51';\n\nfunction $$1(expr, con) {\n\treturn typeof expr === \"string\"? (con || document).querySelector(expr) : expr || null;\n}\n\nfunction createSVG(tag, o) {\n\tvar element = document.createElementNS(\"http://www.w3.org/2000/svg\", tag);\n\n\tfor (var i in o) {\n\t\tvar val = o[i];\n\n\t\tif (i === \"inside\") {\n\t\t\t$$1(val).appendChild(element);\n\t\t}\n\t\telse if (i === \"around\") {\n\t\t\tvar ref = $$1(val);\n\t\t\tref.parentNode.insertBefore(element, ref);\n\t\t\telement.appendChild(ref);\n\n\t\t} else if (i === \"styles\") {\n\t\t\tif(typeof val === \"object\") {\n\t\t\t\tObject.keys(val).map(prop => {\n\t\t\t\t\telement.style[prop] = val[prop];\n\t\t\t\t});\n\t\t\t}\n\t\t} else {\n\t\t\tif(i === \"className\") { i = \"class\"; }\n\t\t\tif(i === \"innerHTML\") {\n\t\t\t\telement['textContent'] = val;\n\t\t\t} else {\n\t\t\t\telement.setAttribute(i, val);\n\t\t\t}\n\t\t}\n\t}\n\n\treturn element;\n}\n\nfunction renderVerticalGradient(svgDefElem, gradientId) {\n\treturn createSVG('linearGradient', {\n\t\tinside: svgDefElem,\n\t\tid: gradientId,\n\t\tx1: 0,\n\t\tx2: 0,\n\t\ty1: 0,\n\t\ty2: 1\n\t});\n}\n\nfunction setGradientStop(gradElem, offset, color, opacity) {\n\treturn createSVG('stop', {\n\t\t'inside': gradElem,\n\t\t'style': `stop-color: ${color}`,\n\t\t'offset': offset,\n\t\t'stop-opacity': opacity\n\t});\n}\n\nfunction makeSVGContainer(parent, className, width, height) {\n\treturn createSVG('svg', {\n\t\tclassName: className,\n\t\tinside: parent,\n\t\twidth: width,\n\t\theight: height\n\t});\n}\n\nfunction makeSVGDefs(svgContainer) {\n\treturn createSVG('defs', {\n\t\tinside: svgContainer,\n\t});\n}\n\nfunction makeSVGGroup(className, transform='', parent=undefined) {\n\tlet args = {\n\t\tclassName: className,\n\t\ttransform: transform\n\t};\n\tif(parent) args.inside = parent;\n\treturn createSVG('g', args);\n}\n\n\n\nfunction makePath(pathStr, className='', stroke='none', fill='none', strokeWidth=2) {\n\treturn createSVG('path', {\n\t\tclassName: className,\n\t\td: pathStr,\n\t\tstyles: {\n\t\t\tstroke: stroke,\n\t\t\tfill: fill,\n\t\t\t'stroke-width': strokeWidth\n\t\t}\n\t});\n}\n\nfunction makeArcPathStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){\n\tlet [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];\n\tlet [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y];\n\treturn `M${center.x} ${center.y}\n\t\tL${arcStartX} ${arcStartY}\n\t\tA ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}\n\t\t${arcEndX} ${arcEndY} z`;\n}\n\nfunction makeCircleStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){\n\tlet [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];\n\tlet [arcEndX, midArc, arcEndY] = [center.x + endPosition.x, center.y * 2, center.y + endPosition.y];\n\treturn `M${center.x} ${center.y}\n\t\tL${arcStartX} ${arcStartY}\n\t\tA ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}\n\t\t${arcEndX} ${midArc} z\n\t\tL${arcStartX} ${midArc}\n\t\tA ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}\n\t\t${arcEndX} ${arcEndY} z`;\n}\n\nfunction makeArcStrokePathStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){\n\tlet [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];\n\tlet [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y];\n\n\treturn `M${arcStartX} ${arcStartY}\n\t\tA ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}\n\t\t${arcEndX} ${arcEndY}`;\n}\n\nfunction makeStrokeCircleStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){\n\tlet [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];\n\tlet [arcEndX, midArc, arcEndY] = [center.x + endPosition.x, radius * 2 + arcStartY, center.y + startPosition.y];\n\n\treturn `M${arcStartX} ${arcStartY}\n\t\tA ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}\n\t\t${arcEndX} ${midArc}\n\t\tM${arcStartX} ${midArc}\n\t\tA ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}\n\t\t${arcEndX} ${arcEndY}`;\n}\n\nfunction makeGradient(svgDefElem, color, lighter = false) {\n\tlet gradientId ='path-fill-gradient' + '-' + color + '-' +(lighter ? 'lighter' : 'default');\n\tlet gradientDef = renderVerticalGradient(svgDefElem, gradientId);\n\tlet opacities = [1, 0.6, 0.2];\n\tif(lighter) {\n\t\topacities = [0.4, 0.2, 0];\n\t}\n\n\tsetGradientStop(gradientDef, \"0%\", color, opacities[0]);\n\tsetGradientStop(gradientDef, \"50%\", color, opacities[1]);\n\tsetGradientStop(gradientDef, \"100%\", color, opacities[2]);\n\n\treturn gradientId;\n}\n\nfunction percentageBar(x, y, width, height,\n\tdepth=PERCENTAGE_BAR_DEFAULT_DEPTH, fill='none') {\n\n\tlet args = {\n\t\tclassName: 'percentage-bar',\n\t\tx: x,\n\t\ty: y,\n\t\twidth: width,\n\t\theight: height,\n\t\tfill: fill,\n\t\tstyles: {\n\t\t\t'stroke': lightenDarkenColor(fill, -25),\n\t\t\t// Diabolically good: https://stackoverflow.com/a/9000859\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\n\t\t\t'stroke-dasharray': `0, ${height + width}, ${width}, ${height}`,\n\t\t\t'stroke-width': depth\n\t\t},\n\t};\n\n\treturn createSVG(\"rect\", args);\n}\n\nfunction heatSquare(className, x, y, size, radius, fill='none', data={}) {\n\tlet args = {\n\t\tclassName: className,\n\t\tx: x,\n\t\ty: y,\n\t\twidth: size,\n\t\theight: size,\n\t\trx: radius,\n\t\tfill: fill\n\t};\n\n\tObject.keys(data).map(key => {\n\t\targs[key] = data[key];\n\t});\n\n\treturn createSVG(\"rect\", args);\n}\n\nfunction legendBar(x, y, size, fill='none', label, truncate=false) {\n\tlabel = truncate ? truncateString(label, LABEL_MAX_CHARS) : label;\n\n\tlet args = {\n\t\tclassName: 'legend-bar',\n\t\tx: 0,\n\t\ty: 0,\n\t\twidth: size,\n\t\theight: '2px',\n\t\tfill: fill\n\t};\n\tlet text = createSVG('text', {\n\t\tclassName: 'legend-dataset-text',\n\t\tx: 0,\n\t\ty: 0,\n\t\tdy: (FONT_SIZE * 2) + 'px',\n\t\t'font-size': (FONT_SIZE * 1.2) + 'px',\n\t\t'text-anchor': 'start',\n\t\tfill: FONT_FILL,\n\t\tinnerHTML: label\n\t});\n\n\tlet group = createSVG('g', {\n\t\ttransform: `translate(${x}, ${y})`\n\t});\n\tgroup.appendChild(createSVG(\"rect\", args));\n\tgroup.appendChild(text);\n\n\treturn group;\n}\n\nfunction legendDot(x, y, size, fill='none', label, truncate=false) {\n\tlabel = truncate ? truncateString(label, LABEL_MAX_CHARS) : label;\n\n\tlet args = {\n\t\tclassName: 'legend-dot',\n\t\tcx: 0,\n\t\tcy: 0,\n\t\tr: size,\n\t\tfill: fill\n\t};\n\tlet text = createSVG('text', {\n\t\tclassName: 'legend-dataset-text',\n\t\tx: 0,\n\t\ty: 0,\n\t\tdx: (FONT_SIZE) + 'px',\n\t\tdy: (FONT_SIZE/3) + 'px',\n\t\t'font-size': (FONT_SIZE * 1.2) + 'px',\n\t\t'text-anchor': 'start',\n\t\tfill: FONT_FILL,\n\t\tinnerHTML: label\n\t});\n\n\tlet group = createSVG('g', {\n\t\ttransform: `translate(${x}, ${y})`\n\t});\n\tgroup.appendChild(createSVG(\"circle\", args));\n\tgroup.appendChild(text);\n\n\treturn group;\n}\n\nfunction makeText(className, x, y, content, options = {}) {\n\tlet fontSize = options.fontSize || FONT_SIZE;\n\tlet dy = options.dy !== undefined ? options.dy : (fontSize / 2);\n\tlet fill = options.fill || FONT_FILL;\n\tlet textAnchor = options.textAnchor || 'start';\n\treturn createSVG('text', {\n\t\tclassName: className,\n\t\tx: x,\n\t\ty: y,\n\t\tdy: dy + 'px',\n\t\t'font-size': fontSize + 'px',\n\t\tfill: fill,\n\t\t'text-anchor': textAnchor,\n\t\tinnerHTML: content\n\t});\n}\n\nfunction makeVertLine(x, label, y1, y2, options={}) {\n\tif(!options.stroke) options.stroke = BASE_LINE_COLOR;\n\tlet l = createSVG('line', {\n\t\tclassName: 'line-vertical ' + options.className,\n\t\tx1: 0,\n\t\tx2: 0,\n\t\ty1: y1,\n\t\ty2: y2,\n\t\tstyles: {\n\t\t\tstroke: options.stroke\n\t\t}\n\t});\n\n\tlet text = createSVG('text', {\n\t\tx: 0,\n\t\ty: y1 > y2 ? y1 + LABEL_MARGIN : y1 - LABEL_MARGIN - FONT_SIZE,\n\t\tdy: FONT_SIZE + 'px',\n\t\t'font-size': FONT_SIZE + 'px',\n\t\t'text-anchor': 'middle',\n\t\tinnerHTML: label + \"\"\n\t});\n\n\tlet line = createSVG('g', {\n\t\ttransform: `translate(${ x }, 0)`\n\t});\n\n\tline.appendChild(l);\n\tline.appendChild(text);\n\n\treturn line;\n}\n\nfunction makeHoriLine(y, label, x1, x2, options={}) {\n\tif(!options.stroke) options.stroke = BASE_LINE_COLOR;\n\tif(!options.lineType) options.lineType = '';\n\tif (options.shortenNumbers) label = shortenLargeNumber(label);\n\n\tlet className = 'line-horizontal ' + options.className +\n\t\t(options.lineType === \"dashed\" ? \"dashed\": \"\");\n\n\tlet l = createSVG('line', {\n\t\tclassName: className,\n\t\tx1: x1,\n\t\tx2: x2,\n\t\ty1: 0,\n\t\ty2: 0,\n\t\tstyles: {\n\t\t\tstroke: options.stroke\n\t\t}\n\t});\n\n\tlet text = createSVG('text', {\n\t\tx: x1 < x2 ? x1 - LABEL_MARGIN : x1 + LABEL_MARGIN,\n\t\ty: 0,\n\t\tdy: (FONT_SIZE / 2 - 2) + 'px',\n\t\t'font-size': FONT_SIZE + 'px',\n\t\t'text-anchor': x1 < x2 ? 'end' : 'start',\n\t\tinnerHTML: label+\"\"\n\t});\n\n\tlet line = createSVG('g', {\n\t\ttransform: `translate(0, ${y})`,\n\t\t'stroke-opacity': 1\n\t});\n\n\tif(text === 0 || text === '0') {\n\t\tline.style.stroke = \"rgba(27, 31, 35, 0.6)\";\n\t}\n\n\tline.appendChild(l);\n\tline.appendChild(text);\n\n\treturn line;\n}\n\nfunction yLine(y, label, width, options={}) {\n\tif (!isValidNumber(y)) y = 0;\n\n\tif(!options.pos) options.pos = 'left';\n\tif(!options.offset) options.offset = 0;\n\tif(!options.mode) options.mode = 'span';\n\tif(!options.stroke) options.stroke = BASE_LINE_COLOR;\n\tif(!options.className) options.className = '';\n\n\tlet x1 = -1 * AXIS_TICK_LENGTH;\n\tlet x2 = options.mode === 'span' ? width + AXIS_TICK_LENGTH : 0;\n\n\tif(options.mode === 'tick' && options.pos === 'right') {\n\t\tx1 = width + AXIS_TICK_LENGTH;\n\t\tx2 = width;\n\t}\n\n\t// let offset = options.pos === 'left' ? -1 * options.offset : options.offset;\n\n\tx1 += options.offset;\n\tx2 += options.offset;\n\n\treturn makeHoriLine(y, label, x1, x2, {\n\t\tstroke: options.stroke,\n\t\tclassName: options.className,\n\t\tlineType: options.lineType,\n\t\tshortenNumbers: options.shortenNumbers\n\t});\n}\n\nfunction xLine(x, label, height, options={}) {\n\tif (!isValidNumber(x)) x = 0;\n\n\tif(!options.pos) options.pos = 'bottom';\n\tif(!options.offset) options.offset = 0;\n\tif(!options.mode) options.mode = 'span';\n\tif(!options.stroke) options.stroke = BASE_LINE_COLOR;\n\tif(!options.className) options.className = '';\n\n\t// Draw X axis line in span/tick mode with optional label\n\t// \ty2(span)\n\t// \t\t\t\t\t\t|\n\t// \t\t\t\t\t\t|\n\t//\t\t\t\tx line\t|\n\t//\t\t\t\t\t\t|\n\t// \t\t\t\t\t \t|\n\t// ---------------------+-- y2(tick)\n\t//\t\t\t\t\t\t|\n\t//\t\t\t\t\t\t\ty1\n\n\tlet y1 = height + AXIS_TICK_LENGTH;\n\tlet y2 = options.mode === 'span' ? -1 * AXIS_TICK_LENGTH : height;\n\n\tif(options.mode === 'tick' && options.pos === 'top') {\n\t\t// top axis ticks\n\t\ty1 = -1 * AXIS_TICK_LENGTH;\n\t\ty2 = 0;\n\t}\n\n\treturn makeVertLine(x, label, y1, y2, {\n\t\tstroke: options.stroke,\n\t\tclassName: options.className,\n\t\tlineType: options.lineType\n\t});\n}\n\nfunction yMarker(y, label, width, options={}) {\n\tif(!options.labelPos) options.labelPos = 'right';\n\tlet x = options.labelPos === 'left' ? LABEL_MARGIN\n\t\t: width - getStringWidth(label, 5) - LABEL_MARGIN;\n\n\tlet labelSvg = createSVG('text', {\n\t\tclassName: 'chart-label',\n\t\tx: x,\n\t\ty: 0,\n\t\tdy: (FONT_SIZE / -2) + 'px',\n\t\t'font-size': FONT_SIZE + 'px',\n\t\t'text-anchor': 'start',\n\t\tinnerHTML: label+\"\"\n\t});\n\n\tlet line = makeHoriLine(y, '', 0, width, {\n\t\tstroke: options.stroke || BASE_LINE_COLOR,\n\t\tclassName: options.className || '',\n\t\tlineType: options.lineType\n\t});\n\n\tline.appendChild(labelSvg);\n\n\treturn line;\n}\n\nfunction yRegion(y1, y2, width, label, options={}) {\n\t// return a group\n\tlet height = y1 - y2;\n\n\tlet rect = createSVG('rect', {\n\t\tclassName: `bar mini`, // remove class\n\t\tstyles: {\n\t\t\tfill: `rgba(228, 234, 239, 0.49)`,\n\t\t\tstroke: BASE_LINE_COLOR,\n\t\t\t'stroke-dasharray': `${width}, ${height}`\n\t\t},\n\t\t// 'data-point-index': index,\n\t\tx: 0,\n\t\ty: 0,\n\t\twidth: width,\n\t\theight: height\n\t});\n\n\tif(!options.labelPos) options.labelPos = 'right';\n\tlet x = options.labelPos === 'left' ? LABEL_MARGIN\n\t\t: width - getStringWidth(label+\"\", 4.5) - LABEL_MARGIN;\n\n\tlet labelSvg = createSVG('text', {\n\t\tclassName: 'chart-label',\n\t\tx: x,\n\t\ty: 0,\n\t\tdy: (FONT_SIZE / -2) + 'px',\n\t\t'font-size': FONT_SIZE + 'px',\n\t\t'text-anchor': 'start',\n\t\tinnerHTML: label+\"\"\n\t});\n\n\tlet region = createSVG('g', {\n\t\ttransform: `translate(0, ${y2})`\n\t});\n\n\tregion.appendChild(rect);\n\tregion.appendChild(labelSvg);\n\n\treturn region;\n}\n\nfunction datasetBar(x, yTop, width, color, label='', index=0, offset=0, meta={}) {\n\tlet [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine);\n\ty -= offset;\n\n\tif(height === 0) {\n\t\theight = meta.minHeight;\n\t\ty -= meta.minHeight;\n\t}\n\n\t// Preprocess numbers to avoid svg building errors\n\tif (!isValidNumber(x)) x = 0;\n\tif (!isValidNumber(y)) y = 0;\n\tif (!isValidNumber(height, true)) height = 0;\n\tif (!isValidNumber(width, true)) width = 0;\n\n\tlet rect = createSVG('rect', {\n\t\tclassName: `bar mini`,\n\t\tstyle: `fill: ${color}`,\n\t\t'data-point-index': index,\n\t\tx: x,\n\t\ty: y,\n\t\twidth: width,\n\t\theight: height\n\t});\n\n\tlabel += \"\";\n\n\tif(!label && !label.length) {\n\t\treturn rect;\n\t} else {\n\t\trect.setAttribute('y', 0);\n\t\trect.setAttribute('x', 0);\n\t\tlet text = createSVG('text', {\n\t\t\tclassName: 'data-point-value',\n\t\t\tx: width/2,\n\t\t\ty: 0,\n\t\t\tdy: (FONT_SIZE / 2 * -1) + 'px',\n\t\t\t'font-size': FONT_SIZE + 'px',\n\t\t\t'text-anchor': 'middle',\n\t\t\tinnerHTML: label\n\t\t});\n\n\t\tlet group = createSVG('g', {\n\t\t\t'data-point-index': index,\n\t\t\ttransform: `translate(${x}, ${y})`\n\t\t});\n\t\tgroup.appendChild(rect);\n\t\tgroup.appendChild(text);\n\n\t\treturn group;\n\t}\n}\n\nfunction datasetDot(x, y, radius, color, label='', index=0) {\n\tlet dot = createSVG('circle', {\n\t\tstyle: `fill: ${color}`,\n\t\t'data-point-index': index,\n\t\tcx: x,\n\t\tcy: y,\n\t\tr: radius\n\t});\n\n\tlabel += \"\";\n\n\tif(!label && !label.length) {\n\t\treturn dot;\n\t} else {\n\t\tdot.setAttribute('cy', 0);\n\t\tdot.setAttribute('cx', 0);\n\n\t\tlet text = createSVG('text', {\n\t\t\tclassName: 'data-point-value',\n\t\t\tx: 0,\n\t\t\ty: 0,\n\t\t\tdy: (FONT_SIZE / 2 * -1 - radius) + 'px',\n\t\t\t'font-size': FONT_SIZE + 'px',\n\t\t\t'text-anchor': 'middle',\n\t\t\tinnerHTML: label\n\t\t});\n\n\t\tlet group = createSVG('g', {\n\t\t\t'data-point-index': index,\n\t\t\ttransform: `translate(${x}, ${y})`\n\t\t});\n\t\tgroup.appendChild(dot);\n\t\tgroup.appendChild(text);\n\n\t\treturn group;\n\t}\n}\n\nfunction getPaths(xList, yList, color, options={}, meta={}) {\n\tlet pointsList = yList.map((y, i) => (xList[i] + ',' + y));\n\tlet pointsStr = pointsList.join(\"L\");\n\n\t// Spline\n\tif (options.spline)\n\t\tpointsStr = getSplineCurvePointsStr(xList, yList);\n\n\tlet path = makePath(\"M\"+pointsStr, 'line-graph-path', color);\n\n\t// HeatLine\n\tif(options.heatline) {\n\t\tlet gradient_id = makeGradient(meta.svgDefs, color);\n\t\tpath.style.stroke = `url(#${gradient_id})`;\n\t}\n\n\tlet paths = {\n\t\tpath: path\n\t};\n\n\t// Region\n\tif(options.regionFill) {\n\t\tlet gradient_id_region = makeGradient(meta.svgDefs, color, true);\n\n\t\tlet pathStr = \"M\" + `${xList[0]},${meta.zeroLine}L` + pointsStr + `L${xList.slice(-1)[0]},${meta.zeroLine}`;\n\t\tpaths.region = makePath(pathStr, `region-fill`, 'none', `url(#${gradient_id_region})`);\n\t}\n\n\treturn paths;\n}\n\nlet makeOverlay = {\n\t'bar': (unit) => {\n\t\tlet transformValue;\n\t\tif(unit.nodeName !== 'rect') {\n\t\t\ttransformValue = unit.getAttribute('transform');\n\t\t\tunit = unit.childNodes[0];\n\t\t}\n\t\tlet overlay = unit.cloneNode();\n\t\toverlay.style.fill = '#000000';\n\t\toverlay.style.opacity = '0.4';\n\n\t\tif(transformValue) {\n\t\t\toverlay.setAttribute('transform', transformValue);\n\t\t}\n\t\treturn overlay;\n\t},\n\n\t'dot': (unit) => {\n\t\tlet transformValue;\n\t\tif(unit.nodeName !== 'circle') {\n\t\t\ttransformValue = unit.getAttribute('transform');\n\t\t\tunit = unit.childNodes[0];\n\t\t}\n\t\tlet overlay = unit.cloneNode();\n\t\tlet radius = unit.getAttribute('r');\n\t\tlet fill = unit.getAttribute('fill');\n\t\toverlay.setAttribute('r', parseInt(radius) + DOT_OVERLAY_SIZE_INCR);\n\t\toverlay.setAttribute('fill', fill);\n\t\toverlay.style.opacity = '0.6';\n\n\t\tif(transformValue) {\n\t\t\toverlay.setAttribute('transform', transformValue);\n\t\t}\n\t\treturn overlay;\n\t},\n\n\t'heat_square': (unit) => {\n\t\tlet transformValue;\n\t\tif(unit.nodeName !== 'circle') {\n\t\t\ttransformValue = unit.getAttribute('transform');\n\t\t\tunit = unit.childNodes[0];\n\t\t}\n\t\tlet overlay = unit.cloneNode();\n\t\tlet radius = unit.getAttribute('r');\n\t\tlet fill = unit.getAttribute('fill');\n\t\toverlay.setAttribute('r', parseInt(radius) + DOT_OVERLAY_SIZE_INCR);\n\t\toverlay.setAttribute('fill', fill);\n\t\toverlay.style.opacity = '0.6';\n\n\t\tif(transformValue) {\n\t\t\toverlay.setAttribute('transform', transformValue);\n\t\t}\n\t\treturn overlay;\n\t}\n};\n\nlet updateOverlay = {\n\t'bar': (unit, overlay) => {\n\t\tlet transformValue;\n\t\tif(unit.nodeName !== 'rect') {\n\t\t\ttransformValue = unit.getAttribute('transform');\n\t\t\tunit = unit.childNodes[0];\n\t\t}\n\t\tlet attributes = ['x', 'y', 'width', 'height'];\n\t\tObject.values(unit.attributes)\n\t\t\t.filter(attr => attributes.includes(attr.name) && attr.specified)\n\t\t\t.map(attr => {\n\t\t\t\toverlay.setAttribute(attr.name, attr.nodeValue);\n\t\t\t});\n\n\t\tif(transformValue) {\n\t\t\toverlay.setAttribute('transform', transformValue);\n\t\t}\n\t},\n\n\t'dot': (unit, overlay) => {\n\t\tlet transformValue;\n\t\tif(unit.nodeName !== 'circle') {\n\t\t\ttransformValue = unit.getAttribute('transform');\n\t\t\tunit = unit.childNodes[0];\n\t\t}\n\t\tlet attributes = ['cx', 'cy'];\n\t\tObject.values(unit.attributes)\n\t\t\t.filter(attr => attributes.includes(attr.name) && attr.specified)\n\t\t\t.map(attr => {\n\t\t\t\toverlay.setAttribute(attr.name, attr.nodeValue);\n\t\t\t});\n\n\t\tif(transformValue) {\n\t\t\toverlay.setAttribute('transform', transformValue);\n\t\t}\n\t},\n\n\t'heat_square': (unit, overlay) => {\n\t\tlet transformValue;\n\t\tif(unit.nodeName !== 'circle') {\n\t\t\ttransformValue = unit.getAttribute('transform');\n\t\t\tunit = unit.childNodes[0];\n\t\t}\n\t\tlet attributes = ['cx', 'cy'];\n\t\tObject.values(unit.attributes)\n\t\t\t.filter(attr => attributes.includes(attr.name) && attr.specified)\n\t\t\t.map(attr => {\n\t\t\t\toverlay.setAttribute(attr.name, attr.nodeValue);\n\t\t\t});\n\n\t\tif(transformValue) {\n\t\t\toverlay.setAttribute('transform', transformValue);\n\t\t}\n\t},\n};\n\nconst UNIT_ANIM_DUR = 350;\nconst PATH_ANIM_DUR = 350;\nconst MARKER_LINE_ANIM_DUR = UNIT_ANIM_DUR;\nconst REPLACE_ALL_NEW_DUR = 250;\n\nconst STD_EASING = 'easein';\n\nfunction translate(unit, oldCoord, newCoord, duration) {\n\tlet old = typeof oldCoord === 'string' ? oldCoord : oldCoord.join(', ');\n\treturn [\n\t\tunit,\n\t\t{transform: newCoord.join(', ')},\n\t\tduration,\n\t\tSTD_EASING,\n\t\t\"translate\",\n\t\t{transform: old}\n\t];\n}\n\nfunction translateVertLine(xLine, newX, oldX) {\n\treturn translate(xLine, [oldX, 0], [newX, 0], MARKER_LINE_ANIM_DUR);\n}\n\nfunction translateHoriLine(yLine, newY, oldY) {\n\treturn translate(yLine, [0, oldY], [0, newY], MARKER_LINE_ANIM_DUR);\n}\n\nfunction animateRegion(rectGroup, newY1, newY2, oldY2) {\n\tlet newHeight = newY1 - newY2;\n\tlet rect = rectGroup.childNodes[0];\n\tlet width = rect.getAttribute(\"width\");\n\tlet rectAnim = [\n\t\trect,\n\t\t{ height: newHeight, 'stroke-dasharray': `${width}, ${newHeight}` },\n\t\tMARKER_LINE_ANIM_DUR,\n\t\tSTD_EASING\n\t];\n\n\tlet groupAnim = translate(rectGroup, [0, oldY2], [0, newY2], MARKER_LINE_ANIM_DUR);\n\treturn [rectAnim, groupAnim];\n}\n\nfunction animateBar(bar, x, yTop, width, offset=0, meta={}) {\n\tlet [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine);\n\ty -= offset;\n\tif(bar.nodeName !== 'rect') {\n\t\tlet rect = bar.childNodes[0];\n\t\tlet rectAnim = [\n\t\t\trect,\n\t\t\t{width: width, height: height},\n\t\t\tUNIT_ANIM_DUR,\n\t\t\tSTD_EASING\n\t\t];\n\n\t\tlet oldCoordStr = bar.getAttribute(\"transform\").split(\"(\")[1].slice(0, -1);\n\t\tlet groupAnim = translate(bar, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);\n\t\treturn [rectAnim, groupAnim];\n\t} else {\n\t\treturn [[bar, {width: width, height: height, x: x, y: y}, UNIT_ANIM_DUR, STD_EASING]];\n\t}\n\t// bar.animate({height: args.newHeight, y: yTop}, UNIT_ANIM_DUR, mina.easein);\n}\n\nfunction animateDot(dot, x, y) {\n\tif(dot.nodeName !== 'circle') {\n\t\tlet oldCoordStr = dot.getAttribute(\"transform\").split(\"(\")[1].slice(0, -1);\n\t\tlet groupAnim = translate(dot, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);\n\t\treturn [groupAnim];\n\t} else {\n\t\treturn [[dot, {cx: x, cy: y}, UNIT_ANIM_DUR, STD_EASING]];\n\t}\n\t// dot.animate({cy: yTop}, UNIT_ANIM_DUR, mina.easein);\n}\n\nfunction animatePath(paths, newXList, newYList, zeroLine, spline) {\n\tlet pathComponents = [];\n\tlet pointsStr = newYList.map((y, i) => (newXList[i] + ',' + y)).join(\"L\");\n\n\tif (spline)\n\t\tpointsStr = getSplineCurvePointsStr(newXList, newYList);\n\n\tconst animPath = [paths.path, {d:\"M\" + pointsStr}, PATH_ANIM_DUR, STD_EASING];\n\tpathComponents.push(animPath);\n\n\tif(paths.region) {\n\t\tlet regStartPt = `${newXList[0]},${zeroLine}L`;\n\t\tlet regEndPt = `L${newXList.slice(-1)[0]}, ${zeroLine}`;\n\n\t\tconst animRegion = [\n\t\t\tpaths.region,\n\t\t\t{d:\"M\" + regStartPt + pointsStr + regEndPt},\n\t\t\tPATH_ANIM_DUR,\n\t\t\tSTD_EASING\n\t\t];\n\t\tpathComponents.push(animRegion);\n\t}\n\n\treturn pathComponents;\n}\n\nfunction animatePathStr(oldPath, pathStr) {\n\treturn [oldPath, {d: pathStr}, UNIT_ANIM_DUR, STD_EASING];\n}\n\n// Leveraging SMIL Animations\n\nconst EASING = {\n\tease: \"0.25 0.1 0.25 1\",\n\tlinear: \"0 0 1 1\",\n\t// easein: \"0.42 0 1 1\",\n\teasein: \"0.1 0.8 0.2 1\",\n\teaseout: \"0 0 0.58 1\",\n\teaseinout: \"0.42 0 0.58 1\"\n};\n\nfunction animateSVGElement(element, props, dur, easingType=\"linear\", type=undefined, oldValues={}) {\n\n\tlet animElement = element.cloneNode(true);\n\tlet newElement = element.cloneNode(true);\n\n\tfor(var attributeName in props) {\n\t\tlet animateElement;\n\t\tif(attributeName === 'transform') {\n\t\t\tanimateElement = document.createElementNS(\"http://www.w3.org/2000/svg\", \"animateTransform\");\n\t\t} else {\n\t\t\tanimateElement = document.createElementNS(\"http://www.w3.org/2000/svg\", \"animate\");\n\t\t}\n\t\tlet currentValue = oldValues[attributeName] || element.getAttribute(attributeName);\n\t\tlet value = props[attributeName];\n\n\t\tlet animAttr = {\n\t\t\tattributeName: attributeName,\n\t\t\tfrom: currentValue,\n\t\t\tto: value,\n\t\t\tbegin: \"0s\",\n\t\t\tdur: dur/1000 + \"s\",\n\t\t\tvalues: currentValue + \";\" + value,\n\t\t\tkeySplines: EASING[easingType],\n\t\t\tkeyTimes: \"0;1\",\n\t\t\tcalcMode: \"spline\",\n\t\t\tfill: 'freeze'\n\t\t};\n\n\t\tif(type) {\n\t\t\tanimAttr[\"type\"] = type;\n\t\t}\n\n\t\tfor (var i in animAttr) {\n\t\t\tanimateElement.setAttribute(i, animAttr[i]);\n\t\t}\n\n\t\tanimElement.appendChild(animateElement);\n\n\t\tif(type) {\n\t\t\tnewElement.setAttribute(attributeName, `translate(${value})`);\n\t\t} else {\n\t\t\tnewElement.setAttribute(attributeName, value);\n\t\t}\n\t}\n\n\treturn [animElement, newElement];\n}\n\nfunction transform(element, style) { // eslint-disable-line no-unused-vars\n\telement.style.transform = style;\n\telement.style.webkitTransform = style;\n\telement.style.msTransform = style;\n\telement.style.mozTransform = style;\n\telement.style.oTransform = style;\n}\n\nfunction animateSVG(svgContainer, elements) {\n\tlet newElements = [];\n\tlet animElements = [];\n\n\telements.map(element => {\n\t\tlet unit = element[0];\n\t\tlet parent = unit.parentNode;\n\n\t\tlet animElement, newElement;\n\n\t\telement[0] = unit;\n\t\t[animElement, newElement] = animateSVGElement(...element);\n\n\t\tnewElements.push(newElement);\n\t\tanimElements.push([animElement, parent]);\n\t\t\n\t\tif (parent) {\n\t\t\tparent.replaceChild(animElement, unit);\n\t\t}\n\t});\n\n\tlet animSvg = svgContainer.cloneNode(true);\n\n\tanimElements.map((animElement, i) => {\n\t\tif (animElement[1]) {\n\t\t\tanimElement[1].replaceChild(newElements[i], animElement[0]);\n\t\t\telements[i][0] = newElements[i];\n\t\t}\n\t});\n\n\treturn animSvg;\n}\n\nfunction runSMILAnimation(parent, svgElement, elementsToAnimate) {\n\tif(elementsToAnimate.length === 0) return;\n\n\tlet animSvgElement = animateSVG(svgElement, elementsToAnimate);\n\tif(svgElement.parentNode == parent) {\n\t\tparent.removeChild(svgElement);\n\t\tparent.appendChild(animSvgElement);\n\n\t}\n\n\t// Replace the new svgElement (data has already been replaced)\n\tsetTimeout(() => {\n\t\tif(animSvgElement.parentNode == parent) {\n\t\t\tparent.removeChild(animSvgElement);\n\t\t\tparent.appendChild(svgElement);\n\t\t}\n\t}, REPLACE_ALL_NEW_DUR);\n}\n\nconst 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}\";\n\nfunction downloadFile(filename, data) {\n\tvar a = document.createElement('a');\n\ta.style = \"display: none\";\n\tvar blob = new Blob(data, {type: \"image/svg+xml; charset=utf-8\"});\n\tvar url = window.URL.createObjectURL(blob);\n\ta.href = url;\n\ta.download = filename;\n\tdocument.body.appendChild(a);\n\ta.click();\n\tsetTimeout(function(){\n\t\tdocument.body.removeChild(a);\n\t\twindow.URL.revokeObjectURL(url);\n\t}, 300);\n}\n\nfunction prepareForExport(svg) {\n\tlet clone = svg.cloneNode(true);\n\tclone.classList.add('chart-container');\n\tclone.setAttribute('xmlns', \"http://www.w3.org/2000/svg\");\n\tclone.setAttribute('xmlns:xlink', \"http://www.w3.org/1999/xlink\");\n\tlet styleEl = $.create('style', {\n\t\t'innerHTML': CSSTEXT\n\t});\n\tclone.insertBefore(styleEl, clone.firstChild);\n\n\tlet container = $.create('div');\n\tcontainer.appendChild(clone);\n\n\treturn container.innerHTML;\n}\n\nclass BaseChart {\n\tconstructor(parent, options) {\n\t\t// deepclone options to avoid making changes to orignal object\n\t\toptions = deepClone(options);\n\n\t\tthis.parent = typeof parent === 'string'\n\t\t\t? document.querySelector(parent)\n\t\t\t: parent;\n\n\t\tif (!(this.parent instanceof HTMLElement)) {\n\t\t\tthrow new Error('No `parent` element to render on was provided.');\n\t\t}\n\n\t\tthis.rawChartArgs = options;\n\n\t\tthis.title = options.title || '';\n\t\tthis.type = options.type || '';\n\n\t\tthis.realData = this.prepareData(options.data);\n\t\tthis.data = this.prepareFirstData(this.realData);\n\n\t\tthis.colors = this.validateColors(options.colors, this.type);\n\n\t\tthis.config = {\n\t\t\tshowTooltip: 1, // calculate\n\t\t\tshowLegend: 1, // calculate\n\t\t\tisNavigable: options.isNavigable || 0,\n\t\t\tanimate: (typeof options.animate !== 'undefined') ? options.animate : 1,\n\t\t\ttruncateLegends: options.truncateLegends || 1\n\t\t};\n\n\t\tthis.measures = JSON.parse(JSON.stringify(BASE_MEASURES));\n\t\tlet m = this.measures;\n\t\tthis.setMeasures(options);\n\t\tif(!this.title.length) { m.titleHeight = 0; }\n\t\tif(!this.config.showLegend) m.legendHeight = 0;\n\t\tthis.argHeight = options.height || m.baseHeight;\n\n\t\tthis.state = {};\n\t\tthis.options = {};\n\n\t\tthis.initTimeout = INIT_CHART_UPDATE_TIMEOUT;\n\n\t\tif(this.config.isNavigable) {\n\t\t\tthis.overlays = [];\n\t\t}\n\n\t\tthis.configure(options);\n\t}\n\n\tprepareData(data) {\n\t\treturn data;\n\t}\n\n\tprepareFirstData(data) {\n\t\treturn data;\n\t}\n\n\tvalidateColors(colors, type) {\n\t\tconst validColors = [];\n\t\tcolors = (colors || []).concat(DEFAULT_COLORS[type]);\n\t\tcolors.forEach((string) => {\n\t\t\tconst color = getColor(string);\n\t\t\tif(!isValidColor(color)) {\n\t\t\t\tconsole.warn('\"' + string + '\" is not a valid color.');\n\t\t\t} else {\n\t\t\t\tvalidColors.push(color);\n\t\t\t}\n\t\t});\n\t\treturn validColors;\n\t}\n\n\tsetMeasures() {\n\t\t// Override measures, including those for title and legend\n\t\t// set config for legend and title\n\t}\n\n\tconfigure() {\n\t\tlet height = this.argHeight;\n\t\tthis.baseHeight = height;\n\t\tthis.height = height - getExtraHeight(this.measures);\n\n\t\t// Bind window events\n\t\tthis.boundDrawFn = () => this.draw(true);\n\t\tif (ResizeObserver) {\n\t\t\tthis.resizeObserver = new ResizeObserver(this.boundDrawFn);\n\t\t\tthis.resizeObserver.observe(this.parent);\n\t\t}\n\t\twindow.addEventListener('resize', this.boundDrawFn);\n\t\twindow.addEventListener('orientationchange', this.boundDrawFn);\n\t}\n\n\tdestroy() {\n\t\tif (this.resizeObserver) this.resizeObserver.disconnect();\n\t\twindow.removeEventListener('resize', this.boundDrawFn);\n\t\twindow.removeEventListener('orientationchange', this.boundDrawFn);\n\t}\n\n\t// Has to be called manually\n\tsetup() {\n\t\tthis.makeContainer();\n\t\tthis.updateWidth();\n\t\tthis.makeTooltip();\n\n\t\tthis.draw(false, true);\n\t}\n\n\tmakeContainer() {\n\t\t// Chart needs a dedicated parent element\n\t\tthis.parent.innerHTML = '';\n\n\t\tlet args = {\n\t\t\tinside: this.parent,\n\t\t\tclassName: 'chart-container'\n\t\t};\n\n\t\tif(this.independentWidth) {\n\t\t\targs.styles = { width: this.independentWidth + 'px' };\n\t\t}\n\n\t\tthis.container = $.create('div', args);\n\t}\n\n\tmakeTooltip() {\n\t\tthis.tip = new SvgTip({\n\t\t\tparent: this.container,\n\t\t\tcolors: this.colors\n\t\t});\n\t\tthis.bindTooltip();\n\t}\n\n\tbindTooltip() {}\n\n\tdraw(onlyWidthChange=false, init=false) {\n\t\tif (onlyWidthChange && isHidden(this.parent)) {\n\t\t\t// Don't update anything if the chart is hidden\n\t\t\treturn;\n\t\t}\n\t\tthis.updateWidth();\n\n\t\tthis.calc(onlyWidthChange);\n\t\tthis.makeChartArea();\n\t\tthis.setupComponents();\n\n\t\tthis.components.forEach(c => c.setup(this.drawArea));\n\t\t// this.components.forEach(c => c.make());\n\t\tthis.render(this.components, false);\n\n\t\tif(init) {\n\t\t\tthis.data = this.realData;\n\t\t\tsetTimeout(() => {this.update(this.data);}, this.initTimeout);\n\t\t}\n\n\t\tthis.renderLegend();\n\n\t\tthis.setupNavigation(init);\n\t}\n\n\tcalc() {} // builds state\n\n\tupdateWidth() {\n\t\tthis.baseWidth = getElementContentWidth(this.parent);\n\t\tthis.width = this.baseWidth - getExtraWidth(this.measures);\n\t}\n\n\tmakeChartArea() {\n\t\tif(this.svg) {\n\t\t\tthis.container.removeChild(this.svg);\n\t\t}\n\t\tlet m = this.measures;\n\n\t\tthis.svg = makeSVGContainer(\n\t\t\tthis.container,\n\t\t\t'frappe-chart chart',\n\t\t\tthis.baseWidth,\n\t\t\tthis.baseHeight\n\t\t);\n\t\tthis.svgDefs = makeSVGDefs(this.svg);\n\n\t\tif(this.title.length) {\n\t\t\tthis.titleEL = makeText(\n\t\t\t\t'title',\n\t\t\t\tm.margins.left,\n\t\t\t\tm.margins.top,\n\t\t\t\tthis.title,\n\t\t\t\t{\n\t\t\t\t\tfontSize: m.titleFontSize,\n\t\t\t\t\tfill: '#666666',\n\t\t\t\t\tdy: m.titleFontSize\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\n\t\tlet top = getTopOffset(m);\n\t\tthis.drawArea = makeSVGGroup(\n\t\t\tthis.type + '-chart chart-draw-area',\n\t\t\t`translate(${getLeftOffset(m)}, ${top})`\n\t\t);\n\n\t\tif(this.config.showLegend) {\n\t\t\ttop += this.height + m.paddings.bottom;\n\t\t\tthis.legendArea = makeSVGGroup(\n\t\t\t\t'chart-legend',\n\t\t\t\t`translate(${getLeftOffset(m)}, ${top})`\n\t\t\t);\n\t\t}\n\n\t\tif(this.title.length) { this.svg.appendChild(this.titleEL); }\n\t\tthis.svg.appendChild(this.drawArea);\n\t\tif(this.config.showLegend) { this.svg.appendChild(this.legendArea); }\n\n\t\tthis.updateTipOffset(getLeftOffset(m), getTopOffset(m));\n\t}\n\n\tupdateTipOffset(x, y) {\n\t\tthis.tip.offset = {\n\t\t\tx: x,\n\t\t\ty: y\n\t\t};\n\t}\n\n\tsetupComponents() { this.components = new Map(); }\n\n\tupdate(data) {\n\t\tif(!data) {\n\t\t\tconsole.error('No data to update.');\n\t\t}\n\t\tthis.data = this.prepareData(data);\n\t\tthis.calc(); // builds state\n\t\tthis.render(this.components, this.config.animate);\n\t\tthis.renderLegend();\n\t}\n\n\trender(components=this.components, animate=true) {\n\t\tif(this.config.isNavigable) {\n\t\t\t// Remove all existing overlays\n\t\t\tthis.overlays.map(o => o.parentNode.removeChild(o));\n\t\t\t// ref.parentNode.insertBefore(element, ref);\n\t\t}\n\t\tlet elementsToAnimate = [];\n\t\t// Can decouple to this.refreshComponents() first to save animation timeout\n\t\tcomponents.forEach(c => {\n\t\t\telementsToAnimate = elementsToAnimate.concat(c.update(animate));\n\t\t});\n\t\tif(elementsToAnimate.length > 0) {\n\t\t\trunSMILAnimation(this.container, this.svg, elementsToAnimate);\n\t\t\tsetTimeout(() => {\n\t\t\t\tcomponents.forEach(c => c.make());\n\t\t\t\tthis.updateNav();\n\t\t\t}, CHART_POST_ANIMATE_TIMEOUT);\n\t\t} else {\n\t\t\tcomponents.forEach(c => c.make());\n\t\t\tthis.updateNav();\n\t\t}\n\t}\n\n\tupdateNav() {\n\t\tif(this.config.isNavigable) {\n\t\t\tthis.makeOverlay();\n\t\t\tthis.bindUnits();\n\t\t}\n\t}\n\n\trenderLegend() {}\n\n\tsetupNavigation(init=false) {\n\t\tif(!this.config.isNavigable) return;\n\n\t\tif(init) {\n\t\t\tthis.bindOverlay();\n\n\t\t\tthis.keyActions = {\n\t\t\t\t'13': this.onEnterKey.bind(this),\n\t\t\t\t'37': this.onLeftArrow.bind(this),\n\t\t\t\t'38': this.onUpArrow.bind(this),\n\t\t\t\t'39': this.onRightArrow.bind(this),\n\t\t\t\t'40': this.onDownArrow.bind(this),\n\t\t\t};\n\n\t\t\tdocument.addEventListener('keydown', (e) => {\n\t\t\t\tif(isElementInViewport(this.container)) {\n\t\t\t\t\te = e || window.event;\n\t\t\t\t\tif(this.keyActions[e.keyCode]) {\n\t\t\t\t\t\tthis.keyActions[e.keyCode]();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\tmakeOverlay() {}\n\tupdateOverlay() {}\n\tbindOverlay() {}\n\tbindUnits() {}\n\n\tonLeftArrow() {}\n\tonRightArrow() {}\n\tonUpArrow() {}\n\tonDownArrow() {}\n\tonEnterKey() {}\n\n\taddDataPoint() {}\n\tremoveDataPoint() {}\n\n\tgetDataPoint() {}\n\tsetCurrentDataPoint() {}\n\n\tupdateDataset() {}\n\n\texport() {\n\t\tlet chartSvg = prepareForExport(this.svg);\n\t\tdownloadFile(this.title || 'Chart', [chartSvg]);\n\t}\n}\n\nclass AggregationChart extends BaseChart {\n\tconstructor(parent, args) {\n\t\tsuper(parent, args);\n\t}\n\n\tconfigure(args) {\n\t\tsuper.configure(args);\n\n\t\tthis.config.formatTooltipY = (args.tooltipOptions || {}).formatTooltipY;\n\t\tthis.config.maxSlices = args.maxSlices || 20;\n\t\tthis.config.maxLegendPoints = args.maxLegendPoints || 20;\n\t}\n\n\tcalc() {\n\t\tlet s = this.state;\n\t\tlet maxSlices = this.config.maxSlices;\n\t\ts.sliceTotals = [];\n\n\t\tlet allTotals = this.data.labels.map((label, i) => {\n\t\t\tlet total = 0;\n\t\t\tthis.data.datasets.map(e => {\n\t\t\t\ttotal += e.values[i];\n\t\t\t});\n\t\t\treturn [total, label];\n\t\t}).filter(d => { return d[0] >= 0; }); // keep only positive results\n\n\t\tlet totals = allTotals;\n\t\tif(allTotals.length > maxSlices) {\n\t\t\t// Prune and keep a grey area for rest as per maxSlices\n\t\t\tallTotals.sort((a, b) => { return b[0] - a[0]; });\n\n\t\t\ttotals = allTotals.slice(0, maxSlices-1);\n\t\t\tlet remaining = allTotals.slice(maxSlices-1);\n\n\t\t\tlet sumOfRemaining = 0;\n\t\t\tremaining.map(d => {sumOfRemaining += d[0];});\n\t\t\ttotals.push([sumOfRemaining, 'Rest']);\n\t\t\tthis.colors[maxSlices-1] = 'grey';\n\t\t}\n\n\t\ts.labels = [];\n\t\ttotals.map(d => {\n\t\t\ts.sliceTotals.push(round(d[0]));\n\t\t\ts.labels.push(d[1]);\n\t\t});\n\n\t\ts.grandTotal = s.sliceTotals.reduce((a, b) => a + b, 0);\n\n\t\tthis.center = {\n\t\t\tx: this.width / 2,\n\t\t\ty: this.height / 2\n\t\t};\n\t}\n\n\trenderLegend() {\n\t\tlet s = this.state;\n\t\tthis.legendArea.textContent = '';\n\t\tthis.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints);\n\n\t\tlet count = 0;\n\t\tlet y = 0;\n\t\tthis.legendTotals.map((d, i) => {\n\t\t\tlet barWidth = 150;\n\t\t\tlet divisor = Math.floor(\n\t\t\t\t(this.width - getExtraWidth(this.measures))/barWidth\n\t\t\t);\n\t\t\tif (this.legendTotals.length < divisor) {\n\t\t\t\tbarWidth = this.width/this.legendTotals.length;\n\t\t\t}\n\t\t\tif(count > divisor) {\n\t\t\t\tcount = 0;\n\t\t\t\ty += 20;\n\t\t\t}\n\t\t\tlet x = barWidth * count + 5;\n\t\t\tlet label = this.config.truncateLegends ? truncateString(s.labels[i], barWidth/10) : s.labels[i];\n\t\t\tlet formatted = this.config.formatTooltipY ? this.config.formatTooltipY(d) : d;\n\t\t\tlet dot = legendDot(\n\t\t\t\tx,\n\t\t\t\ty,\n\t\t\t\t5,\n\t\t\t\tthis.colors[i],\n\t\t\t\t`${label}: ${formatted}`,\n\t\t\t\tfalse\n\t\t\t);\n\t\t\tthis.legendArea.appendChild(dot);\n\t\t\tcount++;\n\t\t});\n\t}\n}\n\n// Playing around with dates\n\nconst NO_OF_YEAR_MONTHS = 12;\nconst NO_OF_DAYS_IN_WEEK = 7;\n\nconst NO_OF_MILLIS = 1000;\nconst SEC_IN_DAY = 86400;\n\nconst MONTH_NAMES = [\"January\", \"February\", \"March\", \"April\", \"May\",\n\t\"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"];\n\n\nconst DAY_NAMES_SHORT = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n\n\n// https://stackoverflow.com/a/11252167/6495043\nfunction treatAsUtc(date) {\n\tlet result = new Date(date);\n\tresult.setMinutes(result.getMinutes() - result.getTimezoneOffset());\n\treturn result;\n}\n\nfunction getYyyyMmDd(date) {\n\tlet dd = date.getDate();\n\tlet mm = date.getMonth() + 1; // getMonth() is zero-based\n\treturn [\n\t\tdate.getFullYear(),\n\t\t(mm>9 ? '' : '0') + mm,\n\t\t(dd>9 ? '' : '0') + dd\n\t].join('-');\n}\n\nfunction clone(date) {\n\treturn new Date(date.getTime());\n}\n\n\n\n\n\n// export function getMonthsBetween(startDate, endDate) {}\n\nfunction getWeeksBetween(startDate, endDate) {\n\tlet weekStartDate = setDayToSunday(startDate);\n\treturn Math.ceil(getDaysBetween(weekStartDate, endDate) / NO_OF_DAYS_IN_WEEK);\n}\n\nfunction getDaysBetween(startDate, endDate) {\n\tlet millisecondsPerDay = SEC_IN_DAY * NO_OF_MILLIS;\n\treturn (treatAsUtc(endDate) - treatAsUtc(startDate)) / millisecondsPerDay;\n}\n\nfunction areInSameMonth(startDate, endDate) {\n\treturn startDate.getMonth() === endDate.getMonth()\n\t\t&& startDate.getFullYear() === endDate.getFullYear();\n}\n\nfunction getMonthName(i, short=false) {\n\tlet monthName = MONTH_NAMES[i];\n\treturn short ? monthName.slice(0, 3) : monthName;\n}\n\nfunction getLastDateInMonth (month, year) {\n\treturn new Date(year, month + 1, 0); // 0: last day in previous month\n}\n\n// mutates\nfunction setDayToSunday(date) {\n\tlet newDate = clone(date);\n\tconst day = newDate.getDay();\n\tif(day !== 0) {\n\t\taddDays(newDate, (-1) * day);\n\t}\n\treturn newDate;\n}\n\n// mutates\nfunction addDays(date, numberOfDays) {\n\tdate.setDate(date.getDate() + numberOfDays);\n}\n\nclass ChartComponent {\n\tconstructor({\n\t\tlayerClass = '',\n\t\tlayerTransform = '',\n\t\tconstants,\n\n\t\tgetData,\n\t\tmakeElements,\n\t\tanimateElements\n\t}) {\n\t\tthis.layerTransform = layerTransform;\n\t\tthis.constants = constants;\n\n\t\tthis.makeElements = makeElements;\n\t\tthis.getData = getData;\n\n\t\tthis.animateElements = animateElements;\n\n\t\tthis.store = [];\n\t\tthis.labels = [];\n\n\t\tthis.layerClass = layerClass;\n\t\tthis.layerClass = typeof(this.layerClass) === 'function'\n\t\t\t? this.layerClass() : this.layerClass;\n\n\t\tthis.refresh();\n\t}\n\n\trefresh(data) {\n\t\tthis.data = data || this.getData();\n\t}\n\n\tsetup(parent) {\n\t\tthis.layer = makeSVGGroup(this.layerClass, this.layerTransform, parent);\n\t}\n\n\tmake() {\n\t\tthis.render(this.data);\n\t\tthis.oldData = this.data;\n\t}\n\n\trender(data) {\n\t\tthis.store = this.makeElements(data);\n\n\t\tthis.layer.textContent = '';\n\t\tthis.store.forEach(element => {\n\t\t\tthis.layer.appendChild(element);\n\t\t});\n\t\tthis.labels.forEach(element => {\n\t\t\tthis.layer.appendChild(element);\n\t\t});\n\t}\n\n\tupdate(animate = true) {\n\t\tthis.refresh();\n\t\tlet animateElements = [];\n\t\tif(animate) {\n\t\t\tanimateElements = this.animateElements(this.data) || [];\n\t\t}\n\t\treturn animateElements;\n\t}\n}\n\nlet componentConfigs = {\n\tdonutSlices: {\n\t\tlayerClass: 'donut-slices',\n\t\tmakeElements(data) {\n\t\t\treturn data.sliceStrings.map((s, i) => {\n\t\t\t\tlet slice = makePath(s, 'donut-path', data.colors[i], 'none', data.strokeWidth);\n\t\t\t\tslice.style.transition = 'transform .3s;';\n\t\t\t\treturn slice;\n\t\t\t});\n\t\t},\n\n\t\tanimateElements(newData) {\n\t\t\treturn this.store.map((slice, i) => animatePathStr(slice, newData.sliceStrings[i]));\n\t\t},\n\t},\n\tpieSlices: {\n\t\tlayerClass: 'pie-slices',\n\t\tmakeElements(data) {\n\t\t\treturn data.sliceStrings.map((s, i) =>{\n\t\t\t\tlet slice = makePath(s, 'pie-path', 'none', data.colors[i]);\n\t\t\t\tslice.style.transition = 'transform .3s;';\n\t\t\t\treturn slice;\n\t\t\t});\n\t\t},\n\n\t\tanimateElements(newData) {\n\t\t\treturn this.store.map((slice, i) =>\n\t\t\t\tanimatePathStr(slice, newData.sliceStrings[i])\n\t\t\t);\n\t\t}\n\t},\n\tpercentageBars: {\n\t\tlayerClass: 'percentage-bars',\n\t\tmakeElements(data) {\n\t\t\treturn data.xPositions.map((x, i) =>{\n\t\t\t\tlet y = 0;\n\t\t\t\tlet bar = percentageBar(x, y, data.widths[i],\n\t\t\t\t\tthis.constants.barHeight, this.constants.barDepth, data.colors[i]);\n\t\t\t\treturn bar;\n\t\t\t});\n\t\t},\n\n\t\tanimateElements(newData) {\n\t\t\tif(newData) return [];\n\t\t}\n\t},\n\tyAxis: {\n\t\tlayerClass: 'y axis',\n\t\tmakeElements(data) {\n\t\t\treturn data.positions.map((position, i) =>\n\t\t\t\tyLine(position, data.labels[i], this.constants.width,\n\t\t\t\t\t{mode: this.constants.mode, pos: this.constants.pos, shortenNumbers: this.constants.shortenNumbers})\n\t\t\t);\n\t\t},\n\n\t\tanimateElements(newData) {\n\t\t\tlet newPos = newData.positions;\n\t\t\tlet newLabels = newData.labels;\n\t\t\tlet oldPos = this.oldData.positions;\n\t\t\tlet oldLabels = this.oldData.labels;\n\n\t\t\t[oldPos, newPos] = equilizeNoOfElements(oldPos, newPos);\n\t\t\t[oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels);\n\n\t\t\tthis.render({\n\t\t\t\tpositions: oldPos,\n\t\t\t\tlabels: newLabels\n\t\t\t});\n\n\t\t\treturn this.store.map((line, i) => {\n\t\t\t\treturn translateHoriLine(\n\t\t\t\t\tline, newPos[i], oldPos[i]\n\t\t\t\t);\n\t\t\t});\n\t\t}\n\t},\n\n\txAxis: {\n\t\tlayerClass: 'x axis',\n\t\tmakeElements(data) {\n\t\t\treturn data.positions.map((position, i) =>\n\t\t\t\txLine(position, data.calcLabels[i], this.constants.height,\n\t\t\t\t\t{mode: this.constants.mode, pos: this.constants.pos})\n\t\t\t);\n\t\t},\n\n\t\tanimateElements(newData) {\n\t\t\tlet newPos = newData.positions;\n\t\t\tlet newLabels = newData.calcLabels;\n\t\t\tlet oldPos = this.oldData.positions;\n\t\t\tlet oldLabels = this.oldData.calcLabels;\n\n\t\t\t[oldPos, newPos] = equilizeNoOfElements(oldPos, newPos);\n\t\t\t[oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels);\n\n\t\t\tthis.render({\n\t\t\t\tpositions: oldPos,\n\t\t\t\tcalcLabels: newLabels\n\t\t\t});\n\n\t\t\treturn this.store.map((line, i) => {\n\t\t\t\treturn translateVertLine(\n\t\t\t\t\tline, newPos[i], oldPos[i]\n\t\t\t\t);\n\t\t\t});\n\t\t}\n\t},\n\n\tyMarkers: {\n\t\tlayerClass: 'y-markers',\n\t\tmakeElements(data) {\n\t\t\treturn data.map(m =>\n\t\t\t\tyMarker(m.position, m.label, this.constants.width,\n\t\t\t\t\t{labelPos: m.options.labelPos, mode: 'span', lineType: 'dashed'})\n\t\t\t);\n\t\t},\n\t\tanimateElements(newData) {\n\t\t\t[this.oldData, newData] = equilizeNoOfElements(this.oldData, newData);\n\n\t\t\tlet newPos = newData.map(d => d.position);\n\t\t\tlet newLabels = newData.map(d => d.label);\n\t\t\tlet newOptions = newData.map(d => d.options);\n\n\t\t\tlet oldPos = this.oldData.map(d => d.position);\n\n\t\t\tthis.render(oldPos.map((pos, i) => {\n\t\t\t\treturn {\n\t\t\t\t\tposition: oldPos[i],\n\t\t\t\t\tlabel: newLabels[i],\n\t\t\t\t\toptions: newOptions[i]\n\t\t\t\t};\n\t\t\t}));\n\n\t\t\treturn this.store.map((line, i) => {\n\t\t\t\treturn translateHoriLine(\n\t\t\t\t\tline, newPos[i], oldPos[i]\n\t\t\t\t);\n\t\t\t});\n\t\t}\n\t},\n\n\tyRegions: {\n\t\tlayerClass: 'y-regions',\n\t\tmakeElements(data) {\n\t\t\treturn data.map(r =>\n\t\t\t\tyRegion(r.startPos, r.endPos, this.constants.width,\n\t\t\t\t\tr.label, {labelPos: r.options.labelPos})\n\t\t\t);\n\t\t},\n\t\tanimateElements(newData) {\n\t\t\t[this.oldData, newData] = equilizeNoOfElements(this.oldData, newData);\n\n\t\t\tlet newPos = newData.map(d => d.endPos);\n\t\t\tlet newLabels = newData.map(d => d.label);\n\t\t\tlet newStarts = newData.map(d => d.startPos);\n\t\t\tlet newOptions = newData.map(d => d.options);\n\n\t\t\tlet oldPos = this.oldData.map(d => d.endPos);\n\t\t\tlet oldStarts = this.oldData.map(d => d.startPos);\n\n\t\t\tthis.render(oldPos.map((pos, i) => {\n\t\t\t\treturn {\n\t\t\t\t\tstartPos: oldStarts[i],\n\t\t\t\t\tendPos: oldPos[i],\n\t\t\t\t\tlabel: newLabels[i],\n\t\t\t\t\toptions: newOptions[i]\n\t\t\t\t};\n\t\t\t}));\n\n\t\t\tlet animateElements = [];\n\n\t\t\tthis.store.map((rectGroup, i) => {\n\t\t\t\tanimateElements = animateElements.concat(animateRegion(\n\t\t\t\t\trectGroup, newStarts[i], newPos[i], oldPos[i]\n\t\t\t\t));\n\t\t\t});\n\n\t\t\treturn animateElements;\n\t\t}\n\t},\n\n\theatDomain: {\n\t\tlayerClass: function() { return 'heat-domain domain-' + this.constants.index; },\n\t\tmakeElements(data) {\n\t\t\tlet {index, colWidth, rowHeight, squareSize, radius, xTranslate} = this.constants;\n\t\t\tlet monthNameHeight = -12;\n\t\t\tlet x = xTranslate, y = 0;\n\n\t\t\tthis.serializedSubDomains = [];\n\n\t\t\tdata.cols.map((week, weekNo) => {\n\t\t\t\tif(weekNo === 1) {\n\t\t\t\t\tthis.labels.push(\n\t\t\t\t\t\tmakeText('domain-name', x, monthNameHeight, getMonthName(index, true).toUpperCase(),\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tfontSize: 9\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tweek.map((day, i) => {\n\t\t\t\t\tif(day.fill) {\n\t\t\t\t\t\tlet data = {\n\t\t\t\t\t\t\t'data-date': day.yyyyMmDd,\n\t\t\t\t\t\t\t'data-value': day.dataValue,\n\t\t\t\t\t\t\t'data-day': i\n\t\t\t\t\t\t};\n\t\t\t\t\t\tlet square = heatSquare('day', x, y, squareSize, radius, day.fill, data);\n\t\t\t\t\t\tthis.serializedSubDomains.push(square);\n\t\t\t\t\t}\n\t\t\t\t\ty += rowHeight;\n\t\t\t\t});\n\t\t\t\ty = 0;\n\t\t\t\tx += colWidth;\n\t\t\t});\n\n\t\t\treturn this.serializedSubDomains;\n\t\t},\n\n\t\tanimateElements(newData) {\n\t\t\tif(newData) return [];\n\t\t}\n\t},\n\n\tbarGraph: {\n\t\tlayerClass: function() { return 'dataset-units dataset-bars dataset-' + this.constants.index; },\n\t\tmakeElements(data) {\n\t\t\tlet c = this.constants;\n\t\t\tthis.unitType = 'bar';\n\t\t\tthis.units = data.yPositions.map((y, j) => {\n\t\t\t\treturn datasetBar(\n\t\t\t\t\tdata.xPositions[j],\n\t\t\t\t\ty,\n\t\t\t\t\tdata.barWidth,\n\t\t\t\t\tc.color,\n\t\t\t\t\tdata.labels[j],\n\t\t\t\t\tj,\n\t\t\t\t\tdata.offsets[j],\n\t\t\t\t\t{\n\t\t\t\t\t\tzeroLine: data.zeroLine,\n\t\t\t\t\t\tbarsWidth: data.barsWidth,\n\t\t\t\t\t\tminHeight: c.minHeight\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t});\n\t\t\treturn this.units;\n\t\t},\n\t\tanimateElements(newData) {\n\t\t\tlet newXPos = newData.xPositions;\n\t\t\tlet newYPos = newData.yPositions;\n\t\t\tlet newOffsets = newData.offsets;\n\t\t\tlet newLabels = newData.labels;\n\n\t\t\tlet oldXPos = this.oldData.xPositions;\n\t\t\tlet oldYPos = this.oldData.yPositions;\n\t\t\tlet oldOffsets = this.oldData.offsets;\n\t\t\tlet oldLabels = this.oldData.labels;\n\n\t\t\t[oldXPos, newXPos] = equilizeNoOfElements(oldXPos, newXPos);\n\t\t\t[oldYPos, newYPos] = equilizeNoOfElements(oldYPos, newYPos);\n\t\t\t[oldOffsets, newOffsets] = equilizeNoOfElements(oldOffsets, newOffsets);\n\t\t\t[oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels);\n\n\t\t\tthis.render({\n\t\t\t\txPositions: oldXPos,\n\t\t\t\tyPositions: oldYPos,\n\t\t\t\toffsets: oldOffsets,\n\t\t\t\tlabels: newLabels,\n\n\t\t\t\tzeroLine: this.oldData.zeroLine,\n\t\t\t\tbarsWidth: this.oldData.barsWidth,\n\t\t\t\tbarWidth: this.oldData.barWidth,\n\t\t\t});\n\n\t\t\tlet animateElements = [];\n\n\t\t\tthis.store.map((bar, i) => {\n\t\t\t\tanimateElements = animateElements.concat(animateBar(\n\t\t\t\t\tbar, newXPos[i], newYPos[i], newData.barWidth, newOffsets[i],\n\t\t\t\t\t{zeroLine: newData.zeroLine}\n\t\t\t\t));\n\t\t\t});\n\n\t\t\treturn animateElements;\n\t\t}\n\t},\n\n\tlineGraph: {\n\t\tlayerClass: function() { return 'dataset-units dataset-line dataset-' + this.constants.index; },\n\t\tmakeElements(data) {\n\t\t\tlet c = this.constants;\n\t\t\tthis.unitType = 'dot';\n\t\t\tthis.paths = {};\n\t\t\tif(!c.hideLine) {\n\t\t\t\tthis.paths = getPaths(\n\t\t\t\t\tdata.xPositions,\n\t\t\t\t\tdata.yPositions,\n\t\t\t\t\tc.color,\n\t\t\t\t\t{\n\t\t\t\t\t\theatline: c.heatline,\n\t\t\t\t\t\tregionFill: c.regionFill,\n\t\t\t\t\t\tspline: c.spline\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tsvgDefs: c.svgDefs,\n\t\t\t\t\t\tzeroLine: data.zeroLine\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tthis.units = [];\n\t\t\tif(!c.hideDots) {\n\t\t\t\tthis.units = data.yPositions.map((y, j) => {\n\t\t\t\t\treturn datasetDot(\n\t\t\t\t\t\tdata.xPositions[j],\n\t\t\t\t\t\ty,\n\t\t\t\t\t\tdata.radius,\n\t\t\t\t\t\tc.color,\n\t\t\t\t\t\t(c.valuesOverPoints ? data.values[j] : ''),\n\t\t\t\t\t\tj\n\t\t\t\t\t);\n\t\t\t\t});\n\t\t\t}\n\n\t\t\treturn Object.values(this.paths).concat(this.units);\n\t\t},\n\t\tanimateElements(newData) {\n\t\t\tlet newXPos = newData.xPositions;\n\t\t\tlet newYPos = newData.yPositions;\n\t\t\tlet newValues = newData.values;\n\n\t\t\tlet oldXPos = this.oldData.xPositions;\n\t\t\tlet oldYPos = this.oldData.yPositions;\n\t\t\tlet oldValues = this.oldData.values;\n\n\t\t\t[oldXPos, newXPos] = equilizeNoOfElements(oldXPos, newXPos);\n\t\t\t[oldYPos, newYPos] = equilizeNoOfElements(oldYPos, newYPos);\n\t\t\t[oldValues, newValues] = equilizeNoOfElements(oldValues, newValues);\n\n\t\t\tthis.render({\n\t\t\t\txPositions: oldXPos,\n\t\t\t\tyPositions: oldYPos,\n\t\t\t\tvalues: newValues,\n\n\t\t\t\tzeroLine: this.oldData.zeroLine,\n\t\t\t\tradius: this.oldData.radius,\n\t\t\t});\n\n\t\t\tlet animateElements = [];\n\n\t\t\tif(Object.keys(this.paths).length) {\n\t\t\t\tanimateElements = animateElements.concat(animatePath(\n\t\t\t\t\tthis.paths, newXPos, newYPos, newData.zeroLine, this.constants.spline));\n\t\t\t}\n\n\t\t\tif(this.units.length) {\n\t\t\t\tthis.units.map((dot, i) => {\n\t\t\t\t\tanimateElements = animateElements.concat(animateDot(\n\t\t\t\t\t\tdot, newXPos[i], newYPos[i]));\n\t\t\t\t});\n\t\t\t}\n\n\t\t\treturn animateElements;\n\t\t}\n\t}\n};\n\nfunction getComponent(name, constants, getData) {\n\tlet keys = Object.keys(componentConfigs).filter(k => name.includes(k));\n\tlet config = componentConfigs[keys[0]];\n\tObject.assign(config, {\n\t\tconstants: constants,\n\t\tgetData: getData\n\t});\n\treturn new ChartComponent(config);\n}\n\nclass PercentageChart extends AggregationChart {\n\tconstructor(parent, args) {\n\t\tsuper(parent, args);\n\t\tthis.type = 'percentage';\n\t\tthis.setup();\n\t}\n\n\tsetMeasures(options) {\n\t\tlet m = this.measures;\n\t\tthis.barOptions = options.barOptions || {};\n\n\t\tlet b = this.barOptions;\n\t\tb.height = b.height || PERCENTAGE_BAR_DEFAULT_HEIGHT;\n\t\tb.depth = b.depth || PERCENTAGE_BAR_DEFAULT_DEPTH;\n\n\t\tm.paddings.right = 30;\n\t\tm.legendHeight = 60;\n\t\tm.baseHeight = (b.height + b.depth * 0.5) * 8;\n\t}\n\n\tsetupComponents() {\n\t\tlet s = this.state;\n\n\t\tlet componentConfigs = [\n\t\t\t[\n\t\t\t\t'percentageBars',\n\t\t\t\t{\n\t\t\t\t\tbarHeight: this.barOptions.height,\n\t\t\t\t\tbarDepth: this.barOptions.depth,\n\t\t\t\t},\n\t\t\t\tfunction() {\n\t\t\t\t\treturn {\n\t\t\t\t\t\txPositions: s.xPositions,\n\t\t\t\t\t\twidths: s.widths,\n\t\t\t\t\t\tcolors: this.colors\n\t\t\t\t\t};\n\t\t\t\t}.bind(this)\n\t\t\t]\n\t\t];\n\n\t\tthis.components = new Map(componentConfigs\n\t\t\t.map(args => {\n\t\t\t\tlet component = getComponent(...args);\n\t\t\t\treturn [args[0], component];\n\t\t\t}));\n\t}\n\n\tcalc() {\n\t\tsuper.calc();\n\t\tlet s = this.state;\n\n\t\ts.xPositions = [];\n\t\ts.widths = [];\n\n\t\tlet xPos = 0;\n\t\ts.sliceTotals.map((value) => {\n\t\t\tlet width = this.width * value / s.grandTotal;\n\t\t\ts.widths.push(width);\n\t\t\ts.xPositions.push(xPos);\n\t\t\txPos += width;\n\t\t});\n\t}\n\n\tmakeDataByIndex() { }\n\n\tbindTooltip() {\n\t\tlet s = this.state;\n\t\tthis.container.addEventListener('mousemove', (e) => {\n\t\t\tlet bars = this.components.get('percentageBars').store;\n\t\t\tlet bar = e.target;\n\t\t\tif(bars.includes(bar)) {\n\n\t\t\t\tlet i = bars.indexOf(bar);\n\t\t\t\tlet gOff = getOffset(this.container), pOff = getOffset(bar);\n\n\t\t\t\tlet x = pOff.left - gOff.left + parseInt(bar.getAttribute('width'))/2;\n\t\t\t\tlet y = pOff.top - gOff.top;\n\t\t\t\tlet title = (this.formattedLabels && this.formattedLabels.length>0\n\t\t\t\t\t? this.formattedLabels[i] : this.state.labels[i]) + ': ';\n\t\t\t\tlet fraction = s.sliceTotals[i]/s.grandTotal;\n\n\t\t\t\tthis.tip.setValues(x, y, {name: title, value: (fraction*100).toFixed(1) + \"%\"});\n\t\t\t\tthis.tip.showTip();\n\t\t\t}\n\t\t});\n\t}\n}\n\nclass PieChart extends AggregationChart {\n\tconstructor(parent, args) {\n\t\tsuper(parent, args);\n\t\tthis.type = 'pie';\n\t\tthis.initTimeout = 0;\n\t\tthis.init = 1;\n\n\t\tthis.setup();\n\t}\n\n\tconfigure(args) {\n\t\tsuper.configure(args);\n\t\tthis.mouseMove = this.mouseMove.bind(this);\n\t\tthis.mouseLeave = this.mouseLeave.bind(this);\n\n\t\tthis.hoverRadio = args.hoverRadio || 0.1;\n\t\tthis.config.startAngle = args.startAngle || 0;\n\n\t\tthis.clockWise = args.clockWise || false;\n\t}\n\n\tcalc() {\n\t\tsuper.calc();\n\t\tlet s = this.state;\n\t\tthis.radius = (this.height > this.width ? this.center.x : this.center.y);\n\n\t\tconst { radius, clockWise } = this;\n\n\t\tconst prevSlicesProperties = s.slicesProperties || [];\n\t\ts.sliceStrings = [];\n\t\ts.slicesProperties = [];\n\t\tlet curAngle = 180 - this.config.startAngle;\n\t\ts.sliceTotals.map((total, i) => {\n\t\t\tconst startAngle = curAngle;\n\t\t\tconst originDiffAngle = (total / s.grandTotal) * FULL_ANGLE;\n\t\t\tconst largeArc = originDiffAngle > 180 ? 1: 0;\n\t\t\tconst diffAngle = clockWise ? -originDiffAngle : originDiffAngle;\n\t\t\tconst endAngle = curAngle = curAngle + diffAngle;\n\t\t\tconst startPosition = getPositionByAngle(startAngle, radius);\n\t\t\tconst endPosition = getPositionByAngle(endAngle, radius);\n\n\t\t\tconst prevProperty = this.init && prevSlicesProperties[i];\n\n\t\t\tlet curStart,curEnd;\n\t\t\tif(this.init) {\n\t\t\t\tcurStart = prevProperty ? prevProperty.startPosition : startPosition;\n\t\t\t\tcurEnd = prevProperty ? prevProperty.endPosition : startPosition;\n\t\t\t} else {\n\t\t\t\tcurStart = startPosition;\n\t\t\t\tcurEnd = endPosition;\n\t\t\t}\n\t\t\tconst curPath =\n\t\t\t\toriginDiffAngle === 360\n\t\t\t\t\t? makeCircleStr(curStart, curEnd, this.center, this.radius, clockWise, largeArc)\n\t\t\t\t\t: makeArcPathStr(curStart, curEnd, this.center, this.radius, clockWise, largeArc);\n\n\t\t\ts.sliceStrings.push(curPath);\n\t\t\ts.slicesProperties.push({\n\t\t\t\tstartPosition,\n\t\t\t\tendPosition,\n\t\t\t\tvalue: total,\n\t\t\t\ttotal: s.grandTotal,\n\t\t\t\tstartAngle,\n\t\t\t\tendAngle,\n\t\t\t\tangle: diffAngle\n\t\t\t});\n\n\t\t});\n\t\tthis.init = 0;\n\t}\n\n\tsetupComponents() {\n\t\tlet s = this.state;\n\n\t\tlet componentConfigs = [\n\t\t\t[\n\t\t\t\t'pieSlices',\n\t\t\t\t{ },\n\t\t\t\tfunction() {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tsliceStrings: s.sliceStrings,\n\t\t\t\t\t\tcolors: this.colors\n\t\t\t\t\t};\n\t\t\t\t}.bind(this)\n\t\t\t]\n\t\t];\n\n\t\tthis.components = new Map(componentConfigs\n\t\t\t.map(args => {\n\t\t\t\tlet component = getComponent(...args);\n\t\t\t\treturn [args[0], component];\n\t\t\t}));\n\t}\n\n\tcalTranslateByAngle(property){\n\t\tconst{radius,hoverRadio} = this;\n\t\tconst position = getPositionByAngle(property.startAngle+(property.angle / 2),radius);\n\t\treturn `translate3d(${(position.x) * hoverRadio}px,${(position.y) * hoverRadio}px,0)`;\n\t}\n\n\thoverSlice(path,i,flag,e){\n\t\tif(!path) return;\n\t\tconst color = this.colors[i];\n\t\tif(flag) {\n\t\t\ttransform(path, this.calTranslateByAngle(this.state.slicesProperties[i]));\n\t\t\tpath.style.fill = lightenDarkenColor(color, 50);\n\t\t\tlet g_off = getOffset(this.svg);\n\t\t\tlet x = e.pageX - g_off.left + 10;\n\t\t\tlet y = e.pageY - g_off.top - 10;\n\t\t\tlet title = (this.formatted_labels && this.formatted_labels.length > 0\n\t\t\t\t? this.formatted_labels[i] : this.state.labels[i]) + ': ';\n\t\t\tlet percent = (this.state.sliceTotals[i] * 100 / this.state.grandTotal).toFixed(1);\n\t\t\tthis.tip.setValues(x, y, {name: title, value: percent + \"%\"});\n\t\t\tthis.tip.showTip();\n\t\t} else {\n\t\t\ttransform(path,'translate3d(0,0,0)');\n\t\t\tthis.tip.hideTip();\n\t\t\tpath.style.fill = color;\n\t\t}\n\t}\n\n\tbindTooltip() {\n\t\tthis.container.addEventListener('mousemove', this.mouseMove);\n\t\tthis.container.addEventListener('mouseleave', this.mouseLeave);\n\t}\n\n\tmouseMove(e){\n\t\tconst target = e.target;\n\t\tlet slices = this.components.get('pieSlices').store;\n\t\tlet prevIndex = this.curActiveSliceIndex;\n\t\tlet prevAcitve = this.curActiveSlice;\n\t\tif(slices.includes(target)) {\n\t\t\tlet i = slices.indexOf(target);\n\t\t\tthis.hoverSlice(prevAcitve, prevIndex,false);\n\t\t\tthis.curActiveSlice = target;\n\t\t\tthis.curActiveSliceIndex = i;\n\t\t\tthis.hoverSlice(target, i, true, e);\n\t\t} else {\n\t\t\tthis.mouseLeave();\n\t\t}\n\t}\n\n\tmouseLeave(){\n\t\tthis.hoverSlice(this.curActiveSlice,this.curActiveSliceIndex,false);\n\t}\n}\n\nfunction normalize(x) {\n\t// Calculates mantissa and exponent of a number\n\t// Returns normalized number and exponent\n\t// https://stackoverflow.com/q/9383593/6495043\n\n\tif(x===0) {\n\t\treturn [0, 0];\n\t}\n\tif(isNaN(x)) {\n\t\treturn {mantissa: -6755399441055744, exponent: 972};\n\t}\n\tvar sig = x > 0 ? 1 : -1;\n\tif(!isFinite(x)) {\n\t\treturn {mantissa: sig * 4503599627370496, exponent: 972};\n\t}\n\n\tx = Math.abs(x);\n\tvar exp = Math.floor(Math.log10(x));\n\tvar man = x/Math.pow(10, exp);\n\n\treturn [sig * man, exp];\n}\n\nfunction getChartRangeIntervals(max, min=0) {\n\tlet upperBound = Math.ceil(max);\n\tlet lowerBound = Math.floor(min);\n\tlet range = upperBound - lowerBound;\n\n\tlet noOfParts = range;\n\tlet partSize = 1;\n\n\t// To avoid too many partitions\n\tif(range > 5) {\n\t\tif(range % 2 !== 0) {\n\t\t\tupperBound++;\n\t\t\t// Recalc range\n\t\t\trange = upperBound - lowerBound;\n\t\t}\n\t\tnoOfParts = range/2;\n\t\tpartSize = 2;\n\t}\n\n\t// Special case: 1 and 2\n\tif(range <= 2) {\n\t\tnoOfParts = 4;\n\t\tpartSize = range/noOfParts;\n\t}\n\n\t// Special case: 0\n\tif(range === 0) {\n\t\tnoOfParts = 5;\n\t\tpartSize = 1;\n\t}\n\n\tlet intervals = [];\n\tfor(var i = 0; i <= noOfParts; i++){\n\t\tintervals.push(lowerBound + partSize * i);\n\t}\n\treturn intervals;\n}\n\nfunction getChartIntervals(maxValue, minValue=0) {\n\tlet [normalMaxValue, exponent] = normalize(maxValue);\n\tlet normalMinValue = minValue ? minValue/Math.pow(10, exponent): 0;\n\n\t// Allow only 7 significant digits\n\tnormalMaxValue = normalMaxValue.toFixed(6);\n\n\tlet intervals = getChartRangeIntervals(normalMaxValue, normalMinValue);\n\tintervals = intervals.map(value => value * Math.pow(10, exponent));\n\treturn intervals;\n}\n\nfunction calcChartIntervals(values, withMinimum=false) {\n\t//*** Where the magic happens ***\n\n\t// Calculates best-fit y intervals from given values\n\t// and returns the interval array\n\n\tlet maxValue = Math.max(...values);\n\tlet minValue = Math.min(...values);\n\n\t// Exponent to be used for pretty print\n\tlet exponent = 0, intervals = []; // eslint-disable-line no-unused-vars\n\n\tfunction getPositiveFirstIntervals(maxValue, absMinValue) {\n\t\tlet intervals = getChartIntervals(maxValue);\n\n\t\tlet intervalSize = intervals[1] - intervals[0];\n\n\t\t// Then unshift the negative values\n\t\tlet value = 0;\n\t\tfor(var i = 1; value < absMinValue; i++) {\n\t\t\tvalue += intervalSize;\n\t\t\tintervals.unshift((-1) * value);\n\t\t}\n\t\treturn intervals;\n\t}\n\n\t// CASE I: Both non-negative\n\n\tif(maxValue >= 0 && minValue >= 0) {\n\t\texponent = normalize(maxValue)[1];\n\t\tif(!withMinimum) {\n\t\t\tintervals = getChartIntervals(maxValue);\n\t\t} else {\n\t\t\tintervals = getChartIntervals(maxValue, minValue);\n\t\t}\n\t}\n\n\t// CASE II: Only minValue negative\n\n\telse if(maxValue > 0 && minValue < 0) {\n\t\t// `withMinimum` irrelevant in this case,\n\t\t// We'll be handling both sides of zero separately\n\t\t// (both starting from zero)\n\t\t// Because ceil() and floor() behave differently\n\t\t// in those two regions\n\n\t\tlet absMinValue = Math.abs(minValue);\n\n\t\tif(maxValue >= absMinValue) {\n\t\t\texponent = normalize(maxValue)[1];\n\t\t\tintervals = getPositiveFirstIntervals(maxValue, absMinValue);\n\t\t} else {\n\t\t\t// Mirror: maxValue => absMinValue, then change sign\n\t\t\texponent = normalize(absMinValue)[1];\n\t\t\tlet posIntervals = getPositiveFirstIntervals(absMinValue, maxValue);\n\t\t\tintervals = posIntervals.reverse().map(d => d * (-1));\n\t\t}\n\n\t}\n\n\t// CASE III: Both non-positive\n\n\telse if(maxValue <= 0 && minValue <= 0) {\n\t\t// Mirrored Case I:\n\t\t// Work with positives, then reverse the sign and array\n\n\t\tlet pseudoMaxValue = Math.abs(minValue);\n\t\tlet pseudoMinValue = Math.abs(maxValue);\n\n\t\texponent = normalize(pseudoMaxValue)[1];\n\t\tif(!withMinimum) {\n\t\t\tintervals = getChartIntervals(pseudoMaxValue);\n\t\t} else {\n\t\t\tintervals = getChartIntervals(pseudoMaxValue, pseudoMinValue);\n\t\t}\n\n\t\tintervals = intervals.reverse().map(d => d * (-1));\n\t}\n\n\treturn intervals;\n}\n\nfunction getZeroIndex(yPts) {\n\tlet zeroIndex;\n\tlet interval = getIntervalSize(yPts);\n\tif(yPts.indexOf(0) >= 0) {\n\t\t// the range has a given zero\n\t\t// zero-line on the chart\n\t\tzeroIndex = yPts.indexOf(0);\n\t} else if(yPts[0] > 0) {\n\t\t// Minimum value is positive\n\t\t// zero-line is off the chart: below\n\t\tlet min = yPts[0];\n\t\tzeroIndex = (-1) * min / interval;\n\t} else {\n\t\t// Maximum value is negative\n\t\t// zero-line is off the chart: above\n\t\tlet max = yPts[yPts.length - 1];\n\t\tzeroIndex = (-1) * max / interval + (yPts.length - 1);\n\t}\n\treturn zeroIndex;\n}\n\n\n\nfunction getIntervalSize(orderedArray) {\n\treturn orderedArray[1] - orderedArray[0];\n}\n\nfunction getValueRange(orderedArray) {\n\treturn orderedArray[orderedArray.length-1] - orderedArray[0];\n}\n\nfunction scale(val, yAxis) {\n\treturn floatTwo(yAxis.zeroLine - val * yAxis.scaleMultiplier);\n}\n\n\n\n\n\nfunction getClosestInArray(goal, arr, index = false) {\n\tlet closest = arr.reduce(function(prev, curr) {\n\t\treturn (Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev);\n\t}, []);\n\n\treturn index ? arr.indexOf(closest) : closest;\n}\n\nfunction calcDistribution(values, distributionSize) {\n\t// Assume non-negative values,\n\t// implying distribution minimum at zero\n\n\tlet dataMaxValue = Math.max(...values);\n\n\tlet distributionStep = 1 / (distributionSize - 1);\n\tlet distribution = [];\n\n\tfor(var i = 0; i < distributionSize; i++) {\n\t\tlet checkpoint = dataMaxValue * (distributionStep * i);\n\t\tdistribution.push(checkpoint);\n\t}\n\n\treturn distribution;\n}\n\nfunction getMaxCheckpoint(value, distribution) {\n\treturn distribution.filter(d => d < value).length;\n}\n\nconst COL_WIDTH = HEATMAP_SQUARE_SIZE + HEATMAP_GUTTER_SIZE;\nconst ROW_HEIGHT = COL_WIDTH;\n// const DAY_INCR = 1;\n\nclass Heatmap extends BaseChart {\n\tconstructor(parent, options) {\n\t\tsuper(parent, options);\n\t\tthis.type = 'heatmap';\n\n\t\tthis.countLabel = options.countLabel || '';\n\n\t\tlet validStarts = ['Sunday', 'Monday'];\n\t\tlet startSubDomain = validStarts.includes(options.startSubDomain)\n\t\t\t? options.startSubDomain : 'Sunday';\n\t\tthis.startSubDomainIndex = validStarts.indexOf(startSubDomain);\n\n\t\tthis.setup();\n\t}\n\n\tsetMeasures(options) {\n\t\tlet m = this.measures;\n\t\tthis.discreteDomains = options.discreteDomains === 0 ? 0 : 1;\n\n\t\tm.paddings.top = ROW_HEIGHT * 3;\n\t\tm.paddings.bottom = 0;\n\t\tm.legendHeight = ROW_HEIGHT * 2;\n\t\tm.baseHeight = ROW_HEIGHT * NO_OF_DAYS_IN_WEEK\n\t\t\t+ getExtraHeight(m);\n\n\t\tlet d = this.data;\n\t\tlet spacing = this.discreteDomains ? NO_OF_YEAR_MONTHS : 0;\n\t\tthis.independentWidth = (getWeeksBetween(d.start, d.end)\n\t\t\t+ spacing) * COL_WIDTH + getExtraWidth(m);\n\t}\n\n\tupdateWidth() {\n\t\tlet spacing = this.discreteDomains ? NO_OF_YEAR_MONTHS : 0;\n\t\tlet noOfWeeks = this.state.noOfWeeks ? this.state.noOfWeeks : 52;\n\t\tthis.baseWidth = (noOfWeeks + spacing) * COL_WIDTH\n\t\t\t+ getExtraWidth(this.measures);\n\t}\n\n\tprepareData(data=this.data) {\n\t\tif(data.start && data.end && data.start > data.end) {\n\t\t\tthrow new Error('Start date cannot be greater than end date.');\n\t\t}\n\n\t\tif(!data.start) {\n\t\t\tdata.start = new Date();\n\t\t\tdata.start.setFullYear( data.start.getFullYear() - 1 );\n\t\t}\n\t\tif(!data.end) { data.end = new Date(); }\n\t\tdata.dataPoints = data.dataPoints || {};\n\n\t\tif(parseInt(Object.keys(data.dataPoints)[0]) > 100000) {\n\t\t\tlet points = {};\n\t\t\tObject.keys(data.dataPoints).forEach(timestampSec$$1 => {\n\t\t\t\tlet date = new Date(timestampSec$$1 * NO_OF_MILLIS);\n\t\t\t\tpoints[getYyyyMmDd(date)] = data.dataPoints[timestampSec$$1];\n\t\t\t});\n\t\t\tdata.dataPoints = points;\n\t\t}\n\n\t\treturn data;\n\t}\n\n\tcalc() {\n\t\tlet s = this.state;\n\n\t\ts.start = clone(this.data.start);\n\t\ts.end = clone(this.data.end);\n\n\t\ts.firstWeekStart = clone(s.start);\n\t\ts.noOfWeeks = getWeeksBetween(s.start, s.end);\n\t\ts.distribution = calcDistribution(\n\t\t\tObject.values(this.data.dataPoints), HEATMAP_DISTRIBUTION_SIZE);\n\n\t\ts.domainConfigs = this.getDomains();\n\t}\n\n\tsetupComponents() {\n\t\tlet s = this.state;\n\t\tlet lessCol = this.discreteDomains ? 0 : 1;\n\n\t\tlet componentConfigs = s.domainConfigs.map((config, i) => [\n\t\t\t'heatDomain',\n\t\t\t{\n\t\t\t\tindex: config.index,\n\t\t\t\tcolWidth: COL_WIDTH,\n\t\t\t\trowHeight: ROW_HEIGHT,\n\t\t\t\tsquareSize: HEATMAP_SQUARE_SIZE,\n\t\t\t\tradius: this.rawChartArgs.radius || 0,\n\t\t\t\txTranslate: s.domainConfigs\n\t\t\t\t\t.filter((config, j) => j < i)\n\t\t\t\t\t.map(config => config.cols.length - lessCol)\n\t\t\t\t\t.reduce((a, b) => a + b, 0)\n\t\t\t\t\t* COL_WIDTH\n\t\t\t},\n\t\t\tfunction() {\n\t\t\t\treturn s.domainConfigs[i];\n\t\t\t}.bind(this)\n\n\t\t]);\n\n\t\tthis.components = new Map(componentConfigs\n\t\t\t.map((args, i) => {\n\t\t\t\tlet component = getComponent(...args);\n\t\t\t\treturn [args[0] + '-' + i, component];\n\t\t\t})\n\t\t);\n\n\t\tlet y = 0;\n\t\tDAY_NAMES_SHORT.forEach((dayName, i) => {\n\t\t\tif([1, 3, 5].includes(i)) {\n\t\t\t\tlet dayText = makeText('subdomain-name', -COL_WIDTH/2, y, dayName,\n\t\t\t\t\t{\n\t\t\t\t\t\tfontSize: HEATMAP_SQUARE_SIZE,\n\t\t\t\t\t\tdy: 8,\n\t\t\t\t\t\ttextAnchor: 'end'\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t\tthis.drawArea.appendChild(dayText);\n\t\t\t}\n\t\t\ty += ROW_HEIGHT;\n\t\t});\n\t}\n\n\tupdate(data) {\n\t\tif(!data) {\n\t\t\tconsole.error('No data to update.');\n\t\t}\n\n\t\tthis.data = this.prepareData(data);\n\t\tthis.draw();\n\t\tthis.bindTooltip();\n\t}\n\n\tbindTooltip() {\n\t\tthis.container.addEventListener('mousemove', (e) => {\n\t\t\tthis.components.forEach(comp => {\n\t\t\t\tlet daySquares = comp.store;\n\t\t\t\tlet daySquare = e.target;\n\t\t\t\tif(daySquares.includes(daySquare)) {\n\n\t\t\t\t\tlet count = daySquare.getAttribute('data-value');\n\t\t\t\t\tlet dateParts = daySquare.getAttribute('data-date').split('-');\n\n\t\t\t\t\tlet month = getMonthName(parseInt(dateParts[1])-1, true);\n\n\t\t\t\t\tlet gOff = this.container.getBoundingClientRect(), pOff = daySquare.getBoundingClientRect();\n\n\t\t\t\t\tlet width = parseInt(e.target.getAttribute('width'));\n\t\t\t\t\tlet x = pOff.left - gOff.left + width/2;\n\t\t\t\t\tlet y = pOff.top - gOff.top;\n\t\t\t\t\tlet value = count + ' ' + this.countLabel;\n\t\t\t\t\tlet name = ' on ' + month + ' ' + dateParts[0] + ', ' + dateParts[2];\n\n\t\t\t\t\tthis.tip.setValues(x, y, {name: name, value: value, valueFirst: 1}, []);\n\t\t\t\t\tthis.tip.showTip();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t}\n\n\trenderLegend() {\n\t\tthis.legendArea.textContent = '';\n\t\tlet x = 0;\n\t\tlet y = ROW_HEIGHT;\n\t\tlet radius = this.rawChartArgs.radius || 0;\n\n\t\tlet lessText = makeText('subdomain-name', x, y, 'Less',\n\t\t\t{\n\t\t\t\tfontSize: HEATMAP_SQUARE_SIZE + 1,\n\t\t\t\tdy: 9\n\t\t\t}\n\t\t);\n\t\tx = (COL_WIDTH * 2) + COL_WIDTH/2;\n\t\tthis.legendArea.appendChild(lessText);\n\n\t\tthis.colors.slice(0, HEATMAP_DISTRIBUTION_SIZE).map((color, i) => {\n\t\t\tconst square = heatSquare('heatmap-legend-unit', x + (COL_WIDTH + 3) * i,\n\t\t\t\ty, HEATMAP_SQUARE_SIZE, radius, color);\n\t\t\tthis.legendArea.appendChild(square);\n\t\t});\n\n\t\tlet moreTextX = x + HEATMAP_DISTRIBUTION_SIZE * (COL_WIDTH + 3) + COL_WIDTH/4;\n\t\tlet moreText = makeText('subdomain-name', moreTextX, y, 'More',\n\t\t\t{\n\t\t\t\tfontSize: HEATMAP_SQUARE_SIZE + 1,\n\t\t\t\tdy: 9\n\t\t\t}\n\t\t);\n\t\tthis.legendArea.appendChild(moreText);\n\t}\n\n\tgetDomains() {\n\t\tlet s = this.state;\n\t\tconst [startMonth, startYear] = [s.start.getMonth(), s.start.getFullYear()];\n\t\tconst [endMonth, endYear] = [s.end.getMonth(), s.end.getFullYear()];\n\n\t\tconst noOfMonths = (endMonth - startMonth + 1) + (endYear - startYear) * 12;\n\n\t\tlet domainConfigs = [];\n\n\t\tlet startOfMonth = clone(s.start);\n\t\tfor(var i = 0; i < noOfMonths; i++) {\n\t\t\tlet endDate = s.end;\n\t\t\tif(!areInSameMonth(startOfMonth, s.end)) {\n\t\t\t\tlet [month, year] = [startOfMonth.getMonth(), startOfMonth.getFullYear()];\n\t\t\t\tendDate = getLastDateInMonth(month, year);\n\t\t\t}\n\t\t\tdomainConfigs.push(this.getDomainConfig(startOfMonth, endDate));\n\n\t\t\taddDays(endDate, 1);\n\t\t\tstartOfMonth = endDate;\n\t\t}\n\n\t\treturn domainConfigs;\n\t}\n\n\tgetDomainConfig(startDate, endDate='') {\n\t\tlet [month, year] = [startDate.getMonth(), startDate.getFullYear()];\n\t\tlet startOfWeek = setDayToSunday(startDate); // TODO: Monday as well\n\t\tendDate = clone(endDate) || getLastDateInMonth(month, year);\n\n\t\tlet domainConfig = {\n\t\t\tindex: month,\n\t\t\tcols: []\n\t\t};\n\n\t\taddDays(endDate, 1);\n\t\tlet noOfMonthWeeks = getWeeksBetween(startOfWeek, endDate);\n\n\t\tlet cols = [], col;\n\t\tfor(var i = 0; i < noOfMonthWeeks; i++) {\n\t\t\tcol = this.getCol(startOfWeek, month);\n\t\t\tcols.push(col);\n\n\t\t\tstartOfWeek = new Date(col[NO_OF_DAYS_IN_WEEK - 1].yyyyMmDd);\n\t\t\taddDays(startOfWeek, 1);\n\t\t}\n\n\t\tif(col[NO_OF_DAYS_IN_WEEK - 1].dataValue !== undefined) {\n\t\t\taddDays(startOfWeek, 1);\n\t\t\tcols.push(this.getCol(startOfWeek, month, true));\n\t\t}\n\n\t\tdomainConfig.cols = cols;\n\n\t\treturn domainConfig;\n\t}\n\n\tgetCol(startDate, month, empty = false) {\n\t\tlet s = this.state;\n\n\t\t// startDate is the start of week\n\t\tlet currentDate = clone(startDate);\n\t\tlet col = [];\n\n\t\tfor(var i = 0; i < NO_OF_DAYS_IN_WEEK; i++, addDays(currentDate, 1)) {\n\t\t\tlet config = {};\n\n\t\t\t// Non-generic adjustment for entire heatmap, needs state\n\t\t\tlet currentDateWithinData = currentDate >= s.start && currentDate <= s.end;\n\n\t\t\tif(empty || currentDate.getMonth() !== month || !currentDateWithinData) {\n\t\t\t\tconfig.yyyyMmDd = getYyyyMmDd(currentDate);\n\t\t\t} else {\n\t\t\t\tconfig = this.getSubDomainConfig(currentDate);\n\t\t\t}\n\t\t\tcol.push(config);\n\t\t}\n\n\t\treturn col;\n\t}\n\n\tgetSubDomainConfig(date) {\n\t\tlet yyyyMmDd = getYyyyMmDd(date);\n\t\tlet dataValue = this.data.dataPoints[yyyyMmDd];\n\t\tlet config = {\n\t\t\tyyyyMmDd: yyyyMmDd,\n\t\t\tdataValue: dataValue || 0,\n\t\t\tfill: this.colors[getMaxCheckpoint(dataValue, this.state.distribution)]\n\t\t};\n\t\treturn config;\n\t}\n}\n\nfunction dataPrep(data, type) {\n\tdata.labels = data.labels || [];\n\n\tlet datasetLength = data.labels.length;\n\n\t// Datasets\n\tlet datasets = data.datasets;\n\tlet zeroArray = new Array(datasetLength).fill(0);\n\tif(!datasets) {\n\t\t// default\n\t\tdatasets = [{\n\t\t\tvalues: zeroArray\n\t\t}];\n\t}\n\n\tdatasets.map(d=> {\n\t\t// Set values\n\t\tif(!d.values) {\n\t\t\td.values = zeroArray;\n\t\t} else {\n\t\t\t// Check for non values\n\t\t\tlet vals = d.values;\n\t\t\tvals = vals.map(val => (!isNaN(val) ? val : 0));\n\n\t\t\t// Trim or extend\n\t\t\tif(vals.length > datasetLength) {\n\t\t\t\tvals = vals.slice(0, datasetLength);\n\t\t\t} else {\n\t\t\t\tvals = fillArray(vals, datasetLength - vals.length, 0);\n\t\t\t}\n\t\t\td.values = vals;\n\t\t}\n\n\t\t// Set type\n\t\tif(!d.chartType ) {\n\t\t\tif(!AXIS_DATASET_CHART_TYPES.includes(type)) type === DEFAULT_AXIS_CHART_TYPE;\n\t\t\td.chartType = type;\n\t\t}\n\n\t});\n\n\t// Markers\n\n\t// Regions\n\t// data.yRegions = data.yRegions || [];\n\tif(data.yRegions) {\n\t\tdata.yRegions.map(d => {\n\t\t\tif(d.end < d.start) {\n\t\t\t\t[d.start, d.end] = [d.end, d.start];\n\t\t\t}\n\t\t});\n\t}\n\n\treturn data;\n}\n\nfunction zeroDataPrep(realData) {\n\tlet datasetLength = realData.labels.length;\n\tlet zeroArray = new Array(datasetLength).fill(0);\n\n\tlet zeroData = {\n\t\tlabels: realData.labels.slice(0, -1),\n\t\tdatasets: realData.datasets.map(d => {\n\t\t\treturn {\n\t\t\t\tname: '',\n\t\t\t\tvalues: zeroArray.slice(0, -1),\n\t\t\t\tchartType: d.chartType\n\t\t\t};\n\t\t}),\n\t};\n\n\tif(realData.yMarkers) {\n\t\tzeroData.yMarkers = [\n\t\t\t{\n\t\t\t\tvalue: 0,\n\t\t\t\tlabel: ''\n\t\t\t}\n\t\t];\n\t}\n\n\tif(realData.yRegions) {\n\t\tzeroData.yRegions = [\n\t\t\t{\n\t\t\t\tstart: 0,\n\t\t\t\tend: 0,\n\t\t\t\tlabel: ''\n\t\t\t}\n\t\t];\n\t}\n\n\treturn zeroData;\n}\n\nfunction getShortenedLabels(chartWidth, labels=[], isSeries=true) {\n\tlet allowedSpace = chartWidth / labels.length;\n\tif(allowedSpace <= 0) allowedSpace = 1;\n\tlet allowedLetters = allowedSpace / DEFAULT_CHAR_WIDTH;\n\n\tlet seriesMultiple;\n\tif(isSeries) {\n\t\t// Find the maximum label length for spacing calculations\n\t\tlet maxLabelLength = Math.max(...labels.map(label => label.length));\n\t\tseriesMultiple = Math.ceil(maxLabelLength/allowedLetters);\n\t}\n\n\tlet calcLabels = labels.map((label, i) => {\n\t\tlabel += \"\";\n\t\tif(label.length > allowedLetters) {\n\n\t\t\tif(!isSeries) {\n\t\t\t\tif(allowedLetters-3 > 0) {\n\t\t\t\t\tlabel = label.slice(0, allowedLetters-3) + \" ...\";\n\t\t\t\t} else {\n\t\t\t\t\tlabel = label.slice(0, allowedLetters) + '..';\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif(i % seriesMultiple !== 0) {\n\t\t\t\t\tlabel = \"\";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn label;\n\t});\n\n\treturn calcLabels;\n}\n\nclass AxisChart extends BaseChart {\n\tconstructor(parent, args) {\n\t\tsuper(parent, args);\n\n\t\tthis.barOptions = args.barOptions || {};\n\t\tthis.lineOptions = args.lineOptions || {};\n\n\t\tthis.type = args.type || 'line';\n\t\tthis.init = 1;\n\n\t\tthis.setup();\n\t}\n\n\tsetMeasures() {\n\t\tif(this.data.datasets.length <= 1) {\n\t\t\tthis.config.showLegend = 0;\n\t\t\tthis.measures.paddings.bottom = 30;\n\t\t}\n\t}\n\n\tconfigure(options) {\n\t\tsuper.configure(options);\n\n\t\toptions.axisOptions = options.axisOptions || {};\n\t\toptions.tooltipOptions = options.tooltipOptions || {};\n\n\t\tthis.config.xAxisMode = options.axisOptions.xAxisMode || 'span';\n\t\tthis.config.yAxisMode = options.axisOptions.yAxisMode || 'span';\n\t\tthis.config.xIsSeries = options.axisOptions.xIsSeries || 0;\n\t\tthis.config.shortenYAxisNumbers = options.axisOptions.shortenYAxisNumbers || 0;\n\n\t\tthis.config.formatTooltipX = options.tooltipOptions.formatTooltipX;\n\t\tthis.config.formatTooltipY = options.tooltipOptions.formatTooltipY;\n\n\t\tthis.config.valuesOverPoints = options.valuesOverPoints;\n\t}\n\n\tprepareData(data=this.data) {\n\t\treturn dataPrep(data, this.type);\n\t}\n\n\tprepareFirstData(data=this.data) {\n\t\treturn zeroDataPrep(data);\n\t}\n\n\tcalc(onlyWidthChange = false) {\n\t\tthis.calcXPositions();\n\t\tif(!onlyWidthChange) {\n\t\t\tthis.calcYAxisParameters(this.getAllYValues(), this.type === 'line');\n\t\t}\n\t\tthis.makeDataByIndex();\n\t}\n\n\tcalcXPositions() {\n\t\tlet s = this.state;\n\t\tlet labels = this.data.labels;\n\t\ts.datasetLength = labels.length;\n\n\t\ts.unitWidth = this.width/(s.datasetLength);\n\t\t// Default, as per bar, and mixed. Only line will be a special case\n\t\ts.xOffset = s.unitWidth/2;\n\n\t\t// // For a pure Line Chart\n\t\t// s.unitWidth = this.width/(s.datasetLength - 1);\n\t\t// s.xOffset = 0;\n\n\t\ts.xAxis = {\n\t\t\tlabels: labels,\n\t\t\tpositions: labels.map((d, i) =>\n\t\t\t\tfloatTwo(s.xOffset + i * s.unitWidth)\n\t\t\t)\n\t\t};\n\t}\n\n\tcalcYAxisParameters(dataValues, withMinimum = 'false') {\n\t\tconst yPts = calcChartIntervals(dataValues, withMinimum);\n\t\tconst scaleMultiplier = this.height / getValueRange(yPts);\n\t\tconst intervalHeight = getIntervalSize(yPts) * scaleMultiplier;\n\t\tconst zeroLine = this.height - (getZeroIndex(yPts) * intervalHeight);\n\n\t\tthis.state.yAxis = {\n\t\t\tlabels: yPts,\n\t\t\tpositions: yPts.map(d => zeroLine - d * scaleMultiplier),\n\t\t\tscaleMultiplier: scaleMultiplier,\n\t\t\tzeroLine: zeroLine,\n\t\t};\n\n\t\t// Dependent if above changes\n\t\tthis.calcDatasetPoints();\n\t\tthis.calcYExtremes();\n\t\tthis.calcYRegions();\n\t}\n\n\tcalcDatasetPoints() {\n\t\tlet s = this.state;\n\t\tlet scaleAll = values => values.map(val => scale(val, s.yAxis));\n\n\t\ts.datasets = this.data.datasets.map((d, i) => {\n\t\t\tlet values = d.values;\n\t\t\tlet cumulativeYs = d.cumulativeYs || [];\n\t\t\treturn {\n\t\t\t\tname: d.name && d.name.replace(/<|>|&/g, (char) => char == '&' ? '&' : char == '<' ? '<' : '>'),\n\t\t\t\tindex: i,\n\t\t\t\tchartType: d.chartType,\n\n\t\t\t\tvalues: values,\n\t\t\t\tyPositions: scaleAll(values),\n\n\t\t\t\tcumulativeYs: cumulativeYs,\n\t\t\t\tcumulativeYPos: scaleAll(cumulativeYs),\n\t\t\t};\n\t\t});\n\t}\n\n\tcalcYExtremes() {\n\t\tlet s = this.state;\n\t\tif(this.barOptions.stacked) {\n\t\t\ts.yExtremes = s.datasets[s.datasets.length - 1].cumulativeYPos;\n\t\t\treturn;\n\t\t}\n\t\ts.yExtremes = new Array(s.datasetLength).fill(9999);\n\t\ts.datasets.map(d => {\n\t\t\td.yPositions.map((pos, j) => {\n\t\t\t\tif(pos < s.yExtremes[j]) {\n\t\t\t\t\ts.yExtremes[j] = pos;\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t}\n\n\tcalcYRegions() {\n\t\tlet s = this.state;\n\t\tif(this.data.yMarkers) {\n\t\t\tthis.state.yMarkers = this.data.yMarkers.map(d => {\n\t\t\t\td.position = scale(d.value, s.yAxis);\n\t\t\t\tif(!d.options) d.options = {};\n\t\t\t\t// if(!d.label.includes(':')) {\n\t\t\t\t// \td.label += ': ' + d.value;\n\t\t\t\t// }\n\t\t\t\treturn d;\n\t\t\t});\n\t\t}\n\t\tif(this.data.yRegions) {\n\t\t\tthis.state.yRegions = this.data.yRegions.map(d => {\n\t\t\t\td.startPos = scale(d.start, s.yAxis);\n\t\t\t\td.endPos = scale(d.end, s.yAxis);\n\t\t\t\tif(!d.options) d.options = {};\n\t\t\t\treturn d;\n\t\t\t});\n\t\t}\n\t}\n\n\tgetAllYValues() {\n\t\tlet key = 'values';\n\n\t\tif(this.barOptions.stacked) {\n\t\t\tkey = 'cumulativeYs';\n\t\t\tlet cumulative = new Array(this.state.datasetLength).fill(0);\n\t\t\tthis.data.datasets.map((d, i) => {\n\t\t\t\tlet values = this.data.datasets[i].values;\n\t\t\t\td[key] = cumulative = cumulative.map((c, i) => c + values[i]);\n\t\t\t});\n\t\t}\n\n\t\tlet allValueLists = this.data.datasets.map(d => d[key]);\n\t\tif(this.data.yMarkers) {\n\t\t\tallValueLists.push(this.data.yMarkers.map(d => d.value));\n\t\t}\n\t\tif(this.data.yRegions) {\n\t\t\tthis.data.yRegions.map(d => {\n\t\t\t\tallValueLists.push([d.end, d.start]);\n\t\t\t});\n\t\t}\n\n\t\treturn [].concat(...allValueLists);\n\t}\n\n\tsetupComponents() {\n\t\tlet componentConfigs = [\n\t\t\t[\n\t\t\t\t'yAxis',\n\t\t\t\t{\n\t\t\t\t\tmode: this.config.yAxisMode,\n\t\t\t\t\twidth: this.width,\n\t\t\t\t\tshortenNumbers: this.config.shortenYAxisNumbers\n\t\t\t\t\t// pos: 'right'\n\t\t\t\t},\n\t\t\t\tfunction() {\n\t\t\t\t\treturn this.state.yAxis;\n\t\t\t\t}.bind(this)\n\t\t\t],\n\n\t\t\t[\n\t\t\t\t'xAxis',\n\t\t\t\t{\n\t\t\t\t\tmode: this.config.xAxisMode,\n\t\t\t\t\theight: this.height,\n\t\t\t\t\t// pos: 'right'\n\t\t\t\t},\n\t\t\t\tfunction() {\n\t\t\t\t\tlet s = this.state;\n\t\t\t\t\ts.xAxis.calcLabels = getShortenedLabels(this.width,\n\t\t\t\t\t\ts.xAxis.labels, this.config.xIsSeries);\n\n\t\t\t\t\treturn s.xAxis;\n\t\t\t\t}.bind(this)\n\t\t\t],\n\n\t\t\t[\n\t\t\t\t'yRegions',\n\t\t\t\t{\n\t\t\t\t\twidth: this.width,\n\t\t\t\t\tpos: 'right'\n\t\t\t\t},\n\t\t\t\tfunction() {\n\t\t\t\t\treturn this.state.yRegions;\n\t\t\t\t}.bind(this)\n\t\t\t],\n\t\t];\n\n\t\tlet barDatasets = this.state.datasets.filter(d => d.chartType === 'bar');\n\t\tlet lineDatasets = this.state.datasets.filter(d => d.chartType === 'line');\n\n\t\tlet barsConfigs = barDatasets.map(d => {\n\t\t\tlet index = d.index;\n\t\t\treturn [\n\t\t\t\t'barGraph' + '-' + d.index,\n\t\t\t\t{\n\t\t\t\t\tindex: index,\n\t\t\t\t\tcolor: this.colors[index],\n\t\t\t\t\tstacked: this.barOptions.stacked,\n\n\t\t\t\t\t// same for all datasets\n\t\t\t\t\tvaluesOverPoints: this.config.valuesOverPoints,\n\t\t\t\t\tminHeight: this.height * MIN_BAR_PERCENT_HEIGHT,\n\t\t\t\t},\n\t\t\t\tfunction() {\n\t\t\t\t\tlet s = this.state;\n\t\t\t\t\tlet d = s.datasets[index];\n\t\t\t\t\tlet stacked = this.barOptions.stacked;\n\n\t\t\t\t\tlet spaceRatio = this.barOptions.spaceRatio || BAR_CHART_SPACE_RATIO;\n\t\t\t\t\tlet barsWidth = s.unitWidth * (1 - spaceRatio);\n\t\t\t\t\tlet barWidth = barsWidth/(stacked ? 1 : barDatasets.length);\n\n\t\t\t\t\tlet xPositions = s.xAxis.positions.map(x => x - barsWidth/2);\n\t\t\t\t\tif(!stacked) {\n\t\t\t\t\t\txPositions = xPositions.map(p => p + barWidth * index);\n\t\t\t\t\t}\n\n\t\t\t\t\tlet labels = new Array(s.datasetLength).fill('');\n\t\t\t\t\tif(this.config.valuesOverPoints) {\n\t\t\t\t\t\tif(stacked && d.index === s.datasets.length - 1) {\n\t\t\t\t\t\t\tlabels = d.cumulativeYs;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tlabels = d.values;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\tlet offsets = new Array(s.datasetLength).fill(0);\n\t\t\t\t\tif(stacked) {\n\t\t\t\t\t\toffsets = d.yPositions.map((y, j) => y - d.cumulativeYPos[j]);\n\t\t\t\t\t}\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\txPositions: xPositions,\n\t\t\t\t\t\tyPositions: d.yPositions,\n\t\t\t\t\t\toffsets: offsets,\n\t\t\t\t\t\t// values: d.values,\n\t\t\t\t\t\tlabels: labels,\n\n\t\t\t\t\t\tzeroLine: s.yAxis.zeroLine,\n\t\t\t\t\t\tbarsWidth: barsWidth,\n\t\t\t\t\t\tbarWidth: barWidth,\n\t\t\t\t\t};\n\t\t\t\t}.bind(this)\n\t\t\t];\n\t\t});\n\n\t\tlet lineConfigs = lineDatasets.map(d => {\n\t\t\tlet index = d.index;\n\t\t\treturn [\n\t\t\t\t'lineGraph' + '-' + d.index,\n\t\t\t\t{\n\t\t\t\t\tindex: index,\n\t\t\t\t\tcolor: this.colors[index],\n\t\t\t\t\tsvgDefs: this.svgDefs,\n\t\t\t\t\theatline: this.lineOptions.heatline,\n\t\t\t\t\tregionFill: this.lineOptions.regionFill,\n\t\t\t\t\tspline: this.lineOptions.spline,\n\t\t\t\t\thideDots: this.lineOptions.hideDots,\n\t\t\t\t\thideLine: this.lineOptions.hideLine,\n\n\t\t\t\t\t// same for all datasets\n\t\t\t\t\tvaluesOverPoints: this.config.valuesOverPoints,\n\t\t\t\t},\n\t\t\t\tfunction() {\n\t\t\t\t\tlet s = this.state;\n\t\t\t\t\tlet d = s.datasets[index];\n\t\t\t\t\tlet minLine = s.yAxis.positions[0] < s.yAxis.zeroLine\n\t\t\t\t\t\t? s.yAxis.positions[0] : s.yAxis.zeroLine;\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\txPositions: s.xAxis.positions,\n\t\t\t\t\t\tyPositions: d.yPositions,\n\n\t\t\t\t\t\tvalues: d.values,\n\n\t\t\t\t\t\tzeroLine: minLine,\n\t\t\t\t\t\tradius: this.lineOptions.dotSize || LINE_CHART_DOT_SIZE,\n\t\t\t\t\t};\n\t\t\t\t}.bind(this)\n\t\t\t];\n\t\t});\n\n\t\tlet markerConfigs = [\n\t\t\t[\n\t\t\t\t'yMarkers',\n\t\t\t\t{\n\t\t\t\t\twidth: this.width,\n\t\t\t\t\tpos: 'right'\n\t\t\t\t},\n\t\t\t\tfunction() {\n\t\t\t\t\treturn this.state.yMarkers;\n\t\t\t\t}.bind(this)\n\t\t\t]\n\t\t];\n\n\t\tcomponentConfigs = componentConfigs.concat(barsConfigs, lineConfigs, markerConfigs);\n\n\t\tlet optionals = ['yMarkers', 'yRegions'];\n\t\tthis.dataUnitComponents = [];\n\n\t\tthis.components = new Map(componentConfigs\n\t\t\t.filter(args => !optionals.includes(args[0]) || this.state[args[0]])\n\t\t\t.map(args => {\n\t\t\t\tlet component = getComponent(...args);\n\t\t\t\tif(args[0].includes('lineGraph') || args[0].includes('barGraph')) {\n\t\t\t\t\tthis.dataUnitComponents.push(component);\n\t\t\t\t}\n\t\t\t\treturn [args[0], component];\n\t\t\t}));\n\t}\n\n\tmakeDataByIndex() {\n\t\tthis.dataByIndex = {};\n\n\t\tlet s = this.state;\n\t\tlet formatX = this.config.formatTooltipX;\n\t\tlet formatY = this.config.formatTooltipY;\n\t\tlet titles = s.xAxis.labels;\n\n\t\ttitles.map((label, index) => {\n\t\t\tlet values = this.state.datasets.map((set, i) => {\n\t\t\t\tlet value = set.values[index];\n\t\t\t\treturn {\n\t\t\t\t\ttitle: set.name,\n\t\t\t\t\tvalue: value,\n\t\t\t\t\tyPos: set.yPositions[index],\n\t\t\t\t\tcolor: this.colors[i],\n\t\t\t\t\tformatted: formatY ? formatY(value) : value,\n\t\t\t\t};\n\t\t\t});\n\n\t\t\tthis.dataByIndex[index] = {\n\t\t\t\tlabel: label,\n\t\t\t\tformattedLabel: formatX ? formatX(label) : label,\n\t\t\t\txPos: s.xAxis.positions[index],\n\t\t\t\tvalues: values,\n\t\t\t\tyExtreme: s.yExtremes[index],\n\t\t\t};\n\t\t});\n\t}\n\n\tbindTooltip() {\n\t\t// NOTE: could be in tooltip itself, as it is a given functionality for its parent\n\t\tthis.container.addEventListener('mousemove', (e) => {\n\t\t\tlet m = this.measures;\n\t\t\tlet o = getOffset(this.container);\n\t\t\tlet relX = e.pageX - o.left - getLeftOffset(m);\n\t\t\tlet relY = e.pageY - o.top;\n\n\t\t\tif(relY < this.height + getTopOffset(m)\n\t\t\t\t&& relY > getTopOffset(m)) {\n\t\t\t\tthis.mapTooltipXPosition(relX);\n\t\t\t} else {\n\t\t\t\tthis.tip.hideTip();\n\t\t\t}\n\t\t});\n\t}\n\n\tmapTooltipXPosition(relX) {\n\t\tlet s = this.state;\n\t\tif(!s.yExtremes) return;\n\n\t\tlet index = getClosestInArray(relX, s.xAxis.positions, true);\n\t\tif (index >= 0) {\n\t\t\tlet dbi = this.dataByIndex[index];\n\n\t\t\tthis.tip.setValues(\n\t\t\t\tdbi.xPos + this.tip.offset.x,\n\t\t\t\tdbi.yExtreme + this.tip.offset.y,\n\t\t\t\t{name: dbi.formattedLabel, value: ''},\n\t\t\t\tdbi.values,\n\t\t\t\tindex\n\t\t\t);\n\n\t\t\tthis.tip.showTip();\n\t\t}\n\t}\n\n\trenderLegend() {\n\t\tlet s = this.data;\n\t\tif(s.datasets.length > 1) {\n\t\t\tthis.legendArea.textContent = '';\n\t\t\ts.datasets.map((d, i) => {\n\t\t\t\tlet barWidth = AXIS_LEGEND_BAR_SIZE;\n\t\t\t\t// let rightEndPoint = this.baseWidth - this.measures.margins.left - this.measures.margins.right;\n\t\t\t\t// let multiplier = s.datasets.length - i;\n\t\t\t\tlet rect = legendBar(\n\t\t\t\t\t// rightEndPoint - multiplier * barWidth,\t// To right align\n\t\t\t\t\tbarWidth * i,\n\t\t\t\t\t'0',\n\t\t\t\t\tbarWidth,\n\t\t\t\t\tthis.colors[i],\n\t\t\t\t\td.name,\n\t\t\t\t\tthis.config.truncateLegends);\n\t\t\t\tthis.legendArea.appendChild(rect);\n\t\t\t});\n\t\t}\n\t}\n\n\n\n\t// Overlay\n\tmakeOverlay() {\n\t\tif(this.init) {\n\t\t\tthis.init = 0;\n\t\t\treturn;\n\t\t}\n\t\tif(this.overlayGuides) {\n\t\t\tthis.overlayGuides.forEach(g => {\n\t\t\t\tlet o = g.overlay;\n\t\t\t\to.parentNode.removeChild(o);\n\t\t\t});\n\t\t}\n\n\t\tthis.overlayGuides = this.dataUnitComponents.map(c => {\n\t\t\treturn {\n\t\t\t\ttype: c.unitType,\n\t\t\t\toverlay: undefined,\n\t\t\t\tunits: c.units,\n\t\t\t};\n\t\t});\n\n\t\tif(this.state.currentIndex === undefined) {\n\t\t\tthis.state.currentIndex = this.state.datasetLength - 1;\n\t\t}\n\n\t\t// Render overlays\n\t\tthis.overlayGuides.map(d => {\n\t\t\tlet currentUnit = d.units[this.state.currentIndex];\n\n\t\t\td.overlay = makeOverlay[d.type](currentUnit);\n\t\t\tthis.drawArea.appendChild(d.overlay);\n\t\t});\n\t}\n\n\tupdateOverlayGuides() {\n\t\tif(this.overlayGuides) {\n\t\t\tthis.overlayGuides.forEach(g => {\n\t\t\t\tlet o = g.overlay;\n\t\t\t\to.parentNode.removeChild(o);\n\t\t\t});\n\t\t}\n\t}\n\n\tbindOverlay() {\n\t\tthis.parent.addEventListener('data-select', () => {\n\t\t\tthis.updateOverlay();\n\t\t});\n\t}\n\n\tbindUnits() {\n\t\tthis.dataUnitComponents.map(c => {\n\t\t\tc.units.map(unit => {\n\t\t\t\tunit.addEventListener('click', () => {\n\t\t\t\t\tlet index = unit.getAttribute('data-point-index');\n\t\t\t\t\tthis.setCurrentDataPoint(index);\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\n\t\t// Note: Doesn't work as tooltip is absolutely positioned\n\t\tthis.tip.container.addEventListener('click', () => {\n\t\t\tlet index = this.tip.container.getAttribute('data-point-index');\n\t\t\tthis.setCurrentDataPoint(index);\n\t\t});\n\t}\n\n\tupdateOverlay() {\n\t\tthis.overlayGuides.map(d => {\n\t\t\tlet currentUnit = d.units[this.state.currentIndex];\n\t\t\tupdateOverlay[d.type](currentUnit, d.overlay);\n\t\t});\n\t}\n\n\tonLeftArrow() {\n\t\tthis.setCurrentDataPoint(this.state.currentIndex - 1);\n\t}\n\n\tonRightArrow() {\n\t\tthis.setCurrentDataPoint(this.state.currentIndex + 1);\n\t}\n\n\tgetDataPoint(index=this.state.currentIndex) {\n\t\tlet s = this.state;\n\t\tlet data_point = {\n\t\t\tindex: index,\n\t\t\tlabel: s.xAxis.labels[index],\n\t\t\tvalues: s.datasets.map(d => d.values[index])\n\t\t};\n\t\treturn data_point;\n\t}\n\n\tsetCurrentDataPoint(index) {\n\t\tlet s = this.state;\n\t\tindex = parseInt(index);\n\t\tif(index < 0) index = 0;\n\t\tif(index >= s.xAxis.labels.length) index = s.xAxis.labels.length - 1;\n\t\tif(index === s.currentIndex) return;\n\t\ts.currentIndex = index;\n\t\tfire(this.parent, \"data-select\", this.getDataPoint());\n\t}\n\n\n\n\t// API\n\taddDataPoint(label, datasetValues, index=this.state.datasetLength) {\n\t\tsuper.addDataPoint(label, datasetValues, index);\n\t\tthis.data.labels.splice(index, 0, label);\n\t\tthis.data.datasets.map((d, i) => {\n\t\t\td.values.splice(index, 0, datasetValues[i]);\n\t\t});\n\t\tthis.update(this.data);\n\t}\n\n\tremoveDataPoint(index = this.state.datasetLength-1) {\n\t\tif (this.data.labels.length <= 1) {\n\t\t\treturn;\n\t\t}\n\t\tsuper.removeDataPoint(index);\n\t\tthis.data.labels.splice(index, 1);\n\t\tthis.data.datasets.map(d => {\n\t\t\td.values.splice(index, 1);\n\t\t});\n\t\tthis.update(this.data);\n\t}\n\n\tupdateDataset(datasetValues, index=0) {\n\t\tthis.data.datasets[index].values = datasetValues;\n\t\tthis.update(this.data);\n\t}\n\t// addDataset(dataset, index) {}\n\t// removeDataset(index = 0) {}\n\n\tupdateDatasets(datasets) {\n\t\tthis.data.datasets.map((d, i) => {\n\t\t\tif(datasets[i]) {\n\t\t\t\td.values = datasets[i];\n\t\t\t}\n\t\t});\n\t\tthis.update(this.data);\n\t}\n\n\t// updateDataPoint(dataPoint, index = 0) {}\n\t// addDataPoint(dataPoint, index = 0) {}\n\t// removeDataPoint(index = 0) {}\n}\n\nclass DonutChart extends AggregationChart {\n\tconstructor(parent, args) {\n\t\tsuper(parent, args);\n\t\tthis.type = 'donut';\n\t\tthis.initTimeout = 0;\n\t\tthis.init = 1;\n\n\t\tthis.setup();\n\t}\n\n\tconfigure(args) {\n\t\tsuper.configure(args);\n\t\tthis.mouseMove = this.mouseMove.bind(this);\n\t\tthis.mouseLeave = this.mouseLeave.bind(this);\n\n\t\tthis.hoverRadio = args.hoverRadio || 0.1;\n\t\tthis.config.startAngle = args.startAngle || 0;\n\n\t\tthis.clockWise = args.clockWise || false;\n\t\tthis.strokeWidth = args.strokeWidth || 30;\n\t}\n\n\tcalc() {\n\t\tsuper.calc();\n\t\tlet s = this.state;\n\t\tthis.radius =\n\t\t\tthis.height > this.width\n\t\t\t\t? this.center.x - this.strokeWidth / 2\n\t\t\t\t: this.center.y - this.strokeWidth / 2;\n\n\t\tconst { radius, clockWise } = this;\n\n\t\tconst prevSlicesProperties = s.slicesProperties || [];\n\t\ts.sliceStrings = [];\n\t\ts.slicesProperties = [];\n\t\tlet curAngle = 180 - this.config.startAngle;\n\n\t\ts.sliceTotals.map((total, i) => {\n\t\t\tconst startAngle = curAngle;\n\t\t\tconst originDiffAngle = (total / s.grandTotal) * FULL_ANGLE;\n\t\t\tconst largeArc = originDiffAngle > 180 ? 1: 0;\n\t\t\tconst diffAngle = clockWise ? -originDiffAngle : originDiffAngle;\n\t\t\tconst endAngle = curAngle = curAngle + diffAngle;\n\t\t\tconst startPosition = getPositionByAngle(startAngle, radius);\n\t\t\tconst endPosition = getPositionByAngle(endAngle, radius);\n\n\t\t\tconst prevProperty = this.init && prevSlicesProperties[i];\n\n\t\t\tlet curStart,curEnd;\n\t\t\tif(this.init) {\n\t\t\t\tcurStart = prevProperty ? prevProperty.startPosition : startPosition;\n\t\t\t\tcurEnd = prevProperty ? prevProperty.endPosition : startPosition;\n\t\t\t} else {\n\t\t\t\tcurStart = startPosition;\n\t\t\t\tcurEnd = endPosition;\n\t\t\t}\n\t\t\tconst curPath =\n\t\t\t\toriginDiffAngle === 360\n\t\t\t\t\t? makeStrokeCircleStr(curStart, curEnd, this.center, this.radius, this.clockWise, largeArc)\n\t\t\t\t\t: makeArcStrokePathStr(curStart, curEnd, this.center, this.radius, this.clockWise, largeArc);\n\n\t\t\ts.sliceStrings.push(curPath);\n\t\t\ts.slicesProperties.push({\n\t\t\t\tstartPosition,\n\t\t\t\tendPosition,\n\t\t\t\tvalue: total,\n\t\t\t\ttotal: s.grandTotal,\n\t\t\t\tstartAngle,\n\t\t\t\tendAngle,\n\t\t\t\tangle: diffAngle\n\t\t\t});\n\n\t\t});\n\t\tthis.init = 0;\n\t}\n\n\tsetupComponents() {\n\t\tlet s = this.state;\n\n\t\tlet componentConfigs = [\n\t\t\t[\n\t\t\t\t'donutSlices',\n\t\t\t\t{ },\n\t\t\t\tfunction() {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tsliceStrings: s.sliceStrings,\n\t\t\t\t\t\tcolors: this.colors,\n\t\t\t\t\t\tstrokeWidth: this.strokeWidth,\n\t\t\t\t\t};\n\t\t\t\t}.bind(this)\n\t\t\t]\n\t\t];\n\n\t\tthis.components = new Map(componentConfigs\n\t\t\t.map(args => {\n\t\t\t\tlet component = getComponent(...args);\n\t\t\t\treturn [args[0], component];\n\t\t\t}));\n\t}\n\n\tcalTranslateByAngle(property){\n\t\tconst{ radius, hoverRadio } = this;\n\t\tconst position = getPositionByAngle(property.startAngle+(property.angle / 2),radius);\n\t\treturn `translate3d(${(position.x) * hoverRadio}px,${(position.y) * hoverRadio}px,0)`;\n\t}\n\n\thoverSlice(path,i,flag,e){\n\t\tif(!path) return;\n\t\tconst color = this.colors[i];\n\t\tif(flag) {\n\t\t\ttransform(path, this.calTranslateByAngle(this.state.slicesProperties[i]));\n\t\t\tpath.style.stroke = lightenDarkenColor(color, 50);\n\t\t\tlet g_off = getOffset(this.svg);\n\t\t\tlet x = e.pageX - g_off.left + 10;\n\t\t\tlet y = e.pageY - g_off.top - 10;\n\t\t\tlet title = (this.formatted_labels && this.formatted_labels.length > 0\n\t\t\t\t? this.formatted_labels[i] : this.state.labels[i]) + ': ';\n\t\t\tlet percent = (this.state.sliceTotals[i] * 100 / this.state.grandTotal).toFixed(1);\n\t\t\tthis.tip.setValues(x, y, {name: title, value: percent + \"%\"});\n\t\t\tthis.tip.showTip();\n\t\t} else {\n\t\t\ttransform(path,'translate3d(0,0,0)');\n\t\t\tthis.tip.hideTip();\n\t\t\tpath.style.stroke = color;\n\t\t}\n\t}\n\n\tbindTooltip() {\n\t\tthis.container.addEventListener('mousemove', this.mouseMove);\n\t\tthis.container.addEventListener('mouseleave', this.mouseLeave);\n\t}\n\n\tmouseMove(e){\n\t\tconst target = e.target;\n\t\tlet slices = this.components.get('donutSlices').store;\n\t\tlet prevIndex = this.curActiveSliceIndex;\n\t\tlet prevAcitve = this.curActiveSlice;\n\t\tif(slices.includes(target)) {\n\t\t\tlet i = slices.indexOf(target);\n\t\t\tthis.hoverSlice(prevAcitve, prevIndex,false);\n\t\t\tthis.curActiveSlice = target;\n\t\t\tthis.curActiveSliceIndex = i;\n\t\t\tthis.hoverSlice(target, i, true, e);\n\t\t} else {\n\t\t\tthis.mouseLeave();\n\t\t}\n\t}\n\n\tmouseLeave(){\n\t\tthis.hoverSlice(this.curActiveSlice,this.curActiveSliceIndex,false);\n\t}\n}\n\n// import MultiAxisChart from './charts/MultiAxisChart';\nconst chartTypes = {\n\tbar: AxisChart,\n\tline: AxisChart,\n\t// multiaxis: MultiAxisChart,\n\tpercentage: PercentageChart,\n\theatmap: Heatmap,\n\tpie: PieChart,\n\tdonut: DonutChart,\n};\n\nfunction getChartByType(chartType = 'line', parent, options) {\n\tif (chartType === 'axis-mixed') {\n\t\toptions.type = 'line';\n\t\treturn new AxisChart(parent, options);\n\t}\n\n\tif (!chartTypes[chartType]) {\n\t\tconsole.error(\"Undefined chart type: \" + chartType);\n\t\treturn;\n\t}\n\n\treturn new chartTypes[chartType](parent, options);\n}\n\nclass Chart {\n\tconstructor(parent, options) {\n\t\treturn getChartByType(options.type, parent, options);\n\t}\n}\n\nexport { Chart, PercentageChart, PieChart, Heatmap, AxisChart };\n","/*\n * This file is part of Flarum.\n *\n * (c) Toby Zerner \n *\n * For the full copyright and license information, please view the LICENSE\n * file that was distributed with this source code.\n */\n\nimport DashboardWidget from 'flarum/components/DashboardWidget';\nimport SelectDropdown from 'flarum/components/SelectDropdown';\nimport Button from 'flarum/components/Button';\nimport icon from 'flarum/helpers/icon';\nimport abbreviateNumber from 'flarum/utils/abbreviateNumber';\n\nimport { Chart } from 'frappe-charts/dist/frappe-charts.esm.js';\n\nexport default class StatisticsWidget extends DashboardWidget {\n oninit(vnode) {\n super.oninit(vnode);\n\n // Create a Date object which represents the start of the day in the\n // configured timezone. To do this we convert a UTC time into that timezone,\n // reset to the first hour of the day, and then convert back into UTC time.\n // We'll be working with seconds rather than milliseconds throughout too.\n let today = new Date();\n today.setTime(today.getTime() + app.data.statistics.timezoneOffset * 1000);\n today.setUTCHours(0, 0, 0, 0);\n today.setTime(today.getTime() - app.data.statistics.timezoneOffset * 1000);\n today = today / 1000;\n\n this.entities = ['users', 'discussions', 'posts'];\n this.periods = {\n today: {start: today, end: today + 86400, step: 3600},\n last_7_days: {start: today - 86400 * 7, end: today, step: 86400},\n last_28_days: {start: today - 86400 * 28, end: today, step: 86400},\n last_12_months: {start: today - 86400 * 364, end: today, step: 86400 * 7}\n };\n\n this.selectedEntity = 'users';\n this.selectedPeriod = 'last_7_days';\n }\n\n className() {\n return 'StatisticsWidget';\n }\n\n content() {\n const thisPeriod = this.periods[this.selectedPeriod];\n\n return (\n
    \n
    \n
    {app.translator.trans('flarum-statistics.admin.statistics.total_label')}
    \n
    \n \n {Object.keys(this.periods).map(period => (\n \n {app.translator.trans(`flarum-statistics.admin.statistics.${period}_label`)}\n \n ))}\n \n
    \n
    \n\n {this.entities.map(entity => {\n const totalCount = this.getTotalCount(entity);\n const thisPeriodCount = this.getPeriodCount(entity, thisPeriod);\n const lastPeriodCount = this.getPeriodCount(entity, this.getLastPeriod(thisPeriod));\n const periodChange = lastPeriodCount > 0 && (thisPeriodCount - lastPeriodCount) / lastPeriodCount * 100;\n\n return (\n \n

    {app.translator.trans('flarum-statistics.admin.statistics.'+entity+'_heading')}

    \n
    {abbreviateNumber(totalCount)}
    \n
    \n {abbreviateNumber(thisPeriodCount)}{' '}\n {periodChange ? (\n 0 ? 'up' : 'down')}>\n {icon('fas fa-arrow-'+(periodChange > 0 ? 'up' : 'down'))}\n {Math.abs(periodChange.toFixed(1))}%\n \n ) : ''}\n
    \n     \n );\n })}\n\n
    \n
    \n );\n }\n\n drawChart(vnode) {\n if (this.chart && this.entity === this.selectedEntity && this.period === this.selectedPeriod) {\n return;\n }\n\n const offset = app.data.statistics.timezoneOffset;\n const period = this.periods[this.selectedPeriod];\n const periodLength = period.end - period.start;\n const labels = [];\n const thisPeriod = [];\n const lastPeriod = [];\n\n for (let i = period.start; i < period.end; i += period.step) {\n let label;\n\n if (period.step < 86400) {\n label = dayjs.unix(i + offset).format('h A');\n } else {\n label = dayjs.unix(i + offset).format('D MMM');\n\n if (period.step > 86400) {\n label += ' - ' + dayjs.unix(i + offset + period.step - 1).format('D MMM');\n }\n }\n\n labels.push(label);\n\n thisPeriod.push(this.getPeriodCount(this.selectedEntity, {start: i, end: i + period.step}));\n\n lastPeriod.push(this.getPeriodCount(this.selectedEntity, {start: i - periodLength, end: i - periodLength + period.step}));\n }\n\n const datasets = [\n {values: lastPeriod},\n {values: thisPeriod}\n ];\n const data = {\n labels,\n datasets\n };\n\n if (!this.chart) {\n this.chart = new Chart(vnode.dom, {\n data,\n type: 'line',\n height: 280,\n axisOptions: {\n xAxisMode: 'tick',\n yAxisMode: 'span',\n xIsSeries: true\n },\n lineOptions: {\n hideDots: 1\n },\n colors: ['black', app.forum.attribute('themePrimaryColor')]\n });\n } else {\n this.chart.update(data);\n }\n\n this.entity = this.selectedEntity;\n this.period = this.selectedPeriod;\n }\n\n changeEntity(entity) {\n this.selectedEntity = entity;\n }\n\n changePeriod(period) {\n this.selectedPeriod = period;\n }\n\n getTotalCount(entity) {\n return app.data.statistics[entity].total;\n }\n\n getPeriodCount(entity, period) {\n const timed = app.data.statistics[entity].timed;\n let count = 0;\n\n for (const time in timed) {\n if (time >= period.start && time < period.end) {\n count += parseInt(timed[time]);\n }\n }\n\n return count;\n }\n\n getLastPeriod(thisPeriod) {\n return {\n start: thisPeriod.start - (thisPeriod.end - thisPeriod.start),\n end: thisPeriod.start\n };\n }\n}\n","import app from 'flarum/app';\nimport { extend } from 'flarum/extend';\n\nimport DashboardPage from 'flarum/components/DashboardPage';\n\nimport StatisticsWidget from './components/StatisticsWidget';\n\napp.initializers.add('flarum-statistics', () => {\n extend(DashboardPage.prototype, 'availableWidgets', widgets => {\n widgets.add('statistics', , 20);\n });\n});\n"],"sourceRoot":""} \ No newline at end of file