oi.linechart.min.js

/**
	Open Innovations line charts in SVG - https://github.com/open-innovations/oi.linechart.js
  */
!function(t){var e=t.OI||{};function i(t,e){if(this.version="0.5.0",!t)return console.error("No element to attach to"),this;var i,h,c,d,u,p,f,g,y,b,k,m,x,v,w,L,P,M,A,S;e||(e={}),d=new function(t){var e=document.createElement("div");return e.classList.add("spinner"),e.setAttribute("style","position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0);"),n(e,t),this.loading=function(){return e.innerHTML="Loading...",this},this.loaded=function(){return e.innerHTML="",this},this.remove=function(){return e&&e.parentNode.removeChild(e),this},this.error=function(t){return e&&(console.error(t),e.innerHTML='<span class="error">ERROR: '+t+"</span>"),this},this}(t).loading(),this.el=t,A="linechart",c="http://www.w3.org/2000/svg",w="number"==typeof e.duration?e.duration:"0s",i=t.clientWidth,h=t.clientHeight;var C=getComputedStyle(t);h-=parseFloat(C.paddingTop)+parseFloat(C.paddingBottom),i-=parseFloat(C.paddingLeft)+parseFloat(C.paddingRight),f=[],S={},r(L={left:0,top:0,right:0,bottom:0,tick:5,"font-size":16,tooltip:{},key:{show:!1,border:{stroke:"black","stroke-width":1,fill:"none"},text:{"text-anchor":"start","dominant-baseline":"hanging","font-weight":"bold",fill:"black","stroke-width":0,"font-family":"sans-serif"}},axis:{x:{},y:{}}},e);var N=Math.round(1e8*Math.random());function F(t,e){M&&S.click&&S.click.trigger({i:e})}function E(){var t=o(u,"."+A+"-tooltip");return t&&t.parentNode.removeChild(t),S.hidetooltip&&S.hidetooltip.trigger(),!0}function T(t,e){return{x:t=L.left+(t-g)/(b-g)*(i-L.left-L.right),y:e=L.top+(1-(e-y)/(k-y))*(h-L.bottom-L.top)}}function H(t){return document.createElementNS(c,t)}function O(t,e,o){var c={line:{show:!0,stroke:"black","stroke-width":1,"stroke-linecap":"round","stroke-dasharray":""},grid:{show:!1,stroke:"black","stroke-width":1,"stroke-linecap":"round","stroke-dasharray":""},title:{},ticks:{show:!0},labels:{}};this.ticks={},this.line={},this.el=H("g"),a(this.el,[A+"-grid",A+"-grid-"+t]),this.title=H("text"),this.title.classList.add(A+"-grid-title"),n(this.title,this.el);var d=L["font-size"]||16;return n(this.el,u),this.setProperties=function(t){return r(c,t),this},this.getProperty=function(t){return c.hasOwnProperty(t)?c[t]:null},this.update=function(){var r,a,u,p,f,m,x,v,w,P,M,A;for(r in c.labels||(c.labels={}),this.title.innerHTML=c.title.label||"",a="x"==t?L.left+(i-L.right-L.left)/2:d/2,u="y"==t?L.top+(h-L.top-L.bottom)/2:h-d/2,s(this.title,{x:a,y:u,transform:"y"==t?"rotate(-90,"+a+","+u+")":""}),this.el.removeAttribute("style"),this.line.el||(this.line.el=H("path"),this.line.el.classList.add("line"),this.line.el.setAttribute("vector-effect","non-scaling-stroke"),n(this.line.el,this.el),this.line.animate=new z(this.line.el)),p=[{x:L.left-.5,y:h-L.bottom-.5},{x:"x"==t?i-L.right:L.left-.5,y:"x"==t?h-L.bottom-.5:L.top-.5}],this.line.animate.set({d:{from:"",to:p}}),s(this.line.el,{style:c.line.show?"display:block":"display:none",stroke:c.line.stroke,"stroke-width":c.line["stroke-width"],"stroke-dasharray":c.line["stroke-dasharray"]}),this.ticks)r&&!c.ticks.show&&(this.ticks[r].line&&this.ticks[r].line.parentNode.removeChild(this.ticks[r].line),this.ticks[r].text&&this.ticks[r].text.parentNode.removeChild(this.ticks[r].text),delete this.ticks[r]);for(r in c.labels)void 0!==r&&(void 0===c.labels[r]&&(c.labels[r]={label:""}),m=c.labels[r].align||("x"==t?"bottom":"left"),x=c.labels[r]["text-anchor"]||("y"==t?"left"==m?"end":"start":"middle"),P="x"==t?"bottom"==m?"hanging":"text-bottom":"middle",f="number"==typeof c.labels[r].ticksize?c.labels[r].ticksize:5,a="x"==t?parseFloat(r):"left"==m?g:b,u="x"==t?"bottom"==m?y:k:parseFloat(r),(e=T(a,u)).x=Math.round(e.x),o.x=Math.round(o.x),o=l(e),"x"==t?(c.grid.show&&a!=g&&(e.y="bottom"==m?L.top:h-L.bottom),o.y+="bottom"==m?f:-f):(c.grid.show&&u!=y&&(e.x="left"==m?i-L.right:L.left),o.x+="left"==m?-f:f),"x"==t&&(a<g||a>b)||"y"==t&&(u<y||u>k)?this.ticks[r]&&(this.ticks[r].line&&this.ticks[r].line.el.setAttribute("style","display:none"),this.ticks[r].text&&this.ticks[r].text.el.setAttribute("style","display:none")):(this.ticks[r]?(this.ticks[r].line&&this.ticks[r].line.el.removeAttribute("style"),this.ticks[r].text.el.removeAttribute("style")):(this.ticks[r]={text:{el:H("text")}},f>0&&(this.ticks[r].line={el:H("line")},this.ticks[r].line.animate=new z(this.ticks[r].line.el),n(this.ticks[r].line.el,this.el)),this.ticks[r].text.animate=new z(this.ticks[r].text.el),this.ticks[r].text.el.setAttribute("text-anchor",c["text-anchor"]||x),n(this.ticks[r].text.el,this.el)),this.ticks[r].line&&(this.ticks[r].line.animate.set({x1:{to:e.x-.5},x2:{to:o.x-.5},y1:{to:e.y-.5},y2:{to:o.y-.5}}),s(this.ticks[r].line.el,{stroke:c.grid.stroke,"stroke-width":c.grid["stroke-width"]})),this.ticks[r].text.el.innerHTML=c.labels[r].label||"",s(this.ticks[r].text.el,{stroke:c.labels[r].stroke||"black","stroke-width":c.labels[r]["stroke-width"]||0,fill:c.labels[r].fill||"black","dominant-baseline":P}),M="right"==c.labels[r].align?1:-1,A="top"==c.labels[r].align?-1:1,v=o.x+("y"==t?M*("number"==typeof c.labels[r].offset?c.labels[r].offset:4):0),w=o.y+("x"==t?A*("number"==typeof c.labels[r].offset?c.labels[r].offset:4):0),this.ticks[r].text.animate.set({x:{to:v},y:{to:w}})));n(this.line.el,this.el)},this}function R(e,i,h){var c,d,p,f,m,x;function v(e){var r=parseInt(e.target.getAttribute("data-i"));i[r]?function(e,i,r,l,s){var h,c,d,p,f;if(M)(c=o(M,"."+A+"-tooltip"))||(a(c=document.createElement("div"),[A+"-tooltip"]),n(c,M)),h=o(e,"title").innerHTML,l.label||(l.label=h),"function"==typeof s.label?h=s.label.call(e,{series:i,i:r,data:l}):"string"==typeof s.label&&(h=s.label),h=h.replace(/\n/g,"<br />"),c.innerHTML=h,d="","function"==typeof s.class?d=s.class.call(e,{series:i,i:r,data:l}):"string"==typeof s.class&&(d=s.class),d&&c.setAttribute("class",d),p=e.getBoundingClientRect(),f=u.getBoundingClientRect(),c.setAttribute("style","position:absolute;left:"+Math.round(p.left+p.width/2-f.left+t.scrollLeft)+"px;top:"+Math.round(p.top+p.height/2-f.top)+"px;transform:translate3d(-50%,-100%,0);display:"+(h?"block":"none")),n(M,u),S.showtooltip&&S.showtooltip.trigger({i:r})}(e.target,c,r,i[r],c.tooltip):console.error("Bad tooltip "+r,e)}return i||(i=[]),c={points:{show:!0,color:"black","stroke-linecap":"round",stroke:"black","stroke-width":0,"fill-opacity":1},line:{show:!0,color:"#000000","stroke-width":4,"stroke-linecap":"round","stroke-linejoin":"round","stroke-dasharray":"",fill:"none"},attr:h.attr||{}},d={},p="",f=[],x="",this.el=H("g"),(m={"clip-path":"url(#clip-"+N+")"})[A+"-series"]=e+1,s(this.el,m),a(this.el,[A+"-series",A+"-series-"+(e+1)]),this.select=function(){return d.el.classList.add("on"),this},this.selectItem=function(t){return t>=0&&f[t].el?v({target:f[t].el}):E(),this},this.deselect=function(){return d.el.classList.remove("on"),this},this.setData=function(t){return i=t||[],this},this.updateRange=function(){for(var t=0;t<i.length;t++)g=Math.min(g,i[t].x),y=Math.min(y,i[t].y),b=Math.max(b,i[t].x),k=Math.max(k,i[t].y);return this},this.getStyle=function(t,e){return c.hasOwnProperty(t)&&c[t].hasOwnProperty(e)?c[t][e]:null},this.getProperty=function(t){return c.hasOwnProperty(t)?c[t]:null},this.getProperties=function(){return c},this.setProperties=function(t){if(t||(t={}),r(c,t),c.class){var e=c.class.split(/ /);a(this.el,e)}return this},this.update=function(){var t,r,o,a,h,u,g,y;if(d.el||(d.el=H("path"),d.el.classList.add("line"),s(d.el,{d:"M0 0 L 100,100",stroke:c.line.color||"black"}),n(d.el,this.el),d.animate=new z(d.el),d.el.addEventListener("click",B)),s(d.el,{style:c.line.show?"display:block":"display:none",stroke:c.line.color||"black","stroke-width":this.getStyle("line","stroke-width"),"stroke-linecap":this.getStyle("line","stroke-linecap"),"stroke-linejoin":this.getStyle("line","stroke-linejoin"),"stroke-dasharray":this.getStyle("line","stroke-dasharray"),fill:this.getStyle("line","fill"),"vector-effect":"non-scaling-stroke"}),f.length>i.length)for(t=f.length-1;t>=i.length;t--)f[t].el.remove(),f.pop();if(f.length<i.length){for(r=f.length;r<i.length;r++)o=H("circle"),(y={cx:0,cy:0,"data-i":r,tabindex:0})[A+"-series"]=e+1,s(o,y),f[r]={el:o,title:H("title"),old:{}},i[r].label||(i[r].label="Point "+(r+1)),c.tooltip||(c.tooltip={}),a=i[r].label+": "+i[r].y.toFixed(2),"function"==typeof c.tooltip.label?a=c.tooltip.label.call(o,{series:c,i:r,data:i[r]}):"string"==typeof c.tooltip.label&&(a=c.tooltip.label),f[r].title.innerHTML=a,n(f[r].title,o),c.tooltip.label&&(o.addEventListener("mouseover",function(t){t.target.focus()}),o.addEventListener("focus",v)),o.addEventListener("click",function(t){var e=parseInt(t.target.getAttribute("data-i"));i[e]?F(t.target,e):console.error("Bad click "+e,t)}),n(o,this.el),f[r].c=new z(f[r].el);if(c.line.label){(x=H("text")).innerHTML=c.title;var b=T(i[f.length-1].x,i[f.length-1].y);b["dominant-baseline"]="middle",b.fill=c.line.color||"black",c.line.label.padding&&(b.x+=c.line.label.padding),s(x,b),n(x,this.el)}}h=[];var k={};for(r=0;r<f.length;r++)u=(c["stroke-width"]||1)/2,c.points&&("number"==typeof c.points.size&&(u=Math.max(c.points.size,u)),"function"==typeof c.points.size&&(u=c.points.size.call(o,{series:e,i:r,data:i[r]}))),s(f[r].el,{r:u,fill:c.points.color,"fill-opacity":c.points["fill-opacity"],stroke:c.points.stroke,"stroke-width":c.points["stroke-width"]}),g=T(i[r].x,i[r].y),h.push(g),"number"==typeof f[r].old.x&&"number"==typeof f[r].old.y?k=l(f[r].old):"number"==typeof k.x&&"number"==typeof k.y&&(f[r].old=k),f[r].c.set({cx:{from:f[r].old.x||null,to:g.x},cy:{from:f[r].old.y||null,to:g.y}}),f[r].old=g;return d.animate.set({d:{from:p,to:h}}),p=l(h),this},this.remove=function(){d.el.parentNode&&d.el.parentNode.removeChild(d.el);for(var t=0;t<f.length;t++)f[t].el.parentNode&&f[t].el.parentNode.removeChild(f[t].el)},this.setData(i),this.setProperties(h),n(this.el,u),this}function z(e,i){var r,o,a;return r=window.getComputedStyle(t),o=e.tagName.toLowerCase(),i||(i={}),a={},r["animation-duration"]&&(this.duration=r["animation-duration"]),i.duration&&(this.duration=i.duration),this.duration||(this.duration=w),this.duration=parseFloat(this.duration),this.set=function(t){var i,r,h,c,d,u;for(i in e.querySelectorAll("animate").forEach(function(t){t.parentNode.removeChild(t)}),t)if(i){if(d=t[i].from||"",u=t[i].to,!d&&a[i]&&(d=a[i].value),h=null,c=null,"path"==o){for(h="",c="",r=0;r<d.length;r++)h+=(r>0?"L":"M")+d[r].x.toFixed(2)+","+d[r].y.toFixed(2);for(r=0;r<u.length;r++)c+=(r>0?"L":"M")+u[r].x.toFixed(2)+","+u[r].y.toFixed(2);if(d.length>0&&d.length<u.length)for(r=0;r<u.length-d.length;r++)h+="L"+d[d.length-1].x.toFixed(2)+","+d[d.length-1].y.toFixed(2);if(u.length>0&&u.length<d.length)for(r=0;r<d.length-u.length;r++)c+="L"+u[u.length-1].x.toFixed(2)+","+u[u.length-1].y.toFixed(2);h||(h=null)}else d&&(h=l(d)),c=l(u);this.duration&&null!==h&&(a[i]||(a[i]={}),a[i].el=H("animate"),s(a[i].el,{attributeName:i,dur:this.duration||0,repeatCount:"1"}),n(a[i].el,e)),e.setAttribute(i,c),this.duration&&null!==h&&(s(a[i].el,{from:h,to:c,values:h+";"+c}),a[i].el.beginElement(),a[i].value=u)}return this},this}function j(){g=1e100,y=1e100,b=-1e100,k=-1e100;for(var t=0;t<f.length;t++)f[t].updateRange();"number"==typeof P.x.getProperty("min")&&(g=P.x.getProperty("min")),"number"==typeof P.x.getProperty("max")&&(b=P.x.getProperty("max")),"number"==typeof P.y.getProperty("min")&&(y=P.y.getProperty("min")),"number"==typeof P.y.getProperty("max")&&(k=P.y.getProperty("max"))}function B(t){for(var e=parseInt(t.currentTarget.closest("g").getAttribute(A+"-series")),i=0;i<f.length;i++)e==i?f[i].select():f[i].deselect();n(f[e].el,f[e].el.closest("svg")),v&&n(v.el,v.el.closest("svg")),o(t.target.closest("g"),"circle").focus(),n(M,u)}return u||(s(u=H("svg"),{xmlns:c,version:"1.1",width:i,height:h,viewBox:"0 0 "+i+" "+h,overflow:"visible",style:"max-width:100%;",preserveAspectRatio:"none"}),n(m=H("defs"),u),n(u,t),t.addEventListener("mouseleave",function(t){E()}),s(M=H("foreignObject"),{width:1,height:1,overflow:"visible"}),n(M,u),s(x=H("clipPath"),{id:"clip-"+N}),n(x,u),s(p=H("rect"),{x:0,y:0,width:i,height:h}),n(p,x)),(P={x:new O("x",L.left,i-L.right-L.left),y:new O("y",L.bottom,h-L.top-L.bottom)}).x.setProperties(L.axis.x||{}),P.y.setProperties(L.axis.y||{}),this.on=function(t,e,i){return"function"==typeof e&&(i=l(e),e={}),S[t]=new function(t,e){"function"==typeof t&&(e=t,t={});this.trigger=function(i){var o=t;r(o,i),e.call(o.this||this,o)}}(e,i),this},this.off=function(t){return delete S[t],this},this.getSVG=function(){return u.querySelectorAll("animate").forEach(function(t){t.parentNode.removeChild(t)}),u.outerHTML},this.setProperties=function(t){return r(L,t||{}),P.x.setProperties(L.axis.x||{}),P.y.setProperties(L.axis.y||{}),this},this.addSeries=function(t,e){return t?(e||(e={}),f.push(new R(f.length,t,e)),j(),this.series=f,this):(d.error("No data in series"),this)},this.clear=function(){for(var t=0;t<f.length;t++)f[t].remove();return f=[],this.series=[],this.draw()},this.draw=function(){var t,e,r,l,c,d,p,g,y,b,k,x,M,S,C;for(E(),j(),P.x.update(),P.y.update(),t="<style>",t+="\t."+A+"-series circle { transition: transform "+w+" linear, r "+w+" linear; }\n",t+="\t."+A+"-series circle:focus { stroke-width: 4; }\n",t+="\t."+A+"-series:hover path.line, ."+A+"-series.on path.line { cursor:pointer; }\n",e=0;e<f.length;e++)f[e].update(),t+="\t."+A+"-series-"+(e+1)+":hover path.line, ."+A+"-series-"+(e+1)+".on path.line { stroke-width: "+(f[e].getProperty("stroke-width-hover")||4)+"; }\n";if(L.key.show){if(r=L["font-size"]||16,l=L.key.padding||5,c=(L.key.label?1:0)*r+2*l+f.length*r,p=0,g=0,!v){if((v={el:H("g"),g:[],border:H("rect")}).el.classList.add("key"),s(v.border,{x:0,y:L.top,width:i,height:c}),"object"==typeof L.key.border)for(M in L.key.border)v.border.setAttribute(M,L.key.border[M]);n(v.border,v.el),n(v.el,u)}for(d=0,y=0;y<f.length;y++)v.g[y]||(v.g[y]=H("g"),v.g[y].setAttribute(A+"-series",y),S=[A+"-series",A+"-series-"+(y+1)],f[y].getProperty("class")&&S.concat(f[y].getProperty("class").split(/ /)),a(v.g[y],S),n(v.g[y],v.el),v.g[y].addEventListener("mouseover",B)),v.g[y].innerHTML='<text><tspan dx="'+2*r+'" dy="0">'+(f[y].getProperty("title")||"Series "+(y+1))+'</tspan></text><path d="M0 0 L 1 0" class="line" class="" stroke-width="3" stroke-linecap="round"></path><circle cx="0" cy="0" r="5" fill="silver"></circle>',s(v.g[y].querySelector("tspan"),f[y].getProperty("attr")),d=Math.max(d,v.g[y].getBoundingClientRect().width);for(L.key.position||(L.key.position="top right"),C=L.key.position.split(/ /),p=g=0,t=0;t<C.length;t++)"left"==C[t]?p=L.left+l:"right"==C[t]?p=i-L.right-d-l:"top"==C[t]?g=L.top+l:"bottom"==C[t]&&(g=h-L.bottom-l-c);for(s(v.border,{x:p,width:d+l,y:g}),g+=l,p+=l,y=0;y<f.length;y++){if(b=o(v.g[y],"text"),k=o(v.g[y],"path"),x=o(v.g[y],"circle"),b.setAttribute("x",p),b.setAttribute("y",g+y*r+.2*r),"object"==typeof L.key.text)for(M in L.key.text)b.setAttribute(M,L.key.text[M]);k.setAttribute("d","M"+p+","+(g+(.5+y)*r)+" l "+1.5*r+" 0"),s(x,{cx:p+.75*r,cy:g+(.5+y)*r,fill:(M=f[y].getProperties()).points.color||"","stroke-width":M.points["stroke-width"]||0,stroke:M.points.stroke||""}),M.line.color&&k.setAttribute("stroke",M.line.color)}}return t+="\t."+A+"-grid."+A+"-grid-x ."+A+"-grid-title,."+A+"-grid."+A+"-grid-y ."+A+"-grid-title { text-anchor: middle; dominant-baseline: central; }\n",t+="\t."+A+"-grid."+A+"-grid-y text { dominant-baseline: "+((L.axis.y.labels?L.axis.y.labels.baseline:"")||"middle")+"; }\n",t+="\t."+A+"-tooltip { background: black; color: white; padding: 0.25em 0.5em; margin-top: -1em; transition: left 0.1s linear, top 0.1s linear; border-radius: 4px; white-space: nowrap; }\n",t+="\t."+A+'-tooltip::after { content: ""; position: absolute; bottom: auto; width: 0; height: 0; border: 0.5em solid transparent; left: 50%; top: 100%; transform: translate3d(-50%,0,0); border-color: transparent; border-top-color: black; }\n',t+="\t</style>\n",m&&(m.innerHTML=t),this},d.remove(),this}function r(t,e){for(var i in e)try{e[i].constructor==Object?t[i]=r(t[i],e[i]):t[i]=e[i]}catch(r){t[i]=e[i]}return t}function o(t,e){return t.querySelector(e)}function n(t,e){return e.appendChild(t)}function l(t){return JSON.parse(JSON.stringify(t))}function s(t,e){for(var i in e)t.setAttribute(i,e[i]);return t}function a(t,e){for(var i=0;i<e.length;i++)t.classList.add(e[i]);return t}e.ready||(e.ready=function(t){"loading"!=document.readyState?t():document.addEventListener("DOMContentLoaded",t)}),e.linechart=function(t,e){return new i(t,e)},t.OI=e}(window||this);