feat(plugin-chart-pivot-table): enable metrics to be used as row grou…

…ps (apache#1172)
zhaoyongjie · Nov 25, 2021 · 3810d90 · 3810d90
1 parent 4f35689
commit 3810d90
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 4 deletions.
diff --git a/...emporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx b/...emporary_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<PivotTableStylesProps>`
   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/...orary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.ts b/...orary_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/...ary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/plugin/transformProps.ts b/...ary_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/...-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/src/types.ts b/...-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<string, DataRecordValue>;
 export type SelectedFiltersType = Record<string, DataRecordValue[]>;
 
+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/...perset_ui/superset-ui/plugins/plugin-chart-pivot-table/test/plugin/transformProps.test.ts b/...perset_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,
     });
   });
 });