Skip to content

Commit

Permalink
[enh] added min/max labels to sparklines.
Browse files Browse the repository at this point in the history 
[mod] some more refactoring. getting ready for v1.1
  • Loading branch information
Stefan Marsiske committed Nov 24, 2008
1 parent fc8c491 commit 53e3ad8
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 30 deletions.
26 changes: 16 additions & 10 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,19 @@
* { margin: 0; padding: 0; font-family: Georgia,Garamond,"Times New Roman",serif;}
#content {width: 900px; margin-left: auto ; margin-right: auto ;}
.timecloud { width: 800px; margin-left: auto; margin-right: auto; }
.timegraph, .dates, #timecloud { width: 800px; font-size: 12px; margin: 0px 0px 10px; margin-left: auto; margin-right: auto; }
.stardate {float: left;}
.enddate {float: right;}
.timecloud, .timegraph { width: 800px; margin-left: auto; margin-right: auto; }
.timegraph { font-size: 12px; margin: 0px 0px 10px;}
.ui-slider { width: 800px; font-size: 12px; height:23px; position:relative; top: -24px;}
.ui-slider-range { background:#50A029 ; height:27px; opacity:0.3; position:absolute; top:-2px; width:100%; border-left: 1px solid #444; border-right: 1px solid #444; }
.ui-slider-handle { height:27px; background-color: #444; opacity:0.3; position:absolute; top:-2px; width:0px; z-index:1;}
.left { margin-right: 4px; border-left: 3px solid Navy; }
.right { margin-left: 2px; border-right: 3px solid Navy; }
.sparkline-container { height:27px; width: 840px; position: relative; left: -40px;}
.sparkline { width: 800px; position: relative; left: 40px; }
.sparkline-label { position: relative; font-size: 9px; text-align: right; width: 40px;}
.min { position: absolute; bottom: -27px; right:0px; }
.max { position: absolute; top: 0px; right:0px; }
.startdate {float: left; margin-top: 4px;}
.enddate {float: right; margin-top: 4px;}
ul.tagcloud-list { font-size: 100%; font-weight: bold; padding: 2px; }
li.tagcloud-base { font-size: 24px; display: inline; white-space: nowrap; }
a.tagcloud-anchor { text-decoration: none; color: #00f;}
Expand All @@ -12,10 +22,6 @@ a.tagcloud-earliest { color: #ccc; }
a.tagcloud-earlier { color: #99c; }
a.tagcloud-later { color: #99f; }
a.tagcloud-latest { color: #00f; }
.ui-slider-handle { height:27px; background-color: #444; opacity:0.3; position:absolute; top:-7px; width:0px; z-index:1;}
.left { margin-right: 4px; border-left: 3px solid Navy; }
.right { margin-left: 2px; border-right: 3px solid Navy; }
.ui-slider-range { background:#50A029 ; height:27px; opacity:0.3; position:absolute; top:-7px; width:100%; border-left: 1px solid #444; border-right: 1px solid #444; }
.ui-slider { width: 800px; font-size: 12px; height:23px; position:relative; top: -24px; margin-bottom: -24px; margin-top: -24px;}
.text-control { margin-right: 4px; color: blue; cursor:pointer; text-decoration: underline; background: #eee;}
.text-control { margin-right: 4px; margin-top: 5px; color: blue; cursor:pointer; text-decoration: underline; background: #eee;}
.tagcloud { margin-top: 5px; border-top: 1px solid black; }

67 changes: 47 additions & 20 deletions timecloud.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,9 @@ $.widget("ui.timecloud", {
timegraph.append(this.window);

var overview=$("<div/>")
.addClass("overview").
append(timegraph);
.addClass("overview")
.bind('wheel', function(e) { thisObj.resizeWindow(e);})
.append(timegraph);
this.element.append(overview);

// let's draw the overview sparkline
Expand All @@ -96,13 +97,6 @@ $.widget("ui.timecloud", {
thisObj.options.start=thisObj.window.slider('value', 0);
thisObj.options.winSize=Math.round(ui.range);
thisObj.drawTimecloud(); } })
// we want the mousewheel events to scroll the window
.bind('wheel', function(e) {
if(e.delta<0) {
thisObj.nextFrame();
} else {
thisObj.prevFrame();
}})
// we also add support for dragging the window
.find(".ui-slider-range").draggable({
axis: 'x',
Expand All @@ -116,8 +110,16 @@ $.widget("ui.timecloud", {

// we setup a timeline graph of only the currently shown tags
this.timecloudElem.append(this.buildSparkline());
// we want the mousewheel events to scroll the window
this.timecloudElem.bind('wheel', function(e) {
if(e.delta<0) {
thisObj.nextFrame();
} else {
thisObj.prevFrame();
}})

// building the animation controls
$('<br/>').appendTo(this.timecloudElem);
$('<span>&lt;</span>')
.addClass("text-control")
.click(function () { thisObj.prevFrame(); })
Expand Down Expand Up @@ -161,24 +163,31 @@ $.widget("ui.timecloud", {

// create container for tagcloud
$("<div/>").addClass("tagcloud")
.bind('wheel', function(e) { thisObj.resizeWindow(e);})
.appendTo(this.timecloudElem);
this.element.append(this.timecloudElem);
},

// internal: used in building the UI
buildSparkline: function(e) {
// setup the first sparkline for a general overview
var timegraph=$("<div/>").addClass("timegraph")
var timegraph=$("<div/>").addClass("timegraph");
var labels=$("<div/>").addClass("sparkline-container");
var tmp=$("<div/>").addClass("sparkline-label");
$("<div/>").addClass("max")
.appendTo(tmp);
$("<div/>").addClass("min")
.appendTo(tmp);
tmp.appendTo(labels);
$("<div/>").addClass("sparkline")
.appendTo(timegraph);
.appendTo(labels);
labels.appendTo(timegraph);

var dates=$("<div/>").addClass("dates");
// end must appear first for some reason otherwise it breaks the
// dateline... could spans be a solution?
$("<div/>").addClass("enddate").
$("<span/>").addClass("enddate").
appendTo(dates);
$("<div/>").addClass("startdate").
$("<span/>").addClass("startdate").
appendTo(dates);

timegraph.append(dates);
Expand All @@ -187,13 +196,24 @@ $.widget("ui.timecloud", {

// internal: callback used on mouse events
resizeWindow: function(e) {
this.options.winSize=this.options.winSize+(Math.round(this.frames.length/100)*e.delta*-1);
var delta=(Math.round(this.frames.length/100)*e.delta*-1);
if(this.options.winSize+delta>0 && this.options.start-Math.round(delta/2)>=0 &&
(this.options.start+this.options.winSize+Math.round(delta/2))<=this.frames.length) {
this.options.winSize=this.options.winSize+delta;
this.options.start=this.options.start-Math.round(delta/2);
}
this.drawTimecloud();
},
},

updateWindow: function() {
this.window.slider("moveTo", parseInt(this.options.start), 0, true);
this.window.slider("moveTo", parseInt(this.options.start+this.options.winSize-1), 1, true);
var left=parseInt(this.options.start);
if(left>this.window.slider("value",0)) {
this.window.slider("moveTo", left+this.options.winSize-1, 1, true);
this.window.slider("moveTo", left, 0, true);
} else {
this.window.slider("moveTo", left, 0, true);
this.window.slider("moveTo", left+this.options.winSize-1, 1, true);
}
},

// internal: used to draw a fresh frame
Expand Down Expand Up @@ -237,9 +257,9 @@ $.widget("ui.timecloud", {

// internal: this draws a tagcloud and sparkline from the cache
redrawTimecloud: function() {
this.updateWindow();
this.drawSparkline(this.sparkline,this.timecloudElem);
this.drawTagcloud(this.listToDict(this.tags),this.timecloudElem);
this.updateWindow();
},

// internal: used to all draw sparklines, we need to expand the possibly
Expand All @@ -252,15 +272,22 @@ $.widget("ui.timecloud", {
var enddate=this.strToDate(data[data.length-1]['date']);
var nextdate=startdate;
var lst=[];
var min=Infinity;
var max=-Infinity;
for (id in data) {
var curdate=this.strToDate(data[id]['date']);
while(nextdate<curdate) {
lst.push(0);
nextdate=this.addDay(nextdate,1);
}
lst.push(parseInt(data[id]['count']));
var val=parseInt(data[id]['count']);
if(val>max) max=val;
if(val<min) min=val;
lst.push(val);
nextdate=this.addDay(nextdate,1);
}
$('.min',target).text(min);
$('.max',target).text(max);
$('.startdate',target).text(this.dateToStr(startdate));
$('.enddate',target).text(this.dateToStr(enddate));
$('.sparkline',target).sparkline(lst, this.options.sparklineStyle);
Expand Down

0 comments on commit 53e3ad8

Please sign in to comment.