adjust bottom margin according to label sizes on x-axis (#1029)

* adjust bottom margin according to label sizes on x-axis Note: same as the method in heatmap.js * add default bottom_margin to dropdown * Change default to auto
apache · Sep 7, 2016 · 9ae231a · 9ae231a
1 parent e783219
commit 9ae231a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git 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
@@ -329,8 +329,8 @@ def __init__(self, viz):
             }),
             '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"),