chartogram - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

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,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],r=!0,a=!1,i=void 0;try{for(var o,c=t[Symbol.iterator]();!(r=(o=c.next()).done)&&(n.push(o.value),!e||n.length!==e);r=!0);}catch(t){a=!0,i=t}finally{try{r||null==c.return||c.return()}finally{if(a)throw i}}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 i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"Title",o=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(i,'</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,m,v,f,g,p,_,y,b,w,x=o.gaugeMarkTicksCount||6,A=o.timelineWindowSize||40,E=(o.timelineChartMaxPoints,o.months||["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]),L=o.weekdays||["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],S=document.querySelector(".chartogram__plan"),C=document.querySelector(".chartogram__canvas"),M=document.querySelector(".chartogram__canvas-wrapper"),k=document.querySelector(".chartogram__x"),z=document.querySelector(".chartogram__y"),N=document.querySelector(".chartogram__timeline"),T=document.querySelector(".chartogram__timeline-overlay-left"),q=document.querySelector(".chartogram__timeline-window__left-handle"),O=document.querySelector(".chartogram__timeline-window"),j=document.querySelector(".chartogram__timeline-window__drag"),B=document.querySelector(".chartogram__timeline-window__right-handle"),R=document.querySelector(".chartogram__timeline-overlay-right"),X=document.querySelector(".chartogram__timeline-canvas"),D=1;function I(t){for(;t.firstChild;)t.removeChild(t.firstChild)}function Y(t,e){return n=t.map(F),r=e.map(F),n.map(function(t,e){return"".concat(t,",").concat(r[e])});var n,r}function F(t){return Math.round(t*Number.MAX_SAFE_INTEGER)/Number.MAX_SAFE_INTEGER}function P(t,e,n,r){for(var a=0;a<x;){var i=document.createElement("div"),o=e+a*(n-e)/(x-1);r&&(o=r(o)),i.appendChild(document.createTextNode(o)),t.appendChild(i),a++}}function H(t){var e=t[0]===a.x,n=1/0,i=-1/0,o=t,c=Array.isArray(o),l=0;for(o=c?o:o[Symbol.iterator]();;){var d;if(c){if(l>=o.length)break;d=o[l++]}else{if((l=o.next()).done)break;d=l.value}var s=d;e?(s.min=s.points[0],s.max=s.points[s.points.length-1]):(s.min=0,s.max=Math.max.apply(Math,r(s.points))),n=Math.min(n,s.min),i=Math.max(i,s.max)}e||(n=0);var u=n,h=i-n,m=t,v=Array.isArray(m),f=0;for(m=v?m:m[Symbol.iterator]();;){var g;if(v){if(f>=m.length)break;g=m[f++]}else{if((f=m.next()).done)break;g=f.value}var p=g;p.normalized={points:p.points.map(function(t){return(t-u)/h}),shift:u,scale:h}}}function J(n){I(C);var i=a.x.points,o=i[0],g=i[i.length-1],p=g-o,_=o+c*p,y=g-(1-l)*p,b=i.findIndex(function(t){return t>_})-1;b<0&&(b=0);var w=i.findIndex(function(t){return t>y});w<0&&(w=i.length-1),f=a.x.normalized.points.slice(b,w+1);var A=-1/0;s=[];var L=a.lines,S=Array.isArray(L),M=0;for(L=S?L:L[Symbol.iterator]();;){var N;if(S){if(M>=L.length)break;N=L[M++]}else{if((M=L.next()).done)break;N=M.value}var T=N;if(d[T.id]){var q=T.points.slice(b,w+1),O=Math.max.apply(Math,r(q));s.push(e({},T,{points:q,min:0,max:O,normalized:e({},T.normalized,{points:T.normalized.points.slice(b,w+1)})})),A=Math.max.apply(Math,[A].concat(r(q)))}}var j=(_-a.x.normalized.shift)/a.x.normalized.scale,B=(y-a.x.normalized.shift)/a.x.normalized.scale,R=(0-a.lines[0].normalized.shift)/a.lines[0].normalized.scale,F=(A-a.lines[0].normalized.shift)/a.lines[0].normalized.scale;C.setAttribute("viewBox","".concat(j," ").concat(R," ").concat(B-j," ").concat(F-R));var H=function(t,e){for(;;){if(t<e)return e;if(t%e==0)return t;t--}}(A,10),J=(A-0)/(H-0),K=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),Q=Array.isArray(K),U=0;for(K=Q?K:K[Symbol.iterator]();;){var V;if(Q){if(U>=K.length)break;V=K[U++]}else{if((U=K.next()).done)break;V=U.value}var Z=V;C.appendChild(W((Z-a.lines[0].normalized.shift)/a.lines[0].normalized.scale,j,B,R,F))}var $=f.slice(),tt=$[0],et=$[$.length-1],nt=(j-tt)/($[1]-tt),rt=(et-B)/(et-$[$.length-2]);$[0]=j,$[$.length-1]=B;var at=s,it=Array.isArray(at),ot=0;for(at=it?at:at[Symbol.iterator]();;){var ct;if(it){if(ot>=at.length)break;ct=at[ot++]}else{if((ot=at.next()).done)break;ct=ot.value}var lt=ct,dt=(lt.id,lt.color),st=lt.normalized.points.slice(),ut=st[0],ht=st[st.length-1];st[0]=ut+(st[1]-ut)*nt,st[st.length-1]=ht-(ht-st[st.length-2])*rt;var mt=document.createElement("polyline");mt.setAttribute("stroke",dt),mt.setAttribute("points",Y($,st.map(function(t){return F-D*t})).join(" ")),mt.classList.add("chartogram__graph"),C.appendChild(mt)}C.innerHTML+="",function(t,e,n,r,a){I(k),I(z),P(k,t,e,function(t){var e=new Date(t);return"".concat(E[e.getMonth()]," ").concat(e.getDate())}),P(z,n,r),z.style.height="".concat(100/a,"%")}(_,y,0,H,J),m=R,v=F,u=j,h=B,n&&function(){var e=a.x.normalized.points,n=a.lines.filter(function(t){return d[t.id]}),i=(Math.min.apply(Math,r(n.map(function(t){return t.min})))-n[0].normalized.shift)/n[0].normalized.scale,o=(Math.max.apply(Math,r(n.map(function(t){return t.max})))-n[0].normalized.shift)/n[0].normalized.scale;I(X),X.setAttribute("viewBox","".concat(0," ").concat(i," ").concat(1," ").concat(o-i));for(var c=n,l=Array.isArray(c),s=0,c=l?c:c[Symbol.iterator]();;){var u;if(l){if(s>=c.length)break;u=c[s++]}else{if((s=c.next()).done)break;u=s.value}var h=u,m=(h.id,h.color),v=h.normalized.points,f=G(e,v,80),g=t(f,2),p=g[0],_=g[1],y=document.createElement("polyline");y.setAttribute("stroke",m),y.setAttribute("points",Y(p,_.map(function(t){return o-i-t})).join(" ")),y.classList.add("chartogram__graph"),X.appendChild(y)}X.innerHTML+=""}()}function W(t,e,n,r,a){var i=document.createElement("line");return i.classList.add("chartogram__grid-line"),i.setAttribute("x1",F(e)),i.setAttribute("x2",F(n)),i.setAttribute("y1",F(a-r-t)),i.setAttribute("y2",F(a-r-t)),i}function G(t,e,n){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:Math.max.apply(Math,r(e)),i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:.025,o=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(o+2>t.length-1){for(;o<e.length;)c[d]=t[o],l[d]=e[o],d++,o++;return c=c.slice(0,d),l=l.slice(0,d),c.length<=n?[c,l]:(t.length/c.length<1.1&&(i=Math.min(i+.025,1)),G(c,l,n,a,i))}var s=(e[o+2]+e[o])/2;return Math.abs(s-e[o+1])/a<i?(c[d]=t[o],c[d+1]=t[o+2],l[d]=e[o],l[d+1]=e[o+2],G(t,e,n,a,i,o+2,c,l,d+1)):(c[d]=t[o],c[d+1]=t[o+1],c[d+2]=t[o+2],l[d]=e[o],l[d+1]=e[o+1],l[d+2]=e[o+2],G(t,e,n,a,i,o+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 i="http://www.w3.org/2000/svg",o=document.createElementNS(i,"svg");o.setAttributeNS(null,"viewBox","0 0 19 19"),o.classList.add("chartogram__chart-toggler-check");var c=document.createElementNS(i,"circle");c.setAttribute("cx","9.5"),c.setAttribute("cy","9.5"),c.setAttribute("r","9.5"),c.setAttribute("fill",r),o.appendChild(c);var l=document.createElementNS(i,"circle");l.setAttribute("cx","9.5"),l.setAttribute("cy","9.5"),l.setAttribute("r","8"),l.classList.add("chartogram__chart-toggler-check-circle"),o.appendChild(l);var s=document.createElementNS(i,"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"),o.appendChild(s),a.appendChild(o),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,J(!0),a.classList.toggle("chartogram__chart-toggler--on"))}),a}function Q(t){var e,n,r,a,i="left"===t?q:B,o=parseFloat(getComputedStyle(O).borderLeftWidth);return U(i,function(i){e=N.getBoundingClientRect();var c=O.getBoundingClientRect();"left"===t?(n=e.x,r=c.x+c.width-2*o,a=i-c.x):(n=c.x+2*o,r=e.x+e.width,a=i-(c.x+c.width))},function(i){i-=a,i=((i=Math.max(Math.min(i,r),n))-e.x)/e.width,"left"===t?c=i:l=i,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 i(){window.removeEventListener("pointermove",a),window.removeEventListener("touchmove",r),window.removeEventListener("pointerup",i),window.removeEventListener("pointercancel",i),window.removeEventListener("touchend",i),window.removeEventListener("touchcancel",i)}function o(t){if(t.touches.length>1)return i();e(t.changedTouches[0].clientX,t.changedTouches[0].clientY),window.addEventListener("touchmove",r),window.addEventListener("touchend",i),window.addEventListener("touchcancel",i)}function c(t){e(t.clientX,t.clientY),window.addEventListener("pointermove",a),window.addEventListener("pointerup",i),window.addEventListener("pointercancel",i)}return t.addEventListener("touchstart",o),t.addEventListener("pointerdown",c),function(){i(),t.removeEventListener(c),t.removeEventListener(o)}}function V(){var t;t=c,T.style.right="".concat(100*(1-t),"%"),O.style.left="".concat(100*t,"%"),function(t){R.style.left="".concat(100*t,"%"),O.style.right="".concat(100*(1-t),"%")}(l),J(!1)}function Z(){g&&(y=void 0,S.removeChild(g),g=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;M.removeChild(a)}b=void 0}(),C.removeChild(w),w=void 0)}Q("left"),Q("right"),U(j,function(t){$=N.getBoundingClientRect(),tt=O.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()}),H([a.x]),H(a.lines),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 i=r;d[i.id]=!0}if(a.x.points.length>A){var o=a.x.points[0],s=a.x.points[a.x.points.length-1],u=a.x.points[a.x.points.length-A];c=(u-o)/(s-o)}else c=0;l=1,V(),J(!0),w=void 0;var h=document.querySelector(".chartogram__chart-togglers");I(h);for(var m=a.lines,v=Array.isArray(m),f=0,m=v?m:m[Symbol.iterator]();;){var g;if(v){if(f>=m.length)break;g=m[f++]}else{if((f=m.next()).done)break;g=f.value}var p=g;h.appendChild(K(p))}}(),function(){var t,e;function n(n){var r=(n-t.x)/t.width,i=u+r*(h-u),o=f.findIndex(function(t){return t>=i}),c=o-1;if(e(o)||(o=-1),e(c)||(c=-1),o<0){if(c<0)return Z();i=f[c]}else if(c<0)i=f[o];else{var l=f[c],x=f[o],A=i-l,k=x-i;i=A>k?x:l}if(i!==y){y=i,g||function(){(g=document.createElement("div")).classList.add("chartogram__tooltip"),S.appendChild(g),(p=document.createElement("h1")).classList.add("chartogram__tooltip-header"),g.appendChild(p),(_=document.createElement("dl")).classList.add("chartogram__tooltip-values"),g.appendChild(_);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 i=r;if(d[i.id]){var o=document.createElement("dt");o.style.color=i.color,_.appendChild(o);var c=document.createElement("dd");c.style.color=i.color,_.appendChild(c)}}}();var z=new Date(i*a.x.normalized.scale+a.x.normalized.shift);p.textContent="".concat(L[z.getDay()],", ").concat(E[z.getMonth()]," ").concat(z.getDate());for(var N=f.indexOf(i),T=0;2*T<_.childNodes.length;)_.childNodes[2*T].textContent=s[T].points[N],_.childNodes[2*T+1].textContent=a.lines[T].name,T++;var q=(i-u)/(h-u);g.style.left="".concat(100*q,"%"),function(t,e){b||function(){b=[];for(var t=0;t<s.length;){var e=document.createElement("div");e.classList.add("chartogram__tooltip-point"),e.style.color=s[t].color,b.push(e),M.appendChild(e),t++}}();for(var n=0;n<b.length;){var r=b[n];r.style.left="".concat(100*e,"%");var a=s[n].normalized.points[t],i=a/v;r.style.bottom="".concat(100*i,"%"),n++}}(N,q),function(t){w||((w=document.createElementNS("http://www.w3.org/2000/svg","line")).setAttributeNS(null,"class","chartogram__tooltip-line"),C.insertBefore(w,C.querySelector("polyline"))),w.setAttributeNS(null,"x1",F(t)),w.setAttributeNS(null,"x2",F(t)),w.setAttributeNS(null,"y1",F(m)),w.setAttributeNS(null,"y2",F(v))}(i)}}function r(){t=C.getBoundingClientRect(),e=function(t){return!(t<0)&&f[t]>=u&&f[t]<=h}}function i(t){if(t.touches.length>1)return l();r(),C.addEventListener("touchend",l),C.addEventListener("touchmove",o),C.addEventListener("touchend",l),C.addEventListener("touchcancel",l),o(t)}function o(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(){C.removeEventListener("pointermove",c),C.removeEventListener("pointerleave",l),C.removeEventListener("pointercancel",l),C.removeEventListener("touchmove",o),C.removeEventListener("touchend",l),C.removeEventListener("touchcancel",l),Z()}function x(){r(),C.addEventListener("pointermove",c),C.addEventListener("pointerleave",l),C.addEventListener("pointercancel",l)}C.addEventListener("touchstart",i),C.addEventListener("pointerenter",x)}();var $,tt,et,nt,rt}});
+!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,i=void 0;try{for(var o,c=t[Symbol.iterator]();!(r=(o=c.next()).done)&&(n.push(o.value),!e||n.length!==e);r=!0);}catch(t){a=!0,i=t}finally{try{r||null==c.return||c.return()}finally{if(a)throw i}}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 i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"Title",o=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(i,'</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,m,v,f,g,p,y,_,b,w,x=o.gaugeMarkTicksCount||6,A=o.timelineWindowSize||40,E=(o.timelineChartMaxPoints,o.months||["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]),L=o.weekdays||["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],S=document.querySelector(".chartogram__plan"),C=document.querySelector(".chartogram__canvas"),M=document.querySelector(".chartogram__canvas-wrapper"),k=document.querySelector(".chartogram__x"),z=document.querySelector(".chartogram__y"),N=document.querySelector(".chartogram__timeline"),T=document.querySelector(".chartogram__timeline-overlay-left"),q=document.querySelector(".chartogram__timeline-window__left-handle"),O=document.querySelector(".chartogram__timeline-window"),j=document.querySelector(".chartogram__timeline-window__drag"),B=document.querySelector(".chartogram__timeline-window__right-handle"),R=document.querySelector(".chartogram__timeline-overlay-right"),X=document.querySelector(".chartogram__timeline-canvas"),D=1;function I(t){for(;t.firstChild;)t.removeChild(t.firstChild)}function Y(t,e){return n=t.map(F),r=e.map(F),n.map(function(t,e){return"".concat(t,",").concat(r[e])});var n,r}function F(t){return Math.round(t*Number.MAX_SAFE_INTEGER)/Number.MAX_SAFE_INTEGER}function P(t,e,n,r){for(var a=0;a<x;){var i=document.createElement("div"),o=e+a*(n-e)/(x-1);r&&(o=r(o)),i.appendChild(document.createTextNode(o)),t.appendChild(i),a++}}function H(t){var e=t[0]===a.x,n=1/0,i=-1/0,o=t,c=Array.isArray(o),l=0;for(o=c?o:o[Symbol.iterator]();;){var d;if(c){if(l>=o.length)break;d=o[l++]}else{if((l=o.next()).done)break;d=l.value}var s=d;e?(s.min=s.points[0],s.max=s.points[s.points.length-1]):(s.min=0,s.max=Math.max.apply(Math,r(s.points))),n=Math.min(n,s.min),i=Math.max(i,s.max)}e||(n=0);var u=n,h=i-n,m=t,v=Array.isArray(m),f=0;for(m=v?m:m[Symbol.iterator]();;){var g;if(v){if(f>=m.length)break;g=m[f++]}else{if((f=m.next()).done)break;g=f.value}var p=g;p.normalized={points:p.points.map(function(t){return(t-u)/h}),shift:u,scale:h}}}function J(n){I(C);var i=a.x.points,o=i[0],g=i[i.length-1],p=g-o,y=o+c*p,_=g-(1-l)*p,b=i.findIndex(function(t){return t>y})-1;b<0&&(b=0);var w=i.findIndex(function(t){return t>_});w<0&&(w=i.length-1),f=a.x.normalized.points.slice(b,w+1);var A=-1/0;s=[];var L=a.y,S=Array.isArray(L),M=0;for(L=S?L:L[Symbol.iterator]();;){var N;if(S){if(M>=L.length)break;N=L[M++]}else{if((M=L.next()).done)break;N=M.value}var T=N;if(d[T.id]){var q=T.points.slice(b,w+1),O=Math.max.apply(Math,r(q));s.push(e({},T,{points:q,min:0,max:O,normalized:e({},T.normalized,{points:T.normalized.points.slice(b,w+1)})})),A=Math.max.apply(Math,[A].concat(r(q)))}}var j=(y-a.x.normalized.shift)/a.x.normalized.scale,B=(_-a.x.normalized.shift)/a.x.normalized.scale,R=(0-a.y[0].normalized.shift)/a.y[0].normalized.scale,F=(A-a.y[0].normalized.shift)/a.y[0].normalized.scale;C.setAttribute("viewBox","".concat(j," ").concat(R," ").concat(B-j," ").concat(F-R));var H=function(t,e){for(;;){if(t<e)return e;if(t%e==0)return t;t--}}(A,10),J=(A-0)/(H-0),K=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),Q=Array.isArray(K),U=0;for(K=Q?K:K[Symbol.iterator]();;){var V;if(Q){if(U>=K.length)break;V=K[U++]}else{if((U=K.next()).done)break;V=U.value}var Z=V;C.appendChild(W((Z-a.y[0].normalized.shift)/a.y[0].normalized.scale,j,B,R,F))}var $=f.slice(),tt=$[0],et=$[$.length-1],nt=(j-tt)/($[1]-tt),rt=(et-B)/(et-$[$.length-2]);$[0]=j,$[$.length-1]=B;var at=s,it=Array.isArray(at),ot=0;for(at=it?at:at[Symbol.iterator]();;){var ct;if(it){if(ot>=at.length)break;ct=at[ot++]}else{if((ot=at.next()).done)break;ct=ot.value}var lt=ct,dt=(lt.id,lt.color),st=lt.normalized.points.slice(),ut=st[0],ht=st[st.length-1];st[0]=ut+(st[1]-ut)*nt,st[st.length-1]=ht-(ht-st[st.length-2])*rt;var mt=document.createElement("polyline");mt.setAttribute("stroke",dt),mt.setAttribute("points",Y($,st.map(function(t){return F-D*t})).join(" ")),mt.classList.add("chartogram__graph"),C.appendChild(mt)}C.innerHTML+="",function(t,e,n,r,a){I(k),I(z),P(k,t,e,function(t){var e=new Date(t);return"".concat(E[e.getMonth()]," ").concat(e.getDate())}),P(z,n,r),z.style.height="".concat(100/a,"%")}(y,_,0,H,J),m=R,v=F,u=j,h=B,n&&function(){var e=a.x.normalized.points,n=a.y.filter(function(t){return d[t.id]}),i=(Math.min.apply(Math,r(n.map(function(t){return t.min})))-n[0].normalized.shift)/n[0].normalized.scale,o=(Math.max.apply(Math,r(n.map(function(t){return t.max})))-n[0].normalized.shift)/n[0].normalized.scale;I(X),X.setAttribute("viewBox","".concat(0," ").concat(i," ").concat(1," ").concat(o-i));for(var c=n,l=Array.isArray(c),s=0,c=l?c:c[Symbol.iterator]();;){var u;if(l){if(s>=c.length)break;u=c[s++]}else{if((s=c.next()).done)break;u=s.value}var h=u,m=(h.id,h.color),v=h.normalized.points,f=G(e,v,80),g=t(f,2),p=g[0],y=g[1],_=document.createElement("polyline");_.setAttribute("stroke",m),_.setAttribute("points",Y(p,y.map(function(t){return o-i-t})).join(" ")),_.classList.add("chartogram__graph"),X.appendChild(_)}X.innerHTML+=""}()}function W(t,e,n,r,a){var i=document.createElement("line");return i.classList.add("chartogram__grid-line"),i.setAttribute("x1",F(e)),i.setAttribute("x2",F(n)),i.setAttribute("y1",F(a-r-t)),i.setAttribute("y2",F(a-r-t)),i}function G(t,e,n){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:Math.max.apply(Math,r(e)),i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:.025,o=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(o+2>t.length-1){for(;o<e.length;)c[d]=t[o],l[d]=e[o],d++,o++;return c=c.slice(0,d),l=l.slice(0,d),c.length<=n?[c,l]:(t.length/c.length<1.1&&(i=Math.min(i+.025,1)),G(c,l,n,a,i))}var s=(e[o+2]+e[o])/2;return Math.abs(s-e[o+1])/a<i?(c[d]=t[o],c[d+1]=t[o+2],l[d]=e[o],l[d+1]=e[o+2],G(t,e,n,a,i,o+2,c,l,d+1)):(c[d]=t[o],c[d+1]=t[o+1],c[d+2]=t[o+2],l[d]=e[o],l[d+1]=e[o+1],l[d+2]=e[o+2],G(t,e,n,a,i,o+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 i="http://www.w3.org/2000/svg",o=document.createElementNS(i,"svg");o.setAttributeNS(null,"viewBox","0 0 19 19"),o.classList.add("chartogram__chart-toggler-check");var c=document.createElementNS(i,"circle");c.setAttribute("cx","9.5"),c.setAttribute("cy","9.5"),c.setAttribute("r","9.5"),c.setAttribute("fill",r),o.appendChild(c);var l=document.createElementNS(i,"circle");l.setAttribute("cx","9.5"),l.setAttribute("cy","9.5"),l.setAttribute("r","8"),l.classList.add("chartogram__chart-toggler-check-circle"),o.appendChild(l);var s=document.createElementNS(i,"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"),o.appendChild(s),a.appendChild(o),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,J(!0),a.classList.toggle("chartogram__chart-toggler--on"))}),a}function Q(t){var e,n,r,a,i="left"===t?q:B,o=parseFloat(getComputedStyle(O).borderLeftWidth);return U(i,function(i){e=N.getBoundingClientRect();var c=O.getBoundingClientRect();"left"===t?(n=e.x,r=c.x+c.width-2*o,a=i-c.x):(n=c.x+2*o,r=e.x+e.width,a=i-(c.x+c.width))},function(i){i-=a,i=((i=Math.max(Math.min(i,r),n))-e.x)/e.width,"left"===t?c=i:l=i,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 i(){window.removeEventListener("pointermove",a),window.removeEventListener("touchmove",r),window.removeEventListener("pointerup",i),window.removeEventListener("pointercancel",i),window.removeEventListener("touchend",i),window.removeEventListener("touchcancel",i)}function o(t){if(t.touches.length>1)return i();e(t.changedTouches[0].clientX,t.changedTouches[0].clientY),window.addEventListener("touchmove",r),window.addEventListener("touchend",i),window.addEventListener("touchcancel",i)}function c(t){e(t.clientX,t.clientY),window.addEventListener("pointermove",a),window.addEventListener("pointerup",i),window.addEventListener("pointercancel",i)}return t.addEventListener("touchstart",o),t.addEventListener("pointerdown",c),function(){i(),t.removeEventListener(c),t.removeEventListener(o)}}function V(){var t;t=c,T.style.right="".concat(100*(1-t),"%"),O.style.left="".concat(100*t,"%"),function(t){R.style.left="".concat(100*t,"%"),O.style.right="".concat(100*(1-t),"%")}(l),J(!1)}function Z(){g&&(_=void 0,S.removeChild(g),g=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;M.removeChild(a)}b=void 0}(),C.removeChild(w),w=void 0)}Q("left"),Q("right"),U(j,function(t){$=N.getBoundingClientRect(),tt=O.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()}),H([a.x]),H(a.y),function(){d={};for(var t=a.y,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 i=r;d[i.id]=!0}if(a.x.points.length>A){var o=a.x.points[0],s=a.x.points[a.x.points.length-1],u=a.x.points[a.x.points.length-A];c=(u-o)/(s-o)}else c=0;l=1,V(),J(!0),w=void 0;var h=document.querySelector(".chartogram__chart-togglers");I(h);for(var m=a.y,v=Array.isArray(m),f=0,m=v?m:m[Symbol.iterator]();;){var g;if(v){if(f>=m.length)break;g=m[f++]}else{if((f=m.next()).done)break;g=f.value}var p=g;h.appendChild(K(p))}}(),function(){var t,e;function n(n){var r=(n-t.x)/t.width,i=u+r*(h-u),o=f.findIndex(function(t){return t>=i}),c=o-1;if(e(o)||(o=-1),e(c)||(c=-1),o<0){if(c<0)return Z();i=f[c]}else if(c<0)i=f[o];else{var l=f[c],x=f[o],A=i-l,k=x-i;i=A>k?x:l}if(i!==_){_=i,g||function(){(g=document.createElement("div")).classList.add("chartogram__tooltip"),S.appendChild(g),(p=document.createElement("h1")).classList.add("chartogram__tooltip-header"),g.appendChild(p),(y=document.createElement("dl")).classList.add("chartogram__tooltip-values"),g.appendChild(y);for(var t=a.y,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 i=r;if(d[i.id]){var o=document.createElement("dt");o.style.color=i.color,y.appendChild(o);var c=document.createElement("dd");c.style.color=i.color,y.appendChild(c)}}}();var z=new Date(i*a.x.normalized.scale+a.x.normalized.shift);p.textContent="".concat(L[z.getDay()],", ").concat(E[z.getMonth()]," ").concat(z.getDate());for(var N=f.indexOf(i),T=0;2*T<y.childNodes.length;)y.childNodes[2*T].textContent=s[T].points[N],y.childNodes[2*T+1].textContent=a.y[T].name,T++;var q=(i-u)/(h-u);g.style.left="".concat(100*q,"%"),function(t,e){b||function(){b=[];for(var t=0;t<s.length;){var e=document.createElement("div");e.classList.add("chartogram__tooltip-point"),e.style.color=s[t].color,b.push(e),M.appendChild(e),t++}}();for(var n=0;n<b.length;){var r=b[n];r.style.left="".concat(100*e,"%");var a=s[n].normalized.points[t],i=a/v;r.style.bottom="".concat(100*i,"%"),n++}}(N,q),function(t){w||((w=document.createElementNS("http://www.w3.org/2000/svg","line")).setAttributeNS(null,"class","chartogram__tooltip-line"),C.insertBefore(w,C.querySelector("polyline"))),w.setAttributeNS(null,"x1",F(t)),w.setAttributeNS(null,"x2",F(t)),w.setAttributeNS(null,"y1",F(m)),w.setAttributeNS(null,"y2",F(v))}(i)}}function r(){t=C.getBoundingClientRect(),e=function(t){return!(t<0)&&f[t]>=u&&f[t]<=h}}function i(t){if(t.touches.length>1)return l();r(),C.addEventListener("touchend",l),C.addEventListener("touchmove",o),C.addEventListener("touchend",l),C.addEventListener("touchcancel",l),o(t)}function o(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(){C.removeEventListener("pointermove",c),C.removeEventListener("pointerleave",l),C.removeEventListener("pointercancel",l),C.removeEventListener("touchmove",o),C.removeEventListener("touchend",l),C.removeEventListener("touchcancel",l),Z()}function x(){r(),C.addEventListener("pointermove",c),C.addEventListener("pointerleave",l),C.addEventListener("pointercancel",l)}C.addEventListener("touchstart",i),C.addEventListener("pointerenter",x)}();var $,tt,et,nt,rt}});
 //# sourceMappingURL=chartogram.js.map

commonjs/index.js

@@ -146,3 +146,3 @@ "use strict";
     normalizePoints([data.x]);
-    normalizePoints(data.lines);
+    normalizePoints(data.y);
   }
@@ -217,3 +217,3 @@
 
-    for (var _iterator3 = data.lines, _isArray3 = Array.isArray(_iterator3), _i4 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
+    for (var _iterator3 = data.y, _isArray3 = Array.isArray(_iterator3), _i4 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
       var _ref3;
@@ -230,4 +230,4 @@
 
-      var line = _ref3;
-      showGraphs[line.id] = true;
+      var y = _ref3;
+      showGraphs[y.id] = true;
     }
@@ -254,3 +254,3 @@
 
-    for (var _iterator4 = data.lines, _isArray4 = Array.isArray(_iterator4), _i5 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
+    for (var _iterator4 = data.y, _isArray4 = Array.isArray(_iterator4), _i5 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
       var _ref4;
@@ -267,4 +267,4 @@
 
-      var _line = _ref4;
-      graphTogglers.appendChild(createGraphToggler(_line));
+      var _y2 = _ref4;
+      graphTogglers.appendChild(createGraphToggler(_y2));
     }
@@ -306,3 +306,3 @@ }
 
-    for (var _iterator5 = data.lines, _isArray5 = Array.isArray(_iterator5), _i6 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
+    for (var _iterator5 = data.y, _isArray5 = Array.isArray(_iterator5), _i6 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
       var _ref5;
@@ -319,9 +319,9 @@
 
-      var line = _ref5;
+      var y = _ref5;
 
-      if (!showGraphs[line.id]) {
+      if (!showGraphs[y.id]) {
         continue;
       }
 
-      var points = line.points.slice(minXIndex, maxXIndex + 1); // Min Y is always 0 by design.
+      var points = y.points.slice(minXIndex, maxXIndex + 1); // Min Y is always 0 by design.
 
@@ -331,8 +331,8 @@ var min = 0; // const min = Math.min(...points)
       var max = Math.max.apply(Math, _toConsumableArray(points));
-      timelineWindowGraphs.push(_objectSpread({}, line, {
+      timelineWindowGraphs.push(_objectSpread({}, y, {
         points: points,
         min: min,
         max: max,
-        normalized: _objectSpread({}, line.normalized, {
-          points: line.normalized.points.slice(minXIndex, maxXIndex + 1)
+        normalized: _objectSpread({}, y.normalized, {
+          points: y.normalized.points.slice(minXIndex, maxXIndex + 1)
         })
@@ -347,4 +347,4 @@ })); // minY = Math.min(minY, ...points)
     var maxXNormalized = (maxX - data.x.normalized.shift) / data.x.normalized.scale;
-    var minYNormalized = (minY - data.lines[0].normalized.shift) / data.lines[0].normalized.scale;
-    var maxYNormalized = (maxY - data.lines[0].normalized.shift) / data.lines[0].normalized.scale;
+    var minYNormalized = (minY - data.y[0].normalized.shift) / data.y[0].normalized.scale;
+    var maxYNormalized = (maxY - data.y[0].normalized.shift) / data.y[0].normalized.scale;
     canvas.setAttribute('viewBox', "".concat(minXNormalized, " ").concat(minYNormalized, " ").concat(maxXNormalized - minXNormalized, " ").concat(maxYNormalized - minYNormalized)); // Calculate grid lines' coordinates.
@@ -369,4 +369,4 @@
 
-      var y = _ref6;
-      canvas.appendChild(createGridLine((y - data.lines[0].normalized.shift) / data.lines[0].normalized.scale, minXNormalized, maxXNormalized, minYNormalized, maxYNormalized));
+      var _y3 = _ref6;
+      canvas.appendChild(createGridLine((_y3 - data.y[0].normalized.shift) / data.y[0].normalized.scale, minXNormalized, maxXNormalized, minYNormalized, maxYNormalized));
     } // Trim X axis.
@@ -524,3 +524,3 @@
     var x = data.x.normalized.points;
-    var graphs = data.lines.filter(function (_) {
+    var graphs = data.y.filter(function (_) {
       return showGraphs[_.id];
@@ -843,3 +843,3 @@ });
           tooltipValues.childNodes[2 * i].textContent = timelineWindowGraphs[i].points[xIndex];
-          tooltipValues.childNodes[2 * i + 1].textContent = data.lines[i].name;
+          tooltipValues.childNodes[2 * i + 1].textContent = data.y[i].name;
           i++;
@@ -940,3 +940,3 @@ }
 
-    for (var _iterator10 = data.lines, _isArray10 = Array.isArray(_iterator10), _i11 = 0, _iterator10 = _isArray10 ? _iterator10 : _iterator10[Symbol.iterator]();;) {
+    for (var _iterator10 = data.y, _isArray10 = Array.isArray(_iterator10), _i11 = 0, _iterator10 = _isArray10 ? _iterator10 : _iterator10[Symbol.iterator]();;) {
       var _ref13;
@@ -953,12 +953,12 @@
 
-      var line = _ref13;
+      var y = _ref13;
 
-      if (showGraphs[line.id]) {
+      if (showGraphs[y.id]) {
         // Add graph value.
         var tooltipValue = document.createElement('dt');
-        tooltipValue.style.color = line.color;
+        tooltipValue.style.color = y.color;
         tooltipValues.appendChild(tooltipValue); // Add graph name.
 
         var tooltipName = document.createElement('dd');
-        tooltipName.style.color = line.color;
+        tooltipName.style.color = y.color;
         tooltipValues.appendChild(tooltipName);
@@ -965,0 +965,0 @@ }

modules/index.js

@@ -139,3 +139,3 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
     normalizePoints([data.x]);
-    normalizePoints(data.lines);
+    normalizePoints(data.y);
   }
@@ -210,3 +210,3 @@
 
-    for (var _iterator3 = data.lines, _isArray3 = Array.isArray(_iterator3), _i4 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
+    for (var _iterator3 = data.y, _isArray3 = Array.isArray(_iterator3), _i4 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
       var _ref3;
@@ -223,4 +223,4 @@
 
-      var line = _ref3;
-      showGraphs[line.id] = true;
+      var y = _ref3;
+      showGraphs[y.id] = true;
     }
@@ -247,3 +247,3 @@
 
-    for (var _iterator4 = data.lines, _isArray4 = Array.isArray(_iterator4), _i5 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
+    for (var _iterator4 = data.y, _isArray4 = Array.isArray(_iterator4), _i5 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
       var _ref4;
@@ -260,4 +260,4 @@
 
-      var _line = _ref4;
-      graphTogglers.appendChild(createGraphToggler(_line));
+      var _y2 = _ref4;
+      graphTogglers.appendChild(createGraphToggler(_y2));
     }
@@ -299,3 +299,3 @@ }
 
-    for (var _iterator5 = data.lines, _isArray5 = Array.isArray(_iterator5), _i6 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
+    for (var _iterator5 = data.y, _isArray5 = Array.isArray(_iterator5), _i6 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
       var _ref5;
@@ -312,9 +312,9 @@
 
-      var line = _ref5;
+      var y = _ref5;
 
-      if (!showGraphs[line.id]) {
+      if (!showGraphs[y.id]) {
         continue;
       }
 
-      var points = line.points.slice(minXIndex, maxXIndex + 1); // Min Y is always 0 by design.
+      var points = y.points.slice(minXIndex, maxXIndex + 1); // Min Y is always 0 by design.
 
@@ -324,8 +324,8 @@ var min = 0; // const min = Math.min(...points)
       var max = Math.max.apply(Math, _toConsumableArray(points));
-      timelineWindowGraphs.push(_objectSpread({}, line, {
+      timelineWindowGraphs.push(_objectSpread({}, y, {
         points: points,
         min: min,
         max: max,
-        normalized: _objectSpread({}, line.normalized, {
-          points: line.normalized.points.slice(minXIndex, maxXIndex + 1)
+        normalized: _objectSpread({}, y.normalized, {
+          points: y.normalized.points.slice(minXIndex, maxXIndex + 1)
         })
@@ -340,4 +340,4 @@ })); // minY = Math.min(minY, ...points)
     var maxXNormalized = (maxX - data.x.normalized.shift) / data.x.normalized.scale;
-    var minYNormalized = (minY - data.lines[0].normalized.shift) / data.lines[0].normalized.scale;
-    var maxYNormalized = (maxY - data.lines[0].normalized.shift) / data.lines[0].normalized.scale;
+    var minYNormalized = (minY - data.y[0].normalized.shift) / data.y[0].normalized.scale;
+    var maxYNormalized = (maxY - data.y[0].normalized.shift) / data.y[0].normalized.scale;
     canvas.setAttribute('viewBox', "".concat(minXNormalized, " ").concat(minYNormalized, " ").concat(maxXNormalized - minXNormalized, " ").concat(maxYNormalized - minYNormalized)); // Calculate grid lines' coordinates.
@@ -362,4 +362,4 @@
 
-      var y = _ref6;
-      canvas.appendChild(createGridLine((y - data.lines[0].normalized.shift) / data.lines[0].normalized.scale, minXNormalized, maxXNormalized, minYNormalized, maxYNormalized));
+      var _y3 = _ref6;
+      canvas.appendChild(createGridLine((_y3 - data.y[0].normalized.shift) / data.y[0].normalized.scale, minXNormalized, maxXNormalized, minYNormalized, maxYNormalized));
     } // Trim X axis.
@@ -517,3 +517,3 @@
     var x = data.x.normalized.points;
-    var graphs = data.lines.filter(function (_) {
+    var graphs = data.y.filter(function (_) {
       return showGraphs[_.id];
@@ -836,3 +836,3 @@ });
           tooltipValues.childNodes[2 * i].textContent = timelineWindowGraphs[i].points[xIndex];
-          tooltipValues.childNodes[2 * i + 1].textContent = data.lines[i].name;
+          tooltipValues.childNodes[2 * i + 1].textContent = data.y[i].name;
           i++;
@@ -933,3 +933,3 @@ }
 
-    for (var _iterator10 = data.lines, _isArray10 = Array.isArray(_iterator10), _i11 = 0, _iterator10 = _isArray10 ? _iterator10 : _iterator10[Symbol.iterator]();;) {
+    for (var _iterator10 = data.y, _isArray10 = Array.isArray(_iterator10), _i11 = 0, _iterator10 = _isArray10 ? _iterator10 : _iterator10[Symbol.iterator]();;) {
       var _ref13;
@@ -946,12 +946,12 @@
 
-      var line = _ref13;
+      var y = _ref13;
 
-      if (showGraphs[line.id]) {
+      if (showGraphs[y.id]) {
         // Add graph value.
         var tooltipValue = document.createElement('dt');
-        tooltipValue.style.color = line.color;
+        tooltipValue.style.color = y.color;
         tooltipValues.appendChild(tooltipValue); // Add graph name.
 
         var tooltipName = document.createElement('dd');
-        tooltipName.style.color = line.color;
+        tooltipName.style.color = y.color;
         tooltipValues.appendChild(tooltipName);
@@ -958,0 +958,0 @@ }

package.json

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

README.md

@@ -25,5 +25,63 @@ # chartogram
 
+The default exported function takes three arguments:
+
+* The DOM element where the chart will be rendered.
+* Chart data.
+* Chart title.
+
+Chart data must have shape:
+
+```js
+{
+  x: {
+    points: Number[]
+  },
+  y: {
+    id: string,
+    name: string,
+    points: Number[]
+  }[]
+}
+```
+
+So there must be a single `x` and one or more `y`s.
+
+Example:
+
+```js
+{
+  x: {
+    points: [
+      1553769000,
+      1553770000,
+      1553771000
+    ]
+  },
+  y: [
+    {
+      id: 'y1',
+      name: 'Temperature',
+      points: [
+        60,
+        69,
+        65
+      ]
+    },
+    {
+      id: 'y2',
+      name: 'CPU load',
+      points: [
+        95,
+        98,
+        90
+      ]
+    }
+  ]
+}
+```
+
 ### Browser
 
 ```html
+<!DOCTYPE html>
 <html>
@@ -38,3 +96,3 @@ <head>
     <script>
-      chartogram(document.getElementById('chart'))
+      chartogram(document.getElementById('chart'), data, 'Title')
     </script>
@@ -55,2 +113,3 @@ </body>
 import React from 'react'
+import PropTypes from 'prop-types'
 import chartogram from 'chartogram'
@@ -60,6 +119,21 @@ import 'chartogram/style.css'
 class Chartogram extends React.Component {
+  static propTypes = {
+    data: PropTypes.shape({
+      x: PropTypes.shape({
+        points: PropTypes.arrayOf(PropTypes.number).isRequired
+      }).isRequired,
+      y: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        name: PropTypes.string.isRequired,
+        points: PropTypes.arrayOf(PropTypes.number).isRequired
+      })).isRequired
+    }).isRequired,
+    title: PropTypes.string.isRequired
+  }
+
   node = React.createRef()
 
   componentDidMount() {
-    chartogram(this.node.current)
+    const { data, title } = this.props
+    chartogram(this.node.current, data, title)
   }
@@ -66,0 +140,0 @@

source/index.js

@@ -167,3 +167,3 @@ export default function chartogram(rootNode, data, title = 'Title', options = {}) {
 		normalizePoints([data.x])
-		normalizePoints(data.lines)
+		normalizePoints(data.y)
 	}
@@ -205,4 +205,4 @@
 		showGraphs = {}
-		for (const line of data.lines) {
-			showGraphs[line.id] = true
+		for (const y of data.y) {
+			showGraphs[y.id] = true
 		}
@@ -225,4 +225,4 @@ showGraphsNext = undefined
 		clearElement(graphTogglers)
-		for (const line of data.lines) {
-			graphTogglers.appendChild(createGraphToggler(line))
+		for (const y of data.y) {
+			graphTogglers.appendChild(createGraphToggler(y))
 		}
@@ -255,7 +255,7 @@ }
 		timelineWindowGraphs = []
-		for (const line of data.lines) {
-			if (!showGraphs[line.id]) {
+		for (const y of data.y) {
+			if (!showGraphs[y.id]) {
 				continue
 			}
-			const points = line.points.slice(minXIndex, maxXIndex + 1)
+			const points = y.points.slice(minXIndex, maxXIndex + 1)
 			// Min Y is always 0 by design.
@@ -266,3 +266,3 @@ const min = 0
 			timelineWindowGraphs.push({
-				...line,
+				...y,
 				points,
@@ -272,4 +272,4 @@ min,
 				normalized: {
-					...line.normalized,
-					points: line.normalized.points.slice(minXIndex, maxXIndex + 1)
+					...y.normalized,
+					points: y.normalized.points.slice(minXIndex, maxXIndex + 1)
 				}
@@ -283,4 +283,4 @@ })
 		const maxXNormalized = (maxX - data.x.normalized.shift) / data.x.normalized.scale
-		const minYNormalized = (minY - data.lines[0].normalized.shift) / data.lines[0].normalized.scale
-		const maxYNormalized = (maxY - data.lines[0].normalized.shift) / data.lines[0].normalized.scale
+		const minYNormalized = (minY - data.y[0].normalized.shift) / data.y[0].normalized.scale
+		const maxYNormalized = (maxY - data.y[0].normalized.shift) / data.y[0].normalized.scale
 		canvas.setAttribute('viewBox', `${minXNormalized} ${minYNormalized} ${maxXNormalized - minXNormalized} ${maxYNormalized - minYNormalized}`)
@@ -295,3 +295,3 @@ // Calculate grid lines' coordinates.
 			canvas.appendChild(createGridLine(
-				(y - data.lines[0].normalized.shift) / data.lines[0].normalized.scale,
+				(y - data.y[0].normalized.shift) / data.y[0].normalized.scale,
 				minXNormalized,
@@ -424,3 +424,3 @@ maxXNormalized,
 		const x = data.x.normalized.points
-		const graphs = data.lines.filter(_ => showGraphs[_.id])
+		const graphs = data.y.filter(_ => showGraphs[_.id])
 		const minX = 0
@@ -672,3 +672,3 @@ const maxX = 1
 					tooltipValues.childNodes[2 * i].textContent = timelineWindowGraphs[i].points[xIndex]
-					tooltipValues.childNodes[2 * i + 1].textContent = data.lines[i].name
+					tooltipValues.childNodes[2 * i + 1].textContent = data.y[i].name
 					i++
@@ -761,11 +761,11 @@ }
 		// Add graph values.
-		for (const line of data.lines) {
-			if (showGraphs[line.id]) {
+		for (const y of data.y) {
+			if (showGraphs[y.id]) {
 				// Add graph value.
 				const tooltipValue = document.createElement('dt')
-				tooltipValue.style.color = line.color
+				tooltipValue.style.color = y.color
 				tooltipValues.appendChild(tooltipValue)
 				// Add graph name.
 				const tooltipName = document.createElement('dd')
-				tooltipName.style.color = line.color
+				tooltipName.style.color = y.color
 				tooltipValues.appendChild(tooltipName)
@@ -772,0 +772,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

936197

increased by0.07%

Number of lines in readme file

188

increased by64.91%

No dependency changes