From 68949ce1264d9723bf616c9968ba4dada5fa9653 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Tue, 19 May 2020 14:19:38 -0700 Subject: [PATCH] chore: so 514 tablechart plugin controls migration (#508) * add controls to index * remove consoles * Update package.json --- .../legacy-plugin-chart-table/package.json | 2 + .../src/controlPanel.tsx | 242 ++++++++++++++++++ .../legacy-plugin-chart-table/src/index.ts | 2 + 3 files changed, 246 insertions(+) create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-table/src/controlPanel.tsx diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-table/package.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-table/package.json index 32d9c0f4b676..29c8081576cd 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-table/package.json +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-table/package.json @@ -35,10 +35,12 @@ }, "peerDependencies": { "@superset-ui/chart": "^0.13.0", + "@superset-ui/control-utils": "^0.13.12", "@superset-ui/number-format": "^0.13.0", "@superset-ui/query": "^0.13.0", "@superset-ui/time-format": "^0.13.0", "@superset-ui/translation": "^0.13.0", + "@superset-ui/validator": "^0.13.3", "jquery": "^3.4.1", "react": "^16.13.1", "react-dom": "^16.13.1" diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-table/src/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-table/src/controlPanel.tsx new file mode 100644 index 000000000000..527d76b88ad1 --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-table/src/controlPanel.tsx @@ -0,0 +1,242 @@ +/** + * 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 React from 'react'; +import { t } from '@superset-ui/translation'; +import { + formatSelectOptions, + D3_TIME_FORMAT_OPTIONS, + ColumnOption, +} from '@superset-ui/control-utils'; +import { validateNonEmpty } from '@superset-ui/validator'; + +export default { + controlPanelSections: [ + { + label: t('GROUP BY'), + description: t('Use this section if you want a query that aggregates'), + expanded: true, + controlSetRows: [ + ['groupby'], + ['metrics'], + [ + { + name: 'percent_metrics', + config: { + type: 'MetricsControl', + multi: true, + mapStateToProps: (state: never) => { + const { datasource } = state; + const { columns, metrics, type } = datasource; + return { + columns: datasource ? columns : [], + savedMetrics: datasource ? metrics : [], + datasourceType: 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'], + [ + { + 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, + }, + }, + { + name: 'order_desc', + config: { + type: 'CheckboxControl', + label: t('Sort Descending'), + default: true, + description: t('Whether to sort descending or ascending'), + }, + }, + ], + ], + }, + { + label: t('NOT GROUPED BY'), + description: t('Use this section if you want to query atomic rows'), + expanded: true, + controlSetRows: [ + [ + { + name: 'all_columns', + config: { + type: 'SelectControl', + multi: true, + label: t('Columns'), + default: [], + description: t('Columns to display'), + optionRenderer: (c: never) => , + valueRenderer: (c: never) => , + valueKey: 'column_name', + allowAll: true, + mapStateToProps: (state: { datasource: { columns: unknown } }) => ({ + options: state.datasource ? state.datasource.columns : [], + }), + commaChoosesOption: false, + freeForm: true, + }, + }, + ], + [ + { + name: 'order_by_cols', + config: { + type: 'SelectControl', + multi: true, + label: t('Ordering'), + default: [], + description: t('One or many metrics to display'), + // eslint-disable-next-line camelcase + mapStateToProps: (state: { datasource: { order_by_choices: never } }) => ({ + choices: state.datasource ? state.datasource.order_by_choices : [], + }), + }, + }, + ], + ['row_limit', null], + ], + }, + { + label: t('Query'), + expanded: true, + controlSetRows: [['adhoc_filters']], + }, + { + label: t('Options'), + expanded: true, + controlSetRows: [ + [ + { + name: 'table_timestamp_format', + config: { + type: 'SelectControl', + freeForm: true, + label: t('Table Timestamp Format'), + default: '%Y-%m-%d %H:%M:%S', + renderTrigger: true, + validators: [validateNonEmpty], + 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'), + }, + }, + { + 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: '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'), + }, + }, + ], + [ + { + name: 'show_cell_bars', + config: { + type: 'CheckboxControl', + label: t('Show Cell Bars'), + renderTrigger: true, + default: true, + description: t('Enable to display bar chart background elements in table columns'), + }, + }, + null, + ], + ], + }, + ], + controlOverrides: { + metrics: { + validators: [], + }, + }, + sectionOverrides: { + druidTimeSeries: { + controlSetRows: [['granularity', 'druid_time_origin'], ['time_range']], + }, + sqlaTimeSeries: { + controlSetRows: [['granularity_sqla', 'time_grain_sqla'], ['time_range']], + }, + }, +}; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-table/src/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-table/src/index.ts index e938423f62a8..f8ce38260875 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-table/src/index.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-table/src/index.ts @@ -20,6 +20,7 @@ import { t } from '@superset-ui/translation'; import { ChartMetadata, ChartPlugin } from '@superset-ui/chart'; import transformProps from './transformProps'; import thumbnail from './images/thumbnail.png'; +import controlPanel from './controlPanel'; const metadata = new ChartMetadata({ canBeAnnotationTypes: ['EVENT', 'INTERVAL'], @@ -35,6 +36,7 @@ export default class TableChartPlugin extends ChartPlugin { loadChart: () => import('./ReactDataTable'), metadata, transformProps, + controlPanel, }); } }