@liiift-studio/sanity-visitor-insights 0.8.2 → 0.9.0

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -51,7 +61,7 @@ var import_sanity2 = require("sanity");
 var import_icons = require("@liiift-studio/sanity-ui-compat/icons");
 
 // src/studio/VisitorInsightsTool.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_sanity_ui_compat3 = require("@liiift-studio/sanity-ui-compat");
 
 // src/studio/useReport.ts
@@ -106,6 +116,7 @@ function useReport({ apiBaseUrl, report, range }) {
 }
 
 // src/studio/Figure.tsx
+var import_react2 = __toESM(require("react"));
 var import_sanity_ui_compat = require("@liiift-studio/sanity-ui-compat");
 var import_jsx_runtime = require("react/jsx-runtime");
 var REASON_TEXT = {
@@ -164,6 +175,18 @@ function ComparisonBar({ label, metric, max, tone = "default" }) {
     )
   ] });
 }
+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",
@@ -191,17 +214,30 @@ function NoticeList({ notices }) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size: 1, children: notice })
   ] }) }) }, notice)) });
 }
+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 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) => {
+  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) => {
@@ -215,40 +251,145 @@ function TrendChart({ points, label = "Daily pageviews, GA4 against Vercel" }) {
     });
     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" })
-        ]
-      }
-    ) }),
+  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.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"
-      ] })
+      /* @__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" })
     ] })
   ] });
 }
@@ -437,8 +578,8 @@ var PANELS = [
   { report: "diagnostics", label: "Diagnostics", blurb: "What to fix before trusting the numbers above" }
 ];
 function RangeSelector({ value, onChange }) {
-  const refs = (0, import_react2.useRef)([]);
-  const onKeyDown = (0, import_react2.useCallback)(
+  const refs = (0, import_react3.useRef)([]);
+  const onKeyDown = (0, import_react3.useCallback)(
     (event) => {
       const currentIndex = RANGES.findIndex((r) => r.key === value);
       let nextIndex = null;
@@ -494,8 +635,8 @@ function SourceStatusRow({ sources }) {
   ] }) });
 }
 function PanelTabs({ value, onChange }) {
-  const refs = (0, import_react2.useRef)([]);
-  const onKeyDown = (0, import_react2.useCallback)(
+  const refs = (0, import_react3.useRef)([]);
+  const onKeyDown = (0, import_react3.useCallback)(
     (event) => {
       const currentIndex = PANELS.findIndex((p) => p.report === value);
       let nextIndex = null;
@@ -571,8 +712,8 @@ function ReportPanel({ report, apiBaseUrl, range }) {
 function VisitorInsightsTool(props) {
   const apiBaseUrl = props.tool?.options?.apiBaseUrl ?? props.apiBaseUrl ?? "";
   const siteLabel = props.tool?.options?.siteLabel ?? props.siteLabel ?? "";
-  const [range, setRange] = (0, import_react2.useState)("week");
-  const [activePanel, setActivePanel] = (0, import_react2.useState)("measurement-health");
+  const [range, setRange] = (0, import_react3.useState)("week");
+  const [activePanel, setActivePanel] = (0, import_react3.useState)("measurement-health");
   const active = PANELS.find((p) => p.report === activePanel) ?? PANELS[0];
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Container, { width: 4, padding: 4, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 5, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Flex, { align: "flex-start", justify: "space-between", gap: 4, wrap: "wrap", children: [