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

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

View File

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

View File

@ -17,8 +17,6 @@ import {appEvents, coreModule} from 'app/core/core';
import GraphTooltip from './graph_tooltip';
import {ThresholdManager} from './threshold_manager';
var labelWidthCache = {};
coreModule.directive('grafanaGraph', function($rootScope, timeSrv) {
return {
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) {
// Update legend values
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>")
.text(panel.yaxes[0].label)
.appendTo(elem);
yaxisLabel[0].style.marginTop = (getLabelWidth(panel.yaxes[0].label, yaxisLabel) / 2) + 'px';
}
// 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>")
.text(panel.yaxes[1].label)
.appendTo(elem);
rightLabel[0].style.marginTop = (getLabelWidth(panel.yaxes[1].label, rightLabel) / 2) + 'px';
}
thresholdManager.draw(plot);

View File

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