From cd572334c90755c0cf88dc365f1b41cd541e19e4 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 3 Apr 2020 12:50:07 -0700 Subject: [PATCH] Migrating unique NVD3 viz controls (#9445) * donut control * labels outside * linting * x_log_scale, pie_label_type * linting * line_charts, line_charts_2 * marker_labels * marker_line_labels, marker_lines, markers * prefix_metric_with_slice_name, range_labels, ranges * stacked_style * Revert "stacked_style" This reverts commit aae2d418b8f1950fbe32248b62e50a12fbf186bd. * stacked_style take 2... * Revert "stacked_style take 2..." This reverts commit 38b7155f50143684c92a67b2a9fa16f65c269d35. --- CONTRIBUTING.md | 14 -- .../src/explore/controlPanels/Bubble.js | 14 +- .../src/explore/controlPanels/Bullet.js | 63 ++++++++- .../src/explore/controlPanels/LineMulti.js | 78 ++++++++++- .../src/explore/controlPanels/Pie.js | 49 ++++++- superset-frontend/src/explore/controls.jsx | 126 ------------------ 6 files changed, 190 insertions(+), 154 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 82c23fd591fdd..dfaf22cf02ed9 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1041,15 +1041,12 @@ The filter-box configuration references column names (via the `column` key) and | Field | Type | Notes | | --------------------- | --------- | ------------------------------------------------ | | `color_picker` | _object_ | The **Fixed Color** widget | -| `donut` | _boolean_ | The **Donut** widget | | `global_opacity` | _number_ | The **Opacity** widget | | `label_colors` | _object_ | The **Color Scheme** widget | -| `labels_outside` | _boolean_ | The **Put labels outside** widget | | `line_interpolation` | _string_ | The **Line Style** widget | | `link_length` | _number_ | The **No of Bins** widget | | `normalized` | _boolean_ | The **Normalized** widget | | `number_format` | _string_ | The **Number format** widget | -| `pie_label_type` | _string_ | [HIDDEN] | | `rich_tooltip` | _boolean_ | The **Rich Tooltip** widget | | `send_time_range` | _boolean_ | The **Show Markers** widget | | `show_brush` | _string_ | The **Show Range Filter** widget | @@ -1064,7 +1061,6 @@ The filter-box configuration references column names (via the `column` key) and | `x_axis_format` | _string_ | The **X Axis Format** widget | | `x_axis_label` | _string_ | The **X Axis Label** widget | | `x_axis_showminmax` | _boolean_ | The **X bounds** widget | -| `x_log_scale` | _N/A_ | _Deprecated?_ | | `x_ticks_layout` | _string_ | The **X Tick Layout** widget | ### Y Axis @@ -1131,10 +1127,7 @@ Note the `y_axis_format` is defined under various section for some charts. | `instant_filtering` | _N/A_ | | | `js_columns` | _N/A_ | | | `label` | _N/A_ | | -| `labels_outside` | _N/A_ | | | `legend_position` | _N/A_ | | -| `line_charts` | _N/A_ | | -| `line_charts_2` | _N/A_ | | | `line_column` | _N/A_ | | | `line_type` | _N/A_ | | | `line_width` | _N/A_ | | @@ -1142,10 +1135,6 @@ Note the `y_axis_format` is defined under various section for some charts. | `log_scale` | _N/A_ | | | `mapbox_label` | _N/A_ | | | `mapbox_style` | _N/A_ | | -| `marker_labels` | _N/A_ | | -| `marker_line_labels` | _N/A_ | | -| `marker_lines` | _N/A_ | | -| `markers` | _N/A_ | | | `markup_type` | _N/A_ | | | `min_periods` | _N/A_ | | | `multiplier` | _N/A_ | | @@ -1159,9 +1148,6 @@ Note the `y_axis_format` is defined under various section for some charts. | `period_ratio_type` | _N/A_ | | | `perm` | _N/A_ | | | `point_radius_fixed` | _N/A_ | | -| `prefix_metric_with_slice_name` | _N/A_ | | -| `range_labels` | _N/A_ | | -| `ranges` | _N/A_ | | | `rdo_save` | _N/A_ | | | `reduce_x_ticks` | _N/A_ | | | `refresh_frequency` | _N/A_ | | diff --git a/superset-frontend/src/explore/controlPanels/Bubble.js b/superset-frontend/src/explore/controlPanels/Bubble.js index 891fe29cf1522..34060619c3331 100644 --- a/superset-frontend/src/explore/controlPanels/Bubble.js +++ b/superset-frontend/src/explore/controlPanels/Bubble.js @@ -48,7 +48,19 @@ export default { controlSetRows: [ ['x_axis_label', 'left_margin'], ['x_axis_format', 'x_ticks_layout'], - ['x_log_scale', 'x_axis_showminmax'], + [ + { + name: 'x_log_scale', + config: { + type: 'CheckboxControl', + label: t('X Log Scale'), + default: false, + renderTrigger: true, + description: t('Use a log scale for the X-axis'), + }, + }, + 'x_axis_showminmax', + ], ], }, { diff --git a/superset-frontend/src/explore/controlPanels/Bullet.js b/superset-frontend/src/explore/controlPanels/Bullet.js index b0e4252e130b7..33281d13b669b 100644 --- a/superset-frontend/src/explore/controlPanels/Bullet.js +++ b/superset-frontend/src/explore/controlPanels/Bullet.js @@ -30,9 +30,66 @@ export default { label: t('Chart Options'), expanded: true, controlSetRows: [ - ['ranges', 'range_labels'], - ['markers', 'marker_labels'], - ['marker_lines', 'marker_line_labels'], + [ + { + name: 'ranges', + config: { + type: 'TextControl', + label: t('Ranges'), + default: '', + description: t('Ranges to highlight with shading'), + }, + }, + { + name: 'range_labels', + config: { + type: 'TextControl', + label: t('Range labels'), + default: '', + description: t('Labels for the ranges'), + }, + }, + ], + [ + { + name: 'markers', + config: { + type: 'TextControl', + label: t('Markers'), + default: '', + description: t('List of values to mark with triangles'), + }, + }, + { + name: 'marker_labels', + config: { + type: 'TextControl', + label: t('Marker labels'), + default: '', + description: t('Labels for the markers'), + }, + }, + ], + [ + { + name: 'marker_lines', + config: { + type: 'TextControl', + label: t('Marker lines'), + default: '', + description: t('List of values to mark with lines'), + }, + }, + { + name: 'marker_line_labels', + config: { + type: 'TextControl', + label: t('Marker line labels'), + default: '', + description: t('Labels for the marker lines'), + }, + }, + ], ], }, ], diff --git a/superset-frontend/src/explore/controlPanels/LineMulti.js b/superset-frontend/src/explore/controlPanels/LineMulti.js index 68ca2609cb4d8..f00c5f76a5700 100644 --- a/superset-frontend/src/explore/controlPanels/LineMulti.js +++ b/superset-frontend/src/explore/controlPanels/LineMulti.js @@ -19,6 +19,7 @@ import { t } from '@superset-ui/translation'; import { annotations } from './sections'; import { D3_TIME_FORMAT_OPTIONS } from '../controls'; +import * as v from '../validators'; export default { requiresTime: true, @@ -28,7 +29,18 @@ export default { expanded: true, controlSetRows: [ ['color_scheme', 'label_colors'], - ['prefix_metric_with_slice_name', null], + [ + { + name: 'prefix_metric_with_slice_name', + config: { + type: 'CheckboxControl', + label: t('Prefix metric name with slice name'), + default: false, + renderTrigger: true, + }, + }, + null, + ], ['show_legend', 'show_markers'], ['line_interpolation', null], ], @@ -45,12 +57,68 @@ export default { { label: t('Y Axis 1'), expanded: true, - controlSetRows: [['line_charts', 'y_axis_format']], + controlSetRows: [ + [ + { + name: 'line_charts', + config: { + type: 'SelectAsyncControl', + multi: true, + label: t('Left Axis chart(s)'), + validators: [v.nonEmpty], + default: [], + description: t('Choose one or more charts for left axis'), + dataEndpoint: + '/sliceasync/api/read?_flt_0_viz_type=line&_flt_7_viz_type=line_multi', + placeholder: t('Select charts'), + onAsyncErrorMessage: t('Error while fetching charts'), + mutator: data => { + if (!data || !data.result) { + return []; + } + return data.result.map(o => ({ + value: o.id, + label: o.slice_name, + })); + }, + }, + }, + 'y_axis_format', + ], + ], }, { label: t('Y Axis 2'), expanded: false, - controlSetRows: [['line_charts_2', 'y_axis_2_format']], + controlSetRows: [ + [ + { + name: 'line_charts_2', + config: { + type: 'SelectAsyncControl', + multi: true, + label: t('Right Axis chart(s)'), + validators: [], + default: [], + description: t('Choose one or more charts for right axis'), + dataEndpoint: + '/sliceasync/api/read?_flt_0_viz_type=line&_flt_7_viz_type=line_multi', + placeholder: t('Select charts'), + onAsyncErrorMessage: t('Error while fetching charts'), + mutator: data => { + if (!data || !data.result) { + return []; + } + return data.result.map(o => ({ + value: o.id, + label: o.slice_name, + })); + }, + }, + }, + 'y_axis_2_format', + ], + ], }, { label: t('Query'), @@ -60,10 +128,6 @@ export default { annotations, ], controlOverrides: { - line_charts: { - label: t('Left Axis chart(s)'), - description: t('Choose one or more charts for left axis'), - }, y_axis_format: { label: t('Left Axis Format'), }, diff --git a/superset-frontend/src/explore/controlPanels/Pie.js b/superset-frontend/src/explore/controlPanels/Pie.js index d9673bb38d870..7ce475f2e661f 100644 --- a/superset-frontend/src/explore/controlPanels/Pie.js +++ b/superset-frontend/src/explore/controlPanels/Pie.js @@ -34,9 +34,52 @@ export default { label: t('Chart Options'), expanded: true, controlSetRows: [ - ['pie_label_type', 'number_format'], - ['donut', 'show_legend'], - ['show_labels', 'labels_outside'], + [ + { + name: 'pie_label_type', + config: { + type: 'SelectControl', + label: t('Label Type'), + default: 'key', + renderTrigger: true, + choices: [ + ['key', 'Category Name'], + ['value', 'Value'], + ['percent', 'Percentage'], + ['key_value', 'Category and Value'], + ['key_percent', 'Category and Percentage'], + ], + description: t('What should be shown on the label?'), + }, + }, + 'number_format', + ], + [ + { + name: 'donut', + config: { + type: 'CheckboxControl', + label: t('Donut'), + default: false, + renderTrigger: true, + description: t('Do you want a donut or a pie?'), + }, + }, + 'show_legend', + ], + [ + 'show_labels', + { + name: 'labels_outside', + config: { + type: 'CheckboxControl', + label: t('Put labels outside'), + default: true, + renderTrigger: true, + description: t('Put the labels outside the pie?'), + }, + }, + ], ['color_scheme', 'label_colors'], ], }, diff --git a/superset-frontend/src/explore/controls.jsx b/superset-frontend/src/explore/controls.jsx index 3c2648247342c..9e497138d3b4e 100644 --- a/superset-frontend/src/explore/controls.jsx +++ b/superset-frontend/src/explore/controls.jsx @@ -1088,21 +1088,6 @@ export const controls = { description: t('Line interpolation as defined by d3.js'), }, - pie_label_type: { - type: 'SelectControl', - label: t('Label Type'), - default: 'key', - renderTrigger: true, - choices: [ - ['key', 'Category Name'], - ['value', 'Value'], - ['percent', 'Percentage'], - ['key_value', 'Category and Value'], - ['key_percent', 'Category and Percentage'], - ], - description: t('What should be shown on the label?'), - }, - code: { type: 'TextAreaControl', label: t('Code'), @@ -1272,14 +1257,6 @@ export const controls = { description: t('Use a log scale for the Y-axis'), }, - x_log_scale: { - type: 'CheckboxControl', - label: t('X Log Scale'), - default: false, - renderTrigger: true, - description: t('Use a log scale for the X-axis'), - }, - log_scale: { type: 'CheckboxControl', label: t('Log Scale'), @@ -1288,22 +1265,6 @@ export const controls = { description: t('Use a log scale'), }, - donut: { - type: 'CheckboxControl', - label: t('Donut'), - default: false, - renderTrigger: true, - description: t('Do you want a donut or a pie?'), - }, - - labels_outside: { - type: 'CheckboxControl', - label: t('Put labels outside'), - default: true, - renderTrigger: true, - description: t('Put the labels outside the pie?'), - }, - contribution: { type: 'CheckboxControl', label: t('Contribution'), @@ -1411,48 +1372,6 @@ export const controls = { description: t('Pick a color'), }, - ranges: { - type: 'TextControl', - label: t('Ranges'), - default: '', - description: t('Ranges to highlight with shading'), - }, - - range_labels: { - type: 'TextControl', - label: t('Range labels'), - default: '', - description: t('Labels for the ranges'), - }, - - markers: { - type: 'TextControl', - label: t('Markers'), - default: '', - description: t('List of values to mark with triangles'), - }, - - marker_labels: { - type: 'TextControl', - label: t('Marker labels'), - default: '', - description: t('Labels for the markers'), - }, - - marker_lines: { - type: 'TextControl', - label: t('Marker lines'), - default: '', - description: t('List of values to mark with lines'), - }, - - marker_line_labels: { - type: 'TextControl', - label: t('Marker line labels'), - default: '', - description: t('Labels for the marker lines'), - }, - annotation_layers: { type: 'AnnotationLayerControl', label: '', @@ -1565,51 +1484,6 @@ export const controls = { description: t('The width of the lines'), }, - line_charts: { - type: 'SelectAsyncControl', - multi: true, - label: t('Line charts'), - validators: [v.nonEmpty], - default: [], - description: t('Pick a set of line charts to layer on top of one another'), - dataEndpoint: - '/sliceasync/api/read?_flt_0_viz_type=line&_flt_7_viz_type=line_multi', - placeholder: t('Select charts'), - onAsyncErrorMessage: t('Error while fetching charts'), - mutator: data => { - if (!data || !data.result) { - return []; - } - return data.result.map(o => ({ value: o.id, label: o.slice_name })); - }, - }, - - line_charts_2: { - type: 'SelectAsyncControl', - multi: true, - label: t('Right Axis chart(s)'), - validators: [], - default: [], - description: t('Choose one or more charts for right axis'), - dataEndpoint: - '/sliceasync/api/read?_flt_0_viz_type=line&_flt_7_viz_type=line_multi', - placeholder: t('Select charts'), - onAsyncErrorMessage: t('Error while fetching charts'), - mutator: data => { - if (!data || !data.result) { - return []; - } - return data.result.map(o => ({ value: o.id, label: o.slice_name })); - }, - }, - - prefix_metric_with_slice_name: { - type: 'CheckboxControl', - label: t('Prefix metric name with slice name'), - default: false, - renderTrigger: true, - }, - reverse_long_lat: { type: 'CheckboxControl', label: t('Reverse Lat & Long'),