@liiift-studio/sanity-visitor-insights 0.6.1 → 0.7.0

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as sanity from 'sanity';
 import React from 'react';
-import { R as ReportEnvelope, a as ReportName, b as RangeKey, M as MetricValue, A as AcquisitionData, D as DiagnosticReport, J as JourneyData, c as MeasurementHealthData, T as TypefaceInterestData } from './ranges-DX6B_xvr.mjs';
-export { C as Coverage, d as DateRange, E as EventCutover, P as PREEXISTING, e as REPORT_NAMES, f as ReportError, S as SiteAnalyticsConfig, g as SourceName, h as SourceStatus, U as UnavailableReason, i as coverageForRange, j as isReportName, o as ok, p as partial, k as previousRange, r as resolveRange, u as unavailable, v as validateSiteConfig, l as valueOrNull } from './ranges-DX6B_xvr.mjs';
+import { R as ReportEnvelope, a as ReportName, b as RangeKey, M as MetricValue, A as AcquisitionData, D as DiagnosticReport, J as JourneyData, c as MeasurementHealthData, T as TypefaceInterestData } from './ranges-D0k0f-FF.mjs';
+export { C as Coverage, d as DateRange, E as EventCutover, P as PREEXISTING, e as REPORT_NAMES, f as ReportError, S as SiteAnalyticsConfig, g as SourceName, h as SourceStatus, U as UnavailableReason, i as coverageForRange, j as isReportName, o as ok, p as partial, k as previousRange, r as resolveRange, u as unavailable, v as validateSiteConfig, l as valueOrNull } from './ranges-D0k0f-FF.mjs';
 
 /**
  * The Visitor Insights Studio tool.
@@ -93,12 +93,24 @@ interface MetricFigureProps {
     /** Accessible label describing what this number counts. */
     label: string;
     size?: number;
+    /**
+     * What the number IS, which decides how it is written.
+     *
+     * MetricValue carries availability but not unit, so a percentage and a count arrive here
+     * indistinguishable and both used to be written with the count formatter. The consent rate is a
+     * 0-100 percentage: it rendered as a bare "84" beside "GA4 sessions 357" and "Orders 7", where
+     * the obvious reading is 84 sessions out of 357 — a quarter — when the truth is 84%. A missing
+     * suffix inverted the conclusion.
+     *
+     * 'percent' expects a 0-100 value, matching what measurementHealth produces.
+     */
+    unit?: 'count' | 'percent';
 }
 /**
  * Render a metric value, handling the absent case visibly.
  * Screen readers get the reason text rather than an unexplained dash.
  */
-declare function MetricFigure({ metric, label, size }: MetricFigureProps): React.ReactElement;
+declare function MetricFigure({ metric, label, size, unit }: MetricFigureProps): React.ReactElement;
 /** Props for ComparisonBar. */
 interface ComparisonBarProps {
     label: string;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as sanity from 'sanity';
 import React from 'react';
-import { R as ReportEnvelope, a as ReportName, b as RangeKey, M as MetricValue, A as AcquisitionData, D as DiagnosticReport, J as JourneyData, c as MeasurementHealthData, T as TypefaceInterestData } from './ranges-DX6B_xvr.js';
-export { C as Coverage, d as DateRange, E as EventCutover, P as PREEXISTING, e as REPORT_NAMES, f as ReportError, S as SiteAnalyticsConfig, g as SourceName, h as SourceStatus, U as UnavailableReason, i as coverageForRange, j as isReportName, o as ok, p as partial, k as previousRange, r as resolveRange, u as unavailable, v as validateSiteConfig, l as valueOrNull } from './ranges-DX6B_xvr.js';
+import { R as ReportEnvelope, a as ReportName, b as RangeKey, M as MetricValue, A as AcquisitionData, D as DiagnosticReport, J as JourneyData, c as MeasurementHealthData, T as TypefaceInterestData } from './ranges-D0k0f-FF.js';
+export { C as Coverage, d as DateRange, E as EventCutover, P as PREEXISTING, e as REPORT_NAMES, f as ReportError, S as SiteAnalyticsConfig, g as SourceName, h as SourceStatus, U as UnavailableReason, i as coverageForRange, j as isReportName, o as ok, p as partial, k as previousRange, r as resolveRange, u as unavailable, v as validateSiteConfig, l as valueOrNull } from './ranges-D0k0f-FF.js';
 
 /**
  * The Visitor Insights Studio tool.
@@ -93,12 +93,24 @@ interface MetricFigureProps {
     /** Accessible label describing what this number counts. */
     label: string;
     size?: number;
+    /**
+     * What the number IS, which decides how it is written.
+     *
+     * MetricValue carries availability but not unit, so a percentage and a count arrive here
+     * indistinguishable and both used to be written with the count formatter. The consent rate is a
+     * 0-100 percentage: it rendered as a bare "84" beside "GA4 sessions 357" and "Orders 7", where
+     * the obvious reading is 84 sessions out of 357 — a quarter — when the truth is 84%. A missing
+     * suffix inverted the conclusion.
+     *
+     * 'percent' expects a 0-100 value, matching what measurementHealth produces.
+     */
+    unit?: 'count' | 'percent';
 }
 /**
  * Render a metric value, handling the absent case visibly.
  * Screen readers get the reason text rather than an unexplained dash.
  */
-declare function MetricFigure({ metric, label, size }: MetricFigureProps): React.ReactElement;
+declare function MetricFigure({ metric, label, size, unit }: MetricFigureProps): React.ReactElement;
 /** Props for ComparisonBar. */
 interface ComparisonBarProps {
     label: string;

package/dist/index.js

@@ -122,13 +122,13 @@ function formatCount(value) {
 function formatPercent(ratio, digits = 0) {
   return `${(ratio * 100).toFixed(digits)}%`;
 }
-function MetricFigure({ metric, label, size = 4 }) {
+function MetricFigure({ metric, label, size = 4, unit = "count" }) {
   if (metric.status === "unavailable") {
     const reason = REASON_TEXT[metric.reason];
     const detail = metric.detail ? `${reason}. ${metric.detail}` : reason;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Box, { padding: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, children: detail }) }), portal: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size, muted: true, "aria-label": `${label}: unavailable. ${detail}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u2014" }) }) });
   }
-  const formatted = formatCount(metric.value);
+  const formatted = unit === "percent" ? `${metric.value.toFixed(1)}%` : formatCount(metric.value);
   if (metric.status === "partial") {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 2, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size, "aria-label": `${label}: ${formatted}, partial. ${metric.note}`, children: formatted }),
@@ -171,6 +171,67 @@ function NoticeList({ notices }) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, children: notice })
   ] }) }) }, notice)) });
 }
+function TrendChart({ points, label = "Daily pageviews, GA4 against Vercel" }) {
+  if (points.length < 3) return null;
+  const W = 720;
+  const H = 132;
+  const PAD = 4;
+  const values = points.flatMap((p) => [p.ga4, p.vercel]).filter((v) => typeof v === "number");
+  if (values.length === 0) return null;
+  const max = Math.max(...values, 1);
+  const x = (i) => PAD + i / Math.max(1, points.length - 1) * (W - PAD * 2);
+  const y = (v) => H - PAD - v / max * (H - PAD * 2);
+  const path = (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 vercelPath = path((p) => p.vercel);
+  const ga4Path = path((p) => p.ga4);
+  const first = points[0]?.date ?? "";
+  const last = points[points.length - 1]?.date ?? "";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Stack, { space: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "svg",
+      {
+        viewBox: `0 0 ${W} ${H}`,
+        width: "100%",
+        height: H,
+        role: "img",
+        "aria-label": `${label}, ${first} to ${last}. Peak ${Math.round(max)} pageviews in a day.`,
+        preserveAspectRatio: "none",
+        style: { display: "block", overflow: "visible" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: vercelPath, fill: "none", stroke: "currentColor", strokeOpacity: "0.85", strokeWidth: "2", vectorEffect: "non-scaling-stroke" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: ga4Path, fill: "none", stroke: "currentColor", strokeOpacity: "0.85", strokeWidth: "2", strokeDasharray: "5 3", vectorEffect: "non-scaling-stroke" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Flex, { gap: 3, align: "center", wrap: "wrap", 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.jsxs)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: [
+        first,
+        " to ",
+        last
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: 0, muted: true, children: [
+        "peak ",
+        formatCount(max),
+        "/day"
+      ] })
+    ] })
+  ] });
+}
 
 // src/studio/VisitorInsightsTool.tsx
 var import_sanity_ui_compat4 = require("@liiift-studio/sanity-ui-compat");
@@ -195,12 +256,14 @@ function MeasurementHealthPanel({ data }) {
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComparisonBar, { label: "GA4 pageviews", metric: data.ga4Pageviews, max: pageviewMax, tone: "default" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 2, children: [
-      data.shortfallRatio !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Text, { size: 1, weight: "semibold", children: [
-        "GA4 shortfall: ",
-        formatPercent(Math.abs(data.shortfallRatio), 1)
-      ] }),
+      data.shortfallRatio !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, weight: "semibold", children: data.shortfallRatio >= 0 ? `GA4 saw ${formatPercent(data.shortfallRatio, 1)} fewer pageviews than Vercel` : `GA4 saw ${formatPercent(-data.shortfallRatio, 1)} more pageviews than Vercel` }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: data.interpretation })
     ] }) }),
+    data.daily.length >= 3 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Heading, { size: 1, children: "Day by day" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: "A gap that has always been there is consent and blocking. A gap that opens on one day is an incident." }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TrendChart, { points: data.daily })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 3, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Heading, { size: 1, children: "Context" }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 1, muted: true, children: "Different units to the figures above, and to each other. Shown for scale, never differenced." }),
@@ -215,7 +278,7 @@ function MeasurementHealthPanel({ data }) {
         ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_sanity_ui_compat2.Stack, { space: 3, children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Label, { size: 1, muted: true, children: "Consent granted" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetricFigure, { metric: data.consentRate, label: "Consent granted, percent of sessions" })
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetricFigure, { metric: data.consentRate, label: "Consent granted, percent of sessions", unit: "percent" })
         ] }) })
       ] })
     ] })