@liiift-studio/sanity-visitor-insights 0.23.0 → 0.24.0

package/dist/index.d.mts

@@ -43,6 +43,20 @@ declare function VisitorInsightsTool(props: VisitorInsightsToolComponentProps):
  * extractable.
  */
 
+/**
+ * What is known about GA4's coverage of this site and window, or null when nothing is.
+ *
+ * Null is a real answer and must render as nothing: a panel that cannot say how lossy its source is
+ * should not imply the source is fine.
+ *
+ * @param base - the site's API base URL, as passed to the tool
+ * @param range - the range name currently selected
+ * @param custom - the custom bounds, when the range is custom
+ */
+declare function knownShortfall(base: string, range: string, custom?: {
+    start: string;
+    end: string;
+}): number | null;
 /** Loading state for a report. */
 type ReportState<T> = {
     status: 'idle';
@@ -562,4 +576,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, TrendChart, TypefaceInterestData, TypefaceInterestPanel, type UseReportOptions, type VisitorInsightsPluginOptions, VisitorInsightsTool, type VisitorInsightsToolProps, visitorInsights as default, formatCount, formatMoney, formatPercent, useReport, visitorInsights };
+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, TrendChart, TypefaceInterestData, TypefaceInterestPanel, type UseReportOptions, type VisitorInsightsPluginOptions, VisitorInsightsTool, type VisitorInsightsToolProps, visitorInsights as default, formatCount, formatMoney, formatPercent, knownShortfall, useReport, visitorInsights };

package/dist/index.d.ts

@@ -43,6 +43,20 @@ declare function VisitorInsightsTool(props: VisitorInsightsToolComponentProps):
  * extractable.
  */
 
+/**
+ * What is known about GA4's coverage of this site and window, or null when nothing is.
+ *
+ * Null is a real answer and must render as nothing: a panel that cannot say how lossy its source is
+ * should not imply the source is fine.
+ *
+ * @param base - the site's API base URL, as passed to the tool
+ * @param range - the range name currently selected
+ * @param custom - the custom bounds, when the range is custom
+ */
+declare function knownShortfall(base: string, range: string, custom?: {
+    start: string;
+    end: string;
+}): number | null;
 /** Loading state for a report. */
 type ReportState<T> = {
     status: 'idle';
@@ -562,4 +576,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, TrendChart, TypefaceInterestData, TypefaceInterestPanel, type UseReportOptions, type VisitorInsightsPluginOptions, VisitorInsightsTool, type VisitorInsightsToolProps, visitorInsights as default, formatCount, formatMoney, formatPercent, useReport, visitorInsights };
+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, TrendChart, TypefaceInterestData, TypefaceInterestPanel, type UseReportOptions, type VisitorInsightsPluginOptions, VisitorInsightsTool, type VisitorInsightsToolProps, visitorInsights as default, formatCount, formatMoney, formatPercent, knownShortfall, useReport, visitorInsights };

package/dist/index.js

@@ -57,6 +57,7 @@ __export(index_exports, {
   formatMoney: () => formatMoney,
   formatPercent: () => formatPercent,
   isReportName: () => isReportName,
+  knownShortfall: () => knownShortfall,
   ok: () => ok,
   partial: () => partial,
   previousRange: () => previousRange,
@@ -79,6 +80,19 @@ var import_sanity_ui_compat4 = require("@liiift-studio/sanity-ui-compat");
 var import_react = require("react");
 var import_sanity = require("sanity");
 var envelopeCache = /* @__PURE__ */ new Map();
+var shortfallByWindow = /* @__PURE__ */ new Map();
+function windowKey(range, custom) {
+  return range === "custom" && custom ? `${custom.start}..${custom.end}` : range;
+}
+function knownShortfall(base, range, custom) {
+  return shortfallByWindow.get(`${base}|${windowKey(range, custom)}`) ?? null;
+}
+function rememberShortfall(base, range, custom, data) {
+  const ratio = data?.shortfallRatio;
+  if (typeof ratio === "number" && Number.isFinite(ratio) && ratio >= 0 && ratio <= 1) {
+    shortfallByWindow.set(`${base}|${windowKey(range, custom)}`, ratio);
+  }
+}
 function cacheKey(base, report, range, custom) {
   return [base, report, range, custom?.start ?? "", custom?.end ?? ""].join("|");
 }
@@ -140,6 +154,7 @@ function useReport({ apiBaseUrl, report, range, custom, enabled = true }) {
         const envelope = await response.json();
         if (requestIdRef.current !== requestId) return;
         envelopeCache.set(key, envelope);
+        rememberShortfall(apiBaseUrl, range, custom, envelope.data);
         setState({ status: "ready", envelope });
       } catch (e) {
         if (controller.signal.aborted || requestIdRef.current !== requestId) return;
@@ -827,7 +842,8 @@ function SortableTable({
       copyTimer.current = window.setTimeout(() => setCopied("idle"), 4e3);
     }
   };
-  const hiddenCount = rows.length - visible.length;
+  const excludedInWindow = rows.filter((row) => excluded.has(rowKey(row))).length;
+  const hiddenCount = rows.length - visible.length - excludedInWindow;
   const excludedCount = excluded.size;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 2, children: [
     (filterOn || exportName) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: tableControls, children: [
@@ -905,7 +921,7 @@ function SortableTable({
             ] }) }, column.key) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: column.numeric ? bodyCellNumeric : bodyCell, children: content }, column.key);
           }) }, key);
         }),
-        ordered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: columns.length, style: bodyCell, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, muted: true, children: "No rows match this filter." }) }) })
+        ordered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: columns.length, style: bodyCell, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, muted: true, children: rows.length === 0 ? "Nothing to show for this period." : query.trim() || excludedInWindow > 0 ? "No rows match this filter." : "Nothing to show for this period." }) }) })
       ] })
     ] }) }),
     truncatedNote && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: truncatedNote })
@@ -1053,6 +1069,13 @@ function formatValue(value, unit, currency) {
 function tickLabel(date) {
   return `${date.getUTCDate()} ${date.toLocaleString("en-GB", { month: "short", timeZone: "UTC" })}`;
 }
+function dayIndexAt(clientX, left, boxWidth, viewBoxWidth, plotWidth, count) {
+  if (count === 0 || boxWidth <= 0 || plotWidth <= 0) return null;
+  const ratio = (clientX - left) / boxWidth * viewBoxWidth;
+  const clamped = Math.max(GUTTER, Math.min(GUTTER + plotWidth, ratio));
+  const index = Math.round((clamped - GUTTER) / plotWidth * (count - 1));
+  return Math.max(0, Math.min(count - 1, index));
+}
 function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
   const [hoverIndex, setHoverIndex] = (0, import_react3.useState)(null);
   const [pinned, setPinned] = (0, import_react3.useState)(false);
@@ -1060,22 +1083,34 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
   const [brushed, setBrushed] = (0, import_react3.useState)(null);
   const [measured, setMeasured] = (0, import_react3.useState)(WIDTH);
   const frameRef = (0, import_react3.useRef)(null);
+  const [frameNode, setFrameNode] = (0, import_react3.useState)(null);
+  const attachFrame = (0, import_react3.useCallback)((node) => {
+    frameRef.current = node;
+    setFrameNode(node);
+  }, []);
   const dates = (0, import_react3.useMemo)(() => {
     const all = /* @__PURE__ */ new Set();
     for (const s of series) for (const p of s.points) all.add(p.date);
     return [...all].sort();
   }, [series]);
   const plotWidth = Math.max(120, measured - GUTTER - RIGHT_PAD);
-  import_react3.default.useEffect(() => {
-    const frame = frameRef.current;
-    if (!frame || typeof ResizeObserver === "undefined") return;
+  import_react3.default.useLayoutEffect(() => {
+    const frame = frameNode;
+    if (!frame) return;
+    const apply = (width) => {
+      if (width <= 0) return;
+      const next = Math.round(width);
+      setMeasured((current) => Math.abs(next - current) > 1 ? next : current);
+    };
+    apply(frame.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver((entries) => {
       const width = entries[0]?.contentRect.width;
-      if (width && Math.abs(width - measured) > 1) setMeasured(Math.round(width));
+      if (width !== void 0) apply(width);
     });
     observer.observe(frame);
     return () => observer.disconnect();
-  }, [measured]);
+  }, [frameNode]);
   const height = TOP_PAD + series.length * ROW_HEIGHT + AXIS_HEIGHT;
   const x = (0, import_react3.useMemo)(() => {
     if (dates.length === 0) return null;
@@ -1086,12 +1121,9 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
       const frame = frameRef.current;
       if (!frame || dates.length === 0) return null;
       const box = frame.getBoundingClientRect();
-      const ratio = (clientX - box.left) / box.width * WIDTH;
-      const clamped = Math.max(GUTTER, Math.min(GUTTER + plotWidth, ratio));
-      const index = Math.round((clamped - GUTTER) / plotWidth * (dates.length - 1));
-      return Math.max(0, Math.min(dates.length - 1, index));
+      return dayIndexAt(clientX, box.left, box.width, measured, plotWidth, dates.length);
     },
-    [dates.length, plotWidth]
+    [dates.length, plotWidth, measured]
   );
   const commit = (0, import_react3.useCallback)(
     (from, to) => {
@@ -1119,6 +1151,13 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
     if (real.length === 0) return `${row.label}: no data`;
     const top = real.reduce((best, p) => p.value > best.value ? p : best, real[0]);
     const total = real.reduce((sum, p) => sum + p.value, 0);
+    if (row.mark === "events") {
+      const active = real.filter((p) => p.value !== 0);
+      if (active.length === 0) {
+        return `${row.label} (${row.source}): nothing on any of the ${real.length} days measured`;
+      }
+      return `${row.label} (${row.source}): ${formatValue(total, row.unit, currency)} across ${active.length} of ${real.length} days, the largest ${formatValue(top.value, row.unit, currency)} on ${tickLabel(/* @__PURE__ */ new Date(`${top.date}T00:00:00Z`))}`;
+    }
     return `${row.label} (${row.source}): ${formatValue(total, row.unit, currency)} in total, peaking at ${formatValue(top.value, row.unit, currency)} on ${tickLabel(/* @__PURE__ */ new Date(`${top.date}T00:00:00Z`))}`;
   };
   const missed = series.flatMap((row) => {
@@ -1142,7 +1181,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: frameStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "svg",
       {
-        ref: frameRef,
+        ref: attachFrame,
         viewBox: `0 0 ${measured} ${height}`,
         onMouseMove: onMove,
         onMouseLeave: () => {
@@ -1217,9 +1256,10 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
             const byDate = new Map(shortfallPoints.map((p) => [p.date, p.value]));
             const gapGen = (0, import_d3_shape.area)().defined((p) => p.value !== null && byDate.get(p.date) != null).x(at).y0((p) => y(byDate.get(p.date))).y1((p) => y(p.value)).curve(import_d3_shape.curveMonotoneX);
             const path = row.mark === "events" ? "" : lineGen(row.points) ?? "";
-            const slot = plotWidth / Math.max(1, dates.length);
-            const stemWidth = Math.max(1.5, Math.min(9, slot - 1));
-            const stems = row.mark === "events" ? row.points.filter((p) => p.value !== null && p.value > 0) : [];
+            const pitch = plotWidth / Math.max(1, dates.length - 1);
+            const stemWidth = Math.max(1, Math.min(9, pitch > 2 ? pitch - 1 : pitch));
+            const stems = row.mark === "events" ? row.points.filter((p) => p.value !== null && p.value !== 0) : [];
+            const zeroes = row.mark === "events" ? row.points.filter((p) => p.value === 0) : [];
             const gap = row.shortfall ? gapGen(row.points) ?? "" : "";
             const shortfallLine = row.shortfall && revealed ? lineGen(shortfallPoints.filter((p) => p.value !== null)) ?? "" : "";
             return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
@@ -1233,17 +1273,33 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: GUTTER - 6, y: bottom + 4, textAnchor: "end", fontSize: AXIS_TYPE, fill: "currentColor", opacity: 0.7, children: "0" }),
               gap && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: gap, fill: "currentColor", opacity: 0.48 }),
               shortfallLine && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: shortfallLine, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeDasharray: "6 4", opacity: 0.8 }),
+              zeroes.map((p) => {
+                const cx = at(p);
+                if (!Number.isFinite(cx)) return null;
+                return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "rect",
+                  {
+                    x: Math.max(GUTTER, Math.min(GUTTER + plotWidth - stemWidth, cx - stemWidth / 2)),
+                    y: bottom - 1,
+                    width: stemWidth,
+                    height: 1,
+                    fill: "currentColor",
+                    opacity: 0.3
+                  },
+                  `zero-${p.date}`
+                );
+              }),
               stems.map((p) => {
                 const cx = at(p);
-                const top2 = y(p.value);
-                if (!Number.isFinite(cx) || !Number.isFinite(top2)) return null;
+                const headY = y(p.value);
+                if (!Number.isFinite(cx) || !Number.isFinite(headY)) return null;
                 return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "rect",
                   {
-                    x: cx - stemWidth / 2,
-                    y: top2,
+                    x: Math.max(GUTTER, Math.min(GUTTER + plotWidth - stemWidth, cx - stemWidth / 2)),
+                    y: Math.min(headY, bottom),
                     width: stemWidth,
-                    height: Math.max(1.5, bottom - top2),
+                    height: Math.max(1.5, Math.abs(bottom - headY)),
                     fill: "currentColor",
                     opacity: 0.75
                   },
@@ -1377,7 +1433,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
         }
       ),
       series.map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Text, { size: 0, muted: true, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", children: row.complete ? "\u2500\u2500\u2500" : "\u254C\u254C\u254C" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", children: row.mark === "events" ? "\u25AE\u25AE\u25AE" : row.complete ? "\u2500\u2500\u2500" : "\u254C\u254C\u254C" }),
         " ",
         row.label,
         " (",
@@ -1665,11 +1721,12 @@ function Verdict({ data, previous }) {
   const sends = data.campaigns?.length ?? 0;
   if (sends > 0) parts.push(`${sends} campaign${sends === 1 ? "" : "s"} sent`);
   const shortfall = data.shortfallRatio;
-  const broken = shortfall !== null && shortfall !== void 0 && shortfall > 0.6 ? `GA4 is seeing ${formatPercent(1 - shortfall, 0)} of your traffic \u2014 treat its figures as broken` : data.capture?.discrepancy ? "measurement disagrees between sources" : null;
+  const seeing = shortfall !== null && shortfall !== void 0 ? `GA4 is seeing ${formatPercent(1 - shortfall, 0)} of your traffic` : null;
+  const broken = shortfall === null || shortfall === void 0 ? data.capture?.discrepancy ? "measurement disagrees between sources" : null : shortfall > 0.6 ? `${seeing} \u2014 treat its figures as broken` : shortfall > 0.35 ? `${seeing} \u2014 its figures are undercounts, not what happened` : data.capture?.discrepancy ? "measurement disagrees between sources" : null;
   if (broken) parts.push(broken);
   if (parts.length === 0) return null;
-  const checked = shortfall !== null && shortfall !== void 0;
-  const closing = broken ? "" : checked ? " \xB7 nothing broken" : "";
+  const noticeable = shortfall !== null && shortfall !== void 0 && shortfall > 0.2;
+  const closing = broken || !noticeable ? "" : ` \xB7 ${seeing}`;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_sanity_ui_compat3.Card,
     {
@@ -1702,7 +1759,8 @@ function DataHealthPanel({ data, diagnostics }) {
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Heading, { size: 1, style: sectionHeading, children: "How much GA4 is seeing" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: cardGrid, children: (data.capture?.estimates ?? []).map((estimate) => /* @__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: estimate.basis === "orders" ? "Measured against orders" : estimate.basis === "email" ? "Measured against email clicks" : "Measured against Vercel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 4, children: formatPercent(Math.min(1, estimate.rate), 0) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 4, children: formatPercent(estimate.rate, 0) }),
+        estimate.rate > 1.05 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, children: "Above 100%: GA4 is counting more than the source it is measured against. That is usually a tag firing twice, not extra traffic." }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: [
           formatCount(estimate.observed),
           " of ",
@@ -2179,6 +2237,7 @@ var RANGES = [
   { key: "quarter", label: "Quarter", span: "the last 91 days" },
   { key: "year", label: "Year", span: "the last 365 days" }
 ];
+var GA4_ONLY_TABS = ["acquisition", "journey", "typeface-interest"];
 var PANELS = [
   { id: "overview", report: "measurement-health", label: "Overview", blurb: "Money, traffic and what moved this period" },
   { id: "acquisition", report: "acquisition", label: "Acquisition", blurb: "Where visitors come from" },
@@ -2363,6 +2422,17 @@ function PanelTabs({ value, onChange }) {
     );
   }) });
 }
+function CoverageRibbon({ ratio }) {
+  if (ratio === null || ratio < 0.2) return null;
+  const seen = Math.round((1 - ratio) * 100);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Card, { padding: 3, radius: 2, tone: ratio > 0.6 ? "critical" : "caution", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 1, children: [
+    "Every figure on this tab comes from Google Analytics, which is seeing about ",
+    seen,
+    "% of this site\u2019s traffic in this window. Read them as at least ",
+    seen === 0 ? "undercounts" : `${seen}% of the real numbers`,
+    ", not as what happened. Data health explains why."
+  ] }) });
+}
 function ReportPanel({
   tabId,
   report,
@@ -2399,37 +2469,38 @@ function ReportPanel({
       !state.disabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", style: rangeButton(false), onClick: reload, children: "Try again" }) })
     ] }) }),
     state.status === "ready" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Stack, { space: 4, children: [
-      tabId === "overview" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(OverviewPanel, { data: state.envelope.data, previous: state.envelope.comparison?.data, onBrush }),
-      tabId === "data-health" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Stack, { space: 4, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          DataHealthPanel,
-          {
-            data: state.envelope.data,
-            diagnostics: diagnostics.status === "ready" ? diagnostics.envelope.data : void 0
-          }
-        ),
-        diagnostics.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 1, muted: true, children: "Checking configuration\u2026" }),
-        diagnostics.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Card, { padding: 3, radius: 2, tone: "caution", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 1, children: [
-          "Configuration checks could not run: ",
-          diagnostics.message
-        ] }) })
-      ] }),
-      tabId === "acquisition" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AcquisitionPanel, { data: state.envelope.data, previous: state.envelope.comparison?.data }),
-      tabId === "journey" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(JourneyPanel, { data: state.envelope.data }),
-      tabId === "typeface-interest" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TypefaceInterestPanel, { data: state.envelope.data }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SourceStatusRow, { sources: state.envelope.sources }),
       state.revalidationError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Card, { padding: 3, radius: 2, tone: "caution", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 1, children: [
         "These figures are the last ones that loaded. Refreshing them failed: ",
         state.revalidationError
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SourceStatusRow, { sources: state.envelope.sources }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NoticeList, { notices: state.envelope.notices }),
       state.envelope.comparison && COMPARED_TABS.includes(tabId) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 0, muted: true, children: [
         "Changes are against ",
         state.envelope.comparison.range.start,
         " to ",
         state.envelope.comparison.range.end,
         ", the equivalent window immediately before this one.",
-        state.envelope.comparison.provisional && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: " This window\u2019s last days are still being processed by GA4, so changes read low." })
+        state.envelope.comparison.provisional && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: " This window\u2019s last days are still being processed by GA4, so changes read low." }),
+        GA4_ONLY_TABS.includes(tabId) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CoverageRibbon, { ratio: knownShortfall(apiBaseUrl, range, range === "custom" ? custom : void 0) }),
+        tabId === "overview" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(OverviewPanel, { data: state.envelope.data, previous: state.envelope.comparison?.data, onBrush }),
+        tabId === "data-health" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Stack, { space: 4, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            DataHealthPanel,
+            {
+              data: state.envelope.data,
+              diagnostics: diagnostics.status === "ready" ? diagnostics.envelope.data : void 0
+            }
+          ),
+          diagnostics.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 1, muted: true, children: "Checking configuration\u2026" }),
+          diagnostics.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Card, { padding: 3, radius: 2, tone: "caution", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 1, children: [
+            "Configuration checks could not run: ",
+            diagnostics.message
+          ] }) })
+        ] }),
+        tabId === "acquisition" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AcquisitionPanel, { data: state.envelope.data, previous: state.envelope.comparison?.data }),
+        tabId === "journey" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(JourneyPanel, { data: state.envelope.data }),
+        tabId === "typeface-interest" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TypefaceInterestPanel, { data: state.envelope.data }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NoticeList, { notices: state.envelope.notices })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 0, muted: true, children: [
         "Figures cover ",
@@ -2780,6 +2851,7 @@ var index_default = visitorInsights;
   formatMoney,
   formatPercent,
   isReportName,
+  knownShortfall,
   ok,
   partial,
   previousRange,