Migrating unique bigNumber(total) controls (#9440)

* migrating options controls * lint ✨ * baby steps... * shared BigNumber controls file * capitalization matters
2020-04-02 10:52:32 -07:00 · 2020-04-02 10:52:32 -07:00 · 9e79cf37f8
parent c53bc4ddf9
commit 9e79cf37f8
6 changed files with 212 additions and 176 deletions
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -1036,15 +1036,6 @@ The `metric` (or equivalent) and `timeseries_limit_metric` fields are all compos

 The filter-box configuration references column names (via the `column` key) and optionally metric names (via the `metric` key) if sorting is defined.

-### Options
-
-| Field                  | Type      | Notes                                |
-| ---------------------- | --------- | ------------------------------------ |
-| `compare_lag`          | _number_  | The **Comparison Period Lag** widget |
-| `compare_suffix`       | _string_  | The **Comparison suffix** widget     |
-| `show_trend_line`      | _boolean_ | The **Show Trend Line** widget       |
-| `start_y_axis_at_zero` | _boolean_ | The **Start y-axis at 0** widget     |
-
 ### Chart Options

 | Field                 | Type      | Notes                                            |
@ -1052,7 +1043,6 @@ The filter-box configuration references column names (via the `column` key) and
 | `color_picker`        | _object_  | The **Fixed Color** widget                       |
 | `donut`               | _boolean_ | The **Donut** widget                             |
 | `global_opacity`      | _number_  | The **Opacity** widget                           |
-| `header_font_size`    | _number_  | The **Big Number Font Size** widget (or similar) |
 | `label_colors`        | _object_  | The **Color Scheme** widget                      |
 | `labels_outside`      | _boolean_ | The **Put labels outside** widget                |
 | `line_interpolation`  | _string_  | The **Line Style** widget                        |
@ -1065,7 +1055,6 @@ The filter-box configuration references column names (via the `column` key) and
 | `show_brush`          | _string_  | The **Show Range Filter** widget                 |
 | `show_legend`         | _boolean_ | The **Legend** widget                            |
 | `show_markers`        | _string_  | The **Show Markers** widget                      |
-| `subheader_font_size` | _number_  | The **Subheader Font Size** widget               |

 ### X Axis

@ -1179,8 +1168,6 @@ Note the `y_axis_format` is defined under various section for some charts.
 | `remote_id`                     | _N/A_ |       |
 | `resample_fillmethod`           | _N/A_ |       |
 | `resample_how`                  | _N/A_ |       |
-| `resample_method`               | _N/A_ |       |
-| `resample_rule`                 | _N/A_ |       |
 | `reverse_long_lat`              | _N/A_ |       |
 | `rolling_periods`               | _N/A_ |       |
 | `rolling_type`                  | _N/A_ |       |
@ -1206,9 +1193,7 @@ Note the `y_axis_format` is defined under various section for some charts.
 | `stroke_color_picker`           | _N/A_ |       |
 | `stroke_width`                  | _N/A_ |       |
 | `stroked`                       | _N/A_ |       |
-| `subheader`                     | _N/A_ |       |
 | `table_filter`                  | _N/A_ |       |
-| `time_compare`                  | _N/A_ |       |
 | `timed_refresh_immune_slices`   | _N/A_ |       |
 | `url`                           | _N/A_ |       |
 | `userid`                        | _N/A_ |       |
--- a/superset-frontend/src/explore/controlPanels/BigNumber.jsx
+++ b/superset-frontend/src/explore/controlPanels/BigNumber.jsx
@ -18,6 +18,7 @@
 */
 import { t } from '@superset-ui/translation';
 import React from 'react';
+import { headerFontSize, subheaderFontSize } from './Shared_BigNumber';

 export default {
  controlPanelSections: [
@ -30,9 +31,52 @@ export default {
      label: t('Options'),
      expanded: true,
      controlSetRows: [
-        ['compare_lag', 'compare_suffix'],
+        [
+          {
+            name: 'compare_lag',
+            config: {
+              type: 'TextControl',
+              label: t('Comparison Period Lag'),
+              isInt: true,
+              description: t(
+                'Based on granularity, number of time periods to compare against',
+              ),
+            },
+          },
+          {
+            name: 'compare_suffix',
+            config: {
+              type: 'TextControl',
+              label: t('Comparison suffix'),
+              description: t('Suffix to apply after the percentage display'),
+            },
+          },
+        ],
        ['y_axis_format'],
-        ['show_trend_line', 'start_y_axis_at_zero'],
+        [
+          {
+            name: 'show_trend_line',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Show Trend Line'),
+              renderTrigger: true,
+              default: true,
+              description: t('Whether to display the trend line'),
+            },
+          },
+          {
+            name: 'start_y_axis_at_zero',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Start y-axis at 0'),
+              renderTrigger: true,
+              default: true,
+              description: t(
+                'Start y-axis at zero. Uncheck to start y-axis at minimum value in the data.',
+              ),
+            },
+          },
+        ],
        ['time_range_fixed'],
      ],
    },
@ -41,8 +85,8 @@ export default {
      expanded: true,
      controlSetRows: [
        ['color_picker', null],
-        ['header_font_size'],
-        ['subheader_font_size'],
+        [headerFontSize],
+        [subheaderFontSize],
      ],
    },
    {
@ -58,9 +102,6 @@ export default {
    y_axis_format: {
      label: t('Number format'),
    },
-    header_font_size: {
-      label: t('Big Number Font Size'),
-    },
  },
  sectionOverrides: {
    druidTimeSeries: {
--- a/superset-frontend/src/explore/controlPanels/BigNumberTotal.js
+++ b/superset-frontend/src/explore/controlPanels/BigNumberTotal.js
@ -17,6 +17,7 @@
 * under the License.
 */
 import { t } from '@superset-ui/translation';
+import { headerFontSize, subheaderFontSize } from './Shared_BigNumber';

 export default {
  controlPanelSections: [
@ -28,20 +29,31 @@ export default {
    {
      label: t('Options'),
      expanded: true,
-      controlSetRows: [['subheader'], ['y_axis_format']],
+      controlSetRows: [
+        [
+          {
+            name: 'subheader',
+            config: {
+              type: 'TextControl',
+              label: t('Subheader'),
+              description: t(
+                'Description text that shows up below your Big Number',
+              ),
+            },
+          },
+        ],
+        ['y_axis_format'],
+      ],
    },
    {
      label: t('Chart Options'),
      expanded: true,
-      controlSetRows: [['header_font_size'], ['subheader_font_size']],
+      controlSetRows: [[headerFontSize], [subheaderFontSize]],
    },
  ],
  controlOverrides: {
    y_axis_format: {
      label: t('Number format'),
    },
-    header_font_size: {
-      label: t('Big Number Font Size'),
-    },
  },
 };
--- a/superset-frontend/src/explore/controlPanels/Shared_BigNumber.js
+++ b/superset-frontend/src/explore/controlPanels/Shared_BigNumber.js
@ -0,0 +1,89 @@
+/**
+ * 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.
+ */
+
+// These are control configurations that are shared ONLY within the BigNumber viz plugin repo.
+import { t } from '@superset-ui/translation';
+
+export const headerFontSize = {
+  name: 'header_font_size',
+  config: {
+    type: 'SelectControl',
+    label: t('Big Number Font Size'),
+    renderTrigger: true,
+    clearable: false,
+    default: 0.4,
+    // Values represent the percentage of space a header should take
+    options: [
+      {
+        label: t('Tiny'),
+        value: 0.2,
+      },
+      {
+        label: t('Small'),
+        value: 0.3,
+      },
+      {
+        label: t('Normal'),
+        value: 0.4,
+      },
+      {
+        label: t('Large'),
+        value: 0.5,
+      },
+      {
+        label: t('Huge'),
+        value: 0.6,
+      },
+    ],
+  },
+};
+
+export const subheaderFontSize = {
+  name: 'subheader_font_size',
+  config: {
+    type: 'SelectControl',
+    label: t('Subheader Font Size'),
+    renderTrigger: true,
+    clearable: false,
+    default: 0.15,
+    // Values represent the percentage of space a subheader should take
+    options: [
+      {
+        label: t('Tiny'),
+        value: 0.125,
+      },
+      {
+        label: t('Small'),
+        value: 0.15,
+      },
+      {
+        label: t('Normal'),
+        value: 0.2,
+      },
+      {
+        label: t('Large'),
+        value: 0.3,
+      },
+      {
+        label: t('Huge'),
+        value: 0.4,
+      },
+    ],
+  },
+};
--- a/superset-frontend/src/explore/controlPanels/sections.jsx
+++ b/superset-frontend/src/explore/controlPanels/sections.jsx
@ -18,6 +18,7 @@
 */
 import React from 'react';
 import { t } from '@superset-ui/translation';
+import { formatSelectOptions } from '../../modules/utils';

 export const druidTimeSeries = {
  label: t('Time'),
@ -78,10 +79,65 @@ export const NVD3TimeSeries = [
      [<h1 className="section-header">{t('Rolling Window')}</h1>],
      ['rolling_type', 'rolling_periods', 'min_periods'],
      [<h1 className="section-header">{t('Time Comparison')}</h1>],
-      ['time_compare', 'comparison_type'],
+      [
+        {
+          name: 'time_compare',
+          config: {
+            type: 'SelectControl',
+            multi: true,
+            freeForm: true,
+            label: t('Time Shift'),
+            choices: formatSelectOptions([
+              '1 day',
+              '1 week',
+              '28 days',
+              '30 days',
+              '52 weeks',
+              '1 year',
+            ]),
+            description: t(
+              'Overlay one or more timeseries from a ' +
+                'relative time period. Expects relative time deltas ' +
+                'in natural language (example:  24 hours, 7 days, ' +
+                '56 weeks, 365 days)',
+            ),
+          },
+        },
+        'comparison_type',
+      ],
      [<h1 className="section-header">{t('Python Functions')}</h1>],
      [<h2 className="section-header">pandas.resample</h2>],
-      ['resample_rule', 'resample_method'],
+      [
+        {
+          name: 'resample_rule',
+          config: {
+            type: 'SelectControl',
+            freeForm: true,
+            label: t('Rule'),
+            default: null,
+            choices: formatSelectOptions(['1T', '1H', '1D', '7D', '1M', '1AS']),
+            description: t('Pandas resample rule'),
+          },
+        },
+        {
+          name: 'resample_method',
+          config: {
+            type: 'SelectControl',
+            freeForm: true,
+            label: t('Method'),
+            default: null,
+            choices: formatSelectOptions([
+              'asfreq',
+              'bfill',
+              'ffill',
+              'median',
+              'mean',
+              'sum',
+            ]),
+            description: t('Pandas resample method'),
+          },
+        },
+      ],
    ],
  },
 ];
--- a/superset-frontend/src/explore/controls.jsx
+++ b/superset-frontend/src/explore/controls.jsx
@ -795,31 +795,6 @@ export const controls = {
    }),
  },

-  resample_rule: {
-    type: 'SelectControl',
-    freeForm: true,
-    label: t('Rule'),
-    default: null,
-    choices: formatSelectOptions(['1T', '1H', '1D', '7D', '1M', '1AS']),
-    description: t('Pandas resample rule'),
-  },
-
-  resample_method: {
-    type: 'SelectControl',
-    freeForm: true,
-    label: t('Method'),
-    default: null,
-    choices: formatSelectOptions([
-      'asfreq',
-      'bfill',
-      'ffill',
-      'median',
-      'mean',
-      'sum',
-    ]),
-    description: t('Pandas resample method'),
-  },
-
  time_range: {
    type: 'DateFilterControl',
    freeForm: true,
@ -1033,21 +1008,6 @@ export const controls = {
    default: '',
  },

-  compare_lag: {
-    type: 'TextControl',
-    label: t('Comparison Period Lag'),
-    isInt: true,
-    description: t(
-      'Based on granularity, number of time periods to compare against',
-    ),
-  },
-
-  compare_suffix: {
-    type: 'TextControl',
-    label: t('Comparison suffix'),
-    description: t('Suffix to apply after the percentage display'),
-  },
-
  x_axis_format: {
    type: 'SelectControl',
    freeForm: true,
@ -1168,68 +1128,6 @@ export const controls = {
    ),
  },

-  header_font_size: {
-    type: 'SelectControl',
-    label: t('Header Font Size'),
-    renderTrigger: true,
-    clearable: false,
-    default: 0.4,
-    // Values represent the percentage of space a header should take
-    options: [
-      {
-        label: t('Tiny'),
-        value: 0.2,
-      },
-      {
-        label: t('Small'),
-        value: 0.3,
-      },
-      {
-        label: t('Normal'),
-        value: 0.4,
-      },
-      {
-        label: t('Large'),
-        value: 0.5,
-      },
-      {
-        label: t('Huge'),
-        value: 0.6,
-      },
-    ],
-  },
-
-  subheader_font_size: {
-    type: 'SelectControl',
-    label: t('Subheader Font Size'),
-    renderTrigger: true,
-    clearable: false,
-    default: 0.15,
-    // Values represent the percentage of space a subheader should take
-    options: [
-      {
-        label: t('Tiny'),
-        value: 0.125,
-      },
-      {
-        label: t('Small'),
-        value: 0.15,
-      },
-      {
-        label: t('Normal'),
-        value: 0.2,
-      },
-      {
-        label: t('Large'),
-        value: 0.3,
-      },
-      {
-        label: t('Huge'),
-        value: 0.4,
-      },
-    ],
-  },
-
  instant_filtering: {
    type: 'CheckboxControl',
    label: t('Instant Filtering'),
@ -1340,24 +1238,6 @@ export const controls = {
    description: t('Whether to display the numerical values within the cells'),
  },

-  show_trend_line: {
-    type: 'CheckboxControl',
-    label: t('Show Trend Line'),
-    renderTrigger: true,
-    default: true,
-    description: t('Whether to display the trend line'),
-  },
-
-  start_y_axis_at_zero: {
-    type: 'CheckboxControl',
-    label: t('Start y-axis at 0'),
-    renderTrigger: true,
-    default: true,
-    description: t(
-      'Start y-axis at zero. Uncheck to start y-axis at minimum value in the data.',
-    ),
-  },
-
  x_axis_showminmax: {
    type: 'CheckboxControl',
    label: t('X bounds'),
@ -1431,27 +1311,6 @@ export const controls = {
    description: t('Compute the contribution to the total'),
  },

-  time_compare: {
-    type: 'SelectControl',
-    multi: true,
-    freeForm: true,
-    label: t('Time Shift'),
-    choices: formatSelectOptions([
-      '1 day',
-      '1 week',
-      '28 days',
-      '30 days',
-      '52 weeks',
-      '1 year',
-    ]),
-    description: t(
-      'Overlay one or more timeseries from a ' +
-        'relative time period. Expects relative time deltas ' +
-        'in natural language (example:  24 hours, 7 days, ' +
-        '56 weeks, 365 days)',
-    ),
-  },
-
  comparison_type: {
    type: 'SelectControl',
    label: t('Calculation type'),
@ -1469,12 +1328,6 @@ export const controls = {
    ),
  },

-  subheader: {
-    type: 'TextControl',
-    label: t('Subheader'),
-    description: t('Description text that shows up below your Big Number'),
-  },
-
  mapbox_label: {
    type: 'SelectControl',
    multi: true,