From b4c51f882255d270283e4fe35c5187accbb8c5a2 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Thu, 15 Feb 2018 12:56:57 +0300
Subject: [PATCH] Fix phantomjs legend rendering issue, #10526

---
 public/app/plugins/panel/graph/legend.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts
index cd43ac58469..2c4f7c6b01b 100644
--- a/public/app/plugins/panel/graph/legend.ts
+++ b/public/app/plugins/panel/graph/legend.ts
@@ -234,6 +234,24 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
           elem.append(seriesElements);
         }
 
+        // Phantomjs has rendering issue for CSS float property, so when legend values are present, legend takes
+        // all graph width and rendering fails. So it should be handled to avoid rendering timeout.
+        // See issue #10526 https://github.com/grafana/grafana/issues/10526
+        if (panel.legend.rightSide) {
+          const legendWidth = elem.parent().width();
+          const panelWidth = elem.parent().width();
+          let maxLegendElementWidth = _.max(_.map(seriesElements, el => $(el).width()));
+          maxLegendElementWidth = _.isNumber(maxLegendElementWidth) ? maxLegendElementWidth : 0;
+          const widthDiff = Math.abs(panelWidth - maxLegendElementWidth);
+          // Set width to content size, but table takes all space anyway, so width shouldn't be more
+          // than 40% of panel in this case.
+          if (widthDiff < panelWidth * 0.1 || legendWidth > panelWidth * 0.9) {
+            const maxTableWidthPercent = 0.4;
+            const maxWidth = Math.min(Math.ceil(maxLegendElementWidth * 1.05), panelWidth * maxTableWidthPercent);
+            elem.css('max-width', maxWidth);
+          }
+        }
+
         if (!panel.legend.rightSide) {
           addScrollbar();
         } else {