[vis] fix line chart when slice is really narrow (#2620)

* only show legend if larger than small breakpoint

* fix text length getter, it was returning -Infinity

superset/assets/visualizations/nvd3_vis.js

@@ -19,6 +19,10 @@ const timeStampFormats = TIME_STAMP_OPTIONS.map(opt => opt[0]);
 const minBarWidth = 15;
 const animationTime = 1000;
 
+const BREAKPOINTS = {
+  small: 340,
+};
+
 const addTotalBarValues = function (chart, data, stacked) {
   const svg = d3.select('svg');
   const format = d3.format('.3s');
@@ -65,13 +69,12 @@ function hideTooltips() {
   $('.nvtooltip').css({ opacity: 0 });
 }
 
-function getMaxLabelSize(container, axisClass, widthOrHeight) {
+function getMaxLabelSize(container, axisClass) {
   // axis class = .nv-y2  // second y axis on dual line chart
   // axis class = .nv-x  // x axis on time series line chart
-  const labelEls = container.find(`.${axisClass} .tick text`);
-  const labelDimensions = labelEls.map(i => labelEls[i].getBoundingClientRect()[widthOrHeight]);
-  const max = Math.max(...labelDimensions);
-  return max;
+  const labelEls = container.find(`.${axisClass} text`);
+  const labelDimensions = labelEls.map(i => labelEls[i].getComputedTextLength());
+  return Math.max(...labelDimensions);
 }
 
 function nvd3Vis(slice, payload) {
@@ -286,7 +289,11 @@ function nvd3Vis(slice, payload) {
     }
 
     if ('showLegend' in chart && typeof fd.show_legend !== 'undefined') {
-      chart.showLegend(fd.show_legend);
+      if (width < BREAKPOINTS.small && vizType !== 'pie') {
+        chart.showLegend(false);
+      } else {
+        chart.showLegend(fd.show_legend);
+      }
     }
 
     let height = slice.height() - 15;
@@ -385,7 +392,7 @@ function nvd3Vis(slice, payload) {
       chart.yAxis1.tickFormat(yAxisFormatter1);
       chart.yAxis2.tickFormat(yAxisFormatter2);
       customizeToolTip(chart, xAxisFormatter, [yAxisFormatter1, yAxisFormatter2]);
-      chart.showLegend(true);
+      chart.showLegend(width > BREAKPOINTS.small);
     }
     svg
     .datum(payload.data)
@@ -406,15 +413,15 @@ function nvd3Vis(slice, payload) {
     // ---- (x axis labels are rotated 45 degrees so we use height),
     // - adjust margins based on these measures and render again
     if (isTimeSeries && vizType !== 'bar') {
-      const maxXAxisLabelHeight = getMaxLabelSize(slice.container, 'nv-x', 'height');
+      const maxXAxisLabelHeight = getMaxLabelSize(slice.container, 'nv-x');
       const marginPad = isExplore ? width * 0.01 : width * 0.03;
       const chartMargins = {
         bottom: maxXAxisLabelHeight + marginPad,
         right: maxXAxisLabelHeight + marginPad,
       };
 
       if (vizType === 'dual_line') {
-        const maxYAxis2LabelWidth = getMaxLabelSize(slice.container, 'nv-y2', 'width');
+        const maxYAxis2LabelWidth = getMaxLabelSize(slice.container, 'nv-y2');
         // use y axis width if it's wider than axis width/height
         if (maxYAxis2LabelWidth > maxXAxisLabelHeight) {
           chartMargins.right = maxYAxis2LabelWidth + marginPad;