[vis] fix axis labels display (#2066)

* re-render chart after adjusting for long axis labels

* measure all of the labels and take the max height

* add missing isTimeSeries var

* fix linting

* use jQuery to get text ticks

* rotate 45 rather than 90

superset/assets/javascripts/explorev2/stores/fields.js

@@ -18,7 +18,7 @@ const ROW_LIMIT_OPTIONS = [10, 50, 100, 250, 500, 1000, 5000, 10000, 50000];
 
 const SERIES_LIMITS = [0, 5, 10, 25, 50, 100, 500];
 
-const TIME_STAMP_OPTIONS = [
+export const TIME_STAMP_OPTIONS = [
   ['smart_date', 'Adaptative formating'],
   ['%m/%d/%Y', '%m/%d/%Y | 01/14/2019'],
   ['%Y-%m-%d', '%Y-%m-%d | 2019-01-14'],

superset/assets/visualizations/nvd3_vis.js

@@ -1,15 +1,18 @@
 // JS
+import $ from 'jquery';
 import { category21 } from '../javascripts/modules/colors';
 import { timeFormatFactory, formatDate } from '../javascripts/modules/dates';
 import { customizeToolTip } from '../javascripts/modules/utils';
 
 const d3 = require('d3');
 const nv = require('nvd3');
+import { TIME_STAMP_OPTIONS } from '../javascripts/explorev2/stores/fields';
 
 // CSS
 require('../node_modules/nvd3/build/nv.d3.min.css');
 require('./nvd3_vis.css');
 
+const timeStampFormats = TIME_STAMP_OPTIONS.map(opt => opt[0]);
 const minBarWidth = 15;
 const animationTime = 1000;
 
@@ -292,6 +295,12 @@ function nvd3Vis(slice, payload) {
       chart.xAxis.tickFormat(xAxisFormatter);
     }
 
+    const isTimeSeries = timeStampFormats.indexOf(fd.x_axis_format) > -1;
+    // if x axis format is a date format, rotate label 90 degrees
+    if (isTimeSeries) {
+      chart.xAxis.rotateLabels(45);
+    }
+
     if (chart.hasOwnProperty('x2Axis')) {
       chart.x2Axis.tickFormat(xAxisFormatter);
       height += 30;
@@ -367,6 +376,32 @@ function nvd3Vis(slice, payload) {
       .style('stroke-opacity', 1)
       .style('fill-opacity', 1);
     }
+
+    // Hack to adjust margins to accomodate long x axis tick labels,
+    // has to be done only after the chart has been rendered once,
+    // then we measure the height of the labels (they are rotated 90 degrees),
+    // then we adjust the bottom margin and render again.
+    if (isTimeSeries) {
+      // get height of formatted axis labels
+      const labelEls = $('.nv-x.nv-axis .tick text');
+      const labelHeights = labelEls.map(i => labelEls[i].getBoundingClientRect().height);
+      const xAxisHeight = Math.max.apply(Math, labelHeights);
+
+      // set new bottom margin to accomodate labels
+      chart.margin({
+        bottom: xAxisHeight + 40,
+        right: xAxisHeight,
+      });
+
+      // render chart
+      svg
+      .datum(payload.data)
+      .transition().duration(500)
+      .attr('height', height)
+      .attr('width', width)
+      .call(chart);
+    }
+
     return chart;
   };