30 lines
12 KiB
JavaScript
30 lines
12 KiB
JavaScript
function Timeline(g){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(){},f=this;window.onresize=function(){e();!1!==f.g&&(f.g.setAttribute("transform","translate(0, "+f.parent_holder.offsetHeight+
|
|
") scale(1, -1)"),!0===f.x_axis&&f.axis.setAttribute("x2",f.parent_holder.offsetWidth-f.marginLeft-3-f.marginRight),[].forEach.call(f.holder.querySelectorAll(".label, .over, .point, .line, .graph, .legend_x"),function(a){a.parentNode.removeChild(a)}),f.draw())};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(g.id);this.parent_holder.style.width=g.width;this.parent_holder.style.height=
|
|
g.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"===g.grid||"both"===g.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"===g.grid||"both"===g.grid)a=this.createElement("pattern",{id:"grid",width:80,height:80,patternUnits:"userSpaceOnUse"}),"both"===g.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=g.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===g.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=g.rounded;this.x_axis=g.x_axis;this.line=g.line;this.fill=g.fill;this.x_callback=g.x_callback}
|
|
Timeline.prototype.createElement=function(g,e){var f=document.createElementNS(this.ns,g);for(attr in e)f.setAttribute(attr,e[attr]);return f};Timeline.prototype.hasClass=function(g,e){return-1<(" "+g.getAttribute("class")+" ").indexOf(" "+e+" ")};Timeline.prototype.addGraph=function(g,e){this.graphs[g]=e};Timeline.prototype.hasGraph=function(g){return"undefined"===typeof this.graphs[g]?!1:!0};
|
|
Timeline.prototype.clearGraph=function(g){if("undefined"===typeof g)this.raw_points=[],this.graphs=[];else for(var e=0;e<this.raw_points.length;e++)this.raw_points[e].graph===g&&(this.raw_points[e]=void 0)};
|
|
Timeline.prototype.addPoints=function(g,e){for(var f=0;f<e.length;f++){var a={graph:g,x:e[f].x,y:e[f].y};a.label="undefined"!==typeof e[f].label?e[f].label:"";a.click="undefined"!==typeof e[f].click?e[f].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(g,e,f,a,c){return(c-a)/(f-e)*(g-e)+a};
|
|
Timeline.prototype.getNewXY=function(g,e,f,a){var c=this;return function(k,b){return{x:c.newCoordinate(k,g,e,c.marginLeft,c.parent_holder.offsetWidth-c.marginRight),y:c.newCoordinate(b,f,a,2*c.marginBottom,c.parent_holder.offsetHeight-c.marginTop)}}};
|
|
Timeline.prototype.getControlPoints=function(g){var e=[],f=[],a=g.length-1,c=[],k=[],b=[],l=[];c[0]=0;k[0]=2;b[0]=1;l[0]=g[0]+2*g[1];for(var d=1;d<a-1;d++)c[d]=1,k[d]=4,b[d]=1,l[d]=4*g[d]+2*g[d+1];c[a-1]=2;k[a-1]=7;b[a-1]=0;l[a-1]=8*g[a-1]+g[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++)f[d]=2*g[d+1]-e[d+1];f[a-1]=0.5*(g[a]+e[a-1]);return{p1:e,p2:f}};
|
|
Timeline.prototype.scale=function(g){var e=!0;for(graph in g){e=!1;break}if(e)return!1;for(var e=!1,f=0,a=!1,c=!1,k=0;k<g.length;k++){if(g[k].x<e||!1===e)e=g[k].x;if(g[k].x>a||!1===a)a=g[k].x;g[k].y<f&&(f=g[k].y);if(g[k].y>c||!1===c)c=g[k].y}g=this.getNewXY(e,a,f,c);var b=g(Math.pow(10,Math.floor(Math.log(a-e)/Math.log(10))),Math.pow(10,Math.floor(Math.log(c-f)/Math.log(10)))),l=g(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=g(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(f/Math.pow(10,Math.floor(Math.log(c-f)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(c-f)/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=g(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(f/Math.pow(10,Math.floor(Math.log(c-f)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(c-f)/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=g(0,0).y,this.axis.setAttribute("y1",y),this.axis.setAttribute("y2",y));return g};
|
|
Timeline.prototype.draw=function(){for(var g=this.scale(this.raw_points),e=[],f,a,c,k=this,b=0;b<this.raw_points.length;b++)f=g(this.raw_points[b].x,this.raw_points[b].y),e.push({id:b,x:f.x,y:f.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});f="";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++)f+="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++)f+="L "+d[b].x+" "+d[b].y+" ";"none"!==this.line&&(a=this.createElement("path",{"class":"line",stroke:this.graphs[l],"stroke-width":2,fill:"none",d:"M "+d[0].x+" "+d[0].y+" "+f}),"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+" "+f+" L "+d[d.length-1].x+" "+2*this.marginBottom+" Z"}),this.g.insertBefore(a,this.g.querySelectorAll(".over")[0]))}for(b=f=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=f+1;h<d;h++)c.push(h);0==b?a.setAttribute("x",0):a.setAttribute("x",(e[b].x+e[f].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[f].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),f=g(0,0).y,a.setAttribute("y",this.parent_holder.offsetHeight-this.marginBottom-f),a=this.createElement("line",{"class":"legend_x",stroke:"gray","stroke-width":2,x1:e[b].x,x2:e[b].x,y1:f-5,y2:f+5}),this.g.appendChild(a));f=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){g=
|
|
this.createElement("g",{"class":"label",id:"label_"+d[b].id,transform:"translate(0, "+this.parent_holder.offsetHeight+") scale(1, -1)"});this.g.appendChild(g);g.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])):(f=this.createElement("tspan",{dy:"-5"}),f.appendChild(document.createTextNode(c[h])),a.appendChild(f));f=this.createElement("path",{stroke:"black","stroke-width":2,fill:"white",opacity:0.5});g.appendChild(f);g.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,f.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,
|
|
f.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,f.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,f.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")):f.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);g.setAttribute("display","none")}};
|
|
//# sourceMappingURL=timeline.min.js.map
|