@smallwebco/tinypivot-react 1.0.26 → 1.0.28

package/dist/index.cjs

@@ -1568,6 +1568,7 @@ function PivotSkeleton({
   rowFields,
   columnFields,
   valueFields,
+  calculatedFields,
   isConfigured,
   draggingField,
   pivotResult,
@@ -1585,6 +1586,17 @@ function PivotSkeleton({
   onReorderColumnFields
 }) {
   const { showWatermark, canUsePivot, isDemo } = useLicense();
+  const getValueFieldDisplayName = (0, import_react8.useCallback)((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 = (0, import_react8.useCallback)((field) => {
+    return field.startsWith("calc:");
+  }, []);
   const [dragOverArea, setDragOverArea] = (0, import_react8.useState)(null);
   const [reorderDragSource, setReorderDragSource] = (0, import_react8.useState)(null);
   const [reorderDropTarget, setReorderDropTarget] = (0, import_react8.useState)(null);
@@ -1626,7 +1638,7 @@ function PivotSkeleton({
     if (!pivotResult || pivotResult.headers.length === 0) {
       return [
         valueFields.map((vf) => ({
-          label: `${vf.field} (${(0, import_tinypivot_core7.getAggregationLabel)(vf.aggregation)})`,
+          label: `${getValueFieldDisplayName(vf.field)} (${(0, import_tinypivot_core7.getAggregationLabel)(vf.aggregation)})`,
           colspan: 1
         }))
       ];
@@ -1994,10 +2006,10 @@ function PivotSkeleton({
                     valueFields.map((vf) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                       "div",
                       {
-                        className: "vpg-mini-chip vpg-value-chip",
+                        className: `vpg-mini-chip vpg-value-chip${isCalculatedField(vf.field) ? " vpg-calc-chip" : ""}`,
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-agg-symbol", children: (0, import_tinypivot_core7.getAggregationSymbol)(vf.aggregation) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-mini-name", children: vf.field }),
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-agg-symbol", children: isCalculatedField(vf.field) ? "\u0192" : (0, import_tinypivot_core7.getAggregationSymbol)(vf.aggregation) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-mini-name", children: getValueFieldDisplayName(vf.field) }),
                           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                             "button",
                             {
@@ -3034,6 +3046,7 @@ function DataGrid({
               rowFields: pivotRowFields,
               columnFields: pivotColumnFields,
               valueFields: pivotValueFields,
+              calculatedFields: pivotCalculatedFields,
               isConfigured: pivotIsConfigured,
               draggingField,
               pivotResult,