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

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,51 +251,53 @@ export default function PopKPI(props: PopKPIProps) {
           )}
         </div>
 
-        <div
-          css={[
-            css`
-              display: flex;
-              justify-content: space-around;
-              gap: ${flexGap}px;
-              min-width: 0;
-              flex-shrink: 1;
-            `,
-            isOverflowing
-              ? css`
-                  flex-direction: column;
-                  align-items: flex-start;
-                  width: fit-content;
-                `
-              : css`
-                  align-items: center;
-                  width: 100%;
-                `,
-          ]}
-          ref={symbolContainerRef}
-        >
-          {SYMBOLS_WITH_VALUES.map((symbol_with_value, index) => (
-            <ComparisonValue
-              key={`comparison-symbol-${symbol_with_value.symbol}`}
-              subheaderFontSize={subheaderFontSize}
-            >
-              <Tooltip
-                id="tooltip"
-                placement="top"
-                title={symbol_with_value.tooltipText}
+        {visibleSymbols.length > 0 && (
+          <div
+            css={[
+              css`
+                display: flex;
+                justify-content: space-around;
+                gap: ${flexGap}px;
+                min-width: 0;
+                flex-shrink: 1;
+              `,
+              isOverflowing
+                ? css`
+                    flex-direction: column;
+                    align-items: flex-start;
+                    width: fit-content;
+                  `
+                : css`
+                    align-items: center;
+                    width: 100%;
+                  `,
+            ]}
+            ref={symbolContainerRef}
+          >
+            {visibleSymbols.map((symbol_with_value, index) => (
+              <ComparisonValue
+                key={`comparison-symbol-${symbol_with_value.symbol}`}
+                subheaderFontSize={subheaderFontSize}
               >
-                <SymbolWrapper
-                  backgroundColor={
-                    index > 0 ? backgroundColor : defaultBackgroundColor
-                  }
-                  textColor={index > 0 ? textColor : defaultTextColor}
+                <Tooltip
+                  id="tooltip"
+                  placement="top"
+                  title={symbol_with_value.tooltipText}
                 >
-                  {symbol_with_value.symbol}
-                </SymbolWrapper>
-                {symbol_with_value.value}
-              </Tooltip>
-            </ComparisonValue>
-          ))}
-        </div>
+                  <SymbolWrapper
+                    backgroundColor={
+                      index > 0 ? backgroundColor : defaultBackgroundColor
+                    }
+                    textColor={index > 0 ? textColor : defaultTextColor}
+                  >
+                    {symbol_with_value.symbol}
+                  </SymbolWrapper>
+                  {symbol_with_value.value}
+                </Tooltip>
+              </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 {