@canvas-components/react-pivot-table 0.2.17 → 0.2.18

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { CSSProperties, ReactNode, ForwardedRef, PropsWithChildren } from 'react';
-import { PivotTableOptions, PivotField, PivotFieldLayout, PivotModel, PivotTable, PivotSelectionState, PivotFilterState, PivotSortRule, PivotCellAddress, PivotAxis, PivotFilterAxis, PivotDimensionFilter, PivotFilterOptionItem, PivotExportOptions, PivotTableStateSnapshot } from '@canvas-components/pivot-table';
+import { PivotTableOptions, PivotField, PivotFieldLayout, PivotTable, PivotModel, PivotSelectionState, PivotFilterState, PivotSortRule, PivotCellAddress, PivotAxis, PivotFilterAxis, PivotDimensionFilter, PivotFilterOptionItem, PivotExportOptions, PivotTableStateSnapshot } from '@canvas-components/pivot-table';
 
 /** PivotTable 自定义字段面板配置。 */
 interface ReactPivotTableCustomizationOptions<RecordType = Record<string, unknown>> {
@@ -33,6 +33,7 @@ interface ReactPivotTableProps<RecordType = Record<string, unknown>> extends Omi
 }
 /** ReactPivotTable 实例方法。 */
 interface ReactPivotTableRef<RecordType = Record<string, unknown>> {
+    autoFitColumnWidths: PivotTable<RecordType>["autoFitColumnWidths"];
     getPivotModel: () => PivotModel<RecordType> | null;
     getVisibleRowNodes: () => ReturnType<PivotTable<RecordType>["getVisibleRowNodes"]>;
     getVisibleColumnNodes: () => ReturnType<PivotTable<RecordType>["getVisibleColumnNodes"]>;
@@ -58,6 +59,8 @@ interface ReactPivotTableRef<RecordType = Record<string, unknown>> {
     expandAll: (axis?: PivotAxis | "both") => number;
     collapseAll: (axis?: PivotAxis | "both") => number;
     setDimensionFilter: (axis: PivotFilterAxis, dimensionKey: string, filter: PivotDimensionFilter | null) => PivotFilterState | null;
+    setIndicatorFilter: (indicatorKey: string, columnPathKey: string, filter: PivotDimensionFilter | null) => PivotFilterState | null;
+    getIndicatorFilterOptions: (indicatorKey: string, columnPathKey: string) => PivotFilterOptionItem[];
     getDimensionFilterOptions: (axis: PivotFilterAxis, dimensionKey: string) => PivotFilterOptionItem[];
     resetFilters: () => PivotFilterState | null;
     setDimensionSort: (axis: PivotAxis, dimensionKey: string, direction: "asc" | "desc" | null) => PivotSortRule[];

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { CSSProperties, ReactNode, ForwardedRef, PropsWithChildren } from 'react';
-import { PivotTableOptions, PivotField, PivotFieldLayout, PivotModel, PivotTable, PivotSelectionState, PivotFilterState, PivotSortRule, PivotCellAddress, PivotAxis, PivotFilterAxis, PivotDimensionFilter, PivotFilterOptionItem, PivotExportOptions, PivotTableStateSnapshot } from '@canvas-components/pivot-table';
+import { PivotTableOptions, PivotField, PivotFieldLayout, PivotTable, PivotModel, PivotSelectionState, PivotFilterState, PivotSortRule, PivotCellAddress, PivotAxis, PivotFilterAxis, PivotDimensionFilter, PivotFilterOptionItem, PivotExportOptions, PivotTableStateSnapshot } from '@canvas-components/pivot-table';
 
 /** PivotTable 自定义字段面板配置。 */
 interface ReactPivotTableCustomizationOptions<RecordType = Record<string, unknown>> {
@@ -33,6 +33,7 @@ interface ReactPivotTableProps<RecordType = Record<string, unknown>> extends Omi
 }
 /** ReactPivotTable 实例方法。 */
 interface ReactPivotTableRef<RecordType = Record<string, unknown>> {
+    autoFitColumnWidths: PivotTable<RecordType>["autoFitColumnWidths"];
     getPivotModel: () => PivotModel<RecordType> | null;
     getVisibleRowNodes: () => ReturnType<PivotTable<RecordType>["getVisibleRowNodes"]>;
     getVisibleColumnNodes: () => ReturnType<PivotTable<RecordType>["getVisibleColumnNodes"]>;
@@ -58,6 +59,8 @@ interface ReactPivotTableRef<RecordType = Record<string, unknown>> {
     expandAll: (axis?: PivotAxis | "both") => number;
     collapseAll: (axis?: PivotAxis | "both") => number;
     setDimensionFilter: (axis: PivotFilterAxis, dimensionKey: string, filter: PivotDimensionFilter | null) => PivotFilterState | null;
+    setIndicatorFilter: (indicatorKey: string, columnPathKey: string, filter: PivotDimensionFilter | null) => PivotFilterState | null;
+    getIndicatorFilterOptions: (indicatorKey: string, columnPathKey: string) => PivotFilterOptionItem[];
     getDimensionFilterOptions: (axis: PivotFilterAxis, dimensionKey: string) => PivotFilterOptionItem[];
     resetFilters: () => PivotFilterState | null;
     setDimensionSort: (axis: PivotAxis, dimensionKey: string, direction: "asc" | "desc" | null) => PivotSortRule[];

package/dist/index.js

@@ -30,11 +30,12 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/features/context-menu/pivot-context-menu.css
-styleInject(".react-pivot-table-menu-action {\n  transition: background-color 0.2s ease, color 0.2s ease;\n}\n.react-pivot-table-menu-action:hover {\n  background: #f3f4f6 !important;\n}\n.react-pivot-table-menu-chevron {\n  width: 7px;\n  height: 7px;\n  flex: 0 0 auto;\n  margin-left: 8px;\n  border-top: 1.5px solid #9ca3af;\n  border-right: 1.5px solid #9ca3af;\n  transform: rotate(45deg);\n  transform-origin: center;\n  transition: transform 0.18s ease, border-color 0.18s ease;\n}\n.react-pivot-table-menu-action:hover .react-pivot-table-menu-chevron,\n.react-pivot-table-menu-chevron-active {\n  border-color: #6b7280;\n  transform: rotate(135deg);\n}\n");
+styleInject(".react-pivot-table-menu-action {\n  font-size: inherit;\n  transition: background-color 0.2s ease, color 0.2s ease;\n}\n.react-pivot-table-menu-action:hover {\n  background: #f3f4f6 !important;\n}\n.react-pivot-table-menu-chevron {\n  width: 7px;\n  height: 7px;\n  flex: 0 0 auto;\n  margin-left: 8px;\n  border-top: 1.5px solid #9ca3af;\n  border-right: 1.5px solid #9ca3af;\n  transform: rotate(45deg);\n  transform-origin: center;\n  transition: transform 0.18s ease, border-color 0.18s ease;\n}\n.react-pivot-table-menu-action:hover .react-pivot-table-menu-chevron,\n.react-pivot-table-menu-chevron-active {\n  border-color: #6b7280;\n  transform: rotate(135deg);\n}\n");
 var CONTEXT_MENU_SURFACE_STYLE = {
   padding: 8,
   background: "#ffffff",
-  boxShadow: "0 8px 24px rgba(15, 23, 42, 0.16)"
+  boxShadow: "0 8px 24px rgba(15, 23, 42, 0.16)",
+  fontSize: 14
 };
 function PivotContextMenu(props) {
   const { request } = props;
@@ -144,7 +145,29 @@ function HeaderMenu(props) {
         ]
       }
     ) : null,
-    request.onOpenFilter ? /* @__PURE__ */ jsx(MenuAction, { label: "\u6253\u5F00\u7B5B\u9009\u9762\u677F", onClick: request.onOpenFilter }) : null,
+    request.onAutoFitCurrentColumn || request.onAutoFitAllColumns ? /* @__PURE__ */ jsx(
+      MenuSubmenu,
+      {
+        label: "\u81EA\u52A8\u8C03\u6574\u5217\u5BBD",
+        items: [
+          {
+            key: "auto-fit-current",
+            label: "\u5F53\u524D\u5217",
+            onClick: request.onAutoFitCurrentColumn
+          },
+          {
+            key: "auto-fit-all",
+            label: "\u5168\u90E8\u5217",
+            onClick: request.onAutoFitAllColumns
+          },
+          {
+            key: "auto-fit-fill-container",
+            label: "\u81EA\u52A8\u94FA\u6EE1\u5BB9\u5668",
+            onClick: request.onAutoFitFillContainer
+          }
+        ]
+      }
+    ) : null,
     hasExpand ? /* @__PURE__ */ jsx(
       MenuSubmenu,
       {
@@ -172,14 +195,35 @@ function HeaderMenu(props) {
 }
 function SummaryMenu(props) {
   const { request } = props;
+  const [title, setTitle] = useState(request.summaryTitle ?? "");
   const [precision, setPrecision] = useState(
     request.summaryPrecision ?? null
   );
+  const [roundingMode, setRoundingMode] = useState(
+    request.summaryRoundingMode ?? "round"
+  );
+  const [preserveTrailingZeros, setPreserveTrailingZeros] = useState(
+    request.summaryPreserveTrailingZeros ?? false
+  );
+  useEffect(() => {
+    setTitle(request.summaryTitle ?? "");
+    setPrecision(request.summaryPrecision ?? null);
+    setRoundingMode(request.summaryRoundingMode ?? "round");
+    setPreserveTrailingZeros(request.summaryPreserveTrailingZeros ?? false);
+  }, [
+    request.indicatorKey,
+    request.summaryTitle,
+    request.summaryPrecision,
+    request.summaryRoundingMode,
+    request.summaryPreserveTrailingZeros
+  ]);
   const aggregators = [
     ["sum", "\u6C42\u548C"],
     ["avg", "\u5E73\u5747\u503C"],
     ["count", "\u8BA1\u6570"],
     ["distinctCount", "\u53BB\u91CD\u8BA1\u6570"],
+    ["rowCount", "\u884C\u6570"],
+    ["mergedRowCount", "\u5408\u5E76\u884C\u6570"],
     ["min", "\u6700\u5C0F\u503C"],
     ["max", "\u6700\u5927\u503C"]
   ];
@@ -188,15 +232,62 @@ function SummaryMenu(props) {
     MenuSubmenu,
     {
       label: "\u6C47\u603B\u65B9\u5F0F",
-      items: aggregators.map(([value, label]) => ({
-        key: `summary-${value}`,
-        label,
-        selected: request.summaryAggregator === value,
-        onClick: () => {
-          request.onChangeSummaryAggregator?.(value);
-          request.onClose();
+      minWidth: 268,
+      header: request.onChangeSummaryTitle ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "56px 1fr",
+            gap: 8,
+            alignItems: "center",
+            padding: "2px 10px 10px",
+            marginBottom: 4,
+            borderBottom: "1px solid #e5e7eb"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 14 }, children: "\u6807\u9898\uFF1A" }),
+            /* @__PURE__ */ jsx(
+              ReactInput,
+              {
+                value: title,
+                placeholder: "\u8BF7\u8F93\u5165\u6807\u9898",
+                onChange: (event) => {
+                  setTitle(event.target.value);
+                  request.onChangeSummaryTitle?.(event.target.value);
+                }
+              }
+            )
+          ]
         }
-      })),
+      ) : void 0,
+      items: [
+        ...aggregators.map(([value, label]) => ({
+          key: `summary-${value}`,
+          label,
+          selected: !request.summaryDisabled && request.summaryAggregator === value,
+          onClick: () => {
+            request.onChangeSummaryAggregator?.(value);
+            request.onClose();
+          }
+        })),
+        {
+          key: "summary-prefix",
+          label: "\u5C55\u793A\u6C47\u603B\u65B9\u5F0F\u524D\u7F00",
+          separatorBefore: true,
+          selected: request.summaryShowTypePrefix !== false,
+          disabled: request.summaryDisabled,
+          onClick: () => request.onChangeSummaryShowTypePrefix?.(
+            request.summaryShowTypePrefix === false
+          )
+        },
+        {
+          key: "summary-clear",
+          label: "\u53D6\u6D88\u6C47\u603B",
+          separatorBefore: true,
+          onClick: request.onClearSummary
+        }
+      ],
       footer: request.onChangeSummaryPrecision ? /* @__PURE__ */ jsxs(
         "div",
         {
@@ -210,7 +301,7 @@ function SummaryMenu(props) {
             borderTop: "1px solid #e5e7eb"
           },
           children: [
-            /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 13 }, children: "\u5C0F\u6570\u4F4D\u6570" }),
+            /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 14 }, children: "\u5C0F\u6570\u4F4D\u6570" }),
             /* @__PURE__ */ jsx(
               ReactInputNumber,
               {
@@ -219,10 +310,42 @@ function SummaryMenu(props) {
                 max: 20,
                 step: 1,
                 precision: 0,
-                placeholder: "\u81EA\u52A8",
+                placeholder: "\u9ED8\u8BA4",
+                onChange: setPrecision,
+                onCommit: (value) => request.onChangeSummaryPrecision?.(value ?? void 0)
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 14 }, children: "\u53D6\u6574\u65B9\u5F0F" }),
+            /* @__PURE__ */ jsx(
+              ReactSelect,
+              {
+                value: roundingMode,
+                options: [
+                  { label: "\u56DB\u820D\u4E94\u5165", value: "round" },
+                  { label: "\u5411\u4E0B\u53D6\u6574", value: "floor" },
+                  { label: "\u5411\u4E0A\u53D6\u6574", value: "ceil" },
+                  { label: "\u820D\u53BB\u4E0D\u5904\u7406", value: "truncate" }
+                ],
+                onChange: (value) => {
+                  const mode = value;
+                  setRoundingMode(mode);
+                  request.onChangeSummaryRoundingMode?.(mode);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 14 }, children: "\u4FDD\u7559\u65E0\u6548\u96F6" }),
+            /* @__PURE__ */ jsx(
+              ReactSelect,
+              {
+                value: preserveTrailingZeros ? "true" : "false",
+                options: [
+                  { label: "\u4E0D\u4FDD\u7559", value: "false" },
+                  { label: "\u4FDD\u7559", value: "true" }
+                ],
                 onChange: (value) => {
-                  setPrecision(value);
-                  request.onChangeSummaryPrecision?.(value ?? void 0);
+                  const enabled = value === "true";
+                  setPreserveTrailingZeros(enabled);
+                  request.onChangeSummaryPreserveTrailingZeros?.(enabled);
                 }
               }
             )
@@ -419,7 +542,7 @@ function MenuAction(props) {
   );
 }
 function MenuSubmenu(props) {
-  const { label, items, footer, children, minWidth = 220 } = props;
+  const { label, items, footer, header, children, minWidth = 220 } = props;
   const menuItems = items.filter((item) => item.onClick || item.disabled);
   const reserveSelectionIcon = menuItems.some(
     (item) => typeof item.selected === "boolean"
@@ -427,7 +550,7 @@ function MenuSubmenu(props) {
   const triggerRef = useRef(null);
   const [open, setOpen] = useState(false);
   const closeTimerRef = useRef(null);
-  if (!menuItems.length && !footer && !children) return null;
+  if (!menuItems.length && !footer && !header && !children) return null;
   const clearCloseTimer = () => {
     if (closeTimerRef.current != null) {
       window.clearTimeout(closeTimerRef.current);
@@ -494,6 +617,7 @@ function MenuSubmenu(props) {
             onOpenChange: setOpen,
             surfaceStyle: { ...CONTEXT_MENU_SURFACE_STYLE, width: minWidth },
             children: /* @__PURE__ */ jsxs("div", { onMouseEnter: clearCloseTimer, onMouseLeave: scheduleClose, children: [
+              header,
               menuItems.map((item) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
                 item.separatorBefore ? /* @__PURE__ */ jsx(MenuDivider, {}) : null,
                 /* @__PURE__ */ jsx(
@@ -1274,7 +1398,9 @@ var aggregatorOptions = [
   { label: "\u5E73\u5747\u503C", value: "avg" },
   { label: "\u6700\u5927\u503C", value: "max" },
   { label: "\u6700\u5C0F\u503C", value: "min" },
-  { label: "\u53BB\u91CD\u8BA1\u6570", value: "distinctCount" }
+  { label: "\u53BB\u91CD\u8BA1\u6570", value: "distinctCount" },
+  { label: "\u884C\u6570", value: "rowCount" },
+  { label: "\u5408\u5E76\u884C\u6570", value: "mergedRowCount" }
 ];
 var popupStyle = {
   padding: 0,
@@ -1803,6 +1929,7 @@ function ReactPivotTableInner(props, ref) {
         title: override.title ?? field.title,
         indicator: {
           ...field.indicator,
+          ...override,
           title: override.title ?? field.indicator?.title,
           aggregator: override.aggregator ?? field.indicator?.aggregator,
           precision: "precision" in override ? override.precision : field.indicator?.precision,
@@ -1822,6 +1949,7 @@ function ReactPivotTableInner(props, ref) {
       if (!override) return indicator;
       return {
         ...indicator,
+        ...override,
         title: override.title ?? indicator.title,
         aggregator: override.aggregator ?? indicator.aggregator,
         precision: "precision" in override ? override.precision : indicator.precision,
@@ -1858,8 +1986,35 @@ function ReactPivotTableInner(props, ref) {
             onChangeDataFormat: fieldKey == null ? void 0 : (dataFormat) => updateField(fieldKey, { dataFormat })
           };
           if (request.target === "summary" && fieldKey != null) {
-            enhancedRequest.onChangeSummaryAggregator = (aggregator) => updateField(fieldKey, { aggregator });
-            enhancedRequest.onChangeSummaryPrecision = (precision) => updateField(fieldKey, { precision });
+            const changeSummary = (patch, menuPatch) => {
+              updateField(fieldKey, patch);
+              setContextMenuRequest(
+                (current) => current?.target === "summary" && current.indicatorKey === fieldKey ? { ...current, ...menuPatch } : current
+              );
+            };
+            enhancedRequest.onChangeSummaryAggregator = (aggregator) => changeSummary(
+              {
+                aggregator,
+                summaryAggregator: aggregator,
+                summaryDisabled: false
+              },
+              { summaryAggregator: aggregator, summaryDisabled: false }
+            );
+            enhancedRequest.onChangeSummaryPrecision = (precision) => changeSummary({ precision }, { summaryPrecision: precision });
+            enhancedRequest.onChangeSummaryTitle = (summaryTitle) => changeSummary({ summaryTitle }, { summaryTitle });
+            enhancedRequest.onChangeSummaryShowTypePrefix = (summaryShowTypePrefix) => changeSummary(
+              { summaryShowTypePrefix },
+              { summaryShowTypePrefix }
+            );
+            enhancedRequest.onChangeSummaryRoundingMode = (summaryRoundingMode) => changeSummary({ summaryRoundingMode }, { summaryRoundingMode });
+            enhancedRequest.onChangeSummaryPreserveTrailingZeros = (summaryPreserveTrailingZeros) => changeSummary(
+              { summaryPreserveTrailingZeros },
+              { summaryPreserveTrailingZeros }
+            );
+            enhancedRequest.onClearSummary = () => changeSummary(
+              { summaryDisabled: true },
+              { summaryDisabled: true }
+            );
           }
           setContextMenuRequest(enhancedRequest);
           return;
@@ -1879,10 +2034,10 @@ function ReactPivotTableInner(props, ref) {
   };
   const sharedFilterRequest = useMemo(() => {
     if (!filterRequest) return null;
-    const { axis, dimensionKey } = filterRequest;
+    const { axis, dimensionKey, columnPathKey } = filterRequest;
     return toSharedFilterRequest(filterRequest, (value) => {
       setFilterRequest(
-        (current) => current?.axis === axis && current.dimensionKey === dimensionKey ? { ...current, value } : current
+        (current) => current?.axis === axis && current.dimensionKey === dimensionKey && current.columnPathKey === columnPathKey ? { ...current, value } : current
       );
     });
   }, [filterRequest]);
@@ -1933,6 +2088,7 @@ function ReactPivotTableInner(props, ref) {
         title: patch.title ?? field.title,
         indicator: {
           ...field.indicator,
+          ...patch,
           title: patch.title ?? field.indicator?.title,
           aggregator: patch.aggregator ?? field.indicator?.aggregator,
           precision: "precision" in patch ? patch.precision : field.indicator?.precision,
@@ -1984,6 +2140,7 @@ function ReactPivotTableInner(props, ref) {
   useImperativeHandle(
     ref,
     () => ({
+      autoFitColumnWidths: (target, fillContainer) => tableRef.current?.autoFitColumnWidths(target, fillContainer) ?? false,
       getPivotModel: () => tableRef.current?.getPivotModel() ?? null,
       getVisibleRowNodes: () => tableRef.current?.getVisibleRowNodes() ?? [],
       getVisibleColumnNodes: () => tableRef.current?.getVisibleColumnNodes() ?? [],
@@ -2005,6 +2162,15 @@ function ReactPivotTableInner(props, ref) {
       expandAll: (axis) => tableRef.current?.expandAll(axis) ?? 0,
       collapseAll: (axis) => tableRef.current?.collapseAll(axis) ?? 0,
       setDimensionFilter: (axis, dimensionKey, filter) => tableRef.current?.setDimensionFilter(axis, dimensionKey, filter) ?? null,
+      setIndicatorFilter: (indicatorKey, columnPathKey, filter) => tableRef.current?.setIndicatorFilter(
+        indicatorKey,
+        columnPathKey,
+        filter
+      ) ?? null,
+      getIndicatorFilterOptions: (indicatorKey, columnPathKey) => tableRef.current?.getIndicatorFilterOptions(
+        indicatorKey,
+        columnPathKey
+      ) ?? [],
       getDimensionFilterOptions: (axis, dimensionKey) => tableRef.current?.getDimensionFilterOptions(axis, dimensionKey) ?? [],
       resetFilters: () => tableRef.current?.resetFilters() ?? null,
       setDimensionSort: (axis, dimensionKey, direction) => tableRef.current?.setDimensionSort(axis, dimensionKey, direction) ?? [],