From e32553c23fb0968de0cc03c3fc2bdcfdae8fd279 Mon Sep 17 00:00:00 2001
From: Sam Nicholls <sam.n@studio8media.co.uk>
Date: Sat, 26 Jan 2013 18:57:33 +0000
Subject: [PATCH] Y-Axis Improvements [#216][Close #227]

---
 views/users/users.jade | 44 +++++++++++++++++++++++++++---------------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/views/users/users.jade b/views/users/users.jade
index 0a6df79..d1e9e7e 100644
--- a/views/users/users.jade
+++ b/views/users/users.jade
@@ -17,10 +17,12 @@ block content
     script
         $(document).ready(function(){
             // d3.js Graph
-            var xlab = 30;
+            var ticks = 25;
+            var timelabels = 30;
             var chartw = 940;
-            var w = 5.595;
-            var h = 120;
+            var toppad = 10;
+            var w = (chartw - (ticks * 2)) / 168;
+            var h = 130;
 
             var x = d3.scale.linear()
                 .domain([0,1])
@@ -28,45 +30,55 @@ block content
 
             var y = d3.scale.linear()
                 .domain([0,d3.max([#{chanFreq}])])
-                .rangeRound([0,h]);
+                .rangeRound([0,h-toppad]);
 
             var chart = d3.select($("#chanFreqChart")[0]).append("svg")
                 .attr("class", "chart")
-                .attr("width", w * #{chanFreqLen} - 1)
-                .attr("height", h + xlab);
+                .attr("width", chartw)
+                .attr("height", h + timelabels);
 
             chart.selectAll(".yTicks")
-                .data(y.ticks(5).slice(1,5))
+                .data(y.ticks(5).slice(1))
                 .enter().append("svg:line")
                 .attr("class", "yTicks")
                 .attr("y1", function(d) { return -1 * y(d) + h; })
                 .attr("x1", 0)
                 .attr("y2", function(d) { return -1 * y(d) + h; })
-                .attr("x2", w * #{chanFreqLen})
+                .attr("x2", chartw)
 
             chart.selectAll("rect")
                 .data([#{chanFreq}])
               .enter().append("rect")
-                .attr("x", function(d, i) { return x(i) - .5; })
+                .attr("x", function(d, i) { return x(i) - .5 + ticks; })
                 .attr("y", function(d) { return h - y(d) - .5; })
                 .attr("width", w)
                 .attr("height", function(d) { return y(d); })
                 .attr("title", function(d){ return d; });
 
-            chart.selectAll(".rule")
+            chart.selectAll(".l_rule")
+              .data(y.ticks(5).slice(1))
+              .enter().append("text")
+              .attr("class", "rule")
+              .attr("y", function(d) { return -1 * y(d) + h; })
+              .attr("x", 0)
+              .attr("text-anchor", "right")
+              .attr("font-size", 10)
+              .attr("dy", 3)
+              .text(String);
+            chart.selectAll(".r_rule")
               .data(y.ticks(5).slice(1,5))
               .enter().append("text")
               .attr("class", "rule")
               .attr("y", function(d) { return -1 * y(d) + h; })
-              .attr("x", (chartw / 2)+(w/2))
-              .attr("text-anchor", "middle")
+              .attr("x", chartw)
+              .attr("text-anchor", "end")
               .attr("font-size", 10)
               .attr("dy", 3)
               .text(String);
 
             chart.append("line")
-              .attr("x1", 0)
-              .attr("x2", w * #{chanFreqLen})
+              .attr("x1", 0 + ticks)
+              .attr("x2", chartw - ticks)
               .attr("y1", h - .5)
               .attr("y2", h - .5)
               .style("stroke", "#000");
@@ -74,7 +86,7 @@ block content
             chart.selectAll("text.times")
               .data(["0", "6", "12", "18","0", "6", "12", "18","0", "6", "12", "18","0", "6", "12", "18" ,"0", "6", "12", "18" ,"0", "6", "12", "18" ,"0", "6", "12", "18"])
               .enter().append("text")
-              .attr("x", function(d, i){ return ((i * w * 6)+(w/2)); })
+              .attr("x", function(d, i){ return ((i * w * 6)+(w/2)) + ticks; })
               .attr("y", h + 10)
               .attr("text-anchor", "middle")
               .attr('class', 'name')
@@ -84,7 +96,7 @@ block content
             chart.selectAll("text.days")
               .data(["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"])
               .enter().append("text")
-              .attr("x", function(d, i){ return ((i+0.5) * w * 24); })
+              .attr("x", function(d, i){ return ((i+0.5) * w * 24) + ticks; })
               .attr("y", h + 25)
               .attr("text-anchor", "middle")
               .attr('class', 'name')