@liiift-studio/sanity-visitor-insights 0.64.0 → 0.65.0

package/dist/index.js

@@ -307,7 +307,10 @@ var MARKS = {
   "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.seen": { key: "ga4Pageviews", alpha: 1, role: "data", note: "The share of a complete count that the lossy source saw" }
+  "bar.seen": { key: "ga4Pageviews", alpha: 1, role: "data", note: "The share of a complete count that the lossy source saw" },
+  "estimate.dot": { key: "ga4Pageviews", alpha: 1, role: "data", note: "One independent estimate of how much GA4 sees" },
+  "estimate.interval": { key: "ga4Pageviews", alpha: 0.35, role: "fill", boundary: "estimate.dot", note: "How wide the sample leaves that estimate \u2014 the dot is its own boundary" },
+  "estimate.rule": { key: "neutral", alpha: 0.45, role: "furniture", note: "The 100% reference a capture rate is read against" }
 };
 function mark(name) {
   const m = MARKS[name];
@@ -846,6 +849,50 @@ function ContainmentBar({
     ] })
   ] });
 }
+function EstimateDotPlot({
+  estimates,
+  labelFor,
+  intervalFor
+}) {
+  if (estimates.length === 0) return null;
+  const intervals = estimates.map((e) => intervalFor(e));
+  const top = Math.max(1, ...estimates.map((e) => e.rate), ...intervals.map((i) => i.high));
+  const pct = (v) => `${Math.max(0, Math.min(1, v / top)) * 100}%`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 3, children: [
+    estimates.map((estimate, index) => {
+      const interval = intervals[index];
+      const wide = interval.high - interval.low > 0.4;
+      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: labelFor(estimate.basis) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, weight: "medium", children: formatPercent(estimate.rate, 0) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "aria-hidden": "true", style: estimateTrack, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...estimateRule, left: pct(1) } }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              style: {
+                ...estimateInterval,
+                left: pct(interval.low),
+                width: `calc(${pct(interval.high)} - ${pct(interval.low)})`
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...estimateDot, left: pct(estimate.rate) } })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: [
+          formatCount(estimate.observed),
+          " of ",
+          formatCount(estimate.actual),
+          wide && " \u2014 too small a sample to lean on",
+          estimate.rate > 1.05 && " \u2014 over 100%, so GA4 is counting more than the source it is checked against. That is usually a tag firing twice, not extra traffic."
+        ] })
+      ] }, estimate.basis);
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: "Each is a separate way of asking the same question. Where they disagree, the spread is the answer\u2019s uncertainty \u2014 the rule marks 100%." })
+  ] });
+}
 function SortableTable({
   caption,
   columns,
@@ -1063,6 +1110,35 @@ var splitGrid = {
   gap: 24,
   alignItems: "start"
 };
+var estimateTrack = {
+  position: "relative",
+  height: 18,
+  borderRadius: 2,
+  background: mark("bar.track")
+};
+var estimateRule = {
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  width: 1,
+  background: mark("estimate.rule")
+};
+var estimateInterval = {
+  position: "absolute",
+  top: 6,
+  height: 6,
+  borderRadius: 3,
+  background: mark("estimate.interval")
+};
+var estimateDot = {
+  position: "absolute",
+  top: 4,
+  width: 10,
+  height: 10,
+  marginLeft: -5,
+  borderRadius: "50%",
+  background: mark("estimate.dot")
+};
 var filterInput = {
   font: "inherit",
   fontSize: "0.85em",
@@ -1884,6 +1960,15 @@ function describeRank(rank) {
   return `${ordinal(rank.rank)} best of the last ${rank.of} weeks`;
 }
 
+// src/core/capture.ts
+function samplingInterval(estimate) {
+  const n = estimate.actual;
+  if (!Number.isFinite(n) || n <= 0) return { low: estimate.rate, high: estimate.rate };
+  const p = Math.min(1, Math.max(0, estimate.rate));
+  const error = 2 * Math.sqrt(Math.max(p * (1 - p), 0.02) / n);
+  return { low: Math.max(0, estimate.rate - error), high: estimate.rate + error };
+}
+
 // src/studio/panels.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function metricSortValue(metric) {
@@ -2387,18 +2472,14 @@ function DataHealthPanel({ data, diagnostics }) {
     ),
     ((data.capture?.estimates?.length ?? 0) > 0 || data.estimatedSessions?.status === "estimated") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "How much GA4 is seeing" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: cardGrid, children: (data.capture?.estimates ?? []).map((estimate) => /* @__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: estimate.basis === "orders" ? "Checked against your orders" : estimate.basis === "email" ? "Checked against email clicks" : "Checked against Vercel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 4, children: formatPercent(estimate.rate, 0) }),
-        estimate.rate > 1.05 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, children: "Above 100%: GA4 is counting more than the source it is measured against. That is usually a tag firing twice, not extra traffic." }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: [
-          formatCount(estimate.observed),
-          " of ",
-          formatCount(estimate.actual),
-          ". ",
-          estimate.note
-        ] })
-      ] }) }, estimate.basis)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        EstimateDotPlot,
+        {
+          estimates: data.capture?.estimates ?? [],
+          labelFor: (basis) => basis === "orders" ? "Checked against your orders" : basis === "email" ? "Checked against email clicks" : "Checked against Vercel",
+          intervalFor: samplingInterval
+        }
+      ),
       data.capture?.discrepancy && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "caution", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 2, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, weight: "medium", children: "The sources disagree, and that is informative" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: data.capture.discrepancy })