@liiift-studio/sanity-visitor-insights 0.63.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) {
@@ -2074,38 +2159,62 @@ function OverviewPanel({ data, previous, onBrush }) {
               source: "GA4",
               complete: true,
               unit: "percent",
-              // Fixed, not scaled to its own best day — otherwise a site at a flat 20%
-              // draws a full-height line and reads as healthy.
-              domain: [0, 1],
+              // Fixed at the bottom, open at the top.
+              //
+              // The lower bound is fixed so a site at a flat 20% cannot scale itself
+              // to full height and read as healthy. The UPPER bound is not clamped,
+              // because over-counting is a real fault with its own interpretation
+              // branch — and the card further down this very file refuses the same
+              // clamp in prose, saying `Math.min(1, …)` rendered a tag reporting
+              // 250% of reality as a flat 100% under the heading "How much GA4 is
+              // seeing", i.e. perfect. One quantity, two opposite policies, one
+              // file: the row drew a double-firing tag as a healthy flat line while
+              // the sentence beside it called the over-count out.
+              domain: [0, Math.max(1, ...(data.crossSource ?? []).map((d) => d.vercelPageviews !== null && d.ga4Pageviews !== null && d.vercelPageviews > 0 ? d.ga4Pageviews / d.vercelPageviews : 0))],
               points: (data.crossSource ?? []).map((d) => ({
                 date: d.date,
-                value: d.vercelPageviews !== null && d.ga4Pageviews !== null && d.vercelPageviews > 0 ? Math.min(1, d.ga4Pageviews / d.vercelPageviews) : null
+                value: d.vercelPageviews !== null && d.ga4Pageviews !== null && d.vercelPageviews > 0 ? d.ga4Pageviews / d.vercelPageviews : null
               })),
               // The most valuable ghost in the chart: a collapse reads as a step away
               // from last period's flat line, whether or not the detector fired.
               comparison: (previous?.crossSource ?? []).map((d) => ({
                 date: d.date,
-                value: d.vercelPageviews !== null && d.ga4Pageviews !== null && d.vercelPageviews > 0 ? Math.min(1, d.ga4Pageviews / d.vercelPageviews) : null
+                value: d.vercelPageviews !== null && d.ga4Pageviews !== null && d.vercelPageviews > 0 ? d.ga4Pageviews / d.vercelPageviews : null
               }))
             }] : [],
-            ...data.crossSource?.some((d) => d.revenue !== null) ? [{
-              key: "revenue",
-              label: "Revenue",
-              source: "Sanity",
-              complete: true,
-              unit: "money",
-              // A sale is an event on a date, not a level that varies day to day.
-              mark: "events",
-              points: (data.crossSource ?? []).map((d) => ({ date: d.date, value: d.revenue }))
-            }] : [{
+            // ORDERS ALWAYS, revenue only when it covers every order.
+            //
+            // This used to draw revenue whenever ANY day had a revenue figure, and
+            // otherwise orders — never both. Combined with the server filling a day's
+            // revenue as `revenueByDate[date] ?? 0`, that meant a day carrying a real
+            // order with no recorded amount arrived as a measured ZERO, and the row drew
+            // a zero-tick on it: the mark whose own comment says "measured, and it was
+            // nothing".
+            //
+            // At Darden 11 of 69 orders carry an amount, so the flagship chart was
+            // asserting that no sale happened on 58 days that had sales — the package's
+            // founding distinction inverted inside its most prominent encoding. Orders
+            // are exact and complete whatever the amounts say, so they are the row that
+            // is always honest.
+            {
               key: "orders",
               label: "Orders",
               source: "Sanity",
               complete: true,
               unit: "count",
+              // A sale is an event on a date, not a level that varies day to day.
               mark: "events",
               points: (data.crossSource ?? []).map((d) => ({ date: d.date, value: d.orders }))
-            }]
+            },
+            ...revenueCoversEveryOrder(data) ? [{
+              key: "revenue",
+              label: "Revenue",
+              source: "Sanity",
+              complete: true,
+              unit: "money",
+              mark: "events",
+              points: (data.crossSource ?? []).map((d) => ({ date: d.date, value: d.revenue }))
+            }] : []
           ]
         }
       ),
@@ -2363,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 })
@@ -2679,6 +2784,12 @@ function SegmentTable({ segments, dimension }) {
     ] }) })
   ] });
 }
+function revenueCoversEveryOrder(data) {
+  const counted = metricSortValue(data.orders);
+  const withTotal = finiteOrNull(data.ordersWithTotal);
+  if (counted === null || withTotal === null) return false;
+  return counted === withTotal;
+}
 function JourneyPanel({ data }) {
   const segments = data.segments ?? [];
   const allSteps = data.steps ?? [];