@liiift-studio/sanity-visitor-insights 0.24.0 → 0.25.0

package/dist/index.d.mts

@@ -32,7 +32,6 @@ interface VisitorInsightsToolComponentProps extends Partial<VisitorInsightsToolP
         options?: Partial<VisitorInsightsToolProps>;
     };
 }
-/** The tool itself. */
 declare function VisitorInsightsTool(props: VisitorInsightsToolComponentProps): React.ReactElement;
 
 /**

package/dist/index.d.ts

@@ -32,7 +32,6 @@ interface VisitorInsightsToolComponentProps extends Partial<VisitorInsightsToolP
         options?: Partial<VisitorInsightsToolProps>;
     };
 }
-/** The tool itself. */
 declare function VisitorInsightsTool(props: VisitorInsightsToolComponentProps): React.ReactElement;
 
 /**

package/dist/index.js

@@ -1060,6 +1060,7 @@ var GUTTER = 52;
 var RIGHT_PAD = 12;
 var TOP_PAD = 22;
 var AXIS_TYPE = 11;
+var LABEL_STRIP = 16;
 var MIN_BRUSH_DAYS = 3;
 function formatValue(value, unit, currency) {
   if (unit === "money") return formatMoney(value, currency ?? null);
@@ -1081,6 +1082,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
   const [pinned, setPinned] = (0, import_react3.useState)(false);
   const [brushAnchor, setBrushAnchor] = (0, import_react3.useState)(null);
   const [brushed, setBrushed] = (0, import_react3.useState)(null);
+  const [tooShort, setTooShort] = (0, import_react3.useState)(false);
   const [measured, setMeasured] = (0, import_react3.useState)(WIDTH);
   const frameRef = (0, import_react3.useRef)(null);
   const [frameNode, setFrameNode] = (0, import_react3.useState)(null);
@@ -1127,7 +1129,12 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
   );
   const commit = (0, import_react3.useCallback)(
     (from, to) => {
-      if (!onBrush || to - from < MIN_BRUSH_DAYS - 1) return;
+      if (!onBrush) return;
+      if (to - from < MIN_BRUSH_DAYS - 1) {
+        setTooShort(true);
+        return;
+      }
+      setTooShort(false);
       const start = dates[from];
       const end = dates[to];
       if (start && end) onBrush(start, end);
@@ -1145,6 +1152,14 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
   );
   if (dates.length < 3 || series.length === 0 || !x) return null;
   const hoveredDate = hoverIndex !== null ? dates[hoverIndex] : null;
+  const tickIndexes = (0, import_react3.useMemo)(() => {
+    if (dates.length === 0) return [];
+    if (dates.length === 1) return [0];
+    const affordable = Math.max(2, Math.min(8, Math.floor(plotWidth / 90)));
+    const step = (dates.length - 1) / (affordable - 1);
+    const indexes = Array.from({ length: affordable }, (_, i) => Math.round(i * step));
+    return [...new Set(indexes)];
+  }, [dates.length, plotWidth]);
   const revealed = pinned || hoverIndex !== null;
   const shapeOf = (row) => {
     const real = row.points.filter((p) => p.value !== null);
@@ -1164,14 +1179,22 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
     if (!row.shortfall) return [];
     const seen = new Map(row.shortfall.points.map((p) => [p.date, p.value]));
     let gap = 0;
+    let excess = 0;
     let worst = null;
+    const busiest = row.points.reduce((best, p) => Math.max(best, p.value ?? 0), 0);
+    const floor = Math.max(1, busiest * 0.1);
     for (const point of row.points) {
       if (point.value === null) continue;
       const saw = seen.get(point.date);
       if (saw == null) continue;
-      gap += point.value - saw;
+      const difference = point.value - saw;
+      if (difference >= 0) gap += difference;
+      else excess += -difference;
       const ratio = point.value > 0 ? 1 - saw / point.value : 0;
-      if (!worst || ratio > worst.ratio) worst = { date: point.date, ratio };
+      if (point.value >= floor && (!worst || ratio > worst.ratio)) worst = { date: point.date, ratio };
+    }
+    if (excess > gap) {
+      return [`${row.shortfall.source} counted ${formatCount(Math.round(excess - gap))} MORE ${row.label.toLowerCase()} than ${row.source} over this period, which usually means a tag firing twice rather than extra traffic.`];
     }
     if (gap <= 0 || !worst) return [];
     return [`${row.shortfall.source} missed ${formatCount(Math.round(gap))} ${row.label.toLowerCase()} over this period; the gap was widest on ${tickLabel(/* @__PURE__ */ new Date(`${worst.date}T00:00:00Z`))} at ${formatPercent(worst.ratio, 0)}.`];
@@ -1183,14 +1206,15 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
       {
         ref: attachFrame,
         viewBox: `0 0 ${measured} ${height}`,
-        onMouseMove: onMove,
-        onMouseLeave: () => {
+        onPointerMove: onMove,
+        onPointerLeave: () => {
           setHoverIndex(null);
           setBrushAnchor(null);
           setBrushed(null);
         },
         onPointerDown: (event) => {
           if (!onBrush) return;
+          setTooShort(false);
           const index = indexAt(event.clientX);
           if (index === null) return;
           event.preventDefault();
@@ -1246,9 +1270,10 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
           series.map((row, rowIndex) => {
             const top = TOP_PAD + rowIndex * ROW_HEIGHT;
             const bottom = top + ROW_HEIGHT - 18;
+            const plotTop = top + LABEL_STRIP;
             const values = row.points.map((p) => p.value).filter((v) => v !== null);
             const peak = (0, import_d3_array.max)(values) ?? 0;
-            const y = (0, import_d3_scale.scaleLinear)().domain([0, peak || 1]).nice().range([bottom, top]);
+            const y = (0, import_d3_scale.scaleLinear)().domain([0, peak || 1]).nice().range([bottom, plotTop]);
             const at = (p) => x(/* @__PURE__ */ new Date(`${p.date}T00:00:00Z`));
             const defined = (p) => p.value !== null;
             const lineGen = (0, import_d3_shape.line)().defined(defined).x(at).y((p) => y(p.value)).curve(import_d3_shape.curveMonotoneX);
@@ -1264,13 +1289,13 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
             const shortfallLine = row.shortfall && revealed ? lineGen(shortfallPoints.filter((p) => p.value !== null)) ?? "" : "";
             return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: GUTTER, x2: GUTTER + plotWidth, y1: bottom, y2: bottom, stroke: "currentColor", strokeWidth: 1, opacity: 0.45 }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: GUTTER + 4, y: top + 12, fontSize: AXIS_TYPE, fill: "currentColor", opacity: 0.7, fontWeight: 500, children: row.label }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("text", { x: GUTTER + plotWidth, y: top + 12, textAnchor: "end", fontSize: AXIS_TYPE, fill: "currentColor", opacity: 0.5, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: GUTTER + 4, y: top + 11, fontSize: AXIS_TYPE, fill: "currentColor", opacity: 0.85, fontWeight: 500, children: row.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("text", { x: GUTTER + plotWidth, y: top + 11, textAnchor: "end", fontSize: AXIS_TYPE, fill: "currentColor", opacity: 0.72, children: [
                 row.source,
                 row.complete ? "" : " \xB7 partial"
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: GUTTER - 6, y: y(y.domain()[1]) + 4, textAnchor: "end", fontSize: AXIS_TYPE, fill: "currentColor", opacity: 0.7, children: formatValue(y.domain()[1], row.unit, currency) }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: GUTTER - 6, y: bottom + 4, textAnchor: "end", fontSize: AXIS_TYPE, fill: "currentColor", opacity: 0.7, children: "0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: GUTTER - 6, y: bottom + 4, textAnchor: "end", fontSize: AXIS_TYPE, fill: "currentColor", opacity: 0.7, children: formatValue(0, row.unit, currency) }),
               gap && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: gap, fill: "currentColor", opacity: 0.48 }),
               shortfallLine && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: shortfallLine, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeDasharray: "6 4", opacity: 0.8 }),
               zeroes.map((p) => {
@@ -1375,7 +1400,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
               opacity: 0.8
             }
           ),
-          [0, Math.floor(dates.length / 2), dates.length - 1].map((index, position) => {
+          tickIndexes.map((index, position) => {
             const date = dates[index];
             if (!date) return null;
             return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -1383,10 +1408,10 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
               {
                 x: x(/* @__PURE__ */ new Date(`${date}T00:00:00Z`)),
                 y: height - 6,
-                textAnchor: position === 0 ? "start" : position === 2 ? "end" : "middle",
+                textAnchor: position === 0 ? "start" : position === tickIndexes.length - 1 ? "end" : "middle",
                 fontSize: AXIS_TYPE,
                 fill: "currentColor",
-                opacity: 0.55,
+                opacity: 0.72,
                 children: tickLabel(/* @__PURE__ */ new Date(`${date}T00:00:00Z`))
               },
               date
@@ -1448,7 +1473,10 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
       )),
       series.some((row) => row.shortfall) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: "Shaded: what your analytics did not see." }),
       markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: "Vertical rules mark campaign sends." }),
-      onBrush && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: "Drag across at least three days \u2014 or hold shift and use the arrow keys, then Enter \u2014 to narrow every panel to that span." })
+      onBrush && // The refusal replaces the instruction rather than sitting beside it, and it is a
+      // live region: the reader has just dragged and is looking at the chart, not at the
+      // small print under it.
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 0, muted: !tooShort, "aria-live": "polite", children: tooShort ? `That span was too short to apply \u2014 the chart needs at least ${MIN_BRUSH_DAYS} days. Drag a little wider.` : "Drag across at least three days \u2014 or hold shift and use the arrow keys, then Enter \u2014 to narrow every panel to that span." })
     ] })
   ] });
 }
@@ -1520,6 +1548,14 @@ var cardGrid = {
   gridTemplateColumns: "repeat(auto-fit, minmax(min(14rem, 100%), 1fr))",
   gap: 16
 };
+function gapOf(day) {
+  if (day.vercelPageviews === null || day.ga4Pageviews === null) return null;
+  return day.vercelPageviews - day.ga4Pageviews;
+}
+function coverageOf(day) {
+  if (day.vercelPageviews === null || day.ga4Pageviews === null || day.vercelPageviews <= 0) return null;
+  return day.ga4Pageviews / day.vercelPageviews;
+}
 function OverviewPanel({ data, previous, onBrush }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Verdict, { data, previous }),
@@ -1644,6 +1680,44 @@ function OverviewPanel({ data, previous, onBrush }) {
               sortValue: (d) => d.ga4Pageviews,
               render: (d) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: d.ga4Pageviews === null ? "\u2014" : formatCount(d.ga4Pageviews) })
             },
+            {
+              /*
+               * The disagreement, as a number you can sort on.
+               *
+               * This table held `Pageviews` and `Seen by GA4` as separate columns and
+               * nothing joining them, so the one quantity this whole tool exists to
+               * surface was the one column missing from the only table that could hold
+               * it. "Which day did GA4 lose most" was answerable by eye, or by the
+               * single worst-day sentence under the chart, and by nothing else — not
+               * sortable, not filterable, not in the CSV.
+               */
+              key: "missed",
+              label: "Missed by GA4",
+              numeric: true,
+              sortValue: (d) => gapOf(d),
+              exportValue: (d) => gapOf(d),
+              render: (d) => {
+                const gap = gapOf(d);
+                return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: gap === null ? "\u2014" : formatCount(gap) });
+              }
+            },
+            {
+              /*
+               * The same disagreement as a proportion, because the two rank days
+               * differently and both questions are real: the absolute column finds the
+               * day that cost the most, this one finds the day the instrument worked
+               * worst. Sorting on it is how a reader dates a collapse.
+               */
+              key: "coverage",
+              label: "GA4 coverage",
+              numeric: true,
+              sortValue: (d) => coverageOf(d),
+              exportValue: (d) => coverageOf(d),
+              render: (d) => {
+                const coverage = coverageOf(d);
+                return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: coverage === null ? "\u2014" : formatPercent(coverage, 0) });
+              }
+            },
             {
               key: "orders",
               label: "Orders",
@@ -2522,11 +2596,26 @@ var COMPARED_TABS = ["overview", "acquisition"];
 var PanelBoundary = class extends import_react4.default.Component {
   constructor(props) {
     super(props);
-    this.state = { error: null };
+    this.state = { error: null, shownFor: props.resetKey };
   }
   static getDerivedStateFromError(error) {
     return { error };
   }
+  /**
+   * Clear a caught error when the tab changes, WITHOUT remounting the subtree.
+   *
+   * This boundary used to be keyed on the active tab, which cleared the error by throwing the
+   * whole subtree away — and with it every table's sort, filter and exclusions, and `useReport`'s
+   * state, which resets to `idle` and refetches. So the natural exploratory loop — sort
+   * Acquisition by engagement, check Journey, come back — always cost the reader their work, on a
+   * component that invests real care in preserving exactly that state across a RANGE change.
+   *
+   * A reset key does the one thing the mount key was there for and nothing else.
+   */
+  static getDerivedStateFromProps(props, state) {
+    if (props.resetKey !== state.shownFor) return { error: null, shownFor: props.resetKey };
+    return null;
+  }
   componentDidCatch(error) {
     console.error("Visitor insights: panel render failed:", error.message);
   }
@@ -2546,6 +2635,7 @@ function VisitorInsightsTool(props) {
   const [range, setRange] = (0, import_react4.useState)("week");
   const [rangeBeforeBrush, setRangeBeforeBrush] = (0, import_react4.useState)("week");
   const [custom, setCustom] = (0, import_react4.useState)(() => ({ start: isoDaysAgo(30), end: isoDaysAgo(0) }));
+  const atPresent = custom.end >= isoDaysAgo(0);
   const [activePanel, setActivePanel] = (0, import_react4.useState)("overview");
   const active = PANELS.find((p) => p.id === activePanel) ?? PANELS[0];
   return (
@@ -2588,9 +2678,15 @@ function VisitorInsightsTool(props) {
             type: "button",
             style: inlineClear,
             "aria-label": "Shift the window forward by its own length",
+            disabled: atPresent,
+            title: atPresent ? "This window already ends today" : void 0,
             onClick: () => {
               const span = daysBetween(custom.start, custom.end);
-              setCustom({ start: shiftDays(custom.start, span), end: shiftDays(custom.end, span) });
+              const today = isoDaysAgo(0);
+              const end = shiftDays(custom.end, span);
+              const allowed = end > today ? daysBetween(custom.end, today) : span;
+              if (allowed <= 0) return;
+              setCustom({ start: shiftDays(custom.start, allowed), end: shiftDays(custom.end, allowed) });
             },
             children: "later \u2192"
           }
@@ -2610,7 +2706,7 @@ function VisitorInsightsTool(props) {
           style: { position: "relative" },
           children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Stack, { space: 4, children: [
             active && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 1, muted: true, children: active.blurb }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanelBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanelBoundary, { resetKey: activePanel, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               ReportPanel,
               {
                 tabId: active?.id ?? "overview",
@@ -2624,7 +2720,7 @@ function VisitorInsightsTool(props) {
                   setRange("custom");
                 }
               }
-            ) }, activePanel)
+            ) })
           ] })
         }
       )