diff --git a/superset/assets/javascripts/explore/stores/controls.jsx b/superset/assets/javascripts/explore/stores/controls.jsx index febb3efa20889..ce5ee43fb4120 100644 --- 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 index 56c7feac697c6..7f7db4a67ef8e 100644 --- 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 index cc33870dee5e3..9d03a89253724 100644 --- 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 index f9c03c638eaab..6af38830783c1 100644 --- 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