diff --git a/superset/assets/javascripts/explorev2/stores/fields.js b/superset/assets/javascripts/explorev2/stores/fields.js index fab17f84ae55..7a8cf48ba31d 100644 --- a/superset/assets/javascripts/explorev2/stores/fields.js +++ b/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'], diff --git a/superset/assets/visualizations/nvd3_vis.js b/superset/assets/visualizations/nvd3_vis.js index 0ab37cf763f2..ec09a8fc8bf0 100644 --- a/superset/assets/visualizations/nvd3_vis.js +++ b/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; };