@liiift-studio/sanity-visitor-insights 0.56.0 → 0.58.0

package/dist/index.js

@@ -306,7 +306,8 @@ var MARKS = {
   "chart.grid": { key: "neutral", alpha: 0.18, role: "furniture", note: "Grid rules" },
   "bar.fill": { key: "vercel", alpha: 1, role: "data", note: "Every proportion, comparison and funnel bar" },
   "bar.track": { key: "neutral", alpha: 0.12, role: "furniture", note: "The rail a bar sits in" },
-  "bar.lost": { key: "revenue", alpha: 1, role: "data", note: "People who did not continue past a funnel rung" }
+  "bar.lost": { key: "revenue", alpha: 1, role: "data", note: "People who did not continue past a funnel rung" },
+  "bar.seen": { key: "ga4Pageviews", alpha: 1, role: "data", note: "The share of a complete count that the lossy source saw" }
 };
 function mark(name) {
   const m = MARKS[name];
@@ -315,6 +316,33 @@ function mark(name) {
   return seriesFill(m.key, m.alpha);
 }
 
+// src/types.ts
+function estimated(value, low, high, basis) {
+  return { status: "estimated", value, low, high, basis };
+}
+function ok(value) {
+  return { status: "ok", value };
+}
+function unavailable(reason, detail) {
+  return { status: "unavailable", reason, detail };
+}
+function partial(value, coveredFrom, note) {
+  return { status: "partial", value, coveredFrom, note };
+}
+function valueOrNull(metric) {
+  return metric.status === "unavailable" ? null : metric.value;
+}
+var REPORT_NAMES = [
+  "measurement-health",
+  "acquisition",
+  "journey",
+  "typeface-interest",
+  "diagnostics"
+];
+function isReportName(value) {
+  return typeof value === "string" && REPORT_NAMES.includes(value);
+}
+
 // src/studio/Figure.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var REASON_TEXT = {
@@ -773,6 +801,47 @@ function SectionTitle({
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: sectionHeader, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Heading, { size: tone === "primary" ? 1 : 0, style: tone === "primary" ? primaryTitle : secondaryTitle, children: title }) });
 }
+function isContainment(whole, part) {
+  const w = valueOrNull(whole);
+  const p = valueOrNull(part);
+  return w !== null && p !== null && w > 0 && p <= w;
+}
+function ContainmentBar({
+  wholeLabel,
+  whole,
+  partLabel,
+  part,
+  missingLabel
+}) {
+  const wholeValue = valueOrNull(whole);
+  const partValue = valueOrNull(part);
+  if (!isContainment(whole, part)) return null;
+  if (wholeValue === null || partValue === null) return null;
+  const share = partValue / wholeValue;
+  const missing = wholeValue - partValue;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: barHeader, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, children: wholeLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, weight: "medium", children: formatCount(wholeValue) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", style: { ...barTrack, background: mark("bar.fill"), height: 14 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: "100%", width: `${share * 100}%`, background: mark("bar.seen"), borderRadius: 2 } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: barHeader, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: [
+        partLabel,
+        ": ",
+        formatCount(partValue),
+        " (",
+        formatPercent(share, 0),
+        ")"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: [
+        formatCount(missing),
+        " ",
+        missingLabel
+      ] })
+    ] })
+  ] });
+}
 function SortableTable({
   caption,
   columns,
@@ -1785,31 +1854,31 @@ var legendRow = {
   alignItems: "center"
 };
 
-// src/types.ts
-function estimated(value, low, high, basis) {
-  return { status: "estimated", value, low, high, basis };
-}
-function ok(value) {
-  return { status: "ok", value };
-}
-function unavailable(reason, detail) {
-  return { status: "unavailable", reason, detail };
-}
-function partial(value, coveredFrom, note) {
-  return { status: "partial", value, coveredFrom, note };
-}
-function valueOrNull(metric) {
-  return metric.status === "unavailable" ? null : metric.value;
-}
-var REPORT_NAMES = [
-  "measurement-health",
-  "acquisition",
-  "journey",
-  "typeface-interest",
-  "diagnostics"
-];
-function isReportName(value) {
-  return typeof value === "string" && REPORT_NAMES.includes(value);
+// src/core/rank.ts
+var MIN_WEEKS_TO_RANK = 4;
+function weeklyRank(series) {
+  if (series.length < 7 * MIN_WEEKS_TO_RANK) return null;
+  const weeks = [];
+  for (let end = series.length; end - 7 >= 0; end -= 7) {
+    const slice = series.slice(end - 7, end);
+    weeks.push(slice.some((d) => d.value === null) ? null : slice.reduce((sum, d) => sum + d.value, 0));
+  }
+  const latest = weeks[0];
+  if (latest === null || latest === void 0) return null;
+  const comparable = weeks.filter((w) => w !== null);
+  if (comparable.length < MIN_WEEKS_TO_RANK) return null;
+  const better = comparable.filter((w) => w > latest).length;
+  return { rank: better + 1, of: comparable.length, value: latest };
+}
+function describeRank(rank) {
+  const ordinal = (n) => {
+    const tens = n % 100;
+    if (tens >= 11 && tens <= 13) return `${n}th`;
+    return `${n}${["th", "st", "nd", "rd"][n % 10] ?? "th"}`;
+  };
+  if (rank.rank === 1) return `best of the last ${rank.of} weeks`;
+  if (rank.rank === rank.of) return `lowest of the last ${rank.of} weeks`;
+  return `${ordinal(rank.rank)} best of the last ${rank.of} weeks`;
 }
 
 // src/studio/panels.tsx
@@ -1887,14 +1956,16 @@ function OverviewPanel({ data, previous, onBrush }) {
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: figureRow, children: [
           metricOr(data.revenue, OLDER_ROUTE).status === "ok" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 4, children: formatMoney(data.revenue.value, data.currency ?? null) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: metricOr(data.revenue, OLDER_ROUTE), label: "Revenue" }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Delta, { current: metricSortValue(data.revenue), previous: metricSortValue(previous?.revenue) })
-        ] })
+        ] }),
+        rankLine(data.crossSource, (d) => d.revenue) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: rankLine(data.crossSource, (d) => d.revenue) })
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Orders" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: figureRow, children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: data.orders, label: "Orders" }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Delta, { current: metricSortValue(data.orders), previous: metricSortValue(previous?.orders) })
-        ] })
+        ] }),
+        rankLine(data.crossSource, (d) => d.orders) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: rankLine(data.crossSource, (d) => d.orders) })
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Traffic" }),
@@ -2240,12 +2311,24 @@ function Verdict({ data, previous }) {
 }
 function DataHealthPanel({ data, diagnostics }) {
   const pageviewMax = maxOf([data.ga4Pageviews, data.vercelPageviews]);
+  const contained = isContainment(data.vercelPageviews, data.ga4Pageviews);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "Pageviews, source against source" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "The same unit on both sides. Vercel is cookieless and ungated; GA4 is consent-gated and blockable, so GA4 seeing fewer is expected." }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ComparisonBar, { label: "Vercel pageviews", metric: data.vercelPageviews, max: pageviewMax, outOf: "Blocked less than GA4, but not immune to it." }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ComparisonBar, { label: "GA4 pageviews", metric: data.ga4Pageviews, max: pageviewMax, outOf: "A subset of the bar above, not a rival measurement." })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "Both counting pageviews. Google Analytics is blockable, so seeing fewer is normal." }),
+      contained ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        ContainmentBar,
+        {
+          wholeLabel: "Pageviews Vercel counted",
+          whole: data.vercelPageviews,
+          partLabel: "Seen by Google Analytics",
+          part: data.ga4Pageviews,
+          missingLabel: "it missed"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ComparisonBar, { label: "Vercel pageviews", metric: data.vercelPageviews, max: pageviewMax }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ComparisonBar, { label: "GA4 pageviews", metric: data.ga4Pageviews, max: pageviewMax })
+      ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 2, children: [
       data.shortfallRatio !== null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, weight: "semibold", children: data.shortfallRatio >= 0 ? `GA4 saw ${formatPercent(data.shortfallRatio, 1)} fewer pageviews than Vercel` : `GA4 saw ${formatPercent(-data.shortfallRatio, 1)} more pageviews than Vercel` }),
@@ -2537,6 +2620,11 @@ function shortListNote(truncated, withheld, tail) {
   const cause = truncated && withheld ? "GA4 returned only its top rows, and withheld others with too few people to report" : truncated ? "GA4 returned only its top rows" : "GA4 withheld rows with too few people to report";
   return `${cause}, so this list is shorter than reality. ${tail}`;
 }
+function rankLine(series, pick) {
+  if (!series || series.length === 0) return null;
+  const ranked = weeklyRank(series.map((d) => ({ date: d.date, value: pick(d) })));
+  return ranked ? describeRank(ranked) : null;
+}
 function JourneyPanel({ data }) {
   const [segmentKey, setSegmentKey] = import_react4.default.useState(null);
   const segments = data.segments ?? [];