#4692 When resizing chart to a certain size it errors out

getredash · May 21, 2020 · 2c974e0 · 2c974e0
1 parent dfc873f
commit 2c974e0
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/viz-lib/src/visualizations/chart/Renderer/PlotlyChart.jsx b/viz-lib/src/visualizations/chart/Renderer/PlotlyChart.jsx
@@ -1,4 +1,4 @@
-import { isArray, isObject } from "lodash";
+import { isArray, isString, isObject, startsWith } from "lodash";
 import React, { useState, useEffect, useContext } from "react";
 import useMedia from "use-media";
 import { ErrorBoundaryContext } from "@/components/ErrorBoundary";
@@ -13,6 +13,11 @@ function catchErrors(func, errorHandler) {
     try {
       return func(...args);
     } catch (error) {
+      // This error happens only when chart width is 20px and looks that
+      // it's safe to just ignore it: 1px less or more and chart will get fixed.
+      if (isString(error) && startsWith(error, "ax.dtick error")) {
+        return;
+      }
       errorHandler.handleError(error);
     }
   };

diff --git a/viz-lib/src/visualizations/chart/plotly/applyLayoutFixes.js b/viz-lib/src/visualizations/chart/plotly/applyLayoutFixes.js
@@ -113,8 +113,9 @@ function placeLegendAuto(plotlyElement, layout, updatePlot) {
 
 export default function applyLayoutFixes(plotlyElement, layout, options, updatePlot) {
   // update layout size to plot container
-  layout.width = Math.floor(plotlyElement.offsetWidth);
-  layout.height = Math.floor(plotlyElement.offsetHeight);
+  // plot size should be at least 5x5px
+  layout.width = Math.max(5, Math.floor(plotlyElement.offsetWidth));
+  layout.height = Math.max(5, Math.floor(plotlyElement.offsetHeight));
 
   if (options.legend.enabled) {
     switch (options.legend.placement) {

diff --git a/viz-lib/src/visualizations/chart/plotly/prepareLayout.js b/viz-lib/src/visualizations/chart/plotly/prepareLayout.js
@@ -119,8 +119,9 @@ function prepareBoxLayout(layout, options, data) {
 export default function prepareLayout(element, options, data) {
   const layout = {
     margin: { l: 10, r: 10, b: 5, t: 20, pad: 4 },
-    width: Math.floor(element.offsetWidth),
-    height: Math.floor(element.offsetHeight),
+    // plot size should be at least 5x5px
+    width: Math.max(5, Math.floor(element.offsetWidth)),
+    height: Math.max(5, Math.floor(element.offsetHeight)),
     autosize: false,
     showlegend: has(options, "legend") ? options.legend.enabled : true,
   };