diff --git a/caravel/assets/visualizations/nvd3_vis.js b/caravel/assets/visualizations/nvd3_vis.js index 0809f56070..8ed92235cb 100644 --- a/caravel/assets/visualizations/nvd3_vis.js +++ b/caravel/assets/visualizations/nvd3_vis.js @@ -67,8 +67,22 @@ function nvd3Vis(slice) { return; } + // Calculates the longest label size for stretching bottom margin + function calculateStretchMargins(payloadData) { + const axisLabels = payloadData.data[0].values; + let stretchMargin = 0; + const pixelsPerCharX = 4.5; // approx, depends on font size + let maxLabelSize = 0; + for (let i = 0; i < axisLabels.length; i++) { + maxLabelSize = Math.max(axisLabels[i].x.length, maxLabelSize); + } + stretchMargin = Math.ceil(Math.max(stretchMargin, pixelsPerCharX * maxLabelSize)); + return stretchMargin; + } + let width = slice.width(); const fd = payload.form_data; + const barchartWidth = function () { let bars; if (fd.bar_stacked) { @@ -81,6 +95,7 @@ function nvd3Vis(slice) { } return width; }; + const vizType = fd.viz_type; const f = d3.format('.3s'); const reduceXTicks = fd.reduce_x_ticks || false; @@ -294,9 +309,13 @@ function nvd3Vis(slice) { chart.margin({ left: 90 }); } - if (fd.bottom_margin) { + if (fd.bottom_margin === 'auto') { + const stretchMargin = calculateStretchMargins(payload); + chart.margin({ bottom: stretchMargin }); + } else { chart.margin({ bottom: fd.bottom_margin }); } + let svg = d3.select(slice.selector).select('svg'); if (svg.empty()) { svg = d3.select(slice.selector).append('svg'); diff --git a/caravel/forms.py b/caravel/forms.py index 42f293e7d0..767a31e434 100755 --- a/caravel/forms.py +++ b/caravel/forms.py @@ -329,8 +329,8 @@ class FormFactory(object): }), 'bottom_margin': (FreeFormSelectField, { "label": _("Bottom Margin"), - "choices": self.choicify([50, 75, 100, 125, 150, 200]), - "default": 50, + "choices": self.choicify(['auto', 50, 75, 100, 125, 150, 200]), + "default": 'auto', "description": _( "Bottom marging, in pixels, allowing for more room for " "axis labels"),