phyks
/
timeline.js
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Bugfix with labels 

* Correction of margins handling
* Typo in x_text when label is overflowing right and top
This commit is contained in:
Phyks 2014-04-22 11:55:48 +02:00
parent 481bc89323
commit 9191cde4c8
3 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
timeline.js
View File

@ -550,7 +550,7 @@ Timeline.prototype.draw = function() {
g.appendChild(element);
var x_text = filtered_points[point].x - element.getBoundingClientRect().width / 2;
var y_text = this.parent_holder.offsetHeight - filtered_points[point].y - 20;
var y_text = this.parent_holder.offsetHeight - filtered_points[point].y - this.marginTop - this.marginBottom;
var element_width = element.getBoundingClientRect().width;
var element_height = element.getBoundingClientRect().height;
@ -559,19 +559,19 @@ Timeline.prototype.draw = function() {
y_text = this.parent_holder.offsetHeight - filtered_points[point].y + 5;
path.setAttribute('d', 'M '+(x_text - 5)+' '+(y_text + 5)+' L '+(x_text - 5)+' '+(y_text - element_height/2 + 7.5)+' L '+(x_text - 10)+' '+(y_text - element_height/2 + 5)+' L '+(x_text - 5)+' '+(y_text - element_height/2 + 2.5)+' L '+(x_text - 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text + 5)+' Z');
}
else if(filtered_points[point].y + element.getBoundingClientRect().height + 12 > this.parent_holder.offsetHeight) {
x_text = filtered_points[point].x + 20;
else if(filtered_points[point].y + element.getBoundingClientRect().height + this.marginBottom + 2 > this.parent_holder.offsetHeight) {
x_text = filtered_points[point].x + this.marginLeft + this.marginRight;
y_text = this.parent_holder.offsetHeight - filtered_points[point].y + 5;
path.setAttribute('d', 'M '+(x_text - 5)+' '+(y_text + 5)+' L '+(x_text - 5)+' '+(y_text - element_height/2 + 7.5)+' L '+(x_text - 10)+' '+(y_text - element_height/2 + 5)+' L '+(x_text - 5)+' '+(y_text - element_height/2 + 2.5)+' L '+(x_text - 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text + 5)+' Z');
path.setAttribute('d', 'M '+(x_text - 5)+' '+(y_text + 5)+' L '+(x_text - 5)+' '+(y_text - element_height/2 + 7.5)+' L '+(x_text - this.marginBottom)+' '+(y_text - element_height/2 + 5)+' L '+(x_text - 5)+' '+(y_text - element_height/2 + 2.5)+' L '+(x_text - 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text + 5)+' Z');
if(x_text + element_width > this.parent_holder.offsetWidth) {
x_text = filtered_points[point].y - element_width - 20;
x_text = filtered_points[point].x - element_width - this.marginLeft - this.marginRight;
y_text = this.parent_holder.offsetHeight - filtered_points[point].y + 5;
path.setAttribute('d', 'M '+(x_text - 5)+' '+(y_text + 5)+' L '+(x_text - 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height/2 + 2.5)+' L '+(x_text + element_width + 10)+' '+(y_text - element_height/2 + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height/2 + 7.5)+' L '+(x_text + element_width + 5)+' '+(y_text + 5)+' Z');
}
}
else if(filtered_points[point].x + element_width / 2 + 12 > this.parent_holder.offsetWidth) {
x_text = filtered_points[point].x - element_width - 20;
else if(filtered_points[point].x + element_width / 2 + this.marginLeft + 2 > this.parent_holder.offsetWidth) {
x_text = filtered_points[point].x - element_width - this.marginLeft - this.marginRight;
y_text = this.parent_holder.offsetHeight - filtered_points[point].y + 5;
path.setAttribute('d', 'M '+(x_text - 5)+' '+(y_text + 5)+' L '+(x_text - 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height/2 + 2.5)+' L '+(x_text + element_width + 10)+' '+(y_text - element_height/2 + 5)+' L '+(x_text + element_width + 5)+' '+(y_text - element_height/2 + 7.5)+' L '+(x_text + element_width + 5)+' '+(y_text + 5)+' Z');
}

9
timeline.min.js vendored
View File

@ -21,8 +21,9 @@ function(a){a.setAttribute("r","4")});[].forEach.call(k.holder.querySelectorAll(
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-20;var m=a.getBoundingClientRect().width,n=a.getBoundingClientRect().height;0>d[b].x-a.getBoundingClientRect().width/
2?(h=d[b].x+20,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+12>this.parent_holder.offsetHeight?(h=d[b].x+20,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"),h+m>this.parent_holder.offsetWidth&&(h=d[b].y-m-20,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+12>this.parent_holder.offsetWidth?(h=d[b].x-m-20,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")}};
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+20,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

4
timeline.min.js.map
View File

File diff suppressed because one or more lines are too long