@liiift-studio/sanity-visitor-insights 0.52.0 → 0.54.0

package/dist/index.d.mts

@@ -190,17 +190,6 @@ interface DeltaProps {
     /** Render as a percentage-point change rather than a percentage change of a percentage. */
     unit?: 'count' | 'percent';
 }
-/**
- * A period-over-period change.
- *
- * Every figure in this tool used to be a bare level, which at these volumes is close to
- * meaningless: "389 sessions" is neither good nor bad without last week beside it, and the
- * 24 August collapse would have announced itself on every panel as a delta while going unnoticed
- * for over a week as a level.
- *
- * Renders nothing at all when there is no comparison — an absent delta must never be drawn as
- * "no change", which is a different and much more reassuring claim.
- */
 declare function Delta({ current, previous, riseIsGood, unit }: DeltaProps): React.ReactElement | null;
 interface MetricFigureProps {
     metric: MetricValue;

package/dist/index.d.ts

@@ -190,17 +190,6 @@ interface DeltaProps {
     /** Render as a percentage-point change rather than a percentage change of a percentage. */
     unit?: 'count' | 'percent';
 }
-/**
- * A period-over-period change.
- *
- * Every figure in this tool used to be a bare level, which at these volumes is close to
- * meaningless: "389 sessions" is neither good nor bad without last week beside it, and the
- * 24 August collapse would have announced itself on every panel as a delta while going unnoticed
- * for over a week as a level.
- *
- * Renders nothing at all when there is no comparison — an absent delta must never be drawn as
- * "no change", which is a different and much more reassuring claim.
- */
 declare function Delta({ current, previous, riseIsGood, unit }: DeltaProps): React.ReactElement | null;
 interface MetricFigureProps {
     metric: MetricValue;

package/dist/index.js

@@ -288,6 +288,32 @@ function seriesFill(key, alpha = REGION_ALPHA) {
   const b = parseInt(hex.slice(5, 7), 16);
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
+var MARKS = {
+  "chart.line": { key: "vercel", alpha: 1, role: "data", note: "A source series in the timeline" },
+  "chart.lossyLine": { key: "ga4Pageviews", alpha: 1, role: "data", note: "The lossier source, dashed" },
+  "chart.coverage": { key: "ga4Sessions", alpha: 1, role: "data", note: "Share one source saw of another" },
+  "chart.stem": { key: "orders", alpha: 1, role: "data", note: "One day that had orders" },
+  "chart.zeroTick": { key: "orders", alpha: 1, role: "data", note: "A day MEASURED at zero \u2014 the package's founding distinction" },
+  "chart.regionEdge": { key: "ga4Pageviews", alpha: 1, role: "data", note: "The upper boundary of the shortfall region" },
+  "chart.region": {
+    key: "ga4Pageviews",
+    alpha: 0.22,
+    role: "fill",
+    boundary: "chart.regionEdge",
+    note: "What the lossier source missed. Light on purpose \u2014 the line it covers must stay readable"
+  },
+  "chart.ghost": { key: "neutral", alpha: 0.55, role: "furniture", note: "The same window last period, behind everything" },
+  "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" }
+};
+function mark(name) {
+  const m = MARKS[name];
+  if (!m) throw new Error(`Unknown mark: ${name}`);
+  if (m.key === "neutral") return `rgba(127, 127, 127, ${m.alpha})`;
+  return seriesFill(m.key, m.alpha);
+}
 
 // src/studio/Figure.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -328,6 +354,7 @@ function formatMoney(value, currency, fractionDigits = 0) {
     return `${formatCount(Math.round(value))} ${currency}`;
   }
 }
+var MIN_DELTA_BASE = 25;
 function Delta({ current, previous, riseIsGood = true, unit = "count" }) {
   if (!Number.isFinite(current) || !Number.isFinite(previous)) return null;
   const now = current;
@@ -342,7 +369,8 @@ function Delta({ current, previous, riseIsGood = true, unit = "count" }) {
   const tone = rising === riseIsGood ? "good" : "bad";
   const arrow = rising ? "\u2191" : "\u2193";
   const baseline = unit === "percent" ? `${before.toFixed(1)}%` : formatCount(before);
-  const magnitude = change === null ? rising ? "new" : "gone" : unit === "percent" ? `${rising ? "+" : ""}${absolute.toFixed(1)} pts` : `${rising ? "+" : ""}${formatPercent(change, 0)}`;
+  const tooFewToRate = change !== null && unit !== "percent" && Math.abs(before) < MIN_DELTA_BASE;
+  const magnitude = change === null ? rising ? "new" : "gone" : tooFewToRate ? "" : unit === "percent" ? `${rising ? "+" : ""}${absolute.toFixed(1)} pts` : `${rising ? "+" : ""}${formatPercent(change, 0)}`;
   return (
     // The baseline is printed, not hidden in a `title`. At seven orders a quarter an 18% move
     // might be one order, so "from 6" is the fact and the percentage is the decoration — and a
@@ -548,9 +576,20 @@ function FunnelChart({ stages, measurement }) {
     const active = activeKey === stage.key;
     const delta = previous ? previous.value - stage.value : 0;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { style: funnelItem, children: [
-      previous && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: funnelGap, "aria-hidden": "true", children: [
-        measurement === "sequence" && delta > 0 && entry > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: lostTrack, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...lostFill, width: `${Math.max(1, Math.min(1, delta / entry) * 100)}%` } }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: gapLabel(delta, measurement) })
+      previous && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: funnelGap, children: [
+        measurement === "sequence" && delta > 0 && entry > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", style: { ...barTrack, height: 6, flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              marginLeft: "auto",
+              height: "100%",
+              borderRadius: 2,
+              background: mark("bar.lost"),
+              width: `${Math.max(1, Math.min(1, delta / entry) * 100)}%`
+            }
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: gapLabel(delta, measurement, entry) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "div",
@@ -582,9 +621,13 @@ function FunnelChart({ stages, measurement }) {
     ] }, stage.key);
   }) });
 }
-function gapLabel(delta, measurement) {
+function gapLabel(delta, measurement, entry = 0) {
   if (delta === 0) return measurement === "sequence" ? "no drop-off" : "no difference";
-  if (delta > 0) return measurement === "sequence" ? `\u2212${formatCount(delta)} did not continue` : `${formatCount(delta)} fewer`;
+  if (delta > 0) {
+    if (measurement !== "sequence") return `${formatCount(delta)} fewer`;
+    const share = entry > 0 ? ` \u2014 ${formatPercent(delta / entry, 0)} of everyone who landed` : "";
+    return `\u2212${formatCount(delta)} did not continue${share}`;
+  }
   return `${formatCount(-delta)} more \u2014 not a subset of the step above`;
 }
 var funnelList = { listStyle: "none", margin: 0, padding: 0 };
@@ -596,19 +639,6 @@ var funnelGap = {
   gap: 8,
   padding: "4px 2px"
 };
-var lostTrack = {
-  width: "38%",
-  maxWidth: 200,
-  height: 6,
-  borderRadius: 2,
-  overflow: "hidden",
-  background: "currentColor",
-  opacity: 0.1,
-  // Right to left: the bar grows back toward the funnel it came out of, which reads as leaving
-  // rather than as another quantity accumulating alongside.
-  display: "flex",
-  justifyContent: "flex-end"
-};
 var lostFill = {
   height: "100%",
   borderRadius: 2,
@@ -629,18 +659,18 @@ function funnelStage(active) {
 var barFill = {
   height: "100%",
   borderRadius: 2,
-  // The reference blue, as everywhere else the tool draws "people who were here". Previously
-  // currentColor at 0.55, which made the funnel a stack of grey bars whose only variable was
-  // length — legible, and giving the eye nothing to hold on to across five rungs.
-  background: SERIES.vercel,
-  opacity: 0.85
+  // Through the registry, not a hex plus an opacity chosen here. Drawn at 0.85 this sat at 2.77:1
+  // on the light theme while palette.test.ts asserted 3.42:1 against the bare constant — the test
+  // measured a colour that was never drawn. MARKS is what both now read.
+  background: mark("bar.fill")
 };
 var barTrack = {
   height: 8,
   borderRadius: 2,
   overflow: "hidden",
-  background: "currentColor",
-  opacity: 0.12
+  // Furniture, not data: a rail is not a value, so 3:1 does not apply to it — but it is declared
+  // in MARKS so that exemption is stated somewhere a reader can check rather than assumed.
+  background: mark("bar.track")
 };
 var barHeader = {
   display: "flex",
@@ -1431,9 +1461,8 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
                   x2: at,
                   y1: TOP_PAD,
                   y2: height - AXIS_HEIGHT + 4,
-                  stroke: "currentColor",
-                  strokeWidth: 1,
-                  opacity: 0.18
+                  stroke: mark("chart.grid"),
+                  strokeWidth: 1
                 },
                 `grid-${date}`
               );
@@ -1465,7 +1494,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
               const stems = row.mark === "events" ? row.points.filter((p) => p.value !== null && p.value !== 0) : [];
               const zeroes = row.mark === "events" && pitch >= 6 ? row.points.filter((p) => p.value === 0) : [];
               const gap = row.shortfall ? gapGen(row.points) ?? "" : "";
-              const shortfallLine = row.shortfall && revealed ? lineGen(shortfallPoints) ?? "" : "";
+              const shortfallLine = row.shortfall ? lineGen(shortfallPoints) ?? "" : "";
               const clipId = `${instanceId}-row-${rowIndex}`;
               return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: GUTTER, y: plotTop, width: plotWidth, height: Math.max(1, bottom - plotTop) }) }) }),
@@ -1484,21 +1513,29 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
                     {
                       d: ghost,
                       fill: "none",
-                      stroke: "currentColor",
+                      stroke: mark("chart.ghost"),
                       strokeWidth: 1,
-                      strokeDasharray: "2 3",
-                      opacity: 0.35
+                      strokeDasharray: "2 3"
                     }
                   ),
                   gap && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "path",
                     {
                       d: gap,
-                      fill: shortfallStroke ? seriesFill(colorFor(row.shortfall.source, row.unit, row.shortfall.color), 0.3) : "currentColor",
+                      fill: shortfallStroke ? seriesFill(colorFor(row.shortfall.source, row.unit, row.shortfall.color), MARKS["chart.region"].alpha) : "currentColor",
                       opacity: shortfallStroke ? 1 : 0.48
                     }
                   ),
-                  shortfallLine && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: shortfallLine, fill: "none", stroke: shortfallStroke ?? "currentColor", strokeWidth: 1.5, strokeDasharray: "6 4", opacity: 0.8 }),
+                  shortfallLine && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "path",
+                    {
+                      d: shortfallLine,
+                      fill: "none",
+                      stroke: mark("chart.regionEdge"),
+                      strokeWidth: 1.5,
+                      strokeDasharray: "6 4"
+                    }
+                  ),
                   zeroes.map((p) => {
                     const cx = at(p);
                     if (!Number.isFinite(cx)) return null;
@@ -1509,8 +1546,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
                         y: zeroY - 3,
                         width: stemWidth,
                         height: 3,
-                        fill: stroke,
-                        opacity: 0.7
+                        fill: stroke
                       },
                       `zero-${p.date}`
                     );
@@ -1526,8 +1562,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
                         y: Math.min(headY, zeroY),
                         width: stemWidth,
                         height: Math.max(1.5, Math.abs(zeroY - headY)),
-                        fill: stroke,
-                        opacity: 0.9
+                        fill: stroke
                       },
                       p.date
                     );
@@ -1539,8 +1574,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
                       fill: "none",
                       stroke,
                       strokeWidth: 2,
-                      strokeDasharray: row.complete ? void 0 : "6 4",
-                      opacity: row.complete ? 0.95 : 0.7
+                      strokeDasharray: row.complete ? void 0 : "6 4"
                     }
                   )
                 ] })
@@ -1897,9 +1931,9 @@ function OverviewPanel({ data, previous, onBrush }) {
           const average = averageOrderValue(data);
           const value = metricSortValue(average);
           if (value === null) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: average, label: "Average order value" });
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: figureRow, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 4, children: formatMoney(value, data.currency ?? null) }),
-            average.status === "partial" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "partial" })
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: figureRow, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 4, children: formatMoney(value, data.currency ?? null) }) }),
+            average.status === "partial" && average.note && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: average.note })
           ] });
         })(),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "From your own orders, so it is exact \u2014 but only across the orders that carry an amount, which is what the revenue figure covers." })