feat(plugins): Make comparison values on BigNumberPeriodOverPeriod toggleable

superset-frontend/packages/superset-ui-core/test/time-comparison/getComparisonInfo.test.ts

@@ -63,6 +63,9 @@ const form_data = {
   header_font_size: 60,
   subheader_font_size: 26,
   comparison_color_enabled: true,
+  previous_period_value_enabled: true,
+  value_difference_enabled: true,
+  percent_difference_enabled: true,
   extra_form_data: {},
   force: false,
   result_format: 'json',
@@ -142,7 +145,7 @@ describe('getComparisonInfo', () => {
     expect(resultFormData.adhoc_filters?.[0]).toEqual(expectedFilters[0]);
   });
 
-  it('If adhoc_filter is undefrined the code wont break', () => {
+  it('If adhoc_filter is undefined the code wont break', () => {
     const resultFormData = getComparisonInfo(
       {
         ...form_data,
@@ -175,4 +178,21 @@ describe('getComparisonInfo', () => {
     expect(resultFormData.adhoc_filters?.length).toEqual(1);
     expect(resultFormData.adhoc_filters).toEqual(expectedFilters);
   });
+
+  it('Updates comparison display values when toggled', () => {
+    const resultFormData = getComparisonInfo(
+      {
+        ...form_data,
+        previous_period_value_enabled: false,
+        value_difference_enabled: false,
+        percent_difference_enabled: false,
+      },
+      ComparisonTimeRangeType.Year,
+      {},
+    );
+
+    expect(resultFormData.previous_period_value_enabled).toEqual(false);
+    expect(resultFormData.value_difference_enabled).toEqual(false);
+    expect(resultFormData.percent_difference_enabled).toEqual(false);
+  });
 });

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx

@@ -76,6 +76,9 @@ export default function PopKPI(props: PopKPIProps) {
     headerFontSize,
     subheaderFontSize,
     comparisonColorEnabled,
+    previousPeriodValueEnabled,
+    valueDifferenceEnabled,
+    percentDifferenceEnabled,
     comparisonColorScheme,
     percentDifferenceNumber,
     currentTimeRangeFilter,
@@ -194,29 +197,50 @@ export default function PopKPI(props: PopKPIProps) {
     percentDifferenceNumber,
   ]);
 
+  const previousPeriodSymbol = previousPeriodValueEnabled
+    ? [
+        {
+          symbol: '#',
+          value: prevNumber,
+          tooltipText: t('Data for %s', comparisonRange || 'previous range'),
+        },
+      ]
+    : [];
+
+  const valueDifferenceSymbol = valueDifferenceEnabled
+    ? [
+        {
+          symbol: '△',
+          value: valueDifference,
+          tooltipText: t('Value difference between the time periods'),
+        },
+      ]
+    : [];
+
+  const percentDifferenceSymbol = percentDifferenceEnabled
+    ? [
+        {
+          symbol: '%',
+          value: percentDifferenceFormattedString,
+          tooltipText: t('Percentage difference between the time periods'),
+        },
+      ]
+    : [];
+
   const SYMBOLS_WITH_VALUES = useMemo(
     () => [
-      {
-        symbol: '#',
-        value: prevNumber,
-        tooltipText: t('Data for %s', comparisonRange || 'previous range'),
-      },
-      {
-        symbol: '△',
-        value: valueDifference,
-        tooltipText: t('Value difference between the time periods'),
-      },
-      {
-        symbol: '%',
-        value: percentDifferenceFormattedString,
-        tooltipText: t('Percentage difference between the time periods'),
-      },
+      ...previousPeriodSymbol,
+      ...valueDifferenceSymbol,
+      ...percentDifferenceSymbol,
     ],
     [
       comparisonRange,
       prevNumber,
       valueDifference,
       percentDifferenceFormattedString,
+      previousPeriodSymbol,
+      valueDifferenceSymbol,
+      percentDifferenceSymbol,
     ],
   );
 

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/controlPanel.ts

@@ -73,6 +73,42 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          {
+            name: 'previous_period_value_enabled',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Add previous period value'),
+              renderTrigger: true,
+              default: true,
+              description: t('Add previous period value'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'value_difference_enabled',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Add period difference'),
+              renderTrigger: true,
+              default: true,
+              description: t('Add period difference'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'percent_difference_enabled',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Add percent difference'),
+              renderTrigger: true,
+              default: true,
+              description: t('Add percent difference'),
+            },
+          },
+        ],
         [
           {
             name: 'comparison_color_enabled',

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts

@@ -86,6 +86,9 @@ export default function transformProps(chartProps: ChartProps) {
     comparisonColorScheme,
     comparisonColorEnabled,
     percentDifferenceFormat,
+    previousPeriodValueEnabled,
+    valueDifferenceEnabled,
+    percentDifferenceEnabled,
   } = formData;
   const { data: dataA = [] } = queriesData[0];
   const data = dataA;
@@ -184,6 +187,9 @@ export default function transformProps(chartProps: ChartProps) {
     compType,
     comparisonColorEnabled,
     comparisonColorScheme,
+    previousPeriodValueEnabled,
+    valueDifferenceEnabled,
+    percentDifferenceEnabled,
     percentDifferenceNumber: percentDifferenceNum,
     currentTimeRangeFilter,
     startDateOffset,

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/types.ts

@@ -31,6 +31,9 @@ export interface PopKPIStylesProps {
   subheaderFontSize: keyof typeof supersetTheme.typography.sizes;
   boldText: boolean;
   comparisonColorEnabled: boolean;
+  previousPeriodValueEnabled: boolean;
+  valueDifferenceEnabled: boolean;
+  percentDifferenceEnabled: boolean;
 }
 
 interface PopKPICustomizeProps {