fix: show table summary is not reactive in pivot table (#388)

* chore: reduce unneed computation * fix: show table summary is not reactive * fix: field position & reactive
Kanaries · May 26, 2024 · e348f31 · e348f31
1 parent 5ce9b8c
commit e348f31
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/packages/graphic-walker/src/components/pivotTable/index.tsx b/packages/graphic-walker/src/components/pivotTable/index.tsx
@@ -13,7 +13,7 @@ import MetricTable from './metricTable';
 import LoadingLayer from '../loadingLayer';
 import { useCompututaion, useVizStore } from '../../store';
 import { fold2 } from '../../lib/op/fold';
-import { getSort, getSortedEncoding } from '../../utils';
+import { getFieldIdentifier, getSort, getSortedEncoding } from '../../utils';
 import { GWGlobalConfig } from '@/vis/theme';
 
 interface PivotTableProps {
@@ -86,6 +86,10 @@ const PivotTable: React.FC<PivotTableProps> = observer(function PivotTableCompon
         }
     }, [enableCollapse, vizStore?.tableCollapsedHeaderMap]);
 
+    useEffect(() => {
+        aggregateThenGenerate();
+    }, [showTableSummary]);
+
     const aggregateThenGenerate = async () => {
         await aggregateGroupbyData();
         generateNewTable();
@@ -128,6 +132,8 @@ const PivotTable: React.FC<PivotTableProps> = observer(function PivotTableCompon
             });
     };
 
+    const groupbyCombListRef = useRef<IViewField[][]>([]);
+
     const aggregateGroupbyData = () => {
         if (dimsInRow.length === 0 && dimsInColumn.length === 0) return;
         if (data.length === 0) return;
@@ -148,6 +154,15 @@ const PivotTable: React.FC<PivotTableProps> = observer(function PivotTableCompon
         const groupbyCombList: IViewField[][] = groupbyCombListInCol
             .flatMap((combInCol) => groupbyCombListInRow.map((combInRow) => [...combInCol, ...combInRow]))
             .slice(0, -1);
+        if (
+            groupbyCombListRef.current.length === groupbyCombList.length &&
+            groupbyCombListRef.current.every(
+                (x, i) => x.length === groupbyCombList[i].length && x.every((y, j) => getFieldIdentifier(y) === getFieldIdentifier(groupbyCombList[i][j]))
+            )
+        ) {
+            return;
+        }
+        groupbyCombListRef.current = groupbyCombList;
         setIsLoading(true);
         appRef.current?.updateRenderStatus('computing');
         const groupbyPromises: Promise<IRow[]>[] = groupbyCombList.map((dimComb) => {

diff --git a/packages/graphic-walker/src/components/pivotTable/utils.ts b/packages/graphic-walker/src/components/pivotTable/utils.ts
@@ -68,18 +68,18 @@ const TOTAL_KEY = '__total';
 
 function insertSummaryNode(node: INestNode): void {
     if (node.children.length > 0) {
-        node.children.push({
+        node.children.unshift({
             key: TOTAL_KEY,
-            value: 'total',
+            value: `${node.value}(total)`,
             sort: '',
-            fieldKey: node.children[0].fieldKey,
+            fieldKey: TOTAL_KEY,
             uniqueKey: `${node.uniqueKey}${TOTAL_KEY}`,
             children: [],
             path: [],
             height: node.children[0].height,
             isCollapsed: true,
         });
-        for (let i = 0; i < node.children.length - 1; i++) {
+        for (let i = 1; i < node.children.length; i++) {
             insertSummaryNode(node.children[i]);
         }
     }
@@ -197,7 +197,7 @@ export function buildMetricTableFromNestTree(leftTree: INestNode, topTree: INest
             const predicates = iteLeft
                 .predicates()
                 .concat(iteTop.predicates())
-                .filter((ele) => ele.value !== 'total');
+                .filter((ele) => ele.key !== TOTAL_KEY);
             const matchedRows = data.filter((r) => predicates.every((pre) => r[pre.key] === pre.value));
             if (matchedRows.length > 0) {
                 // If multiple rows are matched, then find the most matched one (the row with smallest number of keys)