Improvments to NVD3 charts (axis labels & min bar width) (#629)

caravel/assets/visualizations/nvd3_vis.css

@@ -6,3 +6,24 @@ g.caravel path {
   font-weight: bold;
   font-size: 15px !important;
 }
+
+text.nv-axislabel {
+  // font-weight: bold;
+  font-size: 14px;
+}
+
+.dist_bar .slice_container {
+  overflow-x: auto;
+}
+
+.dist_bar svg.nvd3-svg {
+  width: auto;
+}
+
+.bar .slice_container {
+  overflow-x: auto;
+}
+
+.bar svg.nvd3-svg {
+  width: auto;
+}

caravel/assets/visualizations/nvd3_vis.js

@@ -1,5 +1,4 @@
 // JS
-var $  = window.$ || require('jquery');
 var d3 = window.d3 || require('d3');
 var px = window.px || require('../javascripts/modules/caravel.js');
 var nv = require('nvd3');
@@ -8,12 +7,23 @@ var nv = require('nvd3');
 require('../node_modules/nvd3/build/nv.d3.min.css');
 require('./nvd3_vis.css');
 
+const minBarWidth = 15;
+
 function nvd3Vis(slice) {
   var chart;
   var colorKey = 'key';
 
   var render = function () {
     d3.json(slice.jsonEndpoint(), function (error, payload) {
+      var width = slice.width();
+      var barchartWidth = function () {
+        var bars = d3.sum(payload.data, function (d) { return d.values.length; });
+        if (bars * minBarWidth > width) {
+          return bars * minBarWidth;
+        } else {
+          return width;
+        }
+      };
       slice.container.html('');
       if (error) {
         if (error.responseText) {
@@ -53,9 +63,11 @@ function nvd3Vis(slice) {
             .showControls(true)
             .groupSpacing(0.1);
 
+            width = barchartWidth();
+            chart.width(width);
             chart.xAxis
             .showMaxMin(false)
-            .staggerLabels(true);
+            .staggerLabels(true)
 
             chart.stacked(fd.bar_stacked);
             break;
@@ -71,6 +83,8 @@ function nvd3Vis(slice) {
             .showMaxMin(false);
 
             chart.stacked(fd.bar_stacked);
+            width = barchartWidth();
+            chart.width(width);
             break;
 
           case 'pie':
@@ -206,6 +220,22 @@ function nvd3Vis(slice) {
           return px.color.category21(d[colorKey]);
         });
 
+        if (fd.x_axis_label && fd.x_axis_label !== '' && chart.xAxis) {
+          var distance = 0;
+          if (fd.bottom_margin) {
+            distance = fd.bottom_margin - 50;
+          }
+          chart.xAxis.axisLabel(fd.x_axis_label).axisLabelDistance(distance);
+        }
+
+        if (fd.y_axis_label && fd.y_axis_label !== '' && chart.yAxis) {
+          chart.yAxis.axisLabel(fd.y_axis_label);
+          chart.margin({ left: 90 });
+        }
+
+        if (fd.bottom_margin) {
+          chart.margin({ bottom: fd.bottom_margin });
+        }
         var svg = d3.select(slice.selector).select("svg");
         if (svg.empty()) {
           svg = d3.select(slice.selector).append("svg");
@@ -215,6 +245,7 @@ function nvd3Vis(slice) {
         .datum(payload.data)
         .transition().duration(500)
         .attr('height', height)
+        .attr('width', width)
         .call(chart);
 
         return chart;

caravel/forms.py

@@ -285,6 +285,14 @@ def __init__(self, viz):
                     "Defines the origin where time buckets start, "
                     "accepts natural dates as in 'now', 'sunday' or '1970-01-01'")
             }),
+            'bottom_margin': (FreeFormSelectField, {
+                "label": _("Bottom Margin"),
+                "choices": self.choicify([50, 75, 100, 125, 150, 200]),
+                "default": 50,
+                "description": _(
+                    "Bottom marging, in pixels, allowing for more room for "
+                    "axis labels"),
+            }),
             'granularity': (FreeFormSelectField, {
                 "label": _("Time Granularity"),
                 "default": "one day",
@@ -549,6 +557,14 @@ def __init__(self, viz):
                 ),
                 "default": 'https: //www.youtube.com/embed/JkI5rg_VcQ4',
             }),
+            'x_axis_label': (TextField, {
+                "label": _("X Axis Label"),
+                "default": '',
+            }),
+            'y_axis_label': (TextField, {
+                "label": _("X Axis Label"),
+                "default": '',
+            }),
             'where': (TextField, {
                 "label": _("Custom WHERE clause"),
                 "default": '',

caravel/viz.py

@@ -761,6 +761,7 @@ class BubbleViz(NVD3Viz):
             ('x_log_scale', 'y_log_scale'),
             ('show_legend', None),
             'max_bubble_size',
+            ('x_axis_label', 'y_axis_label'),
         )
     },)
 
@@ -925,8 +926,9 @@ class NVD3TimeSeriesViz(NVD3Viz):
             ('show_brush', 'show_legend'),
             ('rich_tooltip', 'y_axis_zero'),
             ('y_log_scale', 'contribution'),
-            ('x_axis_format', 'y_axis_format'),
             ('line_interpolation', 'x_axis_showminmax'),
+            ('x_axis_format', 'y_axis_format'),
+            ('x_axis_label', 'y_axis_label'),
         ),
     }, {
         'label': _('Advanced Analytics'),
@@ -1071,7 +1073,8 @@ class NVD3TimeSeriesBarViz(NVD3TimeSeriesViz):
             ('y_log_scale', 'contribution'),
             ('x_axis_format', 'y_axis_format'),
             ('line_interpolation', 'bar_stacked'),
-            ('x_axis_showminmax', None),
+            ('x_axis_showminmax', 'bottom_margin'),
+            ('x_axis_label', 'y_axis_label'),
         ), }] + [NVD3TimeSeriesViz.fieldsets[2]]
 
 
@@ -1153,7 +1156,8 @@ class DistributionBarViz(DistributionPieViz):
             'metrics',
             'row_limit',
             ('show_legend', 'bar_stacked'),
-            ('y_axis_format', None),
+            ('y_axis_format', 'bottom_margin'),
+            ('x_axis_label', 'y_axis_label'),
         )
     },)
     form_overrides = {