From 7e86e38dab2bb4180f7ef7e98ab8052d21d99468 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 26 Mar 2020 09:28:51 -0700 Subject: [PATCH] Migrating unique Table controls (#9388) --- CONTRIBUTING.md | 7 - .../src/explore/controlPanels/Table.js | 146 +++++++++++++++++- superset-frontend/src/explore/controls.jsx | 74 --------- 3 files changed, 139 insertions(+), 88 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8ebb3239f203d..23f1266c879a2 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -961,10 +961,8 @@ Note not all fields are correctly catagorized. The fields vary based on visualiz | Field | Type | Notes | | ------------------------- | --------------- | --------------------------- | -| `include_time` | _boolean_ | The **Include Time** widget | | `metrics` | _array(string)_ | See Query section | | `order_asc` | - | See Query section | -| `percent_metrics` | - | See Query section | | `row_limit` | - | See Query section | | `timeseries_limit_metric` | - | See Query section | @@ -1086,7 +1084,6 @@ Note the `y_axis_format` is defined under various section for some charts. | Field | Type | Notes | | ------------------------------- | ----- | ----- | | `add_to_dash` | _N/A_ | | -| `align_pn` | _N/A_ | | | `all_columns_y` | _N/A_ | | | `annotation_layers` | _N/A_ | | | `autozoom` | _N/A_ | | @@ -1095,7 +1092,6 @@ Note the `y_axis_format` is defined under various section for some charts. | `clustering_radius` | _N/A_ | | | `code` | _N/A_ | | | `collapsed_fieldsets` | _N/A_ | | -| `color_pn` | _N/A_ | | | `column_collection` | _N/A_ | | | `comparison type` | _N/A_ | | | `contribution` | _N/A_ | | @@ -1125,7 +1121,6 @@ Note the `y_axis_format` is defined under various section for some charts. | `grid_size` | _N/A_ | | | `horizon_color_scale` | _N/A_ | | | `import_time` | _N/A_ | | -| `include_search` | _N/A_ | | | `include_series` | _N/A_ | | | `instant_filtering` | _N/A_ | | | `js_agg_function` | _N/A_ | | @@ -1159,7 +1154,6 @@ Note the `y_axis_format` is defined under various section for some charts. | `num_period_compare` | _N/A_ | | | `order_bars` | _N/A_ | | | `order_desc` | _N/A_ | | -| `page_length` | _N/A_ | | | `pandas_aggfunc` | _N/A_ | | | `partition_limit` | _N/A_ | | | `partition_threshold` | _N/A_ | | @@ -1210,7 +1204,6 @@ Note the `y_axis_format` is defined under various section for some charts. | `stroked` | _N/A_ | | | `subheader` | _N/A_ | | | `table_filter` | _N/A_ | | -| `table_timestamp_format` | _N/A_ | | | `time_compare` | _N/A_ | | | `time_series_option` | _N/A_ | | | `timed_refresh_immune_slices` | _N/A_ | | diff --git a/superset-frontend/src/explore/controlPanels/Table.js b/superset-frontend/src/explore/controlPanels/Table.js index 6463cfef1e137..f41717c3e5872 100644 --- a/superset-frontend/src/explore/controlPanels/Table.js +++ b/superset-frontend/src/explore/controlPanels/Table.js @@ -17,6 +17,9 @@ * under the License. */ import { t } from '@superset-ui/translation'; +import * as v from '../validators'; +import { D3_TIME_FORMAT_OPTIONS } from '../controls'; +import { formatSelectOptions } from '../../modules/utils'; export default { controlPanelSections: [ @@ -27,16 +30,71 @@ export default { controlSetRows: [ ['groupby'], ['metrics'], - ['percent_metrics'], + [ + { + name: 'percent_metrics', + config: { + type: 'MetricsControl', + multi: true, + mapStateToProps: state => { + const datasource = state.datasource; + return { + columns: datasource ? datasource.columns : [], + savedMetrics: datasource ? datasource.metrics : [], + datasourceType: datasource && datasource.type, + }; + }, + default: [], + label: t('Percentage Metrics'), + validators: [], + description: t( + 'Metrics for which percentage of total are to be displayed', + ), + }, + }, + ], ['timeseries_limit_metric', 'row_limit'], - ['include_time', 'order_desc'], + [ + { + name: 'include_time', + config: { + type: 'CheckboxControl', + label: t('Include Time'), + description: t( + 'Whether to include the time granularity as defined in the time section', + ), + default: false, + }, + }, + 'order_desc', + ], ], }, { label: t('NOT GROUPED BY'), description: t('Use this section if you want to query atomic rows'), expanded: true, - controlSetRows: [['all_columns'], ['order_by_cols'], ['row_limit', null]], + controlSetRows: [ + ['all_columns'], + [ + { + name: 'order_by_cols', + config: { + type: 'SelectControl', + multi: true, + label: t('Ordering'), + default: [], + description: t('One or many metrics to display'), + mapStateToProps: state => ({ + choices: state.datasource + ? state.datasource.order_by_choices + : [], + }), + }, + }, + ], + ['row_limit', null], + ], }, { label: t('Query'), @@ -47,10 +105,84 @@ export default { label: t('Options'), expanded: true, controlSetRows: [ - ['table_timestamp_format'], - ['page_length', null], - ['include_search', 'table_filter'], - ['align_pn', 'color_pn'], + [ + { + name: 'table_timestamp_format', + config: { + type: 'SelectControl', + freeForm: true, + label: t('Table Timestamp Format'), + default: '%Y-%m-%d %H:%M:%S', + renderTrigger: true, + validators: [v.nonEmpty], + clearable: false, + choices: D3_TIME_FORMAT_OPTIONS, + description: t('Timestamp Format'), + }, + }, + ], + [ + { + name: 'page_length', + config: { + type: 'SelectControl', + freeForm: true, + renderTrigger: true, + label: t('Page Length'), + default: 0, + choices: formatSelectOptions([ + 0, + 10, + 25, + 40, + 50, + 75, + 100, + 150, + 200, + ]), + description: t('Rows per page, 0 means no pagination'), + }, + }, + null, + ], + [ + { + name: 'include_search', + config: { + type: 'CheckboxControl', + label: t('Search Box'), + renderTrigger: true, + default: false, + description: t('Whether to include a client-side search box'), + }, + }, + 'table_filter', + ], + [ + { + name: 'align_pn', + config: { + type: 'CheckboxControl', + label: t('Align +/-'), + renderTrigger: true, + default: false, + description: t( + 'Whether to align the background chart for +/- values', + ), + }, + }, + { + name: 'color_pn', + config: { + type: 'CheckboxControl', + label: t('Color +/-'), + renderTrigger: true, + default: true, + description: t('Whether to color +/- values'), + }, + }, + ], ], }, ], diff --git a/superset-frontend/src/explore/controls.jsx b/superset-frontend/src/explore/controls.jsx index 15c54a0dcadfc..d895e3225009d 100644 --- a/superset-frontend/src/explore/controls.jsx +++ b/superset-frontend/src/explore/controls.jsx @@ -257,15 +257,6 @@ export const controls = { description: t('The type of visualization to display'), }, - percent_metrics: { - ...metrics, - multi: true, - default: [], - label: t('Percentage Metrics'), - validators: [], - description: t('Metrics for which percentage of total are to be displayed'), - }, - y_axis_bounds: { type: 'BoundsControl', label: t('Y Axis Bounds'), @@ -279,16 +270,6 @@ export const controls = { ), }, - order_by_cols: { - type: 'SelectControl', - multi: true, - label: t('Ordering'), - default: [], - description: t('One or many metrics to display'), - mapStateToProps: state => ({ - choices: state.datasource ? state.datasource.order_by_choices : [], - }), - }, color_picker: { label: t('Fixed Color'), description: t('Use this to define a static color for all circles'), @@ -415,15 +396,6 @@ export const controls = { ), }, - include_time: { - type: 'CheckboxControl', - label: t('Include Time'), - description: t( - 'Whether to include the time granularity as defined in the time section', - ), - default: false, - }, - autozoom: { type: 'CheckboxControl', label: t('Auto Zoom'), @@ -1115,18 +1087,6 @@ export const controls = { description: t('Suffix to apply after the percentage display'), }, - table_timestamp_format: { - type: 'SelectControl', - freeForm: true, - label: t('Table Timestamp Format'), - default: '%Y-%m-%d %H:%M:%S', - renderTrigger: true, - validators: [v.nonEmpty], - clearable: false, - choices: D3_TIME_FORMAT_OPTIONS, - description: t('Timestamp Format'), - }, - series_height: { type: 'SelectControl', renderTrigger: true, @@ -1146,16 +1106,6 @@ export const controls = { description: t('Pixel height of each series'), }, - page_length: { - type: 'SelectControl', - freeForm: true, - renderTrigger: true, - label: t('Page Length'), - default: 0, - choices: formatSelectOptions([0, 10, 25, 40, 50, 75, 100, 150, 200]), - description: t('Rows per page, 0 means no pagination'), - }, - x_axis_format: { type: 'SelectControl', freeForm: true, @@ -1436,14 +1386,6 @@ export const controls = { description: t('Whether to display the interactive data table'), }, - include_search: { - type: 'CheckboxControl', - label: t('Search Box'), - renderTrigger: true, - default: false, - description: t('Whether to include a client-side search box'), - }, - table_filter: { type: 'CheckboxControl', label: t('Emit Filter Events'), @@ -1452,22 +1394,6 @@ export const controls = { description: t('Whether to apply filter when items are clicked'), }, - align_pn: { - type: 'CheckboxControl', - label: t('Align +/-'), - renderTrigger: true, - default: false, - description: t('Whether to align the background chart for +/- values'), - }, - - color_pn: { - type: 'CheckboxControl', - label: t('Color +/-'), - renderTrigger: true, - default: true, - description: t('Whether to color +/- values'), - }, - show_legend: { type: 'CheckboxControl', label: t('Legend'),