feat(plugins): Make comparison values on BigNumberPeriodOverPeriod toggleable (#28605)

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

@@ -63,6 +63,11 @@ const form_data = {
   header_font_size: 60,
   subheader_font_size: 26,
   comparison_color_enabled: true,
+  column_config: {
+    name: {
+      visible: true,
+    },
+  },
   extra_form_data: {},
   force: false,
   result_format: 'json',
@@ -142,7 +147,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 +180,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,
+        column_config: {
+          name: {
+            visible: false,
+          },
+        },
+      },
+      ComparisonTimeRangeType.Year,
+      {},
+    );
+
+    expect(resultFormData.column_config.name.visible).toEqual(false);
+  });
 });

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

@@ -200,16 +200,19 @@ export default function PopKPI(props: PopKPIProps) {
         symbol: '#',
         value: prevNumber,
         tooltipText: t('Data for %s', comparisonRange || 'previous range'),
+        columnKey: 'Previous value',
       },
       {
         symbol: '△',
         value: valueDifference,
         tooltipText: t('Value difference between the time periods'),
+        columnKey: 'Delta',
       },
       {
         symbol: '%',
         value: percentDifferenceFormattedString,
         tooltipText: t('Percentage difference between the time periods'),
+        columnKey: 'Percent change',
       },
     ],
     [
@@ -220,6 +223,10 @@ export default function PopKPI(props: PopKPIProps) {
     ],
   );
 
+  const visibleSymbols = SYMBOLS_WITH_VALUES.filter(
+    symbol => props.columnConfig?.[symbol.columnKey]?.visible !== false,
+  );
+
   const { isOverflowing, symbolContainerRef, wrapperRef } =
     useOverflowDetection(flexGap);
 
@@ -244,6 +251,7 @@ export default function PopKPI(props: PopKPIProps) {
           )}
         </div>
 
+        {visibleSymbols.length > 0 && (
           <div
             css={[
               css`
@@ -266,7 +274,7 @@ export default function PopKPI(props: PopKPIProps) {
             ]}
             ref={symbolContainerRef}
           >
-          {SYMBOLS_WITH_VALUES.map((symbol_with_value, index) => (
+            {visibleSymbols.map((symbol_with_value, index) => (
               <ComparisonValue
                 key={`comparison-symbol-${symbol_with_value.symbol}`}
                 subheaderFontSize={subheaderFontSize}
@@ -289,6 +297,7 @@ export default function PopKPI(props: PopKPIProps) {
               </ComparisonValue>
             ))}
           </div>
+        )}
       </NumbersContainer>
     </div>
   );

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

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t } from '@superset-ui/core';
+import { t, GenericDataType } from '@superset-ui/core';
 import {
   ControlPanelConfig,
   getStandardizedControls,
@@ -106,6 +106,42 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          {
+            name: 'column_config',
+            config: {
+              type: 'ColumnConfigControl',
+              label: t('Customize columns'),
+              description: t('Further customize how to display each column'),
+              width: 400,
+              height: 320,
+              renderTrigger: true,
+              configFormLayout: {
+                [GenericDataType.Numeric]: [
+                  {
+                    tab: t('General'),
+                    children: [['visible']],
+                  },
+                ],
+              },
+              shouldMapStateToProps() {
+                return true;
+              },
+              mapStateToProps(explore, _, chart) {
+                return {
+                  columnsPropsObject: {
+                    colnames: ['Previous value', 'Delta', 'Percent change'],
+                    coltypes: [
+                      GenericDataType.Numeric,
+                      GenericDataType.Numeric,
+                      GenericDataType.Numeric,
+                    ],
+                  },
+                };
+              },
+            },
+          },
+        ],
       ],
     },
     sections.timeComparisonControls({

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

@@ -89,6 +89,7 @@ export default function transformProps(chartProps: ChartProps) {
     comparisonColorScheme,
     comparisonColorEnabled,
     percentDifferenceFormat,
+    columnConfig,
   } = formData;
   const { data: dataA = [] } = queriesData[0];
   const data = dataA;
@@ -193,5 +194,6 @@ export default function transformProps(chartProps: ChartProps) {
     startDateOffset,
     shift: timeComparison,
     dashboardTimeRange: formData?.extraFormData?.time_range,
+    columnConfig,
   };
 }

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

@@ -33,6 +33,10 @@ export interface PopKPIStylesProps {
   comparisonColorEnabled: boolean;
 }
 
+export type TableColumnConfig = {
+  visible?: boolean;
+};
+
 interface PopKPICustomizeProps {
   headerText: string;
 }
@@ -66,6 +70,7 @@ export type PopKPIProps = PopKPIStylesProps &
     startDateOffset?: string;
     shift: string;
     dashboardTimeRange?: string;
+    columnConfig?: Record<string, TableColumnConfig>;
   };
 
 export enum ColorSchemeEnum {

superset-frontend/src/explore/components/controls/ColumnConfigControl/constants.tsx

@@ -38,7 +38,8 @@ export type SharedColumnConfigProp =
   | 'horizontalAlign'
   | 'truncateLongCells'
   | 'showCellBars'
-  | 'currencyFormat';
+  | 'currencyFormat'
+  | 'visible';
 
 const d3NumberFormat: ControlFormItemSpec<'Select'> = {
   allowNewOptions: true,
@@ -152,6 +153,14 @@ const currencyFormat: ControlFormItemSpec<'CurrencyControl'> = {
   ),
   debounceDelay: 200,
 };
+
+const visible: ControlFormItemSpec<'Checkbox'> = {
+  controlType: 'Checkbox',
+  label: t('Display in chart'),
+  description: t('Whether to display in the chart'),
+  defaultValue: true,
+  debounceDelay: 200,
+};
 /**
  * All configurable column formatting properties.
  */
@@ -174,6 +183,7 @@ export const SHARED_COLUMN_CONFIG_PROPS = {
   alignPositiveNegative,
   colorPositiveNegative,
   currencyFormat,
+  visible,
 };
 
 export const DEFAULT_CONFIG_FORM_LAYOUT: ColumnConfigFormLayout = {