chartogram - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

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,n,i,a){for(var o=0;o<i;){var r=document.createElement("div"),s=e+o*(n-e)/(i-1);a&&(s=a(s)),r.appendChild(document.createTextNode(s)),t.appendChild(r),o++}}function i(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 a(t,e,n){function i(t){n(t.changedTouches[0].clientX,t.changedTouches[0].clientY)}function a(t){n(t.clientX,t.clientY)}function 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 o(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 r(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function 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 l=function(){function n(t){var e=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,n),s(this,"onResize",function(t){e.setState({aspectRatio:e.getCanvasAspectRatio()})}),s(this,"onResizeThrottled",i(this.onResize,33)),s(this,"setState",function(t){e.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){s(t,e,n[e])})}return t}({},e.state,t),e.render()}),s(this,"mapX",function(t){var n=e.props,i=n.canvasWidth,a=n.data,o=a.minX;return(t-o)/(a.maxX-o)*i}),s(this,"mapY",function(t){var n=e.props,i=n.canvasWidth,a=n.minYGlobal;return(t-a)/(n.maxYGlobal-a)*i/e.state.aspectRatio}),s(this,"setUpTimelineWindowHandle",function(t){var n,i,o,r,s="left"===t?e.timelineWindowLeftHandle:e.timelineWindowRightHandle,l=parseFloat(getComputedStyle(e.timelineWindow).borderLeftWidth);return a(s,function(a){n=e.timeline.getBoundingClientRect();var s=e.timelineWindow.getBoundingClientRect();"left"===t?(i=n.left,o=s.left+s.width-2*l,r=a-s.left):(i=s.left+2*l,o=n.left+n.width,r=a-(s.left+s.width))},function(a){a-=r;var s=((a=Math.max(Math.min(a,o),i))-n.left)/n.width;"left"===t?e.updateBounds(s,e.props.toRatio):e.updateBounds(e.props.fromRatio,s)})}),s(this,"setUpTimelineWindow",function(){var t,n,i,o,r;return a(e.timelineWindowDrag,function(a){t=e.timeline.getBoundingClientRect(),n=e.timelineWindow.getBoundingClientRect(),r=a-n.left,i=t.left,o=t.left+(t.width-n.width)},function(a){a-=r;var s=((a=Math.max(Math.min(a,o),i))-t.left)/t.width;e.updateBounds(s,s+n.width/t.width)})}),s(this,"setTimelineWindowLeft",function(t){e.timelineOverlayLeft.style.right="".concat(100*(1-t),"%"),e.timelineWindow.style.left="".concat(100*t,"%")}),s(this,"setTimelineWindowRight",function(t){e.timelineOverlayRight.style.left="".concat(100*t,"%"),e.timelineWindow.style.right="".concat(100*(1-t),"%")}),this.props=t}var l,c,h;return l=n,(c=[{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.setUpTimelineWindowHandle("left"),this.setUpTimelineWindowHandle("right"),this.setUpTimelineWindow(),window.addEventListener("resize",this.onResizeThrottled),this.onChangeBounds(this.props.fromRatio,this.props.toRatio),this.render()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.onResizeThrottled)}},{key:"getCanvasAspectRatio",value:function(){var t=this.timelineCanvas.getBoundingClientRect();return t.width/t.height}},{key:"render",value:function(){var n=this,i=this.props,a=i.canvasWidth,r=i.y,s=i.data,l=i.maxYGlobal,c=i.fixSvgCoordinate,h=i.createPolylinePoints,u=this.state.aspectRatio;e(this.timelineCanvas),this.timelineCanvas.setAttribute("viewBox","0 0 ".concat(a," ").concat(c(a/u)));var d=function(){if(m){if(v>=p.length)return"break";f=p[v++]}else{if((v=p.next()).done)return"break";f=v.value}var e=f,i=e.id,a=e.color,c=e.points;if(r.find(function(t){return t.id===i}).isShown){var u=o(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,l=arguments.length>6&&void 0!==arguments[6]?arguments[6]:new Array(n.length),c=arguments.length>7&&void 0!==arguments[7]?arguments[7]:new Array(n.length),h=arguments.length>8&&void 0!==arguments[8]?arguments[8]:0;if(s+2>n.length-1){for(;s<i.length;)l[h]=n[s],c[h]=i[s],h++,s++;return l=l.slice(0,h),c=c.slice(0,h),l.length<=a?[l,c]:(n.length/l.length<1.1&&(r=Math.min(r+.025,1)),e(l,c,a,o,r))}var u=(i[s+2]+i[s])/2;return Math.abs(u-i[s+1])/o<r?(l[h]=n[s],l[h+1]=n[s+2],c[h]=i[s],c[h+1]=i[s+2],e(n,i,a,o,r,s+2,l,c,h+1)):(l[h]=n[s],l[h+1]=n[s+1],l[h+2]=n[s+2],c[h]=i[s],c[h+1]=i[s+1],c[h+2]=i[s+2],e(n,i,a,o,r,s+2,l,c,h+2))}(s.x.points,c,80),2),d=u[0],g=u[1],y=document.createElement("polyline");y.setAttribute("stroke",a),y.setAttribute("points",h(d.map(n.mapX),g.map(function(t){return n.mapY(l-t)})).join(" ")),y.classList.add("chartogram__graph"),n.timelineCanvas.appendChild(y)}},p=s.y,m=Array.isArray(p),v=0;for(p=m?p:p[Symbol.iterator]();;){var f;if("break"===d())break}this.timelineCanvas.innerHTML+=""}},{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)}}])&&r(l.prototype,c),h&&r(l,h),n}();function c(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 h(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}l.INITIAL_MARKUP='\n\t<div class="chartogram__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 u=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),h(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 l=document.createElementNS(r,"circle");l.setAttribute("cx","9.5"),l.setAttribute("cy","9.5"),l.setAttribute("r","9.5"),l.setAttribute("fill",a),s.appendChild(l);var c=document.createElementNS(r,"circle");c.setAttribute("cx","9.5"),c.setAttribute("cy","9.5"),c.setAttribute("r","8"),c.setAttribute("class","chartogram__chart-toggler-check-circle"),s.appendChild(c);var h=document.createElementNS(r,"path");return h.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"),h.setAttribute("fill","white"),h.setAttribute("class","chartogram__chart-toggler-check-mark"),s.appendChild(h),o.appendChild(s),o.appendChild(document.createTextNode(i)),o.addEventListener("click",function(){return n.onToggle(e,o)}),o}),h(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 l;if(r){if(s>=o.length)break;l=o[s++]}else{if((s=o.next()).done)break;l=s.value}var c=l;a.appendChild(this.createGraphToggler(c))}}}])&&c(n.prototype,i),a&&c(n,a),t}();function d(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}u.INITIAL_MARKUP='\n\t<div class="chartogram__chart-togglers"></div>\n';var m=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),p(this,"setUpListener",function(){var t,e,i=n.props,a=i.canvas,o=i.canvasWidthPx,r=i.weekdays,s=i.months,l=function(i){var a,l=n.props,c=l.minX,h=l.maxX,u=l.xPoints,d=l.y,p=c+(i-t.left)/t.width*(h-c),m=u.findIndex(function(t){return t>=p}),v=m-1;if(e(m)||(m=-1),e(v)||(v=-1),m<0){if(v<0)return n.unmount();a=v}else if(v<0)a=m;else{var f=u[v],g=u[m];a=p-f>g-p?m:v}var y=u[a];if(y!==n.tooltipForX){n.tooltipForX=y,n.tooltip||n.mount();var b=new Date(y);n.tooltipDate.textContent="".concat(r[b.getDay()],", ").concat(s[b.getMonth()]," ").concat(b.getDate());var w=0,x=d,_=Array.isArray(x),S=0;for(x=_?x:x[Symbol.iterator]();;){var A;if(_){if(S>=x.length)break;A=x[S++]}else{if((S=x.next()).done)break;A=S.value}var C=A,k=C.isShown,L=C.points,T=C.name;k&&(n.tooltipValues.childNodes[2*w].textContent=L[a],n.tooltipValues.childNodes[2*w+1].textContent=T,w++)}var E=(y-c)/(h-c),R=E*o;R-=40;var Y=n.tooltip.getBoundingClientRect().width;R<0?R=0:R+Y>o&&(R=o-Y),n.tooltip.style.left=R+"px",n.updatePoints(a,E),n.updateLine(y)}},c=function(){t=a.getBoundingClientRect(),e=function(t){var e=n.props.xPoints;return t>=0&&t<e.length}},h=function(t){if(t.touches.length>1)return p();c(),a.addEventListener("touchend",p),a.addEventListener("touchmove",u),a.addEventListener("touchend",p),a.addEventListener("touchcancel",p),u(t)};function u(e){var n=e.changedTouches[0].clientX,i=e.changedTouches[0].clientY;n<t.left||n>t.left+t.width||i<t.top||i>t.top+t.height?p():l(n,i)}function d(t){l(t.clientX,t.clientY)}a.addEventListener("touchstart",h);var p=function t(){a.removeEventListener("pointermove",d),a.removeEventListener("pointerleave",t),a.removeEventListener("pointercancel",t),a.removeEventListener("touchmove",u),a.removeEventListener("touchend",t),a.removeEventListener("touchcancel",t),n.unmount()},m=function(){c(),a.addEventListener("pointermove",d),a.addEventListener("pointerleave",p),a.addEventListener("pointercancel",p)};return a.addEventListener("pointerenter",m),function(){p(),a.removeEventListener(m),a.removeEventListener(h)}}),p(this,"unmountLine",function(){n.props.canvas.removeChild(n.line),n.line=void 0}),p(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}),p(this,"updateLine",function(t){var e=n.props,i=e.canvasWidth,a=e.aspectRatio,o=e.fixSvgCoordinate,r=e.mapX;n.line||n.renderLine(),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))}),p(this,"updatePoints",function(t,e){var i=n.props,a=i.maxY,o=i.y;n.points||n.renderPoints();for(var r=0,s=0;r<o.length;){if(o[r].isShown){var l=n.points[s],c=o[r].points[t]/a;l.style.left="".concat(100*e,"%"),l.style.bottom="".concat(100*c,"%"),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,e=t.y,n=t.container;this.tooltip=document.createElement("div"),this.tooltip.classList.add("chartogram__tooltip"),n.appendChild(this.tooltip),this.tooltipDate=document.createElement("h1"),this.tooltipDate.classList.add("chartogram__tooltip-header"),this.tooltip.appendChild(this.tooltipDate),this.tooltipValues=document.createElement("dl"),this.tooltipValues.classList.add("chartogram__tooltip-values"),this.tooltip.appendChild(this.tooltipValues);var i=e,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,l=s.isShown,c=s.color;if(l){var h=document.createElement("dt");h.style.color=c,this.tooltipValues.appendChild(h);var u=document.createElement("dd");u.style.color=c,this.tooltipValues.appendChild(u)}}}},{key:"renderLine",value:function(){var t=this.props.canvas;this.line=document.createElementNS("http://www.w3.org/2000/svg","line"),this.line.setAttributeNS(null,"class","chartogram__tooltip-line"),t.insertBefore(this.line,t.querySelector("polyline"))}},{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.unmountLine()}}},{key:"renderPoints",value:function(){this.points=[];var t=this.props,e=t.pointsContainer,n=t.y,i=Array.isArray(n),a=0;for(n=i?n:n[Symbol.iterator]();;){var o;if(i){if(a>=n.length)break;o=n[a++]}else{if((a=n.next()).done)break;o=a.value}var r=o;if(r.isShown){var s=document.createElement("div");s.classList.add("chartogram__tooltip-point"),s.style.color=r.color,this.points.push(s),e.appendChild(s)}}}}])&&d(e.prototype,n),i&&d(e,i),t}();function v(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 f(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){y(t,e,n[e])})}return t}function g(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 y(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var b=function(){function t(a,o){var r=this,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"Title",l=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),y(this,"onResize",function(t){r.setState({aspectRatio:r.getCanvasAspectRatio(),canvasWidthPx:r.getCanvasWidthPx()},!1)}),y(this,"onResizeThrottled",i(this.onResize,33)),y(this,"onToggle",function(t){var e=r.state.y.find(function(e){return e.id===t});if(e.isShown&&1===r.state.y.filter(function(t){return t.isShown}).length)return;e.isShown=!e.isShown,r.setState({y:r.state.y});var n=r.calculateMinMaxY(r.state.y),i=n.minY,a=n.maxY,o=n.minYGlobal,s=n.maxYGlobal;return r.transitionState(i,a,o,s),!0}),y(this,"onChangeBounds",function(t,e){r.setState(r.createState(t,e),!1)}),y(this,"createPolylinePoints",function(t,e){return n=t.map(r.fixSvgCoordinate),i=e.map(r.fixSvgCoordinate),n.map(function(t,e){return"".concat(t,",").concat(i[e])});var n,i}),y(this,"fixSvgCoordinate",function(t){var e=r.props.precisionFactor;return Math.round(t*e)/e}),y(this,"mapX",function(t){var e=r.props.canvasWidth,n=r.state,i=n.minX;return(t-i)/(n.maxX-i)*e}),y(this,"mapY",function(t){var e=r.props.canvasWidth,n=r.state,i=n.minY;return(t-i)/(n.maxY-i)*e/n.aspectRatio}),y(this,"transitionStateTick",function(){var t=r.props,e=t.transitionDuration,n=t.transitionEasing,i=r.state,a=i.transitionStartedAt,o=i.minYFrom,s=i.minYTo,l=i.maxYFrom,c=i.maxYTo,h=i.minYGlobalFrom,u=i.minYGlobalTo,d=i.maxYGlobalFrom,p=i.maxYGlobalTo,m=Date.now()-a,v=S[n](Math.min(m/e,1));r.setState({minY:o+(s-o)*v,maxY:l+(c-l)*v,minYGlobal:h+(u-h)*v,maxYGlobal:d+(p-d)*v}),r.transition=v<1?requestAnimationFrame(r.transitionStateTick):void 0}),y(this,"createGridLine",function(t){var e=r.state,n=e.minX,i=e.maxX,a=(e.minY,e.maxY),o=document.createElement("line");return o.classList.add("chartogram__grid-line"),o.setAttribute("x1",r.fixSvgCoordinate(r.mapX(n))),o.setAttribute("x2",r.fixSvgCoordinate(r.mapX(i))),o.setAttribute("y1",r.fixSvgCoordinate(r.mapY(a-t))),o.setAttribute("y2",r.fixSvgCoordinate(r.mapY(a-t))),o}),y(this,"drawGauges",function(t,i,a,o,s){var l=r.props,c=l.gaugeTickMarksCount,h=l.months;e(r.xAxis),e(r.yAxis),n(r.xAxis,t,i,c,function(t){var e=new Date(t);return"".concat(h[e.getMonth()]," ").concat(e.getDate())}),n(r.yAxis,a,o,c),r.yAxis.style.height="".concat(100/s,"%")}),this.props=f({title:s,transitionDuration:300,transitionEasing:"easeInOutSin",gaugeTickMarksCount:6,timelineWindowSize:40,canvasWidth:512,precisionFactor:Math.pow(10,l.precision||3),months:w,weekdays:x},l),this.rootNode=a,this.data=f({},o,{minX:Math.min.apply(Math,v(o.x.points)),maxX:Math.max.apply(Math,v(o.x.points)),y:o.y.map(function(t){return f({},t,{min:Math.min.apply(Math,v(t.points)),max:Math.max.apply(Math,v(t.points))})})})}var a,o,r;return a=t,(o=[{key:"componentDidMount",value:function(){this.rootNode.classList.add("chartogram"),this.rootNode.innerHTML="\n\t\t\t".concat(_.replace("{title}",this.props.title),"\n\t\t\t").concat(l.INITIAL_MARKUP,"\n\t\t\t").concat(u.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.timeline=new l(this.getTimelineProps()),this.timeline.componentDidMount(),this.togglers=new u(this.getTogglersProps()),this.togglers.componentDidMount(),this.tooltip=new m(this.getTooltipProps()),this.tooltip.componentDidMount(),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)}},{key:"getCanvasAspectRatio",value:function(){var t=this.canvas.getBoundingClientRect();return t.width/t.height}},{key:"getCanvasWidthPx",value:function(){return this.canvas.getBoundingClientRect().width}},{key:"setState",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.state=f({},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,minYGlobal:this.state.minYGlobal,maxYGlobal:this.state.maxYGlobal,y:this.state.y,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,canvasWidthPx:this.state.canvasWidthPx,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 f({},this.createState(o,1),{aspectRatio:this.getCanvasAspectRatio(),canvasWidthPx:this.getCanvasWidthPx()})}},{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 l=o.points.slice(n,i+1),c=l.slice();l.length>=2&&(o.points[n]!==r&&(c[0]=r),o.points[i]!==s&&(c[c.length-1]=s));var h=this.data.y.map(function(t,e){var c=a.data.y[e].points.slice(n,i+1),h=c.slice();if(l.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]));h[0]=d}if(o.points[i]!==s){var p=a.data.y[e].points[i],m=a.data.y[e].points[i-1],g=m+(p-m)*((s-a.data.x.points[i-1])/(a.data.x.points[i]-a.data.x.points[i-1]));h[h.length-1]=g}}return f({},a.data.y[e],a.state?a.state.y[e]:{isShown:!0},{points:c,graphPoints:h,min:0,max:Math.max.apply(Math,v(h))})});return f({minX:r,maxX:s,fromIndex:n,toIndex:i,fromRatio:t,toRatio:e,xPoints:l,xGraphPoints:c},this.calculateMinMaxY(h),{y:h})}},{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 l=1/0,c=-1/0,h=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&&(l=Math.min(l,e.min),c=Math.max(c,e.max))},u=this.data.y,d=Array.isArray(u),p=0;for(u=d?u:u[Symbol.iterator]();;){var m;if("break"===h())break}return{minY:e,maxY:n,minYGlobal:l=0,maxYGlobal:c}}},{key:"render",value:function(){var t=this,n=this.props,i=n.canvasWidth,a=n.gaugeTickMarksCount,o=this.state,r=o.minX,s=o.maxX,l=o.minY,c=o.maxY,h=o.xGraphPoints,u=o.aspectRatio;e(this.canvas),this.canvas.setAttribute("viewBox","0 0 ".concat(i," ").concat(this.fixSvgCoordinate(i/u)));var d=l,p=function(t,e){for(t=Math.floor(t);;){if(t<e)return e;if(t%e==0)return t;t--}}(c,10),m=(c-l)/(p-d),v=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}(d,p,a),f=Array.isArray(v),g=0;for(v=f?v:v[Symbol.iterator]();;){var y;if(f){if(g>=v.length)break;y=v[g++]}else{if((g=v.next()).done)break;y=g.value}var b=y;this.canvas.appendChild(this.createGridLine(b))}var w=this.state.y,x=Array.isArray(w),_=0;for(w=x?w:w[Symbol.iterator]();;){var S;if(x){if(_>=w.length)break;S=w[_++]}else{if((_=w.next()).done)break;S=_.value}var A=S,C=A.color,k=A.graphPoints;if(A.isShown){var L=document.createElement("polyline");L.setAttribute("stroke",C),L.setAttribute("points",this.createPolylinePoints(h.map(this.mapX),k.map(function(e){return t.mapY(c-e)})).join(" ")),L.classList.add("chartogram__graph"),this.canvas.appendChild(L)}}this.canvas.innerHTML+="",this.drawGauges(r,s,d,p,m)}},{key:"transitionState",value:function(t,e,n,i){this.transition&&cancelAnimationFrame(this.transition),this.setState({minYFrom:this.state.minY,maxYFrom:this.state.maxY,minYTo:t,maxYTo:e,minYGlobalFrom:this.state.minYGlobal,maxYGlobalFrom:this.state.maxYGlobal,minYGlobalTo:n,maxYGlobalTo:i,transitionStartedAt:Date.now()}),this.transition=requestAnimationFrame(this.transitionStateTick)}}])&&g(a.prototype,o),r&&g(a,r),t}(),w=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],x=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],_='\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',S={easeInOutSin:function(t){return(1+Math.sin(Math.PI*t-Math.PI/2))/2}};return function(t,e,n,i){var a=new b(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,n,i,a){for(var o=0;o<i;){var r=document.createElement("div"),s=e+o*(n-e)/(i-1);a&&(s=a(s)),r.appendChild(document.createTextNode(s)),t.appendChild(r),o++}}function i(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 a(t,e,n){function i(t){n(t.changedTouches[0].clientX,t.changedTouches[0].clientY)}function a(t){n(t.clientX,t.clientY)}function 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 o(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 r(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function 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 l=function(){function n(t){var e=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,n),s(this,"onResize",function(t){e.setState({aspectRatio:e.getCanvasAspectRatio()})}),s(this,"onResizeThrottled",i(this.onResize,33)),s(this,"setState",function(t){e.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){s(t,e,n[e])})}return t}({},e.state,t),e.render()}),s(this,"mapX",function(t){var n=e.props,i=n.canvasWidth,a=n.data,o=a.minX;return(t-o)/(a.maxX-o)*i}),s(this,"mapY",function(t){var n=e.props,i=n.canvasWidth,a=n.minYGlobal;return(t-a)/(n.maxYGlobal-a)*i/e.state.aspectRatio}),s(this,"setUpTimelineWindowHandle",function(t){var n,i,o,r,s="left"===t?e.timelineWindowLeftHandle:e.timelineWindowRightHandle,l=parseFloat(getComputedStyle(e.timelineWindow).borderLeftWidth);return a(s,function(a){n=e.timeline.getBoundingClientRect();var s=e.timelineWindow.getBoundingClientRect();"left"===t?(i=n.left,o=s.left+s.width-2*l,r=a-s.left):(i=s.left+2*l,o=n.left+n.width,r=a-(s.left+s.width))},function(a){a-=r;var s=((a=Math.max(Math.min(a,o),i))-n.left)/n.width;"left"===t?e.updateBounds(s,e.props.toRatio):e.updateBounds(e.props.fromRatio,s)})}),s(this,"setUpTimelineWindow",function(){var t,n,i,o,r;return a(e.timelineWindowDrag,function(a){t=e.timeline.getBoundingClientRect(),n=e.timelineWindow.getBoundingClientRect(),r=a-n.left,i=t.left,o=t.left+(t.width-n.width)},function(a){a-=r;var s=((a=Math.max(Math.min(a,o),i))-t.left)/t.width;e.updateBounds(s,s+n.width/t.width)})}),s(this,"setTimelineWindowLeft",function(t){e.timelineOverlayLeft.style.right="".concat(100*(1-t),"%"),e.timelineWindow.style.left="".concat(100*t,"%")}),s(this,"setTimelineWindowRight",function(t){e.timelineOverlayRight.style.left="".concat(100*t,"%"),e.timelineWindow.style.right="".concat(100*(1-t),"%")}),this.props=t}var l,c,h;return l=n,(c=[{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.setUpTimelineWindowHandle("left"),this.setUpTimelineWindowHandle("right"),this.setUpTimelineWindow(),window.addEventListener("resize",this.onResizeThrottled),this.onChangeBounds(this.props.fromRatio,this.props.toRatio),this.render()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.onResizeThrottled)}},{key:"getCanvasAspectRatio",value:function(){var t=this.timelineCanvas.getBoundingClientRect();return t.width/t.height}},{key:"render",value:function(){var n=this,i=this.props,a=i.canvasWidth,r=i.y,s=i.data,l=i.maxYGlobal,c=i.fixSvgCoordinate,h=i.createPolylinePoints,u=i.graphOpacity,d=this.state.aspectRatio;e(this.timelineCanvas),this.timelineCanvas.setAttribute("viewBox","0 0 ".concat(a," ").concat(c(a/d)));for(var p=0,m=function(){var e=s.y[p],i=e.id,a=e.color,c=e.points,d=u[p];if(r.find(function(t){return t.id===i}).isShown||d>0){var m=o(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,l=arguments.length>6&&void 0!==arguments[6]?arguments[6]:new Array(n.length),c=arguments.length>7&&void 0!==arguments[7]?arguments[7]:new Array(n.length),h=arguments.length>8&&void 0!==arguments[8]?arguments[8]:0;if(s+2>n.length-1){for(;s<i.length;)l[h]=n[s],c[h]=i[s],h++,s++;return l=l.slice(0,h),c=c.slice(0,h),l.length<=a?[l,c]:(n.length/l.length<1.1&&(r=Math.min(r+.025,1)),e(l,c,a,o,r))}var u=(i[s+2]+i[s])/2;return Math.abs(u-i[s+1])/o<r?(l[h]=n[s],l[h+1]=n[s+2],c[h]=i[s],c[h+1]=i[s+2],e(n,i,a,o,r,s+2,l,c,h+1)):(l[h]=n[s],l[h+1]=n[s+1],l[h+2]=n[s+2],c[h]=i[s],c[h+1]=i[s+1],c[h+2]=i[s+2],e(n,i,a,o,r,s+2,l,c,h+2))}(s.x.points,c,80),2),v=m[0],f=m[1],g=document.createElement("polyline");g.setAttribute("stroke",a),g.setAttribute("points",h(v.map(n.mapX),f.map(function(t){return n.mapY(l-t)})).join(" ")),g.classList.add("chartogram__graph"),1!==d&&(g.style.opacity=d),n.timelineCanvas.appendChild(g)}p++};p<s.y.length;)m();this.timelineCanvas.innerHTML+=""}},{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)}}])&&r(l.prototype,c),h&&r(l,h),n}();function c(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 h(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}l.INITIAL_MARKUP='\n\t<div class="chartogram__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 u=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),h(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 l=document.createElementNS(r,"circle");l.setAttribute("cx","9.5"),l.setAttribute("cy","9.5"),l.setAttribute("r","9.5"),l.setAttribute("fill",a),s.appendChild(l);var c=document.createElementNS(r,"circle");c.setAttribute("cx","9.5"),c.setAttribute("cy","9.5"),c.setAttribute("r","8"),c.setAttribute("class","chartogram__chart-toggler-check-circle"),s.appendChild(c);var h=document.createElementNS(r,"path");return h.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"),h.setAttribute("fill","white"),h.setAttribute("class","chartogram__chart-toggler-check-mark"),s.appendChild(h),o.appendChild(s),o.appendChild(document.createTextNode(i)),o.addEventListener("click",function(){return n.onToggle(e,o)}),o}),h(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 l;if(r){if(s>=o.length)break;l=o[s++]}else{if((s=o.next()).done)break;l=s.value}var c=l;a.appendChild(this.createGraphToggler(c))}}}])&&c(n.prototype,i),a&&c(n,a),t}();function d(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}u.INITIAL_MARKUP='\n\t<div class="chartogram__chart-togglers"></div>\n';var m=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),p(this,"setUpListener",function(){var t,e,i=n.props,a=i.canvas,o=i.canvasWidthPx,r=i.weekdays,s=i.months,l=function(i){var a,l=n.props,c=l.minX,h=l.maxX,u=l.xPoints,d=l.y,p=c+(i-t.left)/t.width*(h-c),m=u.findIndex(function(t){return t>=p}),v=m-1;if(e(m)||(m=-1),e(v)||(v=-1),m<0){if(v<0)return n.unmount();a=v}else if(v<0)a=m;else{var f=u[v],g=u[m];a=p-f>g-p?m:v}var y=u[a];if(y!==n.tooltipForX){n.tooltipForX=y,n.tooltip||n.mount();var w=new Date(y);n.tooltipDate.textContent="".concat(r[w.getDay()],", ").concat(s[w.getMonth()]," ").concat(w.getDate());var b=0,x=d,_=Array.isArray(x),S=0;for(x=_?x:x[Symbol.iterator]();;){var A;if(_){if(S>=x.length)break;A=x[S++]}else{if((S=x.next()).done)break;A=S.value}var C=A,L=C.isShown,T=C.points,k=C.name;L&&(n.tooltipValues.childNodes[2*b].textContent=T[a],n.tooltipValues.childNodes[2*b+1].textContent=k,b++)}var R=(y-c)/(h-c),Y=R*o;Y-=40;var E=n.tooltip.getBoundingClientRect().width;Y<-5?Y=-5:Y+E>o+5&&(Y=o+5-E),n.tooltip.style.left=Y+"px",n.updatePoints(a,R),n.updateLine(y)}},c=function(){t=a.getBoundingClientRect(),e=function(t){var e=n.props.xPoints;return t>=0&&t<e.length}},h=function(t){if(t.touches.length>1)return p();c(),a.addEventListener("touchend",p),a.addEventListener("touchmove",u),a.addEventListener("touchend",p),a.addEventListener("touchcancel",p),u(t)};function u(e){var n=e.changedTouches[0].clientX,i=e.changedTouches[0].clientY;n<t.left||n>t.left+t.width||i<t.top||i>t.top+t.height?p():l(n,i)}function d(t){l(t.clientX,t.clientY)}a.addEventListener("touchstart",h);var p=function t(){a.removeEventListener("pointermove",d),a.removeEventListener("pointerleave",t),a.removeEventListener("pointercancel",t),a.removeEventListener("touchmove",u),a.removeEventListener("touchend",t),a.removeEventListener("touchcancel",t),n.unmount()},m=function(){c(),a.addEventListener("pointermove",d),a.addEventListener("pointerleave",p),a.addEventListener("pointercancel",p)};return a.addEventListener("pointerenter",m),function(){p(),a.removeEventListener(m),a.removeEventListener(h)}}),p(this,"unmountLine",function(){n.props.canvas.removeChild(n.line),n.line=void 0}),p(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}),p(this,"updateLine",function(t){n.isLineRendered()||n.renderLine();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))}),p(this,"updatePoints",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 l=n.points[s],c=o[r].points[t]/a;l.style.left="".concat(100*e,"%"),l.style.bottom="".concat(100*c,"%"),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(){this.renderTooltip(),this.renderPoints(),this.isLineRendered()||this.renderLine()}},{key:"renderTooltip",value:function(){var t=this.props,e=t.y,n=t.container;this.tooltip=document.createElement("div"),this.tooltip.classList.add("chartogram__tooltip"),n.appendChild(this.tooltip),this.tooltipDate=document.createElement("h1"),this.tooltipDate.classList.add("chartogram__tooltip-header"),this.tooltip.appendChild(this.tooltipDate),this.tooltipValues=document.createElement("dl"),this.tooltipValues.classList.add("chartogram__tooltip-values"),this.tooltip.appendChild(this.tooltipValues);var i=e,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,l=s.isShown,c=s.color;if(l){var h=document.createElement("dt");h.style.color=c,this.tooltipValues.appendChild(h);var u=document.createElement("dd");u.style.color=c,this.tooltipValues.appendChild(u)}}}},{key:"renderLine",value:function(){var t=this.props.canvas;this.line=document.createElementNS("http://www.w3.org/2000/svg","line"),this.line.setAttribute("class","chartogram__tooltip-line"),t.insertBefore(this.line,t.querySelector("polyline"))}},{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:"isLineRendered",value:function(){var t=this.props.canvas;return this.line&&this.line.parentNode===t}},{key:"renderPoints",value:function(){this.points=[];var t=this.props,e=t.pointsContainer,n=t.y,i=Array.isArray(n),a=0;for(n=i?n:n[Symbol.iterator]();;){var o;if(i){if(a>=n.length)break;o=n[a++]}else{if((a=n.next()).done)break;o=a.value}var r=o;if(r.isShown){var s=document.createElement("div");s.classList.add("chartogram__tooltip-point"),s.style.color=r.color,this.points.push(s),e.appendChild(s)}}}}])&&d(e.prototype,n),i&&d(e,i),t}();function v(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 f(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){y(t,e,n[e])})}return t}function g(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 y(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var w=function(){function t(a,o){var r=this,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"Title",l=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),y(this,"onResize",function(t){r.setState({aspectRatio:r.getCanvasAspectRatio(),canvasWidthPx:r.getCanvasWidthPx()},!1)}),y(this,"onResizeThrottled",i(this.onResize,33)),y(this,"onToggle",function(t){var e=r.state.y.find(function(e){return e.id===t});if(e.isShown&&1===r.state.y.filter(function(t){return t.isShown}).length)return;e.isShown=!e.isShown,r.setState({y:r.state.y});var n=r.calculateMinMaxY(r.state.y),i=n.minY,a=n.maxY,o=n.minYGlobal,s=n.maxYGlobal;return r.transitionState(i,a,o,s,r.state.y.map(function(t){return t.isShown?1:0})),!0}),y(this,"onChangeBounds",function(t,e){r.setState(r.createState(t,e),!1)}),y(this,"createPolylinePoints",function(t,e){return n=t.map(r.fixSvgCoordinate),i=e.map(r.fixSvgCoordinate),n.map(function(t,e){return"".concat(t,",").concat(i[e])});var n,i}),y(this,"fixSvgCoordinate",function(t){var e=r.props.precisionFactor;return Math.round(t*e)/e}),y(this,"mapX",function(t){var e=r.props.canvasWidth,n=r.state,i=n.minX;return(t-i)/(n.maxX-i)*e}),y(this,"mapY",function(t){var e=r.props.canvasWidth,n=r.state,i=n.minY;return(t-i)/(n.maxY-i)*e/n.aspectRatio}),y(this,"transitionStateTick",function(){var t=r.props.transitionEasing,e=r.state,n=e.transitionStartedAt,i=e.transitionDuration,a=e.graphOpacityFrom,o=e.graphOpacityTo,s=e.minYFrom,l=e.minYTo,c=e.maxYFrom,h=e.maxYTo,u=e.minYGlobalFrom,d=e.minYGlobalTo,p=e.maxYGlobalFrom,m=e.maxYGlobalTo,v=Date.now()-n,f=Math.min(v/i,1);f=S[t](f),r.setState({graphOpacity:o.map(function(t,e){return a[e]+(o[e]-a[e])*f}),minY:s+(l-s)*f,maxY:c+(h-c)*f,minYGlobal:u+(d-u)*f,maxYGlobal:p+(m-p)*f}),r.transition=f<1?requestAnimationFrame(r.transitionStateTick):void 0}),y(this,"createGridLine",function(t){var e=r.state,n=e.minX,i=e.maxX,a=(e.minY,e.maxY),o=document.createElement("line");return o.classList.add("chartogram__grid-line"),o.setAttribute("x1",r.fixSvgCoordinate(r.mapX(n))),o.setAttribute("x2",r.fixSvgCoordinate(r.mapX(i))),o.setAttribute("y1",r.fixSvgCoordinate(r.mapY(a-t))),o.setAttribute("y2",r.fixSvgCoordinate(r.mapY(a-t))),o}),y(this,"drawGauges",function(t,i,a,o,s){var l=r.props,c=l.gaugeTickMarksCount,h=l.months;e(r.xAxis),e(r.yAxis),n(r.xAxis,t,i,c,function(t){var e=new Date(t);return"".concat(h[e.getMonth()]," ").concat(e.getDate())}),n(r.yAxis,a,o,c),r.yAxis.style.height="".concat(100/s,"%")}),this.props=f({title:s,transitionDuration:300,transitionEasing:"easeOutQuad",gaugeTickMarksCount:6,timelineWindowSize:40,canvasWidth:512,precisionFactor:Math.pow(10,l.precision||3),months:b,weekdays:x},l),this.rootNode=a,this.data=f({},o,{minX:Math.min.apply(Math,v(o.x.points)),maxX:Math.max.apply(Math,v(o.x.points)),y:o.y.map(function(t){return f({},t,{min:Math.min.apply(Math,v(t.points)),max:Math.max.apply(Math,v(t.points))})})})}var a,o,r;return a=t,(o=[{key:"componentDidMount",value:function(){this.rootNode.classList.add("chartogram"),this.rootNode.innerHTML="\n\t\t\t".concat(_.replace("{title}",this.props.title),"\n\t\t\t").concat(l.INITIAL_MARKUP,"\n\t\t\t").concat(u.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.timeline=new l(this.getTimelineProps()),this.timeline.componentDidMount(),this.togglers=new u(this.getTogglersProps()),this.togglers.componentDidMount(),this.tooltip=new m(this.getTooltipProps()),this.tooltip.componentDidMount(),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)}},{key:"getCanvasAspectRatio",value:function(){var t=this.canvas.getBoundingClientRect();return t.width/t.height}},{key:"getCanvasWidthPx",value:function(){return this.canvas.getBoundingClientRect().width}},{key:"setState",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.state=f({},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,minYGlobal:this.state.minYGlobal,maxYGlobal: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,canvasWidthPx:this.state.canvasWidthPx,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 f({},this.createState(o,1),{aspectRatio:this.getCanvasAspectRatio(),canvasWidthPx:this.getCanvasWidthPx(),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 l=o.points.slice(n,i+1),c=l.slice();l.length>=2&&(o.points[n]!==r&&(c[0]=r),o.points[i]!==s&&(c[c.length-1]=s));var h=this.data.y.map(function(t,e){var c=a.data.y[e].points.slice(n,i+1),h=c.slice();if(l.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]));h[0]=d}if(o.points[i]!==s){var p=a.data.y[e].points[i],m=a.data.y[e].points[i-1],g=m+(p-m)*((s-a.data.x.points[i-1])/(a.data.x.points[i]-a.data.x.points[i-1]));h[h.length-1]=g}}return f({},a.data.y[e],a.state?a.state.y[e]:{isShown:!0},{points:c,graphPoints:h,min:0,max:Math.max.apply(Math,v(h))})});return f({minX:r,maxX:s,fromIndex:n,toIndex:i,fromRatio:t,toRatio:e,xPoints:l,xGraphPoints:c},this.calculateMinMaxY(h),{y:h})}},{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 l=1/0,c=-1/0,h=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&&(l=Math.min(l,e.min),c=Math.max(c,e.max))},u=this.data.y,d=Array.isArray(u),p=0;for(u=d?u:u[Symbol.iterator]();;){var m;if("break"===h())break}return{minY:e,maxY:n,minYGlobal:l=0,maxYGlobal:c}}},{key:"render",value:function(){var t=this,n=this.props,i=n.canvasWidth,a=n.gaugeTickMarksCount,o=this.state,r=o.minX,s=o.maxX,l=o.minY,c=o.maxY,h=o.xGraphPoints,u=o.aspectRatio,d=o.graphOpacity;e(this.canvas),this.canvas.setAttribute("viewBox","0 0 ".concat(i," ").concat(this.fixSvgCoordinate(i/u)));var p=l,m=function(t,e){for(t=Math.floor(t);;){if(t<e)return e;if(t%e==0)return t;t--}}(c,10),v=(c-l)/(m-p),f=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}(p,m,a),g=Array.isArray(f),y=0;for(f=g?f:f[Symbol.iterator]();;){var w;if(g){if(y>=f.length)break;w=f[y++]}else{if((y=f.next()).done)break;w=y.value}var b=w;this.canvas.appendChild(this.createGridLine(b))}for(var x=0;x<this.state.y.length;){var _=this.state.y[x],S=_.color,A=_.graphPoints,C=_.isShown,L=d[x];if(C||L>0){var T=document.createElement("polyline");T.setAttribute("stroke",S),T.setAttribute("points",this.createPolylinePoints(h.map(this.mapX),A.map(function(e){return t.mapY(c-e)})).join(" ")),T.classList.add("chartogram__graph"),1!==L&&(T.style.opacity=L),this.canvas.appendChild(T)}x++}this.canvas.innerHTML+="",this.drawGauges(r,s,p,m,v)}},{key:"transitionState",value:function(t,e,n,i,a){var o=this.props.transitionDuration;this.transition&&cancelAnimationFrame(this.transition);var r=this.state.maxY-this.state.minY,s=Math.abs(e-this.state.maxY)/r,l=Math.abs(t-this.state.minY)/r,c=Math.max(l,s),h=o*Math.max(.1,2*Math.min(c,.5));this.setState({graphOpacityFrom:this.state.graphOpacity,graphOpacityTo:a,minYFrom:this.state.minY,maxYFrom:this.state.maxY,minYTo:t,maxYTo:e,minYGlobalFrom:this.state.minYGlobal,maxYGlobalFrom:this.state.maxYGlobal,minYGlobalTo:n,maxYGlobalTo:i,transitionStartedAt:Date.now(),transitionDuration:h}),this.transition=requestAnimationFrame(this.transitionStateTick)}}])&&g(a.prototype,o),r&&g(a,r),t}(),b=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],x=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],_='\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',S={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 w(t,e,n,i);return a.componentDidMount(),function(){a.componentWillUnmount()}}});
 //# sourceMappingURL=chartogram.js.map

commonjs/Chartogram.js

@@ -84,3 +84,5 @@ "use strict";
 
-      _this.transitionState(minY, maxY, minYGlobal, maxYGlobal);
+      _this.transitionState(minY, maxY, minYGlobal, maxYGlobal, _this.state.y.map(function (y) {
+        return y.isShown ? 1 : 0;
+      }));
 
@@ -122,7 +124,8 @@ return true;
     _defineProperty(this, "transitionStateTick", function () {
-      var _this$props = _this.props,
-          transitionDuration = _this$props.transitionDuration,
-          transitionEasing = _this$props.transitionEasing;
+      var transitionEasing = _this.props.transitionEasing;
       var _this$state3 = _this.state,
           transitionStartedAt = _this$state3.transitionStartedAt,
+          transitionDuration = _this$state3.transitionDuration,
+          graphOpacityFrom = _this$state3.graphOpacityFrom,
+          graphOpacityTo = _this$state3.graphOpacityTo,
           minYFrom = _this$state3.minYFrom,
@@ -137,5 +140,9 @@ minYTo = _this$state3.minYTo,
       var elapsed = Date.now() - transitionStartedAt;
-      var ratio = EASING[transitionEasing](Math.min(elapsed / transitionDuration, 1));
+      var ratio = Math.min(elapsed / transitionDuration, 1);
+      ratio = EASING[transitionEasing](ratio);
 
       _this.setState({
+        graphOpacity: graphOpacityTo.map(function (_, i) {
+          return graphOpacityFrom[i] + (graphOpacityTo[i] - graphOpacityFrom[i]) * ratio;
+        }),
         minY: minYFrom + (minYTo - minYFrom) * ratio,
@@ -170,5 +177,5 @@ maxY: maxYFrom + (maxYTo - maxYFrom) * ratio,
     _defineProperty(this, "drawGauges", function (minX, maxX, minY, maxY, yAxisScale) {
-      var _this$props2 = _this.props,
-          gaugeTickMarksCount = _this$props2.gaugeTickMarksCount,
-          months = _this$props2.months;
+      var _this$props = _this.props,
+          gaugeTickMarksCount = _this$props.gaugeTickMarksCount,
+          months = _this$props.months;
       (0, _utility.clearElement)(_this.xAxis);
@@ -187,3 +194,3 @@ (0, _utility.clearElement)(_this.yAxis);
       transitionDuration: 300,
-      transitionEasing: 'easeInOutSin',
+      transitionEasing: 'easeOutQuad',
       gaugeTickMarksCount: 6,
@@ -279,2 +286,3 @@ timelineWindowSize: 40,
         y: this.state.y,
+        graphOpacity: this.state.graphOpacity,
         onChangeBounds: this.onChangeBounds
@@ -333,3 +341,6 @@ };
         aspectRatio: this.getCanvasAspectRatio(),
-        canvasWidthPx: this.getCanvasWidthPx()
+        canvasWidthPx: this.getCanvasWidthPx(),
+        graphOpacity: this.data.y.map(function (_) {
+          return 1;
+        })
       });
@@ -499,5 +510,5 @@ }
 
-      var _this$props3 = this.props,
-          canvasWidth = _this$props3.canvasWidth,
-          gaugeTickMarksCount = _this$props3.gaugeTickMarksCount;
+      var _this$props2 = this.props,
+          canvasWidth = _this$props2.canvasWidth,
+          gaugeTickMarksCount = _this$props2.gaugeTickMarksCount;
       var _this$state5 = this.state,
@@ -509,3 +520,4 @@ minX = _this$state5.minX,
           xGraphPoints = _this$state5.xGraphPoints,
-          aspectRatio = _this$state5.aspectRatio; // Clear canvas.
+          aspectRatio = _this$state5.aspectRatio,
+          graphOpacity = _this$state5.graphOpacity; // Clear canvas.
 
@@ -538,21 +550,12 @@ (0, _utility.clearElement)(this.canvas); // Set canvas `viewBox`.
 
-      for (var _iterator4 = this.state.y, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-        var _ref4;
+      var i = 0;
 
-        if (_isArray4) {
-          if (_i4 >= _iterator4.length) break;
-          _ref4 = _iterator4[_i4++];
-        } else {
-          _i4 = _iterator4.next();
-          if (_i4.done) break;
-          _ref4 = _i4.value;
-        }
+      while (i < this.state.y.length) {
+        var _this$state$y$i = this.state.y[i],
+            color = _this$state$y$i.color,
+            graphPoints = _this$state$y$i.graphPoints,
+            isShown = _this$state$y$i.isShown;
+        var opacity = graphOpacity[i]; // Draw chart.
 
-        var _ref5 = _ref4,
-            color = _ref5.color,
-            graphPoints = _ref5.graphPoints,
-            isShown = _ref5.isShown;
-
-        // Draw chart.
-        if (isShown) {
+        if (isShown || opacity > 0) {
           var graph = document.createElement('polyline');
@@ -564,4 +567,11 @@ graph.setAttribute('stroke', color);
           graph.classList.add('chartogram__graph');
+
+          if (opacity !== 1) {
+            graph.style.opacity = opacity;
+          }
+
           this.canvas.appendChild(graph);
         }
+
+        i++;
       } // A workaround to fix WebKit bug when it's not re-rendering the <svg/>.
@@ -577,3 +587,5 @@ // https://stackoverflow.com/questions/30905493/how-to-force-webkit-to-update-svg-use-elements-after-changes-to-original
     key: "transitionState",
-    value: function transitionState(minY, maxY, minYGlobal, maxYGlobal) {
+    value: function transitionState(minY, maxY, minYGlobal, maxYGlobal, graphOpacity) {
+      var maxTransitionDuration = this.props.transitionDuration;
+
       if (this.transition) {
@@ -583,3 +595,10 @@ cancelAnimationFrame(this.transition);
 
+      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);
+      var transitionDuration = maxTransitionDuration * Math.max(0.1, Math.min(deltaY, 0.5) * 2);
       this.setState({
+        graphOpacityFrom: this.state.graphOpacity,
+        graphOpacityTo: graphOpacity,
         minYFrom: this.state.minY,
@@ -593,3 +612,4 @@ maxYFrom: this.state.maxY,
         maxYGlobalTo: maxYGlobal,
-        transitionStartedAt: Date.now()
+        transitionStartedAt: Date.now(),
+        transitionDuration: transitionDuration
       }); // Place in a `setState()` callback in case of React.
@@ -607,8 +627,24 @@
 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";
+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 = {
-  easeInOutSin: function easeInOutSin(x) {
-    return (1 + Math.sin(Math.PI * x - Math.PI / 2)) / 2;
+  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

@@ -204,3 +204,4 @@ "use strict";
           fixSvgCoordinate = _this$props3.fixSvgCoordinate,
-          createPolylinePoints = _this$props3.createPolylinePoints;
+          createPolylinePoints = _this$props3.createPolylinePoints,
+          graphOpacity = _this$props3.graphOpacity;
       var aspectRatio = this.state.aspectRatio; // Clear canvas.
@@ -210,18 +211,12 @@
 
-      this.timelineCanvas.setAttribute('viewBox', "0 0 ".concat(canvasWidth, " ").concat(fixSvgCoordinate(canvasWidth / aspectRatio)));
+      this.timelineCanvas.setAttribute('viewBox', "0 0 ".concat(canvasWidth, " ").concat(fixSvgCoordinate(canvasWidth / aspectRatio))); // Draw graphs.
 
+      var i = 0;
+
       var _loop = function _loop() {
-        if (_isArray) {
-          if (_i >= _iterator.length) return "break";
-          _ref = _iterator[_i++];
-        } else {
-          _i = _iterator.next();
-          if (_i.done) return "break";
-          _ref = _i.value;
-        }
-
-        var _ref2 = _ref,
-            id = _ref2.id,
-            color = _ref2.color,
-            points = _ref2.points;
+        var _data$y$i = data.y[i],
+            id = _data$y$i.id,
+            color = _data$y$i.color,
+            points = _data$y$i.points;
+        var opacity = graphOpacity[i];
         var isShown = y.find(function (_) {
@@ -231,3 +226,3 @@ return _.id === id;
 
-        if (isShown) {
+        if (isShown || opacity > 0) {
           var _simplifyGraph = (0, _utility.simplifyGraph)(data.x.points, points, 80),
@@ -245,12 +240,14 @@ _simplifyGraph2 = _slicedToArray(_simplifyGraph, 2),
 
+          if (opacity !== 1) {
+            graph.style.opacity = opacity;
+          }
+
           _this2.timelineCanvas.appendChild(graph);
         }
+
+        i++;
       };
 
-      for (var _iterator = data.y, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-        var _ref;
-
-        var _ret = _loop();
-
-        if (_ret === "break") break;
+      while (i < data.y.length) {
+        _loop();
       } // A workaround to fix WebKit bug when it's not re-rendering the <svg/>.
@@ -257,0 +254,0 @@ // https://stackoverflow.com/questions/30905493/how-to-force-webkit-to-update-svg-use-elements-after-changes-to-original

commonjs/Tooltip.js

@@ -117,6 +117,8 @@ "use strict";
 
-          if (left < 0) {
-            left = 0;
-          } else if (left + tooltipWidth > canvasWidthPx) {
-            left = canvasWidthPx - tooltipWidth;
+          var overflow = 5;
+
+          if (left < -1 * overflow) {
+            left = -1 * overflow;
+          } else if (left + tooltipWidth > canvasWidthPx + overflow) {
+            left = canvasWidthPx + overflow - tooltipWidth;
           }
@@ -230,2 +232,6 @@
     _defineProperty(this, "updateLine", function (x) {
+      if (!_this.isLineRendered()) {
+        _this.renderLine();
+      }
+
       var _this$props3 = _this.props,
@@ -237,6 +243,2 @@ canvasWidth = _this$props3.canvasWidth,
 
-      if (!_this.line) {
-        _this.renderLine();
-      }
-
       _this.line.setAttributeNS(null, 'x1', fixSvgCoordinate(mapX(x)));
@@ -255,7 +257,2 @@
           y = _this$props4.y;
-
-      if (!_this.points) {
-        _this.renderPoints();
-      }
-
       var i = 0;
@@ -302,2 +299,12 @@ var j = 0;
     value: function mount() {
+      this.renderTooltip();
+      this.renderPoints();
+
+      if (!this.isLineRendered()) {
+        this.renderLine();
+      }
+    }
+  }, {
+    key: "renderTooltip",
+    value: function renderTooltip() {
       var _this$props5 = this.props,
@@ -353,3 +360,3 @@ y = _this$props5.y,
       this.line = document.createElementNS(xmlns, 'line');
-      this.line.setAttributeNS(null, 'class', 'chartogram__tooltip-line');
+      this.line.setAttribute('class', 'chartogram__tooltip-line');
       canvas.insertBefore(this.line, canvas.querySelector('polyline'));
@@ -366,6 +373,15 @@ }
         this.unmountPoints();
-        this.unmountLine();
+
+        if (this.isLineRendered()) {
+          this.unmountLine();
+        }
       }
     }
   }, {
+    key: "isLineRendered",
+    value: function isLineRendered() {
+      var canvas = this.props.canvas;
+      return this.line && this.line.parentNode === canvas;
+    }
+  }, {
     key: "renderPoints",
@@ -372,0 +388,0 @@ value: function renderPoints() {

modules/Chartogram.js

@@ -72,3 +72,5 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
 
-      _this.transitionState(minY, maxY, minYGlobal, maxYGlobal);
+      _this.transitionState(minY, maxY, minYGlobal, maxYGlobal, _this.state.y.map(function (y) {
+        return y.isShown ? 1 : 0;
+      }));
 
@@ -110,7 +112,8 @@ return true;
     _defineProperty(this, "transitionStateTick", function () {
-      var _this$props = _this.props,
-          transitionDuration = _this$props.transitionDuration,
-          transitionEasing = _this$props.transitionEasing;
+      var transitionEasing = _this.props.transitionEasing;
       var _this$state3 = _this.state,
           transitionStartedAt = _this$state3.transitionStartedAt,
+          transitionDuration = _this$state3.transitionDuration,
+          graphOpacityFrom = _this$state3.graphOpacityFrom,
+          graphOpacityTo = _this$state3.graphOpacityTo,
           minYFrom = _this$state3.minYFrom,
@@ -125,5 +128,9 @@ minYTo = _this$state3.minYTo,
       var elapsed = Date.now() - transitionStartedAt;
-      var ratio = EASING[transitionEasing](Math.min(elapsed / transitionDuration, 1));
+      var ratio = Math.min(elapsed / transitionDuration, 1);
+      ratio = EASING[transitionEasing](ratio);
 
       _this.setState({
+        graphOpacity: graphOpacityTo.map(function (_, i) {
+          return graphOpacityFrom[i] + (graphOpacityTo[i] - graphOpacityFrom[i]) * ratio;
+        }),
         minY: minYFrom + (minYTo - minYFrom) * ratio,
@@ -158,5 +165,5 @@ maxY: maxYFrom + (maxYTo - maxYFrom) * ratio,
     _defineProperty(this, "drawGauges", function (minX, maxX, minY, maxY, yAxisScale) {
-      var _this$props2 = _this.props,
-          gaugeTickMarksCount = _this$props2.gaugeTickMarksCount,
-          months = _this$props2.months;
+      var _this$props = _this.props,
+          gaugeTickMarksCount = _this$props.gaugeTickMarksCount,
+          months = _this$props.months;
       clearElement(_this.xAxis);
@@ -175,3 +182,3 @@ clearElement(_this.yAxis);
       transitionDuration: 300,
-      transitionEasing: 'easeInOutSin',
+      transitionEasing: 'easeOutQuad',
       gaugeTickMarksCount: 6,
@@ -267,2 +274,3 @@ timelineWindowSize: 40,
         y: this.state.y,
+        graphOpacity: this.state.graphOpacity,
         onChangeBounds: this.onChangeBounds
@@ -321,3 +329,6 @@ };
         aspectRatio: this.getCanvasAspectRatio(),
-        canvasWidthPx: this.getCanvasWidthPx()
+        canvasWidthPx: this.getCanvasWidthPx(),
+        graphOpacity: this.data.y.map(function (_) {
+          return 1;
+        })
       });
@@ -487,5 +498,5 @@ }
 
-      var _this$props3 = this.props,
-          canvasWidth = _this$props3.canvasWidth,
-          gaugeTickMarksCount = _this$props3.gaugeTickMarksCount;
+      var _this$props2 = this.props,
+          canvasWidth = _this$props2.canvasWidth,
+          gaugeTickMarksCount = _this$props2.gaugeTickMarksCount;
       var _this$state5 = this.state,
@@ -497,3 +508,4 @@ minX = _this$state5.minX,
           xGraphPoints = _this$state5.xGraphPoints,
-          aspectRatio = _this$state5.aspectRatio; // Clear canvas.
+          aspectRatio = _this$state5.aspectRatio,
+          graphOpacity = _this$state5.graphOpacity; // Clear canvas.
 
@@ -526,21 +538,12 @@ clearElement(this.canvas); // Set canvas `viewBox`.
 
-      for (var _iterator4 = this.state.y, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-        var _ref4;
+      var i = 0;
 
-        if (_isArray4) {
-          if (_i4 >= _iterator4.length) break;
-          _ref4 = _iterator4[_i4++];
-        } else {
-          _i4 = _iterator4.next();
-          if (_i4.done) break;
-          _ref4 = _i4.value;
-        }
+      while (i < this.state.y.length) {
+        var _this$state$y$i = this.state.y[i],
+            color = _this$state$y$i.color,
+            graphPoints = _this$state$y$i.graphPoints,
+            isShown = _this$state$y$i.isShown;
+        var opacity = graphOpacity[i]; // Draw chart.
 
-        var _ref5 = _ref4,
-            color = _ref5.color,
-            graphPoints = _ref5.graphPoints,
-            isShown = _ref5.isShown;
-
-        // Draw chart.
-        if (isShown) {
+        if (isShown || opacity > 0) {
           var graph = document.createElement('polyline');
@@ -552,4 +555,11 @@ graph.setAttribute('stroke', color);
           graph.classList.add('chartogram__graph');
+
+          if (opacity !== 1) {
+            graph.style.opacity = opacity;
+          }
+
           this.canvas.appendChild(graph);
         }
+
+        i++;
       } // A workaround to fix WebKit bug when it's not re-rendering the <svg/>.
@@ -565,3 +575,5 @@ // https://stackoverflow.com/questions/30905493/how-to-force-webkit-to-update-svg-use-elements-after-changes-to-original
     key: "transitionState",
-    value: function transitionState(minY, maxY, minYGlobal, maxYGlobal) {
+    value: function transitionState(minY, maxY, minYGlobal, maxYGlobal, graphOpacity) {
+      var maxTransitionDuration = this.props.transitionDuration;
+
       if (this.transition) {
@@ -571,3 +583,10 @@ cancelAnimationFrame(this.transition);
 
+      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);
+      var transitionDuration = maxTransitionDuration * Math.max(0.1, Math.min(deltaY, 0.5) * 2);
       this.setState({
+        graphOpacityFrom: this.state.graphOpacity,
+        graphOpacityTo: graphOpacity,
         minYFrom: this.state.minY,
@@ -581,3 +600,4 @@ maxYFrom: this.state.maxY,
         maxYGlobalTo: maxYGlobal,
-        transitionStartedAt: Date.now()
+        transitionStartedAt: Date.now(),
+        transitionDuration: transitionDuration
       }); // Place in a `setState()` callback in case of React.
@@ -595,8 +615,24 @@
 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";
+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 = {
-  easeInOutSin: function easeInOutSin(x) {
-    return (1 + Math.sin(Math.PI * x - Math.PI / 2)) / 2;
+  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

@@ -197,3 +197,4 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
           fixSvgCoordinate = _this$props3.fixSvgCoordinate,
-          createPolylinePoints = _this$props3.createPolylinePoints;
+          createPolylinePoints = _this$props3.createPolylinePoints,
+          graphOpacity = _this$props3.graphOpacity;
       var aspectRatio = this.state.aspectRatio; // Clear canvas.
@@ -203,18 +204,12 @@
 
-      this.timelineCanvas.setAttribute('viewBox', "0 0 ".concat(canvasWidth, " ").concat(fixSvgCoordinate(canvasWidth / aspectRatio)));
+      this.timelineCanvas.setAttribute('viewBox', "0 0 ".concat(canvasWidth, " ").concat(fixSvgCoordinate(canvasWidth / aspectRatio))); // Draw graphs.
 
+      var i = 0;
+
       var _loop = function _loop() {
-        if (_isArray) {
-          if (_i >= _iterator.length) return "break";
-          _ref = _iterator[_i++];
-        } else {
-          _i = _iterator.next();
-          if (_i.done) return "break";
-          _ref = _i.value;
-        }
-
-        var _ref2 = _ref,
-            id = _ref2.id,
-            color = _ref2.color,
-            points = _ref2.points;
+        var _data$y$i = data.y[i],
+            id = _data$y$i.id,
+            color = _data$y$i.color,
+            points = _data$y$i.points;
+        var opacity = graphOpacity[i];
         var isShown = y.find(function (_) {
@@ -224,3 +219,3 @@ return _.id === id;
 
-        if (isShown) {
+        if (isShown || opacity > 0) {
           var _simplifyGraph = simplifyGraph(data.x.points, points, 80),
@@ -238,12 +233,14 @@ _simplifyGraph2 = _slicedToArray(_simplifyGraph, 2),
 
+          if (opacity !== 1) {
+            graph.style.opacity = opacity;
+          }
+
           _this2.timelineCanvas.appendChild(graph);
         }
+
+        i++;
       };
 
-      for (var _iterator = data.y, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-        var _ref;
-
-        var _ret = _loop();
-
-        if (_ret === "break") break;
+      while (i < data.y.length) {
+        _loop();
       } // A workaround to fix WebKit bug when it's not re-rendering the <svg/>.
@@ -250,0 +247,0 @@ // https://stackoverflow.com/questions/30905493/how-to-force-webkit-to-update-svg-use-elements-after-changes-to-original

modules/Tooltip.js

@@ -110,6 +110,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-          if (left < 0) {
-            left = 0;
-          } else if (left + tooltipWidth > canvasWidthPx) {
-            left = canvasWidthPx - tooltipWidth;
+          var overflow = 5;
+
+          if (left < -1 * overflow) {
+            left = -1 * overflow;
+          } else if (left + tooltipWidth > canvasWidthPx + overflow) {
+            left = canvasWidthPx + overflow - tooltipWidth;
           }
@@ -223,2 +225,6 @@
     _defineProperty(this, "updateLine", function (x) {
+      if (!_this.isLineRendered()) {
+        _this.renderLine();
+      }
+
       var _this$props3 = _this.props,
@@ -230,6 +236,2 @@ canvasWidth = _this$props3.canvasWidth,
 
-      if (!_this.line) {
-        _this.renderLine();
-      }
-
       _this.line.setAttributeNS(null, 'x1', fixSvgCoordinate(mapX(x)));
@@ -248,7 +250,2 @@
           y = _this$props4.y;
-
-      if (!_this.points) {
-        _this.renderPoints();
-      }
-
       var i = 0;
@@ -295,2 +292,12 @@ var j = 0;
     value: function mount() {
+      this.renderTooltip();
+      this.renderPoints();
+
+      if (!this.isLineRendered()) {
+        this.renderLine();
+      }
+    }
+  }, {
+    key: "renderTooltip",
+    value: function renderTooltip() {
       var _this$props5 = this.props,
@@ -346,3 +353,3 @@ y = _this$props5.y,
       this.line = document.createElementNS(xmlns, 'line');
-      this.line.setAttributeNS(null, 'class', 'chartogram__tooltip-line');
+      this.line.setAttribute('class', 'chartogram__tooltip-line');
       canvas.insertBefore(this.line, canvas.querySelector('polyline'));
@@ -359,6 +366,15 @@ }
         this.unmountPoints();
-        this.unmountLine();
+
+        if (this.isLineRendered()) {
+          this.unmountLine();
+        }
       }
     }
   }, {
+    key: "isLineRendered",
+    value: function isLineRendered() {
+      var canvas = this.props.canvas;
+      return this.line && this.line.parentNode === canvas;
+    }
+  }, {
     key: "renderPoints",
@@ -365,0 +381,0 @@ value: function renderPoints() {

package.json

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

source/Chartogram.js

@@ -19,3 +19,3 @@ import {
 			transitionDuration: 300,
-			transitionEasing: 'easeInOutSin',
+			transitionEasing: 'easeOutQuad',
 			gaugeTickMarksCount: 6,
@@ -128,2 +128,3 @@ timelineWindowSize: 40,
 			y: this.state.y,
+			graphOpacity: this.state.graphOpacity,
 			onChangeBounds: this.onChangeBounds
@@ -176,3 +177,4 @@ }
 			aspectRatio: this.getCanvasAspectRatio(),
-			canvasWidthPx: this.getCanvasWidthPx()
+			canvasWidthPx: this.getCanvasWidthPx(),
+			graphOpacity: this.data.y.map(_ => 1)
 		}
@@ -296,3 +298,9 @@ }
 		const { minY, maxY, minYGlobal, maxYGlobal } = this.calculateMinMaxY(this.state.y)
-		this.transitionState(minY, maxY, minYGlobal, maxYGlobal)
+		this.transitionState(
+			minY,
+			maxY,
+			minYGlobal,
+			maxYGlobal,
+			this.state.y.map(y => y.isShown ? 1 : 0)
+		)
 		return true
@@ -330,3 +338,3 @@ }
 		const { canvasWidth, gaugeTickMarksCount } = this.props
-		const { minX, maxX, minY, maxY, xGraphPoints, aspectRatio } = this.state
+		const { minX, maxX, minY, maxY, xGraphPoints, aspectRatio, graphOpacity } = this.state
 		// Clear canvas.
@@ -346,5 +354,8 @@ clearElement(this.canvas)
 		// Draw charts.
-		for (const { color, graphPoints, isShown } of this.state.y) {
+		let i = 0
+		while (i < this.state.y.length) {
+			const { color, graphPoints, isShown } = this.state.y[i]
+			const opacity = graphOpacity[i]
 			// Draw chart.
-			if (isShown) {
+			if (isShown || opacity > 0) {
 				const graph = document.createElement('polyline')
@@ -357,4 +368,8 @@ graph.setAttribute('stroke', color)
 				graph.classList.add('chartogram__graph')
+				if (opacity !== 1) {
+					graph.style.opacity = opacity
+				}
 				this.canvas.appendChild(graph)
 			}
+			i++
 		}
@@ -374,7 +389,15 @@ // A workaround to fix WebKit bug when it's not re-rendering the <svg/>.
 
-	transitionState(minY, maxY, minYGlobal, maxYGlobal) {
+	transitionState(minY, maxY, minYGlobal, maxYGlobal, graphOpacity) {
+		const { transitionDuration: maxTransitionDuration } = this.props
 		if (this.transition) {
 			cancelAnimationFrame(this.transition)
 		}
+		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)
+		const transitionDuration = maxTransitionDuration * Math.max(0.1, Math.min(deltaY, 0.5) * 2)
 		this.setState({
+			graphOpacityFrom: this.state.graphOpacity,
+			graphOpacityTo: graphOpacity,
 			minYFrom: this.state.minY,
@@ -388,3 +411,4 @@ maxYFrom: this.state.maxY,
 			maxYGlobalTo: maxYGlobal,
-			transitionStartedAt: Date.now()
+			transitionStartedAt: Date.now(),
+			transitionDuration
 		})
@@ -397,3 +421,2 @@ // Place in a `setState()` callback in case of React.
 		const {
-			transitionDuration,
 			transitionEasing
@@ -403,2 +426,5 @@ } = this.props
 			transitionStartedAt,
+			transitionDuration,
+			graphOpacityFrom,
+			graphOpacityTo,
 			minYFrom,
@@ -414,4 +440,6 @@ minYTo,
 		const elapsed = Date.now() - transitionStartedAt
-		const ratio = EASING[transitionEasing](Math.min(elapsed / transitionDuration, 1))
+		let ratio = Math.min(elapsed / transitionDuration, 1)
+		ratio = EASING[transitionEasing](ratio)
 		this.setState({
+			graphOpacity: graphOpacityTo.map((_, i) => graphOpacityFrom[i] + (graphOpacityTo[i] - graphOpacityFrom[i]) * ratio),
 			minY: minYFrom + (minYTo - minYFrom) * ratio,
@@ -496,6 +524,22 @@ maxY: maxYFrom + (maxYTo - maxYFrom) * ratio,
 
+// https://gist.github.com/gre/1650294
 const EASING = {
-	easeInOutSin(x) {
-		return (1 + Math.sin(Math.PI * x - Math.PI / 2)) / 2
-	}
+	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

@@ -79,3 +79,3 @@ import {
 	render() {
-		const { canvasWidth, y, data, maxYGlobal, fixSvgCoordinate, createPolylinePoints } = this.props
+		const { canvasWidth, y, data, maxYGlobal, fixSvgCoordinate, createPolylinePoints, graphOpacity } = this.props
 		const { aspectRatio } = this.state
@@ -86,5 +86,9 @@ // Clear canvas.
 		this.timelineCanvas.setAttribute('viewBox', `0 0 ${canvasWidth} ${fixSvgCoordinate(canvasWidth / aspectRatio)}`)
-		for (const { id, color, points } of data.y) {
+		// Draw graphs.
+		let i = 0
+		while (i < data.y.length) {
+			const { id, color, points } = data.y[i]
+			const opacity = graphOpacity[i]
 			const isShown = y.find(_ => _.id === id).isShown
-			if (isShown) {
+			if (isShown || opacity > 0) {
 				const [_x, _y] = simplifyGraph(data.x.points, points, 80)
@@ -98,4 +102,8 @@ const graph = document.createElement('polyline')
 				graph.classList.add('chartogram__graph')
+				if (opacity !== 1) {
+					graph.style.opacity = opacity
+				}
 				this.timelineCanvas.appendChild(graph)
 			}
+			i++
 		}
@@ -102,0 +110,0 @@ // A workaround to fix WebKit bug when it's not re-rendering the <svg/>.

source/Tooltip.js

@@ -75,6 +75,7 @@ export default class Tooltip {
 				const tooltipWidth = this.tooltip.getBoundingClientRect().width
-				if (left < 0) {
-					left = 0
-				} else if (left + tooltipWidth > canvasWidthPx) {
-					left = canvasWidthPx - tooltipWidth
+				const overflow = 5
+				if (left < -1 * overflow) {
+					left = -1 * overflow
+				} else if (left + tooltipWidth > canvasWidthPx + overflow) {
+					left = (canvasWidthPx + overflow) - tooltipWidth
 				}
@@ -149,2 +150,10 @@ this.tooltip.style.left = left + 'px'
 	mount() {
+		this.renderTooltip()
+		this.renderPoints()
+		if (!this.isLineRendered()) {
+			this.renderLine()
+		}
+	}
+
+	renderTooltip() {
 		const { y, container } = this.props
@@ -182,3 +191,3 @@ // Create tooltip.
 		this.line = document.createElementNS(xmlns, 'line')
-		this.line.setAttributeNS(null, 'class', 'chartogram__tooltip-line')
+		this.line.setAttribute('class', 'chartogram__tooltip-line')
 		canvas.insertBefore(this.line, canvas.querySelector('polyline'))
@@ -194,6 +203,13 @@ }
 			this.unmountPoints()
-			this.unmountLine()
+			if (this.isLineRendered()) {
+				this.unmountLine()
+			}
 		}
 	}
 
+	isLineRendered() {
+		const { canvas } = this.props
+		return this.line && this.line.parentNode === canvas
+	}
+
 	unmountLine = () => {
@@ -228,6 +244,6 @@ const { canvas } = this.props
 	updateLine = (x) => {
-		const { canvasWidth, aspectRatio, fixSvgCoordinate, mapX } = this.props
-		if (!this.line) {
+		if (!this.isLineRendered()) {
 			this.renderLine()
 		}
+		const { canvasWidth, aspectRatio, fixSvgCoordinate, mapX } = this.props
 		this.line.setAttributeNS(null, 'x1', fixSvgCoordinate(mapX(x)))
@@ -241,5 +257,2 @@ this.line.setAttributeNS(null, 'x2', fixSvgCoordinate(mapX(x)))
 		const { maxY, y } = this.props
-		if (!this.points) {
-			this.renderPoints()
-		}
 		let i = 0
@@ -246,0 +259,0 @@ let j = 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

1100295

increased by1.81%

Lines of code

4355

increased by3.72%

No dependency changes