@liiift-studio/sanity-visitor-insights 0.57.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,
@@ -1812,33 +1881,6 @@ function describeRank(rank) {
   return `${ordinal(rank.rank)} best of the last ${rank.of} weeks`;
 }
 
-// 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/panels.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function metricSortValue(metric) {
@@ -2269,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` }),