@hybridcore/ui 1.6.5 → 1.6.7

package/dist/components/simple-pivot-table/index.js

@@ -1,66 +1,141 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { Typography as r, Divider as p, TableContainer as S, Table as x, TableBody as y, TableRow as u, TableCell as b } from "@mui/material";
-import { useSimplePivotTableLogic as P } from "./logic.js";
-import { SimplePivotTableRoot as C, SimplePivotTableHeader as F, SimplePivotTableContent as N, SimplePivotTableFooter as j } from "./styled.js";
-const z = (n) => {
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Typography as i, Divider as f, TableContainer as I, Table as R, TableHead as j, TableRow as g, TableCell as r, TableBody as w, Box as D, IconButton as G } from "@mui/material";
+import { useSimplePivotTableLogic as J } from "./logic.js";
+import { SimplePivotTableRoot as M, SimplePivotTableHeader as O, SimplePivotTableContent as V, SimplePivotTableFooter as X, SimplePivotTableScrollHint as q } from "./styled.js";
+import { I as A } from "../../IconX-C2wmVYSK.js";
+const Z = (s) => {
   const {
-    title: d,
-    dimensions: m,
+    title: m,
+    dimensions: n,
     values: c,
-    data: s,
-    aggregations: h,
-    formatCell: v,
-    ownerState: a,
-    sx: T,
-    other: g
-  } = P(n), f = {
-    title: d,
-    description: n.description,
-    dimensions: m,
+    data: h,
+    summaries: v,
+    selectedField: p,
+    selectedSummary: d,
+    selectColumn: b,
+    clearSelection: S,
+    dimensionLabel: x,
+    valueLabel: T,
+    formatDimensionValue: y,
+    formatCell: C,
+    getCellStyle: F,
+    ownerState: o,
+    scrollRef: N,
+    canScroll: k,
+    scrollModifierLabel: P,
+    sx: H,
+    other: L
+  } = J(s), W = {
+    title: m,
+    description: s.description,
+    dimensions: n,
     values: c,
-    data: s,
-    aggregations: h
+    data: h,
+    summaries: v
   };
-  return /* @__PURE__ */ l(
-    C,
+  return /* @__PURE__ */ t(
+    M,
     {
-      ownerState: a,
-      sx: T,
-      "data-snapshot": JSON.stringify(f),
-      ...g,
+      ownerState: o,
+      sx: H,
+      "data-snapshot": JSON.stringify(W),
+      ...L,
       children: [
-        /* @__PURE__ */ e(F, { ownerState: a, children: /* @__PURE__ */ e(r, { sx: { paddingLeft: "0.5rem" }, variant: "h3", children: d }) }),
-        /* @__PURE__ */ e(p, {}),
-        /* @__PURE__ */ e(N, { ownerState: a, children: /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(x, { size: "small", children: /* @__PURE__ */ e(y, { children: s.map((i, o) => /* @__PURE__ */ l(
-          u,
-          {
-            hover: !0,
-            sx: { "&:last-child td": { borderBottom: 0 } },
-            children: [
-              m.map((t) => /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(r, { variant: "body2", children: i[t.value] ?? "—" }) }, t.value)),
-              c.map((t) => /* @__PURE__ */ e(b, { align: "right", children: /* @__PURE__ */ e(
-                r,
-                {
-                  variant: "body2",
-                  fontWeight: 500,
-                  color: "primary.main",
-                  children: v(i[t.dataFieldName])
-                }
-              ) }, t.dataFieldName))
-            ]
-          },
-          o
-        )) }) }) }) }),
-        /* @__PURE__ */ e(p, {}),
-        /* @__PURE__ */ e(j, { ownerState: a, children: h.map(({ label: i, value: o }) => /* @__PURE__ */ l(r, { variant: "caption", color: "text.disabled", children: [
-          i,
-          ": ",
-          o
-        ] }, i)) })
+        /* @__PURE__ */ e(O, { ownerState: o, children: /* @__PURE__ */ e(i, { sx: { paddingLeft: "0.5rem" }, variant: "h3", children: m }) }),
+        /* @__PURE__ */ e(f, {}),
+        /* @__PURE__ */ e(V, { ownerState: o, children: /* @__PURE__ */ e(I, { ref: N, children: /* @__PURE__ */ t(R, { size: "small", stickyHeader: !0, children: [
+          /* @__PURE__ */ e(j, { children: /* @__PURE__ */ t(g, { children: [
+            n.map((l) => /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(i, { variant: "caption", fontWeight: 600, children: x(l) }) }, l.value)),
+            c.map((l) => /* @__PURE__ */ e(
+              r,
+              {
+                align: "right",
+                onClick: () => b(l.dataFieldName),
+                sx: {
+                  cursor: "pointer",
+                  ...p === l.dataFieldName && {
+                    backgroundColor: "action.selected"
+                  }
+                },
+                children: /* @__PURE__ */ e(i, { variant: "caption", fontWeight: 600, children: T(l) })
+              },
+              l.dataFieldName
+            ))
+          ] }) }),
+          /* @__PURE__ */ e(w, { children: h.map((l, z) => /* @__PURE__ */ t(
+            g,
+            {
+              hover: !0,
+              sx: { "&:last-child td": { borderBottom: 0 } },
+              children: [
+                n.map((a) => /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(i, { variant: "body2", children: y(l[a.value], a) }) }, a.value)),
+                c.map((a) => {
+                  const u = F(
+                    l[a.dataFieldName],
+                    a.format
+                  ), B = p === a.dataFieldName;
+                  return /* @__PURE__ */ e(
+                    r,
+                    {
+                      align: "right",
+                      onClick: () => b(a.dataFieldName),
+                      sx: {
+                        cursor: "pointer",
+                        // Conditional background wins; otherwise tint the
+                        // selected column.
+                        backgroundColor: u.backgroundColor ?? (B ? "action.hover" : void 0)
+                      },
+                      children: /* @__PURE__ */ e(
+                        i,
+                        {
+                          variant: "body2",
+                          fontWeight: 500,
+                          color: u.color ?? "text.primary",
+                          children: C(l[a.dataFieldName], a.format)
+                        }
+                      )
+                    },
+                    a.dataFieldName
+                  );
+                })
+              ]
+            },
+            z
+          )) })
+        ] }) }) }),
+        /* @__PURE__ */ e(f, {}),
+        /* @__PURE__ */ t(X, { ownerState: o, children: [
+          k && /* @__PURE__ */ e(q, { ownerState: o, children: /* @__PURE__ */ t(i, { variant: "caption", children: [
+            "Hold ",
+            P,
+            " to scroll"
+          ] }) }),
+          d ? /* @__PURE__ */ t(
+            D,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                flexWrap: "wrap",
+                columnGap: 1.5,
+                rowGap: 0.5
+              },
+              children: [
+                /* @__PURE__ */ e(i, { variant: "caption", fontWeight: 600, children: d.name }),
+                d.items.map((l) => /* @__PURE__ */ t(i, { variant: "caption", color: "text.secondary", children: [
+                  l.label,
+                  ": ",
+                  l.value
+                ] }, l.label)),
+                /* @__PURE__ */ e(G, { size: "small", onClick: S, sx: { p: 0.25 }, children: /* @__PURE__ */ e(A, { size: 14 }) })
+              ]
+            }
+          ) : /* @__PURE__ */ e(i, { variant: "caption", color: "text.disabled", children: "Select a column to summarize" })
+        ] })
       ]
     }
   );
 };
 export {
-  z as SimplePivotTable
+  Z as SimplePivotTable
 };

package/dist/components/simple-pivot-table/logic.js

@@ -1,51 +1,117 @@
-import { useThemeProps as h } from "@mui/material";
-import { useMemo as S } from "react";
-const e = new Intl.NumberFormat("en-US", {
-  maximumFractionDigits: 2
-}), w = (s) => {
-  const l = h({ props: s, name: "HCSimplePivotTable" }), {
-    title: u,
-    description: c,
-    data: a = [],
-    dimensions: b = [],
-    values: r = [],
-    sx: f,
-    ...p
-  } = l, g = S(() => {
-    if (a.length === 0)
-      return [
-        { label: "Total", value: e.format(0) },
-        { label: "Avg", value: e.format(0) },
-        { label: "Max", value: e.format(0) },
-        { label: "Min", value: e.format(0) }
-      ];
-    const t = a.map(
-      (n) => r.reduce((m, N) => m + (Number(n[N.dataFieldName]) || 0), 0)
-    ), o = Math.max(...t, 1), x = Math.min(...t, o), i = t.reduce((n, m) => n + m, 0), M = i / a.length;
-    return [
-      { label: "Total", value: e.format(i) },
-      { label: "Avg", value: e.format(M) },
-      { label: "Max", value: e.format(o) },
-      { label: "Min", value: e.format(x) }
+import { useThemeProps as z } from "@mui/material";
+import j from "dayjs";
+import { useRef as A, useState as h, useMemo as M, useEffect as w } from "react";
+import { humanizeLabel as y, formatValue as Y, resolveConditionalStyle as O } from "../charts/_common/format.js";
+const U = (t) => {
+  const n = t.toLowerCase();
+  return n.includes("year") ? "YYYY" : n.includes("month") ? "MMM YYYY" : n.includes("hour") || n.includes("minute") || n.includes("time") ? "DD MMM YYYY HH:mm" : "DD MMM YYYY";
+}, W = (t) => {
+  var n;
+  return ((n = t.label) == null ? void 0 : n.trim()) || y(t.value);
+}, g = (t) => {
+  var n;
+  return ((n = t.label) == null ? void 0 : n.trim()) || y(t.name);
+}, X = (t, n) => {
+  if (t == null || t === "") return "—";
+  if (n.type !== "date") return String(t);
+  const s = j(t);
+  return s.isValid() ? s.format(n.dateFormat || U(n.value)) : String(t);
+}, L = (t, n) => {
+  const s = t.map((a) => Number(a[n])).filter((a) => Number.isFinite(a));
+  if (s.length === 0) return null;
+  const f = s.length, i = s.reduce((a, u) => a + u, 0);
+  return {
+    count: f,
+    sum: i,
+    avg: i / f,
+    min: Math.min(...s),
+    max: Math.max(...s)
+  };
+}, C = (t) => t.key === "Meta" || t.key === "Control", J = (t) => {
+  const n = z({ props: t, name: "HCSimplePivotTable" }), {
+    title: s,
+    description: f,
+    data: i = [],
+    dimensions: a = [],
+    values: u = [],
+    sx: E,
+    ...x
+  } = n, b = A(null), [D, F] = h(!1), [c, S] = h(null), k = M(() => typeof navigator < "u" && /Mac|iPhone|iPad/.test(navigator.platform) ? "⌘" : "Ctrl", []);
+  w(() => {
+    const e = b.current;
+    if (!e) return;
+    const o = () => F(e.scrollHeight > e.clientHeight + 1);
+    o();
+    const l = new ResizeObserver(o);
+    return l.observe(e), () => l.disconnect();
+  }, [i, a, u]), w(() => {
+    const e = b.current;
+    if (!e) return;
+    const o = () => {
+      e.style.overflow = "auto";
+    }, l = () => {
+      e.style.overflow = "hidden";
+    };
+    l();
+    const m = (r) => {
+      C(r) && o();
+    }, v = (r) => {
+      C(r) && l();
+    }, p = (r) => {
+      if (!(r.ctrlKey || r.metaKey)) return;
+      r.preventDefault(), o();
+      const d = r.deltaMode === 1 ? 16 : 1;
+      e.scrollTop += r.deltaY * d, e.scrollLeft += r.deltaX * d;
+    };
+    return window.addEventListener("keydown", m), window.addEventListener("keyup", v), window.addEventListener("blur", l), e.addEventListener("wheel", p, { passive: !1 }), () => {
+      window.removeEventListener("keydown", m), window.removeEventListener("keyup", v), window.removeEventListener("blur", l), e.removeEventListener("wheel", p);
+    };
+  }, []);
+  const P = M(
+    () => u.map((e) => {
+      const o = L(i, e.dataFieldName);
+      return o ? { field: e.dataFieldName, name: e.name, ...o } : null;
+    }).filter((e) => e !== null),
+    [u, i]
+  ), H = M(() => {
+    var r;
+    if (!c) return null;
+    const e = u.find((d) => d.dataFieldName === c), o = e ? g(e) : y(c), l = L(i, c);
+    if (!l)
+      return { field: c, name: o, items: [{ label: "Count", value: String(i.length) }] };
+    const m = (d) => Y(d, e == null ? void 0 : e.format), v = !!((r = e == null ? void 0 : e.format) != null && r.suffix) && e.format.suffix.includes("%"), p = [
+      { label: "Count", value: String(l.count) },
+      ...v ? [] : [{ label: "Sum", value: m(l.sum) }],
+      { label: "Avg", value: m(l.avg) },
+      { label: "Min", value: m(l.min) },
+      { label: "Max", value: m(l.max) }
     ];
-  }, [a, r]), v = (t) => {
-    if (t == null || t === "") return "—";
-    const o = Number(t);
-    return Number.isNaN(o) ? String(t) : e.format(o);
-  }, d = { ...l };
+    return { field: c, name: o, items: p };
+  }, [c, u, i]), N = (e, o) => Y(e, o), K = (e, o) => O(e, o), T = (e) => S((o) => o === e ? null : e), R = () => S(null), V = { ...n };
   return {
-    title: u,
-    description: c,
-    dimensions: b,
-    values: r,
-    data: a,
-    aggregations: g,
-    formatCell: v,
-    ownerState: d,
-    sx: f,
-    other: p
+    title: s,
+    description: f,
+    dimensions: a,
+    values: u,
+    data: i,
+    summaries: P,
+    selectedField: c,
+    selectedSummary: H,
+    selectColumn: T,
+    clearSelection: R,
+    dimensionLabel: W,
+    valueLabel: g,
+    formatDimensionValue: X,
+    formatCell: N,
+    getCellStyle: K,
+    ownerState: V,
+    scrollRef: b,
+    canScroll: D,
+    scrollModifierLabel: k,
+    sx: E,
+    other: x
   };
 };
 export {
-  w as useSimplePivotTableLogic
+  J as useSimplePivotTableLogic
 };

package/dist/components/simple-pivot-table/styled.js

@@ -1,20 +1,23 @@
-import { styled as e, Paper as l, Box as t } from "@mui/material";
-const i = e(l, {
+import { styled as e, Paper as a, Box as t, alpha as l } from "@mui/material";
+const n = e(a, {
   name: "HCSimplePivotTable",
   slot: "Root",
   shouldForwardProp: (o) => o !== "ownerState"
 })(() => ({
   height: "100%",
   display: "flex",
-  flexDirection: "column"
-})), n = e(t, {
+  flexDirection: "column",
+  "&:hover .HCSimplePivotTable-scrollHint": {
+    opacity: 1
+  }
+})), r = e(t, {
   name: "HCSimplePivotTable",
   slot: "Header",
   shouldForwardProp: (o) => o !== "ownerState"
 })(({ theme: o }) => ({
   flex: "0 0 auto",
   padding: o.spacing(1.25, 2)
-})), r = e(t, {
+})), p = e(t, {
   name: "HCSimplePivotTable",
   slot: "Content",
   shouldForwardProp: (o) => o !== "ownerState"
@@ -24,8 +27,24 @@ const i = e(l, {
   flexDirection: "column",
   flex: "1 1 auto",
   minHeight: 0,
-  overflow: "auto"
-})), p = e(t, {
+  overflow: "hidden"
+})), d = e(t, {
+  name: "HCSimplePivotTable",
+  slot: "ScrollHint",
+  shouldForwardProp: (o) => o !== "ownerState"
+})(({ theme: o }) => ({
+  // Pinned to the left of the footer; aggregations stay grouped on the right.
+  marginRight: "auto",
+  padding: o.spacing(0.25, 1),
+  borderRadius: o.shape.borderRadius,
+  border: `1px solid ${o.palette.divider}`,
+  backgroundColor: l(o.palette.background.paper, 0.85),
+  color: o.palette.text.secondary,
+  pointerEvents: "none",
+  userSelect: "none",
+  opacity: 0.5,
+  transition: o.transitions.create("opacity")
+})), s = e(t, {
   name: "HCSimplePivotTable",
   slot: "Footer",
   shouldForwardProp: (o) => o !== "ownerState"
@@ -38,8 +57,9 @@ const i = e(l, {
   gap: o.spacing(1)
 }));
 export {
-  r as SimplePivotTableContent,
-  p as SimplePivotTableFooter,
-  n as SimplePivotTableHeader,
-  i as SimplePivotTableRoot
+  p as SimplePivotTableContent,
+  s as SimplePivotTableFooter,
+  r as SimplePivotTableHeader,
+  n as SimplePivotTableRoot,
+  d as SimplePivotTableScrollHint
 };