@openrails/contentkit-ui 0.103.2 → 0.104.0-rc.2

package/dist/components/admin/stats-dashboard.js

@@ -1,251 +1,347 @@
 import { useMessages as e } from "../../i18n/context.js";
-import { Select as t, SelectContent as n, SelectItem as r, SelectTrigger as i, SelectValue as a } from "../../ui/select.js";
-import { AdminRoot as o, LoadFailed as s, NoAccess as c, Rows as l } from "./shell.js";
-import { useFlowClient as u } from "../../react/admin.js";
-import { useActivity as d, useTopContents as f } from "../../react/stats.js";
+import { formatDuration as t } from "../../client/gallery.js";
+import { Select as n, SelectContent as r, SelectItem as i, SelectTrigger as a, SelectValue as o } from "../../ui/select.js";
+import { AdminRoot as s, LoadFailed as c, NoAccess as l, Rows as u } from "./shell.js";
+import { useFlowClient as d } from "../../react/admin.js";
+import { useActivity as f } from "../../react/stats.js";
 import { useState as p } from "react";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { cn as _ } from "cn";
 //#region src/components/admin/stats-dashboard.tsx
-var _ = (e) => e.map((e) => typeof e == "string" ? {
+var v = (e) => e.map((e) => typeof e == "string" ? {
 	value: e,
 	label: e
-} : e), v = [
-	7,
+} : e), y = [
+	10,
 	30,
 	90
-], y = ["views", "comments"], b = [
-	"7d",
-	"30d",
-	"90d",
-	"365d",
-	"all"
-], x = (e) => e?.code === "forbidden" || e?.code === "unauthorized";
-function S({ client: e, baseUrl: t, auth: n, guard: r, appearance: i, className: a, language: s, messages: c, ...l }) {
-	let d = u({
+], b = (e) => e?.code === "forbidden" || e?.code === "unauthorized", x = [
+	{
+		key: "anon",
+		fill: "bg-[#2a78d6] dark:bg-[#3987e5]"
+	},
+	{
+		key: "free",
+		fill: "bg-[#eb6834] dark:bg-[#d95926]"
+	},
+	{
+		key: "premium",
+		fill: "bg-[#1baf7a] dark:bg-[#199e70]"
+	}
+];
+function S({ client: e, baseUrl: t, auth: n, guard: r, appearance: i, className: a, language: o, messages: c, ...l }) {
+	let u = d({
 		client: e,
 		baseUrl: t,
 		auth: n
 	});
-	return /* @__PURE__ */ h(o, {
+	return /* @__PURE__ */ h(s, {
 		flow: "stats-dashboard",
 		appearance: i,
 		className: a,
-		language: s,
+		language: o,
 		messages: c,
 		guard: r,
 		children: /* @__PURE__ */ h(C, {
 			...l,
-			client: d
+			client: u
 		})
 	});
 }
-function C({ kinds: t, contentHref: n, limit: r = 10, client: i }) {
-	let { t: a } = e(), o = _(t), [u, S] = p(o[0]?.value ?? ""), [C, T] = p(7), [E, D] = p("views"), [O, k] = p("30d"), A = d(u ? {
-		kind: u,
-		days: C
-	} : null, { client: i }), j = f(u ? {
-		kind: u,
-		metric: E,
-		period: O,
-		limit: r
-	} : null, { client: i });
-	if (x(A.error) || x(j.error)) return /* @__PURE__ */ h(c, { children: a("stats.noAccess") });
-	let M = A.data?.days ?? [], N = Math.max(1, ...M.map((e) => e.views)), P = M.reduce((e, t) => e + t.views, 0);
-	return /* @__PURE__ */ g(m, { children: [
-		/* @__PURE__ */ g("div", {
+function C({ kinds: t, client: n }) {
+	let { t: r } = e(), i = v(t), [a, o] = p(i[0]?.value ?? ""), [s, d] = p(y[0]), _ = f(a ? {
+		kind: a,
+		days: s
+	} : null, { client: n });
+	if (b(_.error)) return /* @__PURE__ */ h(l, { children: r("stats.noAccess") });
+	let x = [..._.data?.days ?? []].reverse();
+	return /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ g("div", {
+		className: "flex flex-wrap items-center justify-between gap-2",
+		children: [/* @__PURE__ */ h("h2", {
+			className: "text-base font-semibold",
+			children: r("stats.title")
+		}), i.length > 1 && /* @__PURE__ */ h(D, {
+			label: r("stats.kind"),
+			value: a,
+			onChange: o,
+			options: i
+		})]
+	}), /* @__PURE__ */ g("section", {
+		className: "grid gap-3",
+		"data-ckui": "stats-activity",
+		children: [/* @__PURE__ */ g("div", {
 			className: "flex flex-wrap items-center justify-between gap-2",
-			children: [/* @__PURE__ */ h("h2", {
-				className: "text-base font-semibold",
-				children: a("stats.title")
-			}), o.length > 1 && /* @__PURE__ */ h(w, {
-				label: a("stats.kind"),
-				value: u,
-				onChange: S,
-				options: o
-			})]
-		}),
-		/* @__PURE__ */ g("section", {
-			className: "grid gap-3",
-			"data-ckui": "stats-activity",
 			children: [/* @__PURE__ */ g("div", {
-				className: "flex flex-wrap items-center justify-between gap-2",
+				className: "grid gap-0.5",
 				children: [/* @__PURE__ */ h("h3", {
 					className: "font-medium",
-					children: a("stats.activity")
-				}), /* @__PURE__ */ h(w, {
-					label: a("stats.days"),
-					value: String(C),
-					onChange: (e) => T(Number(e)),
-					options: v.map((e) => ({
-						value: String(e),
-						label: a("stats.lastDays", { count: e })
-					}))
+					children: r("stats.activity")
+				}), /* @__PURE__ */ h("p", {
+					className: "text-xs text-muted-foreground",
+					children: r("stats.visitorsNote")
 				})]
-			}), A.unavailable ? /* @__PURE__ */ h("p", {
-				className: "text-muted-foreground",
-				role: "status",
-				children: a("stats.unavailable")
-			}) : A.error ? /* @__PURE__ */ h(s, {
-				error: A.error,
-				message: a("stats.loadFailed"),
-				retry: A.reload
-			}) : A.loading && !A.data ? /* @__PURE__ */ h(l, { count: 2 }) : M.length ? /* @__PURE__ */ g("table", {
-				className: "w-full text-left tabular-nums",
-				"aria-busy": A.loading,
+			}), /* @__PURE__ */ h(D, {
+				label: r("stats.days"),
+				value: String(s),
+				onChange: (e) => d(Number(e)),
+				options: y.map((e) => ({
+					value: String(e),
+					label: r("stats.lastDays", { count: e })
+				}))
+			})]
+		}), _.unavailable ? /* @__PURE__ */ h("p", {
+			className: "text-muted-foreground",
+			role: "status",
+			children: r("stats.unavailable")
+		}) : _.error ? /* @__PURE__ */ h(c, {
+			error: _.error,
+			message: r("stats.loadFailed"),
+			retry: _.reload
+		}) : _.loading && !_.data ? /* @__PURE__ */ h(u, { count: 3 }) : /* @__PURE__ */ g("div", {
+			className: "grid gap-4",
+			"aria-busy": _.loading,
+			children: [
+				/* @__PURE__ */ h(w, { day: x.at(-1) }),
+				/* @__PURE__ */ h(T, { rows: x }),
+				/* @__PURE__ */ h(E, { rows: x })
+			]
+		})]
+	})] });
+}
+function w({ day: n }) {
+	let { t: r } = e(), i = [{
+		label: r("stats.visitors"),
+		value: n?.readers ?? 0,
+		fill: void 0
+	}, ...x.map((e) => ({
+		label: r(`stats.${e.key}`),
+		value: n?.[e.key] ?? 0,
+		fill: e.fill
+	}))];
+	return /* @__PURE__ */ g("div", {
+		className: "grid gap-2",
+		"data-ckui": "stats-today",
+		children: [/* @__PURE__ */ g("p", {
+			className: "text-xs font-medium text-muted-foreground",
+			children: [r("stats.today"), n && n.active_ms > 0 && /* @__PURE__ */ g("span", {
+				className: "font-normal",
 				children: [
-					/* @__PURE__ */ h("thead", {
-						className: "text-xs text-muted-foreground",
-						children: /* @__PURE__ */ g("tr", { children: [
-							/* @__PURE__ */ h("th", {
-								className: "py-1 font-medium",
-								children: a("stats.date")
-							}),
-							/* @__PURE__ */ h("th", {
-								className: "py-1 font-medium",
-								children: a("stats.views")
-							}),
-							/* @__PURE__ */ h("th", {
-								className: "py-1 text-end font-medium",
-								children: a("stats.viewers")
-							}),
-							/* @__PURE__ */ h("th", {
-								className: "py-1 text-end font-medium",
-								children: a("stats.users")
-							})
-						] })
+					" · ",
+					r("stats.activeTime"),
+					" ",
+					t(Math.floor(n.active_ms / 1e3))
+				]
+			})]
+		}), /* @__PURE__ */ h("dl", {
+			className: "grid grid-cols-2 gap-2 sm:grid-cols-4",
+			children: i.map((e) => /* @__PURE__ */ g("div", {
+				className: "grid gap-0.5 rounded-lg border border-border p-3",
+				children: [/* @__PURE__ */ g("dt", {
+					className: "flex items-center gap-1.5 text-xs text-muted-foreground",
+					children: [e.fill && /* @__PURE__ */ h("span", {
+						"aria-hidden": !0,
+						className: _("size-2.5 rounded-sm", e.fill)
+					}), e.label]
+				}), /* @__PURE__ */ h("dd", {
+					className: "text-xl font-semibold tabular-nums",
+					children: e.value
+				})]
+			}, e.label))
+		})]
+	});
+}
+function T({ rows: t }) {
+	let n = e(), { t: r } = n, [i, a] = p(null), o = Math.max(0, ...t.map((e) => e.readers)), s = o || 1, c = Math.ceil(t.length / 10), l = new Intl.DateTimeFormat(n.language, {
+		month: "short",
+		day: "numeric",
+		timeZone: "UTC"
+	}), u = new Intl.DateTimeFormat(n.language, {
+		dateStyle: "medium",
+		timeZone: "UTC"
+	}), d = (e) => /* @__PURE__ */ new Date(`${e}T00:00:00Z`), f = i === null ? void 0 : t[i];
+	return /* @__PURE__ */ g("figure", {
+		className: "grid gap-2",
+		"data-ckui": "stats-chart",
+		children: [
+			/* @__PURE__ */ g("figcaption", {
+				className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground",
+				children: [x.map((e) => /* @__PURE__ */ g("span", {
+					className: "flex items-center gap-1.5",
+					children: [/* @__PURE__ */ h("span", {
+						"aria-hidden": !0,
+						className: _("size-2.5 rounded-sm", e.fill)
+					}), r(`stats.${e.key}`)]
+				}, e.key)), /* @__PURE__ */ h("span", {
+					className: "ms-auto tabular-nums",
+					children: r("stats.peak", { count: o })
+				})]
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "relative",
+				children: [
+					/* @__PURE__ */ h("div", {
+						className: "pointer-events-none absolute inset-x-0 top-0 border-t border-dashed border-border",
+						"aria-hidden": !0
 					}),
-					/* @__PURE__ */ h("tbody", { children: M.map((e) => /* @__PURE__ */ g("tr", {
-						className: "border-t border-border",
-						"data-ckui": "stats-day",
-						children: [
-							/* @__PURE__ */ h("td", {
-								className: "py-1.5 pe-3 whitespace-nowrap",
-								children: e.date
-							}),
-							/* @__PURE__ */ h("td", {
-								className: "w-1/2 py-1.5 pe-3",
-								children: /* @__PURE__ */ g("span", {
-									className: "flex items-center gap-2",
-									children: [/* @__PURE__ */ h("span", {
-										"aria-hidden": !0,
-										className: "h-2 rounded-full bg-primary",
-										style: { width: `${Math.max(2, e.views / N * 100)}%` }
-									}), e.views]
+					/* @__PURE__ */ h("div", {
+						className: "pointer-events-none absolute inset-x-0 top-1/2 border-t border-dashed border-border/60",
+						"aria-hidden": !0
+					}),
+					/* @__PURE__ */ h("ol", {
+						className: "relative flex h-48 items-end gap-1 border-b border-border",
+						onMouseLeave: () => a(null),
+						children: t.map((e, t) => /* @__PURE__ */ h("li", {
+							tabIndex: 0,
+							"data-ckui": "stats-day",
+							"aria-label": `${u.format(d(e.date))}: ${r("stats.visitors")} ${e.readers}, ${r("stats.anon")} ${e.anon}, ${r("stats.free")} ${e.free}, ${r("stats.premium")} ${e.premium}`,
+							className: "flex h-full min-w-0 flex-1 cursor-default flex-col justify-end rounded-sm outline-none hover:bg-muted/40 focus-visible:bg-muted/40 focus-visible:ring-1 focus-visible:ring-ring",
+							onMouseEnter: () => a(t),
+							onFocus: () => a(t),
+							onBlur: () => a(null),
+							children: /* @__PURE__ */ h("span", {
+								className: "mx-auto flex w-full max-w-10 flex-col-reverse gap-[2px]",
+								style: { height: `${e.readers / s * 100}%` },
+								children: x.map((t, n) => {
+									let r = e[t.key];
+									if (!r) return null;
+									let i = x.slice(n + 1).every((t) => !e[t.key]);
+									return /* @__PURE__ */ h("span", {
+										className: _("min-h-[2px] w-full", t.fill, i && "rounded-t-[4px]"),
+										style: {
+											flexGrow: r,
+											flexBasis: 0
+										}
+									}, t.key);
 								})
-							}),
-							/* @__PURE__ */ h("td", {
-								className: "py-1.5 text-end",
-								children: e.viewers
-							}),
-							/* @__PURE__ */ h("td", {
-								className: "py-1.5 text-end",
-								children: e.users
 							})
-						]
-					}, e.date)) }),
-					/* @__PURE__ */ h("tfoot", { children: /* @__PURE__ */ g("tr", {
-						className: "border-t border-border font-medium",
+						}, e.date))
+					}),
+					f && i !== null && /* @__PURE__ */ g("div", {
+						role: "tooltip",
+						className: "pointer-events-none absolute -top-2 z-10 grid min-w-36 -translate-y-full gap-1 rounded-md border border-border bg-popover p-2 text-xs text-popover-foreground shadow-md",
+						style: { left: `clamp(0%, ${(i + .5) / t.length * 100}% - 4.5rem, calc(100% - 9rem))` },
 						children: [
-							/* @__PURE__ */ h("td", {
-								className: "py-1.5",
-								children: a("stats.total")
+							/* @__PURE__ */ h("p", {
+								className: "font-medium",
+								children: u.format(d(f.date))
 							}),
-							/* @__PURE__ */ h("td", {
-								className: "py-1.5",
-								"data-ckui": "stats-total",
-								children: P
+							/* @__PURE__ */ g("p", {
+								className: "flex justify-between gap-3 tabular-nums",
+								children: [/* @__PURE__ */ h("span", { children: r("stats.visitors") }), /* @__PURE__ */ h("span", {
+									className: "font-semibold",
+									children: f.readers
+								})]
 							}),
-							/* @__PURE__ */ h("td", {}),
-							/* @__PURE__ */ h("td", {})
+							[...x].reverse().map((e) => /* @__PURE__ */ g("p", {
+								className: "flex items-center justify-between gap-3 tabular-nums text-muted-foreground",
+								children: [/* @__PURE__ */ g("span", {
+									className: "flex items-center gap-1.5",
+									children: [/* @__PURE__ */ h("span", {
+										"aria-hidden": !0,
+										className: _("size-2 rounded-sm", e.fill)
+									}), r(`stats.${e.key}`)]
+								}), /* @__PURE__ */ h("span", {
+									className: "text-popover-foreground",
+									children: f[e.key]
+								})]
+							}, e.key))
 						]
-					}) })
+					})
 				]
-			}) : /* @__PURE__ */ h("p", {
+			}),
+			/* @__PURE__ */ h("ol", {
+				"aria-hidden": !0,
+				className: "flex gap-1 text-[11px] text-muted-foreground tabular-nums",
+				children: t.map((e, n) => /* @__PURE__ */ h("li", {
+					className: "min-w-0 flex-1 overflow-visible text-center whitespace-nowrap",
+					children: (t.length - 1 - n) % c == 0 ? l.format(d(e.date)) : ""
+				}, e.date))
+			}),
+			o === 0 && /* @__PURE__ */ h("p", {
 				className: "text-muted-foreground",
-				children: a("stats.noActivity")
-			})]
-		}),
-		/* @__PURE__ */ g("section", {
-			className: "grid gap-3",
-			"data-ckui": "stats-top",
-			children: [/* @__PURE__ */ g("div", {
-				className: "flex flex-wrap items-center justify-between gap-2",
-				children: [/* @__PURE__ */ h("h3", {
-					className: "font-medium",
-					children: a("stats.top")
-				}), /* @__PURE__ */ g("div", {
-					className: "flex flex-wrap gap-2",
-					children: [/* @__PURE__ */ h(w, {
-						label: a("stats.metric"),
-						value: E,
-						onChange: (e) => D(e),
-						options: y.map((e) => ({
-							value: e,
-							label: a(`stats.metric_${e}`)
-						}))
-					}), /* @__PURE__ */ h(w, {
-						label: a("stats.period"),
-						value: O,
-						onChange: (e) => k(e),
-						options: b.map((e) => ({
-							value: e,
-							label: a(`stats.period_${e}`)
-						}))
-					})]
-				})]
-			}), j.unavailable ? /* @__PURE__ */ h("p", {
-				className: "text-muted-foreground",
-				role: "status",
-				children: a("stats.unavailable")
-			}) : j.error ? /* @__PURE__ */ h(s, {
-				error: j.error,
-				message: a("stats.loadFailed"),
-				retry: j.reload
-			}) : j.loading && !j.data ? /* @__PURE__ */ h(l, { count: 3 }) : j.data?.contents.length ? /* @__PURE__ */ h("ol", {
-				className: "grid divide-y divide-border rounded-lg border border-border",
-				"aria-busy": j.loading,
-				children: j.data.contents.map((e, t) => {
-					let r = n ? n(e) : e.path;
-					return /* @__PURE__ */ g("li", {
-						className: "flex items-center gap-3 p-2.5",
-						"data-ckui": "stats-ranked",
-						children: [
-							/* @__PURE__ */ h("span", {
-								className: "w-6 text-end text-muted-foreground tabular-nums",
-								children: t + 1
-							}),
-							r ? /* @__PURE__ */ h("a", {
-								className: "min-w-0 flex-1 break-words hover:underline",
-								href: r,
-								children: e.title
-							}) : /* @__PURE__ */ h("span", {
-								className: "min-w-0 flex-1 break-words",
-								children: e.title
-							}),
-							/* @__PURE__ */ h("span", {
-								className: "tabular-nums",
-								"data-ckui": "stats-value",
-								children: e.value
-							})
-						]
-					}, e.id);
-				})
-			}) : /* @__PURE__ */ h("p", {
-				className: "text-muted-foreground",
-				children: a("stats.noTop")
-			})]
-		})
-	] });
+				children: r("stats.noActivity")
+			})
+		]
+	});
+}
+function E({ rows: n }) {
+	let { t: r } = e();
+	return /* @__PURE__ */ g("details", {
+		className: "text-sm",
+		children: [/* @__PURE__ */ h("summary", {
+			className: "cursor-pointer text-xs text-muted-foreground",
+			children: r("stats.showTable")
+		}), /* @__PURE__ */ g("table", {
+			className: "mt-2 w-full text-left tabular-nums",
+			children: [/* @__PURE__ */ h("thead", {
+				className: "text-xs text-muted-foreground",
+				children: /* @__PURE__ */ g("tr", { children: [
+					/* @__PURE__ */ h("th", {
+						className: "py-1 font-medium",
+						children: r("stats.date")
+					}),
+					/* @__PURE__ */ h("th", {
+						className: "py-1 text-end font-medium",
+						children: r("stats.visitors")
+					}),
+					/* @__PURE__ */ h("th", {
+						className: "py-1 text-end font-medium",
+						children: r("stats.anon")
+					}),
+					/* @__PURE__ */ h("th", {
+						className: "py-1 text-end font-medium",
+						children: r("stats.free")
+					}),
+					/* @__PURE__ */ h("th", {
+						className: "py-1 text-end font-medium",
+						children: r("stats.premium")
+					}),
+					/* @__PURE__ */ h("th", {
+						className: "py-1 text-end font-medium",
+						children: r("stats.activeTime")
+					})
+				] })
+			}), /* @__PURE__ */ h("tbody", { children: [...n].reverse().map((e) => /* @__PURE__ */ g("tr", {
+				className: "border-t border-border",
+				children: [
+					/* @__PURE__ */ h("td", {
+						className: "py-1.5 pe-3 whitespace-nowrap",
+						children: e.date
+					}),
+					/* @__PURE__ */ h("td", {
+						className: "py-1.5 text-end",
+						children: e.readers
+					}),
+					/* @__PURE__ */ h("td", {
+						className: "py-1.5 text-end",
+						children: e.anon
+					}),
+					/* @__PURE__ */ h("td", {
+						className: "py-1.5 text-end",
+						children: e.free
+					}),
+					/* @__PURE__ */ h("td", {
+						className: "py-1.5 text-end",
+						children: e.premium
+					}),
+					/* @__PURE__ */ h("td", {
+						className: "py-1.5 text-end",
+						children: t(Math.floor(e.active_ms / 1e3))
+					})
+				]
+			}, e.date)) })]
+		})]
+	});
 }
-function w({ label: e, value: o, onChange: s, options: c }) {
-	return /* @__PURE__ */ g(t, {
-		value: o,
+function D({ label: e, value: t, onChange: s, options: c }) {
+	return /* @__PURE__ */ g(n, {
+		value: t,
 		onValueChange: (e) => s(String(e)),
-		children: [/* @__PURE__ */ h(i, {
+		children: [/* @__PURE__ */ h(a, {
 			size: "sm",
 			"aria-label": e,
-			children: /* @__PURE__ */ h(a, { children: (e) => c.find((t) => t.value === e)?.label ?? e })
-		}), /* @__PURE__ */ h(n, { children: c.map((e) => /* @__PURE__ */ h(r, {
+			children: /* @__PURE__ */ h(o, { children: (e) => c.find((t) => t.value === e)?.label ?? e })
+		}), /* @__PURE__ */ h(r, { children: c.map((e) => /* @__PURE__ */ h(i, {
 			value: e.value,
 			children: e.label
 		}, e.value)) })]