From 40e544926629dfceb0901d9a0b228933da453d4d Mon Sep 17 00:00:00 2001
From: alvaro <alvaro@alia.(none)>
Date: Thu, 25 Oct 2012 07:29:16 -0700
Subject: [PATCH] Updated to latest version of Timeknots
---
.../static/vendor/timeknots/README.md | 20 ++++++------
.../vendor/timeknots/example/index.html | 6 ++--
.../vendor/timeknots/src/timeknots-min.js | 2 +-
.../static/vendor/timeknots/src/timeknots.js | 32 ++++++++++---------
4 files changed, 31 insertions(+), 29 deletions(-)
diff --git a/doc/examples/originalComponents/static/vendor/timeknots/README.md b/doc/examples/originalComponents/static/vendor/timeknots/README.md
index d5c2999f..33d9ce57 100644
--- a/doc/examples/originalComponents/static/vendor/timeknots/README.md
+++ b/doc/examples/originalComponents/static/vendor/timeknots/README.md
@@ -7,16 +7,16 @@ Minimalist timeline in javascript
General Options
===============
-* `w`: width of the visualization (default: 600px)
-* `h`: height of the visualization (default: 200px)
-* `radius`: radius of the knots (default: 10px)
-* `lineWidth`: width of the lines used to draw timeknots (default: 4px)
-* `color`: color used for the visualization (default: "#999")
-* `background`: Background color of the visualization (default: "#FFF")
-* `dateFormat`: Format of the dates displayed (default: "%Y/%m/%d %H:%M:%S")
-* `horizontalLayout`: orientation in which the timeknots will be displayed horizontal or vertical (default: true),
-* `showLabels`: Include labels showing the first and last dates (default: false)
-* `labelFormat`: Format used to display the dates in the labels (default: "%Y/%m/%d %H:%M:%S")
+* `width`: width of the visualization (default: `600` pixels)
+* `height`: height of the visualization (default: `200` pixels)
+* `radius`: radius of the knots (default: `10` pixels)
+* `lineWidth`: width of the lines used to draw timeknots (default: `4` pixels)
+* `color`: color used for the visualization (default: `999`)
+* `background`: Background color of the visualization (default: `FFF`)
+* `dateFormat`: Format of the dates displayed (default: `%Y/%m/%d %H:%M:%S`)
+* `horizontalLayout`: orientation in which the timeknots will be displayed horizontal or vertical (default: `true`),
+* `showLabels`: Include labels showing the first and last dates (default: `false`)
+* `labelFormat`: Format used to display the dates in the labels (default: `%Y/%m/%d %H:%M:%S`)
Knot options
diff --git a/doc/examples/originalComponents/static/vendor/timeknots/example/index.html b/doc/examples/originalComponents/static/vendor/timeknots/example/index.html
index 8e1eb1a9..bc0719d7 100644
--- a/doc/examples/originalComponents/static/vendor/timeknots/example/index.html
+++ b/doc/examples/originalComponents/static/vendor/timeknots/example/index.html
@@ -2,7 +2,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="../src/d3.v2.min.js" type="application/javascript"></script>
-<script src="../src/timeknots.js" type="application/javascript"></script>
+<script src="../src/timeknots-min.js" type="application/javascript"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
<style>
@@ -47,7 +47,7 @@ var kurbickFilms = [{name:"Day of the Fight", date: "1951-04-26", img: "http://u
{name:"Killer's Kiss", date: "1955-09-28", img: "http://upload.wikimedia.org/wikipedia/en/thumb/a/a6/KillersKissPoster.jpg/220px-KillersKissPoster.jpg"}
];
-TimeKnots.draw("#timeline1", kurbickFilms, {dateFormat: "%B %Y", color: "#696", w:500, showLabels: true, labelFormat: "%Y"});
+TimeKnots.draw("#timeline1", kurbickFilms, {dateFormat: "%B %Y", color: "#696", width:500, showLabels: true, labelFormat: "%Y"});
var mySchedule = [{name:"Wake up", date: "2012-09-28T06:00:00"},
{name:"Breakfast", date:"2012-09-28T06:30:00"},
@@ -60,7 +60,7 @@ var mySchedule = [{name:"Wake up", date: "2012-09-28T06:00:00"},
{name:"Watch a movie", date: "2012-09-28T20:16:00"},
{name:"Go to sleep", date: "2012-09-28T23:00:00"}
];
-TimeKnots.draw("#timeline2", mySchedule, {horizontalLayout: false, color: "#669", h: 450, w:200, showLabels: true, labelFormat:"%H:%M"});
+TimeKnots.draw("#timeline2", mySchedule, {horizontalLayout: false, color: "#669", height: 450, width:200, showLabels: true, labelFormat:"%H:%M"});
diff --git a/doc/examples/originalComponents/static/vendor/timeknots/src/timeknots-min.js b/doc/examples/originalComponents/static/vendor/timeknots/src/timeknots-min.js
index c35593af..cb697ef7 100644
--- a/doc/examples/originalComponents/static/vendor/timeknots/src/timeknots-min.js
+++ b/doc/examples/originalComponents/static/vendor/timeknots/src/timeknots-min.js
@@ -1 +1 @@
-var TimeKnots={draw:function(id,events,options){var cfg={w:600,h:200,radius:10,lineWidth:4,color:"#999",background:"#FFF",dateFormat:"%Y/%m/%d %H:%M:%S",horizontalLayout:true,showLabels:false,labelFormat:"%Y/%m/%d %H:%M:%S"};if(options!=undefined){for(var i in options){cfg[i]=options[i]}}var tip=d3.select(id).append('div').style("opacity",0).style("position","absolute").style("font-family","Helvetica Neue").style("font-weight","300").style("background","rgba(0,0,0,0.5)").style("color","white").style("padding","5px 10px 5px 10px").style("-moz-border-radius","8px 8px").style("border-radius","8px 8px");var svg=d3.select(id).append('svg').attr("width",cfg.w).attr("height",cfg.h);var timestamps=events.map(function(d){return Date.parse(d.date)});var maxValue=d3.max(timestamps);var minValue=d3.min(timestamps);var margin=(d3.max(events.map(function(d){return d.radius}))||cfg.radius)*1.5+cfg.lineWidth;var step=(cfg.horizontalLayout)?((cfg.w-2*margin)/(maxValue-minValue)):((cfg.h-2*margin)/(maxValue-minValue));if(maxValue==minValue){step=0;if(cfg.horizontalLayout){margin=cfg.w/2}else{margin=cfg.h/2}}svg.append("line").attr("class","timeline-line").attr("x1",function(d){if(cfg.horizontalLayout){return(margin)}return Math.floor(cfg.w/2)}).attr("x2",function(d){if(cfg.horizontalLayout){return(cfg.w-margin)}return Math.floor(cfg.w/2)}).attr("y1",function(d){if(cfg.horizontalLayout){return Math.floor(cfg.h/2)}return margin}).attr("y2",function(d){if(cfg.horizontalLayout){return Math.floor(cfg.h/2)}return cfg.h-margin}).style("stroke",cfg.color).style("stroke-width",cfg.lineWidth);svg.selectAll("circle").data(events).enter().append("circle").attr("class","timeline-event").attr("r",function(d){if(d.radius!=undefined){return d.radius}return cfg.radius}).style("stroke",function(d){if(d.color!=undefined){return d.color}return cfg.color}).style("stroke-width",function(d){if(d.lineWidth!=undefined){return d.lineWidth}return cfg.lineWidth}).style("fill",function(d){if(d.background!=undefined){return d.background}return cfg.background}).attr("cy",function(d){if(cfg.horizontalLayout){return Math.floor(cfg.h/2)}return Math.floor(step*(new Date(d.date).getTime()-minValue)+margin)}).attr("cx",function(d){if(cfg.horizontalLayout){var x=Math.floor(step*(new Date(d.date).getTime()-minValue)+margin);return x}return Math.floor(cfg.w/2)}).on("mouseover",function(d){var format=d3.time.format(cfg.dateFormat);var datetime=format(new Date(d.date));var dateValue=(datetime!="")?(d.name+" <small>("+datetime+")</small>"):d.name;d3.select(this).style("fill",function(d){if(d.color!=undefined){return d.color}return cfg.color}).transition().duration(100).attr("r",function(d){if(d.radius!=undefined){return Math.floor(d.radius*1.5)}return Math.floor(cfg.radius*1.5)});tip.html("");if(d.img!=undefined){tip.append("img").style("float","left").style("margin-right","4px").attr("src",d.img).attr("width","64px")}tip.append("div").style("float","left").html(dateValue);tip.transition().duration(100).style("opacity",.9)}).on("mouseout",function(){d3.select(this).style("fill",function(d){if(d.background!=undefined){return d.background}return cfg.background}).transition().duration(100).attr("r",function(d){if(d.radius!=undefined){return d.radius}return cfg.radius});tip.transition().duration(100).style("opacity",0)});if(cfg.showLabels!=false){var format=d3.time.format(cfg.labelFormat);var startString=format(new Date(minValue));var endString=format(new Date(maxValue));svg.append("text").text(startString).style("font-size","70%").attr("x",function(d){if(cfg.horizontalLayout){return d3.max([0,(margin-this.getBBox().width/2)])}return Math.floor(this.getBBox().width/2)}).attr("y",function(d){if(cfg.horizontalLayout){return Math.floor(cfg.h/2+(margin+this.getBBox().height))}return margin+this.getBBox().height/2});svg.append("text").text(endString).style("font-size","70%").attr("x",function(d){if(cfg.horizontalLayout){return cfg.w-d3.max([this.getBBox().width,(margin+this.getBBox().width/2)])}return Math.floor(this.getBBox().width/2)}).attr("y",function(d){if(cfg.horizontalLayout){return Math.floor(cfg.h/2+(margin+this.getBBox().height))}return cfg.h-margin+this.getBBox().height/2})}svg.on("mousemove",function(){return tip.style("top",(d3.event.pageY-100)+"px").style("left",(d3.event.pageX+20)+"px")})}}
+var TimeKnots={draw:function(e,f,g){var h={width:600,height:200,radius:10,lineWidth:4,color:"#999",background:"#FFF",dateFormat:"%Y/%m/%d %H:%M:%S",horizontalLayout:true,showLabels:false,labelFormat:"%Y/%m/%d %H:%M:%S"};if(g!=undefined){for(var i in g){h[i]=g[i]}}var j=d3.select(e).append('div').style("opacity",0).style("position","absolute").style("font-family","Helvetica Neue").style("font-weight","300").style("background","rgba(0,0,0,0.5)").style("color","white").style("padding","5px 10px 5px 10px").style("-moz-border-radius","8px 8px").style("border-radius","8px 8px");var k=d3.select(e).append('svg').attr("width",h.width).attr("height",h.height);var l=f.map(function(d){return Date.parse(d.date)});var m=d3.max(l);var n=d3.min(l);var o=(d3.max(f.map(function(d){return d.radius}))||h.radius)*1.5+h.lineWidth;var p=(h.horizontalLayout)?((h.width-2*o)/(m-n)):((h.height-2*o)/(m-n));if(m==n){p=0;if(h.horizontalLayout){o=h.width/2}else{o=h.height/2}}k.append("line").attr("class","timeline-line").attr("x1",function(d){if(h.horizontalLayout){return(o)}return Math.floor(h.width/2)}).attr("x2",function(d){if(h.horizontalLayout){return(h.width-o)}return Math.floor(h.width/2)}).attr("y1",function(d){if(h.horizontalLayout){return Math.floor(h.height/2)}return o}).attr("y2",function(d){if(h.horizontalLayout){return Math.floor(h.height/2)}return h.height-o}).style("stroke",h.color).style("stroke-width",h.lineWidth);k.selectAll("circle").data(f).enter().append("circle").attr("class","timeline-event").attr("r",function(d){if(d.radius!=undefined){return d.radius}return h.radius}).style("stroke",function(d){if(d.color!=undefined){return d.color}return h.color}).style("stroke-width",function(d){if(d.lineWidth!=undefined){return d.lineWidth}return h.lineWidth}).style("fill",function(d){if(d.background!=undefined){return d.background}return h.background}).attr("cy",function(d){if(h.horizontalLayout){return Math.floor(h.height/2)}return Math.floor(p*(new Date(d.date).getTime()-n)+o)}).attr("cx",function(d){if(h.horizontalLayout){var x=Math.floor(p*(new Date(d.date).getTime()-n)+o);return x}return Math.floor(h.width/2)}).on("mouseover",function(d){var a=d3.time.format(h.dateFormat);var b=a(new Date(d.date));var c=(b!="")?(d.name+" <small>("+b+")</small>"):d.name;d3.select(this).style("fill",function(d){if(d.color!=undefined){return d.color}return h.color}).transition().duration(100).attr("r",function(d){if(d.radius!=undefined){return Math.floor(d.radius*1.5)}return Math.floor(h.radius*1.5)});j.html("");if(d.img!=undefined){j.append("img").style("float","left").style("margin-right","4px").attr("src",d.img).attr("width","64px")}j.append("div").style("float","left").html(c);j.transition().duration(100).style("opacity",.9)}).on("mouseout",function(){d3.select(this).style("fill",function(d){if(d.background!=undefined){return d.background}return h.background}).transition().duration(100).attr("r",function(d){if(d.radius!=undefined){return d.radius}return h.radius});j.transition().duration(100).style("opacity",0)});if(h.showLabels!=false){var q=d3.time.format(h.labelFormat);var r=q(new Date(n));var s=q(new Date(m));k.append("text").text(r).style("font-size","70%").attr("x",function(d){if(h.horizontalLayout){return d3.max([0,(o-this.getBBox().width/2)])}return Math.floor(this.getBBox().width/2)}).attr("y",function(d){if(h.horizontalLayout){return Math.floor(h.height/2+(o+this.getBBox().height))}return o+this.getBBox().height/2});k.append("text").text(s).style("font-size","70%").attr("x",function(d){if(h.horizontalLayout){return h.width-d3.max([this.getBBox().width,(o+this.getBBox().width/2)])}return Math.floor(this.getBBox().width/2)}).attr("y",function(d){if(h.horizontalLayout){return Math.floor(h.height/2+(o+this.getBBox().height))}return h.height-o+this.getBBox().height/2})}k.on("mousemove",function(){tipPixels=parseInt(j.style("height").replace("px",""));return j.style("top",(d3.event.pageY-tipPixels-o)+"px").style("left",(d3.event.pageX+20)+"px")}).on("mouseout",function(){return j.style("opacity",0).style("top","0px").style("left","0px")})}}
diff --git a/doc/examples/originalComponents/static/vendor/timeknots/src/timeknots.js b/doc/examples/originalComponents/static/vendor/timeknots/src/timeknots.js
index 38f2c8fa..64f6cf15 100644
--- a/doc/examples/originalComponents/static/vendor/timeknots/src/timeknots.js
+++ b/doc/examples/originalComponents/static/vendor/timeknots/src/timeknots.js
@@ -1,8 +1,8 @@
var TimeKnots = {
draw: function(id, events, options){
var cfg = {
- w: 600,
- h: 200,
+ width: 600,
+ height: 200,
radius: 10,
lineWidth: 4,
color: "#999",
@@ -31,22 +31,22 @@ var TimeKnots = {
.style("padding", "5px 10px 5px 10px")
.style("-moz-border-radius", "8px 8px")
.style("border-radius", "8px 8px");
- var svg = d3.select(id).append('svg').attr("width", cfg.w).attr("height", cfg.h);
+ var svg = d3.select(id).append('svg').attr("width", cfg.width).attr("height", cfg.height);
//Calculate times in terms of timestamps
var timestamps = events.map(function(d){return Date.parse(d.date);});//new Date(d.date).getTime()});
var maxValue = d3.max(timestamps);
var minValue = d3.min(timestamps);
var margin = (d3.max(events.map(function(d){return d.radius})) || cfg.radius)*1.5+cfg.lineWidth;
- var step = (cfg.horizontalLayout)?((cfg.w-2*margin)/(maxValue - minValue)):((cfg.h-2*margin)/(maxValue - minValue));
+ var step = (cfg.horizontalLayout)?((cfg.width-2*margin)/(maxValue - minValue)):((cfg.height-2*margin)/(maxValue - minValue));
- if(maxValue == minValue){step = 0;if(cfg.horizontalLayout){margin=cfg.w/2}else{margin=cfg.h/2}}
+ if(maxValue == minValue){step = 0;if(cfg.horizontalLayout){margin=cfg.width/2}else{margin=cfg.height/2}}
svg.append("line")
.attr("class", "timeline-line")
- .attr("x1", function(d){if(cfg.horizontalLayout){return (margin)} return Math.floor(cfg.w/2)})
- .attr("x2", function(d){if(cfg.horizontalLayout){return (cfg.w - margin)} return Math.floor(cfg.w/2)})
- .attr("y1", function(d){if(cfg.horizontalLayout){return Math.floor(cfg.h/2)}return margin})
- .attr("y2", function(d){if(cfg.horizontalLayout){return Math.floor(cfg.h/2)}return cfg.h-margin})
+ .attr("x1", function(d){if(cfg.horizontalLayout){return (margin)} return Math.floor(cfg.width/2)})
+ .attr("x2", function(d){if(cfg.horizontalLayout){return (cfg.width - margin)} return Math.floor(cfg.width/2)})
+ .attr("y1", function(d){if(cfg.horizontalLayout){return Math.floor(cfg.height/2)}return margin})
+ .attr("y2", function(d){if(cfg.horizontalLayout){return Math.floor(cfg.height/2)}return cfg.height-margin})
.style("stroke", cfg.color)
.style("stroke-width", cfg.lineWidth);
@@ -60,7 +60,7 @@ var TimeKnots = {
.style("fill", function(d){if(d.background != undefined){return d.background} return cfg.background})
.attr("cy", function(d){
if(cfg.horizontalLayout){
- return Math.floor(cfg.h/2)
+ return Math.floor(cfg.height/2)
}
return Math.floor(step*(new Date(d.date).getTime() - minValue) + margin)
})
@@ -69,7 +69,7 @@ var TimeKnots = {
var x= Math.floor(step*(new Date(d.date).getTime() - minValue) + margin);
return x;
}
- return Math.floor(cfg.w/2)
+ return Math.floor(cfg.width/2)
}).on("mouseover", function(d){
var format = d3.time.format(cfg.dateFormat);
var datetime = format(new Date(d.date));
@@ -104,17 +104,19 @@ var TimeKnots = {
svg.append("text")
.text(startString).style("font-size", "70%")
.attr("x", function(d){if(cfg.horizontalLayout){return d3.max([0, (margin-this.getBBox().width/2)])} return Math.floor(this.getBBox().width/2)})
- .attr("y", function(d){if(cfg.horizontalLayout){return Math.floor(cfg.h/2+(margin+this.getBBox().height))}return margin+this.getBBox().height/2});
+ .attr("y", function(d){if(cfg.horizontalLayout){return Math.floor(cfg.height/2+(margin+this.getBBox().height))}return margin+this.getBBox().height/2});
svg.append("text")
.text(endString).style("font-size", "70%")
- .attr("x", function(d){if(cfg.horizontalLayout){return cfg.w - d3.max([this.getBBox().width, (margin+this.getBBox().width/2)])} return Math.floor(this.getBBox().width/2)})
- .attr("y", function(d){if(cfg.horizontalLayout){return Math.floor(cfg.h/2+(margin+this.getBBox().height))}return cfg.h-margin+this.getBBox().height/2})
+ .attr("x", function(d){if(cfg.horizontalLayout){return cfg.width - d3.max([this.getBBox().width, (margin+this.getBBox().width/2)])} return Math.floor(this.getBBox().width/2)})
+ .attr("y", function(d){if(cfg.horizontalLayout){return Math.floor(cfg.height/2+(margin+this.getBBox().height))}return cfg.height-margin+this.getBBox().height/2})
}
svg.on("mousemove", function(){
- return tip.style("top", (d3.event.pageY-100)+"px").style("left",(d3.event.pageX+20)+"px");});
+ tipPixels = parseInt(tip.style("height").replace("px", ""));
+ return tip.style("top", (d3.event.pageY-tipPixels-margin)+"px").style("left",(d3.event.pageX+20)+"px");})
+ .on("mouseout", function(){return tip.style("opacity", 0).style("top","0px").style("left","0px");});
}
}
--
GitLab