@liiift-studio/sanity-visitor-insights 0.65.0 → 0.67.0

package/dist/index.d.mts

@@ -214,30 +214,6 @@ interface MetricFigureProps {
  * Screen readers get the reason text rather than an unexplained dash.
  */
 declare function MetricFigure({ metric, label, size, unit }: MetricFigureProps): React.ReactElement;
-/** Props for ComparisonBar. */
-interface ComparisonBarProps {
-    label: string;
-    metric: MetricValue;
-    /** Largest value across the sibling bars, used to scale width. */
-    max: number;
-    /**
-     * What full width means, named.
-     *
-     * A ComparisonBar scales to the largest sibling, so a full bar means only "biggest of these" —
-     * and unlike the other two bar idioms, which print their share and their total, this one said
-     * nothing at all. There was a `tone` prop instead, which both call sites passed different
-     * values to and which the component destructured and never used.
-     */
-    outOf?: string;
-}
-/**
- * A horizontal bar with its value printed alongside.
- *
- * Deliberately CSS rather than a charting library: these panels compare and rank a handful of
- * values, which a labelled bar does as well as a chart while avoiding a large dependency in the
- * Studio bundle and the theme-token bridging that a chart library would need for light and dark.
- */
-declare function ComparisonBar({ label, metric, max, outOf }: ComparisonBarProps): React.ReactElement;
 /** Props for ChartData. */
 interface ChartDataProps<Row> {
     /** What the disclosure is called. Names the chart it belongs to. */
@@ -655,4 +631,4 @@ interface VisitorInsightsPluginOptions {
  */
 declare const visitorInsights: sanity.Plugin<VisitorInsightsPluginOptions>;
 
-export { AcquisitionData, AcquisitionPanel, ChartData, type ChartDataProps, ComparisonBar, CrossSourceTimeline, type CrossSourceTimelineProps, DataHealthPanel, Delta, type DeltaProps, DiagnosticReport, DiagnosticsPanel, FunnelChart, JourneyData, JourneyPanel, MeasurementHealthData, DataHealthPanel as MeasurementHealthPanel, MetricFigure, MetricValue, NoticeList, OverviewPanel, type ProportionBar, ProportionChart, type ProportionChartProps, RangeKey, ReportEnvelope, ReportName, type ReportState, type Series, type SeriesPoint, type SortColumn, SortableTable, type SortableTableProps, type TimelineMarker, TypefaceInterestData, TypefaceInterestPanel, type UseReportOptions, type ViewState, type VisitorInsightsPluginOptions, VisitorInsightsTool, type VisitorInsightsToolProps, decodeView, visitorInsights as default, encodeView, formatCount, formatMoney, formatPercent, knownShortfall, mergeIntoHash, useReport, visitorInsights };
+export { AcquisitionData, AcquisitionPanel, ChartData, type ChartDataProps, CrossSourceTimeline, type CrossSourceTimelineProps, DataHealthPanel, Delta, type DeltaProps, DiagnosticReport, DiagnosticsPanel, FunnelChart, JourneyData, JourneyPanel, MeasurementHealthData, DataHealthPanel as MeasurementHealthPanel, MetricFigure, MetricValue, NoticeList, OverviewPanel, type ProportionBar, ProportionChart, type ProportionChartProps, RangeKey, ReportEnvelope, ReportName, type ReportState, type Series, type SeriesPoint, type SortColumn, SortableTable, type SortableTableProps, type TimelineMarker, TypefaceInterestData, TypefaceInterestPanel, type UseReportOptions, type ViewState, type VisitorInsightsPluginOptions, VisitorInsightsTool, type VisitorInsightsToolProps, decodeView, visitorInsights as default, encodeView, formatCount, formatMoney, formatPercent, knownShortfall, mergeIntoHash, useReport, visitorInsights };

package/dist/index.d.ts

@@ -214,30 +214,6 @@ interface MetricFigureProps {
  * Screen readers get the reason text rather than an unexplained dash.
  */
 declare function MetricFigure({ metric, label, size, unit }: MetricFigureProps): React.ReactElement;
-/** Props for ComparisonBar. */
-interface ComparisonBarProps {
-    label: string;
-    metric: MetricValue;
-    /** Largest value across the sibling bars, used to scale width. */
-    max: number;
-    /**
-     * What full width means, named.
-     *
-     * A ComparisonBar scales to the largest sibling, so a full bar means only "biggest of these" —
-     * and unlike the other two bar idioms, which print their share and their total, this one said
-     * nothing at all. There was a `tone` prop instead, which both call sites passed different
-     * values to and which the component destructured and never used.
-     */
-    outOf?: string;
-}
-/**
- * A horizontal bar with its value printed alongside.
- *
- * Deliberately CSS rather than a charting library: these panels compare and rank a handful of
- * values, which a labelled bar does as well as a chart while avoiding a large dependency in the
- * Studio bundle and the theme-token bridging that a chart library would need for light and dark.
- */
-declare function ComparisonBar({ label, metric, max, outOf }: ComparisonBarProps): React.ReactElement;
 /** Props for ChartData. */
 interface ChartDataProps<Row> {
     /** What the disclosure is called. Names the chart it belongs to. */
@@ -655,4 +631,4 @@ interface VisitorInsightsPluginOptions {
  */
 declare const visitorInsights: sanity.Plugin<VisitorInsightsPluginOptions>;
 
-export { AcquisitionData, AcquisitionPanel, ChartData, type ChartDataProps, ComparisonBar, CrossSourceTimeline, type CrossSourceTimelineProps, DataHealthPanel, Delta, type DeltaProps, DiagnosticReport, DiagnosticsPanel, FunnelChart, JourneyData, JourneyPanel, MeasurementHealthData, DataHealthPanel as MeasurementHealthPanel, MetricFigure, MetricValue, NoticeList, OverviewPanel, type ProportionBar, ProportionChart, type ProportionChartProps, RangeKey, ReportEnvelope, ReportName, type ReportState, type Series, type SeriesPoint, type SortColumn, SortableTable, type SortableTableProps, type TimelineMarker, TypefaceInterestData, TypefaceInterestPanel, type UseReportOptions, type ViewState, type VisitorInsightsPluginOptions, VisitorInsightsTool, type VisitorInsightsToolProps, decodeView, visitorInsights as default, encodeView, formatCount, formatMoney, formatPercent, knownShortfall, mergeIntoHash, useReport, visitorInsights };
+export { AcquisitionData, AcquisitionPanel, ChartData, type ChartDataProps, CrossSourceTimeline, type CrossSourceTimelineProps, DataHealthPanel, Delta, type DeltaProps, DiagnosticReport, DiagnosticsPanel, FunnelChart, JourneyData, JourneyPanel, MeasurementHealthData, DataHealthPanel as MeasurementHealthPanel, MetricFigure, MetricValue, NoticeList, OverviewPanel, type ProportionBar, ProportionChart, type ProportionChartProps, RangeKey, ReportEnvelope, ReportName, type ReportState, type Series, type SeriesPoint, type SortColumn, SortableTable, type SortableTableProps, type TimelineMarker, TypefaceInterestData, TypefaceInterestPanel, type UseReportOptions, type ViewState, type VisitorInsightsPluginOptions, VisitorInsightsTool, type VisitorInsightsToolProps, decodeView, visitorInsights as default, encodeView, formatCount, formatMoney, formatPercent, knownShortfall, mergeIntoHash, useReport, visitorInsights };

package/dist/index.js

@@ -32,7 +32,6 @@ var index_exports = {};
 __export(index_exports, {
   AcquisitionPanel: () => AcquisitionPanel,
   ChartData: () => ChartData,
-  ComparisonBar: () => ComparisonBar,
   CrossSourceTimeline: () => CrossSourceTimeline,
   DataHealthPanel: () => DataHealthPanel,
   Delta: () => Delta,
@@ -310,7 +309,12 @@ var MARKS = {
   "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" }
+  "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: "neutral", alpha: 0.55, role: "furniture", note: "The same channel last period \u2014 context, not a second answer" },
+  "shift.link": { key: "neutral", alpha: 0.35, role: "furniture", note: "The distance between the two, which is the finding" },
+  "survival.line": { key: "vercel", alpha: 1, role: "data", note: "One audience segment falling through a funnel" },
+  "survival.grid": { key: "neutral", alpha: 0.18, role: "furniture", note: "The 50% and 100% references a survival line is read against" }
 };
 function mark(name) {
   const m = MARKS[name];
@@ -496,30 +500,6 @@ function MetricFigure({ metric, label, size = 4, unit = "count" }) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size, children: formatted });
 }
-function ComparisonBar({ label, metric, max, outOf }) {
-  const value = metric.status === "unavailable" ? null : metric.value;
-  const width = value !== null && max > 0 ? Math.max(2, value / max * 100) : 0;
-  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, weight: "medium", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MetricFigure, { metric, label, size: 1 })
-    ] }),
-    value === null ? (
-      // A dashed rail, not a zero-width bar: absence must not read as a measured zero.
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_sanity_ui_compat.Card,
-        {
-          "aria-hidden": "true",
-          radius: 2,
-          tone: "transparent",
-          border: true,
-          style: { height: 8, borderStyle: "dashed" }
-        }
-      )
-    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", style: barTrack, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...barFill, width: `${width}%` } }) }),
-    outOf && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: outOf })
-  ] });
-}
 function ChartData({ label, rows, columns, rowKey, exportName, note, filterOn }) {
   if (rows.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", { style: disclosureBlock, children: [
@@ -893,6 +873,73 @@ function EstimateDotPlot({
     /* @__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 SurvivalLines({
+  segments,
+  stepLabels,
+  minDenominator = MIN_RATE_DENOMINATOR
+}) {
+  if (segments.length < 2 || stepLabels.length < 2) return null;
+  const width = 100;
+  const height = 46;
+  const x = (i) => i / (stepLabels.length - 1) * width;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 3, children: [
+    /* @__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": `Share of each segment surviving to each step, ${stepLabels.join(", then ")}`,
+        children: [
+          [0, 0.5].map((level) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "line",
+            {
+              x1: 0,
+              x2: width,
+              y1: height * level,
+              y2: height * level,
+              stroke: mark("survival.grid"),
+              strokeWidth: 0.4
+            },
+            level
+          )),
+          segments.map((segment, index) => {
+            const entry = segment.values[0];
+            if (entry === null || entry === void 0 || entry <= 0) return null;
+            const points = [];
+            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;
+              points.push([x(i), height - Math.min(1, value / entry) * height]);
+            }
+            if (points.length < 2) return null;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "polyline",
+              {
+                points: points.map(([px, py]) => `${px},${py}`).join(" "),
+                fill: "none",
+                stroke: mark("survival.line"),
+                strokeWidth: 0.8,
+                vectorEffect: "non-scaling-stroke",
+                strokeDasharray: index === 0 ? void 0 : index === 1 ? "4 3" : "1 2",
+                opacity: index === 0 ? 1 : 0.75
+              },
+              segment.key
+            );
+          })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: survivalLegend, children: segments.map((segment, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: [
+      index === 0 ? "\u2014\u2014" : index === 1 ? "\u2013 \u2013" : "\xB7 \xB7",
+      " ",
+      segment.label
+    ] }, segment.key)) })
+  ] });
+}
 function SortableTable({
   caption,
   columns,
@@ -1139,6 +1186,38 @@ 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 filterInput = {
   font: "inherit",
   fontSize: "0.85em",
@@ -1995,24 +2074,6 @@ var figureRow = {
   gap: 10,
   flexWrap: "wrap"
 };
-var segmentHeadCell = {
-  textAlign: "left",
-  fontSize: "0.78em",
-  letterSpacing: "0.06em",
-  textTransform: "uppercase",
-  fontWeight: 500,
-  opacity: 0.7,
-  padding: "8px 12px",
-  borderBottom: "1px solid var(--card-border-color, rgba(128,128,128,0.3))",
-  whiteSpace: "nowrap"
-};
-var segmentRowCell = {
-  textAlign: "left",
-  fontWeight: 400,
-  padding: "8px 12px",
-  borderBottom: "1px solid var(--card-border-color, rgba(128,128,128,0.18))",
-  verticalAlign: "baseline"
-};
 var sourceLink = {
   color: "inherit",
   textDecoration: "underline",
@@ -2450,10 +2511,45 @@ function DataHealthPanel({ data, diagnostics }) {
           part: data.ga4Pageviews,
           missingLabel: "it missed"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ComparisonBar, { label: "Vercel pageviews", metric: data.vercelPageviews, max: pageviewMax }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ComparisonBar, { label: "GA4 pageviews", metric: data.ga4Pageviews, max: pageviewMax })
-      ] })
+      ) : isContainment(data.ga4Pageviews, data.vercelPageviews) ? (
+        /* Still a containment — the operands are simply the other way round.
+        
+           When GA4 counts MORE than Vercel, it is because Vercel started collecting after
+           the range began, so Vercel's count is the subset. Falling back to two peer bars
+           scaled to the larger put GA4 at full width saying nothing, which is verbatim the
+           defect ContainmentBar was built to kill. */
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            ContainmentBar,
+            {
+              wholeLabel: "Pageviews Google Analytics counted",
+              whole: data.ga4Pageviews,
+              partLabel: "Also counted by Vercel",
+              part: data.vercelPageviews,
+              missingLabel: "Vercel did not see"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "Vercel counted fewer because its collection started after this range began, not because the traffic was not there." })
+        ] })
+      ) : (
+        /* Neither containment holds, because only one source answered.
+        
+           Deleting ComparisonBar took this case with it: with GA4 down, both containments
+           return null and the section rendered NOTHING — not even the figure Vercel did
+           report. That is the state where the reader most needs to see what survived, and
+           it is the one the card below spends a comment explaining. */
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: figureRow, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Pageviews Vercel counted" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: data.vercelPageviews, label: "Vercel pageviews", size: 3 })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: figureRow, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Seen by Google Analytics" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: data.ga4Pageviews, label: "GA4 pageviews", size: 3 })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "Only one source answered for this range, so there is nothing to compare." })
+        ] })
+      )
     ] }),
     diagnostics && /* Open, and primary. This is the longest block on the tab and the obvious candidate
        for folding away — but the tab it sits on exists to answer "what should I fix
@@ -2492,10 +2588,18 @@ function DataHealthPanel({ data, diagnostics }) {
     Object.keys(data.orderStatuses ?? {}).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionTitle, { title: "Order statuses in this range", tone: "secondary" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "What the orders actually say, before any filtering. Use these values to set which statuses count as a sale." }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: cardGrid, children: Object.entries(data.orderStatuses ?? {}).sort((a, b) => b[1] - a[1]).map(([status, count]) => /* @__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: status }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 3, children: formatCount(count) })
-      ] }) }, status)) })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        ProportionChart,
+        {
+          bars: Object.entries(data.orderStatuses ?? {}).map(([status, count]) => ({
+            key: status,
+            label: status,
+            value: count
+          })),
+          format: (n) => formatCount(n),
+          totalLabel: "Orders in this range"
+        }
+      )
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       Section,
@@ -2742,48 +2846,6 @@ function rankLine(series, pick) {
   const ranked = weeklyRank(series.map((d) => ({ date: d.date, value: pick(d) })));
   return ranked ? describeRank(ranked) : null;
 }
-function SegmentTable({ segments, dimension }) {
-  if (segments.length < 2) return null;
-  const spine = [...segments].sort((a, b) => b.steps.length - a.steps.length)[0]?.steps ?? [];
-  if (spine.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: [
-      "Every ",
-      dimension,
-      " at once. A rate needs ",
-      MIN_RATE_DENOMINATOR,
-      " people at the step before it; below that only the count is shown."
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { radius: 2, tone: "transparent", border: true, style: { overflowX: "auto", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("table", { style: { width: "100%", borderCollapse: "collapse", minWidth: 360 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("caption", { style: visuallyHidden, children: [
-        "Funnel steps by ",
-        dimension
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { scope: "col", style: segmentHeadCell, children: "Step" }),
-        segments.map((segment) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { scope: "col", style: { ...segmentHeadCell, textAlign: "right" }, children: segment.label }, segment.key))
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: spine.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { scope: "row", style: segmentRowCell, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: step.label }) }),
-        segments.map((segment) => {
-          const cell = segment.steps.find((s) => s.key === step.key);
-          const count = cell ? metricSortValue(cell.count) : null;
-          const before = index > 0 ? metricSortValue(segment.steps.find((s) => s.key === spine[index - 1].key)?.count) : null;
-          const rate = cell?.conversionFromPrevious ?? null;
-          const showRate = index > 0 && rate !== null && before !== null && before >= MIN_RATE_DENOMINATOR;
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: { ...segmentRowCell, textAlign: "right", fontVariantNumeric: "tabular-nums" }, children: count === null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, muted: true, children: "\u2014" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 1, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: formatCount(count) }),
-            showRate && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: [
-              formatPercent(rate, 1),
-              " of ",
-              formatCount(before)
-            ] })
-          ] }) }, segment.key);
-        })
-      ] }, step.key)) })
-    ] }) })
-  ] });
-}
 function revenueCoversEveryOrder(data) {
   const counted = metricSortValue(data.orders);
   const withTotal = finiteOrNull(data.ordersWithTotal);
@@ -2792,6 +2854,7 @@ function revenueCoversEveryOrder(data) {
 }
 function JourneyPanel({ data }) {
   const segments = data.segments ?? [];
+  const spine = [...segments].sort((a, b) => b.steps.length - a.steps.length)[0]?.steps ?? [];
   const allSteps = data.steps ?? [];
   const shown = allSteps.filter((step) => step.count.status !== "unavailable");
   const hiddenSteps = allSteps.filter((step) => step.count.status === "unavailable");
@@ -2804,7 +2867,52 @@ function JourneyPanel({ data }) {
       /* @__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)(SegmentTable, { segments, dimension: data.segmentDimension ?? "segment" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      SurvivalLines,
+      {
+        segments: segments.map((segment) => ({
+          key: segment.key,
+          label: segment.label,
+          values: spine.map((step) => {
+            const cell = segment.steps.find((s) => s.key === step.key);
+            return cell ? metricSortValue(cell.count) : null;
+          })
+        })),
+        stepLabels: spine.map((step) => step.label)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      ChartData,
+      {
+        label: "Show the figures behind this",
+        rows: segments,
+        rowKey: (segment) => segment.key,
+        columns: [
+          {
+            key: "segment",
+            label: data.segmentDimension ?? "Segment",
+            sortValue: (segment) => segment.label,
+            render: (segment) => segment.label
+          },
+          ...spine.map((step) => ({
+            key: step.key,
+            label: step.label,
+            numeric: true,
+            sortValue: (segment) => metricSortValue(segment.steps.find((s) => s.key === step.key)?.count),
+            render: (segment) => {
+              const cell = segment.steps.find((s) => s.key === step.key);
+              const count = metricSortValue(cell?.count);
+              if (count === null) return "\u2014";
+              const index = spine.findIndex((sp) => sp.key === step.key);
+              const before = index > 0 ? metricSortValue(segment.steps.find((s) => s.key === spine[index - 1].key)?.count) : null;
+              const rate = cell?.conversionFromPrevious ?? null;
+              const showRate = index > 0 && rate !== null && before !== null && before >= MIN_RATE_DENOMINATOR;
+              return showRate ? `${formatCount(count)} \xB7 ${formatPercent(rate, 1)} of ${formatCount(before)}` : formatCount(count);
+            }
+          }))
+        ]
+      }
+    ),
     spread(segments) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: spread(segments) }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FunnelChart, { stages, measurement: data.measurement ?? "independent-totals" }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: splitGrid, children: [
@@ -3861,7 +3969,6 @@ var index_default = visitorInsights;
 0 && (module.exports = {
   AcquisitionPanel,
   ChartData,
-  ComparisonBar,
   CrossSourceTimeline,
   DataHealthPanel,
   Delta,