@liiift-studio/sanity-visitor-insights 0.36.0 → 0.38.0

package/dist/index.d.mts

@@ -467,6 +467,20 @@ interface Series {
      * a site running at a flat 20% would show a full-height line and read as healthy.
      */
     domain?: [number, number];
+    /**
+     * The same series in the previous equivalent window, aligned by day OFFSET rather than by date.
+     *
+     * Drawn as a quiet ghost behind the row. Without it every row is an unanchored silhouette: a
+     * flat line at 60 and a flat line at 6,000 are the same picture, and "traffic looks lumpy" is an
+     * impression nobody can falsify. The comparison envelope is already fetched and already handed
+     * to the metric cards, so this costs a prop and no network.
+     *
+     * What it buys is bigger than a reference line. It turns the tool's most fragile asset — a dated
+     * alarm produced by a heuristic with a 21-day floor and a percentile threshold — from something
+     * the reader has to trust into something they can check: the coverage row's step reads against
+     * last period's flat line whether or not the detector fired.
+     */
+    comparison?: SeriesPoint[];
     points: SeriesPoint[];
     /**
      * What a lossier source saw of the same thing.

package/dist/index.d.ts

@@ -467,6 +467,20 @@ interface Series {
      * a site running at a flat 20% would show a full-height line and read as healthy.
      */
     domain?: [number, number];
+    /**
+     * The same series in the previous equivalent window, aligned by day OFFSET rather than by date.
+     *
+     * Drawn as a quiet ghost behind the row. Without it every row is an unanchored silhouette: a
+     * flat line at 60 and a flat line at 6,000 are the same picture, and "traffic looks lumpy" is an
+     * impression nobody can falsify. The comparison envelope is already fetched and already handed
+     * to the metric cards, so this costs a prop and no network.
+     *
+     * What it buys is bigger than a reference line. It turns the tool's most fragile asset — a dated
+     * alarm produced by a heuristic with a 21-day floor and a percentile threshold — from something
+     * the reader has to trust into something they can check: the coverage row's step reads against
+     * last period's flat line whether or not the detector fired.
+     */
+    comparison?: SeriesPoint[];
     points: SeriesPoint[];
     /**
      * What a lossier source saw of the same thing.

package/dist/index.js

@@ -491,6 +491,7 @@ function ProportionChart({ bars, format, totalLabel }) {
     ] })
   ] });
 }
+var MIN_RATE_DENOMINATOR = 30;
 function FunnelChart({ stages, measurement }) {
   const [activeKey, setActiveKey] = (0, import_react2.useState)(null);
   const refs = (0, import_react2.useRef)([]);
@@ -535,8 +536,8 @@ function FunnelChart({ stages, measurement }) {
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", style: { ...barTrack, height: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...barFill, width: `${width}%` } }) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: [
-              index === 0 ? "entry step" : `${formatPercent(share, 1)} of ${stages[0]?.label.toLowerCase()}`,
-              index > 1 && stage.conversionFromPrevious !== null && previous ? ` \xB7 ${formatPercent(stage.conversionFromPrevious, 1)} of ${previous.label.toLowerCase()}` : ""
+              index === 0 ? "entry step" : entry >= MIN_RATE_DENOMINATOR && stage.value >= MIN_RATE_DENOMINATOR ? `${formatPercent(share, 1)} of ${stages[0]?.label.toLowerCase()}` : "too few to give a rate",
+              index > 1 && stage.conversionFromPrevious !== null && previous ? (previous.value ?? 0) >= MIN_RATE_DENOMINATOR && stage.value >= MIN_RATE_DENOMINATOR ? ` \xB7 ${formatPercent(stage.conversionFromPrevious, 1)} of ${previous.label.toLowerCase()}` : ` \xB7 too few from ${previous.label.toLowerCase()} to give a rate` : ""
             ] })
           ]
         }
@@ -919,7 +920,7 @@ var import_d3_shape = require("d3-shape");
 var import_d3_array = require("d3-array");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var WIDTH = 760;
-var ROW_HEIGHT = 92;
+var BASELINE_GUTTER = 18;
 var AXIS_HEIGHT = 26;
 var GUTTER = 52;
 var RIGHT_PAD = 12;
@@ -1012,6 +1013,8 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
     return [...all].sort();
   }, [series]);
   const plotWidth = Math.max(120, measured - GUTTER - RIGHT_PAD);
+  const bandHeight = Math.round(Math.max(58, Math.min(150, plotWidth / 7)));
+  const rowHeight = bandHeight + LABEL_STRIP + BASELINE_GUTTER;
   import_react3.default.useLayoutEffect(() => {
     const frame = frameNode;
     if (!frame) return;
@@ -1029,7 +1032,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
     observer.observe(frame);
     return () => observer.disconnect();
   }, [frameNode]);
-  const height = TOP_PAD + series.length * ROW_HEIGHT + AXIS_HEIGHT;
+  const height = TOP_PAD + series.length * rowHeight + AXIS_HEIGHT;
   const x = (0, import_react3.useMemo)(() => {
     if (dates.length === 0) return null;
     return (0, import_d3_scale.scaleUtc)().domain([/* @__PURE__ */ new Date(`${dates[0]}T00:00:00Z`), /* @__PURE__ */ new Date(`${dates[dates.length - 1]}T00:00:00Z`)]).range([GUTTER, GUTTER + plotWidth]);
@@ -1216,17 +1219,17 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
                 x1: at,
                 x2: at,
                 y1: TOP_PAD,
-                y2: TOP_PAD + series.length * ROW_HEIGHT - 18,
+                y2: height - AXIS_HEIGHT + 4,
                 stroke: "currentColor",
                 strokeWidth: 1,
-                opacity: 0.08
+                opacity: 0.18
               },
               `grid-${date}`
             );
           }),
           series.map((row, rowIndex) => {
-            const top = TOP_PAD + rowIndex * ROW_HEIGHT;
-            const bottom = top + ROW_HEIGHT - 18;
+            const top = TOP_PAD + rowIndex * rowHeight;
+            const bottom = top + rowHeight - BASELINE_GUTTER;
             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;
@@ -1235,11 +1238,15 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
             const zeroY = y(0);
             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);
+            const lineGen = (0, import_d3_shape.line)().defined(defined).x(at).y((p) => y(p.value)).curve(import_d3_shape.curveLinear);
             const shortfallPoints = row.shortfall?.points ?? [];
             const byDate = new Map(shortfallPoints.map((p) => [p.date, p.value]));
-            const gapGen = (0, import_d3_shape.area)().defined((p) => p.value !== null && byDate.get(p.date) != null).x(at).y0((p) => y(byDate.get(p.date))).y1((p) => y(p.value)).curve(import_d3_shape.curveMonotoneX);
+            const gapGen = (0, import_d3_shape.area)().defined((p) => p.value !== null && byDate.get(p.date) != null).x(at).y0((p) => y(byDate.get(p.date))).y1((p) => y(p.value)).curve(import_d3_shape.curveLinear);
             const path = row.mark === "events" ? "" : lineGen(row.points) ?? "";
+            const ghost = row.comparison && row.comparison.length > 1 ? lineGen(row.comparison.slice(0, dates.length).map((point, i) => ({
+              date: dates[i] ?? point.date,
+              value: point.value
+            }))) ?? "" : "";
             const pitch = plotWidth / Math.max(1, dates.length - 1);
             const stemWidth = Math.max(1, Math.min(9, pitch > 2 ? pitch - 1 : pitch));
             const stems = row.mark === "events" ? row.points.filter((p) => p.value !== null && p.value !== 0) : [];
@@ -1258,6 +1265,17 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
               /* @__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: formatValue(0, row.unit, currency) }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { clipPath: `url(#${clipId})`, children: [
+                ghost && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "path",
+                  {
+                    d: ghost,
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 1,
+                    strokeDasharray: "2 3",
+                    opacity: 0.35
+                  }
+                ),
                 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) => {
@@ -1317,7 +1335,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
                   x1: at,
                   x2: at,
                   y1: TOP_PAD - 6,
-                  y2: TOP_PAD + series.length * ROW_HEIGHT - 18,
+                  y2: TOP_PAD + series.length * rowHeight - BASELINE_GUTTER,
                   stroke: "currentColor",
                   strokeWidth: 1.25,
                   strokeDasharray: "4 3",
@@ -1334,7 +1352,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
                 x: GUTTER,
                 y: TOP_PAD - 8,
                 width: Math.max(0, x(/* @__PURE__ */ new Date(`${dates[brushed[0]]}T00:00:00Z`)) - GUTTER),
-                height: series.length * ROW_HEIGHT - 10,
+                height: series.length * rowHeight - 10,
                 fill: "var(--card-bg-color, #ffffff)",
                 opacity: 0.72
               }
@@ -1345,7 +1363,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
                 x: x(/* @__PURE__ */ new Date(`${dates[brushed[1]]}T00:00:00Z`)),
                 y: TOP_PAD - 8,
                 width: Math.max(0, GUTTER + plotWidth - x(/* @__PURE__ */ new Date(`${dates[brushed[1]]}T00:00:00Z`))),
-                height: series.length * ROW_HEIGHT - 10,
+                height: series.length * rowHeight - 10,
                 fill: "var(--card-bg-color, #ffffff)",
                 opacity: 0.72
               }
@@ -1357,7 +1375,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
               x1: x(/* @__PURE__ */ new Date(`${hoveredDate}T00:00:00Z`)),
               x2: x(/* @__PURE__ */ new Date(`${hoveredDate}T00:00:00Z`)),
               y1: TOP_PAD - 6,
-              y2: TOP_PAD + series.length * ROW_HEIGHT - 18,
+              y2: TOP_PAD + series.length * rowHeight - 18,
               stroke: "currentColor",
               strokeWidth: 1,
               opacity: 0.8
@@ -1443,7 +1461,7 @@ var readoutRow = {
   gap: 14,
   flexWrap: "wrap",
   alignItems: "baseline",
-  minHeight: 18
+  minHeight: 54
 };
 var revealButton = {
   appearance: "none",
@@ -1577,6 +1595,8 @@ function OverviewPanel({ data, previous, onBrush }) {
               complete: true,
               unit: "count",
               points: (data.crossSource ?? []).map((d) => ({ date: d.date, value: d.vercelPageviews })),
+              // The same row last period, so the reader can see whether this shape is normal.
+              comparison: (previous?.crossSource ?? []).map((d) => ({ date: d.date, value: d.vercelPageviews })),
               shortfall: {
                 label: "Seen by GA4",
                 source: "GA4",
@@ -1616,6 +1636,12 @@ function OverviewPanel({ data, previous, onBrush }) {
               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
+              })),
+              // 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
               }))
             }] : [],
             ...data.crossSource?.some((d) => d.revenue !== null) ? [{