From 3895415278bd26dbf1a60a4da56353cd3a2dcb0a Mon Sep 17 00:00:00 2001
From: islxyqwe <islxyqwe123@gmail.com>
Date: Thu, 14 Sep 2023 18:26:32 +0800
Subject: [PATCH] fix: add title in pivot table

---
 .../src/components/pivotTable/index.tsx       | 129 +++++++++---------
 1 file changed, 62 insertions(+), 67 deletions(-)

diff --git a/packages/graphic-walker/src/components/pivotTable/index.tsx b/packages/graphic-walker/src/components/pivotTable/index.tsx
index 9d243ad2..3d899e40 100644
--- a/packages/graphic-walker/src/components/pivotTable/index.tsx
+++ b/packages/graphic-walker/src/components/pivotTable/index.tsx
@@ -7,16 +7,7 @@ import { useAppRootContext } from '../../components/appRoot';
 import { observer } from 'mobx-react-lite';
 import LeftTree from './leftTree';
 import TopTree from './topTree';
-import {
-    DeepReadonly,
-    DraggableFieldState,
-    IComputationFunction,
-    IDarkMode,
-    IRow,
-    IThemeKey,
-    IViewField,
-    IVisualConfig,
-} from '../../interfaces';
+import { DeepReadonly, DraggableFieldState, IComputationFunction, IDarkMode, IRow, IThemeKey, IViewField, IVisualConfig } from '../../interfaces';
 import { INestNode } from './inteface';
 import { unstable_batchedUpdates } from 'react-dom';
 import MetricTable from './metricTable';
@@ -30,10 +21,10 @@ interface PivotTableProps {
     loading: boolean;
     draggableFieldState: DeepReadonly<DraggableFieldState>;
     visualConfig: DeepReadonly<IVisualConfig>;
-    computationFunction: IComputationFunction
+    computationFunction: IComputationFunction;
 }
 
-const PivotTable: React.FC<PivotTableProps> = observer(function PivotTableComponent (props) {
+const PivotTable: React.FC<PivotTableProps> = observer(function PivotTableComponent(props) {
     const { data, visualConfig, loading, computationFunction } = props;
     const appRef = useAppRootContext();
     const [leftTree, setLeftTree] = useState<INestNode | null>(null);
@@ -47,7 +38,7 @@ const PivotTable: React.FC<PivotTableProps> = observer(function PivotTableCompon
     const { showTableSummary, defaultAggregated } = visualConfig;
     const { tableCollapsedHeaderMap } = commonStore;
     const aggData = useRef<IRow[]>([]);
-    const [ topTreeHeaderRowNum, setTopTreeHeaderRowNum ] = useState<number>(0);
+    const [topTreeHeaderRowNum, setTopTreeHeaderRowNum] = useState<number>(0);
 
     const dimsInRow = useMemo(() => {
         return toJS(rows).filter((f) => f.analyticType === 'dimension');
@@ -88,7 +79,7 @@ const PivotTable: React.FC<PivotTableProps> = observer(function PivotTableCompon
         }
     }, [tableCollapsedHeaderMap]);
 
-    const aggregateThenGenerate = async() => {
+    const aggregateThenGenerate = async () => {
         await aggregateGroupbyData();
         generateNewTable();
     };
@@ -96,16 +87,9 @@ const PivotTable: React.FC<PivotTableProps> = observer(function PivotTableCompon
     const generateNewTable = () => {
         appRef.current?.updateRenderStatus('rendering');
         setIsLoading(true);
-        buildPivotTableService(
-            dimsInRow,
-            dimsInColumn,
-            data,
-            aggData.current,
-            Array.from(tableCollapsedHeaderMap.keys()),
-            showTableSummary
-        )
+        buildPivotTableService(dimsInRow, dimsInColumn, data, aggData.current, Array.from(tableCollapsedHeaderMap.keys()), showTableSummary)
             .then((data) => {
-                const {lt, tt, metric} = data;
+                const { lt, tt, metric } = data;
                 unstable_batchedUpdates(() => {
                     setLeftTree(lt);
                     setTopTree(tt);
@@ -118,14 +102,14 @@ const PivotTable: React.FC<PivotTableProps> = observer(function PivotTableCompon
                 appRef.current?.updateRenderStatus('error');
                 console.log(err);
                 setIsLoading(false);
-            })
+            });
     };
 
     const aggregateGroupbyData = () => {
         if (dimsInRow.length === 0 && dimsInColumn.length === 0) return;
         if (data.length === 0) return;
-        let groupbyCombListInRow:IViewField[][]  = [];
-        let groupbyCombListInCol:IViewField[][]  = [];
+        let groupbyCombListInRow: IViewField[][] = [];
+        let groupbyCombListInCol: IViewField[][] = [];
         if (showTableSummary) {
             groupbyCombListInRow = dimsInRow.map((dim, idx) => dimsInRow.slice(0, idx));
             groupbyCombListInCol = dimsInColumn.map((dim, idx) => dimsInColumn.slice(0, idx));
@@ -138,26 +122,17 @@ const PivotTable: React.FC<PivotTableProps> = observer(function PivotTableCompon
         }
         groupbyCombListInRow.push(dimsInRow);
         groupbyCombListInCol.push(dimsInColumn);
-        const groupbyCombList:IViewField[][] = groupbyCombListInCol.flatMap(combInCol =>
-            groupbyCombListInRow.map(combInRow => [...combInCol, ...combInRow])
-        ).slice(0, -1);
+        const groupbyCombList: IViewField[][] = groupbyCombListInCol
+            .flatMap((combInCol) => groupbyCombListInRow.map((combInRow) => [...combInCol, ...combInRow]))
+            .slice(0, -1);
         setIsLoading(true);
         appRef.current?.updateRenderStatus('computing');
         const groupbyPromises: Promise<IRow[]>[] = groupbyCombList.map((dimComb) => {
-            const workflow = toWorkflow(
-                viewFilters,
-                allFields,
-                dimComb,
-                viewMeasures,
-                defaultAggregated,
-                sort,
-                limit > 0 ? limit : undefined
-            );
-            return dataQueryServer(computationFunction, workflow, limit > 0 ? limit : undefined)
-                .catch((err) => {
-                    appRef.current?.updateRenderStatus('error');
-                    return [];
-                });
+            const workflow = toWorkflow(viewFilters, allFields, dimComb, viewMeasures, defaultAggregated, sort, limit > 0 ? limit : undefined);
+            return dataQueryServer(computationFunction, workflow, limit > 0 ? limit : undefined).catch((err) => {
+                appRef.current?.updateRenderStatus('error');
+                return [];
+            });
         });
         return new Promise<void>((resolve, reject) => {
             Promise.all(groupbyPromises)
@@ -172,8 +147,7 @@ const PivotTable: React.FC<PivotTableProps> = observer(function PivotTableCompon
                     setIsLoading(false);
                     reject();
                 });
-        })
-
+        });
     };
 
     // const { leftTree, topTree, metricTable } = store;
@@ -183,40 +157,61 @@ const PivotTable: React.FC<PivotTableProps> = observer(function PivotTableCompon
             <div className="flex">
                 <table className="border border-gray-300 border-collapse">
                     <thead className="border border-gray-300">
-                        {new Array(topTreeHeaderRowNum).fill(0).map((_, i) => (
+                        {new Array(Math.max(topTreeHeaderRowNum - 1, 0)).fill(0).map((_, i) => (
                             <tr className="" key={i}>
-                                <td className="bg-zinc-100 dark:bg-zinc-800 text-gray-800 dark:text-gray-100 p-2 m-1 text-xs border border-gray-300" colSpan={dimsInRow.length + (measInRow.length > 0 ? 1 : 0)}>_</td>
+                                <td
+                                    className="bg-zinc-100 dark:bg-zinc-800 text-gray-800 dark:text-gray-100 p-2 m-1 text-xs border border-gray-300"
+                                    colSpan={dimsInRow.length + (measInRow.length > 0 ? 1 : 0)}
+                                >
+                                    _
+                                </td>
                             </tr>
                         ))}
+                        {topTreeHeaderRowNum > 0 && (
+                            <tr className="">
+                                {dimsInRow.map((x) => (
+                                    <td
+                                        className="bg-zinc-100 dark:bg-zinc-800 text-gray-800 dark:text-gray-100 p-2 m-1 text-xs border whitespace-nowrap border-gray-300"
+                                        colSpan={1}
+                                    >
+                                        {x.name}
+                                    </td>
+                                ))}
+                                {measInRow.length > 0 && (
+                                    <td
+                                        className="bg-zinc-100 dark:bg-zinc-800 text-gray-800 dark:text-gray-100 p-2 m-1 text-xs border border-gray-300"
+                                        colSpan={1}
+                                    >
+                                        _
+                                    </td>
+                                )}
+                            </tr>
+                        )}
                     </thead>
-                    {leftTree && 
-                        <LeftTree 
-                            data={leftTree} 
-                            dimsInRow={dimsInRow} 
-                            measInRow={measInRow} 
+                    {leftTree && (
+                        <LeftTree
+                            data={leftTree}
+                            dimsInRow={dimsInRow}
+                            measInRow={measInRow}
                             onHeaderCollapse={commonStore.updateTableCollapsedHeader.bind(commonStore)}
-                        />}
+                        />
+                    )}
                 </table>
                 <table className="border border-gray-300 border-collapse">
-                    {topTree && 
-                        <TopTree 
-                            data={topTree} 
-                            dimsInCol={dimsInColumn} 
-                            measInCol={measInColumn} 
+                    {topTree && (
+                        <TopTree
+                            data={topTree}
+                            dimsInCol={dimsInColumn}
+                            measInCol={measInColumn}
                             onHeaderCollapse={commonStore.updateTableCollapsedHeader.bind(commonStore)}
                             onTopTreeHeaderRowNumChange={(num) => setTopTreeHeaderRowNum(num)}
-                        />}
-                    {metricTable && 
-                        <MetricTable 
-                            matrix={metricTable} 
-                            meaInColumns={measInColumn} 
-                            meaInRows={measInRow} 
-                        />}
+                        />
+                    )}
+                    {metricTable && <MetricTable matrix={metricTable} meaInColumns={measInColumn} meaInRows={measInRow} />}
                 </table>
             </div>
         </div>
-
     );
 });
 
-export default PivotTable;
\ No newline at end of file
+export default PivotTable;