From f15d52d121c238aef947c077bca395e0e7ff0634 Mon Sep 17 00:00:00 2001 From: Levko Kravets Date: Tue, 25 Feb 2020 12:28:45 +0200 Subject: [PATCH] Fix: Chart with a horizontal legend sometimes doesn't render properly --- client/app/visualizations/chart/plotly/applyLayoutFixes.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/client/app/visualizations/chart/plotly/applyLayoutFixes.js b/client/app/visualizations/chart/plotly/applyLayoutFixes.js index 356780e3fa..e815f8e7fd 100644 --- a/client/app/visualizations/chart/plotly/applyLayoutFixes.js +++ b/client/app/visualizations/chart/plotly/applyLayoutFixes.js @@ -25,6 +25,10 @@ export default function applyLayoutFixes(plotlyElement, layout, updatePlot) { ); if (layout.width <= 600) { + // Save current `layout.height` value because `updatePlot().then(...)` handler may be called multiple + // times within single update, and since the handler mutates `layout` object - it may lead to bugs + const layoutHeight = layout.height; + // change legend orientation to horizontal; plotly has a bug with this // legend alignment - it does not preserve enough space under the plot; // so we'll hack this: update plot (it will re-render legend), compute @@ -71,7 +75,7 @@ export default function applyLayoutFixes(plotlyElement, layout, updatePlot) { // plot; if legend is too large, plotly will reduce it's height and // show a scrollbar; in this case, height of plot === height of legend, // so we can split container's height half by half between them. - layout.height = Math.floor(Math.max(layout.height / 2, layout.height - (bounds.bottom - bounds.top))); + layout.height = Math.floor(Math.max(layoutHeight / 2, layoutHeight - (bounds.bottom - bounds.top))); // offset the legend legend.style[transformName] = "translate(0, " + layout.height + "px)"; updatePlot(plotlyElement, pick(layout, ["height"]));