From a0dc924c81c8d3483a18897ebc57f1f4ba58e9d2 Mon Sep 17 00:00:00 2001 From: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com> Date: Tue, 19 May 2020 11:16:18 -0700 Subject: [PATCH] feat(legacy-plugin-chart-heatmap): control panel (#503) --- .../legacy-plugin-chart-heatmap/package.json | 4 +- .../src/controlPanel.js | 262 ++++++++++++++++++ .../legacy-plugin-chart-heatmap/src/index.js | 2 + 3 files changed, 267 insertions(+), 1 deletion(-) create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-heatmap/src/controlPanel.js diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-heatmap/package.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-heatmap/package.json index 6e01e36763ca..50bf29ad2ae7 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-heatmap/package.json +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-heatmap/package.json @@ -36,7 +36,9 @@ "peerDependencies": { "@superset-ui/chart": "^0.13.0", "@superset-ui/color": "^0.13.0", + "@superset-ui/control-utils": "^0.13.12", "@superset-ui/number-format": "^0.13.0", - "@superset-ui/translation": "^0.13.0" + "@superset-ui/translation": "^0.13.0", + "@superset-ui/validator": "^0.13.3" } } diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-heatmap/src/controlPanel.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-heatmap/src/controlPanel.js new file mode 100644 index 000000000000..bf9e559b84b8 --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-heatmap/src/controlPanel.js @@ -0,0 +1,262 @@ +/** + * 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 { t } from '@superset-ui/translation'; +import { validateNonEmpty } from '@superset-ui/validator'; +import { + internalSharedControls, + formatSelectOptionsForRange, + formatSelectOptions, +} from '@superset-ui/control-utils'; + +const { columnChoices } = internalSharedControls; + +const sortAxisChoices = [ + ['alpha_asc', t('Axis ascending')], + ['alpha_desc', t('Axis descending')], + ['value_asc', t('Metric ascending')], + ['value_desc', t('Metric descending')], +]; + +export default { + controlPanelSections: [ + { + label: t('Query'), + expanded: true, + controlSetRows: [ + [ + { + 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'], + ], + }, + { + label: t('Heatmap Options'), + expanded: true, + controlSetRows: [ + ['linear_color_scheme'], + [ + { + name: 'xscale_interval', + config: { + type: 'SelectControl', + label: t('XScale Interval'), + renderTrigger: true, + choices: formatSelectOptionsForRange(1, 50), + default: '1', + clearable: false, + description: t('Number of steps to take between ticks when displaying the X scale'), + }, + }, + { + name: 'yscale_interval', + config: { + type: 'SelectControl', + label: t('YScale Interval'), + choices: formatSelectOptionsForRange(1, 50), + default: '1', + clearable: false, + renderTrigger: true, + description: t('Number of steps to take between ticks when displaying the Y scale'), + }, + }, + ], + [ + { + name: 'canvas_image_rendering', + config: { + type: 'SelectControl', + label: t('Rendering'), + renderTrigger: true, + choices: [ + ['pixelated', 'pixelated (Sharp)'], + ['auto', 'auto (Smooth)'], + ], + default: 'pixelated', + description: t( + 'image-rendering CSS attribute of the canvas object that ' + + 'defines how the browser scales up the image', + ), + }, + }, + { + 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', + ), + }, + }, + ], + [ + { + 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: { + type: 'CheckboxControl', + label: t('Show percentage'), + renderTrigger: true, + description: t('Whether to include the percentage in the tooltip'), + default: true, + }, + }, + ], + [ + { + 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', + config: { + type: 'SelectControl', + label: t('Sort X Axis'), + choices: sortAxisChoices, + clearable: false, + default: 'alpha_asc', + }, + }, + { + name: 'sort_y_axis', + config: { + type: 'SelectControl', + label: t('Sort Y Axis'), + choices: sortAxisChoices, + clearable: false, + default: 'alpha_asc', + }, + }, + ], + ], + }, + ], + controlOverrides: { + normalized: t('Whether to apply a normal distribution based on rank on the color scale'), + y_axis_format: { + label: t('Value Format'), + }, + }, +}; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-heatmap/src/index.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-heatmap/src/index.js index e49d9eae67d4..cdf5bf77c11d 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-heatmap/src/index.js +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-heatmap/src/index.js @@ -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({ credits: ['http://bl.ocks.org/mbostock/3074470'], @@ -35,6 +36,7 @@ export default class HeatmapChartPlugin extends ChartPlugin { loadChart: () => import('./ReactHeatmap.js'), metadata, transformProps, + controlPanel, }); } }