hazo_ui 6.18.0 → 6.19.0

package/CHANGE_LOG.md

@@ -5,6 +5,22 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v6.19.0 (2026-10-23)
+
+### Added — TrendSummary + computeTrendStats
+
+- **`TrendSummary`** — reusable trend widget: rolling-window stat cards (All
+  time, 7d, 30d, 3mo, 6mo, YTD) with % change deltas vs the prior equal period,
+  plus an interactive YTD monthly bar chart with axes, gridlines, and hover
+  tooltips. Pure inline SVG (no chart library). Data-driven via props — pair with
+  `computeTrendStats` to produce the data from any timestamped record list.
+  Configurable labels (`chartTitle`, `chartTooltipSuffix`, `totalLabel`,
+  `prevTemplate`).
+- **`computeTrendStats(items, now?, options?)`** — pure, dependency-free helper
+  that computes rolling-window counts + % change + YTD monthly series from a
+  list of `{ created_at }` records. Also available from `hazo_ui/utils` for
+  Server Component usage.
+
 ## v6.18.0 (2026-10-19)
 
 ### Changed — widened `hazo_i18n` peer range

package/dist/index.cjs

@@ -13728,6 +13728,346 @@ function EditableDataTable({
     )
   );
 }
+function TrendDeltaBadge({ pct }) {
+  if (pct === null) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "\u2014" });
+  }
+  const up = pct >= 0;
+  const cls = up ? "text-emerald-600" : "text-red-600";
+  const arrow = up ? "\u25B2" : "\u25BC";
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `text-xs font-medium ${cls}`, title: "vs previous period", children: [
+    arrow,
+    " ",
+    up ? "+" : "",
+    pct,
+    "%"
+  ] });
+}
+var CARD_HEIGHT_PX = 168;
+function TrendStatCard({
+  w,
+  totalLabel,
+  prevTemplate
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "cls_trend_stat_card flex min-w-0 flex-col justify-between rounded-lg border bg-card p-4",
+      style: { height: CARD_HEIGHT_PX },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-xs text-muted-foreground", children: w.label }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-3xl font-bold tabular-nums", children: w.count.toLocaleString() }),
+          w.key !== "all" && /* @__PURE__ */ jsxRuntime.jsx(TrendDeltaBadge, { pct: w.pctChange })
+        ] }),
+        w.key !== "all" && w.prevCount !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-xs text-muted-foreground", children: prevTemplate.replace("{count}", w.prevCount.toLocaleString()) }),
+        w.key === "all" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-xs text-muted-foreground", children: totalLabel })
+      ]
+    }
+  );
+}
+function niceMax(n) {
+  if (n <= 0) return 1;
+  const exp = Math.floor(Math.log10(n));
+  const base = Math.pow(10, exp);
+  const frac = n / base;
+  let niceFrac;
+  if (frac <= 1) niceFrac = 1;
+  else if (frac <= 2) niceFrac = 2;
+  else if (frac <= 5) niceFrac = 5;
+  else niceFrac = 10;
+  return niceFrac * base;
+}
+function TrendMiniChart({
+  data,
+  title,
+  tooltipSuffix
+}) {
+  const [hoverIndex, setHoverIndex] = React27.useState(null);
+  const total = data.reduce((n2, d) => n2 + d.count, 0);
+  const rawMax = Math.max(1, ...data.map((d) => d.count));
+  const max = niceMax(rawMax);
+  const mid = Math.round(max / 2);
+  const W = 480;
+  const H = 120;
+  const marginLeft = 34;
+  const marginRight = 8;
+  const marginTop = 16;
+  const marginBottom = 20;
+  const plotW = W - marginLeft - marginRight;
+  const plotH = H - marginTop - marginBottom;
+  const gap = 6;
+  const n = Math.max(1, data.length);
+  const colW = plotW / n;
+  const bw = Math.max(1, colW - gap);
+  const yFor = (value) => marginTop + plotH - value / max * plotH;
+  const hovered = hoverIndex !== null ? data[hoverIndex] : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "cls_trend_mini_chart col-span-6 flex min-w-0 flex-col rounded-lg border bg-card p-3",
+      style: { height: CARD_HEIGHT_PX },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-baseline justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-[11px] text-muted-foreground", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold tabular-nums", children: total.toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mt-2 min-h-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              role: "img",
+              "aria-label": data.map((d) => `${d.label} ${d.count}`).join(", "),
+              viewBox: `0 0 ${W} ${H}`,
+              preserveAspectRatio: "none",
+              className: "h-full w-full",
+              children: [
+                [0, mid, max].map((tick) => {
+                  const y = yFor(tick);
+                  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "line",
+                      {
+                        x1: marginLeft,
+                        x2: W - marginRight,
+                        y1: y,
+                        y2: y,
+                        stroke: "currentColor",
+                        strokeOpacity: 0.1
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "text",
+                      {
+                        x: marginLeft - 6,
+                        y,
+                        dy: 3,
+                        textAnchor: "end",
+                        fontSize: 9,
+                        className: "fill-muted-foreground",
+                        children: tick.toLocaleString()
+                      }
+                    )
+                  ] }, tick);
+                }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "line",
+                  {
+                    x1: marginLeft,
+                    x2: W - marginRight,
+                    y1: marginTop + plotH,
+                    y2: marginTop + plotH,
+                    stroke: "currentColor",
+                    strokeOpacity: 0.2
+                  }
+                ),
+                data.map((d, i) => {
+                  const barH = Math.round(d.count / max * plotH);
+                  const colX = marginLeft + i * colW;
+                  const barX = colX + (colW - bw) / 2;
+                  const barY = marginTop + plotH - barH;
+                  const centerX = colX + colW / 2;
+                  const isDimmed = hoverIndex !== null && hoverIndex !== i;
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "g",
+                    {
+                      onMouseEnter: () => setHoverIndex(i),
+                      onMouseLeave: () => setHoverIndex(null),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "rect",
+                          {
+                            x: colX,
+                            y: marginTop,
+                            width: colW,
+                            height: plotH,
+                            fill: "transparent"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "rect",
+                          {
+                            x: barX,
+                            y: barY,
+                            width: bw,
+                            height: Math.max(0, barH),
+                            rx: 2,
+                            className: "fill-primary",
+                            fillOpacity: isDimmed ? 0.45 : 1,
+                            children: /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${d.label}: ${d.count} ${tooltipSuffix}` })
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "text",
+                          {
+                            x: centerX,
+                            y: barY - 4,
+                            textAnchor: "middle",
+                            fontSize: 10,
+                            fontWeight: 600,
+                            className: "fill-foreground",
+                            children: d.count
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "text",
+                          {
+                            x: centerX,
+                            y: marginTop + plotH + 14,
+                            textAnchor: "middle",
+                            fontSize: 9,
+                            className: "fill-muted-foreground",
+                            children: d.label
+                          }
+                        )
+                      ]
+                    },
+                    d.label
+                  );
+                })
+              ]
+            }
+          ),
+          hovered && hoverIndex !== null && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "pointer-events-none absolute z-10 -translate-x-1/2 -translate-y-full rounded-md border bg-popover px-2 py-1 text-[10px] font-medium text-popover-foreground shadow-sm",
+              style: {
+                left: `${Math.min(
+                  92,
+                  Math.max(
+                    8,
+                    (marginLeft + hoverIndex * (plotW / n) + plotW / n / 2) / W * 100
+                  )
+                )}%`,
+                top: `${(marginTop + plotH - hovered.count / max * plotH) / H * 100}%`
+              },
+              children: [
+                hovered.label,
+                ": ",
+                hovered.count,
+                " ",
+                tooltipSuffix
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function TrendSummary({
+  windows,
+  chartData,
+  chartTitle = "Activity (YTD)",
+  chartTooltipSuffix = "",
+  totalLabel = "total",
+  prevTemplate = "prev {count}",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "cls_trend_summary mb-4 grid grid-cols-6 items-start gap-2 md:grid-cols-12",
+        className
+      ),
+      children: [
+        windows.map((w) => /* @__PURE__ */ jsxRuntime.jsx(
+          TrendStatCard,
+          {
+            w,
+            totalLabel,
+            prevTemplate
+          },
+          w.key
+        )),
+        chartData && chartData.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          TrendMiniChart,
+          {
+            data: chartData,
+            title: chartTitle,
+            tooltipSuffix: chartTooltipSuffix
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/lib/trend_stats.ts
+var DAY_MS = 864e5;
+var MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+function pctOf(count, prev) {
+  if (prev === null || prev === 0) return null;
+  return Math.round((count - prev) / prev * 100);
+}
+var DEFAULT_WINDOWS = [
+  { key: "7d", label: "7 days", days: 7 },
+  { key: "30d", label: "30 days", days: 30 },
+  { key: "90d", label: "3 months", days: 90 },
+  { key: "180d", label: "6 months", days: 180 }
+];
+function computeTrendStats(items, now = /* @__PURE__ */ new Date(), options) {
+  const nowMs = now.getTime();
+  const times = [];
+  for (const item of items) {
+    if (!item || !item.created_at) continue;
+    const t = new Date(item.created_at).getTime();
+    if (!Number.isNaN(t)) times.push(t);
+  }
+  const countBetween = (startMs, endMs) => times.reduce((n, t) => t >= startMs && t < endMs ? n + 1 : n, 0);
+  const total = times.length;
+  const rollingDefs = options?.windows ?? DEFAULT_WINDOWS;
+  const windows = [
+    { key: "all", label: options?.totalLabel ?? "All time", count: total, prevCount: null, pctChange: null }
+  ];
+  for (const w of rollingDefs) {
+    const span = w.days * DAY_MS;
+    const count = countBetween(nowMs - span, nowMs);
+    const prevCount = countBetween(nowMs - 2 * span, nowMs - span);
+    windows.push({
+      key: w.key,
+      label: w.label,
+      count,
+      prevCount,
+      pctChange: pctOf(count, prevCount)
+    });
+  }
+  const ytdStart = new Date(now.getFullYear(), 0, 1).getTime();
+  const elapsed = nowMs - ytdStart;
+  const ytdCount = countBetween(ytdStart, nowMs);
+  const prevYtdStart = new Date(now.getFullYear() - 1, 0, 1).getTime();
+  const prevYtdCount = countBetween(prevYtdStart, prevYtdStart + elapsed);
+  windows.push({
+    key: "ytd",
+    label: "YTD",
+    count: ytdCount,
+    prevCount: prevYtdCount,
+    pctChange: pctOf(ytdCount, prevYtdCount)
+  });
+  const ytdMonthly = [];
+  const year = now.getFullYear();
+  for (let m = 0; m <= now.getMonth(); m++) {
+    const monthStart = new Date(year, m, 1).getTime();
+    const monthEnd = new Date(year, m + 1, 1).getTime();
+    ytdMonthly.push({ label: MONTHS[m], count: countBetween(monthStart, monthEnd) });
+  }
+  return { total, windows, ytdMonthly };
+}
 
 Object.defineProperty(exports, "rawToast", {
   enumerable: true,
@@ -13930,12 +14270,14 @@ exports.Tooltip = Tooltip;
 exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
+exports.TrendSummary = TrendSummary;
 exports.announce = announce;
 exports.applyKanbanFilter = applyKanbanFilter;
 exports.buttonGroupVariants = buttonGroupVariants;
 exports.celebrate = celebrate;
 exports.cn = cn;
 exports.computeEta = computeEta;
+exports.computeTrendStats = computeTrendStats;
 exports.create_command_suggestion_extension = create_command_suggestion_extension;
 exports.defaultHazoUiT = defaultHazoUiT;
 exports.easeToward = easeToward;