@nodewrite-labs/analytics-sdk 0.1.0 → 0.3.0

package/dist/payload/admin-view.js

@@ -1,289 +1,722 @@
 import {
+  ANALYTICS_EVENTS_SLUG,
+  ANALYTICS_FILTERS_PATH,
   PayloadAnalyticsEventStore,
-  adminSections,
-  analyticsModulesFromConfig
-} from "../chunk-GVOESWHZ.js";
-import "../chunk-Q4JRXZ6M.js";
-import "../chunk-F7BY2JQ3.js";
+  analyticsAdminSettingsFromConfig,
+  analyticsEventLabel,
+  analyticsLabel
+} from "../chunk-QPHMFHRE.js";
+import {
+  ANALYTICS_PERIODS,
+  AnalyticsBucketUnit,
+  DEFAULT_ANALYTICS_PERIOD,
+  analyticsPeriodRange,
+  isAnalyticsPeriod
+} from "../chunk-MOCOVYQK.js";
+import "../chunk-YAC3MRH3.js";
+import {
+  AnalyticsEventKind
+} from "../chunk-F7BY2JQ3.js";
 
 // src/payload/admin/view.tsx
 import { DefaultTemplate } from "@payloadcms/next/templates";
-import { jsx, jsxs } from "react/jsx-runtime";
-var WEEK_MS = 7 * 24 * 60 * 60 * 1e3;
-var reportStyle = `
-.analytics-report {
-  box-sizing: border-box;
+import { Gutter } from "@payloadcms/ui";
+import { RenderServerComponent } from "@payloadcms/ui/elements/RenderServerComponent";
+import { notFound } from "next/navigation.js";
+
+// src/payload/admin/format.ts
+var FALLBACK_LOCALE = "en";
+var SECONDS_PER_MINUTE = 60;
+function resolveFormatLocale(language, dateLocale, formatLocales) {
+  for (const candidate of [formatLocales[language], dateLocale, language]) {
+    if (candidate && isKnownLocale(candidate)) return candidate;
+  }
+  return FALLBACK_LOCALE;
+}
+function isKnownLocale(tag) {
+  try {
+    return Intl.DateTimeFormat.supportedLocalesOf([tag]).length > 0;
+  } catch {
+    return false;
+  }
+}
+function reportFormat(locale, timeZone, unit) {
+  const numbers = new Intl.NumberFormat(locale);
+  const seconds = new Intl.NumberFormat(locale, { style: "unit", unit: "second", unitDisplay: "short" });
+  const minutes = new Intl.NumberFormat(locale, { style: "unit", unit: "minute", unitDisplay: "short" });
+  const buckets = new Intl.DateTimeFormat(locale, { timeZone, ...BUCKET_FORMAT[unit] });
+  const instants = new Intl.DateTimeFormat(locale, { timeZone, dateStyle: "short", timeStyle: "short" });
+  const regions = new Intl.DisplayNames([locale], { type: "region", fallback: "code" });
+  return {
+    number: (value) => numbers.format(value),
+    duration: (value) => {
+      const total = Number.isFinite(value) ? Math.round(value) : 0;
+      if (total < SECONDS_PER_MINUTE) return seconds.format(total);
+      const rest = total % SECONDS_PER_MINUTE;
+      const whole = minutes.format(Math.floor(total / SECONDS_PER_MINUTE));
+      return rest === 0 ? whole : `${whole} ${seconds.format(rest)}`;
+    },
+    bucket: (start) => buckets.format(new Date(start)),
+    dateTime: (instant) => instants.format(new Date(instant)),
+    country: (code) => {
+      try {
+        return regions.of(code) ?? code;
+      } catch {
+        return code;
+      }
+    }
+  };
+}
+var BUCKET_FORMAT = {
+  [AnalyticsBucketUnit.HOUR]: { hour: "2-digit", minute: "2-digit" },
+  [AnalyticsBucketUnit.DAY]: { day: "numeric", month: "short" },
+  [AnalyticsBucketUnit.MONTH]: { month: "short", year: "numeric" }
+};
+
+// src/payload/admin/report.ts
+var TOP_PAGES_COUNT = 5;
+function buildAnalyticsReport({
+  summary,
+  periodSummary,
+  modules,
+  query
+}) {
+  const pages = withShares(byViews(summary.byPath, (row) => row.path));
+  const clicks = modules.clicks ? [...summary.byEventName ?? []].sort(
+    (left, right) => right.count - left.count || compare(left.eventName, right.eventName)
+  ) : null;
+  return {
+    totals: {
+      views: summary.totalViews,
+      averageDurationSeconds: summary.averageDurationSeconds,
+      clicks: clicks ? clicks.reduce((total, row) => total + row.count, 0) : null
+    },
+    viewsOverTime: summary.viewsOverTime ?? [],
+    pages: query.showAllPages ? pages : pages.slice(0, TOP_PAGES_COUNT),
+    hasMorePages: pages.length > TOP_PAGES_COUNT,
+    countries: modules.country ? withShares(byViews(summary.byCountry ?? [], (row) => row.country)) : null,
+    countryOptions: modules.country ? byViews(periodSummary.byCountry ?? [], (row) => row.country).map((row) => row.country) : [],
+    cities: modules.city ? withShares(byViews(summary.byCity ?? [], (row) => row.city)) : null,
+    clicks,
+    sessions: modules.sessions && query.session === null ? summary.sessions ?? [] : null,
+    trail: modules.sessions && query.session !== null ? summary.events ?? [] : null
+  };
+}
+function byViews(rows, name) {
+  return [...rows].sort((left, right) => right.views - left.views || compare(name(left), name(right)));
+}
+function withShares(rows) {
+  const most = rows[0]?.views ?? 0;
+  return rows.map((row) => ({ ...row, share: most === 0 ? 0 : row.views / most }));
+}
+function compare(left, right) {
+  if (left < right) return -1;
+  if (left > right) return 1;
+  return 0;
+}
+
+// src/payload/admin/report-query.ts
+var ReportParam = {
+  PERIOD: "period",
+  COUNTRY: "country",
+  PATH: "path",
+  SESSION: "session",
+  PAGES: "pages"
+};
+var ALL_PAGES = "all";
+var COUNTRY_CODE = /^[A-Z]{2}$/;
+var PATH_MAX = 2048;
+function parseReportQuery(searchParams, modules) {
+  const period = firstParam(searchParams, ReportParam.PERIOD);
+  const country = firstParam(searchParams, ReportParam.COUNTRY)?.toUpperCase() ?? null;
+  const path = firstParam(searchParams, ReportParam.PATH);
+  return {
+    period: isAnalyticsPeriod(period) ? period : DEFAULT_ANALYTICS_PERIOD,
+    country: modules.country && country !== null && COUNTRY_CODE.test(country) ? country : null,
+    path: path !== null && path.startsWith("/") && path.length <= PATH_MAX ? path : null,
+    session: modules.sessions ? firstParam(searchParams, ReportParam.SESSION) : null,
+    showAllPages: firstParam(searchParams, ReportParam.PAGES) === ALL_PAGES
+  };
+}
+function reportHref(viewHref, query, changes = {}) {
+  const next = { ...query, ...changes };
+  const params = new URLSearchParams();
+  if (next.period !== DEFAULT_ANALYTICS_PERIOD) params.set(ReportParam.PERIOD, next.period);
+  if (next.country) params.set(ReportParam.COUNTRY, next.country);
+  if (next.path) params.set(ReportParam.PATH, next.path);
+  if (next.session) params.set(ReportParam.SESSION, next.session);
+  if (next.showAllPages) params.set(ReportParam.PAGES, ALL_PAGES);
+  const search = params.toString();
+  return search.length === 0 ? viewHref : `${viewHref}?${search}`;
+}
+function firstParam(searchParams, name) {
+  const value = searchParams?.[name];
+  const first = Array.isArray(value) ? value[0] : value;
+  if (typeof first !== "string") return null;
+  const trimmed = first.trim();
+  return trimmed.length === 0 ? null : trimmed;
+}
+
+// src/payload/admin/country-flag.tsx
+import { hasFlag } from "country-flag-icons";
+import * as flags from "country-flag-icons/string/3x2";
+import { jsx } from "react/jsx-runtime";
+var FLAG_SVGS = flags;
+function CountryFlag({ code }) {
+  const svg = hasFlag(code) ? FLAG_SVGS[code] : void 0;
+  if (!svg) return /* @__PURE__ */ jsx("span", { className: "nwa-flag nwa-flag--none", "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      className: "nwa-flag",
+      src: `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`,
+      alt: "",
+      width: 21,
+      height: 14
+    }
+  );
+}
+
+// src/payload/admin/report-tables.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function RankedTable({ title, columns, rows, empty, footer }) {
+  const [nameColumn, ...valueColumns] = columns;
+  return /* @__PURE__ */ jsxs("section", { className: "nwa-card", children: [
+    /* @__PURE__ */ jsx2("h2", { children: title }),
+    rows.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "nwa-empty", children: empty }) : /* @__PURE__ */ jsxs("table", { className: "nwa-table", children: [
+      /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx2("th", { scope: "col", children: nameColumn }),
+        valueColumns.map((column) => /* @__PURE__ */ jsx2("th", { className: "nwa-number", scope: "col", children: column }, column))
+      ] }) }),
+      /* @__PURE__ */ jsx2("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx2(
+          "td",
+          {
+            className: row.share === void 0 ? void 0 : "nwa-bar",
+            style: row.share === void 0 ? void 0 : { "--nwa-share": row.share },
+            children: row.href ? /* @__PURE__ */ jsx2("a", { className: "nwa-name", href: row.href, children: row.name }) : /* @__PURE__ */ jsx2("span", { className: "nwa-name", children: row.name })
+          }
+        ),
+        row.values.map((value, index) => /* @__PURE__ */ jsx2("td", { className: "nwa-number", children: value }, `${row.key}-${valueColumns[index] ?? index}`))
+      ] }, row.key)) })
+    ] }),
+    footer
+  ] });
+}
+function PagesTable({
+  report,
+  label,
+  format,
+  pageHref,
+  toggleHref,
+  showAll
+}) {
+  return /* @__PURE__ */ jsx2(
+    RankedTable,
+    {
+      title: label(showAll ? "allPages" : "topPages"),
+      columns: [label("page"), label("views"), label("averageTime")],
+      empty: label("empty"),
+      rows: report.pages.map((page) => ({
+        key: page.path,
+        name: page.path,
+        href: pageHref(page.path),
+        share: page.share,
+        values: [format.number(page.views), format.duration(page.averageDurationSeconds)]
+      })),
+      footer: report.hasMorePages ? /* @__PURE__ */ jsx2("a", { className: "nwa-more", href: toggleHref, children: label(showAll ? "showTopPages" : "showAllPages") }) : null
+    }
+  );
+}
+function CountriesTable({
+  report,
+  label,
+  format,
+  countryHref
+}) {
+  return /* @__PURE__ */ jsx2(
+    RankedTable,
+    {
+      title: label("countries"),
+      columns: [label("country"), label("views")],
+      empty: label("empty"),
+      rows: (report.countries ?? []).map((row) => ({
+        key: row.country,
+        name: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx2(CountryFlag, { code: row.country }),
+          format.country(row.country)
+        ] }),
+        href: countryHref(row.country),
+        share: row.share,
+        values: [format.number(row.views)]
+      }))
+    }
+  );
+}
+function ClicksTable({
+  report,
+  label,
+  format,
+  eventLabel
+}) {
+  return /* @__PURE__ */ jsx2(
+    RankedTable,
+    {
+      title: label("clicks"),
+      columns: [label("event"), label("count")],
+      empty: label("empty"),
+      rows: (report.clicks ?? []).map((row) => ({
+        key: row.eventName,
+        name: eventLabel(row.eventName),
+        values: [format.number(row.count)]
+      }))
+    }
+  );
+}
+function CitiesTable({ report, label, format }) {
+  return /* @__PURE__ */ jsx2(
+    RankedTable,
+    {
+      title: label("cities"),
+      columns: [label("city"), label("views")],
+      empty: label("empty"),
+      rows: (report.cities ?? []).map((row) => ({
+        key: row.city,
+        name: row.city,
+        share: row.share,
+        values: [format.number(row.views)]
+      }))
+    }
+  );
+}
+
+// src/payload/admin/report-sessions.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function SessionsSection({ report, label, format, sessionHref, allSessionsHref, eventLabel }) {
+  if (report.trail) {
+    return /* @__PURE__ */ jsx3(
+      RankedTable,
+      {
+        title: label("sessionEvents"),
+        columns: [label("time"), label("kind"), label("page"), label("event")],
+        empty: label("empty"),
+        rows: report.trail.map((event) => ({
+          key: event.id,
+          name: format.dateTime(event.occurredAt),
+          values: [
+            event.kind === AnalyticsEventKind.CLICK ? label("kindClick") : label("kindView"),
+            event.path,
+            event.eventName ? eventLabel(event.eventName) : ""
+          ]
+        })),
+        footer: /* @__PURE__ */ jsx3("a", { className: "nwa-more", href: allSessionsHref, children: label("allSessions") })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3(
+    RankedTable,
+    {
+      title: label("sessions"),
+      columns: [label("session"), label("started"), label("pages")],
+      empty: label("empty"),
+      rows: (report.sessions ?? []).map((session) => ({
+        key: session.id,
+        name: session.id,
+        href: sessionHref(session.id),
+        values: [format.dateTime(session.startedAt), format.number(session.pageCount)]
+      }))
+    }
+  );
+}
+
+// src/payload/admin/report-style.ts
+var REPORT_STYLE = `
+.nwa-report {
   display: grid;
-  gap: 1.5rem;
-  max-width: 72rem;
-  padding: 1.5rem 1rem 3rem;
-  color: inherit;
+  gap: calc(var(--base) * 1.2);
+  padding-block: calc(var(--base) * 1.5) calc(var(--base) * 3);
 }
-.analytics-report h1,
-.analytics-report h2 {
+.nwa-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--base);
+  align-items: flex-end;
+  justify-content: space-between;
+}
+.nwa-header h1 {
   margin: 0;
 }
-.analytics-report a {
-  color: inherit;
+.nwa-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--base) * 0.6);
 }
-.analytics-filters {
+.nwa-filter {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-  gap: 0.75rem;
-  align-items: end;
+  gap: calc(var(--base) * 0.25);
+  min-width: 12rem;
 }
-.analytics-filters label {
-  display: grid;
-  gap: 0.25rem;
+.nwa-filter__label {
+  color: var(--theme-elevation-500);
+  font-size: 0.8125rem;
+}
+.nwa-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--base) * 0.4);
+}
+.nwa-chip {
+  display: inline-flex;
+  gap: calc(var(--base) * 0.4);
+  align-items: center;
+  padding: calc(var(--base) * 0.2) calc(var(--base) * 0.6);
+  border-radius: var(--style-radius-l);
+  background: var(--theme-elevation-100);
 }
-.analytics-filters input,
-.analytics-filters button {
-  font: inherit;
-  min-height: 2.5rem;
-  padding: 0.4rem 0.6rem;
+.nwa-chip a {
+  color: var(--theme-elevation-800);
 }
-.analytics-totals {
+.nwa-cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-  gap: 0.75rem;
-  margin: 0.75rem 0 0;
+  gap: calc(var(--base) * 0.8);
+}
+.nwa-card {
+  min-width: 0;
+  padding: var(--base);
+  border: 1px solid var(--theme-elevation-100);
+  border-radius: var(--style-radius-m);
+  background: var(--theme-elevation-0);
+}
+.nwa-card h2 {
+  margin: 0 0 calc(var(--base) * 0.6);
+  font-size: 1rem;
 }
-.analytics-scroll {
-  overflow-x: auto;
-  margin-top: 0.75rem;
+.nwa-stat dt {
+  color: var(--theme-elevation-500);
+  font-size: 0.8125rem;
 }
-.analytics-report table {
+.nwa-stat dd {
+  margin: calc(var(--base) * 0.25) 0 0;
+  font-size: 1.75rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.nwa-columns {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+  gap: calc(var(--base) * 0.8);
+}
+.nwa-chart {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.nwa-chart__grid {
+  stroke: var(--theme-elevation-100);
+}
+.nwa-chart__axis {
+  fill: var(--theme-elevation-500);
+  font-size: 11px;
+}
+.nwa-chart__line {
+  fill: none;
+  stroke: var(--theme-success-500);
+  stroke-width: 2.5;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+.nwa-chart__area {
+  fill: var(--theme-success-500);
+  opacity: 0.12;
+}
+.nwa-chart__point {
+  fill: var(--theme-elevation-0);
+  stroke: var(--theme-success-500);
+  stroke-width: 2;
+}
+.nwa-table {
   width: 100%;
   border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
 }
-.analytics-report th,
-.analytics-report td {
+.nwa-table th {
+  padding: calc(var(--base) * 0.3) calc(var(--base) * 0.4);
+  color: var(--theme-elevation-500);
+  font-size: 0.8125rem;
+  font-weight: 400;
   text-align: start;
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid currentColor;
-  vertical-align: top;
 }
-.analytics-back {
-  justify-self: start;
+.nwa-table td {
+  padding: calc(var(--base) * 0.4);
+  border-top: 1px solid var(--theme-elevation-100);
 }
-@media (max-width: 40rem) {
-  .analytics-report {
-    padding: 1rem 0.75rem 2rem;
-  }
+.nwa-table .nwa-number {
+  text-align: end;
+  white-space: nowrap;
 }
-`;
-async function AnalyticsAdminView(props) {
-  if (!props.initPageResult.req.user) return null;
-  const modules = analyticsModulesFromConfig(props.payload.config);
-  const range = resolveRange(props.searchParams);
-  const country = modules.country ? firstParam(props.searchParams?.country) : null;
-  const path = firstParam(props.searchParams?.path);
-  const session = modules.sessions ? firstParam(props.searchParams?.session) : null;
-  const store = new PayloadAnalyticsEventStore(props.payload, modules);
-  const summary = await store.summarizeAnalytics(
-    {
-      from: range.from,
-      to: range.to,
-      country,
-      path,
-      sessionId: session
-    },
-    modules
-  );
-  const sections = adminSections(summary, modules, { session });
-  const visibleEntities = props.visibleEntities ?? props.initPageResult.visibleEntities;
-  return /* @__PURE__ */ jsx(
-    DefaultTemplate,
-    {
-      i18n: props.i18n,
-      payload: props.payload,
-      req: props.initPageResult.req,
-      viewType: props.viewType,
-      visibleEntities,
-      children: /* @__PURE__ */ jsxs("div", { className: "analytics-report", children: [
-        /* @__PURE__ */ jsx("style", { children: reportStyle }),
-        /* @__PURE__ */ jsx("h1", { children: "Analytics" }),
-        /* @__PURE__ */ jsx(
-          FilterForm,
-          {
-            from: range.from,
-            to: range.to,
-            country,
-            path,
-            session,
-            modules
-          }
-        ),
-        session ? /* @__PURE__ */ jsx("a", { className: "analytics-back", href: reportHref({ from: range.from, to: range.to, country, path }), children: "All sessions" }) : null,
-        sections.map((section) => /* @__PURE__ */ jsx(
-          SectionBlock,
-          {
-            section,
-            hrefForSession: (id) => reportHref({ from: range.from, to: range.to, country, path, session: id })
-          },
-          section.kind
-        ))
-      ] })
-    }
-  );
+.nwa-bar {
+  position: relative;
 }
-function FilterForm({
-  from,
-  to,
-  country,
-  path,
-  session,
-  modules
-}) {
-  return /* @__PURE__ */ jsxs("form", { className: "analytics-filters", method: "get", action: "/admin/analytics", children: [
-    /* @__PURE__ */ jsxs("label", { children: [
-      "From",
-      /* @__PURE__ */ jsx("input", { name: "from", type: "text", defaultValue: from, autoComplete: "off" })
-    ] }),
-    /* @__PURE__ */ jsxs("label", { children: [
-      "To",
-      /* @__PURE__ */ jsx("input", { name: "to", type: "text", defaultValue: to, autoComplete: "off" })
-    ] }),
-    modules.country ? /* @__PURE__ */ jsxs("label", { children: [
-      "Country",
-      /* @__PURE__ */ jsx("input", { name: "country", type: "text", defaultValue: country ?? "", maxLength: 2, autoComplete: "off" })
-    ] }) : null,
-    /* @__PURE__ */ jsxs("label", { children: [
-      "Path",
-      /* @__PURE__ */ jsx("input", { name: "path", type: "text", defaultValue: path ?? "", maxLength: 2048, autoComplete: "off" })
-    ] }),
-    session ? /* @__PURE__ */ jsx("input", { type: "hidden", name: "session", value: session }) : null,
-    /* @__PURE__ */ jsx("button", { type: "submit", children: "Apply" })
+.nwa-bar::before {
+  content: "";
+  position: absolute;
+  inset: 3px auto 3px 0;
+  width: calc(var(--nwa-share) * 100%);
+  border-radius: var(--style-radius-s);
+  background: var(--theme-success-500);
+  opacity: 0.14;
+}
+.nwa-bar > * {
+  position: relative;
+}
+.nwa-name {
+  display: inline-flex;
+  gap: calc(var(--base) * 0.5);
+  align-items: center;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  color: var(--theme-elevation-800);
+  text-decoration: none;
+}
+a.nwa-name:hover {
+  text-decoration: underline;
+}
+.nwa-flag {
+  flex: none;
+  width: 21px;
+  height: 14px;
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px var(--theme-elevation-100);
+}
+.nwa-flag--none {
+  display: inline-block;
+  background: var(--theme-elevation-100);
+}
+.nwa-more {
+  display: inline-block;
+  margin-top: calc(var(--base) * 0.6);
+  color: var(--theme-elevation-800);
+}
+.nwa-empty {
+  margin: 0;
+  color: var(--theme-elevation-500);
+}
+`;
+
+// src/payload/admin/views-chart.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var WIDTH = 720;
+var HEIGHT = 220;
+var PAD_LEFT = 40;
+var PAD_RIGHT = 12;
+var PAD_TOP = 12;
+var PAD_BOTTOM = 28;
+var GRID_LINES = 4;
+var MAX_AXIS_LABELS = 8;
+function ViewsChart({ points, formatNumber, description }) {
+  const top = niceCeiling(Math.max(0, ...points.map((point) => point.views)));
+  const plotWidth = WIDTH - PAD_LEFT - PAD_RIGHT;
+  const plotHeight = HEIGHT - PAD_TOP - PAD_BOTTOM;
+  const step = points.length > 1 ? plotWidth / (points.length - 1) : 0;
+  const x = (index) => PAD_LEFT + (points.length > 1 ? index * step : plotWidth / 2);
+  const y = (views) => PAD_TOP + plotHeight - views / top * plotHeight;
+  const line = points.map((point, index) => `${index === 0 ? "M" : "L"}${x(index)},${y(point.views)}`).join(" ");
+  const area = `${line} L${x(points.length - 1)},${PAD_TOP + plotHeight} L${x(0)},${PAD_TOP + plotHeight} Z`;
+  const labelEvery = Math.max(1, Math.ceil(points.length / MAX_AXIS_LABELS));
+  return /* @__PURE__ */ jsxs2("svg", { className: "nwa-chart", viewBox: `0 0 ${WIDTH} ${HEIGHT}`, role: "img", "aria-label": description, children: [
+    gridValues(top).map((value) => /* @__PURE__ */ jsxs2("g", { children: [
+      /* @__PURE__ */ jsx4("line", { className: "nwa-chart__grid", x1: PAD_LEFT, x2: WIDTH - PAD_RIGHT, y1: y(value), y2: y(value) }),
+      /* @__PURE__ */ jsx4("text", { className: "nwa-chart__axis", x: PAD_LEFT - 8, y: y(value), dy: "0.32em", textAnchor: "end", children: formatNumber(value) })
+    ] }, value)),
+    points.length > 0 ? /* @__PURE__ */ jsx4("path", { className: "nwa-chart__area", d: area }) : null,
+    points.length > 0 ? /* @__PURE__ */ jsx4("path", { className: "nwa-chart__line", d: line }) : null,
+    points.map((point, index) => /* @__PURE__ */ jsxs2("g", { children: [
+      /* @__PURE__ */ jsx4("circle", { className: "nwa-chart__point", cx: x(index), cy: y(point.views), r: points.length > 31 ? 2 : 3.5, children: /* @__PURE__ */ jsx4("title", { children: point.title }) }),
+      index % labelEvery === 0 ? /* @__PURE__ */ jsx4("text", { className: "nwa-chart__axis", x: x(index), y: HEIGHT - 8, textAnchor: "middle", children: point.label }) : null
+    ] }, `${point.label}-${index}`))
   ] });
 }
-function SectionBlock({
-  section,
-  hrefForSession
-}) {
-  switch (section.kind) {
-    case "totals":
-      return /* @__PURE__ */ jsxs("section", { children: [
-        /* @__PURE__ */ jsx("h2", { children: "Totals" }),
-        /* @__PURE__ */ jsxs("dl", { className: "analytics-totals", children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("dt", { children: "Total views" }),
-            /* @__PURE__ */ jsx("dd", { children: section.totalViews })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("dt", { children: "Average duration" }),
-            /* @__PURE__ */ jsx("dd", { children: formatSeconds(section.averageDurationSeconds) })
-          ] })
-        ] })
-      ] });
-    case "paths":
-      return /* @__PURE__ */ jsx(
-        DataTable,
-        {
-          title: "Paths",
-          columns: ["Path", "Views", "Average duration"],
-          rows: section.rows.map((row) => [row.path, String(row.views), formatSeconds(row.averageDurationSeconds)])
-        }
-      );
-    case "countries":
-      return /* @__PURE__ */ jsx(
-        DataTable,
-        {
-          title: "Countries",
-          columns: ["Country", "Views"],
-          rows: section.rows.map((row) => [row.country, String(row.views)])
-        }
-      );
-    case "cities":
-      return /* @__PURE__ */ jsx(
-        DataTable,
-        {
-          title: "Cities",
-          columns: ["City", "Views"],
-          rows: section.rows.map((row) => [row.city, String(row.views)])
-        }
-      );
-    case "namedClicks":
-      return /* @__PURE__ */ jsx(
-        DataTable,
+function niceCeiling(value) {
+  if (value <= GRID_LINES) return GRID_LINES;
+  const magnitude = 10 ** Math.floor(Math.log10(value / GRID_LINES));
+  for (const factor of [1, 2, 5, 10]) {
+    const ceiling = factor * magnitude * GRID_LINES;
+    if (ceiling >= value) return ceiling;
+  }
+  return value;
+}
+function gridValues(top) {
+  return Array.from({ length: GRID_LINES + 1 }, (_, index) => top / GRID_LINES * index);
+}
+
+// src/payload/admin/report-view.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function AnalyticsReportView(props) {
+  const { report, query, modules, viewHref, label, format, eventLabel, filters } = props;
+  const href = (changes) => reportHref(viewHref, query, changes);
+  const tableProps = { report, label, format };
+  return /* @__PURE__ */ jsxs3("div", { className: "nwa-report", children: [
+    /* @__PURE__ */ jsx5("style", { children: REPORT_STYLE }),
+    /* @__PURE__ */ jsxs3("header", { className: "nwa-header", children: [
+      /* @__PURE__ */ jsx5("h1", { children: label("title") }),
+      filters
+    ] }),
+    query.path ? /* @__PURE__ */ jsx5("div", { className: "nwa-chips", children: /* @__PURE__ */ jsxs3("span", { className: "nwa-chip", children: [
+      label("pageFilter", { path: query.path }),
+      /* @__PURE__ */ jsx5("a", { href: href({ path: null }), children: label("clearFilter") })
+    ] }) }) : null,
+    /* @__PURE__ */ jsx5(Totals, { report, label, format }),
+    /* @__PURE__ */ jsxs3("section", { className: "nwa-card", children: [
+      /* @__PURE__ */ jsx5("h2", { children: label("viewsOverTime") }),
+      /* @__PURE__ */ jsx5(
+        ViewsChart,
         {
-          title: "Named clicks",
-          columns: ["Event", "Count"],
-          rows: section.rows.map((row) => [row.eventName, String(row.count)])
+          description: label("viewsOverTime"),
+          formatNumber: format.number,
+          points: report.viewsOverTime.map((point) => ({
+            label: format.bucket(point.start),
+            views: point.views,
+            title: `${format.bucket(point.start)}: ${format.number(point.views)} ${label("views")}`
+          }))
         }
-      );
-    case "sessions":
-      return /* @__PURE__ */ jsxs("section", { children: [
-        /* @__PURE__ */ jsx("h2", { children: "Sessions" }),
-        /* @__PURE__ */ jsx("div", { className: "analytics-scroll", children: /* @__PURE__ */ jsxs("table", { children: [
-          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-            /* @__PURE__ */ jsx("th", { scope: "col", children: "Session" }),
-            /* @__PURE__ */ jsx("th", { scope: "col", children: "Started" }),
-            /* @__PURE__ */ jsx("th", { scope: "col", children: "Pages" })
-          ] }) }),
-          /* @__PURE__ */ jsx("tbody", { children: section.rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 3, children: "None in this range." }) }) : section.rows.map((row) => /* @__PURE__ */ jsxs("tr", { children: [
-            /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("a", { href: hrefForSession(row.id), children: row.id }) }),
-            /* @__PURE__ */ jsx("td", { children: row.startedAt }),
-            /* @__PURE__ */ jsx("td", { children: row.pageCount })
-          ] }, row.id)) })
-        ] }) })
-      ] });
-    case "trail":
-      return /* @__PURE__ */ jsx(
-        DataTable,
+      )
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "nwa-columns", children: [
+      /* @__PURE__ */ jsx5(
+        PagesTable,
         {
-          title: "Session events",
-          columns: ["Time", "Kind", "Path", "Event"],
-          rows: section.events.map((event) => [
-            event.occurredAt,
-            event.kind === "click" ? "Click" : "View",
-            event.path,
-            event.eventName ?? ""
-          ])
+          ...tableProps,
+          showAll: query.showAllPages,
+          pageHref: (path) => href({ path, showAllPages: false }),
+          toggleHref: href({ showAllPages: !query.showAllPages })
         }
-      );
+      ),
+      modules.country ? /* @__PURE__ */ jsx5(CountriesTable, { ...tableProps, countryHref: (country) => href({ country }) }) : null,
+      modules.clicks ? /* @__PURE__ */ jsx5(ClicksTable, { ...tableProps, eventLabel }) : null,
+      modules.city ? /* @__PURE__ */ jsx5(CitiesTable, { ...tableProps }) : null
+    ] }),
+    modules.sessions ? /* @__PURE__ */ jsx5(
+      SessionsSection,
+      {
+        ...tableProps,
+        eventLabel,
+        sessionHref: (session) => href({ session }),
+        allSessionsHref: href({ session: null })
+      }
+    ) : null
+  ] });
+}
+function Totals({ report, label, format }) {
+  const stats = [
+    { key: "views", name: label("views"), value: format.number(report.totals.views) },
+    { key: "time", name: label("averageTime"), value: format.duration(report.totals.averageDurationSeconds) }
+  ];
+  if (report.totals.clicks !== null) {
+    stats.push({ key: "clicks", name: label("clicks"), value: format.number(report.totals.clicks) });
   }
+  return /* @__PURE__ */ jsx5("dl", { className: "nwa-cards", children: stats.map((stat) => /* @__PURE__ */ jsxs3("div", { className: "nwa-card nwa-stat", children: [
+    /* @__PURE__ */ jsx5("dt", { children: stat.name }),
+    /* @__PURE__ */ jsx5("dd", { children: stat.value })
+  ] }, stat.key)) });
 }
-function DataTable({ title, columns, rows }) {
-  return /* @__PURE__ */ jsxs("section", { children: [
-    /* @__PURE__ */ jsx("h2", { children: title }),
-    /* @__PURE__ */ jsx("div", { className: "analytics-scroll", children: /* @__PURE__ */ jsxs("table", { children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("th", { scope: "col", children: column }, column)) }) }),
-      /* @__PURE__ */ jsx("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, children: "None in this range." }) }) : rows.map((row, index) => /* @__PURE__ */ jsx("tr", { children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx("td", { children: cell }, `${columns[cellIndex] ?? cellIndex}`)) }, `${title}-${index}`)) })
-    ] }) })
-  ] });
+
+// src/payload/admin/view.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ANALYTICS_VIEW_PATH = "/analytics";
+var PERIOD_FILTER_ID = "nwa-period";
+var COUNTRY_FILTER_ID = "nwa-country";
+var ALL_COUNTRIES = "all";
+async function AnalyticsAdminView(props) {
+  const { initPageResult, i18n, params, searchParams } = props;
+  const { req, permissions, locale, visibleEntities } = initPageResult;
+  if (!req.user || !permissions.collections?.[ANALYTICS_EVENTS_SLUG]?.read) notFound();
+  const payload = req.payload;
+  const settings = analyticsAdminSettingsFromConfig(payload.config);
+  const query = parseReportQuery(searchParams, settings.modules);
+  const range = analyticsPeriodRange(query.period, /* @__PURE__ */ new Date(), settings.timeZone);
+  const report = await loadReport(payload, settings, query, range);
+  const formatLocale = resolveFormatLocale(i18n.language, i18n.dateFNSKey, settings.formatLocales);
+  const format = reportFormat(formatLocale, settings.timeZone, range.unit);
+  const t = i18n.t;
+  const label = (key, vars) => analyticsLabel(t, key, vars);
+  const viewHref = `${payload.config.routes.admin}${ANALYTICS_VIEW_PATH}`;
+  const filters = {
+    filters: reportFilters({ query, report, viewHref, label, format, hasCountries: settings.modules.country })
+  };
+  return /* @__PURE__ */ jsx6(
+    DefaultTemplate,
+    {
+      i18n,
+      locale,
+      params,
+      payload,
+      permissions,
+      req,
+      searchParams,
+      user: req.user,
+      viewType: props.viewType,
+      visibleEntities,
+      children: /* @__PURE__ */ jsx6(Gutter, { children: /* @__PURE__ */ jsx6(
+        AnalyticsReportView,
+        {
+          report,
+          query,
+          modules: settings.modules,
+          viewHref,
+          label,
+          format,
+          eventLabel: (eventName) => analyticsEventLabel(i18n.translations, eventName),
+          filters: RenderServerComponent({
+            Component: ANALYTICS_FILTERS_PATH,
+            importMap: payload.importMap,
+            clientProps: filters
+          })
+        }
+      ) })
+    }
+  );
 }
-function reportHref(query) {
-  const params = new URLSearchParams();
-  params.set("from", query.from);
-  params.set("to", query.to);
-  if (query.country) params.set("country", query.country);
-  if (query.path) params.set("path", query.path);
-  if (query.session) params.set("session", query.session);
-  return `/admin/analytics?${params.toString()}`;
-}
-function resolveRange(searchParams) {
-  const now = /* @__PURE__ */ new Date();
-  const to = parseTime(firstParam(searchParams?.to), now);
-  const from = parseTime(firstParam(searchParams?.from), new Date(to.getTime() - WEEK_MS));
-  return { from: from.toISOString(), to: to.toISOString() };
-}
-function parseTime(value, fallback) {
-  if (value === null) return fallback;
-  const parsed = new Date(value);
-  if (Number.isNaN(parsed.getTime())) return fallback;
-  return parsed;
-}
-function firstParam(value) {
-  const first = Array.isArray(value) ? value[0] : value;
-  if (typeof first !== "string") return null;
-  const trimmed = first.trim();
-  return trimmed.length === 0 ? null : trimmed;
+async function loadReport(payload, settings, query, range) {
+  const store = new PayloadAnalyticsEventStore(payload, settings.modules);
+  const base = { from: range.from, to: range.to, path: query.path, sessionId: query.session };
+  const summary = await store.summarizeAnalytics(
+    { ...base, country: query.country, buckets: range.buckets },
+    settings.modules
+  );
+  const periodSummary = query.country === null ? summary : await store.summarizeAnalytics({ ...base, country: null }, settings.modules);
+  return buildAnalyticsReport({ summary, periodSummary, modules: settings.modules, query });
 }
-function formatSeconds(value) {
-  if (!Number.isFinite(value)) return "0 seconds";
-  const rounded = Math.round(value * 10) / 10;
-  const text = Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1);
-  return `${text} ${rounded === 1 ? "second" : "seconds"}`;
+function reportFilters({ query, report, viewHref, label, format, hasCountries }) {
+  const filters = [
+    {
+      id: PERIOD_FILTER_ID,
+      label: label("period"),
+      value: query.period,
+      options: ANALYTICS_PERIODS.map((period) => ({ value: period, label: label(`period_${period}`) })),
+      hrefs: Object.fromEntries(
+        ANALYTICS_PERIODS.map((period) => [period, reportHref(viewHref, query, { period })])
+      )
+    }
+  ];
+  if (!hasCountries) return filters;
+  const countries = query.country && !report.countryOptions.includes(query.country) ? [query.country, ...report.countryOptions] : report.countryOptions;
+  filters.push({
+    id: COUNTRY_FILTER_ID,
+    label: label("country"),
+    value: query.country ?? ALL_COUNTRIES,
+    options: [
+      { value: ALL_COUNTRIES, label: label("allCountries") },
+      ...countries.map((country) => ({ value: country, label: format.country(country) }))
+    ],
+    hrefs: {
+      [ALL_COUNTRIES]: reportHref(viewHref, query, { country: null }),
+      ...Object.fromEntries(
+        countries.map((country) => [country, reportHref(viewHref, query, { country })])
+      )
+    }
+  });
+  return filters;
 }
 export {
   AnalyticsAdminView