From 5e4c2919135e284c50a4bdeb1ecff54514804a6b Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 24 Apr 2020 16:12:26 -0700 Subject: [PATCH] Controls cleanup pass (#9578) * migrating date_filter * normalized control * filter_configs control * column_collection control * time_range_endpoints control * time_range_fixed control * url_params control * cache_timeout control * annotation_layers control * color control unused? * linters rule :metal: * this should have been deleted earlier * global_opacity, mapbox_label, mapbox_style, viewport_zoom * linting * comparison_type * contribution control * log_scale * show_values * table_filter * pandas_aggfunc * code control * formatSelectOptions import * lint * markup_type control * lintage * date_time_format control, linting * url control, test mods * min_periods control * rolling_periods * rolling_type * missing lib * order_desc * number_format * link_length * all_columns_y * all_columns_x * normalize_across, select_country, all_columns * fixing test * linter-caught dependencies * waiting * wait longer! * utilizing tabOverride for Analytics * tabOverride for Annotations and Layers --- CONTRIBUTING.md | 38 -- .../javascripts/explore/controlUtils_spec.jsx | 36 ++ .../utils/getControlsForVizType_spec.js | 57 ++- .../src/explore/controlPanels/BigNumber.jsx | 73 ++- .../src/explore/controlPanels/CalHeatmap.js | 16 +- .../src/explore/controlPanels/CountryMap.js | 56 ++- .../src/explore/controlPanels/DeckArc.js | 3 +- .../src/explore/controlPanels/DeckGeojson.js | 3 +- .../src/explore/controlPanels/DeckGrid.js | 3 +- .../src/explore/controlPanels/DeckHex.js | 3 +- .../src/explore/controlPanels/DeckMulti.js | 4 +- .../src/explore/controlPanels/DeckPath.js | 3 +- .../src/explore/controlPanels/DeckPolygon.js | 14 +- .../src/explore/controlPanels/DeckScatter.js | 3 +- .../explore/controlPanels/DeckScreengrid.js | 3 +- .../explore/controlPanels/DirectedForce.js | 24 +- .../src/explore/controlPanels/DistBar.js | 12 +- .../{EventFlow.js => EventFlow.jsx} | 58 ++- .../src/explore/controlPanels/FilterBox.jsx | 14 +- .../src/explore/controlPanels/Heatmap.js | 80 +++- .../src/explore/controlPanels/Histogram.js | 76 ++- .../src/explore/controlPanels/Iframe.js | 17 +- .../src/explore/controlPanels/Mapbox.js | 128 ++++- .../src/explore/controlPanels/Markup.js | 36 +- .../src/explore/controlPanels/PairedTtest.js | 21 +- .../src/explore/controlPanels/Partition.jsx | 77 +++- .../src/explore/controlPanels/Pie.js | 25 +- .../src/explore/controlPanels/PivotTable.js | 37 +- .../src/explore/controlPanels/Rose.js | 32 +- .../src/explore/controlPanels/Separator.js | 36 +- .../explore/controlPanels/Shared_DeckGL.jsx | 20 + .../explore/controlPanels/Shared_Global.js | 26 ++ .../controlPanels/{Table.js => Table.jsx} | 45 +- .../src/explore/controlPanels/TimeTable.js | 34 +- .../src/explore/controlPanels/Treemap.js | 16 +- .../src/explore/controlPanels/sections.jsx | 147 +++++- superset-frontend/src/explore/controls.jsx | 436 ------------------ 37 files changed, 1095 insertions(+), 617 deletions(-) rename superset-frontend/src/explore/controlPanels/{EventFlow.js => EventFlow.jsx} (64%) create mode 100644 superset-frontend/src/explore/controlPanels/Shared_Global.js rename superset-frontend/src/explore/controlPanels/{Table.js => Table.jsx} (81%) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 25dadf010..1b727b729 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -970,13 +970,11 @@ Note not all fields are correctly catagorized. The fields vary based on visualiz | Field | Type | Notes | | ---------------------- | --------------- | ------------------------------------- | -| `date_time_format` | _N/A_ | _Deprecated?_ | | `druid_time_origin` | _string_ | The Druid **Origin** widget | | `granularity` | _string_ | The Druid **Time Granularity** widget | | `granularity_sqla` | _string_ | The SQLA **Time Column** widget | | `time_grain_sqla` | _string_ | The SQLA **Time Grain** widget | | `time_range` | _string_ | The **Time range** widget | -| `time_range_endpoints` | _array(string)_ | Used by SIP-15 [HIDDEN] | ### GROUP BY @@ -991,7 +989,6 @@ Note not all fields are correctly catagorized. The fields vary based on visualiz | Field | Type | Notes | | --------------- | --------------- | ----------------------- | -| `all_columns` | _array(string)_ | The **Columns** widget | | `order_by_cols` | _array(string)_ | The **Ordering** widget | | `row_limit` | - | See Query section | @@ -1013,9 +1010,7 @@ Note not all fields are correctly catagorized. The fields vary based on visualiz | Field | Type | Notes | | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------- | ------------------------------------------------- | | `adhoc_filters` | _array(object)_ | The **Filters** widget | -| `all_columns_x` | _array(string)_ | The **Numeric Columns** widget | | `columns` | _array(string)_ | The **Breakdowns** widget | -| `contribution` | _boolean_ | The **Contribution** widget | | `groupby` | _array(string)_ | The **Group by** or **Series** widget | | `limit` | _number_ | The **Series Limit** widget | | `metric`
`metric_2`
`metrics`
`percent_mertics`
`secondary_metric`
`size`
`x`
`y` | _string_,_object_,_array(string)_,_array(object)_ | The metric(s) depending on the visualization type | @@ -1025,24 +1020,13 @@ Note not all fields are correctly catagorized. The fields vary based on visualiz The `metric` (or equivalent) and `timeseries_limit_metric` fields are all composed of either metric names or the JSON representation of the `AdhocMetric` TypeScript type. The `adhoc_filters` is composed of the JSON represent of the `AdhocFilter` TypeScript type (which can comprise of columns or metrics depending on whether it is a WHERE or HAVING clause). The `all_columns`, `all_columns_x`, `columns`, `groupby`, and `order_by_cols` fields all represent column names. -### Filters Configuration - -| Field | Type | Notes | -| ---------------- | ------------- | --------------------------------- | -| `filter_configs` | array(object) | The filter-box **Filters** widget | - -The filter-box configuration references column names (via the `column` key) and optionally metric names (via the `metric` key) if sorting is defined. - ### Chart Options | Field | Type | Notes | | --------------------- | --------- | ------------------------------------------------ | | `color_picker` | _object_ | The **Fixed Color** widget | -| `global_opacity` | _number_ | The **Opacity** widget | | `label_colors` | _object_ | The **Color Scheme** widget | -| `link_length` | _number_ | The **No of Bins** widget | | `normalized` | _boolean_ | The **Normalized** widget | -| `number_format` | _string_ | The **Number format** widget | ### Y Axis @@ -1059,22 +1043,15 @@ Note the `y_axis_format` is defined under various section for some charts. | Field | Type | Notes | | -------------- | -------- | ------------ | | `color_scheme` | _string_ | | -| `slice_id` | _number_ | The slice ID | -| `url_params` | _object_ | | ### Unclassified | Field | Type | Notes | | ------------------------------- | ----- | ----- | | `add_to_dash` | _N/A_ | | -| `all_columns_y` | _N/A_ | | -| `annotation_layers` | _N/A_ | | -| `cache_timeout` | _N/A_ | | | `code` | _N/A_ | | | `collapsed_fieldsets` | _N/A_ | | -| `column_collection` | _N/A_ | | | `comparison type` | _N/A_ | | -| `contribution` | _N/A_ | | | `country_fieldtype` | _N/A_ | | | `default_filters` | _N/A_ | | | `entity` | _N/A_ | | @@ -1092,17 +1069,9 @@ Note the `y_axis_format` is defined under various section for some charts. | `import_time` | _N/A_ | | | `label` | _N/A_ | | | `linear_color_scheme` | _N/A_ | | -| `log_scale` | _N/A_ | | -| `mapbox_label` | _N/A_ | | -| `mapbox_style` | _N/A_ | | -| `markup_type` | _N/A_ | | -| `min_periods` | _N/A_ | | | `new_dashboard_name` | _N/A_ | | | `new_slice_name` | _N/A_ | | -| `normalize_across` | _N/A_ | | | `num_period_compare` | _N/A_ | | -| `order_desc` | _N/A_ | | -| `pandas_aggfunc` | _N/A_ | | | `period_ratio_type` | _N/A_ | | | `perm` | _N/A_ | | | `rdo_save` | _N/A_ | | @@ -1110,18 +1079,11 @@ Note the `y_axis_format` is defined under various section for some charts. | `remote_id` | _N/A_ | | | `resample_fillmethod` | _N/A_ | | | `resample_how` | _N/A_ | | -| `rolling_periods` | _N/A_ | | -| `rolling_type` | _N/A_ | | | `rose_area_proportion` | _N/A_ | | | `save_to_dashboard_id` | _N/A_ | | | `schema` | _N/A_ | | -| `select_country` | _N/A_ | | | `series` | _N/A_ | | | `show_bubbles` | _N/A_ | | -| `show_values` | _N/A_ | | | `slice_name` | _N/A_ | | -| `table_filter` | _N/A_ | | | `timed_refresh_immune_slices` | _N/A_ | | -| `url` | _N/A_ | | | `userid` | _N/A_ | | -| `viewport_zoom` | _N/A_ | | diff --git a/superset-frontend/spec/javascripts/explore/controlUtils_spec.jsx b/superset-frontend/spec/javascripts/explore/controlUtils_spec.jsx index b2bb70068..7aedf1004 100644 --- a/superset-frontend/spec/javascripts/explore/controlUtils_spec.jsx +++ b/superset-frontend/spec/javascripts/explore/controlUtils_spec.jsx @@ -16,6 +16,8 @@ * specific language governing permissions and limitations * under the License. */ + +import React from 'react'; import { getChartControlPanelRegistry } from '@superset-ui/chart'; import { t } from '@superset-ui/translation'; import { @@ -23,6 +25,7 @@ import { getControlState, applyMapStateToPropsToControl, } from '../../../src/explore/controlUtils'; +import ColumnOption from '../../../src/components/ColumnOption'; describe('controlUtils', () => { const state = { @@ -92,6 +95,39 @@ describe('controlUtils', () => { label: t('My beautiful colors'), }, }, + }) + .registerValue('table', { + controlPanelSections: [ + { + label: t('Chart Options'), + expanded: true, + controlSetRows: [ + [ + { + name: 'all_columns', + config: { + type: 'SelectControl', + multi: true, + label: t('Columns'), + default: [], + description: t('Columns to display'), + optionRenderer: c => , + valueRenderer: c => , + valueKey: 'column_name', + allowAll: true, + mapStateToProps: stateRef => ({ + options: stateRef.datasource + ? stateRef.datasource.columns + : [], + }), + commaChoosesOption: false, + freeForm: true, + }, + }, + ], + ], + }, + ], }); }); diff --git a/superset-frontend/spec/javascripts/utils/getControlsForVizType_spec.js b/superset-frontend/spec/javascripts/utils/getControlsForVizType_spec.js index 167863af8..2066362eb 100644 --- a/superset-frontend/spec/javascripts/utils/getControlsForVizType_spec.js +++ b/superset-frontend/spec/javascripts/utils/getControlsForVizType_spec.js @@ -19,6 +19,7 @@ import { getChartControlPanelRegistry } from '@superset-ui/chart'; import getControlsForVizType from 'src/utils/getControlsForVizType'; +import { t } from '@superset-ui/translation'; const fakePluginControls = { controlPanelSections: [ @@ -26,7 +27,7 @@ const fakePluginControls = { label: 'Fake Control Panel Sections', expanded: true, controlSetRows: [ - ['url_params'], + ['label_colors'], [ { name: 'y_axis_bounds', @@ -77,28 +78,36 @@ describe('getControlsForVizType', () => { }); 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', - }, - }); + expect( + JSON.stringify(getControlsForVizType('chart_controls_inventory_fake')), + ).toEqual( + JSON.stringify({ + label_colors: { + type: 'ColorMapControl', + label: t('Color Map'), + default: {}, + renderTrigger: true, + mapStateToProps: state => ({ + colorNamespace: state.form_data.color_namespace, + colorScheme: state.form_data.color_scheme, + }), + }, + 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', + }, + }), + ); }); }); diff --git a/superset-frontend/src/explore/controlPanels/BigNumber.jsx b/superset-frontend/src/explore/controlPanels/BigNumber.jsx index f30309685..49c9ed181 100644 --- a/superset-frontend/src/explore/controlPanels/BigNumber.jsx +++ b/superset-frontend/src/explore/controlPanels/BigNumber.jsx @@ -19,6 +19,7 @@ import { t } from '@superset-ui/translation'; import React from 'react'; import { headerFontSize, subheaderFontSize } from './Shared_BigNumber'; +import { formatSelectOptions } from '../../modules/utils'; export default { controlPanelSections: [ @@ -78,7 +79,28 @@ export default { }, }, ], - ['time_range_fixed'], + [ + { + name: 'time_range_fixed', + config: { + type: 'CheckboxControl', + label: t('Fix to selected Time Range'), + description: t( + 'Fix the trend line to the full time range specified in case filtered results do not include the start or end dates', + ), + renderTrigger: true, + visibility(props) { + const { + time_range: timeRange, + viz_type: vizType, + show_trend_line: showTrendLine, + } = props.form_data; + // only display this option when a time range is selected + return timeRange && timeRange !== 'No filter'; + }, + }, + }, + ], ], }, { @@ -95,7 +117,54 @@ export default { expanded: false, controlSetRows: [ [

{t('Rolling Window')}

], - ['rolling_type', 'rolling_periods', 'min_periods'], + [ + { + name: 'rolling_type', + config: { + type: 'SelectControl', + label: t('Rolling Function'), + default: 'None', + choices: formatSelectOptions([ + 'None', + 'mean', + 'sum', + 'std', + 'cumsum', + ]), + description: t( + 'Defines a rolling window function to apply, works along ' + + 'with the [Periods] text box', + ), + }, + }, + { + name: 'rolling_periods', + config: { + type: 'TextControl', + label: t('Periods'), + isInt: true, + description: t( + 'Defines the size of the rolling window function, ' + + 'relative to the time granularity selected', + ), + }, + }, + { + name: 'min_periods', + config: { + type: 'TextControl', + label: t('Min Periods'), + isInt: true, + description: t( + 'The minimum number of rolling periods required to show ' + + 'a value. For instance if you do a cumulative sum on 7 days ' + + 'you may want your "Min Period" to be 7, so that all data points ' + + 'shown are the total of 7 periods. This will hide the "ramp up" ' + + 'taking place over the first 7 periods', + ), + }, + }, + ], ], }, ], diff --git a/superset-frontend/src/explore/controlPanels/CalHeatmap.js b/superset-frontend/src/explore/controlPanels/CalHeatmap.js index c91506533..180b246f3 100644 --- a/superset-frontend/src/explore/controlPanels/CalHeatmap.js +++ b/superset-frontend/src/explore/controlPanels/CalHeatmap.js @@ -156,7 +156,18 @@ export default { description: t('Whether to display the legend (toggles)'), }, }, - 'show_values', + { + name: 'show_values', + config: { + type: 'CheckboxControl', + label: t('Show Values'), + renderTrigger: true, + default: false, + description: t( + 'Whether to display the numerical values within the cells', + ), + }, + }, ], [ { @@ -178,8 +189,5 @@ export default { y_axis_format: { label: t('Number Format'), }, - show_values: { - default: false, - }, }, }; diff --git a/superset-frontend/src/explore/controlPanels/CountryMap.js b/superset-frontend/src/explore/controlPanels/CountryMap.js index 257ece661..e9e021547 100644 --- a/superset-frontend/src/explore/controlPanels/CountryMap.js +++ b/superset-frontend/src/explore/controlPanels/CountryMap.js @@ -17,6 +17,7 @@ * under the License. */ import { t } from '@superset-ui/translation'; +import { D3_FORMAT_OPTIONS, D3_FORMAT_DOCS } from '../controls'; export default { controlPanelSections: [ @@ -29,7 +30,60 @@ export default { label: t('Options'), expanded: true, controlSetRows: [ - ['select_country', 'number_format'], + [ + { + name: 'select_country', + config: { + type: 'SelectControl', + label: t('Country Name'), + default: 'France', + choices: [ + 'Belgium', + 'Brazil', + 'Bulgaria', + 'China', + 'Egypt', + 'France', + 'Germany', + 'India', + 'Iran', + 'Italy', + 'Japan', + 'Korea', + 'Liechtenstein', + 'Morocco', + 'Myanmar', + 'Netherlands', + 'Portugal', + 'Russia', + 'Singapore', + 'Spain', + 'Switzerland', + 'Thailand', + 'Timorleste', + 'Uk', + 'Ukraine', + 'Usa', + 'Zambia', + ].map(s => [s, s]), + description: t( + 'The name of the country that Superset should display', + ), + }, + }, + { + name: 'number_format', + config: { + type: 'SelectControl', + freeForm: true, + label: t('Number format'), + renderTrigger: true, + default: 'SMART_NUMBER', + choices: D3_FORMAT_OPTIONS, + description: D3_FORMAT_DOCS, + }, + }, + ], ['linear_color_scheme'], ], }, diff --git a/superset-frontend/src/explore/controlPanels/DeckArc.js b/superset-frontend/src/explore/controlPanels/DeckArc.js index 80c111d52..5382b2ae0 100644 --- a/superset-frontend/src/explore/controlPanels/DeckArc.js +++ b/superset-frontend/src/explore/controlPanels/DeckArc.js @@ -35,6 +35,7 @@ import { legendFormat, legendPosition, viewport, + mapboxStyle, } from './Shared_DeckGL'; export default { @@ -77,7 +78,7 @@ export default { { label: t('Map'), controlSetRows: [ - ['mapbox_style', viewport], + [mapboxStyle, viewport], [autozoom, null], ], }, diff --git a/superset-frontend/src/explore/controlPanels/DeckGeojson.js b/superset-frontend/src/explore/controlPanels/DeckGeojson.js index f59c2d0d8..ab7dd6fea 100644 --- a/superset-frontend/src/explore/controlPanels/DeckGeojson.js +++ b/superset-frontend/src/explore/controlPanels/DeckGeojson.js @@ -35,6 +35,7 @@ import { stroked, extruded, viewport, + mapboxStyle, } from './Shared_DeckGL'; export default { @@ -66,7 +67,7 @@ export default { { label: t('Map'), controlSetRows: [ - ['mapbox_style', viewport], + [mapboxStyle, viewport], // TODO [autozoom, null], // import { autozoom } from './Shared_DeckGL' ], }, diff --git a/superset-frontend/src/explore/controlPanels/DeckGrid.js b/superset-frontend/src/explore/controlPanels/DeckGrid.js index 0482ab14f..4167b5e30 100644 --- a/superset-frontend/src/explore/controlPanels/DeckGrid.js +++ b/superset-frontend/src/explore/controlPanels/DeckGrid.js @@ -29,6 +29,7 @@ import { gridSize, viewport, spatial, + mapboxStyle, } from './Shared_DeckGL'; export default { @@ -46,7 +47,7 @@ export default { { label: t('Map'), controlSetRows: [ - ['mapbox_style', viewport], + [mapboxStyle, viewport], ['color_picker', autozoom], [gridSize, extruded], ], diff --git a/superset-frontend/src/explore/controlPanels/DeckHex.js b/superset-frontend/src/explore/controlPanels/DeckHex.js index 6edf4cd78..dbfe6ab1b 100644 --- a/superset-frontend/src/explore/controlPanels/DeckHex.js +++ b/superset-frontend/src/explore/controlPanels/DeckHex.js @@ -32,6 +32,7 @@ import { gridSize, viewport, spatial, + mapboxStyle, } from './Shared_DeckGL'; export default { @@ -49,7 +50,7 @@ export default { { label: t('Map'), controlSetRows: [ - ['mapbox_style', viewport], + [mapboxStyle, viewport], ['color_picker', autozoom], [gridSize, extruded], [ diff --git a/superset-frontend/src/explore/controlPanels/DeckMulti.js b/superset-frontend/src/explore/controlPanels/DeckMulti.js index b801cdd8a..ba6937572 100644 --- a/superset-frontend/src/explore/controlPanels/DeckMulti.js +++ b/superset-frontend/src/explore/controlPanels/DeckMulti.js @@ -18,7 +18,7 @@ */ import { t } from '@superset-ui/translation'; import { validateNonEmpty } from '@superset-ui/validator'; -import { viewport } from './Shared_DeckGL'; +import { viewport, mapboxStyle } from './Shared_DeckGL'; export default { requiresTime: true, @@ -27,7 +27,7 @@ export default { label: t('Map'), expanded: true, controlSetRows: [ - ['mapbox_style', viewport], + [mapboxStyle, viewport], [ { name: 'deck_slices', diff --git a/superset-frontend/src/explore/controlPanels/DeckPath.js b/superset-frontend/src/explore/controlPanels/DeckPath.js index ddedcc43f..d9c491673 100644 --- a/superset-frontend/src/explore/controlPanels/DeckPath.js +++ b/superset-frontend/src/explore/controlPanels/DeckPath.js @@ -29,6 +29,7 @@ import { lineWidth, lineType, reverseLongLat, + mapboxStyle, } from './Shared_DeckGL'; export default { @@ -56,7 +57,7 @@ export default { label: t('Map'), expanded: true, controlSetRows: [ - ['mapbox_style', viewport], + [mapboxStyle, viewport], ['color_picker', lineWidth], [reverseLongLat, autozoom], ], diff --git a/superset-frontend/src/explore/controlPanels/DeckPolygon.js b/superset-frontend/src/explore/controlPanels/DeckPolygon.js index 99c4f993d..0288f032f 100644 --- a/superset-frontend/src/explore/controlPanels/DeckPolygon.js +++ b/superset-frontend/src/explore/controlPanels/DeckPolygon.js @@ -40,6 +40,7 @@ import { lineWidth, lineType, reverseLongLat, + mapboxStyle, } from './Shared_DeckGL'; export default { @@ -63,7 +64,7 @@ export default { label: t('Map'), expanded: true, controlSetRows: [ - ['mapbox_style', viewport], + [mapboxStyle, viewport], [autozoom, null], ], }, @@ -121,7 +122,16 @@ export default { }, ], [ - 'table_filter', + { + name: 'table_filter', + config: { + type: 'CheckboxControl', + label: t('Emit Filter Events'), + renderTrigger: true, + default: false, + description: t('Whether to apply filter when items are clicked'), + }, + }, { name: 'toggle_polygons', config: { diff --git a/superset-frontend/src/explore/controlPanels/DeckScatter.js b/superset-frontend/src/explore/controlPanels/DeckScatter.js index efb858454..7fc407d25 100644 --- a/superset-frontend/src/explore/controlPanels/DeckScatter.js +++ b/superset-frontend/src/explore/controlPanels/DeckScatter.js @@ -33,6 +33,7 @@ import { spatial, pointRadiusFixed, multiplier, + mapboxStyle, } from './Shared_DeckGL'; export default { @@ -62,7 +63,7 @@ export default { label: t('Map'), expanded: true, controlSetRows: [ - ['mapbox_style', viewport], + [mapboxStyle, viewport], [autozoom, null], ], }, diff --git a/superset-frontend/src/explore/controlPanels/DeckScreengrid.js b/superset-frontend/src/explore/controlPanels/DeckScreengrid.js index 2cd77787d..8af832c45 100644 --- a/superset-frontend/src/explore/controlPanels/DeckScreengrid.js +++ b/superset-frontend/src/explore/controlPanels/DeckScreengrid.js @@ -29,6 +29,7 @@ import { gridSize, viewport, spatial, + mapboxStyle, } from './Shared_DeckGL'; export default { @@ -46,7 +47,7 @@ export default { { label: t('Map'), controlSetRows: [ - ['mapbox_style', viewport], + [mapboxStyle, viewport], [autozoom, null], ], }, diff --git a/superset-frontend/src/explore/controlPanels/DirectedForce.js b/superset-frontend/src/explore/controlPanels/DirectedForce.js index db9a3d2ec..4a52824d6 100644 --- a/superset-frontend/src/explore/controlPanels/DirectedForce.js +++ b/superset-frontend/src/explore/controlPanels/DirectedForce.js @@ -34,7 +34,29 @@ export default { { label: t('Options'), controlSetRows: [ - ['link_length'], + [ + { + name: 'link_length', + config: { + type: 'SelectControl', + renderTrigger: true, + freeForm: true, + label: t('Link Length'), + default: '200', + choices: formatSelectOptions([ + '10', + '25', + '50', + '75', + '100', + '150', + '200', + '250', + ]), + description: t('Link length in the force layout'), + }, + }, + ], [ { name: 'charge', diff --git a/superset-frontend/src/explore/controlPanels/DistBar.js b/superset-frontend/src/explore/controlPanels/DistBar.js index 5c1ee4ad2..e69705f4c 100644 --- a/superset-frontend/src/explore/controlPanels/DistBar.js +++ b/superset-frontend/src/explore/controlPanels/DistBar.js @@ -41,7 +41,17 @@ export default { ['groupby'], ['columns'], ['row_limit'], - ['contribution'], + [ + { + name: 'contribution', + config: { + type: 'CheckboxControl', + label: t('Contribution'), + default: false, + description: t('Compute the contribution to the total'), + }, + }, + ], ], }, { diff --git a/superset-frontend/src/explore/controlPanels/EventFlow.js b/superset-frontend/src/explore/controlPanels/EventFlow.jsx similarity index 64% rename from superset-frontend/src/explore/controlPanels/EventFlow.js rename to superset-frontend/src/explore/controlPanels/EventFlow.jsx index fd6056b99..07debd1f3 100644 --- a/superset-frontend/src/explore/controlPanels/EventFlow.js +++ b/superset-frontend/src/explore/controlPanels/EventFlow.jsx @@ -16,9 +16,12 @@ * specific language governing permissions and limitations * under the License. */ +import React from 'react'; import { t } from '@superset-ui/translation'; import { validateNonEmpty } from '@superset-ui/validator'; import { formatSelectOptionsForRange } from '../../modules/utils'; +import { columnChoices } from '../controls'; +import ColumnOption from '../../components/ColumnOption'; export default { requiresTime: true, @@ -27,7 +30,24 @@ export default { label: t('Event definition'), controlSetRows: [ ['entity'], - ['all_columns_x'], + [ + { + name: 'all_columns_x', + config: { + type: 'SelectControl', + label: t('Column containing event names'), + default: control => + control.choices && control.choices.length > 0 + ? control.choices[0][0] + : null, + }, + description: t('Columns to display'), + mapStateToProps: state => ({ + choices: columnChoices(state.datasource), + }), + validators: [validateNonEmpty], + }, + ], ['row_limit'], [ { @@ -68,7 +88,29 @@ export default { }, { label: t('Additional metadata'), - controlSetRows: [['all_columns']], + controlSetRows: [ + [ + { + name: 'all_columns', + config: { + type: 'SelectControl', + multi: true, + label: t('Meta data'), + default: [], + description: t('Select any columns for metadata inspection'), + optionRenderer: c => , + valueRenderer: c => , + valueKey: 'column_name', + allowAll: true, + mapStateToProps: state => ({ + options: state.datasource ? state.datasource.columns : [], + }), + commaChoosesOption: false, + freeForm: true, + }, + }, + ], + ], }, ], controlOverrides: { @@ -76,23 +118,11 @@ export default { label: t('Column containing entity ids'), description: t('e.g., a "user id" column'), }, - all_columns_x: { - label: t('Column containing event names'), - validators: [validateNonEmpty], - default: control => - control.choices && control.choices.length > 0 - ? control.choices[0][0] - : null, - }, row_limit: { label: t('Event count limit'), description: t( 'The maximum number of events to return, equivalent to the number of rows', ), }, - all_columns: { - label: t('Meta data'), - description: t('Select any columns for metadata inspection'), - }, }, }; diff --git a/superset-frontend/src/explore/controlPanels/FilterBox.jsx b/superset-frontend/src/explore/controlPanels/FilterBox.jsx index bf6fad6c9..7d8a701b3 100644 --- a/superset-frontend/src/explore/controlPanels/FilterBox.jsx +++ b/superset-frontend/src/explore/controlPanels/FilterBox.jsx @@ -25,7 +25,19 @@ export default { label: t('Filters Configuration'), expanded: true, controlSetRows: [ - ['filter_configs'], + [ + { + name: 'filter_configs', + config: { + type: 'CollectionControl', + label: 'Filters', + description: t('Filter configuration for the filter box'), + validators: [], + controlName: 'FilterBoxItemControl', + mapStateToProps: ({ datasource }) => ({ datasource }), + }, + }, + ], [
], [ { diff --git a/superset-frontend/src/explore/controlPanels/Heatmap.js b/superset-frontend/src/explore/controlPanels/Heatmap.js index fd379a156..c5559fe71 100644 --- a/superset-frontend/src/explore/controlPanels/Heatmap.js +++ b/superset-frontend/src/explore/controlPanels/Heatmap.js @@ -22,6 +22,7 @@ import { formatSelectOptionsForRange, formatSelectOptions, } from '../../modules/utils'; +import { columnChoices } from '../controls'; const sortAxisChoices = [ ['alpha_asc', t('Axis ascending')], @@ -36,7 +37,34 @@ export default { label: t('Query'), expanded: true, controlSetRows: [ - ['all_columns_x', 'all_columns_y'], + [ + { + name: 'all_columns_x', + config: { + type: 'SelectControl', + label: 'X', + default: null, + description: t('Columns to display'), + mapStateToProps: state => ({ + choices: columnChoices(state.datasource), + }), + validators: [validateNonEmpty], + }, + }, + { + name: 'all_columns_y', + config: { + type: 'SelectControl', + label: 'Y', + default: null, + description: t('Columns to display'), + mapStateToProps: state => ({ + choices: columnChoices(state.datasource), + }), + validators: [validateNonEmpty], + }, + }, + ], ['metric'], ['adhoc_filters'], ['row_limit'], @@ -95,7 +123,24 @@ export default { ), }, }, - 'normalize_across', + { + name: 'normalize_across', + config: { + type: 'SelectControl', + label: t('Normalize Across'), + choices: [ + ['heatmap', 'heatmap'], + ['x', 'x'], + ['y', 'y'], + ], + default: 'heatmap', + description: t( + 'Color will be rendered based on a ratio ' + + 'of the cell against the sum of across this ' + + 'criteria', + ), + }, + }, ], [ { @@ -185,7 +230,30 @@ export default { }, }, ], - ['show_values', 'normalized'], + [ + { + name: 'show_values', + config: { + type: 'CheckboxControl', + label: t('Show Values'), + renderTrigger: true, + default: false, + description: t( + 'Whether to display the numerical values within the cells', + ), + }, + }, + { + name: 'normalized', + config: { + type: 'CheckboxControl', + label: t('Normalized'), + renderTrigger: true, + description: t('Whether to normalize the histogram'), + default: false, + }, + }, + ], [ { name: 'sort_x_axis', @@ -212,12 +280,6 @@ export default { }, ], controlOverrides: { - all_columns_x: { - validators: [validateNonEmpty], - }, - all_columns_y: { - validators: [validateNonEmpty], - }, normalized: t( 'Whether to apply a normal distribution based on rank on the color scale', ), diff --git a/superset-frontend/src/explore/controlPanels/Histogram.js b/superset-frontend/src/explore/controlPanels/Histogram.js index 3f5810edd..d2e5efedb 100644 --- a/superset-frontend/src/explore/controlPanels/Histogram.js +++ b/superset-frontend/src/explore/controlPanels/Histogram.js @@ -18,6 +18,8 @@ */ import { t } from '@superset-ui/translation'; import { validateNonEmpty } from '@superset-ui/validator'; +import { columnChoices } from '../controls'; +import { formatSelectOptions } from '../../modules/utils'; export default { controlPanelSections: [ @@ -25,7 +27,24 @@ export default { label: t('Query'), expanded: true, controlSetRows: [ - ['all_columns_x'], + [ + { + name: 'all_columns_x', + config: { + type: 'SelectControl', + label: t('Numeric Columns'), + default: null, + description: t( + 'Select the numeric columns to draw the histogram', + ), + mapStateToProps: state => ({ + choices: columnChoices(state.datasource), + }), + multi: true, + validators: [validateNonEmpty], + }, + }, + ], ['adhoc_filters'], ['row_limit'], ['groupby'], @@ -36,7 +55,29 @@ export default { expanded: true, controlSetRows: [ ['color_scheme', 'label_colors'], - ['link_length'], + [ + { + name: 'link_length', + config: { + type: 'SelectControl', + renderTrigger: true, + freeForm: true, + label: t('No of Bins'), + default: 5, + choices: formatSelectOptions([ + '10', + '25', + '50', + '75', + '100', + '150', + '200', + '250', + ]), + description: t('Select the number of bins for the histogram'), + }, + }, + ], [ { name: 'x_axis_label', @@ -57,26 +98,19 @@ export default { }, }, ], - ['global_opacity'], - ['normalized'], + [ + { + name: 'normalized', + config: { + type: 'CheckboxControl', + label: t('Normalized'), + renderTrigger: true, + description: t('Whether to normalize the histogram'), + default: false, + }, + }, + ], ], }, ], - controlOverrides: { - all_columns_x: { - label: t('Numeric Columns'), - description: t('Select the numeric columns to draw the histogram'), - multi: true, - validators: [validateNonEmpty], - }, - link_length: { - label: t('No of Bins'), - description: t('Select the number of bins for the histogram'), - default: 5, - }, - global_opacity: { - description: t('Opacity of the bars. Between 0 and 1'), - renderTrigger: true, - }, - }, }; diff --git a/superset-frontend/src/explore/controlPanels/Iframe.js b/superset-frontend/src/explore/controlPanels/Iframe.js index 540ee8d06..cdc446925 100644 --- a/superset-frontend/src/explore/controlPanels/Iframe.js +++ b/superset-frontend/src/explore/controlPanels/Iframe.js @@ -22,7 +22,22 @@ export default { controlPanelSections: [ { label: t('Options'), - controlSetRows: [['url']], + controlSetRows: [ + [ + { + name: 'url', + config: { + type: 'TextControl', + label: t('URL'), + description: t( + 'The URL, this control is templated, so you can integrate ' + + '{{ width }} and/or {{ height }} in your URL string.', + ), + default: '', + }, + }, + ], + ], }, ], sectionOverrides: { diff --git a/superset-frontend/src/explore/controlPanels/Mapbox.js b/superset-frontend/src/explore/controlPanels/Mapbox.js index 15f87b85f..0c8f61a79 100644 --- a/superset-frontend/src/explore/controlPanels/Mapbox.js +++ b/superset-frontend/src/explore/controlPanels/Mapbox.js @@ -26,7 +26,32 @@ export default { label: t('Query'), expanded: true, controlSetRows: [ - ['all_columns_x', 'all_columns_y'], + [ + { + name: 'all_columns_x', + config: { + type: 'SelectControl', + label: t('Longitude'), + default: null, + description: t('Column containing longitude data'), + mapStateToProps: state => ({ + choices: columnChoices(state.datasource), + }), + }, + }, + { + name: 'all_columns_y', + config: { + type: 'SelectControl', + label: t('Latitude'), + default: null, + description: t('Column containing latitude data'), + mapStateToProps: state => ({ + choices: columnChoices(state.datasource), + }), + }, + }, + ], [ { name: 'clustering_radius', @@ -100,7 +125,51 @@ export default { }, { label: t('Labelling'), - controlSetRows: [['mapbox_label'], ['pandas_aggfunc']], + controlSetRows: [ + [ + { + name: 'mapbox_label', + config: { + type: 'SelectControl', + multi: true, + label: t('label'), + default: [], + description: t( + '`count` is COUNT(*) if a group by is used. ' + + 'Numerical columns will be aggregated with the aggregator. ' + + 'Non-numerical columns will be used to label points. ' + + 'Leave empty to get a count of points in each cluster.', + ), + mapStateToProps: state => ({ + choices: columnChoices(state.datasource), + }), + }, + }, + ], + [ + { + name: 'pandas_aggfunc', + config: { + type: 'SelectControl', + label: t('Cluster label aggregator'), + clearable: false, + choices: formatSelectOptions([ + 'sum', + 'mean', + 'min', + 'max', + 'std', + 'var', + ]), + default: 'sum', + description: t( + 'Aggregate function applied to the list of points ' + + 'in each cluster to produce the cluster label.', + ), + }, + }, + ], + ], }, { label: t('Visual Tweaks'), @@ -118,8 +187,44 @@ export default { }, }, ], - ['mapbox_style'], - ['global_opacity'], + [ + { + name: 'mapbox_style', + config: { + type: 'SelectControl', + label: t('Map Style'), + clearable: false, + renderTrigger: true, + choices: [ + ['mapbox://styles/mapbox/streets-v9', 'Streets'], + ['mapbox://styles/mapbox/dark-v9', 'Dark'], + ['mapbox://styles/mapbox/light-v9', 'Light'], + [ + 'mapbox://styles/mapbox/satellite-streets-v9', + 'Satellite Streets', + ], + ['mapbox://styles/mapbox/satellite-v9', 'Satellite'], + ['mapbox://styles/mapbox/outdoors-v9', 'Outdoors'], + ], + default: 'mapbox://styles/mapbox/light-v9', + description: t('Base layer map style'), + }, + }, + ], + [ + { + name: 'global_opacity', + config: { + type: 'TextControl', + label: t('Opacity'), + default: 1, + isFloat: true, + description: t( + 'Opacity of all clusters, points, and labels. Between 0 and 1.', + ), + }, + }, + ], [ { name: 'mapbox_color', @@ -197,21 +302,6 @@ export default { }, ], controlOverrides: { - all_columns_x: { - label: t('Longitude'), - description: t('Column containing longitude data'), - }, - all_columns_y: { - label: t('Latitude'), - description: t('Column containing latitude data'), - }, - pandas_aggfunc: { - label: t('Cluster label aggregator'), - description: t( - 'Aggregate function applied to the list of points ' + - 'in each cluster to produce the cluster label.', - ), - }, groupby: { description: t( 'One or many controls to group by. If grouping, latitude ' + diff --git a/superset-frontend/src/explore/controlPanels/Markup.js b/superset-frontend/src/explore/controlPanels/Markup.js index f94c907dd..1f7182aee 100644 --- a/superset-frontend/src/explore/controlPanels/Markup.js +++ b/superset-frontend/src/explore/controlPanels/Markup.js @@ -17,13 +17,47 @@ * under the License. */ import { t } from '@superset-ui/translation'; +import { validateNonEmpty } from '@superset-ui/validator'; +import { formatSelectOptions } from '../../modules/utils'; export default { controlPanelSections: [ { label: t('Code'), expanded: true, - controlSetRows: [['markup_type'], ['code']], + controlSetRows: [ + [ + { + name: 'markup_type', + config: { + type: 'SelectControl', + label: t('Markup Type'), + clearable: false, + choices: formatSelectOptions(['markdown', 'html']), + default: 'markdown', + validators: [validateNonEmpty], + description: t('Pick your favorite markup language'), + }, + }, + ], + [ + { + name: 'code', + config: { + type: 'TextAreaControl', + label: t('Code'), + description: t('Put your code here'), + mapStateToProps: state => ({ + language: + state.controls && state.controls.markup_type + ? state.controls.markup_type.value + : 'markdown', + }), + default: '', + }, + }, + ], + ], }, ], sectionOverrides: { diff --git a/superset-frontend/src/explore/controlPanels/PairedTtest.js b/superset-frontend/src/explore/controlPanels/PairedTtest.js index 2aee9f3dc..27b605f5b 100644 --- a/superset-frontend/src/explore/controlPanels/PairedTtest.js +++ b/superset-frontend/src/explore/controlPanels/PairedTtest.js @@ -29,7 +29,26 @@ export default { ['adhoc_filters'], ['groupby'], ['limit', 'timeseries_limit_metric'], - ['order_desc', 'contribution'], + [ + { + name: 'order_desc', + config: { + type: 'CheckboxControl', + label: t('Sort Descending'), + default: true, + description: t('Whether to sort descending or ascending'), + }, + }, + { + name: 'contribution', + config: { + type: 'CheckboxControl', + label: t('Contribution'), + default: false, + description: t('Compute the contribution to the total'), + }, + }, + ], ['row_limit', null], ], }, diff --git a/superset-frontend/src/explore/controlPanels/Partition.jsx b/superset-frontend/src/explore/controlPanels/Partition.jsx index 86089d87a..cb01bc790 100644 --- a/superset-frontend/src/explore/controlPanels/Partition.jsx +++ b/superset-frontend/src/explore/controlPanels/Partition.jsx @@ -19,12 +19,47 @@ import React from 'react'; import { t } from '@superset-ui/translation'; import { validateNonEmpty } from '@superset-ui/validator'; -import { NVD3TimeSeries } from './sections'; import OptionDescription from '../../components/OptionDescription'; +import { NVD3TimeSeries } from './sections'; +import { + D3_TIME_FORMAT_OPTIONS, + D3_FORMAT_DOCS, + D3_FORMAT_OPTIONS, +} from '../controls'; export default { controlPanelSections: [ - NVD3TimeSeries[0], + { + label: t('Query'), + expanded: true, + controlSetRows: [ + ['metrics'], + ['adhoc_filters'], + ['groupby'], + ['limit', 'timeseries_limit_metric'], + [ + { + name: 'order_desc', + config: { + type: 'CheckboxControl', + label: t('Sort Descending'), + default: true, + description: t('Whether to sort descending or ascending'), + }, + }, + { + name: 'contribution', + config: { + type: 'CheckboxControl', + label: t('Contribution'), + default: false, + description: t('Compute the contribution to the total'), + }, + }, + ], + ['row_limit', null], + ], + }, { label: t('Time Series Options'), expanded: true, @@ -99,7 +134,32 @@ export default { expanded: true, controlSetRows: [ ['color_scheme', 'label_colors'], - ['number_format', 'date_time_format'], + [ + { + name: 'number_format', + config: { + type: 'SelectControl', + freeForm: true, + label: t('Number format'), + renderTrigger: true, + default: 'SMART_NUMBER', + choices: D3_FORMAT_OPTIONS, + description: D3_FORMAT_DOCS, + }, + }, + { + name: 'date_time_format', + config: { + type: 'SelectControl', + freeForm: true, + label: t('Date Time Format'), + renderTrigger: true, + default: 'smart_date', + choices: D3_TIME_FORMAT_OPTIONS, + description: D3_FORMAT_DOCS, + }, + }, + ], [ { name: 'partition_limit', @@ -129,7 +189,16 @@ export default { }, ], [ - 'log_scale', + { + name: 'log_scale', + config: { + type: 'CheckboxControl', + label: t('Log Scale'), + default: false, + renderTrigger: true, + description: t('Use a log scale'), + }, + }, { name: 'equal_date_size', config: { diff --git a/superset-frontend/src/explore/controlPanels/Pie.js b/superset-frontend/src/explore/controlPanels/Pie.js index fed9e0172..0e627b6b3 100644 --- a/superset-frontend/src/explore/controlPanels/Pie.js +++ b/superset-frontend/src/explore/controlPanels/Pie.js @@ -18,6 +18,7 @@ */ import { t } from '@superset-ui/translation'; import { showLegend } from './Shared_NVD3'; +import { D3_FORMAT_OPTIONS } from '../controls'; export default { controlPanelSections: [ @@ -53,7 +54,23 @@ export default { description: t('What should be shown on the label?'), }, }, - 'number_format', + { + name: 'number_format', + config: { + type: 'SelectControl', + freeForm: true, + label: t('Number format'), + renderTrigger: true, + default: 'SMART_NUMBER', + choices: D3_FORMAT_OPTIONS, + description: + t('D3 format syntax: https://github.com/d3/d3-format') + + ' ' + + t( + 'Only applies when the "Label Type" is not set to a percentage.', + ), + }, + }, ], [ { @@ -101,11 +118,5 @@ export default { row_limit: { default: 25, }, - number_format: { - description: - t('D3 format syntax: https://github.com/d3/d3-format') + - ' ' + - t('Only applies when the "Label Type" is not set to a percentage.'), - }, }, }; diff --git a/superset-frontend/src/explore/controlPanels/PivotTable.js b/superset-frontend/src/explore/controlPanels/PivotTable.js index 5451f0cce..3100c793f 100644 --- a/superset-frontend/src/explore/controlPanels/PivotTable.js +++ b/superset-frontend/src/explore/controlPanels/PivotTable.js @@ -17,6 +17,8 @@ * under the License. */ import { t } from '@superset-ui/translation'; +import { formatSelectOptions } from '../../modules/utils'; +import { D3_FORMAT_OPTIONS, D3_FORMAT_DOCS } from '../controls'; export default { controlPanelSections: [ @@ -35,7 +37,27 @@ export default { label: t('Pivot Options'), controlSetRows: [ [ - 'pandas_aggfunc', + { + name: 'pandas_aggfunc', + config: { + type: 'SelectControl', + label: t('Aggregation function'), + clearable: false, + choices: formatSelectOptions([ + 'sum', + 'mean', + 'min', + 'max', + 'std', + 'var', + ]), + default: 'sum', + description: t( + 'Aggregate function to apply when pivoting and ' + + 'computing the total rows and columns', + ), + }, + }, { name: 'pivot_margins', config: { @@ -48,7 +70,18 @@ export default { }, ], [ - 'number_format', + { + name: 'number_format', + config: { + type: 'SelectControl', + freeForm: true, + label: t('Number format'), + renderTrigger: true, + default: 'SMART_NUMBER', + choices: D3_FORMAT_OPTIONS, + description: D3_FORMAT_DOCS, + }, + }, { name: 'combine_metric', config: { diff --git a/superset-frontend/src/explore/controlPanels/Rose.js b/superset-frontend/src/explore/controlPanels/Rose.js index 147bd24a7..9352f5f44 100644 --- a/superset-frontend/src/explore/controlPanels/Rose.js +++ b/superset-frontend/src/explore/controlPanels/Rose.js @@ -18,6 +18,11 @@ */ import { t } from '@superset-ui/translation'; import { NVD3TimeSeries } from './sections'; +import { + D3_TIME_FORMAT_OPTIONS, + D3_FORMAT_OPTIONS, + D3_FORMAT_DOCS, +} from '../controls'; export default { requiresTime: true, @@ -28,7 +33,32 @@ export default { expanded: true, controlSetRows: [ ['color_scheme', 'label_colors'], - ['number_format', 'date_time_format'], + [ + { + name: 'number_format', + config: { + type: 'SelectControl', + freeForm: true, + label: t('Number format'), + renderTrigger: true, + default: 'SMART_NUMBER', + choices: D3_FORMAT_OPTIONS, + description: D3_FORMAT_DOCS, + }, + }, + { + name: 'date_time_format', + config: { + type: 'SelectControl', + freeForm: true, + label: t('Date Time Format'), + renderTrigger: true, + default: 'smart_date', + choices: D3_TIME_FORMAT_OPTIONS, + description: D3_FORMAT_DOCS, + }, + }, + ], [ { name: 'rich_tooltip', diff --git a/superset-frontend/src/explore/controlPanels/Separator.js b/superset-frontend/src/explore/controlPanels/Separator.js index bad9a2b9f..cb2693a4b 100644 --- a/superset-frontend/src/explore/controlPanels/Separator.js +++ b/superset-frontend/src/explore/controlPanels/Separator.js @@ -17,12 +17,46 @@ * under the License. */ import { t } from '@superset-ui/translation'; +import { validateNonEmpty } from '@superset-ui/validator'; +import { formatSelectOptions } from '../../modules/utils'; export default { controlPanelSections: [ { label: t('Code'), - controlSetRows: [['markup_type'], ['code']], + controlSetRows: [ + [ + { + name: 'markup_type', + config: { + type: 'SelectControl', + label: t('Markup Type'), + clearable: false, + choices: formatSelectOptions(['markdown', 'html']), + default: 'markdown', + validators: [validateNonEmpty], + description: t('Pick your favorite markup language'), + }, + }, + ], + [ + { + name: 'code', + config: { + type: 'TextAreaControl', + label: t('Code'), + description: t('Put your code here'), + mapStateToProps: state => ({ + language: + state.controls && state.controls.markup_type + ? state.controls.markup_type.value + : 'markdown', + }), + default: '', + }, + }, + ], + ], }, ], controlOverrides: { diff --git a/superset-frontend/src/explore/controlPanels/Shared_DeckGL.jsx b/superset-frontend/src/explore/controlPanels/Shared_DeckGL.jsx index ddadb47f4..b2ea16232 100644 --- a/superset-frontend/src/explore/controlPanels/Shared_DeckGL.jsx +++ b/superset-frontend/src/explore/controlPanels/Shared_DeckGL.jsx @@ -392,3 +392,23 @@ export const reverseLongLat = { default: false, }, }; + +export const mapboxStyle = { + name: 'mapbox_style', + config: { + type: 'SelectControl', + label: t('Map Style'), + clearable: false, + renderTrigger: true, + choices: [ + ['mapbox://styles/mapbox/streets-v9', 'Streets'], + ['mapbox://styles/mapbox/dark-v9', 'Dark'], + ['mapbox://styles/mapbox/light-v9', 'Light'], + ['mapbox://styles/mapbox/satellite-streets-v9', 'Satellite Streets'], + ['mapbox://styles/mapbox/satellite-v9', 'Satellite'], + ['mapbox://styles/mapbox/outdoors-v9', 'Outdoors'], + ], + default: 'mapbox://styles/mapbox/light-v9', + description: t('Base layer map style'), + }, +}; diff --git a/superset-frontend/src/explore/controlPanels/Shared_Global.js b/superset-frontend/src/explore/controlPanels/Shared_Global.js new file mode 100644 index 000000000..3796676d8 --- /dev/null +++ b/superset-frontend/src/explore/controlPanels/Shared_Global.js @@ -0,0 +1,26 @@ +/** + * 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 BigNumber viz plugin repo. +import { t } from '@superset-ui/translation'; + +export const foo = { + name: 'foo_control', + config: {}, +}; diff --git a/superset-frontend/src/explore/controlPanels/Table.js b/superset-frontend/src/explore/controlPanels/Table.jsx similarity index 81% rename from superset-frontend/src/explore/controlPanels/Table.js rename to superset-frontend/src/explore/controlPanels/Table.jsx index 69d754193..09374d3c1 100644 --- a/superset-frontend/src/explore/controlPanels/Table.js +++ b/superset-frontend/src/explore/controlPanels/Table.jsx @@ -16,10 +16,12 @@ * specific language governing permissions and limitations * under the License. */ +import React from 'react'; import { t } from '@superset-ui/translation'; import { validateNonEmpty } from '@superset-ui/validator'; import { D3_TIME_FORMAT_OPTIONS } from '../controls'; import { formatSelectOptions } from '../../modules/utils'; +import ColumnOption from '../../components/ColumnOption'; export default { controlPanelSections: [ @@ -66,7 +68,15 @@ export default { default: false, }, }, - 'order_desc', + { + name: 'order_desc', + config: { + type: 'CheckboxControl', + label: t('Sort Descending'), + default: true, + description: t('Whether to sort descending or ascending'), + }, + }, ], ], }, @@ -75,7 +85,27 @@ export default { description: t('Use this section if you want to query atomic rows'), expanded: true, controlSetRows: [ - ['all_columns'], + [ + { + name: 'all_columns', + config: { + type: 'SelectControl', + multi: true, + label: t('Columns'), + default: [], + description: t('Columns to display'), + optionRenderer: c => , + valueRenderer: c => , + valueKey: 'column_name', + allowAll: true, + mapStateToProps: state => ({ + options: state.datasource ? state.datasource.columns : [], + }), + commaChoosesOption: false, + freeForm: true, + }, + }, + ], [ { name: 'order_by_cols', @@ -157,7 +187,16 @@ export default { description: t('Whether to include a client-side search box'), }, }, - 'table_filter', + { + name: 'table_filter', + config: { + type: 'CheckboxControl', + label: t('Emit Filter Events'), + renderTrigger: true, + default: false, + description: t('Whether to apply filter when items are clicked'), + }, + }, ], [ { diff --git a/superset-frontend/src/explore/controlPanels/TimeTable.js b/superset-frontend/src/explore/controlPanels/TimeTable.js index d62d7d8d0..c29601833 100644 --- a/superset-frontend/src/explore/controlPanels/TimeTable.js +++ b/superset-frontend/src/explore/controlPanels/TimeTable.js @@ -17,6 +17,7 @@ * under the License. */ import { t } from '@superset-ui/translation'; +import { validateNonEmpty } from '@superset-ui/validator'; export default { controlPanelSections: [ @@ -28,8 +29,31 @@ export default { ['adhoc_filters'], ['groupby'], ['limit'], - ['column_collection'], - ['url'], + [ + { + name: 'column_collection', + config: { + type: 'CollectionControl', + label: t('Time Series Columns'), + validators: [validateNonEmpty], + controlName: 'TimeSeriesColumnControl', + }, + }, + ], + [ + { + name: 'url', + config: { + type: 'TextControl', + label: t('URL'), + description: t( + "Templated link, it's possible to include {{ metric }} " + + 'or other values coming from the controls.', + ), + default: '', + }, + }, + ], ], }, ], @@ -37,12 +61,6 @@ export default { groupby: { multiple: false, }, - url: { - description: t( - "Templated link, it's possible to include {{ metric }} " + - 'or other values coming from the controls.', - ), - }, }, sectionOverrides: { druidTimeSeries: { diff --git a/superset-frontend/src/explore/controlPanels/Treemap.js b/superset-frontend/src/explore/controlPanels/Treemap.js index d4b0dcc90..10eafc798 100644 --- a/superset-frontend/src/explore/controlPanels/Treemap.js +++ b/superset-frontend/src/explore/controlPanels/Treemap.js @@ -17,6 +17,7 @@ * under the License. */ import { t } from '@superset-ui/translation'; +import { D3_FORMAT_OPTIONS, D3_FORMAT_DOCS } from '../controls'; export default { controlPanelSections: [ @@ -48,7 +49,20 @@ export default { }, }, ], - ['number_format'], + [ + { + name: 'number_format', + config: { + type: 'SelectControl', + freeForm: true, + label: t('Number format'), + renderTrigger: true, + default: 'SMART_NUMBER', + choices: D3_FORMAT_OPTIONS, + description: D3_FORMAT_DOCS, + }, + }, + ], ], }, ], diff --git a/superset-frontend/src/explore/controlPanels/sections.jsx b/superset-frontend/src/explore/controlPanels/sections.jsx index c361926f6..fac9ec3c2 100644 --- a/superset-frontend/src/explore/controlPanels/sections.jsx +++ b/superset-frontend/src/explore/controlPanels/sections.jsx @@ -33,7 +33,44 @@ export const datasourceAndVizType = { controlSetRows: [ ['datasource'], ['viz_type'], - ['slice_id', 'cache_timeout', 'url_params', 'time_range_endpoints'], + [ + { + name: 'slice_id', + config: { + type: 'HiddenControl', + label: t('Chart ID'), + hidden: true, + description: t('The id of the active chart'), + }, + }, + { + name: 'cache_timeout', + config: { + type: 'HiddenControl', + label: t('Cache Timeout (seconds)'), + hidden: true, + description: t('The number of seconds before expiring the cache'), + }, + }, + { + name: 'url_params', + config: { + type: 'HiddenControl', + label: t('URL Parameters'), + hidden: true, + description: t('Extra parameters for use in jinja templated queries'), + }, + }, + { + name: 'time_range_endpoints', + config: { + type: 'HiddenControl', + label: t('Time range endpoints'), + hidden: true, + description: t('Time range endpoints (SIP-15)'), + }, + }, + ], ], }; @@ -51,8 +88,23 @@ export const sqlaTimeSeries = { export const annotations = { label: t('Annotations and Layers'), + tabOverride: 'data', expanded: true, - controlSetRows: [['annotation_layers']], + controlSetRows: [ + [ + { + name: 'annotation_layers', + config: { + type: 'AnnotationLayerControl', + label: '', + default: [], + description: 'Annotation Layers', + renderTrigger: true, + tabOverride: 'data', + }, + }, + ], + ], }; export const NVD3TimeSeries = [ @@ -64,12 +116,32 @@ export const NVD3TimeSeries = [ ['adhoc_filters'], ['groupby'], ['limit', 'timeseries_limit_metric'], - ['order_desc', 'contribution'], + [ + { + name: 'order_desc', + config: { + type: 'CheckboxControl', + label: t('Sort Descending'), + default: true, + description: t('Whether to sort descending or ascending'), + }, + }, + { + name: 'contribution', + config: { + type: 'CheckboxControl', + label: t('Contribution'), + default: false, + description: t('Compute the contribution to the total'), + }, + }, + ], ['row_limit', null], ], }, { label: t('Advanced Analytics'), + tabOverride: 'data', description: t( 'This section contains options ' + 'that allow for advanced analytical post processing ' + @@ -77,7 +149,54 @@ export const NVD3TimeSeries = [ ), controlSetRows: [ [

{t('Rolling Window')}

], - ['rolling_type', 'rolling_periods', 'min_periods'], + [ + { + name: 'rolling_type', + config: { + type: 'SelectControl', + label: t('Rolling Function'), + default: 'None', + choices: formatSelectOptions([ + 'None', + 'mean', + 'sum', + 'std', + 'cumsum', + ]), + description: t( + 'Defines a rolling window function to apply, works along ' + + 'with the [Periods] text box', + ), + }, + }, + { + name: 'rolling_periods', + config: { + type: 'TextControl', + label: t('Periods'), + isInt: true, + description: t( + 'Defines the size of the rolling window function, ' + + 'relative to the time granularity selected', + ), + }, + }, + { + name: 'min_periods', + config: { + type: 'TextControl', + label: t('Min Periods'), + isInt: true, + description: t( + 'The minimum number of rolling periods required to show ' + + 'a value. For instance if you do a cumulative sum on 7 days ' + + 'you may want your "Min Period" to be 7, so that all data points ' + + 'shown are the total of 7 periods. This will hide the "ramp up" ' + + 'taking place over the first 7 periods', + ), + }, + }, + ], [

{t('Time Comparison')}

], [ { @@ -103,7 +222,25 @@ export const NVD3TimeSeries = [ ), }, }, - 'comparison_type', + { + name: 'comparison_type', + config: { + type: 'SelectControl', + label: t('Calculation type'), + default: 'values', + choices: [ + ['values', 'Actual Values'], + ['absolute', 'Absolute difference'], + ['percentage', 'Percentage change'], + ['ratio', 'Ratio'], + ], + description: t( + 'How to display time shifts: as individual lines; as the ' + + 'absolute difference between the main time series and each time shift; ' + + 'as the percentage change; or as the ratio between series and time shifts.', + ), + }, + }, ], [

{t('Python Functions')}

], [

pandas.resample

], diff --git a/superset-frontend/src/explore/controls.jsx b/superset-frontend/src/explore/controls.jsx index 6306928f3..bc2b1e0a2 100644 --- a/superset-frontend/src/explore/controls.jsx +++ b/superset-frontend/src/explore/controls.jsx @@ -243,22 +243,6 @@ export const controls = { isLinear: true, }, - normalize_across: { - type: 'SelectControl', - label: t('Normalize Across'), - choices: [ - ['heatmap', 'heatmap'], - ['x', 'x'], - ['y', 'y'], - ], - default: 'heatmap', - description: t( - 'Color will be rendered based on a ratio ' + - 'of the cell against the sum of across this ' + - 'criteria', - ), - }, - secondary_metric: { ...metric, label: t('Color Metric'), @@ -266,41 +250,6 @@ export const controls = { validators: [], description: t('A metric to use for color'), }, - select_country: { - type: 'SelectControl', - label: t('Country Name'), - default: 'France', - choices: [ - 'Belgium', - 'Brazil', - 'Bulgaria', - 'China', - 'Egypt', - 'France', - 'Germany', - 'India', - 'Iran', - 'Italy', - 'Japan', - 'Korea', - 'Liechtenstein', - 'Morocco', - 'Myanmar', - 'Netherlands', - 'Portugal', - 'Russia', - 'Singapore', - 'Spain', - 'Switzerland', - 'Thailand', - 'Timorleste', - 'Uk', - 'Ukraine', - 'Usa', - 'Zambia', - ].map(s => [s, s]), - description: t('The name of the country that Superset should display'), - }, groupby: groupByControl, @@ -310,77 +259,6 @@ export const controls = { description: t('One or many controls to pivot as columns'), }, - all_columns: { - type: 'SelectControl', - multi: true, - label: t('Columns'), - default: [], - description: t('Columns to display'), - optionRenderer: c => , - valueRenderer: c => , - valueKey: 'column_name', - allowAll: true, - mapStateToProps: state => ({ - options: state.datasource ? state.datasource.columns : [], - }), - commaChoosesOption: false, - freeForm: true, - }, - - longitude: { - type: 'SelectControl', - label: t('Longitude'), - default: 1, - validators: [validateNonEmpty], - description: t('Select the longitude column'), - mapStateToProps: state => ({ - choices: columnChoices(state.datasource), - }), - }, - - latitude: { - type: 'SelectControl', - label: t('Latitude'), - default: 1, - validators: [validateNonEmpty], - description: t('Select the latitude column'), - mapStateToProps: state => ({ - choices: columnChoices(state.datasource), - }), - }, - - polygon: { - type: 'SelectControl', - label: t('Polygon Column'), - validators: [validateNonEmpty], - description: t( - 'Select the polygon column. Each row should contain JSON.array(N) of [longitude, latitude] points', - ), - mapStateToProps: state => ({ - choices: columnChoices(state.datasource), - }), - }, - - all_columns_x: { - type: 'SelectControl', - label: 'X', - default: null, - description: t('Columns to display'), - mapStateToProps: state => ({ - choices: columnChoices(state.datasource), - }), - }, - - all_columns_y: { - type: 'SelectControl', - label: 'Y', - default: null, - description: t('Columns to display'), - mapStateToProps: state => ({ - choices: columnChoices(state.datasource), - }), - }, - druid_time_origin: { type: 'SelectControl', freeForm: true, @@ -426,25 +304,6 @@ export const controls = { ), }, - link_length: { - type: 'SelectControl', - renderTrigger: true, - freeForm: true, - label: t('Link Length'), - default: '200', - choices: formatSelectOptions([ - '10', - '25', - '50', - '75', - '100', - '150', - '200', - '250', - ]), - description: t('Link length in the force layout'), - }, - granularity_sqla: { type: 'SelectControl', label: TIME_FILTER_LABELS.granularity_sqla, @@ -509,34 +368,6 @@ export const controls = { }), }, - time_range_fixed: { - type: 'CheckboxControl', - label: t('Fix to selected Time Range'), - description: t( - 'Fix the trend line to the full time range specified in case filtered results do not include the start or end dates', - ), - renderTrigger: true, - visibility(props) { - const { - time_range: timeRange, - viz_type: vizType, - show_trend_line: showTrendLine, - } = props.form_data; - // only display this option when a time range is selected - return timeRange && timeRange !== 'No filter'; - }, - }, - - number_format: { - type: 'SelectControl', - freeForm: true, - label: t('Number format'), - renderTrigger: true, - default: 'SMART_NUMBER', - choices: D3_FORMAT_OPTIONS, - description: D3_FORMAT_DOCS, - }, - row_limit: { type: 'SelectControl', freeForm: true, @@ -572,47 +403,6 @@ export const controls = { }), }, - order_desc: { - type: 'CheckboxControl', - label: t('Sort Descending'), - default: true, - description: t('Whether to sort descending or ascending'), - }, - - rolling_type: { - type: 'SelectControl', - label: t('Rolling Function'), - default: 'None', - choices: formatSelectOptions(['None', 'mean', 'sum', 'std', 'cumsum']), - description: t( - 'Defines a rolling window function to apply, works along ' + - 'with the [Periods] text box', - ), - }, - - rolling_periods: { - type: 'TextControl', - label: t('Periods'), - isInt: true, - description: t( - 'Defines the size of the rolling window function, ' + - 'relative to the time granularity selected', - ), - }, - - min_periods: { - type: 'TextControl', - label: t('Min Periods'), - isInt: true, - description: t( - 'The minimum number of rolling periods required to show ' + - 'a value. For instance if you do a cumulative sum on 7 days ' + - 'you may want your "Min Period" to be 7, so that all data points ' + - 'shown are the total of 7 periods. This will hide the "ramp up" ' + - 'taking place over the first 7 periods', - ), - }, - series: { ...groupByControl, label: t('Series'), @@ -654,16 +444,6 @@ export const controls = { default: null, }, - url: { - type: 'TextControl', - label: t('URL'), - description: t( - 'The URL, this control is templated, so you can integrate ' + - '{{ width }} and/or {{ height }} in your URL string.', - ), - default: '', - }, - y_axis_format: { type: 'SelectControl', freeForm: true, @@ -689,170 +469,6 @@ export const controls = { }, }, - date_time_format: { - type: 'SelectControl', - freeForm: true, - label: t('Date Time Format'), - renderTrigger: true, - default: 'smart_date', - choices: D3_TIME_FORMAT_OPTIONS, - description: D3_FORMAT_DOCS, - }, - - markup_type: { - type: 'SelectControl', - label: t('Markup Type'), - clearable: false, - choices: formatSelectOptions(['markdown', 'html']), - default: 'markdown', - validators: [validateNonEmpty], - description: t('Pick your favorite markup language'), - }, - - code: { - type: 'TextAreaControl', - label: t('Code'), - description: t('Put your code here'), - mapStateToProps: state => ({ - language: - state.controls && state.controls.markup_type - ? state.controls.markup_type.value - : 'markdown', - }), - default: '', - }, - - pandas_aggfunc: { - type: 'SelectControl', - label: t('Aggregation function'), - clearable: false, - choices: formatSelectOptions(['sum', 'mean', 'min', 'max', 'std', 'var']), - default: 'sum', - description: t( - 'Aggregate function to apply when pivoting and ' + - 'computing the total rows and columns', - ), - }, - - table_filter: { - type: 'CheckboxControl', - label: t('Emit Filter Events'), - renderTrigger: true, - default: false, - description: t('Whether to apply filter when items are clicked'), - }, - - show_values: { - type: 'CheckboxControl', - label: t('Show Values'), - renderTrigger: true, - default: false, - description: t('Whether to display the numerical values within the cells'), - }, - - log_scale: { - type: 'CheckboxControl', - label: t('Log Scale'), - default: false, - renderTrigger: true, - description: t('Use a log scale'), - }, - - contribution: { - type: 'CheckboxControl', - label: t('Contribution'), - default: false, - description: t('Compute the contribution to the total'), - }, - - comparison_type: { - type: 'SelectControl', - label: t('Calculation type'), - default: 'values', - choices: [ - ['values', 'Actual Values'], - ['absolute', 'Absolute difference'], - ['percentage', 'Percentage change'], - ['ratio', 'Ratio'], - ], - description: t( - 'How to display time shifts: as individual lines; as the ' + - 'absolute difference between the main time series and each time shift; ' + - 'as the percentage change; or as the ratio between series and time shifts.', - ), - }, - - mapbox_label: { - type: 'SelectControl', - multi: true, - label: t('label'), - default: [], - description: t( - '`count` is COUNT(*) if a group by is used. ' + - 'Numerical columns will be aggregated with the aggregator. ' + - 'Non-numerical columns will be used to label points. ' + - 'Leave empty to get a count of points in each cluster.', - ), - mapStateToProps: state => ({ - choices: columnChoices(state.datasource), - }), - }, - - mapbox_style: { - type: 'SelectControl', - label: t('Map Style'), - clearable: false, - renderTrigger: true, - choices: [ - ['mapbox://styles/mapbox/streets-v9', 'Streets'], - ['mapbox://styles/mapbox/dark-v9', 'Dark'], - ['mapbox://styles/mapbox/light-v9', 'Light'], - ['mapbox://styles/mapbox/satellite-streets-v9', 'Satellite Streets'], - ['mapbox://styles/mapbox/satellite-v9', 'Satellite'], - ['mapbox://styles/mapbox/outdoors-v9', 'Outdoors'], - ], - default: 'mapbox://styles/mapbox/light-v9', - description: t('Base layer map style'), - }, - - global_opacity: { - type: 'TextControl', - label: t('Opacity'), - default: 1, - isFloat: true, - description: t( - 'Opacity of all clusters, points, and labels. Between 0 and 1.', - ), - }, - - viewport_zoom: { - type: 'TextControl', - label: t('Zoom'), - renderTrigger: true, - isFloat: true, - default: 11, - description: t('Zoom level of the map'), - places: 8, - // Viewport zoom shouldn't prompt user to re-run query - dontRefreshOnChange: true, - }, - - color: { - type: 'ColorPickerControl', - label: t('Color'), - default: PRIMARY_COLOR, - description: t('Pick a color'), - }, - - annotation_layers: { - type: 'AnnotationLayerControl', - label: '', - default: [], - description: 'Annotation Layers', - renderTrigger: true, - tabOverride: 'data', - }, - adhoc_filters: { type: 'AdhocFilterControl', label: t('Filters'), @@ -868,34 +484,6 @@ export const controls = { provideFormDataToProps: true, }, - slice_id: { - type: 'HiddenControl', - label: t('Chart ID'), - hidden: true, - description: t('The id of the active chart'), - }, - - cache_timeout: { - type: 'HiddenControl', - label: t('Cache Timeout (seconds)'), - hidden: true, - description: t('The number of seconds before expiring the cache'), - }, - - url_params: { - type: 'HiddenControl', - label: t('URL Parameters'), - hidden: true, - description: t('Extra parameters for use in jinja templated queries'), - }, - - time_range_endpoints: { - type: 'HiddenControl', - label: t('Time range endpoints'), - hidden: true, - description: t('Time range endpoints (SIP-15)'), - }, - color_scheme: { type: 'ColorSchemeControl', label: t('Color Scheme'), @@ -916,29 +504,5 @@ export const controls = { colorScheme: state.form_data.color_scheme, }), }, - - column_collection: { - type: 'CollectionControl', - label: t('Time Series Columns'), - validators: [validateNonEmpty], - controlName: 'TimeSeriesColumnControl', - }, - - filter_configs: { - type: 'CollectionControl', - label: 'Filters', - description: t('Filter configuration for the filter box'), - validators: [], - controlName: 'FilterBoxItemControl', - mapStateToProps: ({ datasource }) => ({ datasource }), - }, - - normalized: { - type: 'CheckboxControl', - label: t('Normalized'), - renderTrigger: true, - description: t('Whether to normalize the histogram'), - default: false, - }, }; export default controls;