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

package.json

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

public/app/plugins/panel/graph/graph.ts

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

public/sass/components/_panel_graph.scss

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