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.
apache · Apr 3, 2020 · cd57233 · cd57233
1 parent 9e79cf3
commit cd57233
Show file tree

Hide file tree

Showing 6 changed files with 190 additions and 154 deletions.
diff --git 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,21 +1127,14 @@ 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_ |       |
 | `linear_color_scheme`           | _N/A_ |       |
 | `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
@@ -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
@@ -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
@@ -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
@@ -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'],
       ],
     },