diff --git a/superset/assets/javascripts/explore/stores/controls.jsx b/superset/assets/javascripts/explore/stores/controls.jsx index 641aaaed9a..e9d73013d8 100644 --- a/superset/assets/javascripts/explore/stores/controls.jsx +++ b/superset/assets/javascripts/explore/stores/controls.jsx @@ -1261,10 +1261,16 @@ export const controls = { }, show_brush: { - type: 'CheckboxControl', - label: t('Range Filter'), + type: 'SelectControl', + label: t('Show Range Filter'), renderTrigger: true, - default: false, + clearable: false, + default: 'auto', + choices: [ + ['yes', 'Yes'], + ['no', 'No'], + ['auto', 'Auto'], + ], description: t('Whether to display the time range interactive selector'), }, diff --git a/superset/assets/visualizations/nvd3_vis.js b/superset/assets/visualizations/nvd3_vis.js index 8bd7229710..be73433d9e 100644 --- a/superset/assets/visualizations/nvd3_vis.js +++ b/superset/assets/visualizations/nvd3_vis.js @@ -22,6 +22,7 @@ const minBarWidth = 15; // Limit on how large axes margins can grow as the chart window is resized const maxMarginPad = 30; const animationTime = 1000; +const minHeightForBrush = 480; const BREAKPOINTS = { small: 340, @@ -158,9 +159,14 @@ function nvd3Vis(slice, payload) { if (svg.empty()) { svg = d3.select(slice.selector).append('svg'); } + let height = slice.height(); switch (vizType) { case 'line': - if (fd.show_brush) { + if ( + fd.show_brush === true || + fd.show_brush === 'yes' || + (fd.show_brush === 'auto' && height >= minHeightForBrush) + ) { chart = nv.models.lineWithFocusChart(); chart.focus.xScale(d3.time.scale.utc()); chart.x2Axis.staggerLabels(false); @@ -332,7 +338,6 @@ function nvd3Vis(slice, payload) { } } - let height = slice.height(); if (vizType === 'bullet') { height = Math.min(height, 50); }