diff --git a/superset-frontend/packages/superset-ui-core/test/time-comparison/getComparisonInfo.test.ts b/superset-frontend/packages/superset-ui-core/test/time-comparison/getComparisonInfo.test.ts
index 9540badf3342fa7ef346225a6a4039389e28b6b8..ffaa58f48f7a152ac825d4b04b1900e332dab36d 100644
--- a/superset-frontend/packages/superset-ui-core/test/time-comparison/getComparisonInfo.test.ts
+++ b/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);
+ });
});
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx
index a4736c89c20586525639f88d4d2ec5ef534e5392..9ec2111071ba37b221d2309ae8b9c7e015a3282a 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx
+++ b/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>
);
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/controlPanel.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/controlPanel.ts
index ce934c43360b6194c2a89334d04fef83e0cf5dd4..bb285a70b0c9e8c1eb9f0512fdaab186a0805299 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/controlPanel.ts
+++ b/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({
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts
index b434fbbc58e43f727e3d22a2cfffe6a6f06b6bfc..9adf3e1fba7a7ae6d30f0acee268f148134483dd 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts
+++ b/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,
};
}
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/types.ts
index e0ece4d8777ad9213499b536a0013d2e2ea3ee9a..8aef509088d0f4fa70c0134b94c60d741d332653 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/types.ts
+++ b/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 {
diff --git a/superset-frontend/src/explore/components/controls/ColumnConfigControl/constants.tsx b/superset-frontend/src/explore/components/controls/ColumnConfigControl/constants.tsx
index ea58e4777d87298f725953d09dc736caf5a86b8f..2d98f1bb434c1312fb001730872c98d6309abf79 100644
--- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/constants.tsx
+++ b/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 = {