IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Graph: Added right y axis label setting and graph support, Closes #599

Browse Source
This commit is contained in:
Torkel Ödegaard
2015-01-11 20:04:33 +01:00
parent 92c3d80189
commit ccbe055e5b
5 changed files with 78 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -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

6
src/app/panels/graph/axisEditor.html
View File

@@ -16,7 +16,7 @@
</div>
<div class="editor-option">
<label class="small">Label</label>
<input ng-change="get_data()" ng-model-onblur placeholder="" type="text" class="input-medium" ng-model="panel.leftYAxisLabel">
<input ng-change="render()" ng-model-onblur placeholder="" type="text" class="input-medium" ng-model="panel.leftYAxisLabel">
</div>
</div>
<div class="section">
@@ -32,6 +32,10 @@
<div class="editor-option">
<label class="small">Max / <a ng-click="toggleGridMinMax('rightMax')">Auto <i class="fa fa-star" ng-show="_.isNull(panel.grid.rightMax)"></i></a></label>
<input type="number" class="input-small" ng-model="panel.grid.rightMax" ng-change="render()" ng-model-onblur />
</div>
<div class="editor-option">
<label class="small">Label</label>
<input ng-change="render()" ng-model-onblur placeholder="" type="text" class="input-medium" ng-model="panel.rightYAxisLabel">
</div>
</div>
</div>

50
src/app/panels/graph/graph.js
View File

@@ -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 = $("<div class='axisLabel left-yaxis-label'></div>")
.text(scope.panel.leftYAxisLabel)
.appendTo(elem);
yaxisLabel.css("margin-top", yaxisLabel.width() / 2);
}
// add right axis labels
if (scope.panel.rightYAxisLabel) {
var rightLabel = $("<div class='axisLabel right-yaxis-label'></div>")
.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 = $("<div class='axisLabel yaxisLabel'></div>")
.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',

23
src/css/less/grafana.less
View File

@@ -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;

41
src/css/less/graph.less
View File

@@ -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;
}