@opencorestack/opengridx 0.1.6 → 0.1.8

package/lib/hooks/features/usePivot.ts

@@ -0,0 +1,174 @@
+
+import { useMemo } from 'react';
+import type { GridColDef, GridRowModel } from '../../types';
+import type { GridPivotModel, GridPivotAggFn } from '../../types';
+
+function aggregate(values: number[], fn: GridPivotAggFn): number | null {
+    const nums = values.filter((v) => v != null && !isNaN(v));
+    if (nums.length === 0) return null;
+    switch (fn) {
+        case 'sum':   return nums.reduce((a, b) => a + b, 0);
+        case 'avg':   return nums.reduce((a, b) => a + b, 0) / nums.length;
+        case 'count': return nums.length;
+        case 'min':   return Math.min(...nums);
+        case 'max':   return Math.max(...nums);
+    }
+}
+
+function makeKey(row: GridRowModel, fields: string[]): string {
+    return fields.map((f) => String(row[f] ?? '')).join('\u0000');
+}
+
+export interface UsePivotReturn {
+    pivotRows:    GridRowModel[];
+    pivotColumns: GridColDef[];
+        colKeys:      string[];
+        isValid:      boolean;
+}
+
+export function usePivot(
+    rawRows:  GridRowModel[],
+    rawCols:  GridColDef[],
+    model:    GridPivotModel,
+    enabled:  boolean,
+): UsePivotReturn {
+    return useMemo<UsePivotReturn>(() => {
+        const empty: UsePivotReturn = { pivotRows: [], pivotColumns: [], colKeys: [], isValid: false };
+
+        if (!enabled) return empty;
+
+        const { rowFields, columnFields, valueFields } = model;
+        if (rowFields.length === 0 || valueFields.length === 0) return empty;
+
+        const colDefMap = new Map(rawCols.map((c) => [c.field, c]));
+
+        const colKeySet = new Set<string>();
+        for (const row of rawRows) {
+            colKeySet.add(makeKey(row, columnFields));
+        }
+        const colKeys = Array.from(colKeySet).sort();   
+
+        const outerMap = new Map<string, {
+            labelValues: Record<string, any>;
+            bucket:      Map<string, Map<string, number[]>>;
+        }>();
+
+        for (const row of rawRows) {
+            const rk = makeKey(row, rowFields);
+            if (!outerMap.has(rk)) {
+                const labelValues: Record<string, any> = {};
+                for (const f of rowFields) labelValues[f] = row[f];
+                outerMap.set(rk, { labelValues, bucket: new Map() });
+            }
+            const entry = outerMap.get(rk)!;
+
+            const ck = makeKey(row, columnFields);
+            if (!entry.bucket.has(ck)) entry.bucket.set(ck, new Map());
+            const colBucket = entry.bucket.get(ck)!;
+
+            for (const vf of valueFields) {
+                const v = Number(row[vf.field]);
+                if (!colBucket.has(vf.field)) colBucket.set(vf.field, []);
+                if (!isNaN(v)) colBucket.get(vf.field)!.push(v);
+            }
+        }
+
+        let rowIndex = 0;
+        const pivotRows: GridRowModel[] = [];
+
+        for (const [, entry] of outerMap) {
+            const pivotRow: GridRowModel = { id: rowIndex++, ...entry.labelValues };
+
+            for (const ck of colKeys) {
+                const colBucket = entry.bucket.get(ck);
+                for (const vf of valueFields) {
+                    const cellKey = columnFields.length > 0
+                        ? `${ck}\u001f${vf.field}\u001f${vf.aggFn}`
+                        : `${vf.field}\u001f${vf.aggFn}`;
+                    const values = colBucket?.get(vf.field) ?? [];
+                    pivotRow[cellKey] = values.length > 0 ? aggregate(values, vf.aggFn) : null;
+                }
+            }
+
+            pivotRows.push(pivotRow);
+        }
+
+        // ── Grand Total row ───────────────────────────────────────────────────
+        // Sum every numeric pivot cell across all pivot rows so users get
+        // column totals. The row uses the same synthetic field keys as regular
+        // pivot rows, so it renders with the correct valueFormatters.
+        // Label columns (rowFields) show 'Grand Total' in the first field, empty elsewhere.
+        const totalRow: GridRowModel = { id: '__pivot_grand_total__' };
+        for (let i = 0; i < rowFields.length; i++) {
+            totalRow[rowFields[i]] = i === 0 ? 'Grand Total' : '';
+        }
+        for (const ck of colKeys) {
+            for (const vf of valueFields) {
+                const cellKey = columnFields.length > 0
+                    ? `${ck}\u001f${vf.field}\u001f${vf.aggFn}`
+                    : `${vf.field}\u001f${vf.aggFn}`;
+                // Sum the already-aggregated cell values across all pivot rows
+                const colTotal = pivotRows.reduce((acc, r) => {
+                    const v = r[cellKey];
+                    return acc + (v != null && !isNaN(Number(v)) ? Number(v) : 0);
+                }, 0);
+                totalRow[cellKey] = colTotal;
+            }
+        }
+        pivotRows.push(totalRow);
+
+
+        const pivotColumns: GridColDef[] = [];
+
+        for (const f of rowFields) {
+            const orig = colDefMap.get(f);
+            pivotColumns.push({
+                field:      f,
+                headerName: orig?.headerName ?? f,
+                width:      orig?.width as number ?? 140,
+                sortable:   true,
+            });
+        }
+
+        for (const ck of colKeys) {
+
+            const colLabel = columnFields.length > 0
+                ? ck.split('\u0000').map((v, i) => {
+                    const def = colDefMap.get(columnFields[i]);
+                    return def?.headerName ? `${def.headerName}: ${v}` : v;
+                  }).join(' / ')
+                : '';
+
+            for (const vf of valueFields) {
+                const orig       = colDefMap.get(vf.field);
+                const cellKey    = columnFields.length > 0
+                    ? `${ck}\u001f${vf.field}\u001f${vf.aggFn}`
+                    : `${vf.field}\u001f${vf.aggFn}`;
+                const labelBase  = vf.headerName ?? orig?.headerName ?? vf.field;
+                const headerName = colLabel
+                    ? `${colLabel} — ${labelBase} (${vf.aggFn})`
+                    : `${labelBase} (${vf.aggFn})`;
+
+                pivotColumns.push({
+                    field:       cellKey,
+                    headerName,
+                    width:       140,
+                    type:        'number',
+                    align:       'right',
+                    headerAlign: 'right',
+                    sortable:    true,
+                    valueFormatter: ({ value }) => {
+                        if (value == null) return '—';
+                        const n = Number(value);
+                        if (vf.aggFn === 'avg') return n.toFixed(2);
+                        if (vf.aggFn === 'count') return n.toLocaleString();
+                        if (orig?.valueFormatter) return orig.valueFormatter({ value, row: {} as any, field: vf.field });
+                        return n.toLocaleString();
+                    },
+                });
+            }
+        }
+
+        return { pivotRows, pivotColumns, colKeys, isValid: true };
+    }, [rawRows, rawCols, model, enabled]);
+}

package/lib/hooks/useColumnReorder.ts

@@ -0,0 +1,114 @@
+
+import { useState, useCallback, useRef } from 'react';
+import type { GridColDef, GridRowModel, GridColumnOrderChangeParams } from '../types';
+
+export interface UseColumnReorderProps<R extends GridRowModel = GridRowModel> {
+  columns: GridColDef<R>[];
+  onColumnOrderChange?: (params: GridColumnOrderChangeParams) => void;
+  disableColumnReorder?: boolean;
+}
+
+export interface UseColumnReorderReturn {
+  draggedColumn: string | null;
+  dragOverColumn: string | null;
+  onDragStart: ((field: string) => (event: React.DragEvent) => void) | undefined;
+  onDragOver: ((field: string) => (event: React.DragEvent) => void) | undefined;
+  onDragEnd: (() => void) | undefined;
+  onDrop: ((targetField: string) => (event: React.DragEvent) => void) | undefined;
+}
+
+export function useColumnReorder<R extends GridRowModel = GridRowModel>(
+  props: UseColumnReorderProps<R>
+): UseColumnReorderReturn {
+  const { columns, onColumnOrderChange, disableColumnReorder = false } = props;
+
+  const [draggedColumn, setDraggedColumn] = useState<string | null>(null);
+  const [dragOverColumn, setDragOverColumn] = useState<string | null>(null);
+  const draggedIndexRef = useRef<number>(-1);
+
+  const handleDragStart = useCallback(
+    (field: string) => (event: React.DragEvent) => {
+      if (disableColumnReorder) return;
+
+      const columnIndex = columns.findIndex(col => col.field === field);
+      const column = columns[columnIndex];
+
+      if (column?.pinnable === false) {
+        event.preventDefault();
+        return;
+      }
+
+      setDraggedColumn(field);
+      draggedIndexRef.current = columnIndex;
+
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = 'move';
+        event.dataTransfer.setData('text/plain', field);
+      }
+    },
+    [columns, disableColumnReorder]
+  );
+
+  const handleDragOver = useCallback(
+    (field: string) => (event: React.DragEvent) => {
+      if (disableColumnReorder || !draggedColumn) return;
+
+      event.preventDefault(); 
+      event.dataTransfer.dropEffect = 'move';
+
+      setDragOverColumn(field);
+    },
+    [draggedColumn, disableColumnReorder]
+  );
+
+  const handleDrop = useCallback(
+    (targetField: string) => (event: React.DragEvent) => {
+      event.preventDefault();
+
+      if (disableColumnReorder || !draggedColumn || draggedColumn === targetField) {
+        setDraggedColumn(null);
+        setDragOverColumn(null);
+        return;
+      }
+
+      const oldIndex = columns.findIndex(col => col.field === draggedColumn);
+      const targetIndex = columns.findIndex(col => col.field === targetField);
+
+      if (oldIndex === -1 || targetIndex === -1) {
+        setDraggedColumn(null);
+        setDragOverColumn(null);
+        return;
+      }
+
+      const column = columns[oldIndex];
+
+      if (onColumnOrderChange) {
+        onColumnOrderChange({
+          column: column as any,
+          oldIndex,
+          targetIndex,
+        });
+      }
+
+      setDraggedColumn(null);
+      setDragOverColumn(null);
+      draggedIndexRef.current = -1;
+    },
+    [columns, draggedColumn, disableColumnReorder, onColumnOrderChange]
+  );
+
+  const handleDragEnd = useCallback(() => {
+    setDraggedColumn(null);
+    setDragOverColumn(null);
+    draggedIndexRef.current = -1;
+  }, []);
+
+  return {
+    draggedColumn,
+    dragOverColumn,
+    onDragStart: disableColumnReorder ? undefined : handleDragStart,
+    onDragOver: disableColumnReorder ? undefined : handleDragOver,
+    onDragEnd: disableColumnReorder ? undefined : handleDragEnd,
+    onDrop: disableColumnReorder ? undefined : handleDrop,
+  };
+}

package/lib/hooks/useRowGrouping.ts

@@ -0,0 +1,302 @@
+import { useState, useMemo, useEffect, useCallback } from 'react';
+import type { 
+    GridRowModel, 
+    GridRowId, 
+    GridRowGroupingModel, 
+    GridAggregationModel, 
+    GridTreeNode,
+    GridFilterModel,
+    GridSortItem
+} from '../types';
+import { isRowMatchingFilter } from '../utils/filtering';
+import { compareValues } from '../utils/sorting';
+
+export interface UseRowGroupingParams<R extends GridRowModel> {
+    rows: R[];
+    getRowId: (row: R) => GridRowId;
+    rowGroupingModel?: GridRowGroupingModel;
+    aggregationModel?: GridAggregationModel;
+    defaultGroupingExpansionDepth?: number;
+    filterModel?: GridFilterModel;
+    sortModel?: GridSortItem[];
+    getAggregationPosition?: (groupNode: GridTreeNode | null) => 'inline' | 'footer' | null;
+}
+
+const defaultGetAggregationPosition = (groupNode: GridTreeNode | null): 'inline' | 'footer' | null => {
+
+    return groupNode?.depth === -1 ? 'footer' : 'inline';
+};
+
+export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingParams<R>) {
+    const { 
+        rows, 
+        getRowId, 
+        rowGroupingModel = [], 
+        aggregationModel = {}, 
+        defaultGroupingExpansionDepth = 0,
+        filterModel,
+        sortModel,
+        getAggregationPosition = defaultGetAggregationPosition
+    } = params;
+
+    const [expandedGroupIds, setExpandedGroupIds] = useState<Set<GridRowId>>(new Set());
+
+    const { treeNodes, rootIds, groupingRows } = useMemo(() => {
+        const treeNodes = new Map<GridRowId, GridTreeNode>();
+        const groupingRows = new Map<GridRowId, R>();
+        const rootIds: GridRowId[] = [];
+
+        if (rowGroupingModel.length === 0) {
+            return { treeNodes, rootIds, groupingRows };
+        }
+
+        const getGroupId = (field: string, value: any, parentId: GridRowId | null) => {
+            return `auto-group-${field}-${value}-${parentId || 'root'}`;
+        };
+
+        const groupRows = (
+            currentRows: R[], 
+            depth: number, 
+            parentId: GridRowId | null
+        ) => {
+            if (depth >= rowGroupingModel.length) {
+
+                return currentRows.map(row => {
+                    const id = getRowId(row);
+                    treeNodes.set(id, {
+                        id,
+                        parentId,
+                        depth,
+                        groupingKey: '',
+                        isExpanded: false
+                    });
+                    return id;
+                });
+            }
+
+            const field = rowGroupingModel[depth];
+            const groups = new Map<any, R[]>();
+
+            // Group current rows by value of the current field
+            currentRows.forEach(row => {
+                const value = row[field];
+                const key = String(value); // reliable map key
+                if (!groups.has(key)) {
+                    groups.set(key, []);
+                }
+                groups.get(key)!.push(row);
+            });
+
+            const groupIds: GridRowId[] = [];
+
+            // Create group rows
+            groups.forEach((groupRowsList, key) => {
+                // Use the raw value from the first row of the group for the groupingValue
+                const firstRow = groupRowsList[0];
+                const rawValue = firstRow[field];
+
+                const groupId = getGroupId(field, key, parentId);
+                groupIds.push(groupId);
+
+                // Calculate Aggregations for this group
+                const aggregatedValues: Record<string, any> = {};
+                if (aggregationModel) {
+                    Object.entries(aggregationModel).forEach(([aggField, aggType]) => {
+                        const values = groupRowsList.map(r => r[aggField]);
+                        if (aggType === 'sum') {
+                            aggregatedValues[aggField] = values.reduce((a, b) => (Number(a) || 0) + (Number(b) || 0), 0);
+                        } else if (aggType === 'min') {
+                            aggregatedValues[aggField] = Math.min(...values.map(v => Number(v) || 0));
+                        } else if (aggType === 'max') {
+                            aggregatedValues[aggField] = Math.max(...values.map(v => Number(v) || 0));
+                        } else if (aggType === 'avg') {
+                            const sum = values.reduce((a, b) => (Number(a) || 0) + (Number(b) || 0), 0);
+                            aggregatedValues[aggField] = values.length ? sum / values.length : 0;
+                        } else if (aggType === 'count') {
+                            aggregatedValues[aggField] = values.length;
+                        }
+                    });
+                }
+
+                const groupRow: any = {
+                    [field]: rawValue, 
+                    ...aggregatedValues, 
+                    id: groupId 
+                };
+
+                groupingRows.set(groupId, groupRow);
+
+                const treeNode: GridTreeNode = {
+                    id: groupId,
+                    parentId,
+                    depth,
+                    groupingKey: key,
+                    groupingField: field,
+                    groupingValue: rawValue,
+                    aggregatedValues,
+                    isExpanded: false,
+                    children: [], 
+                    label: `${field}: ${String(rawValue)}` 
+                };
+
+                treeNode.aggregationPosition = getAggregationPosition(treeNode);
+
+                treeNodes.set(groupId, treeNode);
+
+                const childrenIds = groupRows(groupRowsList, depth + 1, groupId);
+                treeNodes.get(groupId)!.children = childrenIds;
+
+                const descendantCount = groupRowsList.length;
+                treeNodes.get(groupId)!.descendantCount = descendantCount;
+            });
+
+            return groupIds;
+        };
+
+        const topLevelIds = groupRows(rows, 0, null);
+        rootIds.push(...topLevelIds);
+
+        return { treeNodes, rootIds, groupingRows };
+
+    }, [rows, rowGroupingModel, aggregationModel, getRowId, getAggregationPosition]);
+
+    useEffect(() => {
+        if (defaultGroupingExpansionDepth === -1) {
+
+            const allGroupIds = new Set<GridRowId>();
+            treeNodes.forEach((node, id) => {
+                if (node.children && node.children.length > 0) {
+                    allGroupIds.add(id);
+                }
+            });
+            setExpandedGroupIds(allGroupIds);
+        } else if (defaultGroupingExpansionDepth > 0) {
+            const depthIds = new Set<GridRowId>();
+            treeNodes.forEach((node, id) => {
+                if (node.depth < defaultGroupingExpansionDepth && node.children && node.children.length > 0) {
+                    depthIds.add(id);
+                }
+            });
+            setExpandedGroupIds(depthIds);
+        } else {
+
+            setExpandedGroupIds(new Set());
+        }
+
+    }, [rowGroupingModel, defaultGroupingExpansionDepth]);
+
+    const toggleExpansion = useCallback((id: GridRowId) => {
+        setExpandedGroupIds(prev => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            } else {
+                next.add(id);
+            }
+            return next;
+        });
+    }, []);
+
+    const isGroupExpanded = useCallback((id: GridRowId) => {
+        return expandedGroupIds.has(id);
+    }, [expandedGroupIds]);
+
+    const getVisibleRows = useCallback(() => {
+        if (rowGroupingModel.length === 0) return null;
+
+        const result: R[] = [];
+        const seenIds = new Set<GridRowId>();
+
+        const rowLookup = new Map<GridRowId, R>();
+        rows.forEach(r => rowLookup.set(getRowId(r), r));
+
+        const doesNodeMatchFilter = (nodeId: GridRowId): boolean => {
+            const node = treeNodes.get(nodeId);
+            if (!node) return false;
+
+            if (!node.children || node.children.length === 0) {
+
+                const row = rowLookup.get(nodeId);
+                if (!row) return false;
+
+                if (filterModel) {
+                    if (!isRowMatchingFilter(row, filterModel)) return false;
+                }
+                return true;
+            }
+
+            return node.children.some(childId => doesNodeMatchFilter(childId));
+        };
+
+        const traverse = (ids: GridRowId[]) => {
+
+            let visibleIds = ids;
+            if (filterModel) {
+                visibleIds = ids.filter(doesNodeMatchFilter);
+            }
+
+            if (sortModel && sortModel.length > 0) {
+                visibleIds.sort((aId, bId) => {
+                    const rowA = groupingRows.get(aId) || rowLookup.get(aId);
+                    const rowB = groupingRows.get(bId) || rowLookup.get(bId);
+
+                    if (!rowA || !rowB) return 0;
+
+                    for (const sortItem of sortModel) {
+                        const valA = (rowA as any)[sortItem.field];
+                        const valB = (rowB as any)[sortItem.field];
+                        const compareResult = compareValues(valA, valB, sortItem.sort);
+                        if (compareResult !== 0) return compareResult;
+                    }
+                    return 0;
+                });
+            }
+
+            visibleIds.forEach(id => {
+                if (seenIds.has(id)) return; 
+
+                const node = treeNodes.get(id);
+                const isGroup = node?.children && node.children.length > 0;
+
+                const row = isGroup ? groupingRows.get(id) : rowLookup.get(id);
+
+                if (row && node) {
+                     seenIds.add(id);
+
+                     const enhancedRow = {
+                        ...row,
+                        _treeDepth: node.depth,
+                        _isExpanded: expandedGroupIds.has(id),
+                        _hasChildren: isGroup,
+                        _groupingField: node.groupingField,
+                        _groupingValue: node.groupingValue,
+                        _descendantCount: node.descendantCount
+                    };
+                    result.push(enhancedRow);
+
+                    if (isExpandedGroupIds.has(id) && isGroup) {
+                        traverse(node.children!);
+                    }
+                }
+            });
+        };
+
+        const isExpandedGroupIds = expandedGroupIds; 
+
+        traverse(rootIds);
+
+        return result;
+
+    }, [rows, getRowId, treeNodes, rootIds, groupingRows, filterModel, sortModel, expandedGroupIds]);
+
+    const getNode = useCallback((id: GridRowId) => treeNodes.get(id), [treeNodes]);
+
+    return useMemo(() => ({
+        treeNodes,
+        groupingRows,
+        toggleExpansion,
+        isGroupExpanded,
+        getVisibleRows,
+        getNode
+    }), [treeNodes, groupingRows, toggleExpansion, isGroupExpanded, getVisibleRows, getNode]);
+}

package/lib/hooks/useRowReorder.ts

@@ -0,0 +1,83 @@
+import { useState, useCallback } from 'react';
+import type { GridRowId, GridRowModel, GridRowOrderChangeParams } from '../types';
+
+export interface UseRowReorderProps<R extends GridRowModel = GridRowModel> {
+    onRowOrderChange?: (params: GridRowOrderChangeParams<R>) => void;
+    rows: R[];
+    getRowId?: (row: R) => GridRowId;
+    rowReordering?: boolean;
+}
+
+export interface UseRowReorderReturn {
+    draggedRowId: GridRowId | null;
+    dragOverRowId: GridRowId | null;
+    onDragStart: ((id: GridRowId) => (event: React.DragEvent) => void) | undefined;
+    onDragOver: ((id: GridRowId) => (event: React.DragEvent) => void) | undefined;
+    onDragEnd: (() => void) | undefined;
+    onDrop: ((targetId: GridRowId) => (event: React.DragEvent) => void) | undefined;
+}
+
+export function useRowReorder<R extends GridRowModel = GridRowModel>(
+    props: UseRowReorderProps<R>
+): UseRowReorderReturn {
+    const { onRowOrderChange, rows, getRowId, rowReordering = false } = props;
+    const [draggedRowId, setDraggedRowId] = useState<GridRowId | null>(null);
+    const [dragOverRowId, setDragOverRowId] = useState<GridRowId | null>(null);
+
+    const getRowIdInternal = useCallback((row: R) => {
+        return getRowId ? getRowId(row) : row.id;
+    }, [getRowId]);
+
+    const handleDragStart = useCallback((id: GridRowId) => (event: React.DragEvent) => {
+        if (!rowReordering) return;
+        setDraggedRowId(id);
+        event.dataTransfer.effectAllowed = 'move';
+
+    }, [rowReordering]);
+
+    const handleDragOver = useCallback((id: GridRowId) => (event: React.DragEvent) => {
+        if (!rowReordering || !draggedRowId) return;
+        event.preventDefault(); 
+        event.dataTransfer.dropEffect = 'move';
+
+        if (dragOverRowId !== id) {
+            setDragOverRowId(id);
+        }
+    }, [rowReordering, draggedRowId, dragOverRowId]);
+
+    const handleDragEnd = useCallback(() => {
+        setDraggedRowId(null);
+        setDragOverRowId(null);
+    }, []);
+
+    const handleDrop = useCallback((targetId: GridRowId) => (event: React.DragEvent) => {
+        event.preventDefault();
+
+        if (!draggedRowId || !onRowOrderChange) {
+             handleDragEnd();
+             return;
+        }
+
+        const oldIndex = rows.findIndex(r => getRowIdInternal(r) === draggedRowId);
+        const targetIndex = rows.findIndex(r => getRowIdInternal(r) === targetId);
+
+        if (oldIndex !== -1 && targetIndex !== -1 && oldIndex !== targetIndex) {
+             onRowOrderChange({
+                 row: rows[oldIndex],
+                 oldIndex,
+                 targetIndex
+             });
+        }
+
+        handleDragEnd();
+    }, [draggedRowId, onRowOrderChange, rows, getRowIdInternal, handleDragEnd]);
+
+    return {
+        draggedRowId,
+        dragOverRowId,
+        onDragStart: rowReordering ? handleDragStart : undefined,
+        onDragOver: rowReordering ? handleDragOver : undefined,
+        onDragEnd: rowReordering ? handleDragEnd : undefined,
+        onDrop: rowReordering ? handleDrop : undefined,
+    };
+}