Merge pull request #326 from prometheus/ui/outside-axis

Display Y-axis outside of graph.

web/static/css/graph.css

@@ -16,18 +16,33 @@ a:active { color: black; }
 
 .graph {
   position: relative;
+  left: 40px;
   min-height: 400px;
 }
 
-svg {
+.graph svg {
-  border: 1px solid #aaa;
+  border-top: 1px solid #aaa;
-  margin-bottom: 5px;
+  border-right: 1px solid #aaa;
+  border-bottom: 1px solid #aaa;
 }
 
 .legend {
   display: inline-block;
   vertical-align: top;
-  margin: 0 0 0 0px;
+  margin: 0 0 0 40px;
+}
+
+.graph_area {
+  position: relative;
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 5px 0 5px 0;
+}
+
+.y_axis {
+  position: absolute;
+  top: 1px;
+  bottom: 0;
+  width: 40px;
 }
 
 .graph .detail .x_label.flipped {

web/static/js/graph.js

@@ -100,6 +100,7 @@ Prometheus.Graph.prototype.initialize = function() {
   })
 
   self.graph = graphWrapper.find(".graph");
+  self.yAxis = graphWrapper.find(".y_axis");
   self.legend = graphWrapper.find(".legend");
   self.spinner = graphWrapper.find(".spinner");
   self.evalStats = graphWrapper.find(".eval_stats");
@@ -400,7 +401,7 @@ Prometheus.Graph.prototype.showGraph = function() {
   self.rickshawGraph = new Rickshaw.Graph({
     element: self.graph[0],
     height: Math.max(self.graph.innerHeight(), 100),
-    width: Math.max(self.graph.innerWidth(), 200),
+    width: Math.max(self.graph.innerWidth() - 80, 200),
     renderer: (self.stacked.is(":checked") ? "stack" : "line"),
     interpolation: "linear",
     series: self.data,
@@ -411,7 +412,9 @@ Prometheus.Graph.prototype.showGraph = function() {
 
   var yAxis = new Rickshaw.Graph.Axis.Y({
     graph: self.rickshawGraph,
+    orientation: "left",
     tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
+    element: self.yAxis[0],
   });
 
   self.rickshawGraph.render();
@@ -422,6 +425,7 @@ Prometheus.Graph.prototype.updateGraph = function(reloadGraph) {
   if (self.data.length == 0) { return; }
   self.legend.empty();
   if (self.rickshawGraph == null || reloadGraph) {
+    self.yAxis.empty();
     self.graph.empty();
     self.showGraph();
   } else {
@@ -483,7 +487,7 @@ Prometheus.Graph.prototype.updateGraph = function(reloadGraph) {
 Prometheus.Graph.prototype.resizeGraph = function() {
   var self = this;
   self.rickshawGraph.configure({
-    width: Math.max(self.graph.innerWidth(), 200),
+    width: Math.max(self.graph.innerWidth() - 80, 200),
   });
   self.rickshawGraph.render();
 }

web/static/js/graph_template.handlebar

@@ -48,7 +48,10 @@
                   </span>
                 </div>
 
-                <div class="graph"></div>
+                <div class="graph_area">
+                  <div class="y_axis"></div>
+                  <div class="graph"></div>
+                </div>
                 <div class="legend"></div>
               </div>
               <div id="console{{id}}" class="console reload"></div>