@liiift-studio/sanity-visitor-insights 0.32.0 → 0.34.0

package/dist/index.d.mts

@@ -341,30 +341,6 @@ interface NoticeListProps {
  * Rendered in the panel rather than a README: a caveat nobody sees does not prevent a wrong read.
  */
 declare function NoticeList({ notices }: NoticeListProps): React.ReactElement | null;
-/** Props for TrendChart. */
-interface TrendChartProps {
-    /** Daily points, oldest first. */
-    points: Array<{
-        date: string;
-        ga4: number | null;
-        vercel: number | null;
-    }>;
-    /** Accessible description of what the two lines are. */
-    label?: string;
-}
-/**
- * Daily GA4 against Vercel, with axes, dated ticks and a hover readout.
- *
- * The shaded band between the lines is the point of the chart rather than decoration: it IS the
- * measurement gap, and seeing where it opens is what distinguishes an incident from a standing
- * difference. Darden's opened overnight on 2026-08-24 and stayed open for over a week, which no
- * scalar on this panel could have shown.
- *
- * Inline SVG with no charting library — one dependency-free element in a Studio that already loads
- * a great deal, and it renders on the server so the tests can assert on it. Strokes use
- * currentColor so the whole thing follows the Studio's theme without a palette of its own.
- */
-declare function TrendChart({ points, label }: TrendChartProps): React.ReactElement | null;
 /** One column of a sortable table. */
 interface SortColumn<Row> {
     /** Stable key, also used as the sort key. */
@@ -638,4 +614,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 ViewState, type VisitorInsightsPluginOptions, VisitorInsightsTool, type VisitorInsightsToolProps, decodeView, visitorInsights as default, encodeView, formatCount, formatMoney, formatPercent, knownShortfall, mergeIntoHash, 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, 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

@@ -341,30 +341,6 @@ interface NoticeListProps {
  * Rendered in the panel rather than a README: a caveat nobody sees does not prevent a wrong read.
  */
 declare function NoticeList({ notices }: NoticeListProps): React.ReactElement | null;
-/** Props for TrendChart. */
-interface TrendChartProps {
-    /** Daily points, oldest first. */
-    points: Array<{
-        date: string;
-        ga4: number | null;
-        vercel: number | null;
-    }>;
-    /** Accessible description of what the two lines are. */
-    label?: string;
-}
-/**
- * Daily GA4 against Vercel, with axes, dated ticks and a hover readout.
- *
- * The shaded band between the lines is the point of the chart rather than decoration: it IS the
- * measurement gap, and seeing where it opens is what distinguishes an incident from a standing
- * difference. Darden's opened overnight on 2026-08-24 and stayed open for over a week, which no
- * scalar on this panel could have shown.
- *
- * Inline SVG with no charting library — one dependency-free element in a Studio that already loads
- * a great deal, and it renders on the server so the tests can assert on it. Strokes use
- * currentColor so the whole thing follows the Studio's theme without a palette of its own.
- */
-declare function TrendChart({ points, label }: TrendChartProps): React.ReactElement | null;
 /** One column of a sortable table. */
 interface SortColumn<Row> {
     /** Stable key, also used as the sort key. */
@@ -638,4 +614,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 ViewState, type VisitorInsightsPluginOptions, VisitorInsightsTool, type VisitorInsightsToolProps, decodeView, visitorInsights as default, encodeView, formatCount, formatMoney, formatPercent, knownShortfall, mergeIntoHash, 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, 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

@@ -47,7 +47,6 @@ __export(index_exports, {
   ProportionChart: () => ProportionChart,
   REPORT_NAMES: () => REPORT_NAMES,
   SortableTable: () => SortableTable,
-  TrendChart: () => TrendChart,
   TypefaceInterestPanel: () => TypefaceInterestPanel,
   VisitorInsightsTool: () => VisitorInsightsTool,
   coverageForRange: () => coverageForRange,
@@ -578,18 +577,6 @@ var barTrack = {
   background: "currentColor",
   opacity: 0.12
 };
-var chartFrame = { position: "relative", width: "100%" };
-var readout = {
-  position: "absolute",
-  top: 0,
-  right: 0,
-  padding: "6px 10px",
-  borderRadius: 3,
-  background: "var(--card-bg-color, rgba(0,0,0,0.55))",
-  border: "1px solid var(--card-border-color, rgba(128,128,128,0.35))",
-  pointerEvents: "none",
-  maxWidth: "70%"
-};
 var barHeader = {
   display: "flex",
   alignItems: "center",
@@ -597,12 +584,6 @@ var barHeader = {
   gap: 12,
   flexWrap: "wrap"
 };
-var legendRow = {
-  display: "flex",
-  gap: 12,
-  alignItems: "center",
-  flexWrap: "wrap"
-};
 var disclosure = {
   appearance: "none",
   background: "transparent",
@@ -651,185 +632,6 @@ function NoticeList({ notices }) {
     )
   ] });
 }
-var CHART = { w: 760, h: 240, left: 52, right: 12, top: 16, bottom: 30 };
-function niceCeiling(value) {
-  if (value <= 0) return 1;
-  const magnitude = 10 ** Math.floor(Math.log10(value));
-  const normalised = value / magnitude;
-  const step = normalised <= 1 ? 1 : normalised <= 2 ? 2 : normalised <= 5 ? 5 : 10;
-  return step * magnitude;
-}
-function shortDate(iso) {
-  const parsed = /* @__PURE__ */ new Date(`${iso}T00:00:00Z`);
-  if (Number.isNaN(parsed.getTime())) return iso;
-  return `${parsed.getUTCDate()} ${parsed.toLocaleString("en-GB", { month: "short", timeZone: "UTC" })}`;
-}
-function TrendChart({ points, label = "Daily pageviews, GA4 against Vercel" }) {
-  const [hovered, setHovered] = import_react2.default.useState(null);
-  if (points.length < 3) return null;
-  const values = points.flatMap((p) => [p.ga4, p.vercel]).filter((v) => typeof v === "number");
-  if (values.length === 0) return null;
-  const max = niceCeiling(Math.max(...values, 1));
-  const plotW = CHART.w - CHART.left - CHART.right;
-  const plotH = CHART.h - CHART.top - CHART.bottom;
-  const x = (i) => CHART.left + i / Math.max(1, points.length - 1) * plotW;
-  const y = (v) => CHART.top + plotH - v / max * plotH;
-  const line = (pick) => {
-    let d = "";
-    let penDown = false;
-    points.forEach((p, i) => {
-      const v = pick(p);
-      if (typeof v !== "number") {
-        penDown = false;
-        return;
-      }
-      d += `${penDown ? "L" : "M"}${x(i).toFixed(1)} ${y(v).toFixed(1)} `;
-      penDown = true;
-    });
-    return d.trim();
-  };
-  const bands = [];
-  let run = [];
-  const flushRun = () => {
-    if (run.length > 1) {
-      const top = run.map((i) => `${x(i).toFixed(1)} ${y(points[i].vercel).toFixed(1)}`);
-      const bottom = [...run].reverse().map((i) => `${x(i).toFixed(1)} ${y(points[i].ga4).toFixed(1)}`);
-      bands.push(`M${top.join(" L")} L${bottom.join(" L")} Z`);
-    }
-    run = [];
-  };
-  points.forEach((p, i) => {
-    if (typeof p.ga4 === "number" && typeof p.vercel === "number") run.push(i);
-    else flushRun();
-  });
-  flushRun();
-  const ticks = [0, 0.25, 0.5, 0.75, 1].map((f) => ({ value: max * f, y: y(max * f) }));
-  const labelEvery = Math.max(1, Math.ceil(points.length / 6));
-  const dateTicks = points.map((p, i) => ({ i, date: p.date })).filter(({ i }) => i % labelEvery === 0 || i === points.length - 1);
-  const active = hovered !== null ? points[hovered] : null;
-  const activeGap = active && typeof active.ga4 === "number" && typeof active.vercel === "number" && active.vercel > 0 ? (active.vercel - active.ga4) / active.vercel : null;
-  const onKeyDown = (event) => {
-    const last = points.length - 1;
-    const current = hovered ?? 0;
-    const move = (next) => {
-      event.preventDefault();
-      setHovered(Math.max(0, Math.min(last, next)));
-    };
-    if (event.key === "ArrowRight") return move(hovered === null ? 0 : current + 1);
-    if (event.key === "ArrowLeft") return move(hovered === null ? last : current - 1);
-    if (event.key === "Home") return move(0);
-    if (event.key === "End") return move(last);
-    if (event.key === "Escape") {
-      setHovered(null);
-      return;
-    }
-  };
-  const onMove = (event) => {
-    const box = event.currentTarget.getBoundingClientRect();
-    if (box.width === 0) return;
-    const svgX = (event.clientX - box.left) / box.width * CHART.w;
-    const ratio = (svgX - CHART.left) / plotW;
-    const index = Math.round(ratio * (points.length - 1));
-    setHovered(index >= 0 && index < points.length ? index : null);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 3, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: chartFrame, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "svg",
-        {
-          viewBox: `0 0 ${CHART.w} ${CHART.h}`,
-          width: "100%",
-          style: { display: "block", height: "auto" },
-          role: "img",
-          "aria-label": `${label}, ${points[0]?.date} to ${points[points.length - 1]?.date}. Peak ${formatCount(max)} pageviews in a day.`,
-          onMouseMove: onMove,
-          onMouseLeave: () => setHovered(null),
-          onKeyDown,
-          onBlur: () => setHovered(null),
-          tabIndex: 0,
-          "aria-describedby": active ? "trend-readout" : void 0,
-          children: [
-            ticks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "line",
-                {
-                  x1: CHART.left,
-                  x2: CHART.w - CHART.right,
-                  y1: tick.y,
-                  y2: tick.y,
-                  stroke: "currentColor",
-                  strokeOpacity: tick.value === 0 ? 0.35 : 0.12,
-                  strokeWidth: "1"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "text",
-                {
-                  x: CHART.left - 8,
-                  y: tick.y + 4,
-                  textAnchor: "end",
-                  fontSize: "11",
-                  fill: "currentColor",
-                  fillOpacity: "0.55",
-                  children: formatCount(tick.value)
-                }
-              )
-            ] }, tick.value)),
-            dateTicks.map(({ i, date }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "text",
-              {
-                x: x(i),
-                y: CHART.h - 10,
-                textAnchor: "middle",
-                fontSize: "11",
-                fill: "currentColor",
-                fillOpacity: "0.55",
-                children: shortDate(date)
-              },
-              date
-            )),
-            bands.map((d) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d, fill: "currentColor", fillOpacity: "0.09", stroke: "none" }, d.slice(0, 24))),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: line((p) => p.vercel), fill: "none", stroke: "currentColor", strokeOpacity: "0.9", strokeWidth: "2" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: line((p) => p.ga4), fill: "none", stroke: "currentColor", strokeOpacity: "0.9", strokeWidth: "2", strokeDasharray: "5 3" }),
-            hovered !== null && active && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "line",
-                {
-                  x1: x(hovered),
-                  x2: x(hovered),
-                  y1: CHART.top,
-                  y2: CHART.top + plotH,
-                  stroke: "currentColor",
-                  strokeOpacity: "0.4",
-                  strokeWidth: "1"
-                }
-              ),
-              typeof active.vercel === "number" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: x(hovered), cy: y(active.vercel), r: "4", fill: "currentColor" }),
-              typeof active.ga4 === "number" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: x(hovered), cy: y(active.ga4), r: "4", fill: "currentColor" })
-            ] })
-          ]
-        }
-      ),
-      active && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: readout, id: "trend-readout", role: "status", "aria-live": "polite", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, weight: "medium", children: shortDate(active.date) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 1, muted: true, children: [
-          "Vercel ",
-          typeof active.vercel === "number" ? formatCount(active.vercel) : "\u2014",
-          "  \xB7  ",
-          "GA4 ",
-          typeof active.ga4 === "number" ? formatCount(active.ga4) : "\u2014",
-          activeGap !== null ? `  \xB7  gap ${formatPercent(activeGap, 0)}` : ""
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: legendRow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: "\u2501\u2501 Vercel" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: "\u2504\u2504 GA4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: "shaded band is the gap" }),
-      !active && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: "hover, or focus and use arrow keys, for a day" })
-    ] })
-  ] });
-}
 function SortableTable({
   caption,
   columns,
@@ -1598,7 +1400,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
         m.label
       ] }, m.label))
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: legendRow2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: legendRow, children: [
       series.some((row) => row.shortfall) && // Hover is not available on touch and not reachable by keyboard, so the reveal
       // has an explicit control too. Without it the detail would exist only for people
       // using a mouse.
@@ -1655,7 +1457,7 @@ var revealButton = {
   cursor: "pointer",
   whiteSpace: "nowrap"
 };
-var legendRow2 = {
+var legendRow = {
   display: "flex",
   gap: 14,
   flexWrap: "wrap",
@@ -2806,15 +2608,21 @@ function PanelTabs({ value, onChange }) {
   }) });
 }
 function CoverageRibbon({ ratio }) {
-  if (ratio === null || ratio < 0.2) return null;
+  if (ratio === null) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 0, muted: true, children: "Every figure on this tab comes from Google Analytics. How much of your traffic it is seeing has not been checked for this window \u2014 open Overview or Data health to measure it." });
+  }
+  if (ratio < 0.2) return null;
   const seen = Math.round((1 - ratio) * 100);
+  const multiplier = seen > 0 ? Math.round(100 / seen) : null;
   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 ",
+    "Every figure on this tab comes from Google Analytics, which is seeing roughly ",
     seen,
-    "% of this site\u2019s traffic in this window \u2014 so the real numbers are roughly",
+    "% of this site\u2019s traffic in this window \u2014 so the real numbers are",
     " ",
-    seen > 0 ? `${(100 / seen).toFixed(1)}\xD7` : "many times",
-    " these. Data health explains why."
+    multiplier === null ? "many times" : `several times`,
+    " these",
+    multiplier !== null && multiplier > 1 ? ` (very roughly ${multiplier}\xD7)` : "",
+    ". Data health explains why, and how uncertain that is."
   ] }) });
 }
 function ReadyReport({
@@ -3287,7 +3095,6 @@ var index_default = visitorInsights;
   ProportionChart,
   REPORT_NAMES,
   SortableTable,
-  TrendChart,
   TypefaceInterestPanel,
   VisitorInsightsTool,
   coverageForRange,