Filter null columns from pivot table (#4046)

* initial multi time support * support for single time chip * Filter null columns * Pivot table support for multiple time dimension * Beautify labels * Move totals row to tranformations * temp hover state for readability * Pagination for column def * Page columns * sort acessorts before paging * Reduce query limit to 5000 * lint fix * Add time filters for page
rilldata · Feb 23, 2024 · 8f3fe7e · 8f3fe7e
1 parent 997fd3b
commit 8f3fe7e
Show file tree

Hide file tree

Showing 10 changed files with 484 additions and 256 deletions.
diff --git a/web-common/src/features/dashboards/pivot/PivotTable.svelte b/web-common/src/features/dashboards/pivot/PivotTable.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ArrowDown from "@rilldata/web-common/components/icons/ArrowDown.svelte";
   import { getStateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
   import { metricsExplorerStore } from "@rilldata/web-common/features/dashboards/stores/dashboard-stores";
   import {
@@ -11,7 +12,6 @@
   import type { Readable } from "svelte/motion";
   import { derived } from "svelte/store";
   import type { PivotDataRow, PivotDataStore } from "./types";
-  import ArrowDown from "@rilldata/web-common/components/icons/ArrowDown.svelte";
 
   export let pivotDataStore: PivotDataStore;
 
@@ -73,32 +73,32 @@
   // Called when the user scrolls and possibly on mount to fetch more data as the user scrolls
   const handleScroll = (containerRefElement?: HTMLDivElement | null) => {
     if (containerRefElement) {
-      // const { scrollWidth, scrollLeft, clientWidth } = containerRefElement;
-      // const rightEndDistance = scrollWidth - scrollLeft - clientWidth;
-      // const leftEndDistance = scrollLeft;
-      // // Distance threshold (in pixels) for triggering data fetch
-      // const threshold = 500;
-      // // Fetch more data when scrolling near the right end
-      // if (
-      //   rightEndDistance < threshold &&
-      //   !$pivotDataStore.isFetching &&
-      //   30 * columnPage < totalColumns
-      // ) {
-      //   metricsExplorerStore.setPivotColumnPage(
-      //     $metricsViewName,
-      //     columnPage + 1,
-      //   );
-      // }
-      // // Decrease page number when scrolling near the left end
-      // else if (
-      //   leftEndDistance < threshold &&
-      //   columnPage > 1 // Ensure we don't go below the first page
-      // ) {
-      //   metricsExplorerStore.setPivotColumnPage(
-      //     $metricsViewName,
-      //     columnPage - 1,
-      //   );
-      // }
+      //   const { scrollWidth, scrollLeft, clientWidth } = containerRefElement;
+      //   const rightEndDistance = scrollWidth - scrollLeft - clientWidth;
+      //   const leftEndDistance = scrollLeft;
+      //   // Distance threshold (in pixels) for triggering data fetch
+      //   const threshold = 500;
+      //   // Fetch more data when scrolling near the right end
+      //   if (
+      //     rightEndDistance < threshold &&
+      //     !$pivotDataStore.isFetching &&
+      //     30 * columnPage < totalColumns
+      //   ) {
+      //     metricsExplorerStore.setPivotColumnPage(
+      //       $metricsViewName,
+      //       columnPage + 1,
+      //     );
+      //   }
+      //   // Decrease page number when scrolling near the left end
+      //   // else if (
+      //   //   leftEndDistance < threshold &&
+      //   //   columnPage > 1 // Ensure we don't go below the first page
+      //   // ) {
+      //   //   metricsExplorerStore.setPivotColumnPage(
+      //   //     $metricsViewName,
+      //   //     columnPage - 1,
+      //   //   );
+      //   // }
     }
   };
 </script>
@@ -256,4 +256,9 @@
   th:last-of-type > .header-cell {
     @apply border-r-0;
   }
+
+  tr:hover,
+  tr:hover .cell {
+    @apply bg-slate-100;
+  }
 </style>
diff --git a/web-common/src/features/dashboards/pivot/pivot-column-definition.ts b/web-common/src/features/dashboards/pivot/pivot-column-definition.ts
@@ -29,15 +29,19 @@ function createColumnDefinitionForDimensions(
   colDimensions: { label: string; name: string }[],
   headers: Record<string, string[]>,
   leafData: ColumnDef<PivotDataRow>[],
+  totals: PivotDataRow,
 ): ColumnDef<PivotDataRow>[] {
   const dimensionNames = config.colDimensionNames;
   const timeConfig = config.time;
 
+  const filterColumns = Boolean(dimensionNames.length);
+
   const colValuesIndexMaps = dimensionNames?.map((colDimension) =>
     createIndexMap(headers[colDimension]),
   );
 
   const levels = dimensionNames.length;
+
   // Recursive function to create nested columns
   function createNestedColumns(
     level: number,
@@ -53,37 +57,51 @@ function createColumnDefinitionForDimensions(
       );
 
       // Base case: return leaf columns
-      return leafData.map((leaf, i) => ({
+      const leafNodes = leafData.map((leaf, i) => ({
         ...leaf,
         // Change accessor key to match the nested column structure
         accessorKey: accessors[i],
       }));
+
+      if (!filterColumns) {
+        return leafNodes;
+      }
+      return leafNodes.filter((leaf) =>
+        Object.keys(totals).includes(leaf.accessorKey),
+      );
     }
 
     // Recursive case: create nested headers
     const headerValues = headers[dimensionNames?.[level]];
-    return headerValues?.map((value) => {
-      let displayValue = value;
-      if (isTimeDimension(dimensionNames?.[level], timeConfig?.timeDimension)) {
-        const timeGrain = getTimeGrainFromDimension(dimensionNames?.[level]);
-        const dt = addZoneOffset(
-          removeLocalTimezoneOffset(new Date(value)),
-          timeConfig?.timeZone,
-        );
-        const timeFormatter = timeFormat(
-          timeGrain ? TIME_GRAIN[timeGrain].d3format : "%H:%M",
-        ) as (d: Date) => string;
-
-        displayValue = timeFormatter(dt);
-      } else if (displayValue === null) displayValue = "null";
-      return {
-        header: displayValue,
-        columns: createNestedColumns(level + 1, {
+    return headerValues
+      ?.map((value) => {
+        let displayValue = value;
+        if (
+          isTimeDimension(dimensionNames?.[level], timeConfig?.timeDimension)
+        ) {
+          const timeGrain = getTimeGrainFromDimension(dimensionNames?.[level]);
+          const dt = addZoneOffset(
+            removeLocalTimezoneOffset(new Date(value)),
+            timeConfig?.timeZone,
+          );
+          const timeFormatter = timeFormat(
+            timeGrain ? TIME_GRAIN[timeGrain].d3format : "%H:%M",
+          ) as (d: Date) => string;
+
+          displayValue = timeFormatter(dt);
+        } else if (displayValue === null) displayValue = "null";
+
+        const nestedColumns = createNestedColumns(level + 1, {
           ...colValuePair,
           [dimensionNames[level]]: value,
-        }),
-      };
-    });
+        });
+
+        return {
+          header: displayValue,
+          columns: nestedColumns,
+        };
+      })
+      .filter((column) => column.columns.length > 0);
   }
 
   // Construct column def for Row Totals
@@ -141,6 +159,7 @@ function formatRowDimensionValue(
 export function getColumnDefForPivot(
   config: PivotDataStoreConfig,
   columnDimensionAxes: Record<string, string[]> | undefined,
+  totals: PivotDataRow,
 ) {
   const IsNested = true;
 
@@ -232,6 +251,7 @@ export function getColumnDefForPivot(
     colDimensions,
     columnDimensionAxes || {},
     leafColumns,
+    totals,
   );
 
   return [...rowDefinitions, ...groupedColDef];