30 lines
12 KiB
JavaScript
30 lines
12 KiB
JavaScript
function Timeline(f){this.ns="http://www.w3.org/2000/svg";this.xlinkns="http://www.w3.org/1999/xlink";this.marginBottom=10;this.marginTop=15;this.marginRight=this.marginLeft=10;this.x_axis=this.rounded=!1;this.fill=!0;this.line="line";this.dashed_style="5, 5";this.axis=this.g=this.holder=this.parent_holder=!1;this.graphs=[];this.raw_points=[];this.x_callback=!1;var e=window.onresize||function(){},g=this;window.onresize=function(){e();g.resize(g.parent_holder.offsetWidth,g.parent_holder.offsetHeight)};
|
|
document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||alert("ERROR : Your browser does not support embedded SVG.");this.parent_holder=document.getElementById(f.id);this.parent_holder.style.width=f.width;this.parent_holder.style.height=f.height;var a=this.createElement("svg:svg",{width:"100%",height:"100%"});a.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink",this.xlinkns);this.parent_holder.appendChild(a);this.holder=this.parent_holder.querySelector("svg");
|
|
defs=this.createElement("defs",{});this.holder.appendChild(defs);if("small"===f.grid||"both"===f.grid){var a=this.createElement("pattern",{id:"smallGrid",width:8,height:8,patternUnits:"userSpaceOnUse"}),c=this.createElement("path",{d:"M 8 0 L 0 0 0 8",fill:"none",stroke:"gray","stroke-width":"0.5"});a.appendChild(c);defs.appendChild(a)}if("big"===f.grid||"both"===f.grid)a=this.createElement("pattern",{id:"grid",width:80,height:80,patternUnits:"userSpaceOnUse"}),"both"===f.grid&&(c=this.createElement("rect",
|
|
{width:80,height:80,fill:"url(#smallGrid)"}),a.appendChild(c)),c=this.createElement("path",{d:"M 80 0 L 0 0 0 80",fill:"none",stroke:"gray","stroke-width":"1"}),a.appendChild(c),defs.appendChild(a);this.grid=f.grid;a=this.createElement("marker",{id:"markerArrow",markerWidth:13,markerHeight:13,refX:2,refY:6,orient:"auto"});c=this.createElement("path",{d:"M2,2 L2,11 L10,6 L2,2",fill:"gray"});a.appendChild(c);defs.appendChild(a);this.g=this.createElement("g",{transform:"translate(0, "+this.parent_holder.offsetHeight+
|
|
") scale(1, -1)"});this.holder.appendChild(this.g);!0===f.x_axis&&(this.axis=this.createElement("line",{x1:this.marginLeft,y1:this.parent_holder.offsetHeight/2+1.5,x2:this.parent_holder.offsetWidth-13-this.marginRight,y2:this.parent_holder.offsetHeight/2+1.5,stroke:"gray","stroke-width":3,"marker-end":'url("#markerArrow")'}),this.g.appendChild(this.axis));"none"!==this.grid&&(a=this.createElement("rect",{width:"100%",height:"100%"}),"big"===this.grid||"both"===this.grid?a.setAttribute("fill","url(#grid)"):
|
|
a.setAttribute("fill","url(#smallGrid)"),this.g.appendChild(a));this.rounded=f.rounded;this.x_axis=f.x_axis;this.line=f.line;this.fill=f.fill;this.x_callback=f.x_callback}
|
|
Timeline.prototype.resize=function(f,e){!1!==this.g&&(this.g.setAttribute("transform","translate(0, "+e+") scale(1, -1)"),!0===this.x_axis&&this.axis.setAttribute("x2",f-this.marginLeft-3-this.marginRight),[].forEach.call(this.holder.querySelectorAll(".label, .over, .point, .line, .graph, .legend_x"),function(e){e.parentNode.removeChild(e)}),this.draw())};Timeline.prototype.createElement=function(f,e){var g=document.createElementNS(this.ns,f);for(attr in e)g.setAttribute(attr,e[attr]);return g};
|
|
Timeline.prototype.hasClass=function(f,e){return-1<(" "+f.getAttribute("class")+" ").indexOf(" "+e+" ")};Timeline.prototype.addGraph=function(f,e){this.graphs[f]=e};Timeline.prototype.hasGraph=function(f){return"undefined"===typeof this.graphs[f]?!1:!0};Timeline.prototype.clearGraph=function(f){if("undefined"===typeof f)this.raw_points=[],this.graphs=[];else for(var e=0;e<this.raw_points.length;e++)this.raw_points[e].graph===f&&(this.raw_points[e]=void 0)};
|
|
Timeline.prototype.addPoints=function(f,e){for(var g=0;g<e.length;g++){var a={graph:f,x:e[g].x,y:e[g].y};a.label="undefined"!==typeof e[g].label?e[g].label:"";a.click="undefined"!==typeof e[g].click?e[g].click:!1;this.raw_points.push(a)}this.raw_points.sort(function(a,e){return a.x<e.x?-1:a.x==e.x?0:1})};Timeline.prototype.newCoordinate=function(f,e,g,a,c){return(c-a)/(g-e)*(f-e)+a};
|
|
Timeline.prototype.getNewXY=function(f,e,g,a){var c=this;return function(k,b){return{x:c.newCoordinate(k,f,e,c.marginLeft,c.parent_holder.offsetWidth-c.marginRight),y:c.newCoordinate(b,g,a,2*c.marginBottom,c.parent_holder.offsetHeight-c.marginTop)}}};
|
|
Timeline.prototype.getControlPoints=function(f){var e=[],g=[],a=f.length-1,c=[],k=[],b=[],l=[];c[0]=0;k[0]=2;b[0]=1;l[0]=f[0]+2*f[1];for(var d=1;d<a-1;d++)c[d]=1,k[d]=4,b[d]=1,l[d]=4*f[d]+2*f[d+1];c[a-1]=2;k[a-1]=7;b[a-1]=0;l[a-1]=8*f[a-1]+f[a];for(var h,d=1;d<a;d++)h=c[d]/k[d-1],k[d]-=h*b[d-1],l[d]-=h*l[d-1];e[a-1]=l[a-1]/k[a-1];for(d=a-2;0<=d;--d)e[d]=(l[d]-b[d]*e[d+1])/k[d];for(d=0;d<a-1;d++)g[d]=2*f[d+1]-e[d+1];g[a-1]=0.5*(f[a]+e[a-1]);return{p1:e,p2:g}};
|
|
Timeline.prototype.scale=function(f){var e=!0;for(graph in f){e=!1;break}if(e)return!1;for(var e=!1,g=0,a=!1,c=!1,k=0;k<f.length;k++){if(f[k].x<e||!1===e)e=f[k].x;if(f[k].x>a||!1===a)a=f[k].x;f[k].y<g&&(g=f[k].y);if(f[k].y>c||!1===c)c=f[k].y}f=this.getNewXY(e,a,g,c);var b=f(Math.pow(10,Math.floor(Math.log(a-e)/Math.log(10))),Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10)))),l=f(0,0),k=b.x-l.x,b=b.y-l.y;if("big"===this.grid||"both"===this.grid){l=this.holder.getElementById("grid");l.setAttribute("width",
|
|
k);l.setAttribute("height",b);var d=f(Math.floor(e/Math.pow(10,Math.floor(Math.log(a-e)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(a-e)/Math.log(10))),Math.floor(g/Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10))));l.setAttribute("y",d.y);l.setAttribute("x",d.x);l.querySelector("path").setAttribute("d","M "+k+" 0 L 0 0 0 "+b);"both"===this.grid&&(l.querySelector("rect").setAttribute("width",k),l.querySelector("rect").setAttribute("height",
|
|
b))}if("small"===this.grid||"both"===this.grid)k/=10,b/=10,l=this.holder.getElementById("smallGrid"),l.setAttribute("width",k),l.setAttribute("height",b),"small"===this.grid&&(e=f(Math.floor(e/Math.pow(10,Math.floor(Math.log(a-e)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(a-e)/Math.log(10))),Math.floor(g/Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10)))),l.setAttribute("y",e.y),l.setAttribute("x",e.x)),l.querySelector("path").setAttribute("d",
|
|
"M "+k+" 0 L 0 0 0 "+b);!0===this.x_axis&&(y=f(0,0).y,this.axis.setAttribute("y1",y),this.axis.setAttribute("y2",y));return f};
|
|
Timeline.prototype.draw=function(){for(var f=this.scale(this.raw_points),e=[],g,a,c,k=this,b=0;b<this.raw_points.length;b++)g=f(this.raw_points[b].x,this.raw_points[b].y),e.push({id:b,x:g.x,y:g.y,graph:this.raw_points[b].graph,click:this.raw_points[b].click,label:this.raw_points[b].label});for(var l in this.graphs){var d=e.filter(function(a){return a.graph==l});g="";if(!0===this.rounded){a=[];c=[];for(b=0;b<d.length;b++)a.push(d[b].x),c.push(d[b].y);a=this.getControlPoints(a);c=this.getControlPoints(c);
|
|
for(b=0;b<d.length-1;b++)g+="C "+a.p1[b]+" "+c.p1[b]+" "+a.p2[b]+" "+c.p2[b]+" "+d[b+1].x+" "+d[b+1].y+" "}else for(b=1;b<d.length;b++)g+="L "+d[b].x+" "+d[b].y+" ";"none"!==this.line&&0!==d.length&&(a=this.createElement("path",{"class":"line",stroke:this.graphs[l],"stroke-width":2,fill:"none",d:"M "+d[0].x+" "+d[0].y+" "+g}),"dashed"===this.line&&a.setAttribute("style","stroke-dasharray: "+this.dashed_style),this.g.appendChild(a));this.fill&&(a=this.createElement("path",{"class":"graph",fill:this.graphs[l],
|
|
opacity:"0.25",stroke:"none",d:"M "+d[0].x+" "+2*this.marginBottom+" L "+d[0].x+" "+d[0].y+" "+g+" L "+d[d.length-1].x+" "+2*this.marginBottom+" Z"}),this.g.insertBefore(a,this.g.querySelectorAll(".over")[0]))}for(b=g=0;b<e.length;){a=this.createElement("rect",{"class":"over",id:"over_"+b,y:0,fill:"white",opacity:0,height:"100%"});c=[b];d=b+1;if(b<e.length-1)for(;e[d].x==e[b].x&&!(h>e.length);)d++;for(var h=g+1;h<d;h++)c.push(h);0==b?a.setAttribute("x",0):a.setAttribute("x",(e[b].x+e[g].x)/2);b==
|
|
e.length-1?a.setAttribute("width",this.parent_holder.offsetWidth-(e[b].x+e[b-1].x)/2+1):0==b?a.setAttribute("width",(e[1].x+e[0].x)/2+this.marginLeft+1):a.setAttribute("width",(e[d].x-e[g].x)/2+1);this.g.appendChild(a);a.addEventListener("mouseover",function(a){return function(){for(var b=0;b<a.length;b++)k.holder.getElementById("point_"+a[b]).setAttribute("r","6"),k.holder.getElementById("label_"+a[b]).setAttribute("display","block")}}(c));a.addEventListener("mouseout",function(){[].forEach.call(k.holder.querySelectorAll(".point"),
|
|
function(a){a.setAttribute("r","4")});[].forEach.call(k.holder.querySelectorAll(".label"),function(a){a.setAttribute("display","none")})});this.holder.addEventListener("mouseout",function(){[].forEach.call(k.holder.querySelectorAll(".point"),function(a){a.setAttribute("r","4")});[].forEach.call(k.holder.querySelectorAll(".label"),function(a){a.setAttribute("display","none")})});!1!==this.x_callback&&e[b].x+2.5<this.parent_holder.offsetWidth-this.marginRight&&(a=this.createElement("text",{"class":"legend_x",
|
|
fill:"gray",transform:"translate(0, "+this.parent_holder.offsetHeight+") scale(1, -1)"}),a.appendChild(document.createTextNode(this.x_callback(this.raw_points[b].x))),this.g.appendChild(a),a.setAttribute("x",e[b].x-a.getBoundingClientRect().width/2+2.5),g=f(0,0).y,a.setAttribute("y",this.parent_holder.offsetHeight-this.marginBottom-g),a=this.createElement("line",{"class":"legend_x",stroke:"gray","stroke-width":2,x1:e[b].x,x2:e[b].x,y1:g-5,y2:g+5}),this.g.appendChild(a));g=d-1;b=d}for(l in this.graphs)for(d=
|
|
e.filter(function(a){return a.graph==l}),b=0;b<d.length;b++)if(a=this.createElement("circle",{"class":"point",id:"point_"+d[b].id,cx:d[b].x,cy:d[b].y,r:4,fill:"#333",stroke:this.graphs[l],"stroke-width":2}),this.g.insertBefore(a,this.g.querySelectorAll(".label")[0]),!1!==d[b].click&&(a.onclick=d[b].click),a.addEventListener("mouseover",function(){this.setAttribute("r","6");k.holder.getElementById(this.getAttribute("id").replace("point","label")).setAttribute("display","block")}),""!==d[b].label){f=
|
|
this.createElement("g",{"class":"label",id:"label_"+d[b].id,transform:"translate(0, "+this.parent_holder.offsetHeight+") scale(1, -1)"});this.g.appendChild(f);f.addEventListener("mouseover",function(){k.holder.getElementById(this.getAttribute("id").replace("label","point")).setAttribute("r","6");this.setAttribute("display","block")});a=this.createElement("text",{});c=d[b].label.replace("</sup>","<sup>").split("<sup>");for(h=0;h<c.length;h++)c[h]=c[h].replace(/(<([^>]+)>)/ig,"").replace("%y",this.raw_points[d[b].id].y).replace("%x",
|
|
this.raw_points[d[b].id].x),0==h%2?a.appendChild(document.createTextNode(c[h])):(g=this.createElement("tspan",{dy:"-5"}),g.appendChild(document.createTextNode(c[h])),a.appendChild(g));g=this.createElement("path",{stroke:"black","stroke-width":2,fill:"white",opacity:0.5});f.appendChild(g);f.appendChild(a);h=d[b].x-a.getBoundingClientRect().width/2;c=this.parent_holder.offsetHeight-d[b].y-this.marginTop-this.marginBottom;var m=a.getBoundingClientRect().width,n=a.getBoundingClientRect().height;0>d[b].x-
|
|
a.getBoundingClientRect().width/2?(h=d[b].x+this.marginLeft+this.marginRight,c=this.parent_holder.offsetHeight-d[b].y+5,g.setAttribute("d","M "+(h-5)+" "+(c+5)+" L "+(h-5)+" "+(c-n/2+7.5)+" L "+(h-10)+" "+(c-n/2+5)+" L "+(h-5)+" "+(c-n/2+2.5)+" L "+(h-5)+" "+(c-n+5)+" L "+(h+m+5)+" "+(c-n+5)+" L "+(h+m+5)+" "+(c+5)+" Z")):d[b].y+a.getBoundingClientRect().height+this.marginBottom+2>this.parent_holder.offsetHeight?(h=d[b].x+this.marginLeft+this.marginRight,c=this.parent_holder.offsetHeight-d[b].y+5,
|
|
g.setAttribute("d","M "+(h-5)+" "+(c+5)+" L "+(h-5)+" "+(c-n/2+7.5)+" L "+(h-this.marginBottom)+" "+(c-n/2+5)+" L "+(h-5)+" "+(c-n/2+2.5)+" L "+(h-5)+" "+(c-n+5)+" L "+(h+m+5)+" "+(c-n+5)+" L "+(h+m+5)+" "+(c+5)+" Z"),h+m>this.parent_holder.offsetWidth&&(h=d[b].x-m-this.marginLeft-this.marginRight,c=this.parent_holder.offsetHeight-d[b].y+5,g.setAttribute("d","M "+(h-5)+" "+(c+5)+" L "+(h-5)+" "+(c-n+5)+" L "+(h+m+5)+" "+(c-n+5)+" L "+(h+m+5)+" "+(c-n/2+2.5)+" L "+(h+m+10)+" "+(c-n/2+5)+" L "+(h+m+
|
|
5)+" "+(c-n/2+7.5)+" L "+(h+m+5)+" "+(c+5)+" Z"))):d[b].x+m/2+this.marginLeft+2>this.parent_holder.offsetWidth?(h=d[b].x-m-this.marginLeft-this.marginRight,c=this.parent_holder.offsetHeight-d[b].y+5,g.setAttribute("d","M "+(h-5)+" "+(c+5)+" L "+(h-5)+" "+(c-n+5)+" L "+(h+m+5)+" "+(c-n+5)+" L "+(h+m+5)+" "+(c-n/2+2.5)+" L "+(h+m+10)+" "+(c-n/2+5)+" L "+(h+m+5)+" "+(c-n/2+7.5)+" L "+(h+m+5)+" "+(c+5)+" Z")):g.setAttribute("d","M "+(h-5)+" "+(c+5)+" L "+(h-5)+" "+(c-n+5)+" L "+(h+m+5)+" "+(c-n+5)+" L "+
|
|
(h+m+5)+" "+(c+5)+" L "+(h+m/2+2.5)+" "+(c+5)+" L "+(h+m/2)+" "+(c+10)+" L "+(h+m/2-2.5)+" "+(c+5)+" Z");a.setAttribute("x",h);a.setAttribute("y",c);f.setAttribute("display","none")}};
|
|
//# sourceMappingURL=timeline.min.js.map
|