diff --git a/views/track.jade b/views/track.jade index b68866fb..fc7f15bf 100644 --- a/views/track.jade +++ b/views/track.jade @@ -27,6 +27,8 @@ block content .tab-content .tab-pane.active#plays h3 Plays Over Time + .pull-right today + .pull-left 30 days ago #track-stats ul @@ -93,52 +95,56 @@ block scripts script. // TODO: embed this in microdata. var playsPerDay = [#{playsPerDay}]; - - var w = 20, - h = 80; - - var x = d3.scale.linear() - .domain([0, 1]) - .range([0, w]); - - var y = d3.scale.linear() - .domain([0, 100]) - .rangeRound([0, h]); - - var chart = d3.select("#track-stats").append("svg") - .attr("class", "chart") - .attr("width", w * playsPerDay.length - 1) - .attr("height", h); - - chart.selectAll("rect") - .data(playsPerDay) - .enter().append("rect") - .attr("x", function(d, i) { return x(i) - .5; }) - .attr("y", function(d) { return h - y(d) - .5; }) - .attr("width", w) - .attr("height", function(d) { return y(d); }); - - chart.append("line") - .attr("x1", 0) - .attr("x2", w * playsPerDay.length) - .attr("y1", h - .5) - .attr("y2", h - .5) - .style("stroke", "#000"); - - chart.selectAll("text") - .data(playsPerDay) - .enter() - .append("text") - .text(function(d) { - return d; - }) - .attr("text-anchor", "middle") - .attr("x", function(d, i) { - return i * (w / playsPerDay.length) + (w / playsPerDay.length - barPadding) / 2; - }) - .attr("y", function(d) { - return h - (d * 4) + 14; - }) - .attr("font-family", "sans-serif") - .attr("font-size", "11px") - .attr("fill", "white"); + var max = 1; + playsPerDay.forEach(function(i) { + max = (i > max) ? i : max; + }); + + var w = 20; + var h = 80; + + var x = d3.scale.linear() + .domain([0, 1]) + .range([0, w]); + + var y = d3.scale.linear() + .domain([0, max + 1 ]) + .rangeRound([0, h]); + + var chart = d3.select('#track-stats').append('svg') + .attr('class', 'chart') + .attr('width', '100%') + .attr('height', h); + + chart.selectAll('rect') + .data(playsPerDay) + .enter().append('rect') + .attr('x', function(d, i) { return x(i) - .5; }) + .attr('y', function(d) { return h - y(d) - .5; }) + .attr('width', w) + .attr('height', function(d) { return y(d); }); + + chart.append('line') + .attr('x1', 0) + .attr('x2', w * playsPerDay.length) + .attr('y1', h - .5) + .attr('y2', h - .5) + .style('stroke', '#000'); + + chart.selectAll('text') + .data(playsPerDay) + .enter() + .append('text') + .text(function(d) { + return d; + }) + .attr('text-anchor', 'middle') + .attr('x', function(d, i) { + return i * (w / playsPerDay.length) + (w / playsPerDay.length - barPadding) / 2; + }) + .attr('y', function(d) { + return h - (d * 4) + 14; + }) + .attr('font-family', 'sans-serif') + .attr('font-size', '11px') + .attr('fill', 'white');