Added separated resize function
This commit is contained in:
Phyks
parent
611736eca0
commit
e0fb2bccda
50
timeline.js
50
timeline.js
|
|
@ -51,19 +51,8 @@ function Timeline(arg) {
|
|||
var obj = this;
|
||||
window.onresize = function() {
|
||||
old();
|
||||
|
||||
// Redraw the Timeline to fit the new size
|
||||
if(obj.g !== false) {
|
||||
obj.g.setAttribute('transform', 'translate(0, ' + obj.parent_holder.offsetHeight + ') scale(1, -1)');
|
||||
if(obj.x_axis === true) {
|
||||
obj.axis.setAttribute('x2', obj.parent_holder.offsetWidth - obj.marginLeft - 3 - obj.marginRight);
|
||||
}
|
||||
[].forEach.call(obj.holder.querySelectorAll('.label, .over, .point, .line, .graph, .legend_x'), function(el) {
|
||||
el.parentNode.removeChild(el);
|
||||
});
|
||||
obj.draw();
|
||||
}
|
||||
};
|
||||
obj.resize(obj.parent_holder.offsetWidth, obj.parent_holder.offsetHeight);
|
||||
}
|
||||
|
||||
if(!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) {
|
||||
alert("ERROR : Your browser does not support embedded SVG.");
|
||||
|
|
@ -137,6 +126,19 @@ function Timeline(arg) {
|
|||
this.x_callback = arg.x_callback;
|
||||
}
|
||||
|
||||
// Resize the SVG
|
||||
Timeline.prototype.resize = function(new_width, new_height) {
|
||||
if(this.g !== false) {
|
||||
this.g.setAttribute('transform', 'translate(0, ' + new_height + ') scale(1, -1)');
|
||||
if(this.x_axis === true) {
|
||||
this.axis.setAttribute('x2', new_width - this.marginLeft - 3 - this.marginRight);
|
||||
}
|
||||
[].forEach.call(this.holder.querySelectorAll('.label, .over, .point, .line, .graph, .legend_x'), function(el) {
|
||||
el.parentNode.removeChild(el);
|
||||
});
|
||||
this.draw();
|
||||
}
|
||||
};
|
||||
|
||||
// Create an element "element" with the attributes "attrs"
|
||||
Timeline.prototype.createElement = function (element, attrs) {
|
||||
|
|
@ -225,7 +227,7 @@ Timeline.prototype.newCoordinate = function(value, min, max, minValue, maxValue)
|
|||
Timeline.prototype.getNewXY = function (minX, maxX, minY, maxY) {
|
||||
var obj = this;
|
||||
return function (x, y) {
|
||||
return {
|
||||
return {
|
||||
'x': obj.newCoordinate(x, minX, maxX, obj.marginLeft, obj.parent_holder.offsetWidth - obj.marginRight),
|
||||
'y': obj.newCoordinate(y, minY, maxY, 2*obj.marginBottom, obj.parent_holder.offsetHeight - obj.marginTop)
|
||||
};
|
||||
|
|
@ -238,19 +240,19 @@ Timeline.prototype.getControlPoints = function (data) {
|
|||
var p1 = new Array();
|
||||
var p2 = new Array();
|
||||
var n = data.length - 1;
|
||||
|
||||
|
||||
/*rhs vector*/
|
||||
var a = new Array();
|
||||
var b = new Array();
|
||||
var c = new Array();
|
||||
var r = new Array();
|
||||
|
||||
|
||||
/*left most segment*/
|
||||
a[0] = 0;
|
||||
b[0] = 2;
|
||||
c[0] = 1;
|
||||
r[0] = data[0] + 2*data[1];
|
||||
|
||||
|
||||
/*internal segments*/
|
||||
for (var i = 1; i < n - 1; i++) {
|
||||
a[i] = 1;
|
||||
|
|
@ -258,13 +260,13 @@ Timeline.prototype.getControlPoints = function (data) {
|
|||
c[i] = 1;
|
||||
r[i] = 4 * data[i] + 2 * data[i+1];
|
||||
}
|
||||
|
||||
|
||||
/*right segment*/
|
||||
a[n-1] = 2;
|
||||
b[n-1] = 7;
|
||||
c[n-1] = 0;
|
||||
r[n-1] = 8*data[n-1] + data[n];
|
||||
|
||||
|
||||
/*solves Ax=b with the Thomas algorithm (from Wikipedia)*/
|
||||
var m;
|
||||
for (var i = 1; i < n; i++) {
|
||||
|
|
@ -272,19 +274,19 @@ Timeline.prototype.getControlPoints = function (data) {
|
|||
b[i] = b[i] - m * c[i - 1];
|
||||
r[i] = r[i] - m*r[i-1];
|
||||
}
|
||||
|
||||
|
||||
p1[n-1] = r[n-1]/b[n-1];
|
||||
for (var i = n - 2; i >= 0; --i) {
|
||||
p1[i] = (r[i] - c[i] * p1[i+1]) / b[i];
|
||||
}
|
||||
|
||||
|
||||
/*we have p1, now compute p2*/
|
||||
for (var i=0;i<n-1;i++) {
|
||||
p2[i] = 2*data[i+1] - p1[i+1];
|
||||
}
|
||||
|
||||
|
||||
p2[n-1] = 0.5*(data[n] + p1[n-1]);
|
||||
|
||||
|
||||
return {p1:p1, p2:p2};
|
||||
};
|
||||
|
||||
|
|
@ -580,7 +582,7 @@ Timeline.prototype.draw = function() {
|
|||
}
|
||||
element.setAttribute('x', x_text);
|
||||
element.setAttribute('y', y_text);
|
||||
|
||||
|
||||
|
||||
g.setAttribute('display', 'none');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,29 @@
|
|||
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&&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+" "+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 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),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")}};
|
||||
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
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue