[nvd3] fix bubble axis (#3332)

number of issues are addressed here: * x axis formatting doesn't apply in bubble chart * adding option to show/hide bounds of x and y axis * with a flaky 'auto' margin mode, allow user to specify hard values or auto * x label font-size was different than y axis * show more options and reorg Control panels for Axes in `line` viz
apache · Aug 18, 2017 · a7ba6e4 · a7ba6e4
1 parent e31ad22
commit a7ba6e4
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 23 deletions.
diff --git a/superset/assets/javascripts/explore/stores/controls.jsx b/superset/assets/javascripts/explore/stores/controls.jsx
@@ -94,6 +94,7 @@ export const controls = {
   y_axis_bounds: {
     type: 'BoundsControl',
     label: 'Y Axis Bounds',
+    renderTrigger: true,
     default: [null, null],
     description: (
       'Bounds for the Y axis. When left empty, the bounds are ' +
@@ -414,7 +415,18 @@ export const controls = {
     label: 'Bottom Margin',
     choices: formatSelectOptions(['auto', 50, 75, 100, 125, 150, 200]),
     default: 'auto',
-    description: 'Bottom marging, in pixels, allowing for more room for axis labels',
+    renderTrigger: true,
+    description: 'Bottom margin, in pixels, allowing for more room for axis labels',
+  },
+
+  left_margin: {
+    type: 'SelectControl',
+    freeForm: true,
+    label: 'Left Margin',
+    choices: formatSelectOptions(['auto', 50, 75, 100, 125, 150, 200]),
+    default: 'auto',
+    renderTrigger: true,
+    description: 'Left margin, in pixels, allowing for more room for axis labels',
   },
 
   granularity: {
@@ -1005,6 +1017,14 @@ export const controls = {
     description: 'Whether to display the min and max values of the X axis',
   },
 
+  y_axis_showminmax: {
+    type: 'CheckboxControl',
+    label: 'Y bounds',
+    renderTrigger: true,
+    default: true,
+    description: 'Whether to display the min and max values of the Y axis',
+  },
+
   rich_tooltip: {
     type: 'CheckboxControl',
     label: 'Rich Tooltip',

diff --git a/superset/assets/javascripts/explore/stores/visTypes.js b/superset/assets/javascripts/explore/stores/visTypes.js
@@ -143,17 +143,24 @@ export const visTypes = {
         controlSetRows: [
           ['color_scheme'],
           ['show_brush', 'show_legend'],
-          ['rich_tooltip', null],
-          ['show_markers', 'x_axis_showminmax'],
+          ['rich_tooltip', 'show_markers'],
           ['line_interpolation', 'contribution'],
         ],
       },
       {
-        label: 'Axes',
+        label: 'X Axis',
+        controlSetRows: [
+          ['x_axis_label', 'bottom_margin'],
+          ['x_axis_showminmax', 'x_log_scale'],
+          ['x_axis_format', null],
+        ],
+      },
+      {
+        label: 'Y Axis',
         controlSetRows: [
-          ['x_axis_label', 'x_axis_format'],
-          ['y_axis_label', 'y_axis_bounds'],
-          ['y_axis_format', 'y_log_scale'],
+          ['y_axis_label', 'left_margin'],
+          ['y_axis_showminmax', 'y_log_scale'],
+          ['y_axis_format', 'y_axis_bounds'],
         ],
       },
       sections.NVD3TimeSeries[1],
@@ -492,15 +499,17 @@ export const visTypes = {
       {
         label: 'X Axis',
         controlSetRows: [
+          ['x_axis_label', 'left_margin'],
           ['x', 'x_axis_format'],
-          ['x_axis_label', 'x_log_scale'],
+          ['x_log_scale', 'x_axis_showminmax'],
         ],
       },
       {
         label: 'Y Axis',
         controlSetRows: [
+          ['y_axis_label', 'bottom_margin'],
           ['y', 'y_axis_format'],
-          ['y_axis_label', 'y_log_scale'],
+          ['y_log_scale', 'y_axis_showminmax'],
         ],
       },
     ],

diff --git a/superset/assets/visualizations/nvd3_vis.css b/superset/assets/visualizations/nvd3_vis.css
@@ -31,3 +31,7 @@ text.nv-axislabel {
 .bar svg.nvd3-svg {
   width: auto;
 }
+
+text.nv-axislabel {
+  font-size: 14px !important;
+}
diff --git a/superset/assets/visualizations/nvd3_vis.js b/superset/assets/visualizations/nvd3_vis.js
@@ -252,6 +252,8 @@ function nvd3Vis(slice, payload) {
         });
         chart.pointRange([5, fd.max_bubble_size ** 2]);
         chart.pointDomain([0, d3.max(payload.data, d => d3.max(d.values, v => v.size))]);
+        chart.xAxis.showMaxMin(fd.x_axis_showminmax);
+        chart.yAxis.showMaxMin(fd.y_axis_showminmax);
         break;
 
       case 'area':
@@ -324,7 +326,7 @@ function nvd3Vis(slice, payload) {
       chart.x2Axis.tickFormat(xAxisFormatter);
       height += 30;
     }
-    if (isTimeSeries && chart.xAxis && chart.xAxis.tickFormat) {
+    if (chart.xAxis && chart.xAxis.tickFormat) {
       chart.xAxis.tickFormat(xAxisFormatter);
     }
 
@@ -368,18 +370,6 @@ function nvd3Vis(slice, payload) {
       }
     }
 
-    if (fd.x_axis_label && fd.x_axis_label !== '' && chart.xAxis) {
-      let distance = 0;
-      if (fd.bottom_margin && !isNaN(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 === 'auto') {
       if (vizType === 'dist_bar') {
@@ -441,13 +431,39 @@ function nvd3Vis(slice, payload) {
             chartMargins.right = maxYAxis2LabelWidth + marginPad;
           }
         }
-
         // apply margins
         chart.margin(chartMargins);
       }
+
       if (fd.x_axis_label && fd.x_axis_label !== '' && chart.xAxis) {
         chart.margin({ bottom: maxXAxisLabelHeight + marginPad + 25 });
       }
+      if (fd.bottom_margin && fd.bottom_margin !== 'auto') {
+        chart.margin().bottom = fd.bottom_margin;
+      }
+      if (fd.left_margin && fd.left_margin !== 'auto') {
+        chart.margin().left = fd.left_margin;
+      }
+
+      // Axis labels
+      const margins = chart.margin();
+      if (fd.x_axis_label && fd.x_axis_label !== '' && chart.xAxis) {
+        let distance = 0;
+        if (margins.bottom && !isNaN(margins.bottom)) {
+          distance = margins.bottom - 45;
+        }
+        // nvd3 bug axisLabelDistance is disregarded on xAxis
+        // https://github.com/krispo/angular-nvd3/issues/90
+        chart.xAxis.axisLabel(fd.x_axis_label).axisLabelDistance(distance);
+      }
+
+      if (fd.y_axis_label && fd.y_axis_label !== '' && chart.yAxis) {
+        let distance = 0;
+        if (margins.left && !isNaN(margins.left)) {
+          distance = margins.left - 70;
+        }
+        chart.yAxis.axisLabel(fd.y_axis_label).axisLabelDistance(distance);
+      }
 
       // render chart
       svg