From 8a8f91ee8fe41bed567c6994eb7665800a3fb75a Mon Sep 17 00:00:00 2001
From: Matt Sochor <matt.sochor@mobiledefense.com>
Date: Mon, 5 Oct 2015 14:39:54 -0400
Subject: [PATCH] Added ggplot style gridlines

---
 rd_ui/app/scripts/visualizations/boxplot.js | 35 +++++++++++++++++----
 rd_ui/app/styles/redash.css                 | 16 ++++++++++
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/rd_ui/app/scripts/visualizations/boxplot.js b/rd_ui/app/scripts/visualizations/boxplot.js
index 3a29bd39b..9b5e0770c 100644
--- a/rd_ui/app/scripts/visualizations/boxplot.js
+++ b/rd_ui/app/scripts/visualizations/boxplot.js
@@ -100,6 +100,16 @@
             .scale(yscale)
             .orient("left");
 
+          var xLines = d3.svg.axis()
+            .scale(xscale)
+            .tickSize(height)
+            .orient("bottom");
+
+          var yLines = d3.svg.axis()
+            .scale(yscale)
+            .tickSize(width)
+            .orient("right");
+
           var barOffset = function(i){
             return xscale(columns[i]) + (xscale(columns[1]) - margin.inner)/2.0;
           };
@@ -114,14 +124,27 @@
               .attr("width",parentWidth-margin.left-margin.right)
               .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
 
-          plot.append("g")
-            .attr("class", "x axis")
-            .attr("transform", "translate(0," + height + ")")
-            .call(xAxis);
+          plot.append("rect")
+              .attr("class", "grid-background")
+              .attr("width", width)
+              .attr("height", height); 
 
           plot.append("g")
-            .attr("class", "y axis")
-            .call(yAxis);
+              .attr("class","grid")
+              .call(yLines)
+
+          plot.append("g")
+              .attr("class","grid")
+              .call(xLines)
+
+          plot.append("g")
+              .attr("class", "x axis")
+              .attr("transform", "translate(0," + height + ")")
+              .call(xAxis);
+
+          plot.append("g")
+              .attr("class", "y axis")
+              .call(yAxis);
 
           plot.selectAll(".box").data(mydata)
             .enter().append("g")
diff --git a/rd_ui/app/styles/redash.css b/rd_ui/app/styles/redash.css
index a1c020d01..4b9fb392a 100644
--- a/rd_ui/app/styles/redash.css
+++ b/rd_ui/app/styles/redash.css
@@ -387,6 +387,22 @@ counter-renderer counter-name {
   shape-rendering: crispEdges;
 }
 
+.grid-background {
+  fill: #ddd;
+}
+.grid path,
+.grid line {
+  fill: none;
+  stroke: #fff;
+  shape-rendering: crispEdges;
+}
+.grid .minor line {
+  stroke-opacity: .5;
+}
+.grid text {
+  display: none;
+}
+
 .rd-widget-textbox p {
     margin-bottom: 0;
 }