[Bug fix] Plotly legend overlaps plot on small screens (when legend c…

…licked) (#3976)
getredash · Jul 13, 2019 · 4e9da3f · 4e9da3f
1 parent 15a8eec
commit 4e9da3f
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/client/app/visualizations/chart/plotly/utils.js b/client/app/visualizations/chart/plotly/utils.js
@@ -747,6 +747,14 @@ export function updateLayout(plotlyElement, layout, updatePlot) {
   layout.width = Math.floor(plotlyElement.offsetWidth);
   layout.height = Math.floor(plotlyElement.offsetHeight);
 
+  const transformName = find([
+    'transform',
+    'WebkitTransform',
+    'MozTransform',
+    'MsTransform',
+    'OTransform',
+  ], prop => prop in plotlyElement.style);
+
   if (layout.width <= 600) {
     // change legend orientation to horizontal; plotly has a bug with this
     // legend alignment - it does not preserve enough space under the plot;
@@ -794,9 +802,9 @@ export function updateLayout(plotlyElement, layout, updatePlot) {
           layout.height / 2,
           layout.height - (bounds.bottom - bounds.top),
         ));
-        updatePlot(plotlyElement, pick(layout, ['height']));
         // offset the legend
-        legend.setAttribute('transform', 'translate(0, ' + layout.height + ')');
+        legend.style[transformName] = 'translate(0, ' + layout.height + 'px)';
+        updatePlot(plotlyElement, pick(layout, ['height']));
       }
     });
   } else {
@@ -809,6 +817,12 @@ export function updateLayout(plotlyElement, layout, updatePlot) {
       xanchor: 'left',
       yanchor: 'top',
     };
+
+    const legend = plotlyElement.querySelector('.legend');
+    if (legend) {
+      legend.style[transformName] = null;
+    }
+
     updatePlot(plotlyElement, pick(layout, ['width', 'height', 'legend']));
   }
 }