@coursebuilder/analytics 1.1.1 → 1.1.2-canary.0.0c9beb2ae

package/dist/components/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { AnalyticsRange } from '../types.js';
+import { TrafficBreakdownRow, AnalyticsRange } from '../types.js';
 
 /**
  * Data structure for the Mux video dashboard, inlined here so the shared
@@ -87,6 +87,15 @@ interface DashboardData {
         totalUsers: number;
         newUsers: number;
         pageviews: number;
+        deviceCategories?: Array<TrafficBreakdownRow & {
+            deviceCategory: string;
+        }>;
+        operatingSystems?: Array<TrafficBreakdownRow & {
+            operatingSystem: string;
+        }>;
+        screenResolutions?: Array<TrafficBreakdownRow & {
+            screenResolution: string;
+        }>;
     } | null;
     attributionCoverage: {
         totalRevenue: number;
@@ -94,6 +103,13 @@ interface DashboardData {
         unattributedRevenue: number;
         attributionRate: number;
         totalPurchases: number;
+        quality?: Record<'strong' | 'medium' | 'weak' | 'unknown', {
+            lane: 'strong' | 'medium' | 'weak' | 'unknown';
+            purchases: number;
+            revenue: number;
+            revenuePercent: number;
+            notes: string[];
+        }>;
     } | null;
     mux: VideoDashboardData | null;
     muxThumbnails: Record<string, string>;

package/dist/components/index.js

@@ -684,6 +684,88 @@ function ShortlinksCard({ shortlinks, totalClicks }) {
   }), expanded ? "Show less" : `Show ${shortlinks.length - 10} more`)));
 }
 __name(ShortlinksCard, "ShortlinksCard");
+function fmtPct(v) {
+  return `${v.toFixed(1)}%`;
+}
+__name(fmtPct, "fmtPct");
+function TrafficBreakdownTable({ title, label, rows, getName }) {
+  if (!rows.length)
+    return null;
+  return /* @__PURE__ */ React3.createElement("section", {
+    className: "min-w-0"
+  }, /* @__PURE__ */ React3.createElement("div", {
+    className: "mb-2 flex items-baseline justify-between gap-2"
+  }, /* @__PURE__ */ React3.createElement("h3", {
+    className: "text-sm font-semibold"
+  }, title), /* @__PURE__ */ React3.createElement("span", {
+    className: "text-muted-foreground text-[11px]"
+  }, "Top ", rows.length)), /* @__PURE__ */ React3.createElement("div", {
+    className: "overflow-x-auto rounded-xl border border-border/50"
+  }, /* @__PURE__ */ React3.createElement("table", {
+    className: "w-full min-w-[440px] text-left text-sm"
+  }, /* @__PURE__ */ React3.createElement("thead", {
+    className: "bg-muted/30 text-muted-foreground text-[11px] uppercase tracking-wide"
+  }, /* @__PURE__ */ React3.createElement("tr", null, /* @__PURE__ */ React3.createElement("th", {
+    className: "px-3 py-2 font-medium"
+  }, label), /* @__PURE__ */ React3.createElement("th", {
+    className: "px-3 py-2 text-right font-medium"
+  }, "Sessions"), /* @__PURE__ */ React3.createElement("th", {
+    className: "px-3 py-2 text-right font-medium"
+  }, "Users"), /* @__PURE__ */ React3.createElement("th", {
+    className: "px-3 py-2 text-right font-medium"
+  }, "In rows"), /* @__PURE__ */ React3.createElement("th", {
+    className: "px-3 py-2 text-right font-medium"
+  }, "Of traffic"))), /* @__PURE__ */ React3.createElement("tbody", null, rows.map((row) => /* @__PURE__ */ React3.createElement("tr", {
+    key: getName(row),
+    className: "border-t border-border/40 tabular-nums"
+  }, /* @__PURE__ */ React3.createElement("td", {
+    className: "max-w-[220px] truncate px-3 py-2 font-medium"
+  }, getName(row)), /* @__PURE__ */ React3.createElement("td", {
+    className: "px-3 py-2 text-right"
+  }, row.sessions.toLocaleString()), /* @__PURE__ */ React3.createElement("td", {
+    className: "px-3 py-2 text-right"
+  }, row.users.toLocaleString()), /* @__PURE__ */ React3.createElement("td", {
+    className: "px-3 py-2 text-right"
+  }, fmtPct(row.sessionPercent)), /* @__PURE__ */ React3.createElement("td", {
+    className: "px-3 py-2 text-right"
+  }, fmtPct(row.trafficSessionPercent))))))));
+}
+__name(TrafficBreakdownTable, "TrafficBreakdownTable");
+function TrafficBreakdownsCard({ traffic }) {
+  const deviceCategories = traffic.deviceCategories ?? [];
+  const operatingSystems = traffic.operatingSystems ?? [];
+  const screenResolutions = traffic.screenResolutions ?? [];
+  if (deviceCategories.length === 0 && operatingSystems.length === 0 && screenResolutions.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React3.createElement(Card, null, /* @__PURE__ */ React3.createElement(CardHeader, null, /* @__PURE__ */ React3.createElement("div", {
+    className: "flex items-center gap-2.5"
+  }, /* @__PURE__ */ React3.createElement(GlobeIcon, {
+    className: "text-muted-foreground h-4 w-4"
+  }), /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement(CardTitle, {
+    className: "text-sm font-semibold"
+  }, "Traffic Details"), /* @__PURE__ */ React3.createElement(CardDescription, {
+    className: "text-[11px]"
+  }, "Device, OS, and screen share. In rows is share inside the table. Of traffic is share of total sessions.")))), /* @__PURE__ */ React3.createElement(CardContent, null, /* @__PURE__ */ React3.createElement("div", {
+    className: "grid gap-4 xl:grid-cols-3"
+  }, /* @__PURE__ */ React3.createElement(TrafficBreakdownTable, {
+    title: "Device category",
+    label: "Device",
+    rows: deviceCategories,
+    getName: (row) => row.deviceCategory
+  }), /* @__PURE__ */ React3.createElement(TrafficBreakdownTable, {
+    title: "Operating systems",
+    label: "OS",
+    rows: operatingSystems.slice(0, 10),
+    getName: (row) => row.operatingSystem
+  }), /* @__PURE__ */ React3.createElement(TrafficBreakdownTable, {
+    title: "Screen resolutions",
+    label: "Resolution",
+    rows: screenResolutions.slice(0, 10),
+    getName: (row) => row.screenResolution
+  }))));
+}
+__name(TrafficBreakdownsCard, "TrafficBreakdownsCard");
 var RANGES = [
   {
     value: "24h",
@@ -743,7 +825,7 @@ function OmnibusDashboard({ data, initialRange, appName, surveyDrilldownHref })
     className: "text-pretty text-xl font-bold tracking-tight sm:text-2xl"
   }, "Analytics"), /* @__PURE__ */ React3.createElement("p", {
     className: "text-muted-foreground truncate text-[13px]"
-  }, "Revenue \xB7 Attribution \xB7 Video \xB7 Traffic \xB7 Surveys \u2014 ", rangeLabel)), /* @__PURE__ */ React3.createElement("div", {
+  }, "Revenue \xB7 Attribution \xB7 Video \xB7 Traffic \xB7 Surveys, ", rangeLabel)), /* @__PURE__ */ React3.createElement("div", {
     className: "flex shrink-0 items-center gap-2"
   }, isPending && /* @__PURE__ */ React3.createElement("span", {
     className: "text-muted-foreground animate-pulse text-xs"
@@ -798,7 +880,9 @@ function OmnibusDashboard({ data, initialRange, appName, surveyDrilldownHref })
     value: `${data.surveySegments.length}`,
     sub: `${data.surveySegments.reduce((s, q) => s + q.responses, 0).toLocaleString()} responses`,
     icon: ClipboardListIcon
-  })), hasMux && data.mux.topVideos.length > 0 && /* @__PURE__ */ React3.createElement(TopVideosCard, {
+  })), hasTraffic && /* @__PURE__ */ React3.createElement(TrafficBreakdownsCard, {
+    traffic: data.traffic
+  }), hasMux && data.mux.topVideos.length > 0 && /* @__PURE__ */ React3.createElement(TopVideosCard, {
     label: "Site Videos",
     subtitle: `${fmtWatchMs(data.mux.overview.totalPlayingTimeMs)} watch time \xB7 ${fmtK(data.mux.overview.uniqueViewers)} viewers`,
     icon: FilmIcon,
@@ -840,7 +924,7 @@ function OmnibusDashboard({ data, initialRange, appName, surveyDrilldownHref })
     className: "text-muted-foreground block text-[11px] font-medium uppercase tracking-wider"
   }, "Conversion Rate"), /* @__PURE__ */ React3.createElement("span", {
     className: "text-foreground mt-1 block text-xl font-bold tabular-nums"
-  }, signupCount > 0 ? `${(purchaseAttrCount / signupCount * 100).toFixed(1)}%` : "\u2014"))))), hasAttributionCoverage && data.attributionCoverage.totalPurchases > 0 && /* @__PURE__ */ React3.createElement(Card, null, /* @__PURE__ */ React3.createElement(CardHeader, {
+  }, signupCount > 0 ? `${(purchaseAttrCount / signupCount * 100).toFixed(1)}%` : "-"))))), hasAttributionCoverage && data.attributionCoverage.totalPurchases > 0 && /* @__PURE__ */ React3.createElement(Card, null, /* @__PURE__ */ React3.createElement(CardHeader, {
     className: "pb-3"
   }, /* @__PURE__ */ React3.createElement("div", {
     className: "flex items-center gap-2.5"
@@ -872,7 +956,26 @@ function OmnibusDashboard({ data, initialRange, appName, surveyDrilldownHref })
     className: "text-muted-foreground block text-[11px] font-medium uppercase tracking-wider"
   }, "Total Purchases"), /* @__PURE__ */ React3.createElement("span", {
     className: "text-foreground mt-1 block text-xl font-bold tabular-nums"
-  }, data.attributionCoverage.totalPurchases.toLocaleString()))))), hasValuePaths && /* @__PURE__ */ React3.createElement(Card, null, /* @__PURE__ */ React3.createElement(CardHeader, {
+  }, data.attributionCoverage.totalPurchases.toLocaleString()))), data.attributionCoverage.quality && /* @__PURE__ */ React3.createElement("div", {
+    className: "mt-4 grid gap-2 sm:grid-cols-4"
+  }, [
+    "strong",
+    "medium",
+    "weak",
+    "unknown"
+  ].map((lane) => {
+    const item = data.attributionCoverage.quality[lane];
+    return /* @__PURE__ */ React3.createElement("div", {
+      key: lane,
+      className: "rounded-lg border border-border/40 p-3"
+    }, /* @__PURE__ */ React3.createElement("span", {
+      className: "text-muted-foreground block text-[11px] font-medium uppercase tracking-wider"
+    }, lane), /* @__PURE__ */ React3.createElement("span", {
+      className: "text-foreground mt-1 block text-lg font-bold tabular-nums"
+    }, fmt$(item.revenue)), /* @__PURE__ */ React3.createElement("span", {
+      className: "text-muted-foreground text-[11px]"
+    }, item.purchases.toLocaleString(), " purchases \xB7", " ", (item.revenuePercent * 100).toFixed(1), "%"));
+  })))), hasValuePaths && /* @__PURE__ */ React3.createElement(Card, null, /* @__PURE__ */ React3.createElement(CardHeader, {
     className: "pb-3"
   }, /* @__PURE__ */ React3.createElement("div", {
     className: "flex items-center gap-2.5"
@@ -1327,13 +1430,13 @@ function OmnibusDashboard({ data, initialRange, appName, surveyDrilldownHref })
     className: `py-2.5 pr-4 text-right text-sm font-semibold tabular-nums ${p.totalAmount > 0 ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground"}`
   }, p.totalAmount > 0 ? fmt$(p.totalAmount) : "Free"), /* @__PURE__ */ React3.createElement("td", {
     className: "py-2.5 pr-4 text-right text-sm tabular-nums"
-  }, p.seats ?? "\u2014"), /* @__PURE__ */ React3.createElement("td", {
+  }, p.seats ?? "-"), /* @__PURE__ */ React3.createElement("td", {
     className: "max-w-[200px] truncate py-2.5 pr-4 text-sm font-medium"
   }, p.productName), /* @__PURE__ */ React3.createElement("td", {
     className: "text-muted-foreground hidden max-w-[150px] truncate py-2.5 pr-4 text-sm sm:table-cell"
-  }, p.userName ?? p.userEmail ?? "\u2014"), /* @__PURE__ */ React3.createElement("td", {
+  }, p.userName ?? p.userEmail ?? "-"), /* @__PURE__ */ React3.createElement("td", {
     className: "text-muted-foreground hidden py-2.5 pr-4 text-sm sm:table-cell"
-  }, p.country ? `${countryFlag2(p.country)} ${p.country}` : "\u2014"), /* @__PURE__ */ React3.createElement("td", {
+  }, p.country ? `${countryFlag2(p.country)} ${p.country}` : "-"), /* @__PURE__ */ React3.createElement("td", {
     className: "text-muted-foreground whitespace-nowrap py-2.5 pr-4 text-sm"
   }, fmtAgo(p.createdAt)))))))))));
 }