mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-03-05 20:59:13 -08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

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

Browse source 
Display Y-axis outside of graph.
This commit is contained in:
Matt T. Proud 2013-07-01 06:06:11 -07:00
parent ad656ba58d f42adc1cc0
commit 2d538bf55a
3 changed files with 29 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
web/static/css/graph.css
View file

@ -16,18 +16,33 @@ a:active { color: black; }
.graph { .graph {
position: relative; position: relative;
left: 40px;
min-height: 400px; 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 { .legend {
display: inline-block; display: inline-block;
vertical-align: top; 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 { .graph .detail .x_label.flipped {

8
web/static/js/graph.js
View file

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

5
web/static/js/graph_template.handlebar
View file

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