Migrating unique bigNumber(total) controls

CONTRIBUTING.md

@@ -1036,23 +1036,13 @@ 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                                            |
 | --------------------- | --------- | ------------------------------------------------ |
 | `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_ |       |

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: {

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'),
-    },
   },
 };

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,
+      },
+    ],
+  },
+};

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'),
+          },
+        },
+      ],
     ],
   },
 ];