From e64491df7ce93267b799843ca6542c41c087dc12 Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Wed, 21 Feb 2024 20:28:19 +0100
Subject: [PATCH] feat: Use standardized controls in Big Number with Time
 Comparison (#27193)

(cherry picked from commit fd4f9ac0441cc27a59b17b3220b986a8b790a201)
---
 .../src/plugin/controlPanel.ts                | 19 +++++++------------
 .../src/plugin/transformProps.ts              |  8 ++++----
 2 files changed, 11 insertions(+), 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
index 8f16a2b8d4062..d70be6312556e 100644
--- 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
index 2199984d0a4b4..fb82f40928253 100644
--- 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,