@smallwebco/tinypivot-react 1.0.47 → 1.0.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +57 -16
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +57 -16
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -445,12 +445,11 @@ function usePivotTable(data) {
|
|
|
445
445
|
}, [currentStorageKey, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals, calculatedFields]);
|
|
446
446
|
const addRowField = (0, import_react3.useCallback)(
|
|
447
447
|
(field) => {
|
|
448
|
-
if (!requirePro("Pivot Table - Row Fields")) return;
|
|
449
448
|
if (!rowFields.includes(field)) {
|
|
450
449
|
setRowFieldsState((prev) => [...prev, field]);
|
|
451
450
|
}
|
|
452
451
|
},
|
|
453
|
-
[rowFields
|
|
452
|
+
[rowFields]
|
|
454
453
|
);
|
|
455
454
|
const removeRowField = (0, import_react3.useCallback)((field) => {
|
|
456
455
|
setRowFieldsState((prev) => prev.filter((f) => f !== field));
|
|
@@ -460,12 +459,11 @@ function usePivotTable(data) {
|
|
|
460
459
|
}, []);
|
|
461
460
|
const addColumnField = (0, import_react3.useCallback)(
|
|
462
461
|
(field) => {
|
|
463
|
-
if (!requirePro("Pivot Table - Column Fields")) return;
|
|
464
462
|
if (!columnFields.includes(field)) {
|
|
465
463
|
setColumnFieldsState((prev) => [...prev, field]);
|
|
466
464
|
}
|
|
467
465
|
},
|
|
468
|
-
[columnFields
|
|
466
|
+
[columnFields]
|
|
469
467
|
);
|
|
470
468
|
const removeColumnField = (0, import_react3.useCallback)((field) => {
|
|
471
469
|
setColumnFieldsState((prev) => prev.filter((f) => f !== field));
|
|
@@ -475,7 +473,9 @@ function usePivotTable(data) {
|
|
|
475
473
|
}, []);
|
|
476
474
|
const addValueField = (0, import_react3.useCallback)(
|
|
477
475
|
(field, aggregation = "sum") => {
|
|
478
|
-
if (!requirePro(
|
|
476
|
+
if (aggregation !== "sum" && !requirePro(`${aggregation} aggregation`)) {
|
|
477
|
+
return;
|
|
478
|
+
}
|
|
479
479
|
setValueFields((prev) => {
|
|
480
480
|
if (prev.some((v) => v.field === field && v.aggregation === aggregation)) {
|
|
481
481
|
return prev;
|
|
@@ -1553,6 +1553,9 @@ function CalculatedFieldModal({
|
|
|
1553
1553
|
|
|
1554
1554
|
// src/components/PivotConfig.tsx
|
|
1555
1555
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
1556
|
+
function aggregationRequiresPro(agg) {
|
|
1557
|
+
return agg !== "sum";
|
|
1558
|
+
}
|
|
1556
1559
|
function getFieldIcon(type, isCalculated) {
|
|
1557
1560
|
if (isCalculated) return "\u0192";
|
|
1558
1561
|
switch (type) {
|
|
@@ -1592,6 +1595,10 @@ function PivotConfig({
|
|
|
1592
1595
|
const [fieldSearch, setFieldSearch] = (0, import_react8.useState)("");
|
|
1593
1596
|
const [showCalcModal, setShowCalcModal] = (0, import_react8.useState)(false);
|
|
1594
1597
|
const [editingCalcField, setEditingCalcField] = (0, import_react8.useState)(null);
|
|
1598
|
+
const { canUseAdvancedAggregations } = useLicense();
|
|
1599
|
+
const isAggregationAvailable = (0, import_react8.useCallback)((agg) => {
|
|
1600
|
+
return !aggregationRequiresPro(agg) || canUseAdvancedAggregations;
|
|
1601
|
+
}, [canUseAdvancedAggregations]);
|
|
1595
1602
|
const numericFieldNames = (0, import_react8.useMemo)(
|
|
1596
1603
|
() => availableFields.filter((f) => f.isNumeric).map((f) => f.field),
|
|
1597
1604
|
[availableFields]
|
|
@@ -1657,9 +1664,13 @@ function PivotConfig({
|
|
|
1657
1664
|
);
|
|
1658
1665
|
const handleAggregationChange = (0, import_react8.useCallback)(
|
|
1659
1666
|
(field, currentAgg, newAgg) => {
|
|
1667
|
+
if (!isAggregationAvailable(newAgg)) {
|
|
1668
|
+
console.warn(`[TinyPivot] "${newAgg}" aggregation requires a Pro license. Visit https://tiny-pivot.com/#pricing to upgrade.`);
|
|
1669
|
+
return;
|
|
1670
|
+
}
|
|
1660
1671
|
onUpdateAggregation(field, currentAgg, newAgg);
|
|
1661
1672
|
},
|
|
1662
|
-
[onUpdateAggregation]
|
|
1673
|
+
[onUpdateAggregation, isAggregationAvailable]
|
|
1663
1674
|
);
|
|
1664
1675
|
const toggleRowColumn = (0, import_react8.useCallback)(
|
|
1665
1676
|
(field, currentAssignment) => {
|
|
@@ -1797,11 +1808,20 @@ function PivotConfig({
|
|
|
1797
1808
|
);
|
|
1798
1809
|
},
|
|
1799
1810
|
onClick: (e) => e.stopPropagation(),
|
|
1800
|
-
children: import_tinypivot_core6.AGGREGATION_OPTIONS.map((agg) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1811
|
+
children: import_tinypivot_core6.AGGREGATION_OPTIONS.map((agg) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1812
|
+
"option",
|
|
1813
|
+
{
|
|
1814
|
+
value: agg.value,
|
|
1815
|
+
disabled: aggregationRequiresPro(agg.value) && !canUseAdvancedAggregations,
|
|
1816
|
+
children: [
|
|
1817
|
+
agg.symbol,
|
|
1818
|
+
" ",
|
|
1819
|
+
agg.label,
|
|
1820
|
+
aggregationRequiresPro(agg.value) && !canUseAdvancedAggregations ? " (Pro)" : ""
|
|
1821
|
+
]
|
|
1822
|
+
},
|
|
1823
|
+
agg.value
|
|
1824
|
+
))
|
|
1805
1825
|
}
|
|
1806
1826
|
),
|
|
1807
1827
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
@@ -2704,7 +2724,7 @@ function DataGrid({
|
|
|
2704
2724
|
onExport,
|
|
2705
2725
|
onCopy
|
|
2706
2726
|
}) {
|
|
2707
|
-
const { showWatermark, canUsePivot, isDemo } = useLicense();
|
|
2727
|
+
const { showWatermark, canUsePivot, isDemo, isPro } = useLicense();
|
|
2708
2728
|
const currentTheme = (0, import_react10.useMemo)(() => {
|
|
2709
2729
|
if (theme === "auto") {
|
|
2710
2730
|
return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
@@ -3411,11 +3431,11 @@ function DataGrid({
|
|
|
3411
3431
|
) })
|
|
3412
3432
|
}
|
|
3413
3433
|
),
|
|
3414
|
-
enableExport &&
|
|
3434
|
+
enableExport && viewMode === "grid" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
3415
3435
|
"button",
|
|
3416
3436
|
{
|
|
3417
3437
|
className: "vpg-export-btn",
|
|
3418
|
-
title:
|
|
3438
|
+
title: "Export to CSV",
|
|
3419
3439
|
onClick: handleExport,
|
|
3420
3440
|
children: [
|
|
3421
3441
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
@@ -3427,8 +3447,29 @@ function DataGrid({
|
|
|
3427
3447
|
d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
|
|
3428
3448
|
}
|
|
3429
3449
|
) }),
|
|
3430
|
-
"Export"
|
|
3431
|
-
|
|
3450
|
+
"Export"
|
|
3451
|
+
]
|
|
3452
|
+
}
|
|
3453
|
+
),
|
|
3454
|
+
enableExport && viewMode === "pivot" && pivotIsConfigured && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
3455
|
+
"button",
|
|
3456
|
+
{
|
|
3457
|
+
className: `vpg-export-btn ${!isPro ? "vpg-export-btn-disabled" : ""}`,
|
|
3458
|
+
disabled: !isPro,
|
|
3459
|
+
title: isPro ? "Export Pivot to CSV" : "Export Pivot to CSV (Pro feature)",
|
|
3460
|
+
onClick: () => isPro && handleExport(),
|
|
3461
|
+
children: [
|
|
3462
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
3463
|
+
"path",
|
|
3464
|
+
{
|
|
3465
|
+
strokeLinecap: "round",
|
|
3466
|
+
strokeLinejoin: "round",
|
|
3467
|
+
strokeWidth: 2,
|
|
3468
|
+
d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
|
|
3469
|
+
}
|
|
3470
|
+
) }),
|
|
3471
|
+
"Export Pivot",
|
|
3472
|
+
!isPro ? " (Pro)" : ""
|
|
3432
3473
|
]
|
|
3433
3474
|
}
|
|
3434
3475
|
)
|