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

package/dist/index.d.mts

@@ -399,6 +399,16 @@ interface Series {
     /** Whether the line's source sees everything. Drives the stroke and the wording. */
     complete: boolean;
     unit: SeriesUnit;
+    /**
+     * How the row is drawn. Defaults to `line`.
+     *
+     * `events` is for a quantity that only exists on the days it happened — orders, revenue. Darden
+     * does seven orders a quarter, and a monotone curve through those seven points drew a smooth
+     * rise and fall across eighty-three days on which nothing occurred, with the curve's overshoot
+     * putting non-zero revenue on days that had none. A stem per day says what a sale is: a discrete
+     * event, on a date, of a size. Days with nothing draw nothing, which is the truth.
+     */
+    mark?: 'line' | 'events';
     points: SeriesPoint[];
     /**
      * What a lossier source saw of the same thing.

package/dist/index.d.ts

@@ -399,6 +399,16 @@ interface Series {
     /** Whether the line's source sees everything. Drives the stroke and the wording. */
     complete: boolean;
     unit: SeriesUnit;
+    /**
+     * How the row is drawn. Defaults to `line`.
+     *
+     * `events` is for a quantity that only exists on the days it happened — orders, revenue. Darden
+     * does seven orders a quarter, and a monotone curve through those seven points drew a smooth
+     * rise and fall across eighty-three days on which nothing occurred, with the curve's overshoot
+     * putting non-zero revenue on days that had none. A stem per day says what a sale is: a discrete
+     * event, on a date, of a size. Days with nothing draw nothing, which is the truth.
+     */
+    mark?: 'line' | 'events';
     points: SeriesPoint[];
     /**
      * What a lossier source saw of the same thing.

package/dist/index.js

@@ -1031,7 +1031,7 @@ var import_sanity_ui_compat5 = require("@liiift-studio/sanity-ui-compat");
 var import_sanity_ui_compat3 = require("@liiift-studio/sanity-ui-compat");
 
 // src/studio/CrossSourceTimeline.tsx
-var import_react3 = require("react");
+var import_react3 = __toESM(require("react"));
 var import_sanity_ui_compat2 = require("@liiift-studio/sanity-ui-compat");
 var import_d3_scale = require("d3-scale");
 var import_d3_shape = require("d3-shape");
@@ -1058,13 +1058,24 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
   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 [measured, setMeasured] = (0, import_react3.useState)(WIDTH);
   const frameRef = (0, import_react3.useRef)(null);
   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 = WIDTH - GUTTER - RIGHT_PAD;
+  const plotWidth = Math.max(120, measured - GUTTER - RIGHT_PAD);
+  import_react3.default.useEffect(() => {
+    const frame = frameRef.current;
+    if (!frame || 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));
+    });
+    observer.observe(frame);
+    return () => observer.disconnect();
+  }, [measured]);
   const height = TOP_PAD + series.length * ROW_HEIGHT + AXIS_HEIGHT;
   const x = (0, import_react3.useMemo)(() => {
     if (dates.length === 0) return null;
@@ -1132,7 +1143,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
       "svg",
       {
         ref: frameRef,
-        viewBox: `0 0 ${WIDTH} ${height}`,
+        viewBox: `0 0 ${measured} ${height}`,
         onMouseMove: onMove,
         onMouseLeave: () => {
           setHoverIndex(null);
@@ -1160,7 +1171,7 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
           setBrushed(null);
           commit(from, to);
         },
-        style: { width: "100%", height: "auto", display: "block", cursor: onBrush ? "col-resize" : "default" },
+        style: { width: "100%", height, display: "block", cursor: onBrush ? "col-resize" : "default" },
         tabIndex: 0,
         role: "img",
         "aria-label": summary,
@@ -1205,7 +1216,10 @@ function CrossSourceTimeline({ series, markers = [], currency, onBrush }) {
             const shortfallPoints = row.shortfall?.points ?? [];
             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 = lineGen(row.points) ?? "";
+            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 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: [
@@ -1219,7 +1233,24 @@ 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 }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              stems.map((p) => {
+                const cx = at(p);
+                const top2 = y(p.value);
+                if (!Number.isFinite(cx) || !Number.isFinite(top2)) return null;
+                return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "rect",
+                  {
+                    x: cx - stemWidth / 2,
+                    y: top2,
+                    width: stemWidth,
+                    height: Math.max(1.5, bottom - top2),
+                    fill: "currentColor",
+                    opacity: 0.75
+                  },
+                  p.date
+                );
+              }),
+              path && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 "path",
                 {
                   d: path,
@@ -1513,6 +1544,8 @@ function OverviewPanel({ data, previous, onBrush }) {
               source: "Sanity",
               complete: true,
               unit: "money",
+              // A sale is an event on a date, not a level that varies day to day.
+              mark: "events",
               points: (data.crossSource ?? []).map((d) => ({ date: d.date, value: d.revenue }))
             }] : [{
               key: "orders",
@@ -1520,6 +1553,7 @@ function OverviewPanel({ data, previous, onBrush }) {
               source: "Sanity",
               complete: true,
               unit: "count",
+              mark: "events",
               points: (data.crossSource ?? []).map((d) => ({ date: d.date, value: d.orders }))
             }]
           ]
@@ -2352,10 +2386,6 @@ function ReportPanel({
     // felt state of the tool was "slightly unreadable", and muted text at 55% is under
     // 3:1 in both themes. The line says it; the figures stay legible.
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 0, muted: true, children: "Updating\u2026" }),
-    state.status === "ready" && 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
-    ] }) }),
     state.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Flex, { align: "center", gap: 3, padding: 4, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Spinner, { muted: true }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sanity_ui_compat4.Text, { size: 1, muted: true, children: "Loading\u2026" })
@@ -2369,16 +2399,6 @@ 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: [
-      /* @__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." })
-      ] }),
       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)(
@@ -2397,6 +2417,20 @@ function ReportPanel({
       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 }),
+      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." })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_sanity_ui_compat4.Text, { size: 0, muted: true, children: [
         "Figures cover ",
         state.envelope.range.start,