@smallwebco/tinypivot-react 1.0.27 → 1.0.29

package/dist/index.d.cts

@@ -98,6 +98,7 @@ interface PivotSkeletonProps {
     rowFields: string[];
     columnFields: string[];
     valueFields: PivotValueField[];
+    calculatedFields?: CalculatedField[];
     isConfigured: boolean;
     draggingField: string | null;
     pivotResult: PivotResult | null;
@@ -115,7 +116,7 @@ interface PivotSkeletonProps {
     onReorderRowFields: (fields: string[]) => void;
     onReorderColumnFields: (fields: string[]) => void;
 }
-declare function PivotSkeleton({ rowFields, columnFields, valueFields, isConfigured, draggingField, pivotResult, fontSize, activeFilters, totalRowCount, filteredRowCount, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField, onReorderRowFields, onReorderColumnFields, }: PivotSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function PivotSkeleton({ rowFields, columnFields, valueFields, calculatedFields, isConfigured, draggingField, pivotResult, fontSize, activeFilters, totalRowCount, filteredRowCount, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField, onReorderRowFields, onReorderColumnFields, }: PivotSkeletonProps): react_jsx_runtime.JSX.Element;
 
 interface ExcelGridOptions<T> {
     data: T[];

package/dist/index.d.ts

@@ -98,6 +98,7 @@ interface PivotSkeletonProps {
     rowFields: string[];
     columnFields: string[];
     valueFields: PivotValueField[];
+    calculatedFields?: CalculatedField[];
     isConfigured: boolean;
     draggingField: string | null;
     pivotResult: PivotResult | null;
@@ -115,7 +116,7 @@ interface PivotSkeletonProps {
     onReorderRowFields: (fields: string[]) => void;
     onReorderColumnFields: (fields: string[]) => void;
 }
-declare function PivotSkeleton({ rowFields, columnFields, valueFields, isConfigured, draggingField, pivotResult, fontSize, activeFilters, totalRowCount, filteredRowCount, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField, onReorderRowFields, onReorderColumnFields, }: PivotSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function PivotSkeleton({ rowFields, columnFields, valueFields, calculatedFields, isConfigured, draggingField, pivotResult, fontSize, activeFilters, totalRowCount, filteredRowCount, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField, onReorderRowFields, onReorderColumnFields, }: PivotSkeletonProps): react_jsx_runtime.JSX.Element;
 
 interface ExcelGridOptions<T> {
     data: T[];

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/DataGrid.tsx
-import { useState as useState9, useMemo as useMemo9, useCallback as useCallback9, useEffect as useEffect5, useRef as useRef2 } from "react";
+import { useState as useState9, useMemo as useMemo9, useCallback as useCallback9, useEffect as useEffect6, useRef as useRef2 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/hooks/useExcelGrid.ts
@@ -444,9 +444,7 @@ function usePivotTable(data) {
     }
   }, [availableFields, requirePro]);
   const addCalculatedField = useCallback3((field) => {
-    console.log("[usePivotTable] addCalculatedField called with:", field);
     setCalculatedFields((prev) => {
-      console.log("[usePivotTable] Previous calculatedFields:", prev);
       const existing = prev.findIndex((f) => f.id === field.id);
       let updated;
       if (existing >= 0) {
@@ -454,7 +452,6 @@ function usePivotTable(data) {
       } else {
         updated = [...prev, field];
       }
-      console.log("[usePivotTable] Updated calculatedFields:", updated);
       saveCalculatedFields(updated);
       return updated;
     });
@@ -1029,15 +1026,11 @@ function CalculatedFieldModal({
     });
   }, []);
   const handleSave = useCallback6(() => {
-    console.log("[CalculatedFieldModal] handleSave called");
-    console.log("[CalculatedFieldModal] name:", name, "formula:", formula);
-    console.log("[CalculatedFieldModal] availableFields:", availableFields);
     if (!name.trim()) {
       setError("Name is required");
       return;
     }
     const validationResult = validateSimpleFormula(formula, availableFields);
-    console.log("[CalculatedFieldModal] validationResult:", validationResult);
     if (validationResult) {
       setError(validationResult);
       return;
@@ -1049,7 +1042,6 @@ function CalculatedFieldModal({
       formatAs,
       decimals
     };
-    console.log("[CalculatedFieldModal] Calling onSave with:", field);
     onSave(field);
     onClose();
   }, [name, formula, formatAs, decimals, existingField, availableFields, onSave, onClose]);
@@ -1210,9 +1202,8 @@ function PivotConfig({
     [availableFields]
   );
   const calculatedFieldsAsStats = useMemo7(() => {
-    console.log("[PivotConfig] calculatedFields prop:", calculatedFields);
     if (!calculatedFields) return [];
-    const stats = calculatedFields.map((calc) => ({
+    return calculatedFields.map((calc) => ({
       field: `calc:${calc.id}`,
       type: "number",
       uniqueCount: 0,
@@ -1222,17 +1213,11 @@ function PivotConfig({
       calcName: calc.name,
       calcFormula: calc.formula
     }));
-    console.log("[PivotConfig] calculatedFieldsAsStats:", stats);
-    return stats;
   }, [calculatedFields]);
-  const allAvailableFields = useMemo7(() => {
-    const all = [
-      ...availableFields.map((f) => ({ ...f, isCalculated: false })),
-      ...calculatedFieldsAsStats
-    ];
-    console.log("[PivotConfig] allAvailableFields:", all.length, "items, calc fields:", calculatedFieldsAsStats.length);
-    return all;
-  }, [availableFields, calculatedFieldsAsStats]);
+  const allAvailableFields = useMemo7(() => [
+    ...availableFields.map((f) => ({ ...f, isCalculated: false })),
+    ...calculatedFieldsAsStats
+  ], [availableFields, calculatedFieldsAsStats]);
   const assignedFields = useMemo7(() => {
     const rowSet = new Set(rowFields);
     const colSet = new Set(columnFields);
@@ -1314,14 +1299,9 @@ function PivotConfig({
     setShowCalcModal(true);
   }, []);
   const handleSaveCalcField = useCallback7((field) => {
-    console.log("[PivotConfig] handleSaveCalcField called with:", field);
-    console.log("[PivotConfig] editingCalcField:", editingCalcField);
-    console.log("[PivotConfig] onAddCalculatedField exists:", !!onAddCalculatedField);
     if (editingCalcField && onUpdateCalculatedField) {
-      console.log("[PivotConfig] Calling onUpdateCalculatedField");
       onUpdateCalculatedField(field);
     } else if (onAddCalculatedField) {
-      console.log("[PivotConfig] Calling onAddCalculatedField");
       onAddCalculatedField(field);
     }
     setShowCalcModal(false);
@@ -1566,13 +1546,14 @@ function PivotConfig({
 }
 
 // src/components/PivotSkeleton.tsx
-import { useState as useState8, useMemo as useMemo8, useCallback as useCallback8 } from "react";
+import { useState as useState8, useMemo as useMemo8, useCallback as useCallback8, useEffect as useEffect5 } from "react";
 import { getAggregationLabel as getAggregationLabel2, getAggregationSymbol as getAggregationSymbol2 } from "@smallwebco/tinypivot-core";
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function PivotSkeleton({
   rowFields,
   columnFields,
   valueFields,
+  calculatedFields,
   isConfigured,
   draggingField,
   pivotResult,
@@ -1590,6 +1571,17 @@ function PivotSkeleton({
   onReorderColumnFields
 }) {
   const { showWatermark, canUsePivot, isDemo } = useLicense();
+  const getValueFieldDisplayName = useCallback8((field) => {
+    if (field.startsWith("calc:")) {
+      const calcId = field.replace("calc:", "");
+      const calcField = calculatedFields?.find((c) => c.id === calcId);
+      return calcField?.name || field;
+    }
+    return field;
+  }, [calculatedFields]);
+  const isCalculatedField = useCallback8((field) => {
+    return field.startsWith("calc:");
+  }, []);
   const [dragOverArea, setDragOverArea] = useState8(null);
   const [reorderDragSource, setReorderDragSource] = useState8(null);
   const [reorderDropTarget, setReorderDropTarget] = useState8(null);
@@ -1603,6 +1595,58 @@ function PivotSkeleton({
       setSortDirection("asc");
     }
   }, [sortTarget]);
+  const [selectedCell, setSelectedCell] = useState8(null);
+  const [selectionStart, setSelectionStart] = useState8(null);
+  const [selectionEnd, setSelectionEnd] = useState8(null);
+  const [isSelecting, setIsSelecting] = useState8(false);
+  const [showCopyToast, setShowCopyToast] = useState8(false);
+  const [copyToastMessage, setCopyToastMessage] = useState8("");
+  const selectionBounds = useMemo8(() => {
+    if (!selectionStart || !selectionEnd) return null;
+    return {
+      minRow: Math.min(selectionStart.row, selectionEnd.row),
+      maxRow: Math.max(selectionStart.row, selectionEnd.row),
+      minCol: Math.min(selectionStart.col, selectionEnd.col),
+      maxCol: Math.max(selectionStart.col, selectionEnd.col)
+    };
+  }, [selectionStart, selectionEnd]);
+  const handleCellMouseDown = useCallback8(
+    (rowIndex, colIndex, event) => {
+      event.preventDefault();
+      if (event.shiftKey && selectedCell) {
+        setSelectionEnd({ row: rowIndex, col: colIndex });
+      } else {
+        setSelectedCell({ row: rowIndex, col: colIndex });
+        setSelectionStart({ row: rowIndex, col: colIndex });
+        setSelectionEnd({ row: rowIndex, col: colIndex });
+        setIsSelecting(true);
+      }
+    },
+    [selectedCell]
+  );
+  const handleCellMouseEnter = useCallback8(
+    (rowIndex, colIndex) => {
+      if (isSelecting) {
+        setSelectionEnd({ row: rowIndex, col: colIndex });
+      }
+    },
+    [isSelecting]
+  );
+  const isCellSelected = useCallback8(
+    (rowIndex, colIndex) => {
+      if (!selectionBounds) {
+        return selectedCell?.row === rowIndex && selectedCell?.col === colIndex;
+      }
+      const { minRow, maxRow, minCol, maxCol } = selectionBounds;
+      return rowIndex >= minRow && rowIndex <= maxRow && colIndex >= minCol && colIndex <= maxCol;
+    },
+    [selectionBounds, selectedCell]
+  );
+  useEffect5(() => {
+    const handleMouseUp = () => setIsSelecting(false);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => document.removeEventListener("mouseup", handleMouseUp);
+  }, []);
   const sortedRowIndices = useMemo8(() => {
     if (!pivotResult) return [];
     const indices = pivotResult.rowHeaders.map((_, i) => i);
@@ -1627,11 +1671,83 @@ function PivotSkeleton({
     });
     return indices;
   }, [pivotResult, sortTarget, sortDirection]);
+  const copySelectionToClipboard = useCallback8(() => {
+    if (!selectionBounds || !pivotResult) return;
+    const { minRow, maxRow, minCol, maxCol } = selectionBounds;
+    const lines = [];
+    for (let r = minRow; r <= maxRow; r++) {
+      const sortedIdx = sortedRowIndices[r];
+      if (sortedIdx === void 0) continue;
+      const rowValues = [];
+      for (let c = minCol; c <= maxCol; c++) {
+        const cell = pivotResult.data[sortedIdx]?.[c];
+        rowValues.push(cell?.formattedValue ?? "");
+      }
+      lines.push(rowValues.join("	"));
+    }
+    const text = lines.join("\n");
+    navigator.clipboard.writeText(text).then(() => {
+      const cellCount = (maxRow - minRow + 1) * (maxCol - minCol + 1);
+      setCopyToastMessage(`Copied ${cellCount} cell${cellCount > 1 ? "s" : ""}`);
+      setShowCopyToast(true);
+      setTimeout(() => setShowCopyToast(false), 2e3);
+    }).catch((err) => {
+      console.error("Copy failed:", err);
+    });
+  }, [selectionBounds, pivotResult, sortedRowIndices]);
+  useEffect5(() => {
+    const handleKeydown = (event) => {
+      if (!selectionBounds) return;
+      if ((event.ctrlKey || event.metaKey) && event.key === "c") {
+        event.preventDefault();
+        copySelectionToClipboard();
+        return;
+      }
+      if (event.key === "Escape") {
+        setSelectedCell(null);
+        setSelectionStart(null);
+        setSelectionEnd(null);
+      }
+    };
+    document.addEventListener("keydown", handleKeydown);
+    return () => document.removeEventListener("keydown", handleKeydown);
+  }, [selectionBounds, copySelectionToClipboard]);
+  const selectionStats = useMemo8(() => {
+    if (!selectionBounds || !pivotResult) return null;
+    const { minRow, maxRow, minCol, maxCol } = selectionBounds;
+    const values = [];
+    let count = 0;
+    for (let r = minRow; r <= maxRow; r++) {
+      const sortedIdx = sortedRowIndices[r];
+      if (sortedIdx === void 0) continue;
+      for (let c = minCol; c <= maxCol; c++) {
+        const cell = pivotResult.data[sortedIdx]?.[c];
+        count++;
+        if (cell?.value !== null && cell?.value !== void 0 && typeof cell.value === "number") {
+          values.push(cell.value);
+        }
+      }
+    }
+    if (count <= 1) return null;
+    const sum = values.reduce((a, b) => a + b, 0);
+    const avg = values.length > 0 ? sum / values.length : 0;
+    return {
+      count,
+      numericCount: values.length,
+      sum,
+      avg
+    };
+  }, [selectionBounds, pivotResult, sortedRowIndices]);
+  const formatStatValue = useCallback8((val) => {
+    if (Math.abs(val) >= 1e6) return `${(val / 1e6).toFixed(2)}M`;
+    if (Math.abs(val) >= 1e3) return `${(val / 1e3).toFixed(2)}K`;
+    return val.toFixed(2);
+  }, []);
   const columnHeaderCells = useMemo8(() => {
     if (!pivotResult || pivotResult.headers.length === 0) {
       return [
         valueFields.map((vf) => ({
-          label: `${vf.field} (${getAggregationLabel2(vf.aggregation)})`,
+          label: `${getValueFieldDisplayName(vf.field)} (${getAggregationLabel2(vf.aggregation)})`,
           colspan: 1
         }))
       ];
@@ -1783,6 +1899,10 @@ function PivotSkeleton({
     {
       className: `vpg-pivot-skeleton vpg-font-${currentFontSize} ${draggingField ? "vpg-is-dragging" : ""}`,
       children: [
+        showCopyToast && /* @__PURE__ */ jsxs4("div", { className: "vpg-toast", children: [
+          /* @__PURE__ */ jsx4("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+          copyToastMessage
+        ] }),
         /* @__PURE__ */ jsxs4("div", { className: "vpg-skeleton-header", children: [
           /* @__PURE__ */ jsxs4("div", { className: "vpg-skeleton-title", children: [
             /* @__PURE__ */ jsx4("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4(
@@ -1999,10 +2119,10 @@ function PivotSkeleton({
                     valueFields.map((vf) => /* @__PURE__ */ jsxs4(
                       "div",
                       {
-                        className: "vpg-mini-chip vpg-value-chip",
+                        className: `vpg-mini-chip vpg-value-chip${isCalculatedField(vf.field) ? " vpg-calc-chip" : ""}`,
                         children: [
-                          /* @__PURE__ */ jsx4("span", { className: "vpg-agg-symbol", children: getAggregationSymbol2(vf.aggregation) }),
-                          /* @__PURE__ */ jsx4("span", { className: "vpg-mini-name", children: vf.field }),
+                          /* @__PURE__ */ jsx4("span", { className: "vpg-agg-symbol", children: isCalculatedField(vf.field) ? "\u0192" : getAggregationSymbol2(vf.aggregation) }),
+                          /* @__PURE__ */ jsx4("span", { className: "vpg-mini-name", children: getValueFieldDisplayName(vf.field) }),
                           /* @__PURE__ */ jsx4(
                             "button",
                             {
@@ -2084,14 +2204,19 @@ function PivotSkeleton({
             /* @__PURE__ */ jsxs4("tbody", { children: [
               sortedRowIndices.map((sortedIdx) => /* @__PURE__ */ jsxs4("tr", { className: "vpg-data-row", children: [
                 /* @__PURE__ */ jsx4("th", { className: "vpg-row-header-cell", children: pivotResult.rowHeaders[sortedIdx].map((val, idx) => /* @__PURE__ */ jsx4("span", { className: "vpg-row-value", children: val }, idx)) }),
-                pivotResult.data[sortedIdx].map((cell, colIdx) => /* @__PURE__ */ jsx4(
-                  "td",
-                  {
-                    className: `vpg-data-cell ${cell.value === null ? "vpg-is-null" : ""}`,
-                    children: cell.formattedValue
-                  },
-                  colIdx
-                )),
+                pivotResult.data[sortedIdx].map((cell, colIdx) => {
+                  const displayRowIdx = sortedRowIndices.indexOf(sortedIdx);
+                  return /* @__PURE__ */ jsx4(
+                    "td",
+                    {
+                      className: `vpg-data-cell ${isCellSelected(displayRowIdx, colIdx) ? "selected" : ""} ${cell.value === null ? "vpg-is-null" : ""}`,
+                      onMouseDown: (e) => handleCellMouseDown(displayRowIdx, colIdx, e),
+                      onMouseEnter: () => handleCellMouseEnter(displayRowIdx, colIdx),
+                      children: cell.formattedValue
+                    },
+                    colIdx
+                  );
+                }),
                 pivotResult.rowTotals[sortedIdx] && /* @__PURE__ */ jsx4("td", { className: "vpg-data-cell vpg-total-cell", children: pivotResult.rowTotals[sortedIdx].formattedValue })
               ] }, sortedIdx)),
               pivotResult.columnTotals.length > 0 && /* @__PURE__ */ jsxs4("tr", { className: "vpg-totals-row", children: [
@@ -2101,12 +2226,32 @@ function PivotSkeleton({
               ] })
             ] })
           ] }) }),
-          isConfigured && pivotResult && /* @__PURE__ */ jsx4("div", { className: "vpg-skeleton-footer", children: /* @__PURE__ */ jsxs4("span", { children: [
-            pivotResult.rowHeaders.length,
-            " rows \xD7 ",
-            pivotResult.data[0]?.length || 0,
-            " columns"
-          ] }) })
+          isConfigured && pivotResult && /* @__PURE__ */ jsxs4("div", { className: "vpg-skeleton-footer", children: [
+            /* @__PURE__ */ jsxs4("span", { className: "vpg-footer-info", children: [
+              pivotResult.rowHeaders.length,
+              " rows \xD7 ",
+              pivotResult.data[0]?.length || 0,
+              " columns"
+            ] }),
+            selectionStats && selectionStats.count > 1 && /* @__PURE__ */ jsxs4("div", { className: "vpg-selection-stats", children: [
+              /* @__PURE__ */ jsxs4("span", { className: "vpg-stat", children: [
+                /* @__PURE__ */ jsx4("span", { className: "vpg-stat-label", children: "Count:" }),
+                /* @__PURE__ */ jsx4("span", { className: "vpg-stat-value", children: selectionStats.count })
+              ] }),
+              selectionStats.numericCount > 0 && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                /* @__PURE__ */ jsx4("span", { className: "vpg-stat-divider", children: "|" }),
+                /* @__PURE__ */ jsxs4("span", { className: "vpg-stat", children: [
+                  /* @__PURE__ */ jsx4("span", { className: "vpg-stat-label", children: "Sum:" }),
+                  /* @__PURE__ */ jsx4("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.sum) })
+                ] }),
+                /* @__PURE__ */ jsx4("span", { className: "vpg-stat-divider", children: "|" }),
+                /* @__PURE__ */ jsxs4("span", { className: "vpg-stat", children: [
+                  /* @__PURE__ */ jsx4("span", { className: "vpg-stat-label", children: "Avg:" }),
+                  /* @__PURE__ */ jsx4("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.avg) })
+                ] })
+              ] })
+            ] })
+          ] })
         ] }),
         showWatermark && canUsePivot && /* @__PURE__ */ jsx4("div", { className: `vpg-watermark ${isDemo ? "vpg-demo-mode" : ""}`, children: isDemo ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
           /* @__PURE__ */ jsx4("span", { className: "vpg-demo-badge", children: "DEMO" }),
@@ -2271,7 +2416,7 @@ function DataGrid({
     const end = start + pageSize;
     return searchFilteredData.slice(start, end);
   }, [enablePagination, searchFilteredData, currentPage, pageSize]);
-  useEffect5(() => {
+  useEffect6(() => {
     setCurrentPage(1);
   }, [columnFilters, globalSearchTerm]);
   const selectionBounds = useMemo9(() => {
@@ -2309,7 +2454,7 @@ function DataGrid({
     const avg = sum / values.length;
     return { count, sum, avg, numericCount: values.length };
   }, [selectionBounds, rows, columnKeys]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (data.length === 0) return;
     const widths = {};
     const sampleSize = Math.min(100, data.length);
@@ -2340,7 +2485,7 @@ function DataGrid({
     },
     [enableColumnResize, columnWidths]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     if (!resizingColumnId) return;
     const handleResizeMove = (event) => {
       const diff = event.clientX - resizeStartX;
@@ -2370,7 +2515,7 @@ function DataGrid({
     },
     [enableVerticalResize, gridHeight]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     if (!isResizingVertically) return;
     const handleVerticalResizeMove = (event) => {
       const diff = event.clientY - verticalResizeStartY;
@@ -2488,12 +2633,12 @@ function DataGrid({
     },
     [isSelecting]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     const handleMouseUp = () => setIsSelecting(false);
     document.addEventListener("mouseup", handleMouseUp);
     return () => document.removeEventListener("mouseup", handleMouseUp);
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     const handleKeydown = (event) => {
       if ((event.ctrlKey || event.metaKey) && event.key === "c" && selectionBounds) {
         event.preventDefault();
@@ -3039,6 +3184,7 @@ function DataGrid({
               rowFields: pivotRowFields,
               columnFields: pivotColumnFields,
               valueFields: pivotValueFields,
+              calculatedFields: pivotCalculatedFields,
               isConfigured: pivotIsConfigured,
               draggingField,
               pivotResult,