chartogram - npm Package Compare versions

Comparing version 0.1.13 to 0.1.14

bundle/chartogram.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).chartogram=e()}(this,function(){"use strict";function t(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function e(t){for(;t.firstChild;)t.removeChild(t.firstChild)}function n(t,e){var n,i=0,a=function(){n=void 0,i=Date.now(),t()};return function(){var r=Date.now(),o=e-(r-i);o<=0?(n&&(clearTimeout(n),n=void 0),i=r,t()):n||(n=setTimeout(a,o))}}function i(t,e,n){function i(t){n(t.changedTouches[0].clientX,t.changedTouches[0].clientY)}function a(t){n(t.clientX,t.clientY)}function r(){window.removeEventListener("pointermove",a),window.removeEventListener("touchmove",i),window.removeEventListener("pointerup",r),window.removeEventListener("pointercancel",r),window.removeEventListener("touchend",r),window.removeEventListener("touchcancel",r)}function o(t){if(t.touches.length>1)return r();e(t.changedTouches[0].clientX,t.changedTouches[0].clientY),window.addEventListener("touchmove",i),window.addEventListener("touchend",r),window.addEventListener("touchcancel",r)}function s(t){e(t.clientX,t.clientY),window.addEventListener("pointermove",a),window.addEventListener("pointerup",r),window.addEventListener("pointercancel",r)}return t.addEventListener("touchstart",o),t.addEventListener("pointerdown",s),function(){r(),t.removeEventListener(s),t.removeEventListener(o)}}function a(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var o=function(){function t(e){var n=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),r(this,"setUpListener",function(){!function(t,e,n,i){var a;function r(t,e){n(t,e,a)}function o(){a=t.getBoundingClientRect(),e()}function s(e){if(e.touches.length>1)return l();o(),t.addEventListener("touchend",l),t.addEventListener("touchmove",c),t.addEventListener("touchend",l),t.addEventListener("touchcancel",l),c(e)}function c(t){var e=t.changedTouches[0].clientX,n=t.changedTouches[0].clientY;e<a.left||e>a.left+a.width||n<a.top||n>a.top+a.height?l():r(e,n)}function h(t){r(t.clientX,t.clientY)}function l(){t.removeEventListener("pointermove",h),t.removeEventListener("pointerleave",l),t.removeEventListener("pointercancel",l),t.removeEventListener("touchmove",c),t.removeEventListener("touchend",l),t.removeEventListener("touchcancel",l),i()}function u(){o(),t.addEventListener("pointermove",h),t.addEventListener("pointerleave",l),t.addEventListener("pointercancel",l)}t.addEventListener("touchstart",s),t.addEventListener("pointerenter",u)}(n.props.canvas,function(){},n.onTrack,function(){return n.unmount()})}),r(this,"onTrack",function(t,e,i){var a,r=n.props,o=r.minX,s=r.maxX,c=r.xPoints,h=o+(t-i.left)/i.width*(s-o),l=c.findIndex(function(t){return t>=h}),u=l-1;if((l<0||l>=c.length)&&(l=-1),(u<0||u>=c.length)&&(u=-1),l<0){if(u<0)return n.unmount();a=u}else if(u<0)a=l;else{var p=c[u],d=c[l];a=h-p>d-h?l:u}var m=c[a];m!==n.tooltipForX&&(n.tooltipForX=m,n.tooltip||n.mount(),n.updateTooltip(m,a,i.width))}),r(this,"unmountLine",function(){n.props.canvas.removeChild(n.line),n.line=void 0}),r(this,"mountPoints",function(){var t=n.props.pointsContainer;n.points=n.renderPoints();var e=n.points,i=Array.isArray(e),a=0;for(e=i?e:e[Symbol.iterator]();;){var r;if(i){if(a>=e.length)break;r=e[a++]}else{if((a=e.next()).done)break;r=a.value}var o=r;t.appendChild(o)}}),r(this,"unmountPoints",function(){var t=n.props.pointsContainer,e=n.points,i=Array.isArray(e),a=0;for(e=i?e:e[Symbol.iterator]();;){var r;if(i){if(a>=e.length)break;r=e[a++]}else{if((a=e.next()).done)break;r=a.value}var o=r;t.removeChild(o)}n.points=void 0}),r(this,"updateLinePosition",function(t){n.isLineRendered()||n.mountLine();var e=n.props,i=e.canvasWidth,a=e.aspectRatio,r=e.fixSvgCoordinate,o=e.mapX;n.line.setAttributeNS(null,"x1",r(o(t))),n.line.setAttributeNS(null,"x2",r(o(t))),n.line.setAttributeNS(null,"y1",0),n.line.setAttributeNS(null,"y2",r(i/a))}),r(this,"updatePointPositions",function(t,e){for(var i=n.props,a=i.maxY,r=i.y,o=0,s=0;o<r.length;){if(r[o].isShown){var c=n.points[s],h=r[o].points[t]/a;c.style.left="".concat(100*e,"%"),c.style.bottom="".concat(100*h,"%"),s++}o++}}),this.props=e}var e,n,i;return e=t,(n=[{key:"componentDidMount",value:function(){this.unlisten=this.setUpListener()}},{key:"componentWillUnmount",value:function(){this.unlisten(),this.unmount()}},{key:"componentDidUpdate",value:function(){}},{key:"mount",value:function(){var t=this.props.container;this.tooltip=this.renderTooltip(),t.appendChild(this.tooltip),this.mountPoints(),this.isLineRendered()||this.mountLine()}},{key:"unmount",value:function(){if(this.tooltip){var t=this.props.container;this.tooltipForX=void 0,t.removeChild(this.tooltip),this.tooltip=void 0,this.unmountPoints(),this.isLineRendered()&&this.unmountLine()}}},{key:"mountLine",value:function(){var t=this.props.canvas;this.line=this.renderLine(),t.insertBefore(this.line,t.querySelector("polyline"))}},{key:"renderTooltip",value:function(){var t=this.props.y,e=document.createElement("div");e.classList.add("chartogram__tooltip");var n=document.createElement("h1");n.classList.add("chartogram__tooltip-header"),e.appendChild(n);var i=document.createElement("dl");i.classList.add("chartogram__tooltip-values"),e.appendChild(i);var a=t,r=Array.isArray(a),o=0;for(a=r?a:a[Symbol.iterator]();;){var s;if(r){if(o>=a.length)break;s=a[o++]}else{if((o=a.next()).done)break;s=o.value}var c=s,h=c.isShown,l=c.color;if(h){var u=document.createElement("dt");u.style.color=l,i.appendChild(u);var p=document.createElement("dd");p.style.color=l,i.appendChild(p)}}return e}},{key:"renderLine",value:function(){var t=document.createElementNS("http://www.w3.org/2000/svg","line");return t.setAttribute("class","chartogram__tooltip-line"),t}},{key:"isLineRendered",value:function(){var t=this.props.canvas;return this.line&&this.line.parentNode===t}},{key:"renderPoints",value:function(){var t=[],e=this.props,n=e.pointsContainer,i=e.y,a=Array.isArray(i),r=0;for(i=a?i:i[Symbol.iterator]();;){var o;if(a){if(r>=i.length)break;o=i[r++]}else{if((r=i.next()).done)break;o=r.value}var s=o;if(s.isShown){var c=document.createElement("div");c.classList.add("chartogram__tooltip-point"),c.style.color=s.color,t.push(c),n.appendChild(c)}}return t}},{key:"updateTooltip",value:function(t,e,n){var i=this.props,a=i.minX,r=(t-a)/(i.maxX-a);this.updateTooltipDate(new Date(t)),this.updateTooltipValues(e),this.updateTooltipPosition(r,n),this.updatePointPositions(e,r),this.updateLinePosition(t)}},{key:"updateTooltipPosition",value:function(t,e){var n=this.props,i=n.tooltipShift,a=n.maxOverflow,r=t*e;r-=void 0===i?40:i;var o=this.tooltip.getBoundingClientRect().width,s=void 0===a?5:a;r<-1*s?r=-1*s:r+o>e+s&&(r=e+s-o),this.tooltip.style.left=r+"px"}},{key:"updateTooltipDate",value:function(t){var e=this.props,n=e.weekdays,i=e.months;this.tooltip.childNodes[0].textContent="".concat(n[t.getDay()],", ").concat(i[t.getMonth()]," ").concat(t.getDate())}},{key:"updateTooltipValues",value:function(t){var e=this.props.y,n=this.tooltip.childNodes[1],i=0,a=e,r=Array.isArray(a),o=0;for(a=r?a:a[Symbol.iterator]();;){var s;if(r){if(o>=a.length)break;s=a[o++]}else{if((o=a.next()).done)break;s=o.value}var c=s,h=c.isShown,l=c.points,u=c.name;h&&(n.childNodes[2*i].textContent=l[t],n.childNodes[2*i+1].textContent=u,i++)}}}])&&a(e.prototype,n),i&&a(e,i),t}();function s(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function c(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var h=function(){function t(e){var i=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),c(this,"onResize",function(t){i.setState({aspectRatio:i.getCanvasAspectRatio(),canvasWidthPx:i.canvas.getBoundingClientRect().width})}),c(this,"onResizeThrottled",n(this.onResize,33)),c(this,"mapX",function(t){var e=i.props,n=e.canvasWidth,a=e.minX;return(t-a)/(e.maxX-a)*n}),c(this,"mapY",function(t){var e=i.props,n=e.canvasWidth,a=e.minY;return(t-a)/(e.maxY-a)*n/i.state.aspectRatio}),c(this,"formatDate",function(t){var e=i.props.months,n=new Date(t);return"".concat(e[n.getMonth()]," ").concat(n.getDate())}),this.props=e}var i,a,r;return i=t,(a=[{key:"componentDidMount",value:function(t){this.canvasWrapper=t.querySelector(".chartogram__canvas-wrapper"),this.canvas=t.querySelector(".chartogram__canvas"),this.xAxis=t.querySelector(".chartogram__x"),this.yAxis=t.querySelector(".chartogram__y"),this.tooltipContainer=t.querySelector(".chartogram__plan"),this.state={aspectRatio:this.getCanvasAspectRatio(),canvasWidthPx:this.canvas.getBoundingClientRect().width},this.updateAspectRatio(),this.mountGridLines(),this.mountXAxis(),this.mountYAxis(),this.mountGraphs(),this.tooltip=new o(this.getTooltipProps()),this.tooltip.componentDidMount(t),this.render(),window.addEventListener("resize",this.onResizeThrottled)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.onResizeThrottled)}},{key:"setState",value:function(t){var e=this.state;this.state=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(e){c(t,e,n[e])})}return t}({},this.state,t),this.componentDidUpdate(this.props,e)}},{key:"componentDidUpdate",value:function(t,n){n&&(this.state.aspectRatio!==n.aspectRatio&&this.updateAspectRatio(this.state.aspectRatio),this.state.canvasWidthPx!==n.canvasWidthPx&&(e(this.xAxis),this.mountXAxis())),this.render(),this.tooltip.props=this.getTooltipProps(),this.tooltip.componentDidUpdate()}},{key:"getTooltipProps",value:function(){return{canvas:this.canvas,container:this.tooltipContainer,pointsContainer:this.canvasWrapper,weekdays:this.props.weekdays,months:this.props.months,canvasWidth:this.props.canvasWidth,aspectRatio:this.state.aspectRatio,mapX:this.mapX,fixSvgCoordinate:this.props.fixSvgCoordinate,minX:this.props.minX,maxX:this.props.maxX,maxY:this.props.maxY,xPoints:this.props.xPoints,y:this.props.y}}},{key:"updateAspectRatio",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.aspectRatio,e=this.props,n=e.canvasWidth,i=e.fixSvgCoordinate;this.canvas.setAttribute("viewBox","0 0 ".concat(n," ").concat(i(n/t)))}},{key:"getCanvasAspectRatio",value:function(){var t=this.canvas.getBoundingClientRect();return t.width/t.height}},{key:"render",value:function(){var t=this,e=this.props,n=e.yAxisTickMarksCount,i=e.y,a=e.minX,r=e.maxX,o=e.minY,s=e.maxY,c=e.graphOpacity,h=o,l=function(t,e){for(t=Math.floor(t);;){if(t<e)return e;if(t%e==0)return t;t--}}(s,10),u=(s-o)/(l-h);(function(t,e,n){for(var i=new Array(n),a=0;a<n;)i[a]=t+a*(e-t)/(n-1),a++;return i})(h,l,n).forEach(function(e,n){return t.updateGridLine(n,e)});for(var p=0;p<i.length;){var d=i[p],m=d.isShown,v=d.graphPoints,f=d.color,g=c[p];m||g>0?this.graphs[p]?this.updateGraph(p,v,g):this.mountGraph(p,v,f,g):this.graphs[p]&&this.unmountGraph(p),p++}this.updateAxes(a,r,h,l,u)}},{key:"renderGraph",value:function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,i=document.createElementNS("http://www.w3.org/2000/svg","polyline");return i.setAttribute("stroke",e),i.classList.add("chartogram__graph"),this.updateGraph(i,t,n),i}},{key:"renderGridLine",value:function(t){var e=this.props,n=e.fixSvgCoordinate,i=e.minX,a=e.maxX,r=(e.minY,e.maxY),o=document.createElementNS("http://www.w3.org/2000/svg","line");return o.classList.add("chartogram__grid-line"),o.setAttribute("x1",n(this.mapX(i))),o.setAttribute("x2",n(this.mapX(a))),o.setAttribute("y1",n(this.mapY(r-t))),o.setAttribute("y2",n(this.mapY(r-t))),o}},{key:"mountGridLines",value:function(){var t=this.props.yAxisTickMarksCount;this.gridLines=[];for(var e=0;e<t;){var n=this.renderGridLine(0);this.gridLines.push(n),this.canvas.appendChild(n),e++}}},{key:"mountXAxis",value:function(){for(var t=this.getXGaugeTickMarksCount(),e=0;e<t;)this.xAxis.appendChild(document.createElement("div")),e++}},{key:"getXGaugeTickMarksCount",value:function(){var t=this.props.xAxisTickMarkWidth,e=this.state.canvasWidthPx/t;return e=e>2?Math.pow(e-2,.75):0,2+Math.floor(e)}},{key:"mountYAxis",value:function(){for(var t=this.props.yAxisTickMarksCount,e=0;e<t;)this.yAxis.appendChild(document.createElement("div")),e++}},{key:"mountGraphs",value:function(){var t=this;this.graphs=[],this.props.y.forEach(function(e,n){var i=e.graphPoints,a=e.color;t.mountGraph(n,i,a)})}},{key:"mountGraph",value:function(t,e,n,i){var a=this.renderGraph(e,n,i);this.graphs[t]=a,this.canvas.appendChild(a)}},{key:"unmountGraph",value:function(t){this.canvas.removeChild(this.graphs[t]),this.graphs[t]=void 0}},{key:"updateGraph",value:function(t,e,n){var i=this,a=this.props,r=a.createPolylinePoints,o=a.xGraphPoints,s=a.maxY;"number"==typeof t&&(t=this.graphs[t]),t.setAttribute("points",r(o.map(this.mapX),e.map(function(t){return i.mapY(s-t)})).join(" ")),1!==n&&(t.style.opacity=n)}},{key:"updateGridLine",value:function(t,e){var n=this.props,i=n.fixSvgCoordinate,a=n.maxY,r=this.gridLines[t];r.setAttribute("y1",i(this.mapY(a-e))),r.setAttribute("y2",i(this.mapY(a-e)))}},{key:"updateAxes",value:function(t,e,n,i,a){this.updateAxis(this.xAxis,t,e,this.formatDate),this.updateAxis(this.yAxis,n,i),this.yAxis.style.height="".concat(100/a,"%")}},{key:"updateAxis",value:function(t,e,n,i){for(var a=t.childNodes.length,r=0;r<a;){var o=t.childNodes[r],s=e+r*(n-e)/(a-1);i&&(s=i(s)),o.textContent=s,r++}}}])&&s(i.prototype,a),r&&s(i,r),t}();function l(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],i=!0,a=!1,r=void 0;try{for(var o,s=t[Symbol.iterator]();!(i=(o=s.next()).done)&&(n.push(o.value),!e||n.length!==e);i=!0);}catch(t){a=!0,r=t}finally{try{i||null==s.return||s.return()}finally{if(a)throw r}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function u(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function p(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}h.INITIAL_MARKUP='\n\t<div class="chartogram__plan-with-axes">\n\t\t<div class="chartogram__plan">\n\t\t\t<div class="chartogram__top-border"></div>\n\t\t\t<div class="chartogram__canvas-wrapper">\n\t\t\t\t<svg class="chartogram__canvas"></svg>\n\t\t\t\t<div class="chartogram__x"></div>\n\t\t\t\t<div class="chartogram__y-wrapper">\n\t\t\t\t\t<div class="chartogram__y"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n';var d=function(){function e(t){var a=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),p(this,"onResize",function(t){a.setState({aspectRatio:a.getCanvasAspectRatio()})}),p(this,"onResizeThrottled",n(this.onResize,33)),p(this,"setState",function(t){t.aspectRatio!==a.state.aspectRatio&&a.updateAspectRatio(t.aspectRatio),a.state=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(e){p(t,e,n[e])})}return t}({},a.state,t),a.render()}),p(this,"mapX",function(t){var e=a.props,n=e.canvasWidth,i=e.data,r=i.minX;return(t-r)/(i.maxX-r)*n}),p(this,"mapY",function(t){var e=a.props,n=e.canvasWidth,i=e.minY;return(t-i)/(e.maxY-i)*n/a.state.aspectRatio}),p(this,"setUpTimelineWindowHandle",function(t){var e,n,r,o,s="left"===t?a.timelineWindowLeftHandle:a.timelineWindowRightHandle,c=parseFloat(getComputedStyle(a.timelineWindow).borderLeftWidth);return i(s,function(i){e=a.timeline.getBoundingClientRect();var s=a.timelineWindow.getBoundingClientRect();"left"===t?(n=e.left,r=s.left+s.width-2*c,o=i-s.left):(n=s.left+2*c,r=e.left+e.width,o=i-(s.left+s.width))},function(i){i-=o;var s=((i=Math.max(Math.min(i,r),n))-e.left)/e.width;"left"===t?a.updateBounds(s,a.props.toRatio):a.updateBounds(a.props.fromRatio,s)})}),p(this,"setUpTimelineWindow",function(){var t,e,n,r,o;return i(a.timelineWindowDrag,function(i){t=a.timeline.getBoundingClientRect(),e=a.timelineWindow.getBoundingClientRect(),o=i-e.left,n=t.left,r=t.left+(t.width-e.width)},function(i){i-=o;var s=((i=Math.max(Math.min(i,r),n))-t.left)/t.width;a.updateBounds(s,s+e.width/t.width)})}),p(this,"setTimelineWindowLeft",function(t){a.timelineOverlayLeft.style.right="".concat(100*(1-t),"%"),a.timelineWindow.style.left="".concat(100*t,"%")}),p(this,"setTimelineWindowRight",function(t){a.timelineOverlayRight.style.left="".concat(100*t,"%"),a.timelineWindow.style.right="".concat(100*(1-t),"%")}),this.props=t}var a,r,o;return a=e,(r=[{key:"componentDidUpdate",value:function(){this.state={aspectRatio:this.getCanvasAspectRatio()},this.onChangeBounds(this.props.fromRatio,this.props.toRatio),this.render()}},{key:"componentDidMount",value:function(t){this.timeline=t.querySelector(".chartogram__timeline"),this.timelineOverlayLeft=t.querySelector(".chartogram__timeline-overlay-left"),this.timelineWindowLeftHandle=t.querySelector(".chartogram__timeline-window__left-handle"),this.timelineWindow=t.querySelector(".chartogram__timeline-window"),this.timelineWindowDrag=t.querySelector(".chartogram__timeline-window__drag"),this.timelineWindowRightHandle=t.querySelector(".chartogram__timeline-window__right-handle"),this.timelineOverlayRight=t.querySelector(".chartogram__timeline-overlay-right"),this.timelineCanvas=t.querySelector(".chartogram__timeline-canvas"),this.state={aspectRatio:this.getCanvasAspectRatio()},this.updateAspectRatio(),this.setUpTimelineWindowHandle("left"),this.setUpTimelineWindowHandle("right"),this.setUpTimelineWindow(),window.addEventListener("resize",this.onResizeThrottled),this.onChangeBounds(this.props.fromRatio,this.props.toRatio),this.mountGraphs(),this.render()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.onResizeThrottled)}},{key:"updateAspectRatio",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.aspectRatio,e=this.props,n=e.canvasWidth,i=e.fixSvgCoordinate;this.timelineCanvas.setAttribute("viewBox","0 0 ".concat(n," ").concat(i(n/t)))}},{key:"getCanvasAspectRatio",value:function(){var t=this.timelineCanvas.getBoundingClientRect();return t.width/t.height}},{key:"render",value:function(){for(var e=this,n=this.props,i=n.y,a=n.data,r=n.graphOpacity,o=0,s=function(){var n=a.y[o],s=n.id,c=n.points,h=n.color,u=i.find(function(t){return t.id===s}).isShown,p=r[o];if(u||p>0){var d=l(function e(n,i,a){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:Math.max.apply(Math,t(i)),o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:.025,s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,c=arguments.length>6&&void 0!==arguments[6]?arguments[6]:new Array(n.length),h=arguments.length>7&&void 0!==arguments[7]?arguments[7]:new Array(n.length),l=arguments.length>8&&void 0!==arguments[8]?arguments[8]:0;if(s+2>n.length-1){for(;s<i.length;)c[l]=n[s],h[l]=i[s],l++,s++;return c=c.slice(0,l),h=h.slice(0,l),c.length<=a?[c,h]:(n.length/c.length<1.1&&(o=Math.min(o+.025,1)),e(c,h,a,r,o))}var u=(i[s+2]+i[s])/2;return Math.abs(u-i[s+1])/r<o?(c[l]=n[s],c[l+1]=n[s+2],h[l]=i[s],h[l+1]=i[s+2],e(n,i,a,r,o,s+2,c,h,l+1)):(c[l]=n[s],c[l+1]=n[s+1],c[l+2]=n[s+2],h[l]=i[s],h[l+1]=i[s+1],h[l+2]=i[s+2],e(n,i,a,r,o,s+2,c,h,l+2))}(a.x.points,c,80),2),m=d[0],v=d[1];e.graphs[o]?e.updateGraph(o,m,v,p):e.mountGraph(o,m,v,h,p)}else e.graphs[o]&&e.unmountGraph(o);o++};o<a.y.length;)s()}},{key:"renderGraph",value:function(t,e,n){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,a=document.createElementNS("http://www.w3.org/2000/svg","polyline");return a.setAttribute("stroke",n),this.updateGraph(a,t,e,i),a.classList.add("chartogram__graph"),a}},{key:"mountGraphs",value:function(){var t=this;this.graphs=[];var e=this.props.data;e.y.forEach(function(n,i){var a=n.points,r=n.color;t.mountGraph(i,e.x.points,a,r)})}},{key:"mountGraph",value:function(t,e,n,i,a){var r=this.renderGraph(e,n,i,a);this.graphs[t]=r,this.timelineCanvas.appendChild(r)}},{key:"unmountGraph",value:function(t){this.timelineCanvas.removeChild(this.graphs[t]),this.graphs[t]=void 0}},{key:"updateGraph",value:function(t,e,n,i){var a=this,r=this.props,o=r.maxY,s=r.createPolylinePoints;"number"==typeof t&&(t=this.graphs[t]),t.setAttribute("points",s(e.map(this.mapX),n.map(function(t){return a.mapY(o-t)})).join(" ")),1!==i&&(t.style.opacity=i)}},{key:"onChangeBounds",value:function(t,e){this.setTimelineWindowLeft(t),this.setTimelineWindowRight(e)}},{key:"updateBounds",value:function(t,e){this.props.onChangeBounds(t,e),this.props.fromRatio=t,this.props.toRatio=e,this.onChangeBounds(t,e)}}])&&u(a.prototype,r),o&&u(a,o),e}();function m(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function v(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}d.INITIAL_MARKUP='\n\t<div class="chartogram__timeline">\n\t\t<div class="chartogram__timeline-canvas-padding">\n\t\t\t<svg class="chartogram__timeline-canvas" preserveAspectRatio="none"></svg>\n\t\t</div>\n\t\t<div class="chartogram__timeline-overlay-left"></div>\n\t\t<div class="chartogram__timeline-overlay-right"></div>\n\t\t<div class="chartogram__timeline-window">\n\t\t\t<button type="button" class="chartogram__reset-button chartogram__timeline-window__drag"></button>\n\t\t\t<button type="button" class="chartogram__reset-button chartogram__timeline-window__left-handle"></button>\n\t\t\t<button type="button" class="chartogram__reset-button chartogram__timeline-window__right-handle"></button>\n\t\t</div>\n\t</div>\n';var f=function(){function t(e){var n=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),v(this,"renderToggler",function(t){var e=t.id,i=t.name,a=t.color,r=document.createElement("button");r.setAttribute("type","button"),r.classList.add("chartogram__chart-toggler"),r.classList.add("chartogram__chart-toggler--on"),r.classList.add("chartogram__reset-button");var o="http://www.w3.org/2000/svg",s=document.createElementNS(o,"svg");s.setAttribute("viewBox","0 0 19 19"),s.setAttribute("class","chartogram__chart-toggler-check");var c=document.createElementNS(o,"circle");c.setAttribute("cx","9.5"),c.setAttribute("cy","9.5"),c.setAttribute("r","9.5"),c.setAttribute("fill",a),s.appendChild(c);var h=document.createElementNS(o,"circle");h.setAttribute("cx","9.5"),h.setAttribute("cy","9.5"),h.setAttribute("r","8"),h.setAttribute("class","chartogram__chart-toggler-check-circle"),s.appendChild(h);var l=document.createElementNS(o,"path");return l.setAttribute("d","M13.64 4.94l-6.2 6.34-1.69-1.9c-.73-.63-1.89.1-1.36 1.06l2 3.38c.3.43 1.04.85 1.78 0 .32-.42 6.31-7.93 6.31-7.93.74-.84-.2-1.58-.84-.95z"),l.setAttribute("fill","white"),l.setAttribute("class","chartogram__chart-toggler-check-mark"),s.appendChild(l),r.appendChild(s),r.appendChild(document.createTextNode(i)),r.addEventListener("click",function(){return n.onToggle(e,r)}),r}),v(this,"onToggle",function(t,e){(0,n.props.onToggle)(t)&&e.classList.toggle("chartogram__chart-toggler--on")}),this.props=e}var e,n,i;return e=t,(n=[{key:"componentDidMount",value:function(t){this.togglers=t.querySelector(".chartogram__chart-togglers"),this.mount()}},{key:"mount",value:function(){var t=this.props.data.y,e=Array.isArray(t),n=0;for(t=e?t:t[Symbol.iterator]();;){var i;if(e){if(n>=t.length)break;i=t[n++]}else{if((n=t.next()).done)break;i=n.value}var a=i;this.togglers.appendChild(this.renderToggler(a))}}}])&&m(e.prototype,n),i&&m(e,i),t}();function g(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(e){w(t,e,n[e])})}return t}function y(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function w(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}f.INITIAL_MARKUP='\n\t<div class="chartogram__chart-togglers"></div>\n';var b=function(){function t(e,n,i){var a=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),w(this,"transitions",[]),w(this,"tick",function(){var t,e=g({},a.getState()),n=a.transitions,i=Array.isArray(n),r=0;for(n=i?n:n[Symbol.iterator]();;){var o;if(i){if(r>=n.length)break;o=n[r++]}else{if((r=n.next()).done)break;o=r.value}var s=o;s.tick(e)&&(t=t||[]).push(s)}a.setState(e),t&&(a.transitions=a.transitions.filter(function(e){return t.indexOf(e)<0})),a.transitions.length>0?a.timer=requestAnimationFrame(a.tick):a.timer=void 0}),this.getState=e,this.setState=n,this.props=i}var e,n,i;return e=t,(n=[{key:"cleanUp",value:function(){this.timer&&(cancelAnimationFrame(this.timer),this.timer=void 0)}},{key:"batch",value:function(){this.pendingTransitions=[]}},{key:"run",value:function(){var t=this,e=this.transitions.filter(function(e){var n=t.pendingTransitions,i=Array.isArray(n),a=0;for(n=i?n:n[Symbol.iterator]();;){var r;if(i){if(a>=n.length)break;r=n[a++]}else{if((a=n.next()).done)break;r=a.value}var o=r;if(e.owner===o.owner&&e.property===o.property)return!0}});if(e.length>0){var n=g({},this.getState()),i=e,a=Array.isArray(i),r=0;for(i=a?i:i[Symbol.iterator]();;){var o;if(a){if(r>=i.length)break;o=i[r++]}else{if((r=i.next()).done)break;o=r.value}o.tick(n)}this.setState(n),this.transitions=this.transitions.filter(function(t){return e.indexOf(t)<0})}var s=this.getTransitionDuration(this.pendingTransitions);this.transitions=this.transitions.concat(this.pendingTransitions.map(function(e){return g({},e,{startedAt:Date.now(),duration:s,easing:t.props.transitionEasing,fromValue:e.getter?e.getter(t.getState()):t.getState()[e.property],tick:function(t){var e,n=Date.now()-this.startedAt,i=Math.min(n/this.duration,1);return i=x[this.easing](i),e=this.getNewValue?this.getNewValue(this.fromValue,this.toValue,i):this.fromValue+(this.toValue-this.fromValue)*i,this.setter?this.setter(t,e):t[this.property]=e,1===i}})})),this.pendingTransitions=void 0,this.timer||(this.timer=requestAnimationFrame(this.tick))}},{key:"add",value:function(t,e,n,i){var a,r;"string"!=typeof e&&(a=e,r=n,n=i,e=void 0),this.pendingTransitions.push({owner:t,property:e,getter:a,setter:r,toValue:n})}},{key:"getTransitionDuration",value:function(t){var e=this.props.transitionDuration,n=e,i=t.find(function(t){return"charts"===t.owner&&"minY"===t.property}),a=t.find(function(t){return"charts"===t.owner&&"maxY"===t.property});if(i&&a){var r=this.getState().minY,o=this.getState().maxY,s=i.toValue,c=a.toValue,h=o-r,l=Math.abs(c-o)/h,u=Math.abs(s-r)/h,p=Math.max(u,l);n=e*Math.max(.2,2*Math.min(p,.5))}return n}}])&&y(e.prototype,n),i&&y(e,i),t}(),x={linear:function(t){return t},easeInOutSin:function(t){return(1+Math.sin(Math.PI*t-Math.PI/2))/2},easeInOutQuad:function(t){return t<.5?2*t*t:(4-2*t)*t-1},easeInOutCubic:function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},easeOutCubic:function(t){return--t*t*t+1},easeOutQuad:function(t){return t*(2-t)}};function k(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function A(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(e){S(t,e,n[e])})}return t}function _(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function S(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var C=function(){function t(e,n){var i=this,a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"Title",r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),S(this,"setState",function(t){var e=i.state;i.state=A({},i.state,t),i.componentDidUpdate(i.props,e)}),S(this,"onToggle",function(t){var e=i.state.y.findIndex(function(e){return e.id===t}),n=i.state.y[e];if(n.isShown&&1===i.state.y.filter(function(t){return t.isShown}).length)return;n.isShown=!n.isShown;var a=i.calculateMinMaxY(i.state.y),r=a.minY,o=a.maxY,s=a.minYGlobal,c=a.maxYGlobal;return i.transition.batch(),i.transition.add("charts","minY",r),i.transition.add("charts","maxY",o),i.transition.add("timeline","minYGlobal",s),i.transition.add("timeline","maxYGlobal",c),i.transition.add("graph#".concat(t,"/opacity"),function(t){return t.graphOpacity[e]},function(t,n){t.graphOpacity=t.graphOpacity.slice(),t.graphOpacity[e]=n},n.isShown?1:0),i.transition.run(),!0}),S(this,"onChangeBounds",function(t,e){var n=i.createState(t,e),a=n.minY,r=n.maxY;delete n.minY,delete n.maxY,i.setState(n),i.transition.batch(),i.transition.add("charts","minY",a),i.transition.add("charts","maxY",r),i.transition.run()}),S(this,"createPolylinePoints",function(t,e){return n=t.map(i.fixSvgCoordinate),a=e.map(i.fixSvgCoordinate),n.map(function(t,e){return"".concat(t,",").concat(a[e])});var n,a}),S(this,"fixSvgCoordinate",function(t){var e=i.props.precisionFactor;return Math.round(t*e)/e}),this.props=A({title:a,transitionDuration:250,transitionEasing:"easeOutQuad",xAxisTickMarkWidth:60,yAxisTickMarksCount:6,timelineWindowSize:40,canvasWidth:512,precisionFactor:Math.pow(10,r.precision||3),months:T,weekdays:L},r),this.rootNode=e,this.data=A({},n,{minX:Math.min.apply(Math,k(n.x.points)),maxX:Math.max.apply(Math,k(n.x.points)),y:n.y.map(function(t){return A({},t,{min:Math.min.apply(Math,k(t.points)),max:Math.max.apply(Math,k(t.points))})})}),this.transition=new b(function(){return i.state},this.setState,this.props)}var n,i,a;return n=t,(i=[{key:"componentDidMount",value:function(){this.rootNode.classList.add("chartogram"),this.rootNode.innerHTML='\n\t\t\t<header class="chartogram__header">\n\t\t\t\t<h1 class="chartogram__title">'.concat(this.props.title,"</h1>\n\t\t\t</header>\n\t\t\t").concat(h.INITIAL_MARKUP,"\n\t\t\t").concat(d.INITIAL_MARKUP,"\n\t\t\t").concat(f.INITIAL_MARKUP,"\n\t\t"),this.state=this.getInitialState(),this.charts=new h(this.getChartsProps()),this.charts.componentDidMount(this.rootNode),this.timeline=new d(this.getTimelineProps()),this.timeline.componentDidMount(this.rootNode),this.togglers=new f(this.getTogglersProps()),this.togglers.componentDidMount(this.rootNode)}},{key:"componentWillUnmount",value:function(){this.charts.componentWillUnmount(),this.timeline.componentWillUnmount(),this.transition.cleanUp(),this.rootNode.classList.remove("chartogram"),e(this.rootNode)}},{key:"componentDidUpdate",value:function(t,e){this.charts.props=this.getChartsProps(),this.charts.componentDidUpdate(),this.shouldUpdateTimeline(e)&&(this.timeline.props=this.getTimelineProps(),this.timeline.componentDidUpdate())}},{key:"shouldUpdateTimeline",value:function(t){return this.state.graphOpacity!==t.graphOpacity||this.state.minYGlobal!==t.minYGlobal||this.state.maxYGlobal!==t.maxYGlobal}},{key:"getChartsProps",value:function(){return A({},this.props,this.state,{createPolylinePoints:this.createPolylinePoints,fixSvgCoordinate:this.fixSvgCoordinate})}},{key:"getTimelineProps",value:function(){return{data:this.data,canvasWidth:this.props.canvasWidth,fixSvgCoordinate:this.fixSvgCoordinate,createPolylinePoints:this.createPolylinePoints,fromRatio:this.state.fromRatio,toRatio:this.state.toRatio,minY:this.state.minYGlobal,maxY:this.state.maxYGlobal,y:this.state.y,graphOpacity:this.state.graphOpacity,onChangeBounds:this.onChangeBounds}}},{key:"getTogglersProps",value:function(){return{data:this.data,onToggle:this.onToggle}}},{key:"getInitialState",value:function(){var t,e=this.props.timelineWindowSize,n=this.data,i=n.minX,a=n.maxX;t=this.data.x.points.length>e?this.data.x.points.length-e:0;var r=(this.data.x.points[t]-i)/(a-i);return A({},this.createState(r,1),{graphOpacity:this.data.y.map(function(t){return 1})})}},{key:"createState",value:function(t,e){var n,i,a=this,r=this.data.x,o=this.data.minX+t*(this.data.maxX-this.data.minX),s=this.data.minX+e*(this.data.maxX-this.data.minX);n=o===this.data.minX?0:r.points.findIndex(function(t){return t>o})-1,i=s===this.data.maxX?r.points.length-1:r.points.findIndex(function(t){return t>s});var c=r.points.slice(n,i+1),h=c.slice();c.length>=2&&(r.points[n]!==o&&(h[0]=o),r.points[i]!==s&&(h[h.length-1]=s));var l=this.data.y.map(function(t,e){var h=a.data.y[e].points.slice(n,i+1),l=h.slice();if(c.length>=2){if(r.points[n]!==o){var u=a.data.y[e].points[n],p=u+(a.data.y[e].points[n+1]-u)*((o-a.data.x.points[n])/(a.data.x.points[n+1]-a.data.x.points[n]));l[0]=p}if(r.points[i]!==s){var d=a.data.y[e].points[i],m=a.data.y[e].points[i-1],v=m+(d-m)*((s-a.data.x.points[i-1])/(a.data.x.points[i]-a.data.x.points[i-1]));l[l.length-1]=v}}return A({},a.data.y[e],a.state?a.state.y[e]:{isShown:!0},{points:h,graphPoints:l,min:0,max:Math.max.apply(Math,k(l))})});return A({minX:o,maxX:s,fromIndex:n,toIndex:i,fromRatio:t,toRatio:e,xPoints:c,xGraphPoints:h},this.calculateMinMaxY(l),{y:l})}},{key:"calculateMinMaxY",value:function(t){var e=1/0,n=-1/0,i=t,a=Array.isArray(i),r=0;for(i=a?i:i[Symbol.iterator]();;){var o;if(a){if(r>=i.length)break;o=i[r++]}else{if((r=i.next()).done)break;o=r.value}var s=o;s.isShown&&(e=Math.min(e,s.min),n=Math.max(n,s.max))}var c=1/0,h=-1/0,l=function(){if(p){if(d>=u.length)return"break";m=u[d++]}else{if((d=u.next()).done)return"break";m=d.value}var e=m;t.find(function(t){return t.id===e.id}).isShown&&(c=Math.min(c,e.min),h=Math.max(h,e.max))},u=this.data.y,p=Array.isArray(u),d=0;for(u=p?u:u[Symbol.iterator]();;){var m;if("break"===l())break}return{minY:e,maxY:n,minYGlobal:c=0,maxYGlobal:h}}}])&&_(n.prototype,i),a&&_(n,a),t}(),T=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],L=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];return function(t,e,n,i){var a=new C(t,e,n,i);return a.componentDidMount(),function(){a.componentWillUnmount()}}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).chartogram=e()}(this,function(){"use strict";function t(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function e(t){for(;t.firstChild;)t.removeChild(t.firstChild)}function n(t,e){for(t=Math.floor(t);;){if(t<e)return e;if(t%e==0)return t;t--}}function i(t,e){var n,i=0,a=function(){n=void 0,i=Date.now(),t()};return function(){var r=Date.now(),o=e-(r-i);o<=0?(n&&(clearTimeout(n),n=void 0),i=r,t()):n||(n=setTimeout(a,o))}}function a(t,e,n){function i(t){n(t.changedTouches[0].clientX,t.changedTouches[0].clientY)}function a(t){n(t.clientX,t.clientY)}function r(){window.removeEventListener("pointermove",a),window.removeEventListener("touchmove",i),window.removeEventListener("pointerup",r),window.removeEventListener("pointercancel",r),window.removeEventListener("touchend",r),window.removeEventListener("touchcancel",r)}function o(t){if(t.touches.length>1)return r();e(t.changedTouches[0].clientX,t.changedTouches[0].clientY),window.addEventListener("touchmove",i),window.addEventListener("touchend",r),window.addEventListener("touchcancel",r)}function s(t){e(t.clientX,t.clientY),window.addEventListener("pointermove",a),window.addEventListener("pointerup",r),window.addEventListener("pointercancel",r)}return t.addEventListener("touchstart",o),t.addEventListener("pointerdown",s),function(){r(),t.removeEventListener(s),t.removeEventListener(o)}}function r(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function o(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var s=function(){function t(e){var n=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),o(this,"setUpListener",function(){!function(t,e,n,i){var a;function r(t,e){n(t,e,a)}function o(){a=t.getBoundingClientRect(),e()}function s(e){if(e.touches.length>1)return l();o(),t.addEventListener("touchend",l),t.addEventListener("touchmove",h),t.addEventListener("touchend",l),t.addEventListener("touchcancel",l),h(e)}function h(t){var e=t.changedTouches[0].clientX,n=t.changedTouches[0].clientY;e<a.left||e>a.left+a.width||n<a.top||n>a.top+a.height?l():r(e,n)}function c(t){r(t.clientX,t.clientY)}function l(){t.removeEventListener("pointermove",c),t.removeEventListener("pointerleave",l),t.removeEventListener("pointercancel",l),t.removeEventListener("touchmove",h),t.removeEventListener("touchend",l),t.removeEventListener("touchcancel",l),i()}function u(){o(),t.addEventListener("pointermove",c),t.addEventListener("pointerleave",l),t.addEventListener("pointercancel",l)}t.addEventListener("touchstart",s),t.addEventListener("pointerenter",u)}(n.props.canvas,function(){},n.onTrack,function(){return n.unmount()})}),o(this,"onTrack",function(t,e,i){var a,r=n.props,o=r.minX,s=r.maxX,h=r.xPoints,c=o+(t-i.left)/i.width*(s-o),l=h.findIndex(function(t){return t>=c}),u=l-1;if((l<0||l>=h.length)&&(l=-1),(u<0||u>=h.length)&&(u=-1),l<0){if(u<0)return n.unmount();a=u}else if(u<0)a=l;else{var p=h[u],d=h[l];a=c-p>d-c?l:u}var m=h[a];m!==n.tooltipForX&&(n.tooltipForX=m,n.tooltip||n.mount(),n.updateTooltip(m,a,i.width))}),o(this,"unmountLine",function(){n.props.canvas.removeChild(n.line),n.line=void 0}),o(this,"mountPoints",function(){var t=n.props.pointsContainer;n.points=n.renderPoints();var e=n.points,i=Array.isArray(e),a=0;for(e=i?e:e[Symbol.iterator]();;){var r;if(i){if(a>=e.length)break;r=e[a++]}else{if((a=e.next()).done)break;r=a.value}var o=r;t.appendChild(o)}}),o(this,"unmountPoints",function(){var t=n.props.pointsContainer,e=n.points,i=Array.isArray(e),a=0;for(e=i?e:e[Symbol.iterator]();;){var r;if(i){if(a>=e.length)break;r=e[a++]}else{if((a=e.next()).done)break;r=a.value}var o=r;t.removeChild(o)}n.points=void 0}),o(this,"updateLinePosition",function(t){n.isLineRendered()||n.mountLine();var e=n.props,i=e.canvasWidth,a=e.aspectRatio,r=e.fixSvgCoordinate,o=e.mapX;n.line.setAttributeNS(null,"x1",r(o(t))),n.line.setAttributeNS(null,"x2",r(o(t))),n.line.setAttributeNS(null,"y1",0),n.line.setAttributeNS(null,"y2",r(i/a))}),o(this,"updatePointPositions",function(t,e){for(var i=n.props,a=i.maxY,r=i.y,o=0,s=0;o<r.length;){if(r[o].isShown){var h=n.points[s],c=r[o].points[t]/a;h.style.left="".concat(100*e,"%"),h.style.bottom="".concat(100*c,"%"),s++}o++}}),this.props=e}var e,n,i;return e=t,(n=[{key:"componentDidMount",value:function(){this.unlisten=this.setUpListener()}},{key:"componentWillUnmount",value:function(){this.unlisten(),this.unmount()}},{key:"componentDidUpdate",value:function(){}},{key:"mount",value:function(){var t=this.props.container;this.tooltip=this.renderTooltip(),t.appendChild(this.tooltip),this.mountPoints(),this.isLineRendered()||this.mountLine()}},{key:"unmount",value:function(){if(this.tooltip){var t=this.props.container;this.tooltipForX=void 0,t.removeChild(this.tooltip),this.tooltip=void 0,this.unmountPoints(),this.isLineRendered()&&this.unmountLine()}}},{key:"mountLine",value:function(){var t=this.props.canvas;this.line=this.renderLine(),t.insertBefore(this.line,t.querySelector("polyline"))}},{key:"renderTooltip",value:function(){var t=this.props.y,e=document.createElement("div");e.classList.add("chartogram__tooltip");var n=document.createElement("h1");n.classList.add("chartogram__tooltip-header"),e.appendChild(n);var i=document.createElement("ul");i.classList.add("chartogram__tooltip-values"),e.appendChild(i);var a=t,r=Array.isArray(a),o=0;for(a=r?a:a[Symbol.iterator]();;){var s;if(r){if(o>=a.length)break;s=a[o++]}else{if((o=a.next()).done)break;s=o.value}var h=s,c=h.isShown,l=h.color;if(c){var u=document.createElement("li");u.style.color=l,i.appendChild(u);var p=document.createElement("div");u.appendChild(p);var d=document.createElement("div");u.appendChild(d)}}return e}},{key:"renderLine",value:function(){var t=document.createElementNS("http://www.w3.org/2000/svg","line");return t.setAttribute("class","chartogram__tooltip-line"),t}},{key:"isLineRendered",value:function(){var t=this.props.canvas;return this.line&&this.line.parentNode===t}},{key:"renderPoints",value:function(){var t=[],e=this.props,n=e.pointsContainer,i=e.y,a=Array.isArray(i),r=0;for(i=a?i:i[Symbol.iterator]();;){var o;if(a){if(r>=i.length)break;o=i[r++]}else{if((r=i.next()).done)break;o=r.value}var s=o;if(s.isShown){var h=document.createElement("div");h.classList.add("chartogram__tooltip-point"),h.style.color=s.color,t.push(h),n.appendChild(h)}}return t}},{key:"updateTooltip",value:function(t,e,n){var i=this.props,a=i.minX,r=(t-a)/(i.maxX-a);this.updateTooltipXValue(t),this.updateTooltipYValues(e),this.updateTooltipPosition(r,n),this.updatePointPositions(e,r),this.updateLinePosition(t)}},{key:"updateTooltipPosition",value:function(t,e){var n=this.props,i=n.tooltipShift,a=n.maxOverflow,r=Math.round(t*e);r-=void 0===i?40:i,this.tooltip.style.left=0,this.tooltip.style.marginRight=0;var o=this.tooltip.offsetWidth,s=void 0===a?5:a,h=0;r<0?(h=-1*Math.min(-1*r,s),r=0):r>e-o&&(h=Math.min(r-(e-o),s),r=e-o),this.tooltip.style.left=r+h+"px",this.tooltip.style.marginRight=-h+"px"}},{key:"updateTooltipXValue",value:function(t){var e=this.props.formatX;this.tooltip.childNodes[0].textContent=e(t,{long:!0})}},{key:"updateTooltipYValues",value:function(t){var e=this.props.y,n=this.tooltip.childNodes[1],i=0,a=e,r=Array.isArray(a),o=0;for(a=r?a:a[Symbol.iterator]();;){var s;if(r){if(o>=a.length)break;s=a[o++]}else{if((o=a.next()).done)break;s=o.value}var h=s,c=h.isShown,l=h.points,u=h.name;c&&(n.childNodes[i].childNodes[0].textContent=l[t],n.childNodes[i].childNodes[1].textContent=u,i++)}}}])&&r(e.prototype,n),i&&r(e,i),t}();function h(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function c(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var l=function(){function t(e){var n=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),c(this,"onResize",function(t){n.setState({aspectRatio:n.getCanvasAspectRatio(),canvasWidthPx:n.canvas.getBoundingClientRect().width})}),c(this,"onResizeThrottled",i(this.onResize,33)),c(this,"mapX",function(t){var e=n.props,i=e.canvasWidth,a=e.minX;return(t-a)/(e.maxX-a)*i}),c(this,"mapY",function(t){var e=n.props,i=e.canvasWidth,a=e.minY;return(t-a)/(e.maxY-a)*i/n.state.aspectRatio}),this.props=e}var n,a,r;return n=t,(a=[{key:"componentDidMount",value:function(t){this.canvasWrapper=t.querySelector(".chartogram__canvas-wrapper"),this.canvas=t.querySelector(".chartogram__canvas"),this.xAxis=t.querySelector(".chartogram__x"),this.yAxis=t.querySelector(".chartogram__y"),this.tooltipContainer=t.querySelector(".chartogram__plan"),this.state={aspectRatio:this.getCanvasAspectRatio(),canvasWidthPx:this.canvas.getBoundingClientRect().width},this.updateAspectRatio(),this.mountGridLines(),this.mountXAxis(),this.mountYAxis(),this.mountGraphs(),this.tooltip=new s(this.getTooltipProps()),this.tooltip.componentDidMount(t),this.render(),window.addEventListener("resize",this.onResizeThrottled)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.onResizeThrottled)}},{key:"setState",value:function(t){var e=this.state;this.state=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(e){c(t,e,n[e])})}return t}({},this.state,t),this.componentDidUpdate(this.props,e)}},{key:"componentDidUpdate",value:function(t,n){n&&(this.state.aspectRatio!==n.aspectRatio&&this.updateAspectRatio(this.state.aspectRatio),this.state.canvasWidthPx!==n.canvasWidthPx&&(e(this.xAxis),this.mountXAxis())),this.render(),this.tooltip.props=this.getTooltipProps(),this.tooltip.componentDidUpdate()}},{key:"getTooltipProps",value:function(){return{canvas:this.canvas,container:this.tooltipContainer,pointsContainer:this.canvasWrapper,formatX:this.props.formatX,formatY:this.props.formatY,canvasWidth:this.props.canvasWidth,aspectRatio:this.state.aspectRatio,mapX:this.mapX,fixSvgCoordinate:this.props.fixSvgCoordinate,minX:this.props.minX,maxX:this.props.maxX,maxY:this.props.maxY,xPoints:this.props.xPoints,y:this.props.y}}},{key:"updateAspectRatio",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.aspectRatio,e=this.props,n=e.canvasWidth,i=e.fixSvgCoordinate;this.canvas.setAttribute("viewBox","0 0 ".concat(n," ").concat(i(n/t)))}},{key:"getCanvasAspectRatio",value:function(){var t=this.canvas.getBoundingClientRect();return t.width/t.height}},{key:"render",value:function(){var t=this,e=this.props,n=e.yAxisTickMarksCount,i=e.y,a=e.minX,r=e.maxX,o=e.minY,s=e.maxY,h=e.maxYGaugeMark,c=e.graphOpacity,l=o,u=h,p=(s-o)/(u-l);(function(t,e,n){for(var i=new Array(n),a=0;a<n;)i[a]=t+a*(e-t)/(n-1),a++;return i})(l,u,n).forEach(function(e,n){return t.updateGridLine(n,e)});for(var d=0;d<i.length;){var m=i[d],f=m.isShown,v=m.graphPoints,g=m.color,y=c[d];f||y>0?this.graphs[d]?this.updateGraph(d,v,y):this.mountGraph(d,v,g,y):this.graphs[d]&&this.unmountGraph(d),d++}this.updateAxes(a,r,l,u,p)}},{key:"renderGraph",value:function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,i=document.createElementNS("http://www.w3.org/2000/svg","polyline");return i.setAttribute("stroke",e),i.classList.add("chartogram__graph"),this.updateGraph(i,t,n),i}},{key:"renderGridLine",value:function(t){var e=this.props,n=e.fixSvgCoordinate,i=e.minX,a=e.maxX,r=(e.minY,e.maxY),o=document.createElementNS("http://www.w3.org/2000/svg","line");return o.classList.add("chartogram__grid-line"),o.setAttribute("x1",n(this.mapX(i))),o.setAttribute("x2",n(this.mapX(a))),o.setAttribute("y1",n(this.mapY(r-t))),o.setAttribute("y2",n(this.mapY(r-t))),o}},{key:"mountGridLines",value:function(){var t=this.props.yAxisTickMarksCount;this.gridLines=[];for(var e=0;e<t;){var n=this.renderGridLine(0);this.gridLines.push(n),this.canvas.appendChild(n),e++}}},{key:"mountXAxis",value:function(){for(var t=this.getXGaugeTickMarksCount(),e=0;e<t;)this.xAxis.appendChild(document.createElement("div")),e++}},{key:"getXGaugeTickMarksCount",value:function(){var t=this.props.xAxisTickMarkWidth,e=this.state.canvasWidthPx/t;return e=e>2?Math.pow(e-2,.75):0,2+Math.floor(e)}},{key:"mountYAxis",value:function(){for(var t=this.props.yAxisTickMarksCount,e=0;e<t;)this.yAxis.appendChild(document.createElement("div")),e++}},{key:"mountGraphs",value:function(){var t=this;this.graphs=[],this.props.y.forEach(function(e,n){var i=e.graphPoints,a=e.color;t.mountGraph(n,i,a)})}},{key:"mountGraph",value:function(t,e,n,i){var a=this.renderGraph(e,n,i);this.graphs[t]=a,this.canvas.appendChild(a)}},{key:"unmountGraph",value:function(t){this.canvas.removeChild(this.graphs[t]),this.graphs[t]=void 0}},{key:"updateGraph",value:function(t,e,n){var i=this,a=this.props,r=a.createPolylinePoints,o=a.xGraphPoints,s=a.maxY;"number"==typeof t&&(t=this.graphs[t]),t.setAttribute("points",r(o.map(this.mapX),e.map(function(t){return i.mapY(s-t)})).join(" ")),1!==n&&(t.style.opacity=n)}},{key:"updateGridLine",value:function(t,e){var n=this.props,i=n.fixSvgCoordinate,a=n.maxY,r=this.gridLines[t];r.setAttribute("y1",i(this.mapY(a-e))),r.setAttribute("y2",i(this.mapY(a-e)))}},{key:"updateAxes",value:function(t,e,n,i,a){var r=this.props,o=r.formatX,s=r.formatY;this.updateAxis(this.xAxis,t,e,o),this.updateAxis(this.yAxis,n,i,s),this.yAxis.style.height="".concat(100/a,"%")}},{key:"updateAxis",value:function(t,e,n,i){for(var a=t.childNodes.length,r=0;r<a;){var o=t.childNodes[r],s=e+r*(n-e)/(a-1);i&&(s=i(s)),o.textContent=s,r++}}}])&&h(n.prototype,a),r&&h(n,r),t}();function u(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],i=!0,a=!1,r=void 0;try{for(var o,s=t[Symbol.iterator]();!(i=(o=s.next()).done)&&(n.push(o.value),!e||n.length!==e);i=!0);}catch(t){a=!0,r=t}finally{try{i||null==s.return||s.return()}finally{if(a)throw r}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function p(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function d(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}l.INITIAL_MARKUP='\n\t<div class="chartogram__plan-with-axes">\n\t\t<div class="chartogram__plan">\n\t\t\t<div class="chartogram__top-border"></div>\n\t\t\t<div class="chartogram__canvas-wrapper">\n\t\t\t\t<svg class="chartogram__canvas"></svg>\n\t\t\t\t<div class="chartogram__x"></div>\n\t\t\t\t<div class="chartogram__y-wrapper">\n\t\t\t\t\t<div class="chartogram__y"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n';var m=function(){function e(t){var n=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),d(this,"onResize",function(t){n.setState({aspectRatio:n.getCanvasAspectRatio()})}),d(this,"onResizeThrottled",i(this.onResize,33)),d(this,"setState",function(t){t.aspectRatio!==n.state.aspectRatio&&n.updateAspectRatio(t.aspectRatio),n.state=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(e){d(t,e,n[e])})}return t}({},n.state,t),n.render()}),d(this,"mapX",function(t){var e=n.props,i=e.canvasWidth,a=e.data,r=a.minX;return(t-r)/(a.maxX-r)*i}),d(this,"mapY",function(t){var e=n.props,i=e.canvasWidth,a=e.minY;return(t-a)/(e.maxY-a)*i/n.state.aspectRatio}),d(this,"setUpTimelineWindowHandle",function(t){var e,i,r,o,s="left"===t?n.timelineWindowLeftHandle:n.timelineWindowRightHandle,h=parseFloat(getComputedStyle(n.timelineWindow).borderLeftWidth);return a(s,function(a){e=n.timeline.getBoundingClientRect();var s=n.timelineWindow.getBoundingClientRect();"left"===t?(i=e.left,r=s.left+s.width-2*h,o=a-s.left):(i=s.left+2*h,r=e.left+e.width,o=a-(s.left+s.width))},function(a){a-=o;var s=((a=Math.max(Math.min(a,r),i))-e.left)/e.width;"left"===t?n.updateBounds(s,n.props.toRatio):n.updateBounds(n.props.fromRatio,s)})}),d(this,"setUpTimelineWindow",function(){var t,e,i,r,o;return a(n.timelineWindowDrag,function(a){t=n.timeline.getBoundingClientRect(),e=n.timelineWindow.getBoundingClientRect(),o=a-e.left,i=t.left,r=t.left+(t.width-e.width)},function(a){a-=o;var s=((a=Math.max(Math.min(a,r),i))-t.left)/t.width;n.updateBounds(s,s+e.width/t.width)})}),d(this,"setTimelineWindowLeft",function(t){n.timelineOverlayLeft.style.right="".concat(100*(1-t),"%"),n.timelineWindow.style.left="".concat(100*t,"%")}),d(this,"setTimelineWindowRight",function(t){n.timelineOverlayRight.style.left="".concat(100*t,"%"),n.timelineWindow.style.right="".concat(100*(1-t),"%")}),this.props=t}var n,r,o;return n=e,(r=[{key:"componentDidUpdate",value:function(){this.state={aspectRatio:this.getCanvasAspectRatio()},this.onChangeBounds(this.props.fromRatio,this.props.toRatio),this.render()}},{key:"componentDidMount",value:function(t){this.timeline=t.querySelector(".chartogram__timeline"),this.timelineOverlayLeft=t.querySelector(".chartogram__timeline-overlay-left"),this.timelineWindowLeftHandle=t.querySelector(".chartogram__timeline-window__left-handle"),this.timelineWindow=t.querySelector(".chartogram__timeline-window"),this.timelineWindowDrag=t.querySelector(".chartogram__timeline-window__drag"),this.timelineWindowRightHandle=t.querySelector(".chartogram__timeline-window__right-handle"),this.timelineOverlayRight=t.querySelector(".chartogram__timeline-overlay-right"),this.timelineCanvas=t.querySelector(".chartogram__timeline-canvas"),this.state={aspectRatio:this.getCanvasAspectRatio()},this.updateAspectRatio(),this.setUpTimelineWindowHandle("left"),this.setUpTimelineWindowHandle("right"),this.setUpTimelineWindow(),window.addEventListener("resize",this.onResizeThrottled),this.onChangeBounds(this.props.fromRatio,this.props.toRatio),this.mountGraphs(),this.render()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.onResizeThrottled)}},{key:"updateAspectRatio",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.aspectRatio,e=this.props,n=e.canvasWidth,i=e.fixSvgCoordinate;this.timelineCanvas.setAttribute("viewBox","0 0 ".concat(n," ").concat(i(n/t)))}},{key:"getCanvasAspectRatio",value:function(){var t=this.timelineCanvas.getBoundingClientRect();return t.width/t.height}},{key:"render",value:function(){for(var e=this,n=this.props,i=n.y,a=n.data,r=n.graphOpacity,o=0,s=function(){var n=a.y[o],s=n.id,h=n.points,c=n.color,l=i.find(function(t){return t.id===s}).isShown,p=r[o];if(l||p>0){var d=u(function e(n,i,a){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:Math.max.apply(Math,t(i)),o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:.025,s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,h=arguments.length>6&&void 0!==arguments[6]?arguments[6]:new Array(n.length),c=arguments.length>7&&void 0!==arguments[7]?arguments[7]:new Array(n.length),l=arguments.length>8&&void 0!==arguments[8]?arguments[8]:0;if(s+2>n.length-1){for(;s<i.length;)h[l]=n[s],c[l]=i[s],l++,s++;return h=h.slice(0,l),c=c.slice(0,l),h.length<=a?[h,c]:(n.length/h.length<1.1&&(o=Math.min(o+.025,1)),e(h,c,a,r,o))}var u=(i[s+2]+i[s])/2;return Math.abs(u-i[s+1])/r<o?(h[l]=n[s],h[l+1]=n[s+2],c[l]=i[s],c[l+1]=i[s+2],e(n,i,a,r,o,s+2,h,c,l+1)):(h[l]=n[s],h[l+1]=n[s+1],h[l+2]=n[s+2],c[l]=i[s],c[l+1]=i[s+1],c[l+2]=i[s+2],e(n,i,a,r,o,s+2,h,c,l+2))}(a.x.points,h,80),2),m=d[0],f=d[1];e.graphs[o]?e.updateGraph(o,m,f,p):e.mountGraph(o,m,f,c,p)}else e.graphs[o]&&e.unmountGraph(o);o++};o<a.y.length;)s()}},{key:"renderGraph",value:function(t,e,n){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,a=document.createElementNS("http://www.w3.org/2000/svg","polyline");return a.setAttribute("stroke",n),this.updateGraph(a,t,e,i),a.classList.add("chartogram__graph"),a}},{key:"mountGraphs",value:function(){var t=this;this.graphs=[];var e=this.props.data;e.y.forEach(function(n,i){var a=n.points,r=n.color;t.mountGraph(i,e.x.points,a,r)})}},{key:"mountGraph",value:function(t,e,n,i,a){var r=this.renderGraph(e,n,i,a);this.graphs[t]=r,this.timelineCanvas.appendChild(r)}},{key:"unmountGraph",value:function(t){this.timelineCanvas.removeChild(this.graphs[t]),this.graphs[t]=void 0}},{key:"updateGraph",value:function(t,e,n,i){var a=this,r=this.props,o=r.maxY,s=r.createPolylinePoints;"number"==typeof t&&(t=this.graphs[t]),t.setAttribute("points",s(e.map(this.mapX),n.map(function(t){return a.mapY(o-t)})).join(" ")),1!==i&&(t.style.opacity=i)}},{key:"onChangeBounds",value:function(t,e){this.setTimelineWindowLeft(t),this.setTimelineWindowRight(e)}},{key:"updateBounds",value:function(t,e){this.props.onChangeBounds(t,e),this.props.fromRatio=t,this.props.toRatio=e,this.onChangeBounds(t,e)}}])&&p(n.prototype,r),o&&p(n,o),e}();function f(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function v(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}m.INITIAL_MARKUP='\n\t<div class="chartogram__timeline">\n\t\t<div class="chartogram__timeline-canvas-padding">\n\t\t\t<svg class="chartogram__timeline-canvas" preserveAspectRatio="none"></svg>\n\t\t</div>\n\t\t<div class="chartogram__timeline-overlay-left"></div>\n\t\t<div class="chartogram__timeline-overlay-right"></div>\n\t\t<div class="chartogram__timeline-window">\n\t\t\t<button type="button" class="chartogram__reset-button chartogram__timeline-window__drag"></button>\n\t\t\t<button type="button" class="chartogram__reset-button chartogram__timeline-window__left-handle"></button>\n\t\t\t<button type="button" class="chartogram__reset-button chartogram__timeline-window__right-handle"></button>\n\t\t</div>\n\t</div>\n';var g=function(){function t(e){var n=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),v(this,"renderToggler",function(t){var e=t.id,i=t.name,a=t.color,r=document.createElement("button");r.setAttribute("type","button"),r.classList.add("chartogram__chart-toggler"),r.classList.add("chartogram__chart-toggler--on"),r.classList.add("chartogram__reset-button");var o="http://www.w3.org/2000/svg",s=document.createElementNS(o,"svg");s.setAttribute("viewBox","0 0 19 19"),s.setAttribute("class","chartogram__chart-toggler-check");var h=document.createElementNS(o,"circle");h.setAttribute("cx","9.5"),h.setAttribute("cy","9.5"),h.setAttribute("r","9.5"),h.setAttribute("fill",a),s.appendChild(h);var c=document.createElementNS(o,"circle");c.setAttribute("cx","9.5"),c.setAttribute("cy","9.5"),c.setAttribute("r","8"),c.setAttribute("class","chartogram__chart-toggler-check-circle"),s.appendChild(c);var l=document.createElementNS(o,"path");return l.setAttribute("d","M13.64 4.94l-6.2 6.34-1.69-1.9c-.73-.63-1.89.1-1.36 1.06l2 3.38c.3.43 1.04.85 1.78 0 .32-.42 6.31-7.93 6.31-7.93.74-.84-.2-1.58-.84-.95z"),l.setAttribute("fill","white"),l.setAttribute("class","chartogram__chart-toggler-check-mark"),s.appendChild(l),r.appendChild(s),r.appendChild(document.createTextNode(i)),r.addEventListener("click",function(){return n.onToggle(e,r)}),r}),v(this,"onToggle",function(t,e){(0,n.props.onToggle)(t)&&e.classList.toggle("chartogram__chart-toggler--on")}),this.props=e}var e,n,i;return e=t,(n=[{key:"componentDidMount",value:function(t){this.togglers=t.querySelector(".chartogram__chart-togglers"),this.mount()}},{key:"mount",value:function(){var t=this.props.data.y,e=Array.isArray(t),n=0;for(t=e?t:t[Symbol.iterator]();;){var i;if(e){if(n>=t.length)break;i=t[n++]}else{if((n=t.next()).done)break;i=n.value}var a=i;this.togglers.appendChild(this.renderToggler(a))}}}])&&f(e.prototype,n),i&&f(e,i),t}();function y(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(e){b(t,e,n[e])})}return t}function w(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function b(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}g.INITIAL_MARKUP='\n\t<div class="chartogram__chart-togglers"></div>\n';var x=function(){function t(e,n,i){var a=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),b(this,"transitions",[]),b(this,"tick",function(){var t,e=y({},a.getState()),n=a.transitions,i=Array.isArray(n),r=0;for(n=i?n:n[Symbol.iterator]();;){var o;if(i){if(r>=n.length)break;o=n[r++]}else{if((r=n.next()).done)break;o=r.value}var s=o;s.tick(e)&&(t=t||[]).push(s)}a.setState(e),t&&(a.transitions=a.transitions.filter(function(e){return t.indexOf(e)<0})),a.transitions.length>0?a.timer=requestAnimationFrame(a.tick):a.timer=void 0}),this.getState=e,this.setState=n,this.props=i}var e,n,i;return e=t,(n=[{key:"cleanUp",value:function(){this.timer&&(cancelAnimationFrame(this.timer),this.timer=void 0)}},{key:"batch",value:function(){this.pendingTransitions=[]}},{key:"run",value:function(){var t=this,e=this.transitions.filter(function(e){var n=t.pendingTransitions,i=Array.isArray(n),a=0;for(n=i?n:n[Symbol.iterator]();;){var r;if(i){if(a>=n.length)break;r=n[a++]}else{if((a=n.next()).done)break;r=a.value}var o=r;if(e.owner===o.owner&&e.property===o.property)return!0}});if(e.length>0){var n=y({},this.getState()),i=e,a=Array.isArray(i),r=0;for(i=a?i:i[Symbol.iterator]();;){var o;if(a){if(r>=i.length)break;o=i[r++]}else{if((r=i.next()).done)break;o=r.value}o.tick(n)}this.setState(n),this.transitions=this.transitions.filter(function(t){return e.indexOf(t)<0})}var s=this.getTransitionDuration(this.pendingTransitions);this.transitions=this.transitions.concat(this.pendingTransitions.map(function(e){return y({},e,{startedAt:Date.now(),duration:s,easing:t.props.transitionEasing,fromValue:e.getter?e.getter(t.getState()):t.getState()[e.property],tick:function(t){var e,n=Date.now()-this.startedAt,i=Math.min(n/this.duration,1);return i=k[this.easing](i),e=this.getNewValue?this.getNewValue(this.fromValue,this.toValue,i):this.fromValue+(this.toValue-this.fromValue)*i,this.setter?this.setter(t,e):t[this.property]=e,1===i}})})),this.pendingTransitions=void 0,this.timer||(this.timer=requestAnimationFrame(this.tick))}},{key:"add",value:function(t,e,n,i){var a,r;"string"!=typeof e&&(a=e,r=n,n=i,e=void 0),this.pendingTransitions.push({owner:t,property:e,getter:a,setter:r,toValue:n})}},{key:"getTransitionDuration",value:function(t){var e=this.props.transitionDuration,n=e,i=t.find(function(t){return"charts"===t.owner&&"minY"===t.property}),a=t.find(function(t){return"charts"===t.owner&&"maxY"===t.property});if(i&&a){var r=this.getState().minY,o=this.getState().maxY,s=i.toValue,h=a.toValue,c=o-r,l=Math.abs(h-o)/c,u=Math.abs(s-r)/c,p=Math.max(u,l);n=e*Math.max(.2,2*Math.min(p,.5))}return n}}])&&w(e.prototype,n),i&&w(e,i),t}(),k={linear:function(t){return t},easeInOutSin:function(t){return(1+Math.sin(Math.PI*t-Math.PI/2))/2},easeInOutQuad:function(t){return t<.5?2*t*t:(4-2*t)*t-1},easeInOutCubic:function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},easeOutCubic:function(t){return--t*t*t+1},easeOutQuad:function(t){return t*(2-t)}};function A(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function _(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(e){C(t,e,n[e])})}return t}function S(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function C(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var T=function(){function t(e,n){var i=this,a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"Title",r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),C(this,"setState",function(t){var e=i.state;i.state=_({},i.state,t),i.componentDidUpdate(i.props,e)}),C(this,"onToggle",function(t){var e=i.state.y.findIndex(function(e){return e.id===t}),n=i.state.y[e];if(n.isShown&&1===i.state.y.filter(function(t){return t.isShown}).length)return;n.isShown=!n.isShown;var a=i.calculateMinMaxY(i.state.y),r=a.minY,o=a.maxY,s=a.minYGlobal,h=a.maxYGlobal,c=a.maxYGaugeMark;return i.transition.batch(),i.transition.add("charts","minY",r),i.transition.add("charts","maxY",o),i.transition.add("charts","maxYGaugeMark",c),i.transition.add("timeline","minYGlobal",s),i.transition.add("timeline","maxYGlobal",h),i.transition.add("graph#".concat(t,"/opacity"),function(t){return t.graphOpacity[e]},function(t,n){t.graphOpacity=t.graphOpacity.slice(),t.graphOpacity[e]=n},n.isShown?1:0),i.transition.run(),!0}),C(this,"onChangeBounds",function(t,e){var n=i.createState(t,e),a=n.minY,r=n.maxY,o=n.maxYGaugeMark;delete n.minY,delete n.maxY,delete n.maxYGaugeMark,i.setState(n),i.transition.batch(),i.transition.add("charts","minY",a),i.transition.add("charts","maxY",r),i.transition.add("charts","maxYGaugeMark",o),i.transition.run()}),C(this,"createPolylinePoints",function(t,e){return n=t.map(i.fixSvgCoordinate),a=e.map(i.fixSvgCoordinate),n.map(function(t,e){return"".concat(t,",").concat(a[e])});var n,a}),C(this,"fixSvgCoordinate",function(t){var e=i.props.precisionFactor;return Math.round(t*e)/e}),C(this,"formatX",function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=i.props,a=n.locale,r=n.formatX;if(r)return r(t,e);i.dateTimeFormatShort||(i.dateTimeFormatShort=new Intl.DateTimeFormat(a,{month:"short",day:"numeric"}),i.dateTimeFormatLong=new Intl.DateTimeFormat(a,{weekday:"short",month:"short",day:"numeric"}),i.dateTimeFormatLongWithYear=new Intl.DateTimeFormat(a,{weekday:"short",year:"numeric",month:"short",day:"numeric"}));var o=new Date(t);return e.long?o.getFullYear()===(new Date).getFullYear()?i.dateTimeFormatLong.format(o):i.dateTimeFormatLongWithYear.format(o):i.dateTimeFormatShort.format(o)}),C(this,"formatY",function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=i.props.formatY;return n?n(t,e):Math.round(t)}),this.props=_({title:a,transitionDuration:250,transitionEasing:"easeOutQuad",xAxisTickMarkWidth:60,yAxisTickMarksCount:6,timelineWindowSize:40,canvasWidth:512,precisionFactor:Math.pow(10,r.precision||3)},r),this.rootNode=e,this.data=_({},n,{minX:Math.min.apply(Math,A(n.x.points)),maxX:Math.max.apply(Math,A(n.x.points)),y:n.y.map(function(t){return _({},t,{min:Math.min.apply(Math,A(t.points)),max:Math.max.apply(Math,A(t.points))})})}),this.transition=new x(function(){return i.state},this.setState,this.props)}var i,a,r;return i=t,(a=[{key:"componentDidMount",value:function(){this.rootNode.classList.add("chartogram"),this.rootNode.innerHTML='\n\t\t\t<header class="chartogram__header">\n\t\t\t\t<h1 class="chartogram__title">'.concat(this.props.title,"</h1>\n\t\t\t</header>\n\t\t\t").concat(l.INITIAL_MARKUP,"\n\t\t\t").concat(m.INITIAL_MARKUP,"\n\t\t\t").concat(g.INITIAL_MARKUP,"\n\t\t"),this.state=this.getInitialState(),this.charts=new l(this.getChartsProps()),this.charts.componentDidMount(this.rootNode),this.timeline=new m(this.getTimelineProps()),this.timeline.componentDidMount(this.rootNode),this.togglers=new g(this.getTogglersProps()),this.togglers.componentDidMount(this.rootNode)}},{key:"componentWillUnmount",value:function(){this.charts.componentWillUnmount(),this.timeline.componentWillUnmount(),this.transition.cleanUp(),this.rootNode.classList.remove("chartogram"),e(this.rootNode)}},{key:"componentDidUpdate",value:function(t,e){this.charts.props=this.getChartsProps(),this.charts.componentDidUpdate(),this.shouldUpdateTimeline(e)&&(this.timeline.props=this.getTimelineProps(),this.timeline.componentDidUpdate())}},{key:"shouldUpdateTimeline",value:function(t){return this.state.graphOpacity!==t.graphOpacity||this.state.minYGlobal!==t.minYGlobal||this.state.maxYGlobal!==t.maxYGlobal}},{key:"getChartsProps",value:function(){return _({},this.props,this.state,{createPolylinePoints:this.createPolylinePoints,fixSvgCoordinate:this.fixSvgCoordinate,formatX:this.formatX,formatY:this.formatY})}},{key:"getTimelineProps",value:function(){return{data:this.data,canvasWidth:this.props.canvasWidth,fixSvgCoordinate:this.fixSvgCoordinate,createPolylinePoints:this.createPolylinePoints,fromRatio:this.state.fromRatio,toRatio:this.state.toRatio,minY:this.state.minYGlobal,maxY:this.state.maxYGlobal,y:this.state.y,graphOpacity:this.state.graphOpacity,onChangeBounds:this.onChangeBounds}}},{key:"getTogglersProps",value:function(){return{data:this.data,onToggle:this.onToggle}}},{key:"getInitialState",value:function(){var t,e=this.props.timelineWindowSize,n=this.data,i=n.minX,a=n.maxX;t=this.data.x.points.length>e?this.data.x.points.length-e:0;var r=(this.data.x.points[t]-i)/(a-i);return _({},this.createState(r,1),{graphOpacity:this.data.y.map(function(t){return 1})})}},{key:"createState",value:function(t,e){var n,i,a=this,r=this.data.x,o=this.data.minX+t*(this.data.maxX-this.data.minX),s=this.data.minX+e*(this.data.maxX-this.data.minX);n=o===this.data.minX?0:r.points.findIndex(function(t){return t>o})-1,i=s===this.data.maxX?r.points.length-1:r.points.findIndex(function(t){return t>s});var h=r.points.slice(n,i+1),c=h.slice();h.length>=2&&(r.points[n]!==o&&(c[0]=o),r.points[i]!==s&&(c[c.length-1]=s));var l=this.data.y.map(function(t,e){var c=a.data.y[e].points.slice(n,i+1),l=c.slice();if(h.length>=2){if(r.points[n]!==o){var u=a.data.y[e].points[n],p=u+(a.data.y[e].points[n+1]-u)*((o-a.data.x.points[n])/(a.data.x.points[n+1]-a.data.x.points[n]));l[0]=p}if(r.points[i]!==s){var d=a.data.y[e].points[i],m=a.data.y[e].points[i-1],f=m+(d-m)*((s-a.data.x.points[i-1])/(a.data.x.points[i]-a.data.x.points[i-1]));l[l.length-1]=f}}return _({},a.data.y[e],a.state?a.state.y[e]:{isShown:!0},{points:c,graphPoints:l,min:0,max:Math.max.apply(Math,A(l))})});return _({minX:o,maxX:s,fromIndex:n,toIndex:i,fromRatio:t,toRatio:e,xPoints:h,xGraphPoints:c},this.calculateMinMaxY(l),{y:l})}},{key:"calculateMinMaxY",value:function(t){var e=1/0,i=-1/0,a=t,r=Array.isArray(a),o=0;for(a=r?a:a[Symbol.iterator]();;){var s;if(r){if(o>=a.length)break;s=a[o++]}else{if((o=a.next()).done)break;s=o.value}var h=s;h.isShown&&(e=Math.min(e,h.min),i=Math.max(i,h.max))}var c=1/0,l=-1/0,u=function(){if(d){if(m>=p.length)return"break";f=p[m++]}else{if((m=p.next()).done)return"break";f=m.value}var e=f;t.find(function(t){return t.id===e.id}).isShown&&(c=Math.min(c,e.min),l=Math.max(l,e.max))},p=this.data.y,d=Array.isArray(p),m=0;for(p=d?p:p[Symbol.iterator]();;){var f;if("break"===u())break}return{minY:e,maxY:i,minYGlobal:c=0,maxYGlobal:l,maxYGaugeMark:n(i,10)}}}])&&S(i.prototype,a),r&&S(i,r),t}();return function(t,e,n,i){var a=new T(t,e,n,i);return a.componentDidMount(),function(){a.componentWillUnmount()}}});
 //# sourceMappingURL=chartogram.js.map

commonjs/Chartogram.js

@@ -80,3 +80,4 @@ "use strict";
           minYGlobal = _this$calculateMinMax.minYGlobal,
-          maxYGlobal = _this$calculateMinMax.maxYGlobal;
+          maxYGlobal = _this$calculateMinMax.maxYGlobal,
+          maxYGaugeMark = _this$calculateMinMax.maxYGaugeMark;
 
@@ -89,2 +90,4 @@ _this.transition.batch();
 
+      _this.transition.add('charts', 'maxYGaugeMark', maxYGaugeMark);
+
       _this.transition.add('timeline', 'minYGlobal', minYGlobal);
@@ -112,4 +115,6 @@
       var maxY = state.maxY;
+      var maxYGaugeMark = state.maxYGaugeMark;
       delete state.minY;
       delete state.maxY;
+      delete state.maxYGaugeMark;
 
@@ -124,2 +129,4 @@ _this.setState(state);
 
+      _this.transition.add('charts', 'maxYGaugeMark', maxYGaugeMark);
+
       _this.transition.run();
@@ -138,2 +145,56 @@ });
 
+    _defineProperty(this, "formatX", function (value) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var _this$props = _this.props,
+          locale = _this$props.locale,
+          formatX = _this$props.formatX;
+
+      if (formatX) {
+        return formatX(value, options);
+      }
+
+      if (!_this.dateTimeFormatShort) {
+        _this.dateTimeFormatShort = new Intl.DateTimeFormat(locale, {
+          month: 'short',
+          day: 'numeric'
+        });
+        _this.dateTimeFormatLong = new Intl.DateTimeFormat(locale, {
+          weekday: 'short',
+          month: 'short',
+          day: 'numeric'
+        });
+        _this.dateTimeFormatLongWithYear = new Intl.DateTimeFormat(locale, {
+          weekday: 'short',
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric'
+        });
+      }
+
+      var date = new Date(value);
+
+      if (options.long) {
+        var isSameYear = date.getFullYear() === new Date().getFullYear();
+
+        if (isSameYear) {
+          return _this.dateTimeFormatLong.format(date);
+        } else {
+          return _this.dateTimeFormatLongWithYear.format(date);
+        }
+      } else {
+        return _this.dateTimeFormatShort.format(date);
+      }
+    });
+
+    _defineProperty(this, "formatY", function (value) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var formatY = _this.props.formatY;
+
+      if (formatY) {
+        return formatY(value, options);
+      }
+
+      return Math.round(value);
+    });
+
     this.props = _objectSpread({
@@ -147,5 +208,3 @@ title: title,
       canvasWidth: 512,
-      precisionFactor: Math.pow(10, props.precision || 3),
-      months: MONTHS,
-      weekdays: WEEKDAYS
+      precisionFactor: Math.pow(10, props.precision || 3)
     }, props);
@@ -212,3 +271,5 @@ this.rootNode = rootNode;
         createPolylinePoints: this.createPolylinePoints,
-        fixSvgCoordinate: this.fixSvgCoordinate
+        fixSvgCoordinate: this.fixSvgCoordinate,
+        formatX: this.formatX,
+        formatY: this.formatY
       });
@@ -419,3 +480,4 @@ }
         minYGlobal: minYGlobal,
-        maxYGlobal: maxYGlobal
+        maxYGlobal: maxYGlobal,
+        maxYGaugeMark: (0, _utility.getLowerSiblingDivisibleBy)(maxY, 10)
       };
@@ -429,4 +491,2 @@ }
 exports.default = Chartogram;
-var MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-var WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 //# sourceMappingURL=Chartogram.js.map

commonjs/Charts.js

@@ -60,8 +60,2 @@ "use strict";
 
-    _defineProperty(this, "formatDate", function (timestamp) {
-      var months = _this.props.months;
-      var date = new Date(timestamp);
-      return "".concat(months[date.getMonth()], " ").concat(date.getDate());
-    });
-
     this.props = props;
@@ -132,4 +126,4 @@ }
         pointsContainer: this.canvasWrapper,
-        weekdays: this.props.weekdays,
-        months: this.props.months,
+        formatX: this.props.formatX,
+        formatY: this.props.formatY,
         canvasWidth: this.props.canvasWidth,
@@ -174,6 +168,7 @@ aspectRatio: this.state.aspectRatio,
           maxY = _this$props4.maxY,
+          maxYGaugeMark = _this$props4.maxYGaugeMark,
           graphOpacity = _this$props4.graphOpacity; // Calculate grid lines' coordinates.
 
       var minY_ = minY;
-      var maxY_ = (0, _utility.getLowerSiblingDivisibleBy)(maxY, 10);
+      var maxY_ = maxYGaugeMark;
       var yAxisScale = (maxY - minY) / (maxY_ - minY_);
@@ -351,4 +346,7 @@ var yAxisTickMarks = (0, _utility.divideInterval)(minY_, maxY_, yAxisTickMarksCount); // Update grid lines.
     value: function updateAxes(minX, maxX, minY, maxY, yAxisScale) {
-      this.updateAxis(this.xAxis, minX, maxX, this.formatDate);
-      this.updateAxis(this.yAxis, minY, maxY);
+      var _this$props8 = this.props,
+          formatX = _this$props8.formatX,
+          formatY = _this$props8.formatY;
+      this.updateAxis(this.xAxis, minX, maxX, formatX);
+      this.updateAxis(this.yAxis, minY, maxY, formatY);
       this.yAxis.style.height = "".concat(100 / yAxisScale, "%");
@@ -355,0 +353,0 @@ }

commonjs/Tooltip.js

@@ -244,3 +244,3 @@ "use strict";
 
-      var tooltipValues = document.createElement('dl');
+      var tooltipValues = document.createElement('ul');
       tooltipValues.classList.add('chartogram__tooltip-values');
@@ -266,10 +266,12 @@ tooltip.appendChild(tooltipValues); // Add graph values.
         if (isShown) {
-          // Add graph value.
-          var tooltipValue = document.createElement('dt');
-          tooltipValue.style.color = color;
-          tooltipValues.appendChild(tooltipValue); // Add graph name.
+          // Add graph value item.
+          var tooltipValueItem = document.createElement('li');
+          tooltipValueItem.style.color = color;
+          tooltipValues.appendChild(tooltipValueItem); // Add graph value.
 
-          var tooltipName = document.createElement('dd');
-          tooltipName.style.color = color;
-          tooltipValues.appendChild(tooltipName);
+          var tooltipValue = document.createElement('div');
+          tooltipValueItem.appendChild(tooltipValue); // Add graph name.
+
+          var tooltipName = document.createElement('div');
+          tooltipValueItem.appendChild(tooltipName);
         }
@@ -333,4 +335,4 @@ }
       var xRatio = (x - minX) / (maxX - minX);
-      this.updateTooltipDate(new Date(x));
-      this.updateTooltipValues(xIndex);
+      this.updateTooltipXValue(x);
+      this.updateTooltipYValues(xIndex);
       this.updateTooltipPosition(xRatio, canvasWidth);
@@ -346,27 +348,38 @@ this.updatePointPositions(xIndex, xRatio);
           maxOverflow = _this$props6.maxOverflow;
-      var left = xRatio * canvasWidth;
-      left -= tooltipShift === undefined ? 40 : tooltipShift;
-      var tooltipWidth = this.tooltip.getBoundingClientRect().width;
-      var overflow = maxOverflow === undefined ? 5 : maxOverflow;
+      var left = Math.round(xRatio * canvasWidth);
+      left -= tooltipShift === undefined ? 40 : tooltipShift; // Don't overflow the tooltip while measuring its `offsetWidth`
+      // because tooltip values will wrap in case of overflow relative to the canvas width.
 
-      if (left < -1 * overflow) {
-        left = -1 * overflow;
-      } else if (left + tooltipWidth > canvasWidth + overflow) {
-        left = canvasWidth + overflow - tooltipWidth;
-      }
+      this.tooltip.style.left = 0; // Reset side margin.
 
-      this.tooltip.style.left = left + 'px';
+      this.tooltip.style.marginRight = 0; // Measure tooltip width with the updated content.
+
+      var tooltipWidth = this.tooltip.offsetWidth;
+      var maxSideOverflow = maxOverflow === undefined ? 5 : maxOverflow;
+      var overflow = 0;
+
+      if (left < 0) {
+        overflow = -1 * Math.min(-1 * left, maxSideOverflow);
+        left = 0;
+      } else if (left > canvasWidth - tooltipWidth) {
+        overflow = Math.min(left - (canvasWidth - tooltipWidth), maxSideOverflow);
+        left = canvasWidth - tooltipWidth;
+      } // The values list will wrap in case of overflow relative to the canvas width.
+
+
+      this.tooltip.style.left = left + overflow + 'px';
+      this.tooltip.style.marginRight = -overflow + 'px';
     }
   }, {
-    key: "updateTooltipDate",
-    value: function updateTooltipDate(date) {
-      var _this$props7 = this.props,
-          weekdays = _this$props7.weekdays,
-          months = _this$props7.months;
+    key: "updateTooltipXValue",
+    value: function updateTooltipXValue(x) {
+      var formatX = this.props.formatX;
       var tooltipDate = this.tooltip.childNodes[0];
-      tooltipDate.textContent = "".concat(weekdays[date.getDay()], ", ").concat(months[date.getMonth()], " ").concat(date.getDate());
+      tooltipDate.textContent = formatX(x, {
+        long: true
+      });
     }
   }, {
-    key: "updateTooltipValues",
-    value: function updateTooltipValues(xIndex) {
+    key: "updateTooltipYValues",
+    value: function updateTooltipYValues(xIndex) {
       var y = this.props.y;
@@ -394,4 +407,4 @@ var tooltipValues = this.tooltip.childNodes[1];
         if (isShown) {
-          tooltipValues.childNodes[2 * i].textContent = points[xIndex];
-          tooltipValues.childNodes[2 * i + 1].textContent = name;
+          tooltipValues.childNodes[i].childNodes[0].textContent = points[xIndex];
+          tooltipValues.childNodes[i].childNodes[1].textContent = name;
           i++;
@@ -398,0 +411,0 @@ }

modules/Chartogram.js

@@ -19,3 +19,3 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
 
-import { clearElement, commaJoin } from './utility';
+import { clearElement, commaJoin, getLowerSiblingDivisibleBy } from './utility';
 import Charts from './Charts';
@@ -68,3 +68,4 @@ import Timeline from './Timeline';
           minYGlobal = _this$calculateMinMax.minYGlobal,
-          maxYGlobal = _this$calculateMinMax.maxYGlobal;
+          maxYGlobal = _this$calculateMinMax.maxYGlobal,
+          maxYGaugeMark = _this$calculateMinMax.maxYGaugeMark;
 
@@ -77,2 +78,4 @@ _this.transition.batch();
 
+      _this.transition.add('charts', 'maxYGaugeMark', maxYGaugeMark);
+
       _this.transition.add('timeline', 'minYGlobal', minYGlobal);
@@ -100,4 +103,6 @@
       var maxY = state.maxY;
+      var maxYGaugeMark = state.maxYGaugeMark;
       delete state.minY;
       delete state.maxY;
+      delete state.maxYGaugeMark;
 
@@ -112,2 +117,4 @@ _this.setState(state);
 
+      _this.transition.add('charts', 'maxYGaugeMark', maxYGaugeMark);
+
       _this.transition.run();
@@ -126,2 +133,56 @@ });
 
+    _defineProperty(this, "formatX", function (value) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var _this$props = _this.props,
+          locale = _this$props.locale,
+          formatX = _this$props.formatX;
+
+      if (formatX) {
+        return formatX(value, options);
+      }
+
+      if (!_this.dateTimeFormatShort) {
+        _this.dateTimeFormatShort = new Intl.DateTimeFormat(locale, {
+          month: 'short',
+          day: 'numeric'
+        });
+        _this.dateTimeFormatLong = new Intl.DateTimeFormat(locale, {
+          weekday: 'short',
+          month: 'short',
+          day: 'numeric'
+        });
+        _this.dateTimeFormatLongWithYear = new Intl.DateTimeFormat(locale, {
+          weekday: 'short',
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric'
+        });
+      }
+
+      var date = new Date(value);
+
+      if (options.long) {
+        var isSameYear = date.getFullYear() === new Date().getFullYear();
+
+        if (isSameYear) {
+          return _this.dateTimeFormatLong.format(date);
+        } else {
+          return _this.dateTimeFormatLongWithYear.format(date);
+        }
+      } else {
+        return _this.dateTimeFormatShort.format(date);
+      }
+    });
+
+    _defineProperty(this, "formatY", function (value) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var formatY = _this.props.formatY;
+
+      if (formatY) {
+        return formatY(value, options);
+      }
+
+      return Math.round(value);
+    });
+
     this.props = _objectSpread({
@@ -135,5 +196,3 @@ title: title,
       canvasWidth: 512,
-      precisionFactor: Math.pow(10, props.precision || 3),
-      months: MONTHS,
-      weekdays: WEEKDAYS
+      precisionFactor: Math.pow(10, props.precision || 3)
     }, props);
@@ -200,3 +259,5 @@ this.rootNode = rootNode;
         createPolylinePoints: this.createPolylinePoints,
-        fixSvgCoordinate: this.fixSvgCoordinate
+        fixSvgCoordinate: this.fixSvgCoordinate,
+        formatX: this.formatX,
+        formatY: this.formatY
       });
@@ -407,3 +468,4 @@ }
         minYGlobal: minYGlobal,
-        maxYGlobal: maxYGlobal
+        maxYGlobal: maxYGlobal,
+        maxYGaugeMark: getLowerSiblingDivisibleBy(maxY, 10)
       };
@@ -417,4 +479,2 @@ }
 export { Chartogram as default };
-var MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-var WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 //# sourceMappingURL=Chartogram.js.map

modules/Charts.js

@@ -11,3 +11,3 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 
-import { clearElement, getLowerSiblingDivisibleBy, divideInterval, throttle } from './utility';
+import { clearElement, divideInterval, throttle } from './utility';
 import Tooltip from './Tooltip';
@@ -50,8 +50,2 @@ var SVG_XMLNS = 'http://www.w3.org/2000/svg';
 
-    _defineProperty(this, "formatDate", function (timestamp) {
-      var months = _this.props.months;
-      var date = new Date(timestamp);
-      return "".concat(months[date.getMonth()], " ").concat(date.getDate());
-    });
-
     this.props = props;
@@ -122,4 +116,4 @@ }
         pointsContainer: this.canvasWrapper,
-        weekdays: this.props.weekdays,
-        months: this.props.months,
+        formatX: this.props.formatX,
+        formatY: this.props.formatY,
         canvasWidth: this.props.canvasWidth,
@@ -164,6 +158,7 @@ aspectRatio: this.state.aspectRatio,
           maxY = _this$props4.maxY,
+          maxYGaugeMark = _this$props4.maxYGaugeMark,
           graphOpacity = _this$props4.graphOpacity; // Calculate grid lines' coordinates.
 
       var minY_ = minY;
-      var maxY_ = getLowerSiblingDivisibleBy(maxY, 10);
+      var maxY_ = maxYGaugeMark;
       var yAxisScale = (maxY - minY) / (maxY_ - minY_);
@@ -341,4 +336,7 @@ var yAxisTickMarks = divideInterval(minY_, maxY_, yAxisTickMarksCount); // Update grid lines.
     value: function updateAxes(minX, maxX, minY, maxY, yAxisScale) {
-      this.updateAxis(this.xAxis, minX, maxX, this.formatDate);
-      this.updateAxis(this.yAxis, minY, maxY);
+      var _this$props8 = this.props,
+          formatX = _this$props8.formatX,
+          formatY = _this$props8.formatY;
+      this.updateAxis(this.xAxis, minX, maxX, formatX);
+      this.updateAxis(this.yAxis, minY, maxY, formatY);
       this.yAxis.style.height = "".concat(100 / yAxisScale, "%");
@@ -345,0 +343,0 @@ }

modules/Tooltip.js

@@ -236,3 +236,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-      var tooltipValues = document.createElement('dl');
+      var tooltipValues = document.createElement('ul');
       tooltipValues.classList.add('chartogram__tooltip-values');
@@ -258,10 +258,12 @@ tooltip.appendChild(tooltipValues); // Add graph values.
         if (isShown) {
-          // Add graph value.
-          var tooltipValue = document.createElement('dt');
-          tooltipValue.style.color = color;
-          tooltipValues.appendChild(tooltipValue); // Add graph name.
+          // Add graph value item.
+          var tooltipValueItem = document.createElement('li');
+          tooltipValueItem.style.color = color;
+          tooltipValues.appendChild(tooltipValueItem); // Add graph value.
 
-          var tooltipName = document.createElement('dd');
-          tooltipName.style.color = color;
-          tooltipValues.appendChild(tooltipName);
+          var tooltipValue = document.createElement('div');
+          tooltipValueItem.appendChild(tooltipValue); // Add graph name.
+
+          var tooltipName = document.createElement('div');
+          tooltipValueItem.appendChild(tooltipName);
         }
@@ -325,4 +327,4 @@ }
       var xRatio = (x - minX) / (maxX - minX);
-      this.updateTooltipDate(new Date(x));
-      this.updateTooltipValues(xIndex);
+      this.updateTooltipXValue(x);
+      this.updateTooltipYValues(xIndex);
       this.updateTooltipPosition(xRatio, canvasWidth);
@@ -338,27 +340,38 @@ this.updatePointPositions(xIndex, xRatio);
           maxOverflow = _this$props6.maxOverflow;
-      var left = xRatio * canvasWidth;
-      left -= tooltipShift === undefined ? 40 : tooltipShift;
-      var tooltipWidth = this.tooltip.getBoundingClientRect().width;
-      var overflow = maxOverflow === undefined ? 5 : maxOverflow;
+      var left = Math.round(xRatio * canvasWidth);
+      left -= tooltipShift === undefined ? 40 : tooltipShift; // Don't overflow the tooltip while measuring its `offsetWidth`
+      // because tooltip values will wrap in case of overflow relative to the canvas width.
 
-      if (left < -1 * overflow) {
-        left = -1 * overflow;
-      } else if (left + tooltipWidth > canvasWidth + overflow) {
-        left = canvasWidth + overflow - tooltipWidth;
-      }
+      this.tooltip.style.left = 0; // Reset side margin.
 
-      this.tooltip.style.left = left + 'px';
+      this.tooltip.style.marginRight = 0; // Measure tooltip width with the updated content.
+
+      var tooltipWidth = this.tooltip.offsetWidth;
+      var maxSideOverflow = maxOverflow === undefined ? 5 : maxOverflow;
+      var overflow = 0;
+
+      if (left < 0) {
+        overflow = -1 * Math.min(-1 * left, maxSideOverflow);
+        left = 0;
+      } else if (left > canvasWidth - tooltipWidth) {
+        overflow = Math.min(left - (canvasWidth - tooltipWidth), maxSideOverflow);
+        left = canvasWidth - tooltipWidth;
+      } // The values list will wrap in case of overflow relative to the canvas width.
+
+
+      this.tooltip.style.left = left + overflow + 'px';
+      this.tooltip.style.marginRight = -overflow + 'px';
     }
   }, {
-    key: "updateTooltipDate",
-    value: function updateTooltipDate(date) {
-      var _this$props7 = this.props,
-          weekdays = _this$props7.weekdays,
-          months = _this$props7.months;
+    key: "updateTooltipXValue",
+    value: function updateTooltipXValue(x) {
+      var formatX = this.props.formatX;
       var tooltipDate = this.tooltip.childNodes[0];
-      tooltipDate.textContent = "".concat(weekdays[date.getDay()], ", ").concat(months[date.getMonth()], " ").concat(date.getDate());
+      tooltipDate.textContent = formatX(x, {
+        long: true
+      });
     }
   }, {
-    key: "updateTooltipValues",
-    value: function updateTooltipValues(xIndex) {
+    key: "updateTooltipYValues",
+    value: function updateTooltipYValues(xIndex) {
       var y = this.props.y;
@@ -386,4 +399,4 @@ var tooltipValues = this.tooltip.childNodes[1];
         if (isShown) {
-          tooltipValues.childNodes[2 * i].textContent = points[xIndex];
-          tooltipValues.childNodes[2 * i + 1].textContent = name;
+          tooltipValues.childNodes[i].childNodes[0].textContent = points[xIndex];
+          tooltipValues.childNodes[i].childNodes[1].textContent = name;
           i++;
@@ -390,0 +403,0 @@ }

package.json

 {
   "name": "chartogram",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "Charts in JS with no dependencies",
@@ -5,0 +5,0 @@ "main": "index.commonjs.js",

README.md

@@ -25,3 +25,3 @@ # chartogram
 
-The default exported function takes three arguments:
+The default exported function takes four arguments:
 
@@ -31,2 +31,3 @@ * The DOM element where the chart will be rendered.
 * Chart title.
+* (optional) [`options`](#options).
 
@@ -155,2 +156,15 @@ Chart data must have shape:
 
+## Options
+
+* `formatX(value: number, { long: boolean })` — Formats X axis labels. `long` option is for the tooltip. Uses `Intl.DateTimeFormat` by default.
+* `formatY(value: number)` — Formats Y axis labels (including tooltip). Is `Math.round()` by default.
+* `locale: string` — Is used to format dates (the default system locale is used if none supplied).
+* `transitionDuration: number` — The maximum transition duration (in milliseconds).
+* `transitionEasing: string` — Is `easeOutQuad` by default.
+* `yAxisTickMarksCount: number` — Y axis tick marks count.
+* `xAxisTickMarkWidth: number` — (in pixels) Is used to calculate the count of X axis tick marks based on canvas width (in pixels).
+* `canvasWidth: number` — SVG `viewBox` width (not pixels).
+* `precision: number` — SVG coordinates rounding precision.
+* `timelineWindowSize: number` — The initial size of timeline window (in points).
+
 ## Custom colors
@@ -157,0 +171,0 @@

source/Chartogram.js

 import {
 	clearElement,
-	commaJoin
+	commaJoin,
+	getLowerSiblingDivisibleBy
 } from './utility'
@@ -22,4 +23,2 @@
 			precisionFactor: Math.pow(10, props.precision || 3),
-			months: MONTHS,
-			weekdays: WEEKDAYS,
 			...props
@@ -110,3 +109,5 @@ }
 			createPolylinePoints: this.createPolylinePoints,
-			fixSvgCoordinate: this.fixSvgCoordinate
+			fixSvgCoordinate: this.fixSvgCoordinate,
+			formatX: this.formatX,
+			formatY: this.formatY
 		}
@@ -253,3 +254,4 @@ }
 			minYGlobal,
-			maxYGlobal
+			maxYGlobal,
+			maxYGaugeMark: getLowerSiblingDivisibleBy(maxY, 10)
 		}
@@ -274,3 +276,4 @@ }
 			minYGlobal,
-			maxYGlobal
+			maxYGlobal,
+			maxYGaugeMark
 		} = this.calculateMinMaxY(this.state.y)
@@ -280,2 +283,3 @@ this.transition.batch()
 		this.transition.add('charts', 'maxY', maxY)
+		this.transition.add('charts', 'maxYGaugeMark', maxYGaugeMark)
 		this.transition.add('timeline', 'minYGlobal', minYGlobal)
@@ -301,4 +305,6 @@ this.transition.add('timeline', 'maxYGlobal', maxYGlobal)
 		const maxY = state.maxY
+		const maxYGaugeMark = state.maxYGaugeMark
 		delete state.minY
 		delete state.maxY
+		delete state.maxYGaugeMark
 		this.setState(state)
@@ -308,2 +314,3 @@ this.transition.batch()
 		this.transition.add('charts', 'maxY', maxY)
+		this.transition.add('charts', 'maxYGaugeMark', maxYGaugeMark)
 		this.transition.run()
@@ -322,27 +329,45 @@ }
 	}
-}
 
-const MONTHS = [
-	'Jan',
-	'Feb',
-	'Mar',
-	'Apr',
-	'May',
-	'Jun',
-	'Jul',
-	'Aug',
-	'Sep',
-	'Oct',
-	'Nov',
-	'Dec'
-]
+	formatX = (value, options = {}) => {
+		const { locale, formatX } = this.props
+		if (formatX) {
+			return formatX(value, options)
+		}
+		if (!this.dateTimeFormatShort) {
+			this.dateTimeFormatShort = new Intl.DateTimeFormat(locale, {
+				month: 'short',
+				day: 'numeric'
+			})
+			this.dateTimeFormatLong = new Intl.DateTimeFormat(locale, {
+				weekday: 'short',
+				month: 'short',
+				day: 'numeric'
+			})
+			this.dateTimeFormatLongWithYear = new Intl.DateTimeFormat(locale, {
+				weekday: 'short',
+				year: 'numeric',
+				month: 'short',
+				day: 'numeric'
+			})
+		}
+		const date = new Date(value)
+		if (options.long) {
+			const isSameYear = date.getFullYear() === new Date().getFullYear()
+			if (isSameYear) {
+				return this.dateTimeFormatLong.format(date)
+			} else {
+				return this.dateTimeFormatLongWithYear.format(date)
+			}
+		} else {
+			return this.dateTimeFormatShort.format(date)
+		}
+	}
 
-const WEEKDAYS = [
-	'Sun',
-	'Mon',
-	'Tue',
-	'Wed',
-	'Thu',
-	'Fri',
-	'Sat'
-]
+	formatY = (value, options = {}) => {
+		const { formatY } = this.props
+		if (formatY) {
+			return formatY(value, options)
+		}
+		return Math.round(value)
+	}
+}

source/Charts.js

 import {
 	clearElement,
-	getLowerSiblingDivisibleBy,
 	divideInterval,
@@ -89,4 +88,4 @@ throttle
 			pointsContainer: this.canvasWrapper,
-			weekdays: this.props.weekdays,
-			months: this.props.months,
+			formatX: this.props.formatX,
+			formatY: this.props.formatY,
 			canvasWidth: this.props.canvasWidth,
@@ -127,6 +126,6 @@ aspectRatio: this.state.aspectRatio,
 	render() {
-		const { yAxisTickMarksCount, y, minX, maxX, minY, maxY, graphOpacity } = this.props
+		const { yAxisTickMarksCount, y, minX, maxX, minY, maxY, maxYGaugeMark, graphOpacity } = this.props
 		// Calculate grid lines' coordinates.
 		const minY_ = minY
-		const maxY_ = getLowerSiblingDivisibleBy(maxY, 10)
+		const maxY_ = maxYGaugeMark
 		const yAxisScale = (maxY - minY) / (maxY_ - minY_)
@@ -265,4 +264,5 @@ const yAxisTickMarks = divideInterval(minY_, maxY_, yAxisTickMarksCount)
 	updateAxes(minX, maxX, minY, maxY, yAxisScale) {
-		this.updateAxis(this.xAxis, minX, maxX, this.formatDate)
-		this.updateAxis(this.yAxis, minY, maxY)
+		const { formatX, formatY } = this.props
+		this.updateAxis(this.xAxis, minX, maxX, formatX)
+		this.updateAxis(this.yAxis, minY, maxY, formatY)
 		this.yAxis.style.height = `${100 / yAxisScale}%`
@@ -284,8 +284,2 @@ }
 	}
-
-	formatDate = (timestamp) => {
-		const { months } = this.props
-		const date = new Date(timestamp)
-		return `${months[date.getMonth()]} ${date.getDate()}`
-	}
 }
@@ -292,0 +286,0 @@

source/Tooltip.js

@@ -135,3 +135,3 @@ import { setUpTouchMove } from './utility'
 		// Add graph values.
-		const tooltipValues = document.createElement('dl')
+		const tooltipValues = document.createElement('ul')
 		tooltipValues.classList.add('chartogram__tooltip-values')
@@ -142,10 +142,12 @@ tooltip.appendChild(tooltipValues)
 			if (isShown) {
+				// Add graph value item.
+				const tooltipValueItem = document.createElement('li')
+				tooltipValueItem.style.color = color
+				tooltipValues.appendChild(tooltipValueItem)
 				// Add graph value.
-				const tooltipValue = document.createElement('dt')
-				tooltipValue.style.color = color
-				tooltipValues.appendChild(tooltipValue)
+				const tooltipValue = document.createElement('div')
+				tooltipValueItem.appendChild(tooltipValue)
 				// Add graph name.
-				const tooltipName = document.createElement('dd')
-				tooltipName.style.color = color
-				tooltipValues.appendChild(tooltipName)
+				const tooltipName = document.createElement('div')
+				tooltipValueItem.appendChild(tooltipName)
 			}
@@ -185,4 +187,4 @@ }
 		const xRatio = (x - minX) / (maxX - minX)
-		this.updateTooltipDate(new Date(x))
-		this.updateTooltipValues(xIndex)
+		this.updateTooltipXValue(x)
+		this.updateTooltipYValues(xIndex)
 		this.updateTooltipPosition(xRatio, canvasWidth)
@@ -195,21 +197,32 @@ this.updatePointPositions(xIndex, xRatio)
 		const { tooltipShift, maxOverflow } = this.props
-		let left = xRatio * canvasWidth
+		let left = Math.round(xRatio * canvasWidth)
 		left -= tooltipShift === undefined ? 40 : tooltipShift
-		const tooltipWidth = this.tooltip.getBoundingClientRect().width
-		const overflow = maxOverflow === undefined ? 5 : maxOverflow
-		if (left < -1 * overflow) {
-			left = -1 * overflow
-		} else if (left + tooltipWidth > canvasWidth + overflow) {
-			left = (canvasWidth + overflow) - tooltipWidth
+		// Don't overflow the tooltip while measuring its `offsetWidth`
+		// because tooltip values will wrap in case of overflow relative to the canvas width.
+		this.tooltip.style.left = 0
+		// Reset side margin.
+		this.tooltip.style.marginRight = 0
+		// Measure tooltip width with the updated content.
+		const tooltipWidth = this.tooltip.offsetWidth
+		const maxSideOverflow = maxOverflow === undefined ? 5 : maxOverflow
+		let overflow = 0
+		if (left < 0) {
+			overflow = -1 * Math.min(-1 * left, maxSideOverflow)
+			left = 0
+		} else if (left > canvasWidth - tooltipWidth) {
+			overflow = Math.min(left - (canvasWidth - tooltipWidth), maxSideOverflow)
+			left = canvasWidth - tooltipWidth
 		}
-		this.tooltip.style.left = left + 'px'
+		// The values list will wrap in case of overflow relative to the canvas width.
+		this.tooltip.style.left = (left + overflow) + 'px'
+		this.tooltip.style.marginRight = -overflow + 'px'
 	}
 
-	updateTooltipDate(date) {
-		const { weekdays, months } = this.props
+	updateTooltipXValue(x) {
+		const { formatX } = this.props
 		const tooltipDate = this.tooltip.childNodes[0]
-		tooltipDate.textContent = `${weekdays[date.getDay()]}, ${months[date.getMonth()]} ${date.getDate()}`
+		tooltipDate.textContent = formatX(x, { long: true })
 	}
 
-	updateTooltipValues(xIndex) {
+	updateTooltipYValues(xIndex) {
 		const { y } = this.props
@@ -220,4 +233,4 @@ const tooltipValues = this.tooltip.childNodes[1]
 			if (isShown) {
-				tooltipValues.childNodes[2 * i].textContent = points[xIndex]
-				tooltipValues.childNodes[2 * i + 1].textContent = name
+				tooltipValues.childNodes[i].childNodes[0].textContent = points[xIndex]
+				tooltipValues.childNodes[i].childNodes[1].textContent = name
 				i++
@@ -224,0 +237,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1230132

increased by1.59%

Lines of code

5685

increased by2.67%

Number of lines in readme file

204

increased by7.37%

No dependency changes