From b28368c859a7b7c6b3155f1e5df8b1b1d52139f6 Mon Sep 17 00:00:00 2001
From: Mitsuhiro Tanda <mitsuhiro.tanda@gmail.com>
Date: Tue, 31 May 2016 01:41:42 +0900
Subject: [PATCH 1/2] cache panel width

---
 public/app/plugins/panel/graph/graph.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js
index 86ad3b5f025..9f0c3ff06eb 100755
--- a/public/app/plugins/panel/graph/graph.js
+++ b/public/app/plugins/panel/graph/graph.js
@@ -31,6 +31,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
         var sortedSeries;
         var legendSideLastValue = null;
         var rootScope = scope.$root;
+        var panelWidth = 0;
 
         rootScope.onAppEvent('setCrosshair', function(event, info) {
           // do not need to to this if event is from this panel
@@ -104,7 +105,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
             return true;
           }
 
-          if (elem.width() === 0) {
+          if (panelWidth === 0) {
             return true;
           }
         }
@@ -159,6 +160,16 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
 
         // Function for rendering panel
         function render_panel() {
+          if (!rootScope.panelWidthCache) {
+            rootScope.panelWidthCache = {};
+          }
+          if (rootScope.panelWidthCache[panel.span]) {
+            panelWidth = rootScope.panelWidthCache[panel.span];
+          } else {
+            panelWidth = elem.width();
+            rootScope.panelWidthCache[panel.span] = panelWidth;
+          }
+
           if (shouldAbortRender()) {
             return;
           }
@@ -276,7 +287,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
         }
 
         function addTimeAxis(options) {
-          var ticks = elem.width() / 100;
+          var ticks = panelWidth / 100;
           var min = _.isUndefined(ctrl.range.from) ? null : ctrl.range.from.valueOf();
           var max = _.isUndefined(ctrl.range.to) ? null : ctrl.range.to.valueOf();
 
@@ -444,7 +455,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
         }
 
         function render_panel_as_graphite_png(url) {
-          url += '&width=' + elem.width();
+          url += '&width=' + panelWidth;
           url += '&height=' + elem.css('height').replace('px', '');
           url += '&bgcolor=1f1f1f'; // @grayDarker & @grafanaPanelBackground
           url += '&fgcolor=BBBFC2'; // @textColor & @grayLighter

From 487b2089a9e5fb5cf55c611362febe62a79ea13a Mon Sep 17 00:00:00 2001
From: Mitsuhiro Tanda <mitsuhiro.tanda@gmail.com>
Date: Tue, 7 Jun 2016 14:28:08 +0900
Subject: [PATCH 2/2] cache label width

---
 public/app/plugins/panel/graph/graph.js | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js
index 9f0c3ff06eb..3097bc6eac6 100755
--- a/public/app/plugins/panel/graph/graph.js
+++ b/public/app/plugins/panel/graph/graph.js
@@ -110,6 +110,23 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
           }
         }
 
+        function getLabelWidth(type, text, elem) {
+          var labelWidth = 0;
+          if (!rootScope.labelWidthCache) {
+            rootScope.labelWidthCache = {};
+          }
+          if (!rootScope.labelWidthCache[type]) {
+            rootScope.labelWidthCache[type] = {};
+          }
+          if (rootScope.labelWidthCache[type][text]) {
+            labelWidth = rootScope.labelWidthCache[type][text];
+          } else {
+            labelWidth = elem.width();
+            rootScope.labelWidthCache[type][text] = labelWidth;
+          }
+          return labelWidth;
+        }
+
         function drawHook(plot) {
           // Update legend values
           var yaxis = plot.getYAxes();
@@ -138,7 +155,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
               .text(panel.yaxes[0].label)
               .appendTo(elem);
 
-            yaxisLabel.css("margin-top", yaxisLabel.width() / 2);
+            yaxisLabel[0].style.marginTop = (getLabelWidth('left', panel.yaxes[0].label, yaxisLabel) / 2) + 'px';
           }
 
           // add right axis labels
@@ -147,7 +164,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
               .text(panel.yaxes[1].label)
               .appendTo(elem);
 
-            rightLabel.css("margin-top", rightLabel.width() / 2);
+            rightLabel[0].style.marginTop = (getLabelWidth('right', panel.yaxes[1].label, rightLabel) / 2) + 'px';
           }
         }