From 0433df8e423b68e47e2e772d8b4226abe2592d4f Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Thu, 22 Jul 2021 15:57:48 +0200
Subject: [PATCH] feat(plugin-chart-pivot-table): multiple improvements (#1232)

* feat(plugin-chart-pivot-table): multiple improvements

* emotion syntax fix
---
 .../plugin-chart-pivot-table/package.json     |  2 +-
 .../src/PivotTableChart.tsx                   | 15 +++--
 .../src/plugin/controlPanel.ts                | 58 ++++++++++---------
 .../plugin-chart-pivot-table/src/types.ts     |  1 +
 4 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/package.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/package.json
index 64a430a3a8f95..e92c10294288c 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/package.json
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/package.json
@@ -28,7 +28,7 @@
   "dependencies": {
     "@superset-ui/chart-controls": "0.17.69",
     "@superset-ui/core": "0.17.64",
-    "@superset-ui/react-pivottable": "^0.12.9"
+    "@superset-ui/react-pivottable": "^0.12.10"
   },
   "peerDependencies": {
     "@ant-design/icons": "^4.2.2",
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 bf782628d3e37..91f9ac9ba8392 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
@@ -24,6 +24,7 @@ import {
   getNumberFormatter,
   DataRecordValue,
   NumberFormatter,
+  useTheme,
 } from '@superset-ui/core';
 // @ts-ignore
 import PivotTable from '@superset-ui/react-pivottable/PivotTable';
@@ -39,11 +40,12 @@ import {
 } from './types';
 
 const Styles = styled.div<PivotTableStylesProps>`
-  padding: ${({ theme }) => theme.gridUnit * 4}px;
-  height: ${({ height }) => height}px;
-  width: ${({ width }) => width}px;
-  overflow-y: scroll;
-  }
+  ${({ height, width, margin }) => `
+      margin: ${margin}px;
+      height: ${height - margin * 2}px;
+      width: ${width - margin * 2}px;
+      overflow-y: scroll;
+ `}
 `;
 
 const METRIC_KEY = 'metric';
@@ -122,6 +124,7 @@ export default function PivotTableChart(props: PivotTableProps) {
     dateFormatters,
   } = props;
 
+  const theme = useTheme();
   const defaultFormatter = getNumberFormatter(valueFormat);
   const columnFormatsArray = Object.entries(columnFormats);
   const hasCustomMetricFormatters = columnFormatsArray.length > 0;
@@ -244,7 +247,7 @@ export default function PivotTableChart(props: PivotTableProps) {
   );
 
   return (
-    <Styles height={height} width={width}>
+    <Styles height={height} width={width} margin={theme.gridUnit * 4}>
       <PivotTable
         data={unpivotedData}
         rows={rows}
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 5f5cd604a363e..035ee34eb9fd6 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
@@ -136,6 +136,30 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          {
+            name: 'rowTotals',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Show rows total'),
+              default: false,
+              renderTrigger: true,
+              description: t('Display row level total'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'colTotals',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Show columns total'),
+              default: false,
+              renderTrigger: true,
+              description: t('Display column level total'),
+            },
+          },
+        ],
         [
           {
             name: 'transposePivot',
@@ -208,6 +232,8 @@ const config: ControlPanelConfig = {
               description: t('Order of rows'),
             },
           },
+        ],
+        [
           {
             name: 'colOrder',
             config: {
@@ -231,7 +257,7 @@ const config: ControlPanelConfig = {
             name: 'rowSubtotalPosition',
             config: {
               type: 'SelectControl',
-              label: t('Rows subtotals position'),
+              label: t('Rows subtotal position'),
               default: false,
               choices: [
                 // [value, label]
@@ -239,14 +265,16 @@ const config: ControlPanelConfig = {
                 [false, t('Bottom')],
               ],
               renderTrigger: true,
-              description: t('Position of row level subtotals'),
+              description: t('Position of row level subtotal'),
             },
           },
+        ],
+        [
           {
             name: 'colSubtotalPosition',
             config: {
               type: 'SelectControl',
-              label: t('Cols subtotals position'),
+              label: t('Cols subtotal position'),
               default: false,
               choices: [
                 // [value, label]
@@ -254,29 +282,7 @@ const config: ControlPanelConfig = {
                 [false, t('Right')],
               ],
               renderTrigger: true,
-              description: t('Position of column level subtotals'),
-            },
-          },
-        ],
-        [
-          {
-            name: 'rowTotals',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Show rows totals'),
-              default: true,
-              renderTrigger: true,
-              description: t('Display row level totals'),
-            },
-          },
-          {
-            name: 'colTotals',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Show cols totals'),
-              default: true,
-              renderTrigger: true,
-              description: t('Display column level totals'),
+              description: t('Position of column level subtotal'),
             },
           },
         ],
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 88451082e13bf..f8c26ee8dd1fb 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
@@ -31,6 +31,7 @@ import { ColorFormatters } from '@superset-ui/chart-controls';
 export interface PivotTableStylesProps {
   height: number;
   width: number;
+  margin: number;
 }
 
 export type FilterType = Record<string, DataRecordValue>;