feat(plugin-chart-pivot-table): multiple improvements (apache#1232)

* feat(plugin-chart-pivot-table): multiple improvements * emotion syntax fix
zhaoyongjie · Nov 17, 2021 · 2c1632f · 2c1632f
1 parent 9d5d21a
commit 2c1632f
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 33 deletions.
diff --git a/...-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-pivot-table/package.json b/...-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/...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
@@ -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/...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
@@ -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,52 +257,32 @@ const config: ControlPanelConfig = {
             name: 'rowSubtotalPosition',
             config: {
               type: 'SelectControl',
-              label: t('Rows subtotals position'),
+              label: t('Rows subtotal position'),
               default: false,
               choices: [
                 // [value, label]
                 [true, t('Top')],
                 [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]
                 [true, t('Left')],
                 [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/...-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
@@ -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>;