@liiift-studio/sanity-visitor-insights 0.74.0 → 0.75.0

package/dist/index.d.mts

@@ -297,6 +297,23 @@ interface FunnelStage {
     partial?: {
         from: string;
     };
+    /**
+     * This rung split by audience segment, in a stable order across rungs.
+     *
+     * The bar's WIDTH is unchanged — still this rung's share of the entry step — and the split
+     * subdivides that width. So a segment collapsing reads as its portion shrinking down the column,
+     * against a total that stays honestly anchored to entry.
+     *
+     * This replaces a second chart. `SurvivalLines` drew the same segments as normalised shares on
+     * its own axis, above a funnel drawing the pooled counts: two pictures of one fact, and the
+     * share-only one could not print a count, which at rungs of 23 and 12 and 7 is the only fact
+     * that survives. Its denominator floor also silenced it at exactly those rungs.
+     */
+    segments?: ReadonlyArray<{
+        key: string;
+        label: string;
+        value: number;
+    }>;
 }
 /** Props for FunnelChart. */
 interface FunnelChartProps {

package/dist/index.d.ts

@@ -297,6 +297,23 @@ interface FunnelStage {
     partial?: {
         from: string;
     };
+    /**
+     * This rung split by audience segment, in a stable order across rungs.
+     *
+     * The bar's WIDTH is unchanged — still this rung's share of the entry step — and the split
+     * subdivides that width. So a segment collapsing reads as its portion shrinking down the column,
+     * against a total that stays honestly anchored to entry.
+     *
+     * This replaces a second chart. `SurvivalLines` drew the same segments as normalised shares on
+     * its own axis, above a funnel drawing the pooled counts: two pictures of one fact, and the
+     * share-only one could not print a count, which at rungs of 23 and 12 and 7 is the only fact
+     * that survives. Its denominator floor also silenced it at exactly those rungs.
+     */
+    segments?: ReadonlyArray<{
+        key: string;
+        label: string;
+        value: number;
+    }>;
 }
 /** Props for FunnelChart. */
 interface FunnelChartProps {

package/dist/index.js

@@ -318,9 +318,6 @@ var MARKS = {
   "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" },
-  "shift.now": { key: "vercel", alpha: 1, role: "data", note: "A channel this period" },
-  "shift.before": { key: "comparison", alpha: 1, role: "data", note: "The same channel last period \u2014 context, not a second answer" },
-  "shift.link": { key: "comparison", alpha: 0.55, role: "fill", boundary: "shift.before", note: "The distance between the two, which is the finding" },
   // A segment per colour rather than a dash pattern per segment. Dash was the ONLY channel
   // separating these lines, and it is the one channel `preserveAspectRatio="none"` distorted —
   // so two segments could be drawn identically on a wide pane. The keys are reused from the
@@ -662,6 +659,23 @@ function formatDay(iso) {
   if (Number.isNaN(date.getTime())) return iso;
   return `${date.getUTCDate()} ${date.toLocaleString("en-GB", { month: "short", timeZone: "UTC" })}`;
 }
+function segmentColour(index) {
+  const names = ["survival.line", "survival.line.2", "survival.line.3", "survival.line.4"];
+  return mark(names[index % names.length]);
+}
+function segmentKeys(stages) {
+  const seen = /* @__PURE__ */ new Map();
+  for (const stage of stages) {
+    for (const segment of stage.segments ?? []) {
+      if (segment.value > 0 && !seen.has(segment.key)) seen.set(segment.key, segment.label);
+    }
+  }
+  return [...seen].map(([key, label]) => ({ key, label }));
+}
+function segmentShare(value, whole) {
+  if (!(whole > 0) || !(value > 0)) return 0;
+  return Math.min(1, value / whole);
+}
 function rateLine(stage, index, entry, share, entryLabel) {
   if (index === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: "100% \u2014 everyone who arrived" });
   if (stage.partial) {
@@ -703,6 +717,8 @@ function FunnelChart({ stages, measurement }) {
       const share = entry > 0 ? stage.value / entry : 0;
       const width = Math.max(1.5, Math.min(1, share) * 100);
       const active = activeKey === stage.key;
+      const hasSplit = (stage.segments?.length ?? 0) > 0;
+      const remainder = hasSplit ? Math.max(0, 1 - (stage.segments ?? []).reduce((sum, s) => sum + segmentShare(s.value, stage.value), 0)) : 0;
       const delta = previous ? previous.value - stage.value : 0;
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { style: funnelItem, children: [
         previous && gapLabel(delta, measurement, entry) !== "" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: funnelGapStyle(measurement === "sequence" && delta > 0 && entry > 0), children: [
@@ -739,13 +755,46 @@ function FunnelChart({ stages, measurement }) {
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, weight: "medium", children: stage.label }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, weight: "semibold", children: formatCount(stage.value) })
               ] }),
-              stage.partial ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: partialSlot }) : /* @__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}%` } }) }),
+              stage.partial ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: partialSlot }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", style: { ...barTrack, height: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  style: {
+                    ...barFill,
+                    width: `${width}%`,
+                    display: "flex",
+                    overflow: "hidden",
+                    // Transparent when split. Left as the ordinary fill, the parent's own
+                    // colour showed through wherever the segments did not reach — and on a
+                    // rung where they sum to 451 of 475 that painted the missing 24 in the
+                    // FIRST segment's colour, reading as a third segment of it.
+                    ...hasSplit ? { background: "transparent" } : {}
+                  },
+                  children: [
+                    (stage.segments ?? []).map((segment, segmentIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        style: {
+                          width: `${segmentShare(segment.value, stage.value) * 100}%`,
+                          background: segmentColour(segmentIndex),
+                          height: "100%"
+                        }
+                      },
+                      segment.key
+                    )),
+                    hasSplit && remainder > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: `${remainder * 100}%`, background: mark("bar.track"), height: "100%" } })
+                  ]
+                }
+              ) }),
               rateLine(stage, index, entry, share, stages[0]?.label ?? "")
             ]
           }
         )
       ] }, stage.key);
     }) }),
+    segmentKeys(stages).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: funnelSegmentKey, children: segmentKeys(stages).map((segment, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: { ...hoverSwatch, background: segmentColour(index), display: "inline-block", marginRight: 6 } }),
+      segment.label
+    ] }, segment.key)) }),
     stages.some((stage) => stage.partial) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: "Steps with no bar were only tracked for part of this period, so they cover fewer days than the ones above and cannot be drawn against them. Their counts are exact for the days they do cover." }),
     withheldAny && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: [
       "Shares are shown only for steps at least ",
@@ -764,6 +813,7 @@ function gapLabel(delta, measurement, entry = 0) {
   return `${formatCount(-delta)} more \u2014 not a subset of the step above`;
 }
 var partialSlot = { height: 10 };
+var funnelSegmentKey = { display: "flex", gap: 14, flexWrap: "wrap", paddingTop: 4 };
 var funnelList = { listStyle: "none", margin: 0, padding: 0 };
 var funnelItem = { display: "grid", gap: 4 };
 function funnelGapStyle(hasBar) {
@@ -989,170 +1039,6 @@ function EstimateDotPlot({
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: "The rule marks 100%." })
   ] });
 }
-function SurvivalLines({
-  segments,
-  stepLabels,
-  partialSteps = [],
-  minDenominator = MIN_RATE_DENOMINATOR
-}) {
-  const [active, setActive] = import_react2.default.useState(null);
-  const [steppedByKey, setSteppedByKey] = import_react2.default.useState(false);
-  if (segments.length < 2 || stepLabels.length < 2) return null;
-  const width = 320;
-  const height = 132;
-  const x = (i) => i / (stepLabels.length - 1) * width;
-  const drawn = segments.map((segment, index) => {
-    const entry = segment.values[0];
-    if (entry === null || entry === void 0 || entry <= 0) return null;
-    const points = [];
-    const shares = [];
-    for (let i = 0; i < segment.values.length && i < stepLabels.length; i++) {
-      const value = segment.values[i];
-      const previous = i === 0 ? entry : segment.values[i - 1];
-      if (value === null || value === void 0) break;
-      if (i > 0 && (previous === null || previous === void 0 || previous < minDenominator)) break;
-      if (partialSteps.includes(i)) break;
-      const share = Math.min(1, value / entry);
-      points.push([x(i), height - share * height]);
-      shares.push(share);
-    }
-    if (points.length < 2) return null;
-    return { segment, index, points, shares, colour: segmentColour(index) };
-  });
-  const lines = drawn.filter((d) => d !== null);
-  if (lines.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 3, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: survivalFrame, children: [
-      [1, 0.5, 0].map((level) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: survivalYLabel(level), children: level === 1 ? "100%" : level === 0.5 ? "50%" : "0%" }, level)),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "svg",
-        {
-          viewBox: `0 0 ${width} ${height}`,
-          preserveAspectRatio: "none",
-          style: { width: "100%", height: 150, overflow: "visible" },
-          role: "img",
-          "aria-label": survivalSummary(lines, stepLabels),
-          children: [
-            [1, 0.5, 0].map((level) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "line",
-              {
-                x1: 0,
-                x2: width,
-                y1: height * (1 - level),
-                y2: height * (1 - level),
-                stroke: mark("survival.grid"),
-                strokeWidth: 0.6,
-                vectorEffect: "non-scaling-stroke"
-              },
-              level
-            )),
-            stepLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "rect",
-              {
-                x: i === 0 ? 0 : x(i) - width / (stepLabels.length - 1) / 2,
-                y: 0,
-                width: width / (stepLabels.length - 1) / (i === 0 || i === stepLabels.length - 1 ? 2 : 1),
-                height,
-                fill: "transparent",
-                onMouseEnter: () => {
-                  setSteppedByKey(false);
-                  setActive(i);
-                },
-                onMouseLeave: () => setActive(null)
-              },
-              label
-            )),
-            active !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "line",
-              {
-                x1: x(active),
-                x2: x(active),
-                y1: 0,
-                y2: height,
-                stroke: mark("survival.grid"),
-                strokeWidth: 1
-              }
-            ),
-            lines.map(({ segment, points, colour }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "polyline",
-              {
-                points: points.map(([px, py]) => `${px},${py}`).join(" "),
-                fill: "none",
-                stroke: colour,
-                strokeWidth: 1.6,
-                vectorEffect: "non-scaling-stroke",
-                strokeLinejoin: "round"
-              },
-              segment.key
-            )),
-            active !== null && lines.map(({ segment, points, colour }) => {
-              const point = points[active];
-              if (!point) return null;
-              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "line",
-                {
-                  x1: point[0],
-                  x2: point[0],
-                  y1: point[1],
-                  y2: point[1],
-                  stroke: colour,
-                  strokeWidth: 6,
-                  strokeLinecap: "round",
-                  vectorEffect: "non-scaling-stroke"
-                },
-                segment.key
-              );
-            })
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: survivalAxis, children: stepLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        type: "button",
-        style: survivalTick(i === active, i, stepLabels.length),
-        "aria-label": `Read ${label}`,
-        onMouseEnter: () => {
-          setSteppedByKey(false);
-          setActive(i);
-        },
-        onMouseLeave: () => setActive(null),
-        onFocus: () => {
-          setSteppedByKey(true);
-          setActive(i);
-        },
-        onBlur: () => setActive(null),
-        children: label
-      },
-      label
-    )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: survivalLegend, "aria-live": steppedByKey ? "polite" : "off", children: lines.map(({ segment, shares, colour }) => {
-      const share = active === null ? null : shares[active];
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 0, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { ...hoverSwatch, background: colour, display: "inline-block", marginRight: 6 } }),
-        segment.label,
-        active !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { style: survivalReadoutValue, children: [
-          "\xA0",
-          share === null || share === void 0 ? "not measured here" : formatPercent(share, 0)
-        ] })
-      ] }, segment.key);
-    }) })
-  ] });
-}
-function segmentColour(index) {
-  const names = ["survival.line", "survival.line.2", "survival.line.3", "survival.line.4"];
-  return mark(names[index % names.length]);
-}
-function survivalSummary(lines, stepLabels) {
-  const parts = lines.map(({ segment, shares }) => {
-    const last = shares.length - 1;
-    const share = shares[last];
-    const reached = stepLabels[last] ?? "the last measured step";
-    return share === null || share === void 0 ? `${segment.label} could not be followed past ${reached}` : `${segment.label} ${formatPercent(share, 0)} by ${reached}`;
-  });
-  return `Share of each segment still present at each step, starting from ${stepLabels[0]}. ${parts.join(". ")}.`;
-}
 function RatioFigure({
   value,
   format,
@@ -1428,82 +1314,6 @@ var estimateDot = {
   borderRadius: "50%",
   background: mark("estimate.dot")
 };
-var shiftTrack = {
-  position: "relative",
-  height: 16,
-  borderRadius: 2,
-  background: mark("bar.track")
-};
-var shiftLink = {
-  position: "absolute",
-  top: 7,
-  height: 2,
-  background: mark("shift.link")
-};
-var shiftBefore = {
-  position: "absolute",
-  top: 3,
-  width: 10,
-  height: 10,
-  marginLeft: -5,
-  borderRadius: "50%",
-  border: `2px solid ${mark("shift.before")}`,
-  background: "transparent"
-};
-var shiftNow = {
-  position: "absolute",
-  top: 3,
-  width: 10,
-  height: 10,
-  marginLeft: -5,
-  borderRadius: "50%",
-  background: mark("shift.now")
-};
-var survivalLegend = { display: "flex", gap: 14, flexWrap: "wrap" };
-var survivalFrame = { paddingLeft: 34, position: "relative" };
-var survivalAxis = {
-  position: "relative",
-  // Reserves the row's height, since the ticks inside it are positioned.
-  height: 30,
-  marginLeft: 34
-};
-function survivalTick(activeTick, index, count) {
-  const at = count > 1 ? index / (count - 1) * 100 : 50;
-  return {
-    position: "absolute",
-    left: `${at}%`,
-    // The ends align to the plot edge; everything between is centred on its vertex.
-    transform: index === 0 ? "none" : index === count - 1 ? "translateX(-100%)" : "translateX(-50%)",
-    appearance: "none",
-    background: "transparent",
-    border: "none",
-    borderTop: `2px solid ${activeTick ? "currentColor" : "transparent"}`,
-    color: "inherit",
-    opacity: activeTick ? 1 : 0.7,
-    font: "inherit",
-    fontSize: "0.72em",
-    fontWeight: activeTick ? 600 : 400,
-    padding: "6px 4px",
-    minHeight: 24,
-    cursor: "pointer",
-    whiteSpace: "nowrap"
-  };
-}
-function survivalYLabel(level) {
-  return {
-    position: "absolute",
-    left: 0,
-    // 150 is the plot's rendered height; the label is nudged up by half its own line so it sits
-    // on the rule rather than under it.
-    top: 150 * (1 - level) - 6,
-    width: 28,
-    textAlign: "right",
-    fontSize: 10,
-    opacity: 0.7,
-    fontVariantNumeric: "tabular-nums"
-  };
-}
-var survivalReadoutValue = { fontVariantNumeric: "tabular-nums" };
 var ratioRow = {
   display: "flex",
   alignItems: "baseline",
@@ -3164,33 +2974,25 @@ function JourneyPanel({ data }) {
       label: step.label,
       value: step.count.value,
       conversionFromPrevious: step.conversionFromPrevious,
+      // The device split, subdividing this rung's bar rather than drawn as a second chart.
+      // Only counts that are present and whole travel: a segment GA4 stopped reporting is
+      // left out of the split rather than drawn as a shrunken share of one.
+      ...segments.length > 0 ? {
+        segments: segments.flatMap((segment) => {
+          const cell = segment.steps.find((s) => s.key === step.key);
+          const value = cell ? metricSortValue(cell.count) : null;
+          return value === null ? [] : [{ key: segment.key, label: segment.label, value }];
+        })
+      } : {},
       ...step.count.status === "partial" && step.count.coveredFrom ? { partial: { from: formatDay(step.count.coveredFrom) } } : {}
     }]
   );
-  const wholeSpine = spine.filter((step) => {
-    const cell = allSteps.find((s) => s.key === step.key);
-    return cell?.count.status !== "partial";
-  });
   const tracked = data.measurement === "sequence";
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 4, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: tracked ? "transparent" : "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: tracked ? "Tracked path" : "Not a tracked path" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: tracked, children: data.approximationNote })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      SurvivalLines,
-      {
-        segments: segments.map((segment) => ({
-          key: segment.key,
-          label: segment.label,
-          values: wholeSpine.map((step) => {
-            const cell = segment.steps.find((s) => s.key === step.key);
-            return cell ? metricSortValue(cell.count) : null;
-          })
-        })),
-        stepLabels: wholeSpine.map((step) => step.label)
-      }
-    ),
     segments.length >= 2 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       ChartData,
       {