chartogram - npm Package Compare versions

Comparing version 0.1.12 to 0.1.13

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 o=Date.now(),r=e-(o-i);r<=0?(n&&(clearTimeout(n),n=void 0),i=o,t()):n||(n=setTimeout(a,r))}}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 o(){window.removeEventListener("pointermove",a),window.removeEventListener("touchmove",i),window.removeEventListener("pointerup",o),window.removeEventListener("pointercancel",o),window.removeEventListener("touchend",o),window.removeEventListener("touchcancel",o)}function r(t){if(t.touches.length>1)return o();e(t.changedTouches[0].clientX,t.changedTouches[0].clientY),window.addEventListener("touchmove",i),window.addEventListener("touchend",o),window.addEventListener("touchcancel",o)}function s(t){e(t.clientX,t.clientY),window.addEventListener("pointermove",a),window.addEventListener("pointerup",o),window.addEventListener("pointercancel",o)}return t.addEventListener("touchstart",r),t.addEventListener("pointerdown",s),function(){o(),t.removeEventListener(s),t.removeEventListener(r)}}function a(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],i=!0,a=!1,o=void 0;try{for(var r,s=t[Symbol.iterator]();!(i=(r=s.next()).done)&&(n.push(r.value),!e||n.length!==e);i=!0);}catch(t){a=!0,o=t}finally{try{i||null==s.return||s.return()}finally{if(a)throw o}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function o(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 s=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),r(this,"onResize",function(t){a.setState({aspectRatio:a.getCanvasAspectRatio()})}),r(this,"onResizeThrottled",n(this.onResize,33)),r(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){r(t,e,n[e])})}return t}({},a.state,t),a.render()}),r(this,"mapX",function(t){var e=a.props,n=e.canvasWidth,i=e.data,o=i.minX;return(t-o)/(i.maxX-o)*n}),r(this,"mapY",function(t){var e=a.props,n=e.canvasWidth,i=e.minY;return(t-i)/(e.maxY-i)*n/a.state.aspectRatio}),r(this,"setUpTimelineWindowHandle",function(t){var e,n,o,r,s="left"===t?a.timelineWindowLeftHandle:a.timelineWindowRightHandle,h=parseFloat(getComputedStyle(a.timelineWindow).borderLeftWidth);return i(s,function(i){e=a.timeline.getBoundingClientRect();var s=a.timelineWindow.getBoundingClientRect();"left"===t?(n=e.left,o=s.left+s.width-2*h,r=i-s.left):(n=s.left+2*h,o=e.left+e.width,r=i-(s.left+s.width))},function(i){i-=r;var s=((i=Math.max(Math.min(i,o),n))-e.left)/e.width;"left"===t?a.updateBounds(s,a.props.toRatio):a.updateBounds(a.props.fromRatio,s)})}),r(this,"setUpTimelineWindow",function(){var t,e,n,o,r;return i(a.timelineWindowDrag,function(i){t=a.timeline.getBoundingClientRect(),e=a.timelineWindow.getBoundingClientRect(),r=i-e.left,n=t.left,o=t.left+(t.width-e.width)},function(i){i-=r;var s=((i=Math.max(Math.min(i,o),n))-t.left)/t.width;a.updateBounds(s,s+e.width/t.width)})}),r(this,"setTimelineWindowLeft",function(t){a.timelineOverlayLeft.style.right="".concat(100*(1-t),"%"),a.timelineWindow.style.left="".concat(100*t,"%")}),r(this,"setTimelineWindowRight",function(t){a.timelineOverlayRight.style.left="".concat(100*t,"%"),a.timelineWindow.style.right="".concat(100*(1-t),"%")}),this.props=t}var s,h,l;return s=e,(h=[{key:"componentDidUpdate",value:function(t){this.props!==t&&(this.props=t,this.state={aspectRatio:this.getCanvasAspectRatio()},this.onChangeBounds(this.props.fromRatio,this.props.toRatio),this.render())}},{key:"componentDidMount",value:function(){var t=this.props.rootNode;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,o=n.data,r=n.graphOpacity,s=0,h=function(){var n=o.y[s],h=n.id,l=n.points,c=n.color,u=i.find(function(t){return t.id===h}).isShown,d=r[s];if(u||d>0){var p=a(function e(n,i,a){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:Math.max.apply(Math,t(i)),r=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),l=arguments.length>7&&void 0!==arguments[7]?arguments[7]:new Array(n.length),c=arguments.length>8&&void 0!==arguments[8]?arguments[8]:0;if(s+2>n.length-1){for(;s<i.length;)h[c]=n[s],l[c]=i[s],c++,s++;return h=h.slice(0,c),l=l.slice(0,c),h.length<=a?[h,l]:(n.length/h.length<1.1&&(r=Math.min(r+.025,1)),e(h,l,a,o,r))}var u=(i[s+2]+i[s])/2;return Math.abs(u-i[s+1])/o<r?(h[c]=n[s],h[c+1]=n[s+2],l[c]=i[s],l[c+1]=i[s+2],e(n,i,a,o,r,s+2,h,l,c+1)):(h[c]=n[s],h[c+1]=n[s+1],h[c+2]=n[s+2],l[c]=i[s],l[c+1]=i[s+1],l[c+2]=i[s+2],e(n,i,a,o,r,s+2,h,l,c+2))}(o.x.points,l,80),2),m=p[0],v=p[1];e.graphs[s]?e.updateGraph(s,m,v,d):e.mountGraph(s,m,v,c,d)}else e.graphs[s]&&e.unmountGraph(s);s++};s<o.y.length;)h()}},{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,o=n.color;t.mountGraph(i,e.x.points,a,o)})}},{key:"mountGraph",value:function(t,e,n,i,a){var o=this.renderGraph(e,n,i,a);this.graphs[t]=o,this.timelineCanvas.appendChild(o)}},{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,o=this.props,r=o.maxY,s=o.createPolylinePoints;"number"==typeof t&&(t=this.graphs[t]),t.setAttribute("points",s(e.map(this.mapX),n.map(function(t){return a.mapY(r-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)}}])&&o(s.prototype,h),l&&o(s,l),e}();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 l(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}s.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 c=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),l(this,"createGraphToggler",function(t){var e=t.id,i=t.name,a=t.color,o=document.createElement("button");o.setAttribute("type","button"),o.classList.add("chartogram__chart-toggler"),o.classList.add("chartogram__chart-toggler--on"),o.classList.add("chartogram__reset-button");var r="http://www.w3.org/2000/svg",s=document.createElementNS(r,"svg");s.setAttribute("viewBox","0 0 19 19"),s.setAttribute("class","chartogram__chart-toggler-check");var h=document.createElementNS(r,"circle");h.setAttribute("cx","9.5"),h.setAttribute("cy","9.5"),h.setAttribute("r","9.5"),h.setAttribute("fill",a),s.appendChild(h);var l=document.createElementNS(r,"circle");l.setAttribute("cx","9.5"),l.setAttribute("cy","9.5"),l.setAttribute("r","8"),l.setAttribute("class","chartogram__chart-toggler-check-circle"),s.appendChild(l);var c=document.createElementNS(r,"path");return c.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"),c.setAttribute("fill","white"),c.setAttribute("class","chartogram__chart-toggler-check-mark"),s.appendChild(c),o.appendChild(s),o.appendChild(document.createTextNode(i)),o.addEventListener("click",function(){return n.onToggle(e,o)}),o}),l(this,"onToggle",function(t,e){(0,n.props.onToggle)(t)&&e.classList.toggle("chartogram__chart-toggler--on")}),this.props=e}var n,i,a;return n=t,(i=[{key:"componentDidMount",value:function(){var t=this.props,n=t.rootNode,i=t.data,a=n.querySelector(".chartogram__chart-togglers");e(a);var o=i.y,r=Array.isArray(o),s=0;for(o=r?o:o[Symbol.iterator]();;){var h;if(r){if(s>=o.length)break;h=o[s++]}else{if((s=o.next()).done)break;h=s.value}var l=h;a.appendChild(this.createGraphToggler(l))}}}])&&h(n.prototype,i),a&&h(n,a),t}();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 d(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}c.INITIAL_MARKUP='\n\t<div class="chartogram__chart-togglers"></div>\n';var p=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),d(this,"setUpListener",function(){!function(t,e,n,i){var a;function o(t,e){n(t,e,a)}function r(){a=t.getBoundingClientRect(),e()}function s(e){if(e.touches.length>1)return c();r(),t.addEventListener("touchend",c),t.addEventListener("touchmove",h),t.addEventListener("touchend",c),t.addEventListener("touchcancel",c),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?c():o(e,n)}function l(t){o(t.clientX,t.clientY)}function c(){t.removeEventListener("pointermove",l),t.removeEventListener("pointerleave",c),t.removeEventListener("pointercancel",c),t.removeEventListener("touchmove",h),t.removeEventListener("touchend",c),t.removeEventListener("touchcancel",c),i()}function u(){r(),t.addEventListener("pointermove",l),t.addEventListener("pointerleave",c),t.addEventListener("pointercancel",c)}t.addEventListener("touchstart",s),t.addEventListener("pointerenter",u)}(n.props.canvas,function(){},n.onTrack,function(){return n.unmount()})}),d(this,"onTrack",function(t,e,i){var a,o=n.props,r=o.minX,s=o.maxX,h=o.xPoints,l=r+(t-i.left)/i.width*(s-r),c=h.findIndex(function(t){return t>=l}),u=c-1;if((c<0||c>=h.length)&&(c=-1),(u<0||u>=h.length)&&(u=-1),c<0){if(u<0)return n.unmount();a=u}else if(u<0)a=c;else{var d=h[u],p=h[c];a=l-d>p-l?c:u}var m=h[a];m!==n.tooltipForX&&(n.tooltipForX=m,n.tooltip||n.mount(),n.updateTooltip(m,a,i.width))}),d(this,"unmountLine",function(){n.props.canvas.removeChild(n.line),n.line=void 0}),d(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 o;if(i){if(a>=e.length)break;o=e[a++]}else{if((a=e.next()).done)break;o=a.value}var r=o;t.appendChild(r)}}),d(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 o;if(i){if(a>=e.length)break;o=e[a++]}else{if((a=e.next()).done)break;o=a.value}var r=o;t.removeChild(r)}n.points=void 0}),d(this,"updateLinePosition",function(t){n.isLineRendered()||n.mountLine();var e=n.props,i=e.canvasWidth,a=e.aspectRatio,o=e.fixSvgCoordinate,r=e.mapX;n.line.setAttributeNS(null,"x1",o(r(t))),n.line.setAttributeNS(null,"x2",o(r(t))),n.line.setAttributeNS(null,"y1",0),n.line.setAttributeNS(null,"y2",o(i/a))}),d(this,"updatePointPositions",function(t,e){for(var i=n.props,a=i.maxY,o=i.y,r=0,s=0;r<o.length;){if(o[r].isShown){var h=n.points[s],l=o[r].points[t]/a;h.style.left="".concat(100*e,"%"),h.style.bottom="".concat(100*l,"%"),s++}r++}}),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(t){this.props!==t&&(this.props=t)}},{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,o=Array.isArray(a),r=0;for(a=o?a:a[Symbol.iterator]();;){var s;if(o){if(r>=a.length)break;s=a[r++]}else{if((r=a.next()).done)break;s=r.value}var h=s,l=h.isShown,c=h.color;if(l){var u=document.createElement("dt");u.style.color=c,i.appendChild(u);var d=document.createElement("dd");d.style.color=c,i.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),o=0;for(i=a?i:i[Symbol.iterator]();;){var r;if(a){if(o>=i.length)break;r=i[o++]}else{if((o=i.next()).done)break;r=o.value}var s=r;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,o=(t-a)/(i.maxX-a);this.updateTooltipDate(new Date(t)),this.updateTooltipValues(e),this.updateTooltipPosition(o,n),this.updatePointPositions(e,o),this.updateLinePosition(t)}},{key:"updateTooltipPosition",value:function(t,e){var n=this.props,i=n.tooltipShift,a=n.maxOverflow,o=t*e;o-=void 0===i?40:i;var r=this.tooltip.getBoundingClientRect().width,s=void 0===a?5:a;o<-1*s?o=-1*s:o+r>e+s&&(o=e+s-r),this.tooltip.style.left=o+"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,o=Array.isArray(a),r=0;for(a=o?a:a[Symbol.iterator]();;){var s;if(o){if(r>=a.length)break;s=a[r++]}else{if((r=a.next()).done)break;s=r.value}var h=s,l=h.isShown,c=h.points,u=h.name;l&&(n.childNodes[2*i].textContent=c[t],n.childNodes[2*i+1].textContent=u,i++)}}}])&&u(e.prototype,n),i&&u(e,i),t}();function m(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 v(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){g(t,e,n[e])})}return t}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 g(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var y=function(){function t(e,i){var a=this,o=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),g(this,"onResize",function(t){a.setState({aspectRatio:a.getCanvasAspectRatio()},!1)}),g(this,"onResizeThrottled",n(this.onResize,33)),g(this,"onToggle",function(t){var e=a.state.y.find(function(e){return e.id===t});if(e.isShown&&1===a.state.y.filter(function(t){return t.isShown}).length)return;e.isShown=!e.isShown,a.setState({y:a.state.y});var n=a.calculateMinMaxY(a.state.y),i=n.minY,o=n.maxY,r=n.minYGlobal,s=n.maxYGlobal;return a.transitionState(i,o,r,s,a.state.y.map(function(t){return t.isShown?1:0})),!0}),g(this,"onChangeBounds",function(t,e){var n=a.createState(t,e),i=n.minY,o=n.maxY;delete n.minY,delete n.maxY,a.setState(n,!1),a.transitionState(i,o)}),g(this,"createPolylinePoints",function(t,e){return n=t.map(a.fixSvgCoordinate),i=e.map(a.fixSvgCoordinate),n.map(function(t,e){return"".concat(t,",").concat(i[e])});var n,i}),g(this,"fixSvgCoordinate",function(t){var e=a.props.precisionFactor;return Math.round(t*e)/e}),g(this,"mapX",function(t){var e=a.props.canvasWidth,n=a.state,i=n.minX;return(t-i)/(n.maxX-i)*e}),g(this,"mapY",function(t){var e=a.props.canvasWidth,n=a.state,i=n.minY;return(t-i)/(n.maxY-i)*e/n.aspectRatio}),g(this,"transitionStateTick",function(){var t=a.props.transitionEasing,e=a.state,n=e.transitionStartedAt,i=e.transitionDuration,o=e.transitionUpdatesTimeline,r=e.graphOpacityFrom,s=e.graphOpacityTo,h=e.minYFrom,l=e.minYTo,c=e.maxYFrom,u=e.maxYTo,d=e.minYGlobalFrom,p=e.minYGlobalTo,m=e.maxYGlobalFrom,v=e.maxYGlobalTo,f=Date.now()-n,g=Math.min(f/i,1);g=_[t](g);var y={};void 0!==l&&(y.minY=h+(l-h)*g,y.maxY=c+(u-c)*g,1===g&&(y.minYFrom=void 0,y.minYTo=void 0,y.maxYFrom=void 0,y.maxYTo=void 0)),void 0!==p&&(y.minYGlobal=d+(p-d)*g,y.maxYGlobal=m+(v-m)*g,1===g&&(y.minYGlobalFrom=void 0,y.minYGlobalTo=void 0,y.maxYGlobalFrom=void 0,y.maxYGlobalTo=void 0)),void 0!==s&&(y.graphOpacity=s.map(function(t,e){return r[e]+(s[e]-r[e])*g}),1===g&&(y.graphOpacityFrom=void 0,y.graphOpacityTo=void 0)),a.setState(y,o),a.transition=g<1?requestAnimationFrame(a.transitionStateTick):void 0}),this.props=v({title:o,transitionDuration:250,transitionEasing:"easeOutQuad",gaugeTickMarksCount:6,timelineWindowSize:40,canvasWidth:512,precisionFactor:Math.pow(10,r.precision||3),months:w,weekdays:b},r),this.rootNode=e,this.data=v({},i,{minX:Math.min.apply(Math,m(i.x.points)),maxX:Math.max.apply(Math,m(i.x.points)),y:i.y.map(function(t){return v({},t,{min:Math.min.apply(Math,m(t.points)),max:Math.max.apply(Math,m(t.points))})})})}var i,a,o;return i=t,(a=[{key:"componentDidMount",value:function(){this.rootNode.classList.add("chartogram"),this.rootNode.innerHTML="\n\t\t\t".concat(x.replace("{title}",this.props.title),"\n\t\t\t").concat(s.INITIAL_MARKUP,"\n\t\t\t").concat(c.INITIAL_MARKUP,"\n\t\t"),this.tooltipContainer=this.rootNode.querySelector(".chartogram__plan"),this.canvas=this.rootNode.querySelector(".chartogram__canvas"),this.canvasWrapper=this.rootNode.querySelector(".chartogram__canvas-wrapper"),this.xAxis=this.rootNode.querySelector(".chartogram__x"),this.yAxis=this.rootNode.querySelector(".chartogram__y"),this.state=this.getInitialState(),this.updateAspectRatio(),this.timeline=new s(this.getTimelineProps()),this.timeline.componentDidMount(),this.togglers=new c(this.getTogglersProps()),this.togglers.componentDidMount(),this.tooltip=new p(this.getTooltipProps()),this.tooltip.componentDidMount(),this.mountGridLines(),this.mountGauges(),this.mountGraphs(),window.addEventListener("resize",this.onResizeThrottled),this.render()}},{key:"componentWillUnmount",value:function(){this.timeline.componentWillUnmount(),this.rootNode.classList.remove("chartogram"),e(this.rootNode),window.removeEventListener("resize",this.onResizeThrottled),this.transition&&cancelAnimationFrame(this.transition)}},{key:"getCanvasAspectRatio",value:function(){var t=this.canvas.getBoundingClientRect();return t.width/t.height}},{key:"setState",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];t.aspectRatio!==this.state.aspectRatio&&this.updateAspectRatio(t.aspectRatio),this.state=v({},this.state,t),this.render(),e&&this.timeline.componentDidUpdate(this.getTimelineProps()),this.tooltip.componentDidUpdate(this.getTooltipProps())}},{key:"getTimelineProps",value:function(){return{rootNode:this.rootNode,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{rootNode:this.rootNode,data:this.data,onToggle:this.onToggle}}},{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.fixSvgCoordinate,minX:this.state.minX,maxX:this.state.maxX,maxY:this.state.maxY,xPoints:this.state.xPoints,y:this.state.y}}},{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 o=(this.data.x.points[t]-i)/(a-i);return v({},this.createState(o,1),{aspectRatio:this.getCanvasAspectRatio(),graphOpacity:this.data.y.map(function(t){return 1})})}},{key:"createState",value:function(t,e){var n,i,a=this,o=this.data.x,r=this.data.minX+t*(this.data.maxX-this.data.minX),s=this.data.minX+e*(this.data.maxX-this.data.minX);n=r===this.data.minX?0:o.points.findIndex(function(t){return t>r})-1,i=s===this.data.maxX?o.points.length-1:o.points.findIndex(function(t){return t>s});var h=o.points.slice(n,i+1),l=h.slice();h.length>=2&&(o.points[n]!==r&&(l[0]=r),o.points[i]!==s&&(l[l.length-1]=s));var c=this.data.y.map(function(t,e){var l=a.data.y[e].points.slice(n,i+1),c=l.slice();if(h.length>=2){if(o.points[n]!==r){var u=a.data.y[e].points[n],d=u+(a.data.y[e].points[n+1]-u)*((r-a.data.x.points[n])/(a.data.x.points[n+1]-a.data.x.points[n]));c[0]=d}if(o.points[i]!==s){var p=a.data.y[e].points[i],f=a.data.y[e].points[i-1],g=f+(p-f)*((s-a.data.x.points[i-1])/(a.data.x.points[i]-a.data.x.points[i-1]));c[c.length-1]=g}}return v({},a.data.y[e],a.state?a.state.y[e]:{isShown:!0},{points:l,graphPoints:c,min:0,max:Math.max.apply(Math,m(c))})});return v({minX:r,maxX:s,fromIndex:n,toIndex:i,fromRatio:t,toRatio:e,xPoints:h,xGraphPoints:l},this.calculateMinMaxY(c),{y:c})}},{key:"calculateMinMaxY",value:function(t){var e=1/0,n=-1/0,i=t,a=Array.isArray(i),o=0;for(i=a?i:i[Symbol.iterator]();;){var r;if(a){if(o>=i.length)break;r=i[o++]}else{if((o=i.next()).done)break;r=o.value}var s=r;s.isShown&&(e=Math.min(e,s.min),n=Math.max(n,s.max))}var h=1/0,l=-1/0,c=function(){if(d){if(p>=u.length)return"break";m=u[p++]}else{if((p=u.next()).done)return"break";m=p.value}var e=m;t.find(function(t){return t.id===e.id}).isShown&&(h=Math.min(h,e.min),l=Math.max(l,e.max))},u=this.data.y,d=Array.isArray(u),p=0;for(u=d?u:u[Symbol.iterator]();;){var m;if("break"===c())break}return{minY:e,maxY:n,minYGlobal:h=0,maxYGlobal:l}}},{key:"updateAspectRatio",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.aspectRatio,e=this.props.canvasWidth;this.canvas.setAttribute("viewBox","0 0 ".concat(e," ").concat(this.fixSvgCoordinate(e/t)))}},{key:"updateGridLine",value:function(t,e){var n=this.state.maxY,i=this.gridLines[t];i.setAttribute("y1",this.fixSvgCoordinate(this.mapY(n-e))),i.setAttribute("y2",this.fixSvgCoordinate(this.mapY(n-e)))}},{key:"render",value:function(){var t=this,e=this.props.gaugeTickMarksCount,n=this.state,i=n.y,a=n.minX,o=n.maxX,r=n.minY,s=n.maxY,h=n.graphOpacity,l=r,c=function(t,e){for(t=Math.floor(t);;){if(t<e)return e;if(t%e==0)return t;t--}}(s,10),u=(s-r)/(c-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,c,e).forEach(function(e,n){return t.updateGridLine(n,e)});for(var d=0;d<i.length;){var p=i[d],m=p.isShown,v=p.graphPoints,f=p.color,g=h[d];m||g>0?this.graphs[d]?this.updateGraph(d,v,g):this.mountGraph(d,v,f,g):this.graphs[d]&&this.unmountGraph(d),d++}this.updateGauges(a,o,l,c,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:"mountGridLines",value:function(){var t=this.props.gaugeTickMarksCount;this.gridLines=[];for(var e=0;e<t;){var n=this.renderGridLine(0);this.gridLines.push(n),this.canvas.appendChild(n),e++}}},{key:"mountGraphs",value:function(){var t=this;this.graphs=[],this.state.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.state,o=a.xGraphPoints,r=a.maxY;"number"==typeof t&&(t=this.graphs[t]),t.setAttribute("points",this.createPolylinePoints(o.map(this.mapX),e.map(function(t){return i.mapY(r-t)})).join(" ")),1!==n&&(t.style.opacity=n)}},{key:"transitionState",value:function(t,e,n,i,a){var o=this.props.transitionDuration;this.transition&&(cancelAnimationFrame(this.transition),this.transitionStateTick(),cancelAnimationFrame(this.transition));var r=o;if(void 0!==t){var s=this.state.maxY-this.state.minY,h=Math.abs(e-this.state.maxY)/s,l=Math.abs(t-this.state.minY)/s,c=Math.max(l,h);r=o*Math.max(.2,2*Math.min(c,.5))}var u={transitionStartedAt:Date.now(),transitionDuration:r};void 0!==t&&(u.minYFrom=this.state.minY,u.maxYFrom=this.state.maxY,u.minYTo=t,u.maxYTo=e),void 0!==a&&(u.graphOpacityFrom=this.state.graphOpacity,u.graphOpacityTo=a),void 0!==n&&(u.minYGlobalFrom=this.state.minYGlobal,u.maxYGlobalFrom=this.state.maxYGlobal,u.minYGlobalTo=n,u.maxYGlobalTo=i);var d=void 0!==a||void 0!==n;u.transitionUpdatesTimeline=d,this.setState(u,d),this.transition=requestAnimationFrame(this.transitionStateTick)}},{key:"renderGridLine",value:function(t){var e=this.state,n=e.minX,i=e.maxX,a=(e.minY,e.maxY),o=document.createElementNS("http://www.w3.org/2000/svg","line");return o.classList.add("chartogram__grid-line"),o.setAttribute("x1",this.fixSvgCoordinate(this.mapX(n))),o.setAttribute("x2",this.fixSvgCoordinate(this.mapX(i))),o.setAttribute("y1",this.fixSvgCoordinate(this.mapY(a-t))),o.setAttribute("y2",this.fixSvgCoordinate(this.mapY(a-t))),o}},{key:"mountGauges",value:function(){for(var t=this.props.gaugeTickMarksCount,e=0;e<t;)this.xAxis.appendChild(document.createElement("div")),this.yAxis.appendChild(document.createElement("div")),e++}},{key:"updateGauges",value:function(t,e,n,i,a){var o=this.props,r=o.months,s=o.gaugeTickMarksCount;this.updateGauge(this.xAxis,t,e,s,function(t){var e=new Date(t);return"".concat(r[e.getMonth()]," ").concat(e.getDate())}),this.updateGauge(this.yAxis,n,i,s),this.yAxis.style.height="".concat(100/a,"%")}},{key:"updateGauge",value:function(t,e,n,i,a){for(var o=0;o<i;){var r=t.childNodes[o],s=e+o*(n-e)/(i-1);a&&(s=a(s)),r.textContent=s,o++}}}])&&f(i.prototype,a),o&&f(i,o),t}(),w=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],b=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],x='\n\t<header class="chartogram__header">\n\t\t<h1 class="chartogram__title">{title}</h1>\n\t</header>\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',_={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)}};return function(t,e,n,i){var a=new y(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){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()}}});
 //# sourceMappingURL=chartogram.js.map

commonjs/Chartogram.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _Charts = _interopRequireDefault(require("./Charts"));
+
 var _Timeline = _interopRequireDefault(require("./Timeline"));
@@ -15,3 +17,3 @@
 
-var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+var _Transition = _interopRequireDefault(require("./Transition"));
 
@@ -38,4 +40,2 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var SVG_XMLNS = 'http://www.w3.org/2000/svg';
-
 var Chartogram =
@@ -52,15 +52,15 @@ /*#__PURE__*/
 
-    _defineProperty(this, "onResize", function (event) {
-      _this.setState({
-        aspectRatio: _this.getCanvasAspectRatio()
-      }, false);
+    _defineProperty(this, "setState", function (newState) {
+      var previousState = _this.state;
+      _this.state = _objectSpread({}, _this.state, newState);
+
+      _this.componentDidUpdate(_this.props, previousState);
     });
 
-    _defineProperty(this, "onResizeThrottled", (0, _utility.throttle)(this.onResize, 33));
-
     _defineProperty(this, "onToggle", function (id) {
-      var y = _this.state.y.find(function (_) {
+      var i = _this.state.y.findIndex(function (_) {
         return _.id === id;
-      }); // Won't allow hiding all graphs.
+      });
 
+      var y = _this.state.y[i]; // Won't allow hiding all graphs.
 
@@ -75,10 +75,7 @@ if (y.isShown) {
         }
-      }
+      } // Mutating `this.state` without `setState()` for simplicity.
 
+
       y.isShown = !y.isShown;
 
-      _this.setState({
-        y: _this.state.y
-      });
-
       var _this$calculateMinMax = _this.calculateMinMaxY(_this.state.y),
@@ -90,6 +87,22 @@ minY = _this$calculateMinMax.minY,
 
-      _this.transitionState(minY, maxY, minYGlobal, maxYGlobal, _this.state.y.map(function (y) {
-        return y.isShown ? 1 : 0;
-      }));
+      _this.transition.batch();
 
+      _this.transition.add('charts', 'minY', minY);
+
+      _this.transition.add('charts', 'maxY', maxY);
+
+      _this.transition.add('timeline', 'minYGlobal', minYGlobal);
+
+      _this.transition.add('timeline', 'maxYGlobal', maxYGlobal);
+
+      _this.transition.add("graph#".concat(id, "/opacity"), function (state) {
+        return state.graphOpacity[i];
+      }, function (state, value) {
+        // Change `graphOpacity` for "shallow equal" comparison.
+        state.graphOpacity = state.graphOpacity.slice();
+        state.graphOpacity[i] = value;
+      }, y.isShown ? 1 : 0);
+
+      _this.transition.run();
+
       return true;
@@ -106,5 +119,11 @@ });
 
-      _this.setState(state, false);
+      _this.setState(state);
 
-      _this.transitionState(minY, maxY);
+      _this.transition.batch();
+
+      _this.transition.add('charts', 'minY', minY);
+
+      _this.transition.add('charts', 'maxY', maxY);
+
+      _this.transition.run();
     });
@@ -122,84 +141,2 @@
 
-    _defineProperty(this, "mapX", function (x) {
-      var canvasWidth = _this.props.canvasWidth;
-      var _this$state = _this.state,
-          minX = _this$state.minX,
-          maxX = _this$state.maxX;
-      return (x - minX) / (maxX - minX) * canvasWidth;
-    });
-
-    _defineProperty(this, "mapY", function (y) {
-      var canvasWidth = _this.props.canvasWidth;
-      var _this$state2 = _this.state,
-          minY = _this$state2.minY,
-          maxY = _this$state2.maxY,
-          aspectRatio = _this$state2.aspectRatio;
-      return (y - minY) / (maxY - minY) * canvasWidth / aspectRatio;
-    });
-
-    _defineProperty(this, "transitionStateTick", function () {
-      var transitionEasing = _this.props.transitionEasing;
-      var _this$state3 = _this.state,
-          transitionStartedAt = _this$state3.transitionStartedAt,
-          transitionDuration = _this$state3.transitionDuration,
-          transitionUpdatesTimeline = _this$state3.transitionUpdatesTimeline,
-          graphOpacityFrom = _this$state3.graphOpacityFrom,
-          graphOpacityTo = _this$state3.graphOpacityTo,
-          minYFrom = _this$state3.minYFrom,
-          minYTo = _this$state3.minYTo,
-          maxYFrom = _this$state3.maxYFrom,
-          maxYTo = _this$state3.maxYTo,
-          minYGlobalFrom = _this$state3.minYGlobalFrom,
-          minYGlobalTo = _this$state3.minYGlobalTo,
-          maxYGlobalFrom = _this$state3.maxYGlobalFrom,
-          maxYGlobalTo = _this$state3.maxYGlobalTo;
-      var elapsed = Date.now() - transitionStartedAt;
-      var ratio = Math.min(elapsed / transitionDuration, 1);
-      ratio = EASING[transitionEasing](ratio);
-      var state = {};
-
-      if (minYTo !== undefined) {
-        state.minY = minYFrom + (minYTo - minYFrom) * ratio;
-        state.maxY = maxYFrom + (maxYTo - maxYFrom) * ratio;
-
-        if (ratio === 1) {
-          state.minYFrom = undefined;
-          state.minYTo = undefined;
-          state.maxYFrom = undefined;
-          state.maxYTo = undefined;
-        }
-      }
-
-      if (minYGlobalTo !== undefined) {
-        state.minYGlobal = minYGlobalFrom + (minYGlobalTo - minYGlobalFrom) * ratio;
-        state.maxYGlobal = maxYGlobalFrom + (maxYGlobalTo - maxYGlobalFrom) * ratio;
-
-        if (ratio === 1) {
-          state.minYGlobalFrom = undefined;
-          state.minYGlobalTo = undefined;
-          state.maxYGlobalFrom = undefined;
-          state.maxYGlobalTo = undefined;
-        }
-      }
-
-      if (graphOpacityTo !== undefined) {
-        state.graphOpacity = graphOpacityTo.map(function (_, i) {
-          return graphOpacityFrom[i] + (graphOpacityTo[i] - graphOpacityFrom[i]) * ratio;
-        });
-
-        if (ratio === 1) {
-          state.graphOpacityFrom = undefined;
-          state.graphOpacityTo = undefined;
-        }
-      }
-
-      _this.setState(state, transitionUpdatesTimeline);
-
-      if (ratio < 1) {
-        _this.transition = requestAnimationFrame(_this.transitionStateTick);
-      } else {
-        _this.transition = undefined;
-      }
-    });
-
     this.props = _objectSpread({
@@ -209,3 +146,4 @@ title: title,
       transitionEasing: 'easeOutQuad',
-      gaugeTickMarksCount: 6,
+      xAxisTickMarkWidth: 60,
+      yAxisTickMarksCount: 6,
       timelineWindowSize: 40,
@@ -228,2 +166,5 @@ canvasWidth: 512,
     });
+    this.transition = new _Transition.default(function () {
+      return _this.state;
+    }, this.setState, this.props);
   }
@@ -235,23 +176,11 @@
       this.rootNode.classList.add('chartogram');
-      this.rootNode.innerHTML = "\n\t\t\t".concat(INITIAL_MARKUP.replace('{title}', this.props.title), "\n\t\t\t").concat(_Timeline.default.INITIAL_MARKUP, "\n\t\t\t").concat(_Togglers.default.INITIAL_MARKUP, "\n\t\t");
-      this.tooltipContainer = this.rootNode.querySelector('.chartogram__plan');
-      this.canvas = this.rootNode.querySelector('.chartogram__canvas');
-      this.canvasWrapper = this.rootNode.querySelector('.chartogram__canvas-wrapper');
-      this.xAxis = this.rootNode.querySelector('.chartogram__x');
-      this.yAxis = this.rootNode.querySelector('.chartogram__y'); // Render will be called after `.componentDidMount()`.
+      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(_Charts.default.INITIAL_MARKUP, "\n\t\t\t").concat(_Timeline.default.INITIAL_MARKUP, "\n\t\t\t").concat(_Togglers.default.INITIAL_MARKUP, "\n\t\t"); // Render will be called after `.componentDidMount()`.
 
       this.state = this.getInitialState();
-      this.updateAspectRatio();
+      this.charts = new _Charts.default(this.getChartsProps());
+      this.charts.componentDidMount(this.rootNode);
       this.timeline = new _Timeline.default(this.getTimelineProps());
-      this.timeline.componentDidMount();
+      this.timeline.componentDidMount(this.rootNode);
       this.togglers = new _Togglers.default(this.getTogglersProps());
-      this.togglers.componentDidMount();
-      this.tooltip = new _Tooltip.default(this.getTooltipProps());
-      this.tooltip.componentDidMount();
-      this.mountGridLines();
-      this.mountGauges();
-      this.mountGraphs(); // Add window resize event listener.
-
-      window.addEventListener('resize', this.onResizeThrottled);
-      this.render();
+      this.togglers.componentDidMount(this.rootNode);
     }
@@ -261,35 +190,31 @@ }, {
     value: function componentWillUnmount() {
+      this.charts.componentWillUnmount();
       this.timeline.componentWillUnmount();
+      this.transition.cleanUp();
       this.rootNode.classList.remove('chartogram');
-      (0, _utility.clearElement)(this.rootNode); // Remove window resize event listener.
+      (0, _utility.clearElement)(this.rootNode);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(previousProps, previousState) {
+      this.charts.props = this.getChartsProps();
+      this.charts.componentDidUpdate();
 
-      window.removeEventListener('resize', this.onResizeThrottled);
-
-      if (this.transition) {
-        cancelAnimationFrame(this.transition);
+      if (this.shouldUpdateTimeline(previousState)) {
+        this.timeline.props = this.getTimelineProps();
+        this.timeline.componentDidUpdate();
       }
     }
   }, {
-    key: "getCanvasAspectRatio",
-    value: function getCanvasAspectRatio() {
-      var canvasDimensions = this.canvas.getBoundingClientRect();
-      return canvasDimensions.width / canvasDimensions.height;
+    key: "shouldUpdateTimeline",
+    value: function shouldUpdateTimeline(previousState) {
+      return this.state.graphOpacity !== previousState.graphOpacity || this.state.minYGlobal !== previousState.minYGlobal || this.state.maxYGlobal !== previousState.maxYGlobal;
     }
   }, {
-    key: "setState",
-    value: function setState(newState) {
-      var renderTimeline = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-
-      if (newState.aspectRatio !== this.state.aspectRatio) {
-        this.updateAspectRatio(newState.aspectRatio);
-      }
-
-      this.state = _objectSpread({}, this.state, newState);
-      this.render();
-
-      if (renderTimeline) {
-        this.timeline.componentDidUpdate(this.getTimelineProps());
-      }
-
-      this.tooltip.componentDidUpdate(this.getTooltipProps());
+    key: "getChartsProps",
+    value: function getChartsProps() {
+      return _objectSpread({}, this.props, this.state, {
+        createPolylinePoints: this.createPolylinePoints,
+        fixSvgCoordinate: this.fixSvgCoordinate
+      });
     }
@@ -300,3 +225,2 @@ }, {
       return {
-        rootNode: this.rootNode,
         data: this.data,
@@ -319,3 +243,2 @@ canvasWidth: this.props.canvasWidth,
       return {
-        rootNode: this.rootNode,
         data: this.data,
@@ -326,22 +249,2 @@ onToggle: this.onToggle
   }, {
-    key: "getTooltipProps",
-    value: function getTooltipProps() {
-      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.fixSvgCoordinate,
-        minX: this.state.minX,
-        maxX: this.state.maxX,
-        maxY: this.state.maxY,
-        xPoints: this.state.xPoints,
-        y: this.state.y
-      };
-    }
-  }, {
     key: "getInitialState",
@@ -365,3 +268,2 @@ value: function getInitialState() {
       return _objectSpread({}, this.createState(fromRatio, toRatio), {
-        aspectRatio: this.getCanvasAspectRatio(),
         graphOpacity: this.data.y.map(function (_) {
@@ -529,247 +431,2 @@ return 1;
     }
-  }, {
-    key: "updateAspectRatio",
-    value: function updateAspectRatio() {
-      var aspectRatio = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state.aspectRatio;
-      var canvasWidth = this.props.canvasWidth; // Set canvas `viewBox`.
-
-      this.canvas.setAttribute('viewBox', "0 0 ".concat(canvasWidth, " ").concat(this.fixSvgCoordinate(canvasWidth / aspectRatio)));
-    }
-  }, {
-    key: "updateGridLine",
-    value: function updateGridLine(i, y) {
-      var maxY = this.state.maxY;
-      var line = this.gridLines[i];
-      line.setAttribute('y1', this.fixSvgCoordinate(this.mapY(maxY - y)));
-      line.setAttribute('y2', this.fixSvgCoordinate(this.mapY(maxY - y)));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      var gaugeTickMarksCount = this.props.gaugeTickMarksCount;
-      var _this$state4 = this.state,
-          y = _this$state4.y,
-          minX = _this$state4.minX,
-          maxX = _this$state4.maxX,
-          minY = _this$state4.minY,
-          maxY = _this$state4.maxY,
-          graphOpacity = _this$state4.graphOpacity; // Calculate grid lines' coordinates.
-
-      var minY_ = minY;
-      var maxY_ = (0, _utility.getLowerSiblingDivisibleBy)(maxY, 10);
-      var yAxisScale = (maxY - minY) / (maxY_ - minY_);
-      var yAxisTickMarks = (0, _utility.divideInterval)(minY_, maxY_, gaugeTickMarksCount); // Update grid lines.
-
-      yAxisTickMarks.forEach(function (y, i) {
-        return _this3.updateGridLine(i, y);
-      }); // Update graphs.
-
-      var i = 0;
-
-      while (i < y.length) {
-        var _y$i = y[i],
-            isShown = _y$i.isShown,
-            graphPoints = _y$i.graphPoints,
-            color = _y$i.color;
-        var opacity = graphOpacity[i]; // Update graph.
-
-        if (isShown || opacity > 0) {
-          if (this.graphs[i]) {
-            this.updateGraph(i, graphPoints, opacity);
-          } else {
-            this.mountGraph(i, graphPoints, color, opacity);
-          }
-        } else if (this.graphs[i]) {
-          this.unmountGraph(i);
-        }
-
-        i++;
-      } // Update gauges.
-
-
-      this.updateGauges(minX, maxX, minY_, maxY_, yAxisScale);
-    }
-  }, {
-    key: "renderGraph",
-    value: function renderGraph(graphPoints, color) {
-      var opacity = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-      var graph = document.createElementNS(SVG_XMLNS, 'polyline');
-      graph.setAttribute('stroke', color);
-      graph.classList.add('chartogram__graph');
-      this.updateGraph(graph, graphPoints, opacity);
-      return graph;
-    }
-  }, {
-    key: "mountGridLines",
-    value: function mountGridLines() {
-      var gaugeTickMarksCount = this.props.gaugeTickMarksCount;
-      this.gridLines = [];
-      var i = 0;
-
-      while (i < gaugeTickMarksCount) {
-        var line = this.renderGridLine(0);
-        this.gridLines.push(line);
-        this.canvas.appendChild(line);
-        i++;
-      }
-    }
-  }, {
-    key: "mountGraphs",
-    value: function mountGraphs() {
-      var _this4 = this;
-
-      this.graphs = [];
-      var y = this.state.y;
-      y.forEach(function (_ref3, i) {
-        var graphPoints = _ref3.graphPoints,
-            color = _ref3.color;
-
-        _this4.mountGraph(i, graphPoints, color);
-      });
-    }
-  }, {
-    key: "mountGraph",
-    value: function mountGraph(i, graphPoints, color, opacity) {
-      var graph = this.renderGraph(graphPoints, color, opacity);
-      this.graphs[i] = graph;
-      this.canvas.appendChild(graph);
-    }
-  }, {
-    key: "unmountGraph",
-    value: function unmountGraph(i) {
-      this.canvas.removeChild(this.graphs[i]);
-      this.graphs[i] = undefined;
-    }
-  }, {
-    key: "updateGraph",
-    value: function updateGraph(graph, graphPoints, opacity) {
-      var _this5 = this;
-
-      var _this$state5 = this.state,
-          xGraphPoints = _this$state5.xGraphPoints,
-          maxY = _this$state5.maxY;
-
-      if (typeof graph === 'number') {
-        graph = this.graphs[graph];
-      }
-
-      graph.setAttribute('points', this.createPolylinePoints(xGraphPoints.map(this.mapX), graphPoints.map(function (y) {
-        return _this5.mapY(maxY - y);
-      })).join(' '));
-
-      if (opacity !== 1) {
-        graph.style.opacity = opacity;
-      }
-    }
-  }, {
-    key: "transitionState",
-    value: function transitionState(minY, maxY, minYGlobal, maxYGlobal, graphOpacity) {
-      var maxTransitionDuration = this.props.transitionDuration;
-
-      if (this.transition) {
-        cancelAnimationFrame(this.transition);
-        this.transitionStateTick();
-        cancelAnimationFrame(this.transition);
-      }
-
-      var transitionDuration = maxTransitionDuration;
-
-      if (minY !== undefined) {
-        var heightBefore = this.state.maxY - this.state.minY;
-        var deltaMaxY = Math.abs(maxY - this.state.maxY) / heightBefore;
-        var deltaMinY = Math.abs(minY - this.state.minY) / heightBefore;
-        var deltaY = Math.max(deltaMinY, deltaMaxY);
-        transitionDuration = maxTransitionDuration * Math.max(0.2, Math.min(deltaY, 0.5) * 2);
-      }
-
-      var state = {
-        transitionStartedAt: Date.now(),
-        transitionDuration: transitionDuration
-      };
-
-      if (minY !== undefined) {
-        state.minYFrom = this.state.minY;
-        state.maxYFrom = this.state.maxY;
-        state.minYTo = minY;
-        state.maxYTo = maxY;
-      }
-
-      if (graphOpacity !== undefined) {
-        state.graphOpacityFrom = this.state.graphOpacity;
-        state.graphOpacityTo = graphOpacity;
-      }
-
-      if (minYGlobal !== undefined) {
-        state.minYGlobalFrom = this.state.minYGlobal;
-        state.maxYGlobalFrom = this.state.maxYGlobal;
-        state.minYGlobalTo = minYGlobal;
-        state.maxYGlobalTo = maxYGlobal;
-      }
-
-      var shouldUpdateTimeline = graphOpacity !== undefined || minYGlobal !== undefined;
-      state.transitionUpdatesTimeline = shouldUpdateTimeline;
-      this.setState(state, shouldUpdateTimeline); // Place the following in a `setState()` callback in case of React.
-
-      this.transition = requestAnimationFrame(this.transitionStateTick);
-    }
-  }, {
-    key: "renderGridLine",
-    value: function renderGridLine(y) {
-      var _this$state6 = this.state,
-          minX = _this$state6.minX,
-          maxX = _this$state6.maxX,
-          minY = _this$state6.minY,
-          maxY = _this$state6.maxY;
-      var line = document.createElementNS(SVG_XMLNS, 'line');
-      line.classList.add('chartogram__grid-line');
-      line.setAttribute('x1', this.fixSvgCoordinate(this.mapX(minX)));
-      line.setAttribute('x2', this.fixSvgCoordinate(this.mapX(maxX)));
-      line.setAttribute('y1', this.fixSvgCoordinate(this.mapY(maxY - y)));
-      line.setAttribute('y2', this.fixSvgCoordinate(this.mapY(maxY - y)));
-      return line;
-    }
-  }, {
-    key: "mountGauges",
-    value: function mountGauges() {
-      var gaugeTickMarksCount = this.props.gaugeTickMarksCount;
-      var i = 0;
-
-      while (i < gaugeTickMarksCount) {
-        this.xAxis.appendChild(document.createElement('div'));
-        this.yAxis.appendChild(document.createElement('div'));
-        i++;
-      }
-    }
-  }, {
-    key: "updateGauges",
-    value: function updateGauges(minX, maxX, minY, maxY, yAxisScale) {
-      var _this$props = this.props,
-          months = _this$props.months,
-          gaugeTickMarksCount = _this$props.gaugeTickMarksCount;
-      this.updateGauge(this.xAxis, minX, maxX, gaugeTickMarksCount, function (timestamp) {
-        var date = new Date(timestamp);
-        return "".concat(months[date.getMonth()], " ").concat(date.getDate());
-      });
-      this.updateGauge(this.yAxis, minY, maxY, gaugeTickMarksCount);
-      this.yAxis.style.height = "".concat(100 / yAxisScale, "%");
-    }
-  }, {
-    key: "updateGauge",
-    value: function updateGauge(gauge, min, max, tickMarksCount, transform) {
-      var i = 0;
-
-      while (i < tickMarksCount) {
-        var tickMark = gauge.childNodes[i];
-        var value = min + i * (max - min) / (tickMarksCount - 1);
-
-        if (transform) {
-          value = transform(value);
-        }
-
-        tickMark.textContent = value;
-        i++;
-      }
-    }
   }]);
@@ -783,24 +440,2 @@
 var WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-var INITIAL_MARKUP = "\n\t<header class=\"chartogram__header\">\n\t\t<h1 class=\"chartogram__title\">{title}</h1>\n\t</header>\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"; // https://gist.github.com/gre/1650294
-
-var EASING = {
-  linear: function linear(t) {
-    return t;
-  },
-  easeInOutSin: function easeInOutSin(t) {
-    return (1 + Math.sin(Math.PI * t - Math.PI / 2)) / 2;
-  },
-  easeInOutQuad: function easeInOutQuad(t) {
-    return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
-  },
-  easeInOutCubic: function easeInOutCubic(t) {
-    return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
-  },
-  easeOutCubic: function easeOutCubic(t) {
-    return --t * t * t + 1;
-  },
-  easeOutQuad: function easeOutQuad(t) {
-    return t * (2 - t);
-  }
-};
 //# sourceMappingURL=Chartogram.js.map

commonjs/Timeline.js

@@ -156,15 +156,11 @@ "use strict";
     key: "componentDidUpdate",
-    value: function componentDidUpdate(props) {
-      if (this.props !== props) {
-        this.props = props;
-        this.state = {
-          aspectRatio: this.getCanvasAspectRatio()
-        };
-        this.onChangeBounds(this.props.fromRatio, this.props.toRatio), this.render();
-      }
+    value: function componentDidUpdate() {
+      this.state = {
+        aspectRatio: this.getCanvasAspectRatio()
+      };
+      this.onChangeBounds(this.props.fromRatio, this.props.toRatio), this.render();
     }
   }, {
     key: "componentDidMount",
-    value: function componentDidMount() {
-      var rootNode = this.props.rootNode;
+    value: function componentDidMount(rootNode) {
       this.timeline = rootNode.querySelector('.chartogram__timeline');
@@ -171,0 +167,0 @@ this.timelineOverlayLeft = rootNode.querySelector('.chartogram__timeline-overlay-left');

commonjs/Togglers.js

@@ -26,3 +26,3 @@ "use strict";
 
-    _defineProperty(this, "createGraphToggler", function (_ref) {
+    _defineProperty(this, "renderToggler", function (_ref) {
       var id = _ref.id,
@@ -85,10 +85,11 @@ name = _ref.name,
     key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props = this.props,
-          rootNode = _this$props.rootNode,
-          data = _this$props.data; // Add graph togglers.
+    value: function componentDidMount(rootNode) {
+      this.togglers = rootNode.querySelector('.chartogram__chart-togglers');
+      this.mount();
+    }
+  }, {
+    key: "mount",
+    value: function mount() {
+      var data = this.props.data;
 
-      var graphTogglers = rootNode.querySelector('.chartogram__chart-togglers');
-      (0, _utility.clearElement)(graphTogglers);
-
       for (var _iterator = data.y, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
@@ -107,3 +108,3 @@ var _ref2;
         var y = _ref2;
-        graphTogglers.appendChild(this.createGraphToggler(y));
+        this.togglers.appendChild(this.renderToggler(y));
       }
@@ -110,0 +111,0 @@ }

commonjs/Tooltip.js

@@ -194,6 +194,3 @@ "use strict";
     key: "componentDidUpdate",
-    value: function componentDidUpdate(props) {
-      if (this.props !== props) {
-        this.props = props;
-      }
+    value: function componentDidUpdate() {// Ignored.
     }
@@ -200,0 +197,0 @@ }, {

modules/Chartogram.js

@@ -19,7 +19,7 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
 
-import { clearElement, commaJoin, getLowerSiblingDivisibleBy, divideInterval, throttle } from './utility';
+import { clearElement, commaJoin } from './utility';
+import Charts from './Charts';
 import Timeline from './Timeline';
 import Togglers from './Togglers';
-import Tooltip from './Tooltip';
-var SVG_XMLNS = 'http://www.w3.org/2000/svg';
+import Transition from './Transition';
 
@@ -37,15 +37,15 @@ var Chartogram =
 
-    _defineProperty(this, "onResize", function (event) {
-      _this.setState({
-        aspectRatio: _this.getCanvasAspectRatio()
-      }, false);
+    _defineProperty(this, "setState", function (newState) {
+      var previousState = _this.state;
+      _this.state = _objectSpread({}, _this.state, newState);
+
+      _this.componentDidUpdate(_this.props, previousState);
     });
 
-    _defineProperty(this, "onResizeThrottled", throttle(this.onResize, 33));
-
     _defineProperty(this, "onToggle", function (id) {
-      var y = _this.state.y.find(function (_) {
+      var i = _this.state.y.findIndex(function (_) {
         return _.id === id;
-      }); // Won't allow hiding all graphs.
+      });
 
+      var y = _this.state.y[i]; // Won't allow hiding all graphs.
 
@@ -60,10 +60,7 @@ if (y.isShown) {
         }
-      }
+      } // Mutating `this.state` without `setState()` for simplicity.
 
+
       y.isShown = !y.isShown;
 
-      _this.setState({
-        y: _this.state.y
-      });
-
       var _this$calculateMinMax = _this.calculateMinMaxY(_this.state.y),
@@ -75,6 +72,22 @@ minY = _this$calculateMinMax.minY,
 
-      _this.transitionState(minY, maxY, minYGlobal, maxYGlobal, _this.state.y.map(function (y) {
-        return y.isShown ? 1 : 0;
-      }));
+      _this.transition.batch();
 
+      _this.transition.add('charts', 'minY', minY);
+
+      _this.transition.add('charts', 'maxY', maxY);
+
+      _this.transition.add('timeline', 'minYGlobal', minYGlobal);
+
+      _this.transition.add('timeline', 'maxYGlobal', maxYGlobal);
+
+      _this.transition.add("graph#".concat(id, "/opacity"), function (state) {
+        return state.graphOpacity[i];
+      }, function (state, value) {
+        // Change `graphOpacity` for "shallow equal" comparison.
+        state.graphOpacity = state.graphOpacity.slice();
+        state.graphOpacity[i] = value;
+      }, y.isShown ? 1 : 0);
+
+      _this.transition.run();
+
       return true;
@@ -91,5 +104,11 @@ });
 
-      _this.setState(state, false);
+      _this.setState(state);
 
-      _this.transitionState(minY, maxY);
+      _this.transition.batch();
+
+      _this.transition.add('charts', 'minY', minY);
+
+      _this.transition.add('charts', 'maxY', maxY);
+
+      _this.transition.run();
     });
@@ -107,84 +126,2 @@
 
-    _defineProperty(this, "mapX", function (x) {
-      var canvasWidth = _this.props.canvasWidth;
-      var _this$state = _this.state,
-          minX = _this$state.minX,
-          maxX = _this$state.maxX;
-      return (x - minX) / (maxX - minX) * canvasWidth;
-    });
-
-    _defineProperty(this, "mapY", function (y) {
-      var canvasWidth = _this.props.canvasWidth;
-      var _this$state2 = _this.state,
-          minY = _this$state2.minY,
-          maxY = _this$state2.maxY,
-          aspectRatio = _this$state2.aspectRatio;
-      return (y - minY) / (maxY - minY) * canvasWidth / aspectRatio;
-    });
-
-    _defineProperty(this, "transitionStateTick", function () {
-      var transitionEasing = _this.props.transitionEasing;
-      var _this$state3 = _this.state,
-          transitionStartedAt = _this$state3.transitionStartedAt,
-          transitionDuration = _this$state3.transitionDuration,
-          transitionUpdatesTimeline = _this$state3.transitionUpdatesTimeline,
-          graphOpacityFrom = _this$state3.graphOpacityFrom,
-          graphOpacityTo = _this$state3.graphOpacityTo,
-          minYFrom = _this$state3.minYFrom,
-          minYTo = _this$state3.minYTo,
-          maxYFrom = _this$state3.maxYFrom,
-          maxYTo = _this$state3.maxYTo,
-          minYGlobalFrom = _this$state3.minYGlobalFrom,
-          minYGlobalTo = _this$state3.minYGlobalTo,
-          maxYGlobalFrom = _this$state3.maxYGlobalFrom,
-          maxYGlobalTo = _this$state3.maxYGlobalTo;
-      var elapsed = Date.now() - transitionStartedAt;
-      var ratio = Math.min(elapsed / transitionDuration, 1);
-      ratio = EASING[transitionEasing](ratio);
-      var state = {};
-
-      if (minYTo !== undefined) {
-        state.minY = minYFrom + (minYTo - minYFrom) * ratio;
-        state.maxY = maxYFrom + (maxYTo - maxYFrom) * ratio;
-
-        if (ratio === 1) {
-          state.minYFrom = undefined;
-          state.minYTo = undefined;
-          state.maxYFrom = undefined;
-          state.maxYTo = undefined;
-        }
-      }
-
-      if (minYGlobalTo !== undefined) {
-        state.minYGlobal = minYGlobalFrom + (minYGlobalTo - minYGlobalFrom) * ratio;
-        state.maxYGlobal = maxYGlobalFrom + (maxYGlobalTo - maxYGlobalFrom) * ratio;
-
-        if (ratio === 1) {
-          state.minYGlobalFrom = undefined;
-          state.minYGlobalTo = undefined;
-          state.maxYGlobalFrom = undefined;
-          state.maxYGlobalTo = undefined;
-        }
-      }
-
-      if (graphOpacityTo !== undefined) {
-        state.graphOpacity = graphOpacityTo.map(function (_, i) {
-          return graphOpacityFrom[i] + (graphOpacityTo[i] - graphOpacityFrom[i]) * ratio;
-        });
-
-        if (ratio === 1) {
-          state.graphOpacityFrom = undefined;
-          state.graphOpacityTo = undefined;
-        }
-      }
-
-      _this.setState(state, transitionUpdatesTimeline);
-
-      if (ratio < 1) {
-        _this.transition = requestAnimationFrame(_this.transitionStateTick);
-      } else {
-        _this.transition = undefined;
-      }
-    });
-
     this.props = _objectSpread({
@@ -194,3 +131,4 @@ title: title,
       transitionEasing: 'easeOutQuad',
-      gaugeTickMarksCount: 6,
+      xAxisTickMarkWidth: 60,
+      yAxisTickMarksCount: 6,
       timelineWindowSize: 40,
@@ -213,2 +151,5 @@ canvasWidth: 512,
     });
+    this.transition = new Transition(function () {
+      return _this.state;
+    }, this.setState, this.props);
   }
@@ -220,23 +161,11 @@
       this.rootNode.classList.add('chartogram');
-      this.rootNode.innerHTML = "\n\t\t\t".concat(INITIAL_MARKUP.replace('{title}', this.props.title), "\n\t\t\t").concat(Timeline.INITIAL_MARKUP, "\n\t\t\t").concat(Togglers.INITIAL_MARKUP, "\n\t\t");
-      this.tooltipContainer = this.rootNode.querySelector('.chartogram__plan');
-      this.canvas = this.rootNode.querySelector('.chartogram__canvas');
-      this.canvasWrapper = this.rootNode.querySelector('.chartogram__canvas-wrapper');
-      this.xAxis = this.rootNode.querySelector('.chartogram__x');
-      this.yAxis = this.rootNode.querySelector('.chartogram__y'); // Render will be called after `.componentDidMount()`.
+      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(Charts.INITIAL_MARKUP, "\n\t\t\t").concat(Timeline.INITIAL_MARKUP, "\n\t\t\t").concat(Togglers.INITIAL_MARKUP, "\n\t\t"); // Render will be called after `.componentDidMount()`.
 
       this.state = this.getInitialState();
-      this.updateAspectRatio();
+      this.charts = new Charts(this.getChartsProps());
+      this.charts.componentDidMount(this.rootNode);
       this.timeline = new Timeline(this.getTimelineProps());
-      this.timeline.componentDidMount();
+      this.timeline.componentDidMount(this.rootNode);
       this.togglers = new Togglers(this.getTogglersProps());
-      this.togglers.componentDidMount();
-      this.tooltip = new Tooltip(this.getTooltipProps());
-      this.tooltip.componentDidMount();
-      this.mountGridLines();
-      this.mountGauges();
-      this.mountGraphs(); // Add window resize event listener.
-
-      window.addEventListener('resize', this.onResizeThrottled);
-      this.render();
+      this.togglers.componentDidMount(this.rootNode);
     }
@@ -246,35 +175,31 @@ }, {
     value: function componentWillUnmount() {
+      this.charts.componentWillUnmount();
       this.timeline.componentWillUnmount();
+      this.transition.cleanUp();
       this.rootNode.classList.remove('chartogram');
-      clearElement(this.rootNode); // Remove window resize event listener.
+      clearElement(this.rootNode);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(previousProps, previousState) {
+      this.charts.props = this.getChartsProps();
+      this.charts.componentDidUpdate();
 
-      window.removeEventListener('resize', this.onResizeThrottled);
-
-      if (this.transition) {
-        cancelAnimationFrame(this.transition);
+      if (this.shouldUpdateTimeline(previousState)) {
+        this.timeline.props = this.getTimelineProps();
+        this.timeline.componentDidUpdate();
       }
     }
   }, {
-    key: "getCanvasAspectRatio",
-    value: function getCanvasAspectRatio() {
-      var canvasDimensions = this.canvas.getBoundingClientRect();
-      return canvasDimensions.width / canvasDimensions.height;
+    key: "shouldUpdateTimeline",
+    value: function shouldUpdateTimeline(previousState) {
+      return this.state.graphOpacity !== previousState.graphOpacity || this.state.minYGlobal !== previousState.minYGlobal || this.state.maxYGlobal !== previousState.maxYGlobal;
     }
   }, {
-    key: "setState",
-    value: function setState(newState) {
-      var renderTimeline = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-
-      if (newState.aspectRatio !== this.state.aspectRatio) {
-        this.updateAspectRatio(newState.aspectRatio);
-      }
-
-      this.state = _objectSpread({}, this.state, newState);
-      this.render();
-
-      if (renderTimeline) {
-        this.timeline.componentDidUpdate(this.getTimelineProps());
-      }
-
-      this.tooltip.componentDidUpdate(this.getTooltipProps());
+    key: "getChartsProps",
+    value: function getChartsProps() {
+      return _objectSpread({}, this.props, this.state, {
+        createPolylinePoints: this.createPolylinePoints,
+        fixSvgCoordinate: this.fixSvgCoordinate
+      });
     }
@@ -285,3 +210,2 @@ }, {
       return {
-        rootNode: this.rootNode,
         data: this.data,
@@ -304,3 +228,2 @@ canvasWidth: this.props.canvasWidth,
       return {
-        rootNode: this.rootNode,
         data: this.data,
@@ -311,22 +234,2 @@ onToggle: this.onToggle
   }, {
-    key: "getTooltipProps",
-    value: function getTooltipProps() {
-      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.fixSvgCoordinate,
-        minX: this.state.minX,
-        maxX: this.state.maxX,
-        maxY: this.state.maxY,
-        xPoints: this.state.xPoints,
-        y: this.state.y
-      };
-    }
-  }, {
     key: "getInitialState",
@@ -350,3 +253,2 @@ value: function getInitialState() {
       return _objectSpread({}, this.createState(fromRatio, toRatio), {
-        aspectRatio: this.getCanvasAspectRatio(),
         graphOpacity: this.data.y.map(function (_) {
@@ -514,247 +416,2 @@ return 1;
     }
-  }, {
-    key: "updateAspectRatio",
-    value: function updateAspectRatio() {
-      var aspectRatio = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state.aspectRatio;
-      var canvasWidth = this.props.canvasWidth; // Set canvas `viewBox`.
-
-      this.canvas.setAttribute('viewBox', "0 0 ".concat(canvasWidth, " ").concat(this.fixSvgCoordinate(canvasWidth / aspectRatio)));
-    }
-  }, {
-    key: "updateGridLine",
-    value: function updateGridLine(i, y) {
-      var maxY = this.state.maxY;
-      var line = this.gridLines[i];
-      line.setAttribute('y1', this.fixSvgCoordinate(this.mapY(maxY - y)));
-      line.setAttribute('y2', this.fixSvgCoordinate(this.mapY(maxY - y)));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      var gaugeTickMarksCount = this.props.gaugeTickMarksCount;
-      var _this$state4 = this.state,
-          y = _this$state4.y,
-          minX = _this$state4.minX,
-          maxX = _this$state4.maxX,
-          minY = _this$state4.minY,
-          maxY = _this$state4.maxY,
-          graphOpacity = _this$state4.graphOpacity; // Calculate grid lines' coordinates.
-
-      var minY_ = minY;
-      var maxY_ = getLowerSiblingDivisibleBy(maxY, 10);
-      var yAxisScale = (maxY - minY) / (maxY_ - minY_);
-      var yAxisTickMarks = divideInterval(minY_, maxY_, gaugeTickMarksCount); // Update grid lines.
-
-      yAxisTickMarks.forEach(function (y, i) {
-        return _this3.updateGridLine(i, y);
-      }); // Update graphs.
-
-      var i = 0;
-
-      while (i < y.length) {
-        var _y$i = y[i],
-            isShown = _y$i.isShown,
-            graphPoints = _y$i.graphPoints,
-            color = _y$i.color;
-        var opacity = graphOpacity[i]; // Update graph.
-
-        if (isShown || opacity > 0) {
-          if (this.graphs[i]) {
-            this.updateGraph(i, graphPoints, opacity);
-          } else {
-            this.mountGraph(i, graphPoints, color, opacity);
-          }
-        } else if (this.graphs[i]) {
-          this.unmountGraph(i);
-        }
-
-        i++;
-      } // Update gauges.
-
-
-      this.updateGauges(minX, maxX, minY_, maxY_, yAxisScale);
-    }
-  }, {
-    key: "renderGraph",
-    value: function renderGraph(graphPoints, color) {
-      var opacity = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-      var graph = document.createElementNS(SVG_XMLNS, 'polyline');
-      graph.setAttribute('stroke', color);
-      graph.classList.add('chartogram__graph');
-      this.updateGraph(graph, graphPoints, opacity);
-      return graph;
-    }
-  }, {
-    key: "mountGridLines",
-    value: function mountGridLines() {
-      var gaugeTickMarksCount = this.props.gaugeTickMarksCount;
-      this.gridLines = [];
-      var i = 0;
-
-      while (i < gaugeTickMarksCount) {
-        var line = this.renderGridLine(0);
-        this.gridLines.push(line);
-        this.canvas.appendChild(line);
-        i++;
-      }
-    }
-  }, {
-    key: "mountGraphs",
-    value: function mountGraphs() {
-      var _this4 = this;
-
-      this.graphs = [];
-      var y = this.state.y;
-      y.forEach(function (_ref3, i) {
-        var graphPoints = _ref3.graphPoints,
-            color = _ref3.color;
-
-        _this4.mountGraph(i, graphPoints, color);
-      });
-    }
-  }, {
-    key: "mountGraph",
-    value: function mountGraph(i, graphPoints, color, opacity) {
-      var graph = this.renderGraph(graphPoints, color, opacity);
-      this.graphs[i] = graph;
-      this.canvas.appendChild(graph);
-    }
-  }, {
-    key: "unmountGraph",
-    value: function unmountGraph(i) {
-      this.canvas.removeChild(this.graphs[i]);
-      this.graphs[i] = undefined;
-    }
-  }, {
-    key: "updateGraph",
-    value: function updateGraph(graph, graphPoints, opacity) {
-      var _this5 = this;
-
-      var _this$state5 = this.state,
-          xGraphPoints = _this$state5.xGraphPoints,
-          maxY = _this$state5.maxY;
-
-      if (typeof graph === 'number') {
-        graph = this.graphs[graph];
-      }
-
-      graph.setAttribute('points', this.createPolylinePoints(xGraphPoints.map(this.mapX), graphPoints.map(function (y) {
-        return _this5.mapY(maxY - y);
-      })).join(' '));
-
-      if (opacity !== 1) {
-        graph.style.opacity = opacity;
-      }
-    }
-  }, {
-    key: "transitionState",
-    value: function transitionState(minY, maxY, minYGlobal, maxYGlobal, graphOpacity) {
-      var maxTransitionDuration = this.props.transitionDuration;
-
-      if (this.transition) {
-        cancelAnimationFrame(this.transition);
-        this.transitionStateTick();
-        cancelAnimationFrame(this.transition);
-      }
-
-      var transitionDuration = maxTransitionDuration;
-
-      if (minY !== undefined) {
-        var heightBefore = this.state.maxY - this.state.minY;
-        var deltaMaxY = Math.abs(maxY - this.state.maxY) / heightBefore;
-        var deltaMinY = Math.abs(minY - this.state.minY) / heightBefore;
-        var deltaY = Math.max(deltaMinY, deltaMaxY);
-        transitionDuration = maxTransitionDuration * Math.max(0.2, Math.min(deltaY, 0.5) * 2);
-      }
-
-      var state = {
-        transitionStartedAt: Date.now(),
-        transitionDuration: transitionDuration
-      };
-
-      if (minY !== undefined) {
-        state.minYFrom = this.state.minY;
-        state.maxYFrom = this.state.maxY;
-        state.minYTo = minY;
-        state.maxYTo = maxY;
-      }
-
-      if (graphOpacity !== undefined) {
-        state.graphOpacityFrom = this.state.graphOpacity;
-        state.graphOpacityTo = graphOpacity;
-      }
-
-      if (minYGlobal !== undefined) {
-        state.minYGlobalFrom = this.state.minYGlobal;
-        state.maxYGlobalFrom = this.state.maxYGlobal;
-        state.minYGlobalTo = minYGlobal;
-        state.maxYGlobalTo = maxYGlobal;
-      }
-
-      var shouldUpdateTimeline = graphOpacity !== undefined || minYGlobal !== undefined;
-      state.transitionUpdatesTimeline = shouldUpdateTimeline;
-      this.setState(state, shouldUpdateTimeline); // Place the following in a `setState()` callback in case of React.
-
-      this.transition = requestAnimationFrame(this.transitionStateTick);
-    }
-  }, {
-    key: "renderGridLine",
-    value: function renderGridLine(y) {
-      var _this$state6 = this.state,
-          minX = _this$state6.minX,
-          maxX = _this$state6.maxX,
-          minY = _this$state6.minY,
-          maxY = _this$state6.maxY;
-      var line = document.createElementNS(SVG_XMLNS, 'line');
-      line.classList.add('chartogram__grid-line');
-      line.setAttribute('x1', this.fixSvgCoordinate(this.mapX(minX)));
-      line.setAttribute('x2', this.fixSvgCoordinate(this.mapX(maxX)));
-      line.setAttribute('y1', this.fixSvgCoordinate(this.mapY(maxY - y)));
-      line.setAttribute('y2', this.fixSvgCoordinate(this.mapY(maxY - y)));
-      return line;
-    }
-  }, {
-    key: "mountGauges",
-    value: function mountGauges() {
-      var gaugeTickMarksCount = this.props.gaugeTickMarksCount;
-      var i = 0;
-
-      while (i < gaugeTickMarksCount) {
-        this.xAxis.appendChild(document.createElement('div'));
-        this.yAxis.appendChild(document.createElement('div'));
-        i++;
-      }
-    }
-  }, {
-    key: "updateGauges",
-    value: function updateGauges(minX, maxX, minY, maxY, yAxisScale) {
-      var _this$props = this.props,
-          months = _this$props.months,
-          gaugeTickMarksCount = _this$props.gaugeTickMarksCount;
-      this.updateGauge(this.xAxis, minX, maxX, gaugeTickMarksCount, function (timestamp) {
-        var date = new Date(timestamp);
-        return "".concat(months[date.getMonth()], " ").concat(date.getDate());
-      });
-      this.updateGauge(this.yAxis, minY, maxY, gaugeTickMarksCount);
-      this.yAxis.style.height = "".concat(100 / yAxisScale, "%");
-    }
-  }, {
-    key: "updateGauge",
-    value: function updateGauge(gauge, min, max, tickMarksCount, transform) {
-      var i = 0;
-
-      while (i < tickMarksCount) {
-        var tickMark = gauge.childNodes[i];
-        var value = min + i * (max - min) / (tickMarksCount - 1);
-
-        if (transform) {
-          value = transform(value);
-        }
-
-        tickMark.textContent = value;
-        i++;
-      }
-    }
   }]);
@@ -768,24 +425,2 @@
 var WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-var INITIAL_MARKUP = "\n\t<header class=\"chartogram__header\">\n\t\t<h1 class=\"chartogram__title\">{title}</h1>\n\t</header>\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"; // https://gist.github.com/gre/1650294
-
-var EASING = {
-  linear: function linear(t) {
-    return t;
-  },
-  easeInOutSin: function easeInOutSin(t) {
-    return (1 + Math.sin(Math.PI * t - Math.PI / 2)) / 2;
-  },
-  easeInOutQuad: function easeInOutQuad(t) {
-    return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
-  },
-  easeInOutCubic: function easeInOutCubic(t) {
-    return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
-  },
-  easeOutCubic: function easeOutCubic(t) {
-    return --t * t * t + 1;
-  },
-  easeOutQuad: function easeOutQuad(t) {
-    return t * (2 - t);
-  }
-};
 //# sourceMappingURL=Chartogram.js.map

modules/Timeline.js

@@ -148,15 +148,11 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
     key: "componentDidUpdate",
-    value: function componentDidUpdate(props) {
-      if (this.props !== props) {
-        this.props = props;
-        this.state = {
-          aspectRatio: this.getCanvasAspectRatio()
-        };
-        this.onChangeBounds(this.props.fromRatio, this.props.toRatio), this.render();
-      }
+    value: function componentDidUpdate() {
+      this.state = {
+        aspectRatio: this.getCanvasAspectRatio()
+      };
+      this.onChangeBounds(this.props.fromRatio, this.props.toRatio), this.render();
     }
   }, {
     key: "componentDidMount",
-    value: function componentDidMount() {
-      var rootNode = this.props.rootNode;
+    value: function componentDidMount(rootNode) {
       this.timeline = rootNode.querySelector('.chartogram__timeline');
@@ -163,0 +159,0 @@ this.timelineOverlayLeft = rootNode.querySelector('.chartogram__timeline-overlay-left');

modules/Togglers.js

@@ -19,3 +19,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-    _defineProperty(this, "createGraphToggler", function (_ref) {
+    _defineProperty(this, "renderToggler", function (_ref) {
       var id = _ref.id,
@@ -78,10 +78,11 @@ name = _ref.name,
     key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props = this.props,
-          rootNode = _this$props.rootNode,
-          data = _this$props.data; // Add graph togglers.
+    value: function componentDidMount(rootNode) {
+      this.togglers = rootNode.querySelector('.chartogram__chart-togglers');
+      this.mount();
+    }
+  }, {
+    key: "mount",
+    value: function mount() {
+      var data = this.props.data;
 
-      var graphTogglers = rootNode.querySelector('.chartogram__chart-togglers');
-      clearElement(graphTogglers);
-
       for (var _iterator = data.y, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
@@ -100,3 +101,3 @@ var _ref2;
         var y = _ref2;
-        graphTogglers.appendChild(this.createGraphToggler(y));
+        this.togglers.appendChild(this.renderToggler(y));
       }
@@ -103,0 +104,0 @@ }

modules/Tooltip.js

@@ -186,6 +186,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
     key: "componentDidUpdate",
-    value: function componentDidUpdate(props) {
-      if (this.props !== props) {
-        this.props = props;
-      }
+    value: function componentDidUpdate() {// Ignored.
     }
@@ -192,0 +189,0 @@ }, {

package.json

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

source/Chartogram.js

 import {
 	clearElement,
-	commaJoin,
-	getLowerSiblingDivisibleBy,
-	divideInterval,
-	throttle
+	commaJoin
 } from './utility'
 
+import Charts from './Charts'
 import Timeline from './Timeline'
 import Togglers from './Togglers'
-import Tooltip from './Tooltip'
+import Transition from './Transition'
 
-const SVG_XMLNS = 'http://www.w3.org/2000/svg'
-
 export default class Chartogram {
@@ -21,3 +17,4 @@ constructor(rootNode, data, title = 'Title', props = {}) {
 			transitionEasing: 'easeOutQuad',
-			gaugeTickMarksCount: 6,
+			xAxisTickMarkWidth: 60,
+			yAxisTickMarksCount: 6,
 			timelineWindowSize: 40,
@@ -43,2 +40,8 @@ canvasWidth: 512,
 		}
+
+		this.transition = new Transition(
+			() => this.state,
+			this.setState,
+			this.props
+		)
 	}
@@ -50,3 +53,6 @@
 		this.rootNode.innerHTML = `
-			${INITIAL_MARKUP.replace('{title}', this.props.title)}
+			<header class="chartogram__header">
+				<h1 class="chartogram__title">${this.props.title}</h1>
+			</header>
+			${Charts.INITIAL_MARKUP}
 			${Timeline.INITIAL_MARKUP}
@@ -56,68 +62,54 @@ ${Togglers.INITIAL_MARKUP}
 
-		this.tooltipContainer = this.rootNode.querySelector('.chartogram__plan')
-		this.canvas = this.rootNode.querySelector('.chartogram__canvas')
-		this.canvasWrapper = this.rootNode.querySelector('.chartogram__canvas-wrapper')
-		this.xAxis = this.rootNode.querySelector('.chartogram__x')
-		this.yAxis = this.rootNode.querySelector('.chartogram__y')
-
 		// Render will be called after `.componentDidMount()`.
 		this.state = this.getInitialState()
-		this.updateAspectRatio()
 
+		this.charts = new Charts(this.getChartsProps())
+		this.charts.componentDidMount(this.rootNode)
+
 		this.timeline = new Timeline(this.getTimelineProps())
-		this.timeline.componentDidMount()
+		this.timeline.componentDidMount(this.rootNode)
 
 		this.togglers = new Togglers(this.getTogglersProps())
-		this.togglers.componentDidMount()
-
-		this.tooltip = new Tooltip(this.getTooltipProps())
-		this.tooltip.componentDidMount()
-
-		this.mountGridLines()
-		this.mountGauges()
-		this.mountGraphs()
-
-		// Add window resize event listener.
-		window.addEventListener('resize', this.onResizeThrottled)
-
-		this.render()
+		this.togglers.componentDidMount(this.rootNode)
 	}
 
 	componentWillUnmount() {
+		this.charts.componentWillUnmount()
 		this.timeline.componentWillUnmount()
+		this.transition.cleanUp()
 		this.rootNode.classList.remove('chartogram')
 		clearElement(this.rootNode)
-		// Remove window resize event listener.
-		window.removeEventListener('resize', this.onResizeThrottled)
-		if (this.transition) {
-			cancelAnimationFrame(this.transition)
+	}
+
+	setState = (newState) => {
+		const previousState = this.state
+		this.state = {
+			...this.state,
+			...newState
 		}
+		this.componentDidUpdate(this.props, previousState)
 	}
 
-	onResize = (event) => {
-		this.setState({
-			aspectRatio: this.getCanvasAspectRatio()
-		}, false)
+	componentDidUpdate(previousProps, previousState) {
+		this.charts.props = this.getChartsProps()
+		this.charts.componentDidUpdate()
+		if (this.shouldUpdateTimeline(previousState)) {
+			this.timeline.props = this.getTimelineProps()
+			this.timeline.componentDidUpdate()
+		}
 	}
 
-	onResizeThrottled = throttle(this.onResize, 33)
-
-	getCanvasAspectRatio() {
-		const canvasDimensions = this.canvas.getBoundingClientRect()
-		return canvasDimensions.width / canvasDimensions.height
+	shouldUpdateTimeline(previousState) {
+		return this.state.graphOpacity !== previousState.graphOpacity ||
+			this.state.minYGlobal !== previousState.minYGlobal ||
+			this.state.maxYGlobal !== previousState.maxYGlobal
 	}
 
-	setState(newState, renderTimeline = true) {
-		if (newState.aspectRatio !== this.state.aspectRatio) {
-			this.updateAspectRatio(newState.aspectRatio)
-		}
-		this.state = {
+	getChartsProps() {
+		return {
+			...this.props,
 			...this.state,
-			...newState
+			createPolylinePoints: this.createPolylinePoints,
+			fixSvgCoordinate: this.fixSvgCoordinate
 		}
-		this.render()
-		if (renderTimeline) {
-			this.timeline.componentDidUpdate(this.getTimelineProps())
-		}
-		this.tooltip.componentDidUpdate(this.getTooltipProps())
 	}
@@ -127,3 +119,2 @@
 		return {
-			rootNode: this.rootNode,
 			data: this.data,
@@ -145,3 +136,2 @@ canvasWidth: this.props.canvasWidth,
 		return {
-			rootNode: this.rootNode,
 			data: this.data,
@@ -152,21 +142,2 @@ onToggle: this.onToggle
 
-	getTooltipProps() {
-		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.fixSvgCoordinate,
-			minX: this.state.minX,
-			maxX: this.state.maxX,
-			maxY: this.state.maxY,
-			xPoints: this.state.xPoints,
-			y: this.state.y
-		}
-	}
-
 	getInitialState() {
@@ -186,3 +157,2 @@ const { timelineWindowSize } = this.props
 			...this.createState(fromRatio, toRatio),
-			aspectRatio: this.getCanvasAspectRatio(),
 			graphOpacity: this.data.y.map(_ => 1)
@@ -294,3 +264,4 @@ }
 	onToggle = (id) => {
-		const y = this.state.y.find(_ => _.id === id)
+		const i = this.state.y.findIndex(_ => _.id === id)
+		const y = this.state.y[i]
 		// Won't allow hiding all graphs.
@@ -303,14 +274,26 @@ if (y.isShown) {
 		}
+		// Mutating `this.state` without `setState()` for simplicity.
 		y.isShown = !y.isShown
-		this.setState({
-			y: this.state.y
-		})
-		const { minY, maxY, minYGlobal, maxYGlobal } = this.calculateMinMaxY(this.state.y)
-		this.transitionState(
+		const {
 			minY,
 			maxY,
 			minYGlobal,
-			maxYGlobal,
-			this.state.y.map(y => y.isShown ? 1 : 0)
+			maxYGlobal
+		} = this.calculateMinMaxY(this.state.y)
+		this.transition.batch()
+		this.transition.add('charts', 'minY', minY)
+		this.transition.add('charts', 'maxY', maxY)
+		this.transition.add('timeline', 'minYGlobal', minYGlobal)
+		this.transition.add('timeline', 'maxYGlobal', maxYGlobal)
+		this.transition.add(
+			`graph#${id}/opacity`,
+			(state) => state.graphOpacity[i],
+			(state, value) => {
+				// Change `graphOpacity` for "shallow equal" comparison.
+				state.graphOpacity = state.graphOpacity.slice()
+				state.graphOpacity[i] = value
+			},
+			y.isShown ? 1 : 0
 		)
+		this.transition.run()
 		return true
@@ -325,4 +308,7 @@ }
 		delete state.maxY
-		this.setState(state, false)
-		this.transitionState(minY, maxY)
+		this.setState(state)
+		this.transition.batch()
+		this.transition.add('charts', 'minY', minY)
+		this.transition.add('charts', 'maxY', maxY)
+		this.transition.run()
 	}
@@ -340,261 +326,2 @@
 	}
-
-	mapX = (x) => {
-		const { canvasWidth } = this.props
-		const { minX, maxX } = this.state
-		return ((x - minX) / (maxX - minX)) * canvasWidth
-	}
-
-	mapY = (y) => {
-		const { canvasWidth } = this.props
-		const { minY, maxY, aspectRatio } = this.state
-		return ((y - minY) / (maxY - minY)) * canvasWidth / aspectRatio
-	}
-
-	updateAspectRatio(aspectRatio = this.state.aspectRatio) {
-		const { canvasWidth } = this.props
-		// Set canvas `viewBox`.
-		this.canvas.setAttribute('viewBox', `0 0 ${canvasWidth} ${this.fixSvgCoordinate(canvasWidth / aspectRatio)}`)
-	}
-
-	updateGridLine(i, y) {
-		const { maxY } = this.state
-		const line = this.gridLines[i]
-		line.setAttribute('y1', this.fixSvgCoordinate(this.mapY(maxY - y)))
-		line.setAttribute('y2', this.fixSvgCoordinate(this.mapY(maxY - y)))
-	}
-
-	render() {
-		const { gaugeTickMarksCount } = this.props
-		const { y, minX, maxX, minY, maxY, graphOpacity } = this.state
-		// Calculate grid lines' coordinates.
-		const minY_ = minY
-		const maxY_ = getLowerSiblingDivisibleBy(maxY, 10)
-		const yAxisScale = (maxY - minY) / (maxY_ - minY_)
-		const yAxisTickMarks = divideInterval(minY_, maxY_, gaugeTickMarksCount)
-		// Update grid lines.
-		yAxisTickMarks.forEach((y, i) => this.updateGridLine(i, y))
-		// Update graphs.
-		let i = 0
-		while (i < y.length) {
-			const { isShown, graphPoints, color } = y[i]
-			const opacity = graphOpacity[i]
-			// Update graph.
-			if (isShown || opacity > 0) {
-				if (this.graphs[i]) {
-					this.updateGraph(i, graphPoints, opacity)
-				} else {
-					this.mountGraph(i, graphPoints, color, opacity)
-				}
-			} else if (this.graphs[i]) {
-				this.unmountGraph(i)
-			}
-			i++
-		}
-		// Update gauges.
-		this.updateGauges(
-			minX,
-			maxX,
-			minY_,
-			maxY_,
-			yAxisScale
-		)
-	}
-
-	renderGraph(graphPoints, color, opacity = 1) {
-		const graph = document.createElementNS(SVG_XMLNS, 'polyline')
-		graph.setAttribute('stroke', color)
-		graph.classList.add('chartogram__graph')
-		this.updateGraph(graph, graphPoints, opacity)
-		return graph
-	}
-
-	mountGridLines() {
-		const { gaugeTickMarksCount } = this.props
-		this.gridLines = []
-		let i = 0
-		while (i < gaugeTickMarksCount) {
-			const line = this.renderGridLine(0)
-			this.gridLines.push(line)
-			this.canvas.appendChild(line)
-			i++
-		}
-	}
-
-	mountGraphs() {
-		this.graphs = []
-		const { y } = this.state
-		y.forEach(({ graphPoints, color }, i) => {
-			this.mountGraph(i, graphPoints, color)
-		})
-	}
-
-	mountGraph(i, graphPoints, color, opacity) {
-		const graph = this.renderGraph(graphPoints, color, opacity)
-		this.graphs[i] = graph
-		this.canvas.appendChild(graph)
-	}
-
-	unmountGraph(i) {
-		this.canvas.removeChild(this.graphs[i])
-		this.graphs[i] = undefined
-	}
-
-	updateGraph(graph, graphPoints, opacity) {
-		const { xGraphPoints, maxY } = this.state
-		if (typeof graph === 'number') {
-			graph = this.graphs[graph]
-		}
-		graph.setAttribute('points', this.createPolylinePoints(
-			xGraphPoints.map(this.mapX),
-			graphPoints.map(y => this.mapY(maxY - y))
-		).join(' '))
-		if (opacity !== 1) {
-			graph.style.opacity = opacity
-		}
-	}
-
-	transitionState(minY, maxY, minYGlobal, maxYGlobal, graphOpacity) {
-		const { transitionDuration: maxTransitionDuration } = this.props
-		if (this.transition) {
-			cancelAnimationFrame(this.transition)
-			this.transitionStateTick()
-			cancelAnimationFrame(this.transition)
-		}
-		let transitionDuration = maxTransitionDuration
-		if (minY !== undefined) {
-			const heightBefore = this.state.maxY - this.state.minY
-			const deltaMaxY = Math.abs(maxY - this.state.maxY) / heightBefore
-			const deltaMinY = Math.abs(minY - this.state.minY) / heightBefore
-			const deltaY = Math.max(deltaMinY, deltaMaxY)
-			transitionDuration = maxTransitionDuration * Math.max(0.2, Math.min(deltaY, 0.5) * 2)
-		}
-		const state = {
-			transitionStartedAt: Date.now(),
-			transitionDuration
-		}
-		if (minY !== undefined) {
-			state.minYFrom = this.state.minY
-			state.maxYFrom = this.state.maxY
-			state.minYTo = minY
-			state.maxYTo = maxY
-		}
-		if (graphOpacity !== undefined) {
-			state.graphOpacityFrom = this.state.graphOpacity
-			state.graphOpacityTo = graphOpacity
-		}
-		if (minYGlobal !== undefined) {
-			state.minYGlobalFrom = this.state.minYGlobal
-			state.maxYGlobalFrom = this.state.maxYGlobal
-			state.minYGlobalTo = minYGlobal
-			state.maxYGlobalTo = maxYGlobal
-		}
-		const shouldUpdateTimeline = graphOpacity !== undefined || minYGlobal !== undefined
-		state.transitionUpdatesTimeline = shouldUpdateTimeline
-		this.setState(state, shouldUpdateTimeline)
-		// Place the following in a `setState()` callback in case of React.
-		this.transition = requestAnimationFrame(this.transitionStateTick)
-	}
-
-	transitionStateTick = () => {
-		const {
-			transitionEasing
-		} = this.props
-		const {
-			transitionStartedAt,
-			transitionDuration,
-			transitionUpdatesTimeline,
-			graphOpacityFrom,
-			graphOpacityTo,
-			minYFrom,
-			minYTo,
-			maxYFrom,
-			maxYTo,
-			minYGlobalFrom,
-			minYGlobalTo,
-			maxYGlobalFrom,
-			maxYGlobalTo
-		} = this.state
-		const elapsed = Date.now() - transitionStartedAt
-		let ratio = Math.min(elapsed / transitionDuration, 1)
-		ratio = EASING[transitionEasing](ratio)
-		const state = {}
-		if (minYTo !== undefined) {
-			state.minY = minYFrom + (minYTo - minYFrom) * ratio
-			state.maxY = maxYFrom + (maxYTo - maxYFrom) * ratio
-			if (ratio === 1) {
-				state.minYFrom = undefined
-				state.minYTo = undefined
-				state.maxYFrom = undefined
-				state.maxYTo = undefined
-			}
-		}
-		if (minYGlobalTo !== undefined) {
-			state.minYGlobal = minYGlobalFrom + (minYGlobalTo - minYGlobalFrom) * ratio
-			state.maxYGlobal = maxYGlobalFrom + (maxYGlobalTo - maxYGlobalFrom) * ratio
-			if (ratio === 1) {
-				state.minYGlobalFrom = undefined
-				state.minYGlobalTo = undefined
-				state.maxYGlobalFrom = undefined
-				state.maxYGlobalTo = undefined
-			}
-		}
-		if (graphOpacityTo !== undefined) {
-			state.graphOpacity = graphOpacityTo.map((_, i) => graphOpacityFrom[i] + (graphOpacityTo[i] - graphOpacityFrom[i]) * ratio)
-			if (ratio === 1) {
-				state.graphOpacityFrom = undefined
-				state.graphOpacityTo = undefined
-			}
-		}
-		this.setState(state, transitionUpdatesTimeline)
-		if (ratio < 1) {
-			this.transition = requestAnimationFrame(this.transitionStateTick)
-		} else {
-			this.transition = undefined
-		}
-	}
-
-	renderGridLine(y) {
-		const { minX, maxX, minY, maxY } = this.state
-		const line = document.createElementNS(SVG_XMLNS, 'line')
-		line.classList.add('chartogram__grid-line')
-		line.setAttribute('x1', this.fixSvgCoordinate(this.mapX(minX)))
-		line.setAttribute('x2', this.fixSvgCoordinate(this.mapX(maxX)))
-		line.setAttribute('y1', this.fixSvgCoordinate(this.mapY(maxY - y)))
-		line.setAttribute('y2', this.fixSvgCoordinate(this.mapY(maxY - y)))
-		return line
-	}
-
-	mountGauges() {
-		const { gaugeTickMarksCount } = this.props
-		let i = 0
-		while (i < gaugeTickMarksCount) {
-			this.xAxis.appendChild(document.createElement('div'))
-			this.yAxis.appendChild(document.createElement('div'))
-			i++
-		}
-	}
-
-	updateGauges(minX, maxX, minY, maxY, yAxisScale) {
-		const { months, gaugeTickMarksCount } = this.props
-		this.updateGauge(this.xAxis, minX, maxX, gaugeTickMarksCount, (timestamp) => {
-			const date = new Date(timestamp)
-			return `${months[date.getMonth()]} ${date.getDate()}`
-		})
-		this.updateGauge(this.yAxis, minY, maxY, gaugeTickMarksCount)
-		this.yAxis.style.height = `${100 / yAxisScale}%`
-	}
-
-	updateGauge(gauge, min, max, tickMarksCount, transform) {
-		let i = 0
-		while (i < tickMarksCount) {
-			const tickMark = gauge.childNodes[i]
-			let value = min + i * (max - min) / (tickMarksCount - 1)
-			if (transform) {
-				value = transform(value)
-			}
-			tickMark.textContent = value
-			i++
-		}
-	}
 }
@@ -625,42 +352,2 @@
 	'Sat'
-]
-
-const INITIAL_MARKUP = `
-	<header class="chartogram__header">
-		<h1 class="chartogram__title">{title}</h1>
-	</header>
-	<div class="chartogram__plan-with-axes">
-		<div class="chartogram__plan">
-			<div class="chartogram__top-border"></div>
-			<div class="chartogram__canvas-wrapper">
-				<svg class="chartogram__canvas"></svg>
-				<div class="chartogram__x"></div>
-				<div class="chartogram__y-wrapper">
-					<div class="chartogram__y"></div>
-				</div>
-			</div>
-		</div>
-	</div>
-`
-
-// https://gist.github.com/gre/1650294
-const EASING = {
-	linear(t) {
-		return t
-	},
-	easeInOutSin(t) {
-		return (1 + Math.sin(Math.PI * t - Math.PI / 2)) / 2
-	},
-	easeInOutQuad(t) {
-		return t<.5 ? 2*t*t : -1+(4-2*t)*t
-	},
-  easeInOutCubic(t) {
-  	return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1
-  },
-  easeOutCubic(t) {
-  	return (--t)*t*t+1
-  },
-  easeOutQuad(t) {
-  	return t*(2-t)
-  }
-}
+]

source/Timeline.js

@@ -17,16 +17,11 @@ import {
 
-	componentDidUpdate(props) {
-		if (this.props !== props) {
-			this.props = props
-			this.state = {
-				aspectRatio: this.getCanvasAspectRatio()
-			}
-			this.onChangeBounds(this.props.fromRatio, this.props.toRatio),
-			this.render()
+	componentDidUpdate() {
+		this.state = {
+			aspectRatio: this.getCanvasAspectRatio()
 		}
+		this.onChangeBounds(this.props.fromRatio, this.props.toRatio),
+		this.render()
 	}
 
-	componentDidMount() {
-		const { rootNode } = this.props
-
+	componentDidMount(rootNode) {
 		this.timeline = rootNode.querySelector('.chartogram__timeline')
@@ -33,0 +28,0 @@ this.timelineOverlayLeft = rootNode.querySelector('.chartogram__timeline-overlay-left')

source/Togglers.js

@@ -10,13 +10,15 @@ import {
 
-	componentDidMount() {
-		const { rootNode, data } = this.props
-		// Add graph togglers.
-		const graphTogglers = rootNode.querySelector('.chartogram__chart-togglers')
-		clearElement(graphTogglers)
+	componentDidMount(rootNode) {
+		this.togglers = rootNode.querySelector('.chartogram__chart-togglers')
+		this.mount()
+	}
+
+	mount() {
+		const { data } = this.props
 		for (const y of data.y) {
-			graphTogglers.appendChild(this.createGraphToggler(y))
+			this.togglers.appendChild(this.renderToggler(y))
 		}
 	}
 
-	createGraphToggler = ({ id, name, color }) => {
+	renderToggler = ({ id, name, color }) => {
 		const toggler = document.createElement('button')
@@ -23,0 +25,0 @@ toggler.setAttribute('type', 'button')

source/Tooltip.js

@@ -19,6 +19,4 @@ import { setUpTouchMove } from './utility'
 
-	componentDidUpdate(props) {
-		if (this.props !== props) {
-			this.props = props
-		}
+	componentDidUpdate() {
+		// Ignored.
 	}
@@ -25,0 +23,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

1210918

increased by4.84%

Number of package files

53

increased by23.26%

Lines of code

5537

increased by10.63%

No dependency changes