From 695172c696526250b99fa3bb11bf2cdc951bea2b Mon Sep 17 00:00:00 2001 From: Dhiraj Barnwal Date: Mon, 1 Apr 2024 02:06:44 +0530 Subject: [PATCH] Refac: Move totals row out of data (#4470) * Move totals row out of pivot data * Merge totals row with data * Add missing check --- .../dashboards/pivot/PivotTable.svelte | 36 +++++++++------- .../dashboards/pivot/pivot-data-store.ts | 42 ++++++++++++------- .../pivot/pivot-table-transformations.ts | 28 +++++++++++++ .../src/features/dashboards/pivot/types.ts | 1 + 4 files changed, 78 insertions(+), 29 deletions(-) diff --git a/web-common/src/features/dashboards/pivot/PivotTable.svelte b/web-common/src/features/dashboards/pivot/PivotTable.svelte index 3436d58c01e..cdb0b5ef2dc 100644 --- a/web-common/src/features/dashboards/pivot/PivotTable.svelte +++ b/web-common/src/features/dashboards/pivot/PivotTable.svelte @@ -34,21 +34,27 @@ const options: Readable> = derived( [pivotDashboardStore, pivotDataStore], - ([pivotConfig, pivotData]) => ({ - data: pivotData.data, - columns: pivotData.columnDef, - state: { - expanded: pivotConfig.expanded, - sorting: pivotConfig.sorting, - }, - onExpandedChange: handleExpandedChange, - getSubRows: (row) => row.subRows, - onSortingChange: handleSorting, - getExpandedRowModel: getExpandedRowModel(), - getCoreRowModel: getCoreRowModel(), - enableSortingRemoval: false, - enableExpanding: true, - }), + ([pivotConfig, pivotData]) => { + let tableData = pivotData.data; + if (pivotData.totalsRowData) { + tableData = [pivotData.totalsRowData, ...pivotData.data]; + } + return { + data: tableData, + columns: pivotData.columnDef, + state: { + expanded: pivotConfig.expanded, + sorting: pivotConfig.sorting, + }, + onExpandedChange: handleExpandedChange, + getSubRows: (row) => row.subRows, + onSortingChange: handleSorting, + getExpandedRowModel: getExpandedRowModel(), + getCoreRowModel: getCoreRowModel(), + enableSortingRemoval: false, + enableExpanding: true, + }; + }, ); const table = createSvelteTable(options); diff --git a/web-common/src/features/dashboards/pivot/pivot-data-store.ts b/web-common/src/features/dashboards/pivot/pivot-data-store.ts index 5c4e2e5fcfa..45ef0b7c23e 100644 --- a/web-common/src/features/dashboards/pivot/pivot-data-store.ts +++ b/web-common/src/features/dashboards/pivot/pivot-data-store.ts @@ -30,6 +30,7 @@ import { } from "./pivot-queries"; import { getTotalsRow, + getTotalsRowSkeleton, mergeRowTotals, prepareNestedPivotData, reduceTableCellDataIntoRows, @@ -372,6 +373,9 @@ function createPivotDataStore(ctx: StateManagers): PivotDataStore { "5000", // Using 5000 for cache hit ); } + + const displayTotalsRow = + rowDimensionNames.length && measureNames.length; if ( (rowDimensionNames.length || colDimensionNames.length) && measureNames.length @@ -398,16 +402,23 @@ function createPivotDataStore(ctx: StateManagers): PivotDataStore { (totalsRowResponse !== null && totalsRowResponse?.isFetching) || rowDimensionAxes?.isFetching ) { + const skeletonTotalsRowData = getTotalsRowSkeleton( + config, + columnDimensionAxes?.data, + ); return axesSet({ isFetching: true, data: lastPivotData, columnDef: lastPivotColumnDef, assembled: false, totalColumns: lastTotalColumns, + totalsRowData: displayTotalsRow + ? skeletonTotalsRowData + : undefined, }); } - const totalsRow = getTotalsRow( + const totalsRowData = getTotalsRow( config, columnDimensionAxes?.data, totalsRowResponse?.data?.data, @@ -420,15 +431,16 @@ function createPivotDataStore(ctx: StateManagers): PivotDataStore { if (rowDimensionValues.length === 0 && rowPage > 1) { return axesSet({ isFetching: false, - data: [totalsRow, ...lastPivotData], + data: lastPivotData, columnDef: lastPivotColumnDef, assembled: true, totalColumns: lastTotalColumns, + totalsRowData: displayTotalsRow ? totalsRowData : undefined, reachedEndForRowData: true, }); } - const totalColumns = getTotalColumnCount(totalsRow); + const totalColumns = getTotalColumnCount(totalsRowData); const axesRowTotals = rowDimensionAxes?.totals?.[anchorDimension] || []; @@ -452,13 +464,13 @@ function createPivotDataStore(ctx: StateManagers): PivotDataStore { const slicedAxesDataForDef = sliceColumnAxesDataForDef( config, columnDimensionAxes?.data, - totalsRow, + totalsRowData, ); columnDef = getColumnDefForPivot( config, slicedAxesDataForDef, - totalsRow, + totalsRowData, ); initialTableCellQuery = createTableCellQuery( @@ -466,14 +478,14 @@ function createPivotDataStore(ctx: StateManagers): PivotDataStore { config, rowDimensionNames[0], columnDimensionAxes?.data, - totalsRow, + totalsRowData, rowDimensionValues, ); } else { columnDef = getColumnDefForPivot( config, columnDimensionAxes?.data, - totalsRow, + totalsRowData, ); } /** @@ -489,6 +501,7 @@ function createPivotDataStore(ctx: StateManagers): PivotDataStore { columnDef, assembled: false, totalColumns, + totalsRowData: displayTotalsRow ? totalsRowData : undefined, }); } @@ -519,6 +532,9 @@ function createPivotDataStore(ctx: StateManagers): PivotDataStore { columnDef, assembled: false, totalColumns, + totalsRowData: displayTotalsRow + ? totalsRowData + : undefined, }); } cellData = initialTableCellData.data?.data || []; @@ -539,7 +555,7 @@ function createPivotDataStore(ctx: StateManagers): PivotDataStore { config, pivotData, columnDimensionAxes?.data, - totalsRow, + totalsRowData, ); /** @@ -567,17 +583,15 @@ function createPivotDataStore(ctx: StateManagers): PivotDataStore { lastPivotColumnDef = columnDef; lastTotalColumns = totalColumns; - let assembledTableData = tableDataExpanded; - if (rowDimensionNames.length && measureNames.length) { - assembledTableData = [totalsRow, ...tableDataExpanded]; - } - return { isFetching: false, - data: assembledTableData, + data: tableDataExpanded, columnDef, assembled: true, totalColumns, + totalsRowData: displayTotalsRow + ? totalsRowData + : undefined, }; }, ).subscribe(cellSet); diff --git a/web-common/src/features/dashboards/pivot/pivot-table-transformations.ts b/web-common/src/features/dashboards/pivot/pivot-table-transformations.ts index 257f8f06e1c..93b82dc044e 100644 --- a/web-common/src/features/dashboards/pivot/pivot-table-transformations.ts +++ b/web-common/src/features/dashboards/pivot/pivot-table-transformations.ts @@ -107,6 +107,34 @@ export function reduceTableCellDataIntoRows( return tableData; } +export function getTotalsRowSkeleton( + config: PivotDataStoreConfig, + columnDimensionAxes: Record = {}, +) { + const { rowDimensionNames, measureNames } = config; + const anchorDimensionName = rowDimensionNames[0]; + + let totalsRow: PivotDataRow = {}; + if (measureNames.length) { + const totalsRowTable = reduceTableCellDataIntoRows( + config, + "", + [], + columnDimensionAxes || {}, + [], + [], + ); + + totalsRow = totalsRowTable[0] || {}; + + if (anchorDimensionName) { + totalsRow[anchorDimensionName] = "Total"; + } + } + + return totalsRow; +} + export function getTotalsRow( config: PivotDataStoreConfig, columnDimensionAxes: Record = {}, diff --git a/web-common/src/features/dashboards/pivot/types.ts b/web-common/src/features/dashboards/pivot/types.ts index 371255a8cbd..23df88df82d 100644 --- a/web-common/src/features/dashboards/pivot/types.ts +++ b/web-common/src/features/dashboards/pivot/types.ts @@ -20,6 +20,7 @@ export interface PivotDataState { assembled: boolean; totalColumns: number; // total columns excluding row and group totals columns reachedEndForRowData?: boolean; + totalsRowData?: PivotDataRow; } export type PivotDataStore = Readable;