diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx index f81ad2e09b50b..f63cc8d8a36f7 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx @@ -23,7 +23,13 @@ import PivotTable from '@superset-ui/react-pivottable/PivotTable'; // @ts-ignore import { sortAs, aggregatorTemplates } from '@superset-ui/react-pivottable/Utilities'; import '@superset-ui/react-pivottable/pivottable.css'; -import { FilterType, PivotTableProps, PivotTableStylesProps, SelectedFiltersType } from './types'; +import { + FilterType, + MetricsLayoutEnum, + PivotTableProps, + PivotTableStylesProps, + SelectedFiltersType, +} from './types'; const Styles = styled.div` padding: ${({ theme }) => theme.gridUnit * 4}px; @@ -57,6 +63,7 @@ export default function PivotTableChart(props: PivotTableProps) { setDataMask, selectedFilters, verboseMap, + metricsLayout, } = props; const adaptiveFormatter = getNumberFormatter(valueFormat); @@ -98,9 +105,13 @@ export default function PivotTableChart(props: PivotTableProps) { [], ); - const [rows, cols] = transposePivot - ? [groupbyColumns, [METRIC_KEY, ...groupbyRows]] - : [groupbyRows, [METRIC_KEY, ...groupbyColumns]]; + let [rows, cols] = transposePivot ? [groupbyColumns, groupbyRows] : [groupbyRows, groupbyColumns]; + + if (metricsLayout === MetricsLayoutEnum.ROWS) { + rows = [METRIC_KEY, ...rows]; + } else { + cols = [METRIC_KEY, ...cols]; + } const handleChange = useCallback( (filters: SelectedFiltersType) => { diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.ts index 70566a6744af6..54d3f52cc0164 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.ts @@ -23,6 +23,7 @@ import { sections, sharedControls, } from '@superset-ui/chart-controls'; +import { MetricsLayoutEnum } from '../types'; const config: ControlPanelConfig = { controlPanelSections: [ @@ -60,6 +61,22 @@ const config: ControlPanelConfig = { }, }, ], + [ + { + name: 'metricsLayout', + config: { + type: 'RadioButtonControl', + renderTrigger: true, + label: t('Apply metrics on'), + default: MetricsLayoutEnum.COLUMNS, + options: [ + [MetricsLayoutEnum.COLUMNS, t('Columns')], + [MetricsLayoutEnum.ROWS, t('Rows')], + ], + description: t('Use metrics as a top level group for columns or for rows'), + }, + }, + ], ['adhoc_filters'], [ { diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/plugin/transformProps.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/plugin/transformProps.ts index 85fd3e9016b7a..84be1b5897216 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/plugin/transformProps.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/plugin/transformProps.ts @@ -73,6 +73,7 @@ export default function transformProps(chartProps: ChartProps) { rowTotals, valueFormat, emitFilter, + metricsLayout, } = formData; const { selectedFilters } = filterState; @@ -97,5 +98,6 @@ export default function transformProps(chartProps: ChartProps) { setDataMask, selectedFilters, verboseMap, + metricsLayout, }; } diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/types.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/types.ts index 2a136e57e1b88..66e9d966fd1e3 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/types.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/types.ts @@ -33,6 +33,11 @@ export interface PivotTableStylesProps { export type FilterType = Record; export type SelectedFiltersType = Record; +export enum MetricsLayoutEnum { + ROWS = 'ROWS', + COLUMNS = 'COLUMNS', +} + interface PivotTableCustomizeProps { groupbyRows: string[]; groupbyColumns: string[]; @@ -51,6 +56,7 @@ interface PivotTableCustomizeProps { emitFilter?: boolean; selectedFilters?: SelectedFiltersType; verboseMap?: JsonObject; + metricsLayout?: MetricsLayoutEnum; } export type PivotTableQueryFormData = QueryFormData & diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/test/plugin/transformProps.test.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/test/plugin/transformProps.test.ts index d17bfd0b9354e..969136e19a590 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/test/plugin/transformProps.test.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/test/plugin/transformProps.test.ts @@ -1,5 +1,6 @@ import { ChartProps } from '@superset-ui/core'; import transformProps from '../../src/plugin/transformProps'; +import { MetricsLayoutEnum } from '../../src/types'; describe('PivotTableChart transformProps', () => { const setDataMask = jest.fn(); @@ -18,6 +19,7 @@ describe('PivotTableChart transformProps', () => { rowTotals: true, valueFormat: 'SMART_NUMBER', emitFilter: false, + metricsLayout: MetricsLayoutEnum.COLUMNS, }; const chartProps = new ChartProps({ formData, @@ -55,6 +57,7 @@ describe('PivotTableChart transformProps', () => { setDataMask, selectedFilters: {}, verboseMap: {}, + metricsLayout: MetricsLayoutEnum.COLUMNS, }); }); });