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

fix(phantomsj): fixed issue with y axis label rotation in phantomjs rendered graphs, fixes #6924

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-01-02 12:01:48 +01:00
parent 8030b56bba
commit 083a42942f
3 changed files with 9 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -48,7 +48,7 @@
"karma-phantomjs-launcher": "1.0.2", "karma-phantomjs-launcher": "1.0.2",
"load-grunt-tasks": "3.5.2", "load-grunt-tasks": "3.5.2",
"mocha": "3.2.0", "mocha": "3.2.0",
"phantomjs-prebuilt": "^2.1.13", "phantomjs-prebuilt": "^2.1.14",
"reflect-metadata": "0.1.8", "reflect-metadata": "0.1.8",
"rxjs": "^5.0.0-rc.5", "rxjs": "^5.0.0-rc.5",
"sass-lint": "^1.10.2", "sass-lint": "^1.10.2",

16
public/app/plugins/panel/graph/graph.ts
View File

@ -17,8 +17,6 @@ import {appEvents, coreModule} from 'app/core/core';
import GraphTooltip from './graph_tooltip'; import GraphTooltip from './graph_tooltip';
import {ThresholdManager} from './threshold_manager'; import {ThresholdManager} from './threshold_manager';
var labelWidthCache = {};
coreModule.directive('grafanaGraph', function($rootScope, timeSrv) { coreModule.directive('grafanaGraph', function($rootScope, timeSrv) {
return { return {
restrict: 'A', restrict: 'A',
@ -119,16 +117,6 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv) {
} }
} }
function getLabelWidth(text, elem) {
var labelWidth = labelWidthCache[text];
if (!labelWidth) {
labelWidth = labelWidthCache[text] = elem.width();
}
return labelWidth;
}
function drawHook(plot) { function drawHook(plot) {
// Update legend values // Update legend values
var yaxis = plot.getYAxes(); var yaxis = plot.getYAxes();
@ -156,8 +144,6 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv) {
var yaxisLabel = $("<div class='axisLabel left-yaxis-label flot-temp-elem'></div>") var yaxisLabel = $("<div class='axisLabel left-yaxis-label flot-temp-elem'></div>")
.text(panel.yaxes[0].label) .text(panel.yaxes[0].label)
.appendTo(elem); .appendTo(elem);
yaxisLabel[0].style.marginTop = (getLabelWidth(panel.yaxes[0].label, yaxisLabel) / 2) + 'px';
} }
// add right axis labels // add right axis labels
@ -165,8 +151,6 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv) {
var rightLabel = $("<div class='axisLabel right-yaxis-label flot-temp-elem'></div>") var rightLabel = $("<div class='axisLabel right-yaxis-label flot-temp-elem'></div>")
.text(panel.yaxes[1].label) .text(panel.yaxes[1].label)
.appendTo(elem); .appendTo(elem);
rightLabel[0].style.marginTop = (getLabelWidth(panel.yaxes[1].label, rightLabel) / 2) + 'px';
} }
thresholdManager.draw(plot); thresholdManager.draw(plot);

14
public/sass/components/_panel_graph.scss
View File

@ -297,16 +297,18 @@
.left-yaxis-label { .left-yaxis-label {
top: 50%; top: 50%;
left: -5px; left: 0;
transform: rotate(-90deg); transform: translateX(-50%) translateY(-50%) rotate(-90deg);
transform-origin: left top; // this is needed for phantomsjs 2.1
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
} }
.right-yaxis-label { .right-yaxis-label {
top: 50%; top: 50%;
right: -5px; right: 0;
transform: rotate(90deg); transform: translateX(50%) translateY(-50%) rotate(90deg);
transform-origin: right top; // this is needed for phantomsjs 2.1
-webkit-transform: translateX(50%) translateY(-50%) rotate(90deg);
} }
.axisLabel { .axisLabel {