feat: Use standardized controls in Big Number with Time Comparison (#…

…27193)
apache · Feb 21, 2024 · fd4f9ac · fd4f9ac
1 parent b4aae48
commit fd4f9ac
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 16 deletions.
diff --git a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/controlPanel.ts b/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/controlPanel.ts
@@ -16,11 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ensureIsArray, t, validateNonEmpty } from '@superset-ui/core';
+import { ensureIsArray, t } from '@superset-ui/core';
 import {
   ControlPanelConfig,
   ControlPanelState,
   ControlState,
+  getStandardizedControls,
   sharedControls,
 } from '@superset-ui/chart-controls';
 
@@ -43,17 +44,7 @@ const config: ControlPanelConfig = {
       label: t('Query'),
       expanded: true,
       controlSetRows: [
-        [
-          {
-            name: 'metrics',
-            config: {
-              ...sharedControls.metrics,
-              // it's possible to add validators to controls if
-              // certain selections/types need to be enforced
-              validators: [validateNonEmpty],
-            },
-          },
-        ],
+        ['metric'],
         ['adhoc_filters'],
         [
           {
@@ -207,6 +198,10 @@ const config: ControlPanelConfig = {
       label: t('Number format'),
     },
   },
+  formDataOverrides: formData => ({
+    ...formData,
+    metric: getStandardizedControls().shiftMetric(),
+  }),
 };
 
 export default config;
diff --git a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/transformProps.ts b/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/transformProps.ts
@@ -78,7 +78,7 @@ export default function transformProps(chartProps: ChartProps) {
     boldText,
     headerFontSize,
     headerText,
-    metrics,
+    metric,
     yAxisFormat,
     currencyFormat,
     subheaderFontSize,
@@ -87,14 +87,14 @@ export default function transformProps(chartProps: ChartProps) {
   const { data: dataA = [] } = queriesData[0];
   const { data: dataB = [] } = queriesData[1];
   const data = dataA;
-  const metricName = getMetricLabel(metrics[0]);
+  const metricName = getMetricLabel(metric);
   let bigNumber: number | string =
     data.length === 0 ? 0 : parseMetricValue(data[0][metricName]);
   let prevNumber: number | string =
     data.length === 0 ? 0 : parseMetricValue(dataB[0][metricName]);
 
   const numberFormatter = getValueFormatter(
-    metrics[0],
+    metric,
     currencyFormats,
     columnFormats,
     yAxisFormat,
@@ -147,7 +147,7 @@ export default function transformProps(chartProps: ChartProps) {
     height,
     data,
     // and now your control data, manipulated as needed, and passed through as props!
-    metrics,
+    metric,
     metricName,
     bigNumber,
     prevNumber,