@smallwebco/tinypivot-react 1.0.27 → 1.0.28

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

@@ -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);
@@ -1573,6 +1553,7 @@ 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);
@@ -1631,7 +1623,7 @@ function PivotSkeleton({
     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
         }))
       ];
@@ -1999,10 +1991,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",
                             {
@@ -3039,6 +3031,7 @@ function DataGrid({
               rowFields: pivotRowFields,
               columnFields: pivotColumnFields,
               valueFields: pivotValueFields,
+              calculatedFields: pivotCalculatedFields,
               isConfigured: pivotIsConfigured,
               draggingField,
               pivotResult,