@liiift-studio/sanity-visitor-insights 0.66.0 → 0.68.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,
@@ -313,7 +312,9 @@ var MARKS = {
   "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" }
+  "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];
@@ -499,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: [
@@ -896,6 +873,101 @@ 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 RatioFigure({
+  value,
+  format,
+  parts,
+  size = 4,
+  unavailable: unavailable2
+}) {
+  const [showParts, setShowParts] = import_react2.default.useState(false);
+  const canToggle = value !== null && parts.every((p) => p.value !== null);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Stack, { space: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: ratioRow, children: [
+    showParts && canToggle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Stack, { space: 1, children: parts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: size > 1 ? 2 : size, children: [
+      (part.format ?? formatCount)(part.value),
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { as: "span", size: 0, muted: true, children: part.label })
+    ] }, part.label)) }) : value === null ? unavailable2 : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size, children: format(value) }),
+    canToggle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        style: ratioToggle,
+        "aria-pressed": showParts,
+        "aria-label": showParts ? "Show the rate" : "Show the counts behind this rate",
+        onClick: () => setShowParts((was) => !was),
+        children: showParts ? "rate" : "counts"
+      }
+    )
+  ] }) });
+}
 function SortableTable({
   caption,
   columns,
@@ -1173,6 +1245,25 @@ var shiftNow = {
   borderRadius: "50%",
   background: mark("shift.now")
 };
+var survivalLegend = { display: "flex", gap: 14, flexWrap: "wrap" };
+var ratioRow = {
+  display: "flex",
+  alignItems: "baseline",
+  gap: 10,
+  flexWrap: "wrap"
+};
+var ratioToggle = {
+  appearance: "none",
+  background: "transparent",
+  border: "1px solid var(--card-border-color, rgba(128,128,128,0.3))",
+  borderRadius: 3,
+  color: "inherit",
+  font: "inherit",
+  fontSize: "0.72em",
+  padding: "1px 7px",
+  cursor: "pointer",
+  opacity: 0.75
+};
 var filterInput = {
   font: "inherit",
   fontSize: "0.85em",
@@ -2029,24 +2120,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",
@@ -2120,21 +2193,36 @@ function OverviewPanel({ data, previous, onBrush }) {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: cardGrid, children: [
       /* @__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: "Average order" }),
-        (() => {
-          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)(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)(
+          RatioFigure,
+          {
+            value: metricSortValue(averageOrderValue(data)),
+            format: (v) => formatMoney(v, data.currency ?? null),
+            parts: [
+              { label: "taken", value: metricSortValue(data.revenue), format: (v) => formatMoney(v, data.currency ?? null) },
+              { label: "orders with an amount", value: finiteOrNull(data.ordersWithTotal) }
+            ],
+            unavailable: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: averageOrderValue(data), label: "Average order value" })
+          }
+        ),
+        averageOrderValue(data).status === "partial" && averageOrderValue(data).note && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: averageOrderValue(data).note }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "From your orders, so exact." })
       ] }) }),
       /* @__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: "Visitors per order" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: visitorsPerOrder(data), label: "Visitors per order" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "Against Vercel\u2019s visitor count, not Google Analytics\u2019 \u2014 dividing by GA4 would flatter this by whatever share it is missing. Read it as a ceiling: some of those visitors are crawlers or repeat devices." })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          RatioFigure,
+          {
+            value: metricSortValue(visitorsPerOrder(data)),
+            format: (v) => formatCount(v),
+            parts: [
+              { label: "visitors", value: metricSortValue(data.vercelVisitors) },
+              { label: "orders", value: metricSortValue(data.orders) }
+            ],
+            unavailable: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: visitorsPerOrder(data), label: "Visitors per order" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "Vercel\u2019s visitor count. A ceiling \u2014 some are bots or the same person twice." })
       ] }) })
     ] }),
     (data.crossSource?.length ?? 0) >= 3 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
@@ -2408,7 +2496,14 @@ function OverviewPanel({ data, previous, onBrush }) {
               exportValue: (c) => revenuePerThousandSent(c),
               render: (c) => {
                 const value = revenuePerThousandSent(c);
-                return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: value === null ? "\u2014" : formatMoney(value, data.currency ?? null) });
+                if (value === null) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: "\u2014" });
+                return /* @__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: formatMoney(value, data.currency ?? null) }),
+                  c.revenueAfter !== null && c.revenueAfter !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: [
+                    "from ",
+                    formatMoney(c.revenueAfter, data.currency ?? null)
+                  ] })
+                ] });
               }
             }
           ]
@@ -2484,10 +2579,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
@@ -2526,10 +2656,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,
@@ -2776,48 +2914,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);
@@ -2826,6 +2922,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");
@@ -2838,7 +2935,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: [
@@ -3895,7 +4037,6 @@ var index_default = visitorInsights;
 0 && (module.exports = {
   AcquisitionPanel,
   ChartData,
-  ComparisonBar,
   CrossSourceTimeline,
   DataHealthPanel,
   Delta,