Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
chartogram
Advanced tools
chartogram - npm Package Compare versions
Comparing version 0.1.0 to 0.1.1
@@ -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){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},a=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(r).filter(function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable}))),a.forEach(function(n){e(t,n,r[n])})}return t}function e(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function n(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")}()}return function(e,r){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"Title",o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};e.innerHTML='\n\t\t<header class="chartogram__header">\n\t\t\t<h1 class="chartogram__title">'.concat(a,'</h1>\n\t\t</header>\n\t\t<div class="chartogram__plan-with-axes">\n\t\t\t<div class="chartogram__plan">\n\t\t\t\t<div class="chartogram__top-border"></div>\n\t\t\t\t<div class="chartogram__canvas-wrapper">\n\t\t\t\t\t<svg class="chartogram__canvas" preserveAspectRatio="none"></svg>\n\t\t\t\t\t<div class="chartogram__x"></div>\n\t\t\t\t\t<div class="chartogram__y-wrapper">\n\t\t\t\t\t\t<div class="chartogram__y"></div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class="chartogram__timeline">\n\t\t\t<div class="chartogram__timeline-canvas-padding">\n\t\t\t\t<svg class="chartogram__timeline-canvas" preserveAspectRatio="none"></svg>\n\t\t\t</div>\n\t\t\t<div class="chartogram__timeline-overlay-left"></div>\n\t\t\t<div class="chartogram__timeline-overlay-right"></div>\n\t\t\t<div class="chartogram__timeline-window">\n\t\t\t\t<button type="button" class="chartogram__reset-button chartogram__timeline-window__drag"></button>\n\t\t\t\t<button type="button" class="chartogram__reset-button chartogram__timeline-window__left-handle"></button>\n\t\t\t\t<button type="button" class="chartogram__reset-button chartogram__timeline-window__right-handle"></button>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class="chartogram__chart-togglers"></div>\n\t'),e.classList.add("chartogram");var i,c,l,d,s,u,h,v,m,g,f,p,_,y,b,w,x=o.gaugeMarkTicksCount||6,A=o.timelineWindowSize||40,L=o.months||["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],E=o.weekdays||["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],S=document.querySelector(".chartogram__plan"),C=document.querySelector(".chartogram__canvas"),k=document.querySelector(".chartogram__canvas-wrapper"),M=document.querySelector(".chartogram__x"),N=document.querySelector(".chartogram__y"),T=document.querySelector(".chartogram__timeline"),q=document.querySelector(".chartogram__timeline-overlay-left"),O=document.querySelector(".chartogram__timeline-window__left-handle"),j=document.querySelector(".chartogram__timeline-window"),B=document.querySelector(".chartogram__timeline-window__drag"),D=document.querySelector(".chartogram__timeline-window__right-handle"),R=document.querySelector(".chartogram__timeline-overlay-right"),X=document.querySelector(".chartogram__timeline-canvas"),Y=1;function I(t){for(;t.firstChild;)t.removeChild(t.firstChild)}function P(t,e){return t.map(function(t,n){return"".concat(t,",").concat(e[n])})}function F(t,e,n,r){for(var a=0;a<x;){var o=document.createElement("div"),i=e+a*(n-e)/(x-1);r&&(i=r(i)),o.appendChild(document.createTextNode(i)),t.appendChild(o),a++}}function H(e){var a=r.x.points;m=a[0];var o=a.map(function(t){return(t-m)/1e3});I(C);var f=o[0],p=o[o.length-1],_=p-f,y=f+i*_,b=p-(1-c)*_,w=o.findIndex(function(t){return t>y})-1;w<0&&(w=0);var A=o.findIndex(function(t){return t>b});A<0&&(A=o.length-1);var E=o.slice(w,A+1),S=0,k=0;d=[];var T=[],q=r.lines,O=Array.isArray(q),j=0;for(q=O?q:q[Symbol.iterator]();;){var B;if(O){if(j>=q.length)break;B=q[j++]}else{if((j=q.next()).done)break;B=j.value}var D=B;if(l[D.id]){T.push(D),k=Math.max.apply(Math,[k].concat(n(D.points)));var R=D.points.slice(w,A+1);d.push(t({},D,{points:R})),S=Math.max.apply(Math,[S].concat(n(R)))}}C.setAttribute("viewBox","".concat(y," ").concat(0," ").concat(b-y," ").concat(S-0));var H=function(t,e){for(;;){if(t<e)return e;if(t%e==0)return t;t--}}(S,10),W=(S-0)/(H-0),z=function(t,e){for(var n=new Array(x),r=0;r<x;)n[r]=t+r*(e-t)/(x-1),r++;return n}(0,H),G=Array.isArray(z),K=0;for(z=G?z:z[Symbol.iterator]();;){var Q;if(G){if(K>=z.length)break;Q=z[K++]}else{if((K=z.next()).done)break;Q=K.value}var U=Q;C.appendChild(J(U,y,b,0,S))}var V=E.slice(),Z=V[0],$=V[V.length-1],tt=(y-Z)/(V[1]-Z),et=($-b)/($-V[V.length-2]);V[0]=y,V[V.length-1]=b;var nt=d,rt=Array.isArray(nt),at=0;for(nt=rt?nt:nt[Symbol.iterator]();;){var ot;if(rt){if(at>=nt.length)break;ot=nt[at++]}else{if((at=nt.next()).done)break;ot=at.value}var it=ot,ct=(it.id,it.color),lt=it.points,dt=document.createElement("polyline");dt.setAttribute("stroke",ct);var st=lt.slice(),ut=st[0],ht=st[st.length-1];st[0]=ut+(st[1]-ut)*tt,st[st.length-1]=ht-(ht-st[st.length-2])*et,dt.setAttribute("points",P(V,st.map(function(t){return S-Y*t})).join(" ")),dt.classList.add("chartogram__graph"),C.appendChild(dt)}C.innerHTML+="",function(t,e,n,r,a){I(M),I(N),F(M,t,e,function(t){var e=new Date(t);return"".concat(L[e.getMonth()]," ").concat(e.getDate())}),F(N,n,r),N.style.height="".concat(100/a,"%")}(a[0],a[a.length-1],0,H,W),h=0,v=S,s=y,u=b,g=E,e&&function(t,e,n,r,a,o){I(X),X.setAttribute("viewBox","".concat(n," ").concat(a," ").concat(r-n," ").concat(o-a));for(var i=t,c=Array.isArray(i),l=0,i=c?i:i[Symbol.iterator]();;){var d;if(c){if(l>=i.length)break;d=i[l++]}else{if((l=i.next()).done)break;d=l.value}var s=d,u=(s.id,s.color),h=s.points,v=document.createElement("polyline");v.setAttribute("stroke",u),v.setAttribute("points",P(e,h.map(function(t){return o-a-t})).join(" ")),v.classList.add("chartogram__graph"),X.appendChild(v)}X.innerHTML+=""}(T,o,f,p,0,k)}function J(t,e,n,r,a){var o=document.createElement("line");return o.classList.add("chartogram__grid-line"),o.setAttribute("x1",e),o.setAttribute("x2",n),o.setAttribute("y1",a-r-t),o.setAttribute("y2",a-r-t),o}function W(t){var e=t.id,n=t.name,r=t.color,a=document.createElement("button");a.setAttribute("type","button"),a.classList.add("chartogram__chart-toggler"),a.classList.add("chartogram__chart-toggler--on"),a.classList.add("chartogram__reset-button");var o="http://www.w3.org/2000/svg",i=document.createElementNS(o,"svg");i.setAttributeNS(null,"viewBox","0 0 19 19"),i.classList.add("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",r),i.appendChild(c);var d=document.createElementNS(o,"circle");d.setAttribute("cx","9.5"),d.setAttribute("cy","9.5"),d.setAttribute("r","8"),d.classList.add("chartogram__chart-toggler-check-circle"),i.appendChild(d);var s=document.createElementNS(o,"path");return s.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"),s.setAttribute("fill","white"),s.classList.add("chartogram__chart-toggler-check-mark"),i.appendChild(s),a.appendChild(i),a.appendChild(document.createTextNode(n)),a.addEventListener("click",function(){var t=!l[e];(t||1!==Object.keys(l).filter(function(t){return!1!==l[t]}).length)&&(l[e]=t,H(!0),a.classList.toggle("chartogram__chart-toggler--on"))}),a}function z(t){var e,n,r,a,o="left"===t?O:D,l=parseFloat(getComputedStyle(j).borderLeftWidth);return G(o,function(o){e=T.getBoundingClientRect();var i=j.getBoundingClientRect();"left"===t?(n=e.x,r=i.x+i.width-2*l,a=o-i.x):(n=i.x+2*l,r=e.x+e.width,a=o-(i.x+i.width))},function(o){o-=a,o=((o=Math.max(Math.min(o,r),n))-e.x)/e.width,"left"===t?i=o:c=o,K()})}function G(t,e,n){function r(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",r),window.removeEventListener("pointerup",o),window.removeEventListener("pointercancel",o),window.removeEventListener("touchend",o),window.removeEventListener("touchcancel",o)}function i(t){if(t.touches.length>1)return o();e(t.changedTouches[0].clientX,t.changedTouches[0].clientY),window.addEventListener("touchmove",r),window.addEventListener("touchend",o),window.addEventListener("touchcancel",o)}function c(t){e(t.clientX,t.clientY),window.addEventListener("pointermove",a),window.addEventListener("pointerup",o),window.addEventListener("pointercancel",o)}return t.addEventListener("touchstart",i),t.addEventListener("pointerdown",c),function(){o(),t.removeEventListener(c),t.removeEventListener(i)}}function K(){var t;t=i,q.style.right="".concat(100*(1-t),"%"),j.style.left="".concat(100*t,"%"),function(t){R.style.left="".concat(100*t,"%"),j.style.right="".concat(100*(1-t),"%")}(c),H(!1)}function Q(){f&&(y=void 0,S.removeChild(f),f=void 0,function(){for(var t=b,e=Array.isArray(t),n=0,t=e?t:t[Symbol.iterator]();;){var r;if(e){if(n>=t.length)break;r=t[n++]}else{if((n=t.next()).done)break;r=n.value}var a=r;k.removeChild(a)}b=void 0}(),C.removeChild(w),w=void 0)}z("left"),z("right"),G(B,function(t){U=T.getBoundingClientRect(),V=j.getBoundingClientRect(),tt=t-V.x,Z=U.x,$=U.x+(U.width-V.width)},function(t){t-=tt,t=((t=Math.max(Math.min(t,$),Z))-U.x)/U.width,i=t,c=t+V.width/U.width,K()}),function(){l={};for(var t=r.lines,e=Array.isArray(t),n=0,t=e?t:t[Symbol.iterator]();;){var a;if(e){if(n>=t.length)break;a=t[n++]}else{if((n=t.next()).done)break;a=n.value}var o=a;l[o.id]=!0}if(r.x.points.length>A){var d=r.x.points[0],s=r.x.points[r.x.points.length-1],u=r.x.points[r.x.points.length-A];i=(u-d)/(s-d)}else i=0;c=1,K(),H(!0),w=void 0;var h=document.querySelector(".chartogram__chart-togglers");I(h);for(var v=r.lines,m=Array.isArray(v),g=0,v=m?v:v[Symbol.iterator]();;){var f;if(m){if(g>=v.length)break;f=v[g++]}else{if((g=v.next()).done)break;f=g.value}var p=f;h.appendChild(W(p))}}(),function(){var t,e;function n(n){var a=(n-t.x)/t.width,o=s+a*(u-s),i=g.findIndex(function(t){return t>=o}),c=i-1;if(e(i)||(i=-1),e(c)||(c=-1),i<0){if(c<0)return Q();o=g[c]}else if(c<0)o=g[i];else{var x=g[c],A=g[i],M=o-x,N=A-o;o=M>N?A:x}if(o!==y){y=o,f||function(){(f=document.createElement("div")).classList.add("chartogram__tooltip"),S.appendChild(f),(p=document.createElement("h1")).classList.add("chartogram__tooltip-header"),f.appendChild(p),(_=document.createElement("dl")).classList.add("chartogram__tooltip-values"),f.appendChild(_);for(var t=r.lines,e=Array.isArray(t),n=0,t=e?t:t[Symbol.iterator]();;){var a;if(e){if(n>=t.length)break;a=t[n++]}else{if((n=t.next()).done)break;a=n.value}var o=a;if(l[o.id]){var i=document.createElement("dt");i.style.color=o.color,_.appendChild(i);var c=document.createElement("dd");c.style.color=o.color,_.appendChild(c)}}}();var T=new Date(1e3*o+m);p.textContent="".concat(E[T.getDay()],", ").concat(L[T.getMonth()]," ").concat(T.getDate());for(var q=g.indexOf(o),O=0;2*O<_.childNodes.length;)_.childNodes[2*O].textContent=d[O].points[q],_.childNodes[2*O+1].textContent=r.lines[O].name,O++;var j=(o-s)/(u-s);f.style.left="".concat(100*j,"%"),function(t,e){b||function(){b=[];for(var t=0;t<d.length;){var e=document.createElement("div");e.classList.add("chartogram__tooltip-point"),e.style.color=d[t].color,b.push(e),k.appendChild(e),t++}}();for(var n=0;n<b.length;){var r=b[n];r.style.left="".concat(100*e,"%");var a=d[n].points[t],o=a/v;r.style.bottom="".concat(100*o,"%"),n++}}(q,j),function(t){w||((w=document.createElementNS("http://www.w3.org/2000/svg","line")).setAttributeNS(null,"class","chartogram__tooltip-line"),C.appendChild(w)),w.setAttributeNS(null,"x1",t),w.setAttributeNS(null,"x2",t),w.setAttributeNS(null,"y1",h),w.setAttributeNS(null,"y2",v)}(o)}}function a(){t=C.getBoundingClientRect(),e=function(t){return!(t<0)&&g[t]>=s&&g[t]<=u}}function o(t){if(t.touches.length>1)return x();a(),C.addEventListener("touchend",x),C.addEventListener("touchmove",i),C.addEventListener("touchend",x),C.addEventListener("touchcancel",x),i(t)}function i(e){var r=e.changedTouches[0].clientX,a=e.changedTouches[0].clientY;r<t.x||r>t.x+t.width||a<t.y||a>t.y+t.height?x():n(r)}function c(t){n(t.clientX,t.clientY)}function x(){C.removeEventListener("pointermove",c),C.removeEventListener("pointerleave",x),C.removeEventListener("pointercancel",x),C.removeEventListener("touchmove",i),C.removeEventListener("touchend",x),C.removeEventListener("touchcancel",x),Q()}function A(){a(),C.addEventListener("pointermove",c),C.addEventListener("pointerleave",x),C.addEventListener("pointercancel",x)}C.addEventListener("touchstart",o),C.addEventListener("pointerenter",A)}();var U,V,Z,$,tt}}); | ||
| !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,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],r=!0,a=!1,o=void 0;try{for(var i,c=t[Symbol.iterator]();!(r=(i=c.next()).done)&&(n.push(i.value),!e||n.length!==e);r=!0);}catch(t){a=!0,o=t}finally{try{r||null==c.return||c.return()}finally{if(a)throw o}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function e(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},a=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(r).filter(function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable}))),a.forEach(function(e){n(t,e,r[e])})}return t}function n(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function r(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")}()}return function(n,a){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"Title",i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};n.innerHTML='\n\t\t<header class="chartogram__header">\n\t\t\t<h1 class="chartogram__title">'.concat(o,'</h1>\n\t\t</header>\n\t\t<div class="chartogram__plan-with-axes">\n\t\t\t<div class="chartogram__plan">\n\t\t\t\t<div class="chartogram__top-border"></div>\n\t\t\t\t<div class="chartogram__canvas-wrapper">\n\t\t\t\t\t<svg class="chartogram__canvas" preserveAspectRatio="none"></svg>\n\t\t\t\t\t<div class="chartogram__x"></div>\n\t\t\t\t\t<div class="chartogram__y-wrapper">\n\t\t\t\t\t\t<div class="chartogram__y"></div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class="chartogram__timeline">\n\t\t\t<div class="chartogram__timeline-canvas-padding">\n\t\t\t\t<svg class="chartogram__timeline-canvas" preserveAspectRatio="none"></svg>\n\t\t\t</div>\n\t\t\t<div class="chartogram__timeline-overlay-left"></div>\n\t\t\t<div class="chartogram__timeline-overlay-right"></div>\n\t\t\t<div class="chartogram__timeline-window">\n\t\t\t\t<button type="button" class="chartogram__reset-button chartogram__timeline-window__drag"></button>\n\t\t\t\t<button type="button" class="chartogram__reset-button chartogram__timeline-window__left-handle"></button>\n\t\t\t\t<button type="button" class="chartogram__reset-button chartogram__timeline-window__right-handle"></button>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class="chartogram__chart-togglers"></div>\n\t'),n.classList.add("chartogram");var c,l,d,s,u,h,v,m,g,f,p,_,y,b,w,x,A=i.gaugeMarkTicksCount||6,E=i.timelineWindowSize||40,L=i.timelineChartMaxPoints||80,S=i.months||["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],C=i.weekdays||["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],k=document.querySelector(".chartogram__plan"),M=document.querySelector(".chartogram__canvas"),N=document.querySelector(".chartogram__canvas-wrapper"),T=document.querySelector(".chartogram__x"),q=document.querySelector(".chartogram__y"),O=document.querySelector(".chartogram__timeline"),j=document.querySelector(".chartogram__timeline-overlay-left"),B=document.querySelector(".chartogram__timeline-window__left-handle"),D=document.querySelector(".chartogram__timeline-window"),R=document.querySelector(".chartogram__timeline-window__drag"),X=document.querySelector(".chartogram__timeline-window__right-handle"),Y=document.querySelector(".chartogram__timeline-overlay-right"),I=document.querySelector(".chartogram__timeline-canvas"),P=1;function F(t){for(;t.firstChild;)t.removeChild(t.firstChild)}function H(t,e){return t.map(function(t,n){return"".concat(t,",").concat(e[n])})}function J(t,e,n,r){for(var a=0;a<A;){var o=document.createElement("div"),i=e+a*(n-e)/(A-1);r&&(i=r(i)),o.appendChild(document.createTextNode(i)),t.appendChild(o),a++}}function W(n){var o=a.x.points;g=o[0];var i=o.map(function(t){return(t-g)/1e3});F(M);var p=i[0],_=i[i.length-1],y=_-p,b=p+c*y,w=_-(1-l)*y,x=i.findIndex(function(t){return t>b})-1;x<0&&(x=0);var E=i.findIndex(function(t){return t>w});E<0&&(E=i.length-1);var C=i.slice(x,E+1),k=0,N=0;s=[];var O=[],j=a.lines,B=Array.isArray(j),D=0;for(j=B?j:j[Symbol.iterator]();;){var R;if(B){if(D>=j.length)break;R=j[D++]}else{if((D=j.next()).done)break;R=D.value}var X=R;if(d[X.id]){O.push(X),N=Math.max.apply(Math,[N].concat(r(X.points)));var Y=X.points.slice(x,E+1);s.push(e({},X,{points:Y})),k=Math.max.apply(Math,[k].concat(r(Y)))}}M.setAttribute("viewBox","".concat(b," ").concat(0," ").concat(w-b," ").concat(k-0));var W=function(t,e){for(;;){if(t<e)return e;if(t%e==0)return t;t--}}(k,10),K=(k-0)/(W-0),Q=function(t,e){for(var n=new Array(A),r=0;r<A;)n[r]=t+r*(e-t)/(A-1),r++;return n}(0,W),U=Array.isArray(Q),V=0;for(Q=U?Q:Q[Symbol.iterator]();;){var Z;if(U){if(V>=Q.length)break;Z=Q[V++]}else{if((V=Q.next()).done)break;Z=V.value}var $=Z;M.appendChild(z($,b,w,0,k))}var tt=C.slice(),et=tt[0],nt=tt[tt.length-1],rt=(b-et)/(tt[1]-et),at=(nt-w)/(nt-tt[tt.length-2]);tt[0]=b,tt[tt.length-1]=w;var ot=s,it=Array.isArray(ot),ct=0;for(ot=it?ot:ot[Symbol.iterator]();;){var lt;if(it){if(ct>=ot.length)break;lt=ot[ct++]}else{if((ct=ot.next()).done)break;lt=ct.value}var dt=lt,st=(dt.id,dt.color),ut=dt.points,ht=document.createElement("polyline");ht.setAttribute("stroke",st);var vt=ut.slice(),mt=vt[0],gt=vt[vt.length-1];vt[0]=mt+(vt[1]-mt)*rt,vt[vt.length-1]=gt-(gt-vt[vt.length-2])*at,ht.setAttribute("points",H(tt,vt.map(function(t){return k-P*t})).join(" ")),ht.classList.add("chartogram__graph"),M.appendChild(ht)}M.innerHTML+="",function(t,e,n,r,a){F(T),F(q),J(T,t,e,function(t){var e=new Date(t);return"".concat(S[e.getMonth()]," ").concat(e.getDate())}),J(q,n,r),q.style.height="".concat(100/a,"%")}(o[0],o[o.length-1],0,W,K),v=0,m=k,u=b,h=w,f=C,n&&function(e,n,r,a,o,i){F(I),I.setAttribute("viewBox","".concat(r," ").concat(o," ").concat(a-r," ").concat(i-o));for(var c=e,l=Array.isArray(c),d=0,c=l?c:c[Symbol.iterator]();;){var s;if(l){if(d>=c.length)break;s=c[d++]}else{if((d=c.next()).done)break;s=d.value}var u=s,h=(u.id,u.color),v=u.points,m=G(n,v,L),g=t(m,2),f=g[0],p=g[1],_=document.createElement("polyline");_.setAttribute("stroke",h),_.setAttribute("points",H(f,p.map(function(t){return i-o-t})).join(" ")),_.classList.add("chartogram__graph"),I.appendChild(_)}I.innerHTML+=""}(O,i,p,_,0,N)}function z(t,e,n,r,a){var o=document.createElement("line");return o.classList.add("chartogram__grid-line"),o.setAttribute("x1",e),o.setAttribute("x2",n),o.setAttribute("y1",a-r-t),o.setAttribute("y2",a-r-t),o}function G(t,e,n){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:Math.max.apply(Math,r(e)),o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:.025,i=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,c=arguments.length>6&&void 0!==arguments[6]?arguments[6]:new Array(t.length),l=arguments.length>7&&void 0!==arguments[7]?arguments[7]:new Array(t.length),d=arguments.length>8&&void 0!==arguments[8]?arguments[8]:0;if(i+2>t.length-1){for(;i<e.length;)c[d]=t[i],l[d]=e[i],d++,i++;return c=c.slice(0,d),l=l.slice(0,d),c.length<=n?[c,l]:(t.length/c.length<1.1&&(o=Math.min(o+.025,1)),G(c,l,n,a,o))}var s=(e[i+2]+e[i])/2;return Math.abs(s-e[i+1])/a<o?(c[d]=t[i],c[d+1]=t[i+2],l[d]=e[i],l[d+1]=e[i+2],G(t,e,n,a,o,i+2,c,l,d+1)):(c[d]=t[i],c[d+1]=t[i+1],c[d+2]=t[i+2],l[d]=e[i],l[d+1]=e[i+1],l[d+2]=e[i+2],G(t,e,n,a,o,i+2,c,l,d+2))}function K(t){var e=t.id,n=t.name,r=t.color,a=document.createElement("button");a.setAttribute("type","button"),a.classList.add("chartogram__chart-toggler"),a.classList.add("chartogram__chart-toggler--on"),a.classList.add("chartogram__reset-button");var o="http://www.w3.org/2000/svg",i=document.createElementNS(o,"svg");i.setAttributeNS(null,"viewBox","0 0 19 19"),i.classList.add("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",r),i.appendChild(c);var l=document.createElementNS(o,"circle");l.setAttribute("cx","9.5"),l.setAttribute("cy","9.5"),l.setAttribute("r","8"),l.classList.add("chartogram__chart-toggler-check-circle"),i.appendChild(l);var s=document.createElementNS(o,"path");return s.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"),s.setAttribute("fill","white"),s.classList.add("chartogram__chart-toggler-check-mark"),i.appendChild(s),a.appendChild(i),a.appendChild(document.createTextNode(n)),a.addEventListener("click",function(){var t=!d[e];(t||1!==Object.keys(d).filter(function(t){return!1!==d[t]}).length)&&(d[e]=t,W(!0),a.classList.toggle("chartogram__chart-toggler--on"))}),a}function Q(t){var e,n,r,a,o="left"===t?B:X,i=parseFloat(getComputedStyle(D).borderLeftWidth);return U(o,function(o){e=O.getBoundingClientRect();var c=D.getBoundingClientRect();"left"===t?(n=e.x,r=c.x+c.width-2*i,a=o-c.x):(n=c.x+2*i,r=e.x+e.width,a=o-(c.x+c.width))},function(o){o-=a,o=((o=Math.max(Math.min(o,r),n))-e.x)/e.width,"left"===t?c=o:l=o,V()})}function U(t,e,n){function r(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",r),window.removeEventListener("pointerup",o),window.removeEventListener("pointercancel",o),window.removeEventListener("touchend",o),window.removeEventListener("touchcancel",o)}function i(t){if(t.touches.length>1)return o();e(t.changedTouches[0].clientX,t.changedTouches[0].clientY),window.addEventListener("touchmove",r),window.addEventListener("touchend",o),window.addEventListener("touchcancel",o)}function c(t){e(t.clientX,t.clientY),window.addEventListener("pointermove",a),window.addEventListener("pointerup",o),window.addEventListener("pointercancel",o)}return t.addEventListener("touchstart",i),t.addEventListener("pointerdown",c),function(){o(),t.removeEventListener(c),t.removeEventListener(i)}}function V(){var t;t=c,j.style.right="".concat(100*(1-t),"%"),D.style.left="".concat(100*t,"%"),function(t){Y.style.left="".concat(100*t,"%"),D.style.right="".concat(100*(1-t),"%")}(l),W(!1)}function Z(){p&&(b=void 0,k.removeChild(p),p=void 0,function(){for(var t=w,e=Array.isArray(t),n=0,t=e?t:t[Symbol.iterator]();;){var r;if(e){if(n>=t.length)break;r=t[n++]}else{if((n=t.next()).done)break;r=n.value}var a=r;N.removeChild(a)}w=void 0}(),M.removeChild(x),x=void 0)}Q("left"),Q("right"),U(R,function(t){$=O.getBoundingClientRect(),tt=D.getBoundingClientRect(),rt=t-tt.x,et=$.x,nt=$.x+($.width-tt.width)},function(t){t-=rt,t=((t=Math.max(Math.min(t,nt),et))-$.x)/$.width,c=t,l=t+tt.width/$.width,V()}),function(){d={};for(var t=a.lines,e=Array.isArray(t),n=0,t=e?t:t[Symbol.iterator]();;){var r;if(e){if(n>=t.length)break;r=t[n++]}else{if((n=t.next()).done)break;r=n.value}var o=r;d[o.id]=!0}if(a.x.points.length>E){var i=a.x.points[0],s=a.x.points[a.x.points.length-1],u=a.x.points[a.x.points.length-E];c=(u-i)/(s-i)}else c=0;l=1,V(),W(!0),x=void 0;var h=document.querySelector(".chartogram__chart-togglers");F(h);for(var v=a.lines,m=Array.isArray(v),g=0,v=m?v:v[Symbol.iterator]();;){var f;if(m){if(g>=v.length)break;f=v[g++]}else{if((g=v.next()).done)break;f=g.value}var p=f;h.appendChild(K(p))}}(),function(){var t,e;function n(n){var r=(n-t.x)/t.width,o=u+r*(h-u),i=f.findIndex(function(t){return t>=o}),c=i-1;if(e(i)||(i=-1),e(c)||(c=-1),i<0){if(c<0)return Z();o=f[c]}else if(c<0)o=f[i];else{var l=f[c],A=f[i],E=o-l,L=A-o;o=E>L?A:l}if(o!==b){b=o,p||function(){(p=document.createElement("div")).classList.add("chartogram__tooltip"),k.appendChild(p),(_=document.createElement("h1")).classList.add("chartogram__tooltip-header"),p.appendChild(_),(y=document.createElement("dl")).classList.add("chartogram__tooltip-values"),p.appendChild(y);for(var t=a.lines,e=Array.isArray(t),n=0,t=e?t:t[Symbol.iterator]();;){var r;if(e){if(n>=t.length)break;r=t[n++]}else{if((n=t.next()).done)break;r=n.value}var o=r;if(d[o.id]){var i=document.createElement("dt");i.style.color=o.color,y.appendChild(i);var c=document.createElement("dd");c.style.color=o.color,y.appendChild(c)}}}();var T=new Date(1e3*o+g);_.textContent="".concat(C[T.getDay()],", ").concat(S[T.getMonth()]," ").concat(T.getDate());for(var q=f.indexOf(o),O=0;2*O<y.childNodes.length;)y.childNodes[2*O].textContent=s[O].points[q],y.childNodes[2*O+1].textContent=a.lines[O].name,O++;var j=(o-u)/(h-u);p.style.left="".concat(100*j,"%"),function(t,e){w||function(){w=[];for(var t=0;t<s.length;){var e=document.createElement("div");e.classList.add("chartogram__tooltip-point"),e.style.color=s[t].color,w.push(e),N.appendChild(e),t++}}();for(var n=0;n<w.length;){var r=w[n];r.style.left="".concat(100*e,"%");var a=s[n].points[t],o=a/m;r.style.bottom="".concat(100*o,"%"),n++}}(q,j),function(t){x||((x=document.createElementNS("http://www.w3.org/2000/svg","line")).setAttributeNS(null,"class","chartogram__tooltip-line"),M.appendChild(x)),x.setAttributeNS(null,"x1",t),x.setAttributeNS(null,"x2",t),x.setAttributeNS(null,"y1",v),x.setAttributeNS(null,"y2",m)}(o)}}function r(){t=M.getBoundingClientRect(),e=function(t){return!(t<0)&&f[t]>=u&&f[t]<=h}}function o(t){if(t.touches.length>1)return l();r(),M.addEventListener("touchend",l),M.addEventListener("touchmove",i),M.addEventListener("touchend",l),M.addEventListener("touchcancel",l),i(t)}function i(e){var r=e.changedTouches[0].clientX,a=e.changedTouches[0].clientY;r<t.x||r>t.x+t.width||a<t.y||a>t.y+t.height?l():n(r)}function c(t){n(t.clientX,t.clientY)}function l(){M.removeEventListener("pointermove",c),M.removeEventListener("pointerleave",l),M.removeEventListener("pointercancel",l),M.removeEventListener("touchmove",i),M.removeEventListener("touchend",l),M.removeEventListener("touchcancel",l),Z()}function A(){r(),M.addEventListener("pointermove",c),M.addEventListener("pointerleave",l),M.addEventListener("pointercancel",l)}M.addEventListener("touchstart",o),M.addEventListener("pointerenter",A)}();var $,tt,et,nt,rt}}); | ||
| //# sourceMappingURL=chartogram.js.map |
@@ -8,2 +8,10 @@ "use strict"; | ||
| function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); } | ||
| function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } | ||
| function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | ||
| function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | ||
| function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } | ||
@@ -29,2 +37,3 @@ | ||
| var TIMELINE_WINDOW_SIZE = options.timelineWindowSize || 40; | ||
| var TIMELINE_CHART_MAX_POINTS = options.timelineChartMaxPoints || 80; | ||
| var MONTHS = options.months || ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; | ||
@@ -128,12 +137,12 @@ var WEEKDAYS = options.weekdays || ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; | ||
| for (var _iterator = data.lines, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { | ||
| for (var _iterator = data.lines, _isArray = Array.isArray(_iterator), _i2 = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { | ||
| var _ref; | ||
| if (_isArray) { | ||
| if (_i >= _iterator.length) break; | ||
| _ref = _iterator[_i++]; | ||
| if (_i2 >= _iterator.length) break; | ||
| _ref = _iterator[_i2++]; | ||
| } else { | ||
| _i = _iterator.next(); | ||
| if (_i.done) break; | ||
| _ref = _i.value; | ||
| _i2 = _iterator.next(); | ||
| if (_i2.done) break; | ||
| _ref = _i2.value; | ||
| } | ||
@@ -164,12 +173,12 @@ | ||
| for (var _iterator2 = data.lines, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) { | ||
| for (var _iterator2 = data.lines, _isArray2 = Array.isArray(_iterator2), _i3 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) { | ||
| var _ref2; | ||
| if (_isArray2) { | ||
| if (_i2 >= _iterator2.length) break; | ||
| _ref2 = _iterator2[_i2++]; | ||
| if (_i3 >= _iterator2.length) break; | ||
| _ref2 = _iterator2[_i3++]; | ||
| } else { | ||
| _i2 = _iterator2.next(); | ||
| if (_i2.done) break; | ||
| _ref2 = _i2.value; | ||
| _i3 = _iterator2.next(); | ||
| if (_i3.done) break; | ||
| _ref2 = _i3.value; | ||
| } | ||
@@ -224,12 +233,12 @@ | ||
| for (var _iterator3 = data.lines, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) { | ||
| for (var _iterator3 = data.lines, _isArray3 = Array.isArray(_iterator3), _i4 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) { | ||
| var _ref3; | ||
| if (_isArray3) { | ||
| if (_i3 >= _iterator3.length) break; | ||
| _ref3 = _iterator3[_i3++]; | ||
| if (_i4 >= _iterator3.length) break; | ||
| _ref3 = _iterator3[_i4++]; | ||
| } else { | ||
| _i3 = _iterator3.next(); | ||
| if (_i3.done) break; | ||
| _ref3 = _i3.value; | ||
| _i4 = _iterator3.next(); | ||
| if (_i4.done) break; | ||
| _ref3 = _i4.value; | ||
| } | ||
@@ -263,12 +272,12 @@ | ||
| for (var _iterator4 = yAxisTickMarks, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) { | ||
| for (var _iterator4 = yAxisTickMarks, _isArray4 = Array.isArray(_iterator4), _i5 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) { | ||
| var _ref4; | ||
| if (_isArray4) { | ||
| if (_i4 >= _iterator4.length) break; | ||
| _ref4 = _iterator4[_i4++]; | ||
| if (_i5 >= _iterator4.length) break; | ||
| _ref4 = _iterator4[_i5++]; | ||
| } else { | ||
| _i4 = _iterator4.next(); | ||
| if (_i4.done) break; | ||
| _ref4 = _i4.value; | ||
| _i5 = _iterator4.next(); | ||
| if (_i5.done) break; | ||
| _ref4 = _i5.value; | ||
| } | ||
@@ -290,12 +299,12 @@ | ||
| for (var _iterator5 = timelineWindowGraphs, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) { | ||
| for (var _iterator5 = timelineWindowGraphs, _isArray5 = Array.isArray(_iterator5), _i6 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) { | ||
| var _ref5; | ||
| if (_isArray5) { | ||
| if (_i5 >= _iterator5.length) break; | ||
| _ref5 = _iterator5[_i5++]; | ||
| if (_i6 >= _iterator5.length) break; | ||
| _ref5 = _iterator5[_i6++]; | ||
| } else { | ||
| _i5 = _iterator5.next(); | ||
| if (_i5.done) break; | ||
| _ref5 = _i5.value; | ||
| _i6 = _iterator5.next(); | ||
| if (_i6.done) break; | ||
| _ref5 = _i6.value; | ||
| } | ||
@@ -376,2 +385,54 @@ | ||
| function simplifyGraph(x, y, maxPoints) { | ||
| var yMax = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : Math.max.apply(Math, _toConsumableArray(y)); | ||
| var threshold = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0.025; | ||
| var i = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0; | ||
| var _x = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : new Array(x.length); | ||
| var _y = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : new Array(x.length); | ||
| var _i = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 0; | ||
| if (i + 2 > x.length - 1) { | ||
| while (i < y.length) { | ||
| _x[_i] = x[i]; | ||
| _y[_i] = y[i]; | ||
| _i++; | ||
| i++; | ||
| } | ||
| _x = _x.slice(0, _i); | ||
| _y = _y.slice(0, _i); | ||
| if (_x.length <= maxPoints) { | ||
| return [_x, _y]; | ||
| } else { | ||
| if (x.length / _x.length < 1.1) { | ||
| threshold = Math.min(threshold + 0.025, 1); | ||
| } | ||
| return simplifyGraph(_x, _y, maxPoints, yMax, threshold); | ||
| } | ||
| } | ||
| var y0 = (y[i + 2] + y[i]) / 2; | ||
| if (Math.abs(y0 - y[i + 1]) / yMax < threshold) { | ||
| _x[_i] = x[i]; | ||
| _x[_i + 1] = x[i + 2]; | ||
| _y[_i] = y[i]; | ||
| _y[_i + 1] = y[i + 2]; | ||
| return simplifyGraph(x, y, maxPoints, yMax, threshold, i + 2, _x, _y, _i + 1); | ||
| } else { | ||
| _x[_i] = x[i]; | ||
| _x[_i + 1] = x[i + 1]; | ||
| _x[_i + 2] = x[i + 2]; | ||
| _y[_i] = y[i]; | ||
| _y[_i + 1] = y[i + 1]; | ||
| _y[_i + 2] = y[i + 2]; | ||
| return simplifyGraph(x, y, maxPoints, yMax, threshold, i + 2, _x, _y, _i + 2); | ||
| } | ||
| } | ||
| function drawTimeline(graphs, x, minX, maxX, minY, maxY) { | ||
@@ -382,12 +443,12 @@ clearElement(timelineCanvas); // Set canvas `viewBox`. | ||
| for (var _iterator6 = graphs, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) { | ||
| for (var _iterator6 = graphs, _isArray6 = Array.isArray(_iterator6), _i7 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) { | ||
| var _ref7; | ||
| if (_isArray6) { | ||
| if (_i6 >= _iterator6.length) break; | ||
| _ref7 = _iterator6[_i6++]; | ||
| if (_i7 >= _iterator6.length) break; | ||
| _ref7 = _iterator6[_i7++]; | ||
| } else { | ||
| _i6 = _iterator6.next(); | ||
| if (_i6.done) break; | ||
| _ref7 = _i6.value; | ||
| _i7 = _iterator6.next(); | ||
| if (_i7.done) break; | ||
| _ref7 = _i7.value; | ||
| } | ||
@@ -399,5 +460,11 @@ | ||
| points = _ref8.points; | ||
| var _simplifyGraph = simplifyGraph(x, points, TIMELINE_CHART_MAX_POINTS), | ||
| _simplifyGraph2 = _slicedToArray(_simplifyGraph, 2), | ||
| _x = _simplifyGraph2[0], | ||
| _y = _simplifyGraph2[1]; | ||
| var graph = document.createElement('polyline'); | ||
| graph.setAttribute('stroke', color); | ||
| graph.setAttribute('points', commaJoin(x, points.map(function (y) { | ||
| graph.setAttribute('points', commaJoin(_x, _y.map(function (y) { | ||
| return maxY - minY - y; | ||
@@ -483,12 +550,12 @@ })).join(' ')); | ||
| for (var _iterator7 = graphs, _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) { | ||
| for (var _iterator7 = graphs, _isArray7 = Array.isArray(_iterator7), _i8 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) { | ||
| var _ref10; | ||
| if (_isArray7) { | ||
| if (_i7 >= _iterator7.length) break; | ||
| _ref10 = _iterator7[_i7++]; | ||
| if (_i8 >= _iterator7.length) break; | ||
| _ref10 = _iterator7[_i8++]; | ||
| } else { | ||
| _i7 = _iterator7.next(); | ||
| if (_i7.done) break; | ||
| _ref10 = _i7.value; | ||
| _i8 = _iterator7.next(); | ||
| if (_i8.done) break; | ||
| _ref10 = _i8.value; | ||
| } | ||
@@ -785,12 +852,12 @@ | ||
| for (var _iterator8 = data.lines, _isArray8 = Array.isArray(_iterator8), _i8 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) { | ||
| for (var _iterator8 = data.lines, _isArray8 = Array.isArray(_iterator8), _i9 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) { | ||
| var _ref11; | ||
| if (_isArray8) { | ||
| if (_i8 >= _iterator8.length) break; | ||
| _ref11 = _iterator8[_i8++]; | ||
| if (_i9 >= _iterator8.length) break; | ||
| _ref11 = _iterator8[_i9++]; | ||
| } else { | ||
| _i8 = _iterator8.next(); | ||
| if (_i8.done) break; | ||
| _ref11 = _i8.value; | ||
| _i9 = _iterator8.next(); | ||
| if (_i9.done) break; | ||
| _ref11 = _i9.value; | ||
| } | ||
@@ -850,12 +917,12 @@ | ||
| function removeTooltipPoints() { | ||
| for (var _iterator9 = tooltipPoints, _isArray9 = Array.isArray(_iterator9), _i9 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) { | ||
| for (var _iterator9 = tooltipPoints, _isArray9 = Array.isArray(_iterator9), _i10 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) { | ||
| var _ref12; | ||
| if (_isArray9) { | ||
| if (_i9 >= _iterator9.length) break; | ||
| _ref12 = _iterator9[_i9++]; | ||
| if (_i10 >= _iterator9.length) break; | ||
| _ref12 = _iterator9[_i10++]; | ||
| } else { | ||
| _i9 = _iterator9.next(); | ||
| if (_i9.done) break; | ||
| _ref12 = _i9.value; | ||
| _i10 = _iterator9.next(); | ||
| if (_i10.done) break; | ||
| _ref12 = _i10.value; | ||
| } | ||
@@ -862,0 +929,0 @@ |
@@ -0,1 +1,9 @@ | ||
| function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); } | ||
| function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } | ||
| function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | ||
| function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | ||
| function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } | ||
@@ -21,2 +29,3 @@ | ||
| var TIMELINE_WINDOW_SIZE = options.timelineWindowSize || 40; | ||
| var TIMELINE_CHART_MAX_POINTS = options.timelineChartMaxPoints || 80; | ||
| var MONTHS = options.months || ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; | ||
@@ -120,12 +129,12 @@ var WEEKDAYS = options.weekdays || ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; | ||
| for (var _iterator = data.lines, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { | ||
| for (var _iterator = data.lines, _isArray = Array.isArray(_iterator), _i2 = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { | ||
| var _ref; | ||
| if (_isArray) { | ||
| if (_i >= _iterator.length) break; | ||
| _ref = _iterator[_i++]; | ||
| if (_i2 >= _iterator.length) break; | ||
| _ref = _iterator[_i2++]; | ||
| } else { | ||
| _i = _iterator.next(); | ||
| if (_i.done) break; | ||
| _ref = _i.value; | ||
| _i2 = _iterator.next(); | ||
| if (_i2.done) break; | ||
| _ref = _i2.value; | ||
| } | ||
@@ -156,12 +165,12 @@ | ||
| for (var _iterator2 = data.lines, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) { | ||
| for (var _iterator2 = data.lines, _isArray2 = Array.isArray(_iterator2), _i3 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) { | ||
| var _ref2; | ||
| if (_isArray2) { | ||
| if (_i2 >= _iterator2.length) break; | ||
| _ref2 = _iterator2[_i2++]; | ||
| if (_i3 >= _iterator2.length) break; | ||
| _ref2 = _iterator2[_i3++]; | ||
| } else { | ||
| _i2 = _iterator2.next(); | ||
| if (_i2.done) break; | ||
| _ref2 = _i2.value; | ||
| _i3 = _iterator2.next(); | ||
| if (_i3.done) break; | ||
| _ref2 = _i3.value; | ||
| } | ||
@@ -216,12 +225,12 @@ | ||
| for (var _iterator3 = data.lines, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) { | ||
| for (var _iterator3 = data.lines, _isArray3 = Array.isArray(_iterator3), _i4 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) { | ||
| var _ref3; | ||
| if (_isArray3) { | ||
| if (_i3 >= _iterator3.length) break; | ||
| _ref3 = _iterator3[_i3++]; | ||
| if (_i4 >= _iterator3.length) break; | ||
| _ref3 = _iterator3[_i4++]; | ||
| } else { | ||
| _i3 = _iterator3.next(); | ||
| if (_i3.done) break; | ||
| _ref3 = _i3.value; | ||
| _i4 = _iterator3.next(); | ||
| if (_i4.done) break; | ||
| _ref3 = _i4.value; | ||
| } | ||
@@ -255,12 +264,12 @@ | ||
| for (var _iterator4 = yAxisTickMarks, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) { | ||
| for (var _iterator4 = yAxisTickMarks, _isArray4 = Array.isArray(_iterator4), _i5 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) { | ||
| var _ref4; | ||
| if (_isArray4) { | ||
| if (_i4 >= _iterator4.length) break; | ||
| _ref4 = _iterator4[_i4++]; | ||
| if (_i5 >= _iterator4.length) break; | ||
| _ref4 = _iterator4[_i5++]; | ||
| } else { | ||
| _i4 = _iterator4.next(); | ||
| if (_i4.done) break; | ||
| _ref4 = _i4.value; | ||
| _i5 = _iterator4.next(); | ||
| if (_i5.done) break; | ||
| _ref4 = _i5.value; | ||
| } | ||
@@ -282,12 +291,12 @@ | ||
| for (var _iterator5 = timelineWindowGraphs, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) { | ||
| for (var _iterator5 = timelineWindowGraphs, _isArray5 = Array.isArray(_iterator5), _i6 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) { | ||
| var _ref5; | ||
| if (_isArray5) { | ||
| if (_i5 >= _iterator5.length) break; | ||
| _ref5 = _iterator5[_i5++]; | ||
| if (_i6 >= _iterator5.length) break; | ||
| _ref5 = _iterator5[_i6++]; | ||
| } else { | ||
| _i5 = _iterator5.next(); | ||
| if (_i5.done) break; | ||
| _ref5 = _i5.value; | ||
| _i6 = _iterator5.next(); | ||
| if (_i6.done) break; | ||
| _ref5 = _i6.value; | ||
| } | ||
@@ -368,2 +377,54 @@ | ||
| function simplifyGraph(x, y, maxPoints) { | ||
| var yMax = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : Math.max.apply(Math, _toConsumableArray(y)); | ||
| var threshold = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0.025; | ||
| var i = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0; | ||
| var _x = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : new Array(x.length); | ||
| var _y = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : new Array(x.length); | ||
| var _i = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 0; | ||
| if (i + 2 > x.length - 1) { | ||
| while (i < y.length) { | ||
| _x[_i] = x[i]; | ||
| _y[_i] = y[i]; | ||
| _i++; | ||
| i++; | ||
| } | ||
| _x = _x.slice(0, _i); | ||
| _y = _y.slice(0, _i); | ||
| if (_x.length <= maxPoints) { | ||
| return [_x, _y]; | ||
| } else { | ||
| if (x.length / _x.length < 1.1) { | ||
| threshold = Math.min(threshold + 0.025, 1); | ||
| } | ||
| return simplifyGraph(_x, _y, maxPoints, yMax, threshold); | ||
| } | ||
| } | ||
| var y0 = (y[i + 2] + y[i]) / 2; | ||
| if (Math.abs(y0 - y[i + 1]) / yMax < threshold) { | ||
| _x[_i] = x[i]; | ||
| _x[_i + 1] = x[i + 2]; | ||
| _y[_i] = y[i]; | ||
| _y[_i + 1] = y[i + 2]; | ||
| return simplifyGraph(x, y, maxPoints, yMax, threshold, i + 2, _x, _y, _i + 1); | ||
| } else { | ||
| _x[_i] = x[i]; | ||
| _x[_i + 1] = x[i + 1]; | ||
| _x[_i + 2] = x[i + 2]; | ||
| _y[_i] = y[i]; | ||
| _y[_i + 1] = y[i + 1]; | ||
| _y[_i + 2] = y[i + 2]; | ||
| return simplifyGraph(x, y, maxPoints, yMax, threshold, i + 2, _x, _y, _i + 2); | ||
| } | ||
| } | ||
| function drawTimeline(graphs, x, minX, maxX, minY, maxY) { | ||
@@ -374,12 +435,12 @@ clearElement(timelineCanvas); // Set canvas `viewBox`. | ||
| for (var _iterator6 = graphs, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) { | ||
| for (var _iterator6 = graphs, _isArray6 = Array.isArray(_iterator6), _i7 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) { | ||
| var _ref7; | ||
| if (_isArray6) { | ||
| if (_i6 >= _iterator6.length) break; | ||
| _ref7 = _iterator6[_i6++]; | ||
| if (_i7 >= _iterator6.length) break; | ||
| _ref7 = _iterator6[_i7++]; | ||
| } else { | ||
| _i6 = _iterator6.next(); | ||
| if (_i6.done) break; | ||
| _ref7 = _i6.value; | ||
| _i7 = _iterator6.next(); | ||
| if (_i7.done) break; | ||
| _ref7 = _i7.value; | ||
| } | ||
@@ -391,5 +452,11 @@ | ||
| points = _ref8.points; | ||
| var _simplifyGraph = simplifyGraph(x, points, TIMELINE_CHART_MAX_POINTS), | ||
| _simplifyGraph2 = _slicedToArray(_simplifyGraph, 2), | ||
| _x = _simplifyGraph2[0], | ||
| _y = _simplifyGraph2[1]; | ||
| var graph = document.createElement('polyline'); | ||
| graph.setAttribute('stroke', color); | ||
| graph.setAttribute('points', commaJoin(x, points.map(function (y) { | ||
| graph.setAttribute('points', commaJoin(_x, _y.map(function (y) { | ||
| return maxY - minY - y; | ||
@@ -475,12 +542,12 @@ })).join(' ')); | ||
| for (var _iterator7 = graphs, _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) { | ||
| for (var _iterator7 = graphs, _isArray7 = Array.isArray(_iterator7), _i8 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) { | ||
| var _ref10; | ||
| if (_isArray7) { | ||
| if (_i7 >= _iterator7.length) break; | ||
| _ref10 = _iterator7[_i7++]; | ||
| if (_i8 >= _iterator7.length) break; | ||
| _ref10 = _iterator7[_i8++]; | ||
| } else { | ||
| _i7 = _iterator7.next(); | ||
| if (_i7.done) break; | ||
| _ref10 = _i7.value; | ||
| _i8 = _iterator7.next(); | ||
| if (_i8.done) break; | ||
| _ref10 = _i8.value; | ||
| } | ||
@@ -777,12 +844,12 @@ | ||
| for (var _iterator8 = data.lines, _isArray8 = Array.isArray(_iterator8), _i8 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) { | ||
| for (var _iterator8 = data.lines, _isArray8 = Array.isArray(_iterator8), _i9 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) { | ||
| var _ref11; | ||
| if (_isArray8) { | ||
| if (_i8 >= _iterator8.length) break; | ||
| _ref11 = _iterator8[_i8++]; | ||
| if (_i9 >= _iterator8.length) break; | ||
| _ref11 = _iterator8[_i9++]; | ||
| } else { | ||
| _i8 = _iterator8.next(); | ||
| if (_i8.done) break; | ||
| _ref11 = _i8.value; | ||
| _i9 = _iterator8.next(); | ||
| if (_i9.done) break; | ||
| _ref11 = _i9.value; | ||
| } | ||
@@ -842,12 +909,12 @@ | ||
| function removeTooltipPoints() { | ||
| for (var _iterator9 = tooltipPoints, _isArray9 = Array.isArray(_iterator9), _i9 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) { | ||
| for (var _iterator9 = tooltipPoints, _isArray9 = Array.isArray(_iterator9), _i10 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) { | ||
| var _ref12; | ||
| if (_isArray9) { | ||
| if (_i9 >= _iterator9.length) break; | ||
| _ref12 = _iterator9[_i9++]; | ||
| if (_i10 >= _iterator9.length) break; | ||
| _ref12 = _iterator9[_i10++]; | ||
| } else { | ||
| _i9 = _iterator9.next(); | ||
| if (_i9.done) break; | ||
| _ref12 = _i9.value; | ||
| _i10 = _iterator9.next(); | ||
| if (_i10.done) break; | ||
| _ref12 = _i10.value; | ||
| } | ||
@@ -854,0 +921,0 @@ |
| { | ||
| "name": "chartogram", | ||
| "version": "0.1.0", | ||
| "version": "0.1.1", | ||
| "description": "Charts in JS with no dependencies", | ||
@@ -53,2 +53,2 @@ "main": "index.commonjs.js", | ||
| "homepage": "https://github.com/catamphetamine/chartogram#readme" | ||
| } | ||
| } |
@@ -9,2 +9,16 @@ # chartogram | ||
| ## Screenshots | ||
| ### Day | ||
| [View in full resolution](https://raw.githubusercontent.com/catamphetamine/chartogram/master/docs/day.png) | ||
| <img src="https://raw.githubusercontent.com/catamphetamine/chartogram/master/docs/day@512x984.png" width="256" height="492"/> | ||
| ### Night | ||
| [View in full resolution](https://raw.githubusercontent.com/catamphetamine/chartogram/master/docs/night.png) | ||
| <img src="https://raw.githubusercontent.com/catamphetamine/chartogram/master/docs/night@512x984.png" width="256" height="492"/> | ||
| ## Use | ||
@@ -11,0 +25,0 @@ |
@@ -38,2 +38,3 @@ export default function chartogram(rootNode, data, title = 'Title', options = {}) { | ||
| const TIMELINE_WINDOW_SIZE = options.timelineWindowSize || 40 | ||
| const TIMELINE_CHART_MAX_POINTS = options.timelineChartMaxPoints || 80 | ||
@@ -312,2 +313,39 @@ const MONTHS = options.months || [ | ||
| function simplifyGraph(x, y, maxPoints, yMax = Math.max(...y), threshold = 0.025, i = 0, _x = new Array(x.length), _y = new Array(x.length), _i = 0) { | ||
| if (i + 2 > x.length - 1) { | ||
| while (i < y.length) { | ||
| _x[_i] = x[i] | ||
| _y[_i] = y[i] | ||
| _i++ | ||
| i++ | ||
| } | ||
| _x = _x.slice(0, _i) | ||
| _y = _y.slice(0, _i) | ||
| if (_x.length <= maxPoints) { | ||
| return [_x, _y] | ||
| } else { | ||
| if (x.length / _x.length < 1.1) { | ||
| threshold = Math.min(threshold + 0.025, 1) | ||
| } | ||
| return simplifyGraph(_x, _y, maxPoints, yMax, threshold) | ||
| } | ||
| } | ||
| const y0 = (y[i + 2] + y[i]) / 2 | ||
| if (Math.abs(y0 - y[i + 1]) / yMax < threshold) { | ||
| _x[_i] = x[i] | ||
| _x[_i + 1] = x[i + 2] | ||
| _y[_i] = y[i] | ||
| _y[_i + 1] = y[i + 2] | ||
| return simplifyGraph(x, y, maxPoints, yMax, threshold, i + 2, _x, _y, _i + 1) | ||
| } else { | ||
| _x[_i] = x[i] | ||
| _x[_i + 1] = x[i + 1] | ||
| _x[_i + 2] = x[i + 2] | ||
| _y[_i] = y[i] | ||
| _y[_i + 1] = y[i + 1] | ||
| _y[_i + 2] = y[i + 2] | ||
| return simplifyGraph(x, y, maxPoints, yMax, threshold, i + 2, _x, _y, _i + 2) | ||
| } | ||
| } | ||
| function drawTimeline(graphs, x, minX, maxX, minY, maxY) { | ||
@@ -318,5 +356,6 @@ clearElement(timelineCanvas) | ||
| for (const { id, color, points } of graphs) { | ||
| const [_x, _y] = simplifyGraph(x, points, TIMELINE_CHART_MAX_POINTS) | ||
| const graph = document.createElement('polyline') | ||
| graph.setAttribute('stroke', color) | ||
| graph.setAttribute('points', commaJoin(x, points.map(y => (maxY - minY) - y)).join(' ')) | ||
| graph.setAttribute('points', commaJoin(_x, _y.map(y => (maxY - minY) - y)).join(' ')) | ||
| graph.classList.add('chartogram__graph') | ||
@@ -323,0 +362,0 @@ timelineCanvas.appendChild(graph) |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by189.81%
909786
- Number of package files
- increased by12.5%
18
- Lines of code
- increased by5.64%
2714
- Number of lines in readme file
- increased by13.46%
118
No dependency changes