@liiift-studio/sanity-visitor-insights 0.67.0 → 0.68.0

package/dist/index.js

@@ -940,6 +940,34 @@ function SurvivalLines({
     ] }, segment.key)) })
   ] });
 }
+function RatioFigure({
+  value,
+  format,
+  parts,
+  size = 4,
+  unavailable: unavailable2
+}) {
+  const [showParts, setShowParts] = import_react2.default.useState(false);
+  const canToggle = value !== null && parts.every((p) => p.value !== null);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Stack, { space: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: ratioRow, children: [
+    showParts && canToggle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Stack, { space: 1, children: parts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sanity_ui_compat.Text, { size: size > 1 ? 2 : size, children: [
+      (part.format ?? formatCount)(part.value),
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { as: "span", size: 0, muted: true, children: part.label })
+    ] }, part.label)) }) : value === null ? unavailable2 : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sanity_ui_compat.Text, { size, children: format(value) }),
+    canToggle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        style: ratioToggle,
+        "aria-pressed": showParts,
+        "aria-label": showParts ? "Show the rate" : "Show the counts behind this rate",
+        onClick: () => setShowParts((was) => !was),
+        children: showParts ? "rate" : "counts"
+      }
+    )
+  ] }) });
+}
 function SortableTable({
   caption,
   columns,
@@ -1218,6 +1246,24 @@ var shiftNow = {
   background: mark("shift.now")
 };
 var survivalLegend = { display: "flex", gap: 14, flexWrap: "wrap" };
+var ratioRow = {
+  display: "flex",
+  alignItems: "baseline",
+  gap: 10,
+  flexWrap: "wrap"
+};
+var ratioToggle = {
+  appearance: "none",
+  background: "transparent",
+  border: "1px solid var(--card-border-color, rgba(128,128,128,0.3))",
+  borderRadius: 3,
+  color: "inherit",
+  font: "inherit",
+  fontSize: "0.72em",
+  padding: "1px 7px",
+  cursor: "pointer",
+  opacity: 0.75
+};
 var filterInput = {
   font: "inherit",
   fontSize: "0.85em",
@@ -2147,21 +2193,36 @@ function OverviewPanel({ data, previous, onBrush }) {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: cardGrid, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Average order" }),
-        (() => {
-          const average = averageOrderValue(data);
-          const value = metricSortValue(average);
-          if (value === null) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: average, label: "Average order value" });
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 2, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: figureRow, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 4, children: formatMoney(value, data.currency ?? null) }) }),
-            average.status === "partial" && average.note && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: average.note })
-          ] });
-        })(),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          RatioFigure,
+          {
+            value: metricSortValue(averageOrderValue(data)),
+            format: (v) => formatMoney(v, data.currency ?? null),
+            parts: [
+              { label: "taken", value: metricSortValue(data.revenue), format: (v) => formatMoney(v, data.currency ?? null) },
+              { label: "orders with an amount", value: finiteOrNull(data.ordersWithTotal) }
+            ],
+            unavailable: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: averageOrderValue(data), label: "Average order value" })
+          }
+        ),
+        averageOrderValue(data).status === "partial" && averageOrderValue(data).note && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: averageOrderValue(data).note }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "From your orders, so exact." })
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Card, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Label, { size: 1, muted: true, children: "Visitors per order" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: visitorsPerOrder(data), label: "Visitors per order" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "Against Vercel\u2019s visitor count, not Google Analytics\u2019 \u2014 dividing by GA4 would flatter this by whatever share it is missing. Read it as a ceiling: some of those visitors are crawlers or repeat devices." })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          RatioFigure,
+          {
+            value: metricSortValue(visitorsPerOrder(data)),
+            format: (v) => formatCount(v),
+            parts: [
+              { label: "visitors", value: metricSortValue(data.vercelVisitors) },
+              { label: "orders", value: metricSortValue(data.orders) }
+            ],
+            unavailable: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetricFigure, { metric: visitorsPerOrder(data), label: "Visitors per order" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: "Vercel\u2019s visitor count. A ceiling \u2014 some are bots or the same person twice." })
       ] }) })
     ] }),
     (data.crossSource?.length ?? 0) >= 3 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 3, children: [
@@ -2435,7 +2496,14 @@ function OverviewPanel({ data, previous, onBrush }) {
               exportValue: (c) => revenuePerThousandSent(c),
               render: (c) => {
                 const value = revenuePerThousandSent(c);
-                return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: value === null ? "\u2014" : formatMoney(value, data.currency ?? null) });
+                if (value === null) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: "\u2014" });
+                return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Stack, { space: 1, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sanity_ui_compat3.Text, { size: 1, children: formatMoney(value, data.currency ?? null) }),
+                  c.revenueAfter !== null && c.revenueAfter !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_sanity_ui_compat3.Text, { size: 0, muted: true, children: [
+                    "from ",
+                    formatMoney(c.revenueAfter, data.currency ?? null)
+                  ] })
+                ] });
               }
             }
           ]