Migrating shared NVD3 controls to new module (#9525)

* proto module

* caught a missed 'freq' unique control

* line_interpolation

* linting

* showLegend

* show_controls

* xAxisLabel

* bottomMargin

* x_ticks_layout

* missed one

* x_axis_format

* yLogScale

* y_axis_bounds

* linting

* nixing yarn lock

* x_axis_showminmax

* xAxisShowminmax control

* richTooltip

* linting, syntax fix

* show_bar_value, bar_stacked

* reduceXticks, yaxislabel

* left_margin, max_bubble_size, y_axis_showminmax

* show_labels

* send_time_range, y_axis_2_format, show_markers, order_bars

* nixing commented imports

* fake controls

* looking up actual controls for comparison.

* adding key to test setup

* controls inventory

* apache junk

* lint ✨

* ignore null controls

* fixing goofed up spread operation for xAxisFormat config

* lint ✨

* fixes for errors caused by <hr> element in filterbox controls

* fixing filter controls for 'druid_time_origin', 'granularity', 'granularity_sqla', 'time_grain_sqla'

* getControlsInventory -> getControlsForVizType

* further renaming of chartControlsInventory - > getControlsForVizType

Co-authored-by: David Aaron Suddjian <aasuddjian@gmail.com>

CONTRIBUTING.md

@@ -1007,7 +1007,6 @@ Note not all fields are correctly catagorized. The fields vary based on visualiz
 | Field             | Type     | Notes                                               |
 | ----------------- | -------- | --------------------------------------------------- |
 | `metric_2`        | -        | The **Right Axis Metric** widget. See Query section |
-| `y_axis_2_format` | _string_ | The **Right Axis Format** widget                    |
 
 ### Query
 
@@ -1019,7 +1018,6 @@ Note not all fields are correctly catagorized. The fields vary based on visualiz
 | `contribution`                                                                                         | _boolean_                                         | The **Contribution** widget                       |
 | `groupby`                                                                                              | _array(string)_                                   | The **Group by** or **Series** widget             |
 | `limit`                                                                                                | _number_                                          | The **Series Limit** widget                       |
-| `max_bubble_size`                                                                                      | _number_                                          | The **Max Bubble Size** widget                    |
 | `metric`<br>`metric_2`<br>`metrics`<br>`percent_mertics`<br>`secondary_metric`<br>`size`<br>`x`<br>`y` | _string_,_object_,_array(string)_,_array(object)_ | The metric(s) depending on the visualization type |
 | `order_asc`                                                                                            | _boolean_                                         | The **Sort Descending** widget                    |
 | `row_limit`                                                                                            | _number_                                          | The **Row limit** widget                          |
@@ -1042,38 +1040,17 @@ The filter-box configuration references column names (via the `column` key) and
 | `color_picker`        | _object_  | The **Fixed Color** widget                       |
 | `global_opacity`      | _number_  | The **Opacity** widget                           |
 | `label_colors`        | _object_  | The **Color Scheme** widget                      |
-| `line_interpolation`  | _string_  | The **Line Style** widget                        |
 | `link_length`         | _number_  | The **No of Bins** widget                        |
 | `normalized`          | _boolean_ | The **Normalized** widget                        |
 | `number_format`       | _string_  | The **Number format** widget                     |
-| `rich_tooltip`        | _boolean_ | The **Rich Tooltip** widget                      |
-| `send_time_range`     | _boolean_ | The **Show Markers** widget                      |
-| `show_brush`          | _string_  | The **Show Range Filter** widget                 |
-| `show_legend`         | _boolean_ | The **Legend** widget                            |
-| `show_markers`        | _string_  | The **Show Markers** widget                      |
-
-### X Axis
-
-| Field                | Type      | Notes                        |
-| -------------------- | --------- | ---------------------------- |
-| `bottom_margin`      | _string_  | The **Bottom Margin** widget |
-| `x_axis_format`      | _string_  | The **X Axis Format** widget |
-| `x_axis_label`       | _string_  | The **X Axis Label** widget  |
-| `x_axis_showminmax`  | _boolean_ | The **X bounds** widget      |
-| `x_ticks_layout`     | _string_  | The **X Tick Layout** widget |
 
 ### Y Axis
 
 | Field               | Type            | Notes                        |
 | ------------------- | --------------- | ---------------------------- |
-| `left_margin`       | _number_        | The **Left Margin** widget   |
 | `y_axis_2_label`    | _N/A_           | _Deprecated?_                |
-| `y_axis_bounds`     | _array(string)_ | The **Y Axis Bounds** widget |
 | `y_axis_format`     | _string_        | The **Y Axis Format** widget |
-| `y_axis_label`      | _string_        | The **Y Axis Label** widget  |
-| `y_axis_showminmax` | _boolean_       | The **Y bounds** widget      |
 | `y_axis_zero`       | _N/A_           | _Deprecated?_                |
-| `y_log_scale`       | _boolean_       | The **Y Log Scale** widget   |
 
 Note the `y_axis_format` is defined under various section for some charts.
 
@@ -1092,7 +1069,6 @@ Note the `y_axis_format` is defined under various section for some charts.
 | `add_to_dash`                   | _N/A_ |       |
 | `all_columns_y`                 | _N/A_ |       |
 | `annotation_layers`             | _N/A_ |       |
-| `bar_stacked`                   | _N/A_ |       |
 | `cache_timeout`                 | _N/A_ |       |
 | `code`                          | _N/A_ |       |
 | `collapsed_fieldsets`           | _N/A_ |       |
@@ -1125,13 +1101,11 @@ Note the `y_axis_format` is defined under various section for some charts.
 | `new_slice_name`                | _N/A_ |       |
 | `normalize_across`              | _N/A_ |       |
 | `num_period_compare`            | _N/A_ |       |
-| `order_bars`                    | _N/A_ |       |
 | `order_desc`                    | _N/A_ |       |
 | `pandas_aggfunc`                | _N/A_ |       |
 | `period_ratio_type`             | _N/A_ |       |
 | `perm`                          | _N/A_ |       |
 | `rdo_save`                      | _N/A_ |       |
-| `reduce_x_ticks`                | _N/A_ |       |
 | `refresh_frequency`             | _N/A_ |       |
 | `remote_id`                     | _N/A_ |       |
 | `resample_fillmethod`           | _N/A_ |       |
@@ -1143,11 +1117,7 @@ Note the `y_axis_format` is defined under various section for some charts.
 | `schema`                        | _N/A_ |       |
 | `select_country`                | _N/A_ |       |
 | `series`                        | _N/A_ |       |
-| `show_bar_value`                | _N/A_ |       |
-| `show_brush`                    | _N/A_ |       |
 | `show_bubbles`                  | _N/A_ |       |
-| `show_controls`                 | _N/A_ |       |
-| `show_labels`                   | _N/A_ |       |
 | `show_values`                   | _N/A_ |       |
 | `slice_name`                    | _N/A_ |       |
 | `table_filter`                  | _N/A_ |       |

superset-frontend/spec/javascripts/components/AlteredSliceTag_spec.jsx

@@ -18,8 +18,8 @@
  */
 import React from 'react';
 import { shallow } from 'enzyme';
-
 import { Table, Thead, Td, Th, Tr } from 'reactable-arc';
+import { getChartControlPanelRegistry } from '@superset-ui/chart';
 
 import AlteredSliceTag from '../../../src/components/AlteredSliceTag';
 import ModalTrigger from '../../../src/components/ModalTrigger';
@@ -27,6 +27,7 @@ import TooltipWrapper from '../../../src/components/TooltipWrapper';
 
 const defaultProps = {
   origFormData: {
+    viz_type: 'altered_slice_tag_spec',
     adhoc_filters: [
       {
         clause: 'WHERE',
@@ -111,11 +112,52 @@ const expectedDiffs = {
   },
 };
 
+const fakePluginControls = {
+  controlPanelSections: [
+    {
+      label: 'Fake Control Panel Sections',
+      expanded: true,
+      controlSetRows: [
+        [
+          {
+            name: 'y_axis_bounds',
+            config: {
+              type: 'BoundsControl',
+              label: 'Value bounds',
+              default: [null, null],
+              description: 'Value bounds for the y axis',
+            },
+          },
+          {
+            name: 'column_collection',
+            config: {
+              type: 'CollectionControl',
+              label: 'Fake Collection Control',
+            },
+          },
+          {
+            name: 'adhoc_filters',
+            config: {
+              type: 'AdhocFilterControl',
+              label: 'Fake Filters',
+              default: null,
+            },
+          },
+        ],
+      ],
+    },
+  ],
+};
+
 describe('AlteredSliceTag', () => {
   let wrapper;
   let props;
 
   beforeEach(() => {
+    getChartControlPanelRegistry().registerValue(
+      'altered_slice_tag_spec',
+      fakePluginControls,
+    );
     props = { ...defaultProps };
     wrapper = shallow(<AlteredSliceTag {...props} />);
   });
@@ -237,6 +279,7 @@ describe('AlteredSliceTag', () => {
     });
 
     it('returns "Max" and "Min" for BoundsControl', () => {
+      // need to pass the viz type to the wrapper
       expect(wrapper.instance().formatValue([5, 6], 'y_axis_bounds')).toBe(
         'Min: 5, Max: 6',
       );

superset-frontend/spec/javascripts/utils/getControlsForVizType_spec.js

@@ -0,0 +1,104 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { getChartControlPanelRegistry } from '@superset-ui/chart';
+import getControlsForVizType from 'src/utils/getControlsForVizType';
+
+const fakePluginControls = {
+  controlPanelSections: [
+    {
+      label: 'Fake Control Panel Sections',
+      expanded: true,
+      controlSetRows: [
+        ['url_params'],
+        [
+          {
+            name: 'y_axis_bounds',
+            config: {
+              type: 'BoundsControl',
+              label: 'Value bounds',
+              default: [null, null],
+              description: 'Value bounds for the y axis',
+            },
+          },
+        ],
+        [
+          {
+            name: 'adhoc_filters',
+            config: {
+              type: 'AdhocFilterControl',
+              label: 'Fake Filters',
+              default: null,
+            },
+          },
+        ],
+      ],
+    },
+    {
+      label: 'Fake Control Panel Sections 2',
+      expanded: true,
+      controlSetRows: [
+        [
+          {
+            name: 'column_collection',
+            config: {
+              type: 'CollectionControl',
+              label: 'Fake Collection Control',
+            },
+          },
+        ],
+      ],
+    },
+  ],
+};
+
+describe('getControlsForVizType', () => {
+  beforeEach(() => {
+    getChartControlPanelRegistry().registerValue(
+      'chart_controls_inventory_fake',
+      fakePluginControls,
+    );
+  });
+
+  it('returns a map of the controls', () => {
+    expect(getControlsForVizType('chart_controls_inventory_fake')).toEqual({
+      url_params: {
+        type: 'HiddenControl',
+        label: 'URL Parameters',
+        hidden: true,
+        description: 'Extra parameters for use in jinja templated queries',
+      },
+      y_axis_bounds: {
+        type: 'BoundsControl',
+        label: 'Value bounds',
+        default: [null, null],
+        description: 'Value bounds for the y axis',
+      },
+      adhoc_filters: {
+        type: 'AdhocFilterControl',
+        label: 'Fake Filters',
+        default: null,
+      },
+      column_collection: {
+        type: 'CollectionControl',
+        label: 'Fake Collection Control',
+      },
+    });
+  });
+});

superset-frontend/src/components/AlteredSliceTag.jsx

@@ -20,9 +20,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Table, Tr, Td, Thead, Th } from 'reactable-arc';
 import { isEqual, isEmpty } from 'lodash';
+import { getChartControlPanelRegistry } from '@superset-ui/chart';
+import getControlsForVizType from 'src/utils/getControlsForVizType';
 import { t } from '@superset-ui/translation';
 import TooltipWrapper from './TooltipWrapper';
-import { controls } from '../explore/controls';
 import ModalTrigger from './ModalTrigger';
 import { safeStringify } from '../utils/safeStringify';
 
@@ -52,7 +53,10 @@ export default class AlteredSliceTag extends React.Component {
   constructor(props) {
     super(props);
     const diffs = this.getDiffs(props);
-    this.state = { diffs, hasDiffs: !isEmpty(diffs) };
+
+    const controlsMap = getControlsForVizType(this.props.origFormData.viz_type);
+
+    this.state = { diffs, hasDiffs: !isEmpty(diffs), controlsMap };
   }
 
   UNSAFE_componentWillReceiveProps(newProps) {
@@ -69,6 +73,7 @@ export default class AlteredSliceTag extends React.Component {
     // current form data and the saved form data
     const ofd = props.origFormData;
     const cfd = props.currentFormData;
+
     const fdKeys = Object.keys(cfd);
     const diffs = {};
     for (const fdKey of fdKeys) {
@@ -98,7 +103,10 @@ export default class AlteredSliceTag extends React.Component {
       return 'N/A';
     } else if (value === null) {
       return 'null';
-    } else if (controls[key] && controls[key].type === 'AdhocFilterControl') {
+    } else if (
+      this.state.controlsMap[key] &&
+      this.state.controlsMap[key].type === 'AdhocFilterControl'
+    ) {
       if (!value.length) {
         return '[]';
       }
@@ -111,9 +119,15 @@ export default class AlteredSliceTag extends React.Component {
           return `${v.subject} ${v.operator} ${filterVal}`;
         })
         .join(', ');
-    } else if (controls[key] && controls[key].type === 'BoundsControl') {
+    } else if (
+      this.state.controlsMap[key] &&
+      this.state.controlsMap[key].type === 'BoundsControl'
+    ) {
       return `Min: ${value[0]}, Max: ${value[1]}`;
-    } else if (controls[key] && controls[key].type === 'CollectionControl') {
+    } else if (
+      this.state.controlsMap[key] &&
+      this.state.controlsMap[key].type === 'CollectionControl'
+    ) {
       return value.map(v => safeStringify(v)).join(', ');
     } else if (typeof value === 'boolean') {
       return value ? 'true' : 'false';
@@ -133,7 +147,11 @@ export default class AlteredSliceTag extends React.Component {
         <Tr key={key}>
           <Td
             column="control"
-            data={(controls[key] && controls[key].label) || key}
+            data={
+              (this.state.controlsMap[key] &&
+                this.state.controlsMap[key].label) ||
+              key
+            }
           />
           <Td column="before">{this.formatValue(diffs[key].before, key)}</Td>
           <Td column="after">{this.formatValue(diffs[key].after, key)}</Td>

superset-frontend/src/explore/components/Control.jsx

@@ -70,6 +70,7 @@ export default class Control extends React.PureComponent {
     this.setState({ hovered });
   }
   render() {
+    if (!this.props.type) return null; // this catches things like <hr/> elements (not a control!) shoved into the control panel configs.
     const ControlType = controlMap[this.props.type];
     const divStyle = this.props.hidden ? { display: 'none' } : null;
     return (

superset-frontend/src/explore/controlPanels/Area.js

@@ -19,6 +19,20 @@
 import { t } from '@superset-ui/translation';
 import { NVD3TimeSeries, annotations } from './sections';
 import { D3_TIME_FORMAT_OPTIONS } from '../controls';
+import {
+  lineInterpolation,
+  showBrush,
+  showLegend,
+  showControls,
+  xAxisLabel,
+  bottomMargin,
+  xTicksLayout,
+  xAxisFormat,
+  yLogScale,
+  yAxisBounds,
+  xAxisShowMinmax,
+  richTooltip,
+} from './Shared_NVD3';
 
 export default {
   requiresTime: true,
@@ -28,9 +42,9 @@ export default {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
-        ['show_brush', 'show_legend'],
+        [showBrush, showLegend],
         [
-          'line_interpolation',
+          lineInterpolation,
           {
             name: 'stacked_style',
             config: {
@@ -48,34 +62,30 @@ export default {
           },
         ],
         ['color_scheme', 'label_colors'],
-        ['rich_tooltip', 'show_controls'],
+        [richTooltip, showControls],
       ],
     },
     {
       label: t('X Axis'),
       expanded: true,
       controlSetRows: [
-        ['x_axis_label', 'bottom_margin'],
+        [xAxisLabel, bottomMargin],
-        ['x_ticks_layout', 'x_axis_format'],
+        [xTicksLayout, xAxisFormat],
-        ['x_axis_showminmax', null],
+        [xAxisShowMinmax, null],
       ],
     },
     {
       label: t('Y Axis'),
       expanded: true,
       controlSetRows: [
-        ['y_axis_format', 'y_axis_bounds'],
+        ['y_axis_format', yAxisBounds],
-        ['y_log_scale', null],
+        [yLogScale, null],
       ],
     },
     NVD3TimeSeries[1],
     annotations,
   ],
   controlOverrides: {
-    x_axis_format: {
-      default: 'smart_date',
-      choices: D3_TIME_FORMAT_OPTIONS,
-    },
     color_scheme: {
       renderTrigger: false,
     },

superset-frontend/src/explore/controlPanels/Bar.js

@@ -19,6 +19,26 @@
 import { t } from '@superset-ui/translation';
 import { NVD3TimeSeries, annotations } from './sections';
 import { D3_TIME_FORMAT_OPTIONS } from '../controls';
+import {
+  lineInterpolation,
+  showBrush,
+  showLegend,
+  showControls,
+  xAxisLabel,
+  yAxisLabel,
+  bottomMargin,
+  xTicksLayout,
+  xAxisFormat,
+  yLogScale,
+  yAxisBounds,
+  xAxisShowMinmax,
+  yAxisShowMinmax,
+  richTooltip,
+  showBarValue,
+  barStacked,
+  reduceXTicks,
+  leftMargin,
+} from './Shared_NVD3';
 
 export default {
   requiresTime: true,
@@ -29,39 +49,33 @@ export default {
       expanded: true,
       controlSetRows: [
         ['color_scheme', 'label_colors'],
-        ['show_brush', 'show_legend', 'show_bar_value'],
+        [showBrush, showLegend, showBarValue],
-        ['rich_tooltip', 'bar_stacked'],
+        [richTooltip, barStacked],
-        ['line_interpolation', 'show_controls'],
+        [lineInterpolation, showControls],
-        ['bottom_margin'],
+        [bottomMargin],
       ],
     },
     {
       label: t('X Axis'),
       expanded: true,
       controlSetRows: [
-        ['x_axis_label', 'bottom_margin'],
+        [xAxisLabel, bottomMargin],
-        ['x_ticks_layout', 'x_axis_format'],
+        [xTicksLayout, xAxisFormat],
-        ['x_axis_showminmax', 'reduce_x_ticks'],
+        [xAxisShowMinmax, reduceXTicks],
       ],
     },
     {
       label: t('Y Axis'),
       expanded: true,
       controlSetRows: [
-        ['y_axis_label', 'left_margin'],
+        [yAxisLabel, leftMargin],
-        ['y_axis_showminmax', 'y_log_scale'],
+        [yAxisShowMinmax, yLogScale],
-        ['y_axis_format', 'y_axis_bounds'],
+        ['y_axis_format', yAxisBounds],
       ],
     },
     NVD3TimeSeries[1],
     annotations,
   ],
-  controlOverrides: {
-    x_axis_format: {
-      choices: D3_TIME_FORMAT_OPTIONS,
-      default: 'smart_date',
-    },
-  },
   sectionOverrides: {
     druidTimeSeries: {
       controlSetRows: [['granularity', 'druid_time_origin'], ['time_range']],

superset-frontend/src/explore/controlPanels/BoxPlot.js

@@ -50,7 +50,23 @@ export default {
               ]),
             },
           },
-          'x_ticks_layout',
+          {
+            name: 'x_ticks_layout',
+            config: {
+              type: 'SelectControl',
+              label: t('X Tick Layout'),
+              choices: formatSelectOptions([
+                'auto',
+                'flat',
+                '45°',
+                'staggered',
+              ]),
+              default: 'auto',
+              clearable: false,
+              renderTrigger: true,
+              description: t('The way the ticks are laid out on the X-axis'),
+            },
+          },
         ],
       ],
     },

superset-frontend/src/explore/controlPanels/Bubble.js

@@ -17,6 +17,20 @@
  * under the License.
  */
 import { t } from '@superset-ui/translation';
+import { D3_FORMAT_OPTIONS } from '../controls';
+import { formatSelectOptions } from '../../modules/utils';
+import {
+  showLegend,
+  xAxisLabel,
+  yAxisLabel,
+  bottomMargin,
+  xTicksLayout,
+  xAxisFormat,
+  yLogScale,
+  xAxisShowMinmax,
+  yAxisShowMinmax,
+  leftMargin,
+} from './Shared_NVD3';
 
 export default {
   label: t('Bubble Chart'),
@@ -30,7 +44,26 @@ export default {
         ['y'],
         ['adhoc_filters'],
         ['size'],
-        ['max_bubble_size'],
+        [
+          {
+            name: 'max_bubble_size',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: t('Max Bubble Size'),
+              default: '25',
+              choices: formatSelectOptions([
+                '5',
+                '10',
+                '15',
+                '25',
+                '50',
+                '75',
+                '100',
+              ]),
+            },
+          },
+        ],
         ['limit', null],
       ],
     },
@@ -39,15 +72,25 @@ export default {
       expanded: true,
       controlSetRows: [
         ['color_scheme', 'label_colors'],
-        ['show_legend', null],
+        [showLegend, null],
       ],
     },
     {
       label: t('X Axis'),
       expanded: true,
       controlSetRows: [
-        ['x_axis_label', 'left_margin'],
+        [xAxisLabel, leftMargin],
-        ['x_axis_format', 'x_ticks_layout'],
+        [
+          {
+            name: xAxisFormat.name,
+            config: {
+              ...xAxisFormat.config,
+              default: 'SMART_NUMBER',
+              choices: D3_FORMAT_OPTIONS,
+            },
+          },
+          xTicksLayout,
+        ],
         [
           {
             name: 'x_log_scale',
@@ -59,7 +102,7 @@ export default {
               description: t('Use a log scale for the X-axis'),
             },
           },
-          'x_axis_showminmax',
+          xAxisShowMinmax,
         ],
       ],
     },
@@ -67,9 +110,9 @@ export default {
       label: t('Y Axis'),
       expanded: true,
       controlSetRows: [
-        ['y_axis_label', 'bottom_margin'],
+        [yAxisLabel, bottomMargin],
         ['y_axis_format', null],
-        ['y_log_scale', 'y_axis_showminmax'],
+        [yLogScale, yAxisShowMinmax],
       ],
     },
   ],

superset-frontend/src/explore/controlPanels/CalHeatmap.js

@@ -145,7 +145,19 @@ export default {
             },
           },
         ],
-        ['show_legend', 'show_values'],
+        [
+          {
+            name: 'show_legend',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Legend'),
+              renderTrigger: true,
+              default: true,
+              description: t('Whether to display the legend (toggles)'),
+            },
+          },
+          'show_values',
+        ],
         [
           {
             name: 'show_metric_name',

superset-frontend/src/explore/controlPanels/Compare.js

@@ -19,6 +19,18 @@
 import { t } from '@superset-ui/translation';
 import { NVD3TimeSeries, annotations } from './sections';
 import { D3_TIME_FORMAT_OPTIONS } from '../controls';
+import {
+  xAxisLabel,
+  yAxisLabel,
+  bottomMargin,
+  xTicksLayout,
+  xAxisFormat,
+  yLogScale,
+  yAxisBounds,
+  xAxisShowMinmax,
+  yAxisShowMinmax,
+  leftMargin,
+} from './Shared_NVD3';
 
 export default {
   requiresTime: true,
@@ -33,29 +45,23 @@ export default {
       label: t('X Axis'),
       expanded: true,
       controlSetRows: [
-        ['x_axis_label', 'bottom_margin'],
+        [xAxisLabel, bottomMargin],
-        ['x_ticks_layout', 'x_axis_format'],
+        [xTicksLayout, xAxisFormat],
-        ['x_axis_showminmax', null],
+        [xAxisShowMinmax, null],
       ],
     },
     {
       label: t('Y Axis'),
       expanded: true,
       controlSetRows: [
-        ['y_axis_label', 'left_margin'],
+        [yAxisLabel, leftMargin],
-        ['y_axis_showminmax', 'y_log_scale'],
+        [yAxisShowMinmax, yLogScale],
-        ['y_axis_format', 'y_axis_bounds'],
+        ['y_axis_format', yAxisBounds],
       ],
     },
     NVD3TimeSeries[1],
     annotations,
   ],
-  controlOverrides: {
-    x_axis_format: {
-      choices: D3_TIME_FORMAT_OPTIONS,
-      default: 'smart_date',
-    },
-  },
   sectionOverrides: {
     druidTimeSeries: {
       controlSetRows: [['granularity', 'druid_time_origin'], ['time_range']],

superset-frontend/src/explore/controlPanels/DistBar.js

@@ -18,6 +18,17 @@
  */
 import { t } from '@superset-ui/translation';
 import { validateNonEmpty } from '@superset-ui/validator';
+import {
+  showLegend,
+  showControls,
+  xAxisLabel,
+  bottomMargin,
+  xTicksLayout,
+  showBarValue,
+  barStacked,
+  reduceXTicks,
+  yAxisLabel,
+} from './Shared_NVD3';
 
 export default {
   controlPanelSections: [
@@ -38,18 +49,30 @@ export default {
       expanded: true,
       controlSetRows: [
         ['color_scheme', 'label_colors'],
-        ['show_legend', 'show_bar_value'],
+        [showLegend, showBarValue],
-        ['bar_stacked', 'order_bars'],
+        [
-        ['y_axis_format', 'y_axis_label'],
+          barStacked,
-        ['show_controls', null],
+          {
+            name: 'order_bars',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Sort Bars'),
+              default: false,
+              renderTrigger: true,
+              description: t('Sort bars by x labels.'),
+            },
+          },
+        ],
+        ['y_axis_format', yAxisLabel],
+        [showControls, null],
       ],
     },
     {
       label: t('X Axis'),
       expanded: true,
       controlSetRows: [
-        ['x_axis_label', 'bottom_margin'],
+        [xAxisLabel, bottomMargin],
-        ['x_ticks_layout', 'reduce_x_ticks'],
+        [xTicksLayout, reduceXTicks],
       ],
     },
   ],

superset-frontend/src/explore/controlPanels/DualLine.js

@@ -19,6 +19,7 @@
 import { t } from '@superset-ui/translation';
 import { annotations } from './sections';
 import { D3_TIME_FORMAT_OPTIONS } from '../controls';
+import { xAxisFormat, yAxis2Format } from './Shared_NVD3';
 
 export default {
   requiresTime: true,
@@ -26,7 +27,7 @@ export default {
     {
       label: t('Chart Options'),
       expanded: true,
-      controlSetRows: [['color_scheme', 'label_colors'], ['x_axis_format']],
+      controlSetRows: [['color_scheme', 'label_colors'], [xAxisFormat]],
     },
     {
       label: t('Y Axis 1'),
@@ -36,7 +37,7 @@ export default {
     {
       label: t('Y Axis 2'),
       expanded: true,
-      controlSetRows: [['metric_2', 'y_axis_2_format']],
+      controlSetRows: [['metric_2', yAxis2Format]],
     },
     {
       label: t('Query'),
@@ -53,10 +54,6 @@ export default {
     y_axis_format: {
       label: t('Left Axis Format'),
     },
-    x_axis_format: {
-      choices: D3_TIME_FORMAT_OPTIONS,
-      default: 'smart_date',
-    },
   },
   sectionOverrides: {
     druidTimeSeries: {

superset-frontend/src/explore/controlPanels/Heatmap.js

@@ -18,7 +18,10 @@
  */
 import { t } from '@superset-ui/translation';
 import { validateNonEmpty } from '@superset-ui/validator';
-import { formatSelectOptionsForRange } from '../../modules/utils';
+import {
+  formatSelectOptionsForRange,
+  formatSelectOptions,
+} from '../../modules/utils';
 
 const sortAxisChoices = [
   ['alpha_asc', t('Axis ascending')],
@@ -94,10 +97,81 @@ export default {
           },
           'normalize_across',
         ],
-        ['left_margin', 'bottom_margin'],
-        ['y_axis_bounds', 'y_axis_format'],
         [
-          'show_legend',
+          {
+            name: 'left_margin',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              clearable: false,
+              label: t('Left Margin'),
+              choices: formatSelectOptions([
+                'auto',
+                50,
+                75,
+                100,
+                125,
+                150,
+                200,
+              ]),
+              default: 'auto',
+              renderTrigger: true,
+              description: t(
+                'Left margin, in pixels, allowing for more room for axis labels',
+              ),
+            },
+          },
+          {
+            name: 'bottom_margin',
+            config: {
+              type: 'SelectControl',
+              clearable: false,
+              freeForm: true,
+              label: t('Bottom Margin'),
+              choices: formatSelectOptions([
+                'auto',
+                50,
+                75,
+                100,
+                125,
+                150,
+                200,
+              ]),
+              default: 'auto',
+              renderTrigger: true,
+              description: t(
+                'Bottom margin, in pixels, allowing for more room for axis labels',
+              ),
+            },
+          },
+        ],
+        [
+          {
+            name: 'y_axis_bounds',
+            config: {
+              type: 'BoundsControl',
+              label: t('Value bounds'),
+              renderTrigger: true,
+              default: [null, null],
+              description: t(
+                'Hard value bounds applied for color coding. Is only relevant ' +
+                  'and applied when the normalization is applied against the whole heatmap.',
+              ),
+            },
+          },
+          'y_axis_format',
+        ],
+        [
+          {
+            name: 'show_legend',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Legend'),
+              renderTrigger: true,
+              default: true,
+              description: t('Whether to display the legend (toggles)'),
+            },
+          },
           {
             name: 'show_perc',
             config: {
@@ -147,14 +221,6 @@ export default {
     normalized: t(
       'Whether to apply a normal distribution based on rank on the color scale',
     ),
-    y_axis_bounds: {
-      label: t('Value bounds'),
-      renderTrigger: true,
-      description: t(
-        'Hard value bounds applied for color coding. Is only relevant ' +
-          'and applied when the normalization is applied against the whole heatmap.',
-      ),
-    },
     y_axis_format: {
       label: t('Value Format'),
     },

superset-frontend/src/explore/controlPanels/Histogram.js

@@ -37,7 +37,26 @@ export default {
       controlSetRows: [
         ['color_scheme', 'label_colors'],
         ['link_length'],
-        ['x_axis_label', 'y_axis_label'],
+        [
+          {
+            name: 'x_axis_label',
+            config: {
+              type: 'TextControl',
+              label: t('X Axis Label'),
+              renderTrigger: true,
+              default: '',
+            },
+          },
+          {
+            name: 'y_axis_label',
+            config: {
+              type: 'TextControl',
+              label: t('Y Axis Label'),
+              renderTrigger: true,
+              default: '',
+            },
+          },
+        ],
         ['global_opacity'],
         ['normalized'],
       ],

superset-frontend/src/explore/controlPanels/Line.js

@@ -19,6 +19,23 @@
 import { t } from '@superset-ui/translation';
 import { NVD3TimeSeries, annotations } from './sections';
 import { D3_TIME_FORMAT_OPTIONS } from '../controls';
+import {
+  lineInterpolation,
+  showBrush,
+  showLegend,
+  xAxisLabel,
+  bottomMargin,
+  xTicksLayout,
+  xAxisFormat,
+  yLogScale,
+  yAxisBounds,
+  yAxisLabel,
+  xAxisShowMinmax,
+  yAxisShowMinmax,
+  richTooltip,
+  leftMargin,
+  showMarkers,
+} from './Shared_NVD3';
 
 export default {
   requiresTime: true,
@@ -29,37 +46,46 @@ export default {
       expanded: true,
       controlSetRows: [
         ['color_scheme', 'label_colors'],
-        ['show_brush', 'send_time_range', 'show_legend'],
+        [
-        ['rich_tooltip', 'show_markers'],
+          showBrush,
-        ['line_interpolation'],
+          {
+            name: 'send_time_range',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Propagate'),
+              renderTrigger: true,
+              default: false,
+              description: t('Send range filter events to other charts'),
+            },
+          },
+          showLegend,
+        ],
+        [richTooltip, showMarkers],
+        [lineInterpolation],
       ],
     },
     {
       label: t('X Axis'),
       expanded: true,
       controlSetRows: [
-        ['x_axis_label', 'bottom_margin'],
+        [xAxisLabel, bottomMargin],
-        ['x_ticks_layout', 'x_axis_format'],
+        [xTicksLayout, xAxisFormat],
-        ['x_axis_showminmax', null],
+        [xAxisShowMinmax, null],
       ],
     },
     {
       label: t('Y Axis'),
       expanded: true,
       controlSetRows: [
-        ['y_axis_label', 'left_margin'],
+        [yAxisLabel, leftMargin],
-        ['y_axis_showminmax', 'y_log_scale'],
+        [yAxisShowMinmax, yLogScale],
-        ['y_axis_format', 'y_axis_bounds'],
+        ['y_axis_format', yAxisBounds],
       ],
     },
     NVD3TimeSeries[1],
     annotations,
   ],
   controlOverrides: {
-    x_axis_format: {
-      choices: D3_TIME_FORMAT_OPTIONS,
-      default: 'smart_date',
-    },
     row_limit: {
       default: 50000,
     },

superset-frontend/src/explore/controlPanels/LineMulti.js

@@ -20,6 +20,17 @@ import { t } from '@superset-ui/translation';
 import { validateNonEmpty } from '@superset-ui/validator';
 import { annotations } from './sections';
 import { D3_TIME_FORMAT_OPTIONS } from '../controls';
+import {
+  lineInterpolation,
+  showLegend,
+  xAxisLabel,
+  bottomMargin,
+  xTicksLayout,
+  xAxisFormat,
+  xAxisShowMinmax,
+  showMarkers,
+  yAxis2Format,
+} from './Shared_NVD3';
 
 export default {
   requiresTime: true,
@@ -41,17 +52,17 @@ export default {
           },
           null,
         ],
-        ['show_legend', 'show_markers'],
+        [showLegend, showMarkers],
-        ['line_interpolation', null],
+        [lineInterpolation, null],
       ],
     },
     {
       label: t('X Axis'),
       expanded: true,
       controlSetRows: [
-        ['x_axis_label', 'bottom_margin'],
+        [xAxisLabel, bottomMargin],
-        ['x_ticks_layout', 'x_axis_format'],
+        [xTicksLayout, xAxisFormat],
-        ['x_axis_showminmax', null],
+        [xAxisShowMinmax, null],
       ],
     },
     {
@@ -116,7 +127,7 @@ export default {
               },
             },
           },
-          'y_axis_2_format',
+          yAxis2Format,
         ],
       ],
     },

superset-frontend/src/explore/controlPanels/Mapbox.js

@@ -212,13 +212,6 @@ export default {
           'in each cluster to produce the cluster label.',
       ),
     },
-    rich_tooltip: {
-      label: t('Tooltip'),
-      description: t(
-        'Show a tooltip when hovering over points and clusters ' +
-          'describing the label',
-      ),
-    },
     groupby: {
       description: t(
         'One or many controls to group by. If grouping, latitude ' +

superset-frontend/src/explore/controlPanels/Partition.jsx

@@ -143,7 +143,20 @@ export default {
             },
           },
         ],
-        ['rich_tooltip'],
+        [
+          {
+            name: 'rich_tooltip',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Rich Tooltip'),
+              renderTrigger: true,
+              default: true,
+              description: t(
+                'The rich tooltip shows a list of all series for that point in time',
+              ),
+            },
+          },
+        ],
       ],
     },
     NVD3TimeSeries[1],

superset-frontend/src/explore/controlPanels/Pie.js

@@ -17,6 +17,7 @@
  * under the License.
  */
 import { t } from '@superset-ui/translation';
+import { showLegend } from './Shared_NVD3';
 
 export default {
   controlPanelSections: [
@@ -65,10 +66,22 @@ export default {
               description: t('Do you want a donut or a pie?'),
             },
           },
-          'show_legend',
+          showLegend,
         ],
         [
-          'show_labels',
+          {
+            name: 'show_labels',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Show Labels'),
+              renderTrigger: true,
+              default: true,
+              description: t(
+                'Whether to display the labels. Note that the label only displays when the the 5% ' +
+                  'threshold.',
+              ),
+            },
+          },
           {
             name: 'labels_outside',
             config: {

superset-frontend/src/explore/controlPanels/Rose.js

@@ -30,7 +30,18 @@ export default {
         ['color_scheme', 'label_colors'],
         ['number_format', 'date_time_format'],
         [
-          'rich_tooltip',
+          {
+            name: 'rich_tooltip',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Rich Tooltip'),
+              renderTrigger: true,
+              default: true,
+              description: t(
+                'The rich tooltip shows a list of all series for that point in time',
+              ),
+            },
+          },
           {
             name: 'rose_area_proportion',
             config: {

superset-frontend/src/explore/controlPanels/Shared_NVD3.js

@@ -0,0 +1,309 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// These are control configurations that are shared ONLY within the DeckGL viz plugin repo.
+
+import React from 'react';
+import { t } from '@superset-ui/translation';
+import { formatSelectOptions } from '../../modules/utils';
+import {
+  D3_TIME_FORMAT_OPTIONS,
+  D3_FORMAT_DOCS,
+  D3_FORMAT_OPTIONS,
+} from '../controls';
+
+/*
+  Plugins in question:
+  
+  AreaChartPlugin,
+  BarChartPlugin,
+  BubbleChartPlugin,
+  BulletChartPlugin,
+  CompareChartPlugin,
+  DistBarChartPlugin,
+  DualLineChartPlugin,
+  LineChartPlugin,
+  LineMultiChartPlugin,
+  PieChartPlugin,
+  TimePivotChartPlugin,
+*/
+
+export const yAxis2Format = {
+  name: 'y_axis_2_format',
+  config: {
+    type: 'SelectControl',
+    freeForm: true,
+    label: t('Right Axis Format'),
+    default: 'SMART_NUMBER',
+    choices: D3_FORMAT_OPTIONS,
+    description: D3_FORMAT_DOCS,
+  },
+};
+
+export const showMarkers = {
+  name: 'show_markers',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Show Markers'),
+    renderTrigger: true,
+    default: false,
+    description: t('Show data points as circle markers on the lines'),
+  },
+};
+
+export const leftMargin = {
+  name: 'left_margin',
+  config: {
+    type: 'SelectControl',
+    freeForm: true,
+    clearable: false,
+    label: t('Left Margin'),
+    choices: formatSelectOptions(['auto', 50, 75, 100, 125, 150, 200]),
+    default: 'auto',
+    renderTrigger: true,
+    description: t(
+      'Left margin, in pixels, allowing for more room for axis labels',
+    ),
+  },
+};
+
+export const yAxisShowMinmax = {
+  name: 'y_axis_showminmax',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Y bounds'),
+    renderTrigger: true,
+    default: false,
+    description: t('Whether to display the min and max values of the Y-axis'),
+  },
+};
+
+export const lineInterpolation = {
+  name: 'line_interpolation',
+  config: {
+    type: 'SelectControl',
+    label: t('Line Style'),
+    renderTrigger: true,
+    choices: formatSelectOptions([
+      'linear',
+      'basis',
+      'cardinal',
+      'monotone',
+      'step-before',
+      'step-after',
+    ]),
+    default: 'linear',
+    description: t('Line interpolation as defined by d3.js'),
+  },
+};
+
+export const showBrush = {
+  name: 'show_brush',
+  config: {
+    type: 'SelectControl',
+    label: t('Show Range Filter'),
+    renderTrigger: true,
+    clearable: false,
+    default: 'auto',
+    choices: [
+      ['yes', 'Yes'],
+      ['no', 'No'],
+      ['auto', 'Auto'],
+    ],
+    description: t('Whether to display the time range interactive selector'),
+  },
+};
+
+export const showLegend = {
+  name: 'show_legend',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Legend'),
+    renderTrigger: true,
+    default: true,
+    description: t('Whether to display the legend (toggles)'),
+  },
+};
+
+export const showControls = {
+  name: 'show_controls',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Extra Controls'),
+    renderTrigger: true,
+    default: false,
+    description: t(
+      'Whether to show extra controls or not. Extra controls ' +
+        'include things like making mulitBar charts stacked ' +
+        'or side by side.',
+    ),
+  },
+};
+
+export const xAxisLabel = {
+  name: 'x_axis_label',
+  config: {
+    type: 'TextControl',
+    label: t('X Axis Label'),
+    renderTrigger: true,
+    default: '',
+  },
+};
+
+export const bottomMargin = {
+  name: 'bottom_margin',
+  config: {
+    type: 'SelectControl',
+    clearable: false,
+    freeForm: true,
+    label: t('Bottom Margin'),
+    choices: formatSelectOptions(['auto', 50, 75, 100, 125, 150, 200]),
+    default: 'auto',
+    renderTrigger: true,
+    description: t(
+      'Bottom margin, in pixels, allowing for more room for axis labels',
+    ),
+  },
+};
+
+export const xTicksLayout = {
+  name: 'x_ticks_layout',
+  config: {
+    type: 'SelectControl',
+    label: t('X Tick Layout'),
+    choices: formatSelectOptions(['auto', 'flat', '45°', 'staggered']),
+    default: 'auto',
+    clearable: false,
+    renderTrigger: true,
+    description: t('The way the ticks are laid out on the X-axis'),
+  },
+};
+
+export const xAxisFormat = {
+  name: 'x_axis_format',
+  config: {
+    type: 'SelectControl',
+    freeForm: true,
+    label: t('X Axis Format'),
+    renderTrigger: true,
+    choices: D3_TIME_FORMAT_OPTIONS,
+    default: 'smart_date',
+    description: D3_FORMAT_DOCS,
+  },
+};
+
+export const yLogScale = {
+  name: 'y_log_scale',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Y Log Scale'),
+    default: false,
+    renderTrigger: true,
+    description: t('Use a log scale for the Y-axis'),
+  },
+};
+
+export const yAxisBounds = {
+  name: 'y_axis_bounds',
+  config: {
+    type: 'BoundsControl',
+    label: t('Y Axis Bounds'),
+    renderTrigger: true,
+    default: [null, null],
+    description: t(
+      'Bounds for the Y-axis. When left empty, the bounds are ' +
+        'dynamically defined based on the min/max of the data. Note that ' +
+        "this feature will only expand the axis range. It won't " +
+        "narrow the data's extent.",
+    ),
+  },
+};
+
+export const xAxisShowMinmax = {
+  name: 'x_axis_showminmax',
+  config: {
+    type: 'CheckboxControl',
+    label: t('X bounds'),
+    renderTrigger: true,
+    default: false,
+    description: t('Whether to display the min and max values of the X-axis'),
+  },
+};
+
+export const richTooltip = {
+  name: 'rich_tooltip',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Rich Tooltip'),
+    renderTrigger: true,
+    default: true,
+    description: t(
+      'The rich tooltip shows a list of all series for that point in time',
+    ),
+  },
+};
+
+export const showBarValue = {
+  name: 'show_bar_value',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Bar Values'),
+    default: false,
+    renderTrigger: true,
+    description: t('Show the value on top of the bar'),
+  },
+};
+
+export const barStacked = {
+  name: 'bar_stacked',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Stacked Bars'),
+    renderTrigger: true,
+    default: false,
+    description: null,
+  },
+};
+
+export const reduceXTicks = {
+  name: 'reduce_x_ticks',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Reduce X ticks'),
+    renderTrigger: true,
+    default: false,
+    description: t(
+      'Reduces the number of X-axis ticks to be rendered. ' +
+        'If true, the x-axis will not overflow and labels may be ' +
+        'missing. If false, a minimum width will be applied ' +
+        'to columns and the width may overflow into an ' +
+        'horizontal scroll.',
+    ),
+  },
+};
+
+export const yAxisLabel = {
+  name: 'y_axis_label',
+  config: {
+    type: 'TextControl',
+    label: t('Y Axis Label'),
+    renderTrigger: true,
+    default: '',
+  },
+};

superset-frontend/src/explore/controlPanels/TimePivot.js

@@ -17,7 +17,20 @@
  * under the License.
  */
 import { t } from '@superset-ui/translation';
-import { D3_TIME_FORMAT_OPTIONS } from '../controls';
+import { D3_FORMAT_OPTIONS } from '../controls';
+import {
+  lineInterpolation,
+  showLegend,
+  xAxisLabel,
+  bottomMargin,
+  xAxisFormat,
+  yLogScale,
+  yAxisBounds,
+  xAxisShowMinmax,
+  yAxisShowMinmax,
+  yAxisLabel,
+  leftMargin,
+} from './Shared_NVD3';
 
 export default {
   requiresTime: true,
@@ -25,13 +38,46 @@ export default {
     {
       label: t('Query'),
       expanded: true,
-      controlSetRows: [['metric'], ['adhoc_filters'], ['freq']],
+      controlSetRows: [
+        ['metric'],
+        ['adhoc_filters'],
+        [
+          {
+            name: 'freq',
+            config: {
+              type: 'SelectControl',
+              label: t('Frequency'),
+              default: 'W-MON',
+              freeForm: true,
+              clearable: false,
+              choices: [
+                ['AS', 'Year (freq=AS)'],
+                ['52W-MON', '52 weeks starting Monday (freq=52W-MON)'],
+                ['W-SUN', '1 week starting Sunday (freq=W-SUN)'],
+                ['W-MON', '1 week starting Monday (freq=W-MON)'],
+                ['D', 'Day (freq=D)'],
+                ['4W-MON', '4 weeks (freq=4W-MON)'],
+              ],
+              description: t(
+                `The periodicity over which to pivot time. Users can provide
+            "Pandas" offset alias.
+            Click on the info bubble for more details on accepted "freq" expressions.`,
+              ),
+              tooltipOnClick: () => {
+                window.open(
+                  'https://pandas.pydata.org/pandas-docs/stable/timeseries.html#offset-aliases',
+                );
+              },
+            },
+          },
+        ],
+      ],
     },
     {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
-        ['show_legend', 'line_interpolation'],
+        [showLegend, lineInterpolation],
         ['color_picker', null],
       ],
     },
@@ -39,25 +85,31 @@ export default {
       label: t('X Axis'),
       expanded: true,
       controlSetRows: [
-        ['x_axis_label', 'bottom_margin'],
+        [xAxisLabel, bottomMargin],
-        ['x_axis_showminmax', 'x_axis_format'],
+        [
+          xAxisShowMinmax,
+          {
+            name: xAxisFormat.name,
+            config: {
+              ...xAxisFormat.config,
+              default: 'SMART_NUMBER',
+              choices: D3_FORMAT_OPTIONS,
+            },
+          },
+        ],
       ],
     },
     {
       label: t('Y Axis'),
       expanded: true,
       controlSetRows: [
-        ['y_axis_label', 'left_margin'],
+        [yAxisLabel, leftMargin],
-        ['y_axis_showminmax', 'y_log_scale'],
+        [yAxisShowMinmax, yLogScale],
-        ['y_axis_format', 'y_axis_bounds'],
+        ['y_axis_format', yAxisBounds],
       ],
     },
   ],
   controlOverrides: {
-    x_axis_format: {
-      choices: D3_TIME_FORMAT_OPTIONS,
-      default: 'smart_date',
-    },
     metric: {
       clearable: false,
     },

superset-frontend/src/explore/controlPanels/WorldMap.js

@@ -17,6 +17,7 @@
  * under the License.
  */
 import { t } from '@superset-ui/translation';
+import { formatSelectOptions } from '../../modules/utils';
 
 export default {
   controlPanelSections: [
@@ -66,7 +67,26 @@ export default {
           },
         ],
         ['secondary_metric'],
-        ['max_bubble_size'],
+        [
+          {
+            name: 'max_bubble_size',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: t('Max Bubble Size'),
+              default: '25',
+              choices: formatSelectOptions([
+                '5',
+                '10',
+                '15',
+                '25',
+                '50',
+                '75',
+                '100',
+              ]),
+            },
+          },
+        ],
       ],
     },
   ],

superset-frontend/src/explore/controls.jsx

@@ -213,19 +213,6 @@ export const controls = {
     description: t('The type of visualization to display'),
   },
 
-  y_axis_bounds: {
-    type: 'BoundsControl',
-    label: t('Y Axis Bounds'),
-    renderTrigger: true,
-    default: [null, null],
-    description: t(
-      'Bounds for the Y-axis. When left empty, the bounds are ' +
-        'dynamically defined based on the min/max of the data. Note that ' +
-        "this feature will only expand the axis range. It won't " +
-        "narrow the data's extent.",
-    ),
-  },
-
   color_picker: {
     label: t('Fixed Color'),
     description: t('Use this to define a static color for all circles'),
@@ -270,64 +257,6 @@ export const controls = {
     ),
   },
 
-  bar_stacked: {
-    type: 'CheckboxControl',
-    label: t('Stacked Bars'),
-    renderTrigger: true,
-    default: false,
-    description: null,
-  },
-
-  show_markers: {
-    type: 'CheckboxControl',
-    label: t('Show Markers'),
-    renderTrigger: true,
-    default: false,
-    description: t('Show data points as circle markers on the lines'),
-  },
-
-  show_bar_value: {
-    type: 'CheckboxControl',
-    label: t('Bar Values'),
-    default: false,
-    renderTrigger: true,
-    description: t('Show the value on top of the bar'),
-  },
-
-  order_bars: {
-    type: 'CheckboxControl',
-    label: t('Sort Bars'),
-    default: false,
-    renderTrigger: true,
-    description: t('Sort bars by x labels.'),
-  },
-
-  show_controls: {
-    type: 'CheckboxControl',
-    label: t('Extra Controls'),
-    renderTrigger: true,
-    default: false,
-    description: t(
-      'Whether to show extra controls or not. Extra controls ' +
-        'include things like making mulitBar charts stacked ' +
-        'or side by side.',
-    ),
-  },
-
-  reduce_x_ticks: {
-    type: 'CheckboxControl',
-    label: t('Reduce X ticks'),
-    renderTrigger: true,
-    default: false,
-    description: t(
-      'Reduces the number of X-axis ticks to be rendered. ' +
-        'If true, the x-axis will not overflow and labels may be ' +
-        'missing. If false, a minimum width will be applied ' +
-        'to columns and the width may overflow into an ' +
-        'horizontal scroll.',
-    ),
-  },
-
   secondary_metric: {
     ...metric,
     label: t('Color Metric'),
@@ -371,32 +300,6 @@ export const controls = {
     description: t('The name of the country that Superset should display'),
   },
 
-  freq: {
-    type: 'SelectControl',
-    label: t('Frequency'),
-    default: 'W-MON',
-    freeForm: true,
-    clearable: false,
-    choices: [
-      ['AS', 'Year (freq=AS)'],
-      ['52W-MON', '52 weeks starting Monday (freq=52W-MON)'],
-      ['W-SUN', '1 week starting Sunday (freq=W-SUN)'],
-      ['W-MON', '1 week starting Monday (freq=W-MON)'],
-      ['D', 'Day (freq=D)'],
-      ['4W-MON', '4 weeks (freq=4W-MON)'],
-    ],
-    description: t(
-      `The periodicity over which to pivot time. Users can provide
-      "Pandas" offset alias.
-      Click on the info bubble for more details on accepted "freq" expressions.`,
-    ),
-    tooltipOnClick: () => {
-      window.open(
-        'https://pandas.pydata.org/pandas-docs/stable/timeseries.html#offset-aliases',
-      );
-    },
-  },
-
   groupby: groupByControl,
 
   columns: {
@@ -491,42 +394,6 @@ export const controls = {
     ),
   },
 
-  bottom_margin: {
-    type: 'SelectControl',
-    clearable: false,
-    freeForm: true,
-    label: t('Bottom Margin'),
-    choices: formatSelectOptions(['auto', 50, 75, 100, 125, 150, 200]),
-    default: 'auto',
-    renderTrigger: true,
-    description: t(
-      'Bottom margin, in pixels, allowing for more room for axis labels',
-    ),
-  },
-
-  x_ticks_layout: {
-    type: 'SelectControl',
-    label: t('X Tick Layout'),
-    choices: formatSelectOptions(['auto', 'flat', '45°', 'staggered']),
-    default: 'auto',
-    clearable: false,
-    renderTrigger: true,
-    description: t('The way the ticks are laid out on the X-axis'),
-  },
-
-  left_margin: {
-    type: 'SelectControl',
-    freeForm: true,
-    clearable: false,
-    label: t('Left Margin'),
-    choices: formatSelectOptions(['auto', 50, 75, 100, 125, 150, 200]),
-    default: 'auto',
-    renderTrigger: true,
-    description: t(
-      'Left margin, in pixels, allowing for more room for axis labels',
-    ),
-  },
-
   granularity: {
     type: 'SelectControl',
     freeForm: true,
@@ -658,14 +525,6 @@ export const controls = {
     },
   },
 
-  max_bubble_size: {
-    type: 'SelectControl',
-    freeForm: true,
-    label: t('Max Bubble Size'),
-    default: '25',
-    choices: formatSelectOptions(['5', '10', '15', '25', '50', '75', '100']),
-  },
-
   number_format: {
     type: 'SelectControl',
     freeForm: true,
@@ -803,30 +662,6 @@ export const controls = {
     default: '',
   },
 
-  x_axis_label: {
-    type: 'TextControl',
-    label: t('X Axis Label'),
-    renderTrigger: true,
-    default: '',
-  },
-
-  y_axis_label: {
-    type: 'TextControl',
-    label: t('Y Axis Label'),
-    renderTrigger: true,
-    default: '',
-  },
-
-  x_axis_format: {
-    type: 'SelectControl',
-    freeForm: true,
-    label: t('X Axis Format'),
-    renderTrigger: true,
-    default: 'SMART_NUMBER',
-    choices: D3_FORMAT_OPTIONS,
-    description: D3_FORMAT_DOCS,
-  },
-
   y_axis_format: {
     type: 'SelectControl',
     freeForm: true,
@@ -852,15 +687,6 @@ export const controls = {
     },
   },
 
-  y_axis_2_format: {
-    type: 'SelectControl',
-    freeForm: true,
-    label: t('Right Axis Format'),
-    default: 'SMART_NUMBER',
-    choices: D3_FORMAT_OPTIONS,
-    description: D3_FORMAT_DOCS,
-  },
-
   date_time_format: {
     type: 'SelectControl',
     freeForm: true,
@@ -881,22 +707,6 @@ export const controls = {
     description: t('Pick your favorite markup language'),
   },
 
-  line_interpolation: {
-    type: 'SelectControl',
-    label: t('Line Style'),
-    renderTrigger: true,
-    choices: formatSelectOptions([
-      'linear',
-      'basis',
-      'cardinal',
-      'monotone',
-      'step-before',
-      'step-after',
-    ]),
-    default: 'linear',
-    description: t('Line interpolation as defined by d3.js'),
-  },
-
   code: {
     type: 'TextAreaControl',
     label: t('Code'),
@@ -922,20 +732,6 @@ export const controls = {
     ),
   },
 
-  show_brush: {
-    type: 'SelectControl',
-    label: t('Show Range Filter'),
-    renderTrigger: true,
-    clearable: false,
-    default: 'auto',
-    choices: [
-      ['yes', 'Yes'],
-      ['no', 'No'],
-      ['auto', 'Auto'],
-    ],
-    description: t('Whether to display the time range interactive selector'),
-  },
-
   table_filter: {
     type: 'CheckboxControl',
     label: t('Emit Filter Events'),
@@ -944,33 +740,6 @@ export const controls = {
     description: t('Whether to apply filter when items are clicked'),
   },
 
-  show_legend: {
-    type: 'CheckboxControl',
-    label: t('Legend'),
-    renderTrigger: true,
-    default: true,
-    description: t('Whether to display the legend (toggles)'),
-  },
-
-  send_time_range: {
-    type: 'CheckboxControl',
-    label: t('Propagate'),
-    renderTrigger: true,
-    default: false,
-    description: t('Send range filter events to other charts'),
-  },
-
-  show_labels: {
-    type: 'CheckboxControl',
-    label: t('Show Labels'),
-    renderTrigger: true,
-    default: true,
-    description: t(
-      'Whether to display the labels. Note that the label only displays when the the 5% ' +
-        'threshold.',
-    ),
-  },
-
   show_values: {
     type: 'CheckboxControl',
     label: t('Show Values'),
@@ -979,40 +748,6 @@ export const controls = {
     description: t('Whether to display the numerical values within the cells'),
   },
 
-  x_axis_showminmax: {
-    type: 'CheckboxControl',
-    label: t('X bounds'),
-    renderTrigger: true,
-    default: false,
-    description: t('Whether to display the min and max values of the X-axis'),
-  },
-
-  y_axis_showminmax: {
-    type: 'CheckboxControl',
-    label: t('Y bounds'),
-    renderTrigger: true,
-    default: false,
-    description: t('Whether to display the min and max values of the Y-axis'),
-  },
-
-  rich_tooltip: {
-    type: 'CheckboxControl',
-    label: t('Rich Tooltip'),
-    renderTrigger: true,
-    default: true,
-    description: t(
-      'The rich tooltip shows a list of all series for that point in time',
-    ),
-  },
-
-  y_log_scale: {
-    type: 'CheckboxControl',
-    label: t('Y Log Scale'),
-    default: false,
-    renderTrigger: true,
-    description: t('Use a log scale for the Y-axis'),
-  },
-
   log_scale: {
     type: 'CheckboxControl',
     label: t('Log Scale'),

superset-frontend/src/utils/getControlsForVizType.js

@@ -0,0 +1,46 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import memoize from 'lodash/memoize';
+import { getChartControlPanelRegistry } from '@superset-ui/chart';
+import controls from '../explore/controls';
+
+const getControlsForVizType = memoize(vizType => {
+  const controlsMap = {};
+  getChartControlPanelRegistry()
+    .get(vizType)
+    .controlPanelSections.forEach(section => {
+      section.controlSetRows.forEach(row => {
+        row.forEach(control => {
+          if (!control) return;
+          if (typeof control === 'string') {
+            // For now, we have to look in controls.jsx to get the config for some controls.
+            // Once everything is migrated out, delete this if statement.
+            controlsMap[control] = controls[control];
+          } else if (control.name && control.config) {
+            // condition needed because there are elements, e.g. <hr /> in some control configs (I'm looking at you, FilterBox!)
+            controlsMap[control.name] = control.config;
+          }
+        });
+      });
+    });
+  return controlsMap;
+});
+
+export default getControlsForVizType;

superset-frontend/src/visualizations/FilterBox/FilterBox.jsx

@@ -121,7 +121,7 @@ class FilterBox extends React.Component {
   getControlData(controlName) {
     const { selectedValues } = this.state;
     const control = {
-      ...controls[controlName],
+      ...controls[controlName], // TODO: make these controls ('druid_time_origin', 'granularity', 'granularity_sqla', 'time_grain_sqla') accessible from getControlsForVizType.
       name: controlName,
       key: `control-${controlName}`,
       value: selectedValues[TIME_FILTER_MAP[controlName]],