@liiift-studio/sanity-visitor-insights 0.28.0 → 0.29.0

package/dist/index.js

@@ -248,7 +248,8 @@ function Delta({ current, previous, riseIsGood = true, unit = "count" }) {
   const now = current;
   const before = previous;
   const absolute = now - before;
-  if (absolute === 0) {
+  const roundsToNothing = unit === "percent" ? Math.abs(absolute) < 0.05 : before !== 0 && Math.abs(absolute / Math.abs(before)) < 5e-3;
+  if (absolute === 0 || roundsToNothing) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: deltaStyle("flat"), children: "no change" });
   }
   const change = before === 0 ? null : absolute / Math.abs(before);
@@ -1087,11 +1088,49 @@ function dayIndexAt(clientX, left, boxWidth, viewBoxWidth, plotWidth, count) {
   const index = Math.round((clamped - GUTTER) / plotWidth * (count - 1));
   return Math.max(0, Math.min(count - 1, index));
 }
+function findCoverageIncident(days, dates) {
+  const measured = days.filter((d) => d !== null);
+  if (measured.length < 21) return null;
+  const sorted = [...measured].sort((a, b) => a - b);
+  const normal = sorted[Math.floor(sorted.length / 2)];
+  if (normal <= 0.1) return null;
+  const threshold = normal * 0.5;
+  const MIN_RUN = 3;
+  let best = null;
+  let runStart = null;
+  for (let i = 0; i <= days.length; i++) {
+    const value = days[i];
+    const low = i < days.length && value !== null && value !== void 0 && value < threshold;
+    if (low && runStart === null) runStart = i;
+    if (!low && runStart !== null) {
+      const length = i - runStart;
+      if (length >= MIN_RUN && (!best || length > best.end - best.start)) best = { start: runStart, end: i };
+      runStart = null;
+    }
+  }
+  if (!best) return null;
+  const during = days.slice(best.start, best.end).filter((d) => d !== null);
+  const before = days.slice(0, best.start).filter((d) => d !== null);
+  if (before.length < 3 || during.length === 0) return null;
+  const mean = (values) => values.reduce((sum, v) => sum + v, 0) / values.length;
+  const onset = dates[best.start];
+  if (!onset) return null;
+  return {
+    onset,
+    days: best.end - best.start,
+    before: mean(before),
+    during: mean(during),
+    // The run reaching the end of the series is the difference between "this happened" and "this
+    // is happening", which is the difference between a note and a job for today.
+    ongoing: best.end >= days.length
+  };
+}
 function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
   const [hoverIndex, setHoverIndex] = (0, import_react3.useState)(null);
   const [pinned, setPinned] = (0, import_react3.useState)(false);
   const [brushAnchor, setBrushAnchor] = (0, import_react3.useState)(null);
   const [brushed, setBrushed] = (0, import_react3.useState)(null);
+  const [steppedByKeyboard, setSteppedByKeyboard] = (0, import_react3.useState)(false);
   const [tooShort, setTooShort] = (0, import_react3.useState)(false);
   const [measured, setMeasured] = (0, import_react3.useState)(WIDTH);
   const frameRef = (0, import_react3.useRef)(null);
@@ -1155,6 +1194,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
     (event) => {
       const index = indexAt(event.clientX);
       if (index === null) return;
+      setSteppedByKeyboard(false);
       setHoverIndex(index);
       if (brushAnchor !== null) {
         const from = Math.min(brushAnchor, index);
@@ -1212,6 +1252,17 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
       sentences.push(`${row.shortfall.source} counted ${formatValue(Math.round(excess), row.unit, currency)} more ${row.label.toLowerCase()} than ${row.source} on some days, which usually means a tag firing twice rather than extra traffic.`);
     }
     if (gap <= 0) return sentences;
+    const coverageByDay = row.points.map((point) => {
+      if (point.value === null || point.value <= 0) return null;
+      const saw = seen.get(point.date);
+      return saw == null ? null : saw / point.value;
+    });
+    const incident = findCoverageIncident(coverageByDay, row.points.map((p) => p.date));
+    if (incident) {
+      sentences.push(
+        `${row.shortfall.source} coverage fell from about ${formatPercent(incident.before, 0)} to ${formatPercent(incident.during, 0)} on ${tickLabel(/* @__PURE__ */ new Date(`${incident.onset}T00:00:00Z`))}` + (incident.ongoing ? `, and has stayed there for ${incident.days} days. That is a change on a date, not a standing shortfall \u2014 something altered on or around then.` : ` for ${incident.days} days, then recovered.`)
+      );
+    }
     const total = `${row.shortfall.source} missed ${formatValue(Math.round(gap), row.unit, currency)} ${row.label.toLowerCase()} over this period`;
     sentences.push(worst && worst.ratio > 0 ? `${total}; the gap was widest on ${tickLabel(/* @__PURE__ */ new Date(`${worst.date}T00:00:00Z`))} at ${formatPercent(worst.ratio, 0)}.` : `${total}.`);
     return sentences;
@@ -1277,6 +1328,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
           }
           if (next === null) return;
           event.preventDefault();
+          setSteppedByKeyboard(true);
           setHoverIndex(next);
           if (event.shiftKey && onBrush) {
             const anchor = brushAnchor ?? current;
@@ -1305,7 +1357,9 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
             const zeroes = row.mark === "events" && pitch >= 6 ? row.points.filter((p) => p.value === 0) : [];
             const gap = row.shortfall ? gapGen(row.points) ?? "" : "";
             const shortfallLine = row.shortfall && revealed ? lineGen(shortfallPoints) ?? "" : "";
+            const clipId = `row-clip-${rowIndex}`;
             return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: GUTTER, y: plotTop, width: plotWidth, height: Math.max(1, bottom - plotTop) }) }) }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: GUTTER, x2: GUTTER + plotWidth, y1: bottom, y2: bottom, stroke: "currentColor", strokeWidth: 1, opacity: 0.45 }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: GUTTER + 4, y: top + 11, fontSize: AXIS_TYPE, fill: "currentColor", opacity: 0.85, fontWeight: 500, children: row.label }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("text", { x: GUTTER + plotWidth, y: top + 11, textAnchor: "end", fontSize: AXIS_TYPE, fill: "currentColor", opacity: 0.72, children: [
@@ -1314,52 +1368,54 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: GUTTER - 6, y: y(y.domain()[1]) + 4, textAnchor: "end", fontSize: AXIS_TYPE, fill: "currentColor", opacity: 0.7, children: formatValue(y.domain()[1], row.unit, currency) }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: GUTTER - 6, y: bottom + 4, textAnchor: "end", fontSize: AXIS_TYPE, fill: "currentColor", opacity: 0.7, children: formatValue(0, row.unit, currency) }),
-              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 - 3,
-                    width: stemWidth,
-                    height: 3,
-                    fill: "currentColor",
-                    opacity: 0.55
-                  },
-                  `zero-${p.date}`
-                );
-              }),
-              stems.map((p) => {
-                const cx = at(p);
-                const headY = y(p.value);
-                if (!Number.isFinite(cx) || !Number.isFinite(headY)) return null;
-                return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "rect",
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { clipPath: `url(#${clipId})`, children: [
+                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 - 3,
+                      width: stemWidth,
+                      height: 3,
+                      fill: "currentColor",
+                      opacity: 0.55
+                    },
+                    `zero-${p.date}`
+                  );
+                }),
+                stems.map((p) => {
+                  const cx = at(p);
+                  const headY = y(p.value);
+                  if (!Number.isFinite(cx) || !Number.isFinite(headY)) return null;
+                  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "rect",
+                    {
+                      x: Math.max(GUTTER, Math.min(GUTTER + plotWidth - stemWidth, cx - stemWidth / 2)),
+                      y: Math.min(headY, bottom),
+                      width: stemWidth,
+                      height: Math.max(1.5, Math.abs(bottom - headY)),
+                      fill: "currentColor",
+                      opacity: 0.75
+                    },
+                    p.date
+                  );
+                }),
+                path && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "path",
                   {
-                    x: Math.max(GUTTER, Math.min(GUTTER + plotWidth - stemWidth, cx - stemWidth / 2)),
-                    y: Math.min(headY, bottom),
-                    width: stemWidth,
-                    height: Math.max(1.5, Math.abs(bottom - headY)),
-                    fill: "currentColor",
-                    opacity: 0.75
-                  },
-                  p.date
-                );
-              }),
-              path && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                "path",
-                {
-                  d: path,
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: 2,
-                  strokeDasharray: row.complete ? void 0 : "6 4",
-                  opacity: row.complete ? 0.95 : 0.7
-                }
-              )
+                    d: path,
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    strokeDasharray: row.complete ? void 0 : "6 4",
+                    opacity: row.complete ? 0.95 : 0.7
+                  }
+                )
+              ] })
             ] }, row.key);
           }),
           markers.map((marker) => {
@@ -1418,6 +1474,25 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
               opacity: 0.8
             }
           ),
+          tickIndexes.map((index) => {
+            const date = dates[index];
+            if (!date) return null;
+            const at = x(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
+            if (!Number.isFinite(at)) return null;
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "line",
+              {
+                x1: at,
+                x2: at,
+                y1: TOP_PAD,
+                y2: height - AXIS_HEIGHT,
+                stroke: "currentColor",
+                strokeWidth: 1,
+                opacity: 0.08
+              },
+              `grid-${date}`
+            );
+          }),
           tickIndexes.map((index, position) => {
             const date = dates[index];
             if (!date) return null;
@@ -1438,7 +1513,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: readoutRow, "aria-live": "polite", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: readoutRow, "aria-live": steppedByKeyboard ? "polite" : "off", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sanity_ui_compat2.Text, { size: 0, weight: "medium", children: brushed && brushed[1] > brushed[0] && brushed[1] < dates.length ? `${tickLabel(/* @__PURE__ */ new Date(`${dates[brushed[0]]}T00:00:00Z`))} \u2013 ${tickLabel(/* @__PURE__ */ new Date(`${dates[brushed[1]]}T00:00:00Z`))} \xB7 ${brushed[1] - brushed[0] + 1} days` : hoveredDate ? tickLabel(/* @__PURE__ */ new Date(`${hoveredDate}T00:00:00Z`)) : "Hover the chart to read a day" }),
       hoveredDate && series.map((row) => {
         const point = row.points.find((p) => p.date === hoveredDate);