From ccbe055e5b482edea8f65005b6d12477ae986c94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 11 Jan 2015 20:04:33 +0100 Subject: [PATCH] Graph: Added right y axis label setting and graph support, Closes #599 --- CHANGELOG.md | 1 + src/app/panels/graph/axisEditor.html | 6 +++- src/app/panels/graph/graph.js | 50 +++++++++++++++++----------- src/css/less/grafana.less | 23 ------------- src/css/less/graph.less | 41 +++++++++++++++++++++++ 5 files changed, 78 insertions(+), 43 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 578156a0229..c0c5802ccef 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - [Issue #1297](https://github.com/grafana/grafana/issues/1297). Graphite: Added cumulative and minimumBelow graphite functions - [Issue #1296](https://github.com/grafana/grafana/issues/1296). InfluxDB: Auto escape column names with special characters. Thanks @steven-aerts - [Issue #1321](https://github.com/grafana/grafana/issues/1321). SingleStatPanel: You can now use template variables in pre & postfix +- [Issue #599](https://github.com/grafana/grafana/issues/599). Graph: Added right y axis label setting and graph support **Fixes** - [Issue #1298](https://github.com/grafana/grafana/issues/1298). InfluxDB: Fix handling of empty array in templating variable query diff --git a/src/app/panels/graph/axisEditor.html b/src/app/panels/graph/axisEditor.html index 36353464324..9965d7ff2f2 100644 --- a/src/app/panels/graph/axisEditor.html +++ b/src/app/panels/graph/axisEditor.html @@ -16,7 +16,7 @@
- +
@@ -32,6 +32,10 @@
+
+
+ +
diff --git a/src/app/panels/graph/graph.js b/src/app/panels/graph/graph.js index 62fd543d0e8..48bd68c9483 100755 --- a/src/app/panels/graph/graph.js +++ b/src/app/panels/graph/graph.js @@ -109,9 +109,9 @@ function (angular, $, kbn, moment, _, GraphTooltip) { } } - function updateLegendValues(plot) { + function drawHook(plot) { + // Update legend values var yaxis = plot.getYAxes(); - for (var i = 0; i < data.length; i++) { var series = data[i]; var axis = yaxis[series.yaxis - 1]; @@ -124,6 +124,29 @@ function (angular, $, kbn, moment, _, GraphTooltip) { series.updateLegendValues(formater, tickDecimals, axis.scaledDecimals + 2); if(!scope.$$phase) { scope.$digest(); } } + + // add left axis labels + if (scope.panel.leftYAxisLabel) { + var yaxisLabel = $("
") + .text(scope.panel.leftYAxisLabel) + .appendTo(elem); + + yaxisLabel.css("margin-top", yaxisLabel.width() / 2); + } + + // add right axis labels + if (scope.panel.rightYAxisLabel) { + var rightLabel = $("
") + .text(scope.panel.rightYAxisLabel) + .appendTo(elem); + + rightLabel.css("margin-top", rightLabel.width() / 2); + } + } + + function processOffsetHook(plot, gridMargin) { + if (scope.panel.leftYAxisLabel) { gridMargin.left = 20; } + if (scope.panel.rightYAxisLabel) { gridMargin.right = 20; } } // Function for rendering panel @@ -137,7 +160,10 @@ function (angular, $, kbn, moment, _, GraphTooltip) { // Populate element var options = { - hooks: { draw: [updateLegendValues] }, + hooks: { + draw: [drawHook], + processOffset: [processOffsetHook], + }, legend: { show: false }, series: { stackpercent: panel.stack ? panel.percentage : false, @@ -173,7 +199,8 @@ function (angular, $, kbn, moment, _, GraphTooltip) { backgroundColor: null, borderWidth: 0, hoverable: true, - color: '#c8c8c8' + color: '#c8c8c8', + margin: { left: 0, right: 0 }, }, selection: { mode: "x", @@ -213,8 +240,6 @@ function (angular, $, kbn, moment, _, GraphTooltip) { } catch (e) { console.log('flotcharts error', e); } - - addAxisLabels(); } if (shouldDelayDraw(panel)) { @@ -317,19 +342,6 @@ function (angular, $, kbn, moment, _, GraphTooltip) { }; } - function addAxisLabels() { - if (scope.panel.leftYAxisLabel) { - elem.css('margin-left', '10px'); - var yaxisLabel = $("
") - .text(scope.panel.leftYAxisLabel) - .appendTo(elem); - - yaxisLabel.css("margin-top", yaxisLabel.width() / 2 - 20); - } else if (elem.css('margin-left')) { - elem.css('margin-left', ''); - } - } - function configureAxisOptions(data, options) { var defaults = { position: 'left', diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index edaa639a897..d5dad2c7920 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -87,29 +87,6 @@ } } -.yaxisLabel { - top: 50%; - left: -20px; - transform: rotate(-90deg); - -o-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - -moz-transform: rotate(-90deg); - -webkit-transform: rotate(-90deg); - transform-origin: 0 0; - -o-transform-origin: 0 0; - -ms-transform-origin: 0 0; - -moz-transform-origin: 0 0; - -webkit-transform-origin: 0 0; -} - -.axisLabel { - color: @textColor; - font-size: @fontSizeSmall; - position: absolute; - text-align: center; - font-size: 12px; -} - .dashboard-fullscreen { .main-view-container { overflow: hidden; diff --git a/src/css/less/graph.less b/src/css/less/graph.less index d6856f5bbf9..5ad38283689 100644 --- a/src/css/less/graph.less +++ b/src/css/less/graph.less @@ -228,3 +228,44 @@ text-align: right; } } + +.left-yaxis-label { + top: 50%; + left: -5px; + transform: rotate(-90deg); + -o-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + transform-origin: left top; + -o-transform-origin: left top; + -ms-transform-origin: left top; + -moz-transform-origin: left top; + -webkit-transform-origin: left top; +} + +.right-yaxis-label { + top: 50%; + right: -5px; + + -webkit-transform: rotate(90deg); + -webkit-transform-origin: right top; + -moz-transform: rotate(90deg); + -moz-transform-origin: right top; + -ms-transform: rotate(90deg); + -ms-transform-origin: right top; + -o-transform: rotate(90deg); + -o-transform-origin: right top; + transform: rotate(90deg); + transform-origin: right top; +} + + +.axisLabel { + color: @textColor; + font-size: @fontSizeSmall; + position: absolute; + text-align: center; + font-size: 12px; +} +