Cal heatmap controls migration (#9355)

* controls migrated * linting
apache · Mar 24, 2020 · 20dd418 · 20dd418
1 parent 866f6f9
commit 20dd418
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 95 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1055,7 +1055,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_axis_time_format` | _N/A_     | _Deprecated?_                |
 | `x_log_scale`        | _N/A_     | _Deprecated?_                |
 | `x_ticks_layout`     | _string_  | The **X Tick Layout** widget |
 
@@ -1095,9 +1094,6 @@ Note the `y_axis_format` is defined under various section for some charts.
 | `bar_stacked`                   | _N/A_ |       |
 | `cache_timeout`                 | _N/A_ |       |
 | `canvas_image_rendering`        | _N/A_ |       |
-| `cell_padding`                  | _N/A_ |       |
-| `cell_radius`                   | _N/A_ |       |
-| `cell_size`                     | _N/A_ |       |
 | `charge`                        | _N/A_ |       |
 | `clustering_radius`             | _N/A_ |       |
 | `code`                          | _N/A_ |       |
@@ -1112,7 +1108,6 @@ Note the `y_axis_format` is defined under various section for some charts.
 | `deck_slices`                   | _N/A_ |       |
 | `default_filters`               | _N/A_ |       |
 | `dimension`                     | _N/A_ |       |
-| `domain_granularity`            | _N/A_ |       |
 | `end_spatial`                   | _N/A_ |       |
 | `entity`                        | _N/A_ |       |
 | `equal_date_size`               | _N/A_ |       |
@@ -1211,7 +1206,6 @@ Note the `y_axis_format` is defined under various section for some charts.
 | `show_druid_time_granularity`   | _N/A_ |       |
 | `show_druid_time_origin`        | _N/A_ |       |
 | `show_labels`                   | _N/A_ |       |
-| `show_metric_name`              | _N/A_ |       |
 | `show_perc`                     | _N/A_ |       |
 | `show_sqla_time_column`         | _N/A_ |       |
 | `show_sqla_time_granularity`    | _N/A_ |       |
@@ -1224,11 +1218,9 @@ Note the `y_axis_format` is defined under various section for some charts.
 | `spatial`                       | _N/A_ |       |
 | `stacked_style`                 | _N/A_ |       |
 | `start_spatial`                 | _N/A_ |       |
-| `steps`                         | _N/A_ |       |
 | `stroke_color_picker`           | _N/A_ |       |
 | `stroke_width`                  | _N/A_ |       |
 | `stroked`                       | _N/A_ |       |
-| `subdomain_granularity`         | _N/A_ |       |
 | `subheader`                     | _N/A_ |       |
 | `table_filter`                  | _N/A_ |       |
 | `table_timestamp_format`        | _N/A_ |       |

diff --git a/superset-frontend/src/explore/controlPanels/CalHeatmap.js b/superset-frontend/src/explore/controlPanels/CalHeatmap.js
@@ -17,6 +17,13 @@
  * under the License.
  */
 import { t } from '@superset-ui/translation';
+import {
+  // formatSelectOptionsForRange,
+  formatSelectOptions,
+  // mainMetric,
+} from '../../modules/utils';
+import * as v from '.././validators';
+import { D3_TIME_FORMAT_OPTIONS, D3_FORMAT_DOCS } from '../controls';
 
 export default {
   requiresTime: true,
@@ -25,7 +32,43 @@ export default {
       label: t('Query'),
       expanded: true,
       controlSetRows: [
-        ['domain_granularity', 'subdomain_granularity'],
+        [
+          {
+            name: 'domain_granularity',
+            config: {
+              type: 'SelectControl',
+              label: t('Domain'),
+              default: 'month',
+              choices: formatSelectOptions([
+                'hour',
+                'day',
+                'week',
+                'month',
+                'year',
+              ]),
+              description: t('The time unit used for the grouping of blocks'),
+            },
+          },
+          {
+            name: 'subdomain_granularity',
+            config: {
+              type: 'SelectControl',
+              label: t('Subdomain'),
+              default: 'day',
+              choices: formatSelectOptions([
+                'min',
+                'hour',
+                'day',
+                'week',
+                'month',
+              ]),
+              description: t(
+                'The time unit for each block. Should be a smaller unit than ' +
+                  'domain_granularity. Should be larger or equal to Time Grain',
+              ),
+            },
+          },
+        ],
         ['metrics'],
         ['adhoc_filters'],
       ],
@@ -35,21 +78,94 @@ export default {
       expanded: true,
       controlSetRows: [
         ['linear_color_scheme'],
-        ['cell_size', 'cell_padding'],
-        ['cell_radius', 'steps'],
-        ['y_axis_format', 'x_axis_time_format'],
+        [
+          {
+            name: 'cell_size',
+            config: {
+              type: 'TextControl',
+              isInt: true,
+              default: 10,
+              validators: [v.integer],
+              renderTrigger: true,
+              label: t('Cell Size'),
+              description: t('The size of the square cell, in pixels'),
+            },
+          },
+          {
+            name: 'cell_padding',
+            config: {
+              type: 'TextControl',
+              isInt: true,
+              validators: [v.integer],
+              renderTrigger: true,
+              default: 2,
+              label: t('Cell Padding'),
+              description: t('The distance between cells, in pixels'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'cell_radius',
+            config: {
+              type: 'TextControl',
+              isInt: true,
+              validators: [v.integer],
+              renderTrigger: true,
+              default: 0,
+              label: t('Cell Radius'),
+              description: t('The pixel radius'),
+            },
+          },
+          {
+            name: 'steps',
+            config: {
+              type: 'TextControl',
+              isInt: true,
+              validators: [v.integer],
+              renderTrigger: true,
+              default: 10,
+              label: t('Color Steps'),
+              description: t('The number color "steps"'),
+            },
+          },
+        ],
+        [
+          'y_axis_format',
+          {
+            name: 'x_axis_time_format',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: t('Time Format'),
+              renderTrigger: true,
+              default: 'smart_date',
+              choices: D3_TIME_FORMAT_OPTIONS,
+              description: D3_FORMAT_DOCS,
+            },
+          },
+        ],
         ['show_legend', 'show_values'],
-        ['show_metric_name', null],
+        [
+          {
+            name: 'show_metric_name',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Show Metric Names'),
+              renderTrigger: true,
+              default: true,
+              description: t('Whether to display the metric name as a title'),
+            },
+          },
+          null,
+        ],
       ],
     },
   ],
   controlOverrides: {
     y_axis_format: {
       label: t('Number Format'),
     },
-    x_axis_time_format: {
-      label: t('Time Format'),
-    },
     show_values: {
       default: false,
     },

diff --git a/superset-frontend/src/explore/controls.jsx b/superset-frontend/src/explore/controls.jsx
@@ -79,8 +79,6 @@ const sequentialSchemeRegistry = getSequentialSchemeRegistry();
 
 const PRIMARY_COLOR = { r: 0, g: 122, b: 135, a: 1 };
 
-const D3_FORMAT_DOCS = 'D3 format syntax: https://github.com/d3/d3-format';
-
 // input choices & options
 const D3_FORMAT_OPTIONS = [
   ['SMART_NUMBER', 'Adaptative formating'],
@@ -100,6 +98,9 @@ const ROW_LIMIT_OPTIONS = [10, 50, 100, 250, 500, 1000, 5000, 10000, 50000];
 
 const SERIES_LIMITS = [0, 5, 10, 25, 50, 100, 500];
 
+export const D3_FORMAT_DOCS =
+  'D3 format syntax: https://github.com/d3/d3-format';
+
 export const D3_TIME_FORMAT_OPTIONS = [
   ['smart_date', 'Adaptative formating'],
   ['%d/%m/%Y', '%d/%m/%Y | 14/01/2019'],
@@ -894,25 +895,6 @@ export const controls = {
     ),
   },
 
-  domain_granularity: {
-    type: 'SelectControl',
-    label: t('Domain'),
-    default: 'month',
-    choices: formatSelectOptions(['hour', 'day', 'week', 'month', 'year']),
-    description: t('The time unit used for the grouping of blocks'),
-  },
-
-  subdomain_granularity: {
-    type: 'SelectControl',
-    label: t('Subdomain'),
-    default: 'day',
-    choices: formatSelectOptions(['min', 'hour', 'day', 'week', 'month']),
-    description: t(
-      'The time unit for each block. Should be a smaller unit than ' +
-        'domain_granularity. Should be larger or equal to Time Grain',
-    ),
-  },
-
   link_length: {
     type: 'SelectControl',
     renderTrigger: true,
@@ -1155,46 +1137,6 @@ export const controls = {
     ),
   },
 
-  cell_size: {
-    type: 'TextControl',
-    isInt: true,
-    default: 10,
-    validators: [v.integer],
-    renderTrigger: true,
-    label: t('Cell Size'),
-    description: t('The size of the square cell, in pixels'),
-  },
-
-  cell_padding: {
-    type: 'TextControl',
-    isInt: true,
-    validators: [v.integer],
-    renderTrigger: true,
-    default: 2,
-    label: t('Cell Padding'),
-    description: t('The distance between cells, in pixels'),
-  },
-
-  cell_radius: {
-    type: 'TextControl',
-    isInt: true,
-    validators: [v.integer],
-    renderTrigger: true,
-    default: 0,
-    label: t('Cell Radius'),
-    description: t('The pixel radius'),
-  },
-
-  steps: {
-    type: 'TextControl',
-    isInt: true,
-    validators: [v.integer],
-    renderTrigger: true,
-    default: 10,
-    label: t('Color Steps'),
-    description: t('The number color "steps"'),
-  },
-
   grid_size: {
     type: 'TextControl',
     label: t('Grid Size'),
@@ -1348,16 +1290,6 @@ export const controls = {
     description: D3_FORMAT_DOCS,
   },
 
-  x_axis_time_format: {
-    type: 'SelectControl',
-    freeForm: true,
-    label: t('X Axis Format'),
-    renderTrigger: true,
-    default: 'smart_date',
-    choices: D3_TIME_FORMAT_OPTIONS,
-    description: D3_FORMAT_DOCS,
-  },
-
   y_axis_format: {
     type: 'SelectControl',
     freeForm: true,
@@ -1724,14 +1656,6 @@ export const controls = {
     description: t('Whether to display the numerical values within the cells'),
   },
 
-  show_metric_name: {
-    type: 'CheckboxControl',
-    label: t('Show Metric Names'),
-    renderTrigger: true,
-    default: true,
-    description: t('Whether to display the metric name as a title'),
-  },
-
   show_trend_line: {
     type: 'CheckboxControl',
     label: t('Show Trend Line'),