mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2024-11-10 07:34:04 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Render graph labels vertically

Browse source 
This helps to make the timeseries with many labels fit on the screen.
This commit is contained in:
Bernerd Schaefer 2013-04-11 18:17:33 +02:00
parent 926d03d2bd
commit 564633ecbc
2 changed files with 32 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,6 @@ body {
.graph {
position: relative;
min-height: 400px;
overflow-x: hidden;
}
svg {
@ -22,3 +21,21 @@ svg {
vertical-align: top;
margin: 0 0 0 0px;
}
.graph .detail .item.active {
line-height: 1.4em;
padding: 0.5em;
}
.graph .detail .item.active .labels {
font-size: 11px;
line-height: 11px;
}
.graph .detail .item .detail_swatch {
float: right;
display: inline-block;
width: 10px;
height: 10px;
margin: 2px 2px 0 8px;
}

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

@ -318,6 +318,7 @@ Prometheus.Graph.prototype.transformData = function(json) {
var data = json.Value.map(function(ts) {
return {
name: self.metricToTsName(ts.Metric),
labels: ts.Metric,
data: ts.Values.map(function(value) {
return {
x: value.Timestamp,
@ -369,7 +370,19 @@ Prometheus.Graph.prototype.updateGraph = function(reloadGraph) {
}
var hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: self.rickshawGraph
graph: self.rickshawGraph,
formatter: function(series, x, y) {
var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
var content = swatch + series.labels["name"] + ": <strong>" + parseInt(y) + '</strong><br>';
var labelStrings = []
for (label in series.labels) {
if (label != "name") {
labelStrings.push("<strong>"+label + "</strong>: " + series.labels[label]);
}
}
var labels = "<div class='labels'>"+ labelStrings.join("<br>") + "</div>";
return content + labels;
}
});
var legend = new Rickshaw.Graph.Legend({