@devicechain/widgets 0.23.0 → 0.24.0

package/dist/chunks/{aggregate-widgets-HZQI5HTX.js → aggregate-widgets-2ZQBW3YF.js}

@@ -5,10 +5,17 @@ import {
   columnNames,
   deviceBars,
   deviceLabel,
-  fleetStrings,
   pageCount,
   sortMembers
-} from "./chunk-WBKHYZU2.js";
+} from "./chunk-62CHYCHI.js";
+import {
+  niceDomain,
+  pieSlices,
+  wedgePath
+} from "./chunk-YYJV54BV.js";
+import {
+  fleetStrings
+} from "./chunk-QMGKB6J3.js";
 import "./chunk-BRH66T5F.js";
 import {
   LevelEmpty,
@@ -37,6 +44,7 @@ var AGGREGATE_STRINGS = {
     noReadings: (span) => `No readings in the last ${span}`,
     noData: "No data",
     unbound: "Choose a device for this widget",
+    trend: (stat, span) => `${stat} trend over the last ${span}`,
     noCategories: "Select the measurements to show",
     pieNegative: "A pie needs values of zero or more",
     pieNoShare: "Every value is zero, so there is no share to show"
@@ -49,6 +57,7 @@ var AGGREGATE_STRINGS = {
     noReadings: (span) => `Sin lecturas en los \xFAltimos ${span}`,
     noData: "Sin datos",
     unbound: "Elija un dispositivo para este widget",
+    trend: (stat, span) => `Tendencia de ${stat.toLowerCase()} en los \xFAltimos ${span}`,
     noCategories: "Seleccione las mediciones que mostrar",
     pieNegative: "Un gr\xE1fico circular necesita valores de cero o m\xE1s",
     pieNoShare: "Todos los valores son cero, no hay proporci\xF3n que mostrar"
@@ -87,50 +96,6 @@ function pieProblem(items) {
   return void 0;
 }
 
-// src/category-geometry.ts
-function niceDomain(values, intervals = 4) {
-  const finite = values.filter(Number.isFinite);
-  let lo = Math.min(0, ...finite);
-  let hi = Math.max(0, ...finite);
-  if (lo === hi) hi = lo + 1;
-  const raw = (hi - lo) / Math.max(1, intervals);
-  const magnitude = 10 ** Math.floor(Math.log10(raw));
-  const norm = raw / magnitude;
-  const step = (norm <= 1 ? 1 : norm <= 2 ? 2 : norm <= 2.5 ? 2.5 : norm <= 5 ? 5 : 10) * magnitude;
-  lo = Math.floor(lo / step + 1e-9) * step;
-  hi = Math.ceil(hi / step - 1e-9) * step;
-  const decimals = Math.max(0, -Math.floor(Math.log10(step)) + 1);
-  const round = (v) => Number(v.toFixed(decimals));
-  const ticks = [];
-  for (let i = 0; lo + i * step <= hi + step * 1e-9; i++) ticks.push(round(lo + i * step));
-  return { min: round(lo), max: round(hi), step, ticks };
-}
-function pieSlices(values) {
-  const positive = values.map((v) => v !== null && v > 0 ? v : 0);
-  const total = positive.reduce((a, v) => a + v, 0);
-  let at = 0;
-  return positive.map((v, index) => {
-    const fraction = total > 0 ? v / total : 0;
-    const slice = { index, fraction, from: at, to: at + fraction };
-    at += fraction;
-    return slice;
-  });
-}
-function polar(cx, cy, r, turns) {
-  const angle = turns * 2 * Math.PI;
-  return { x: cx + r * Math.sin(angle), y: cy - r * Math.cos(angle) };
-}
-function wedgePath(cx, cy, r, from, to) {
-  const span = to - from;
-  if (span <= 0) return void 0;
-  if (span >= 1 - 1e-9) {
-    return `M${cx},${cy - r}A${r},${r} 0 1 1 ${cx},${cy + r}A${r},${r} 0 1 1 ${cx},${cy - r}Z`;
-  }
-  const a = polar(cx, cy, r, from);
-  const b = polar(cx, cy, r, to);
-  return `M${cx},${cy}L${a.x},${a.y}A${r},${r} 0 ${span > 0.5 ? 1 : 0} 1 ${b.x},${b.y}Z`;
-}
-
 // src/widgets/bar-chart.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var CHAR_EM = 0.6;
@@ -295,30 +260,156 @@ function Bars({
   );
 }
 
-// src/widgets/fleet-table.tsx
-import { useEffect, useMemo as useMemo2, useState } from "react";
+// src/widgets/fleet-count.tsx
+import { useMemo as useMemo2 } from "react";
 import {
-  ageSeconds,
-  bandAt,
   css as css2,
+  FIT_MIN_FONT_PX,
   fontVar,
+  levelColor,
+  optString as optString2,
+  optThresholds,
+  primaryMeasurementName,
+  spaceVar,
+  useSeverityColors,
+  WidgetFrame as WidgetFrame2
+} from "@devicechain/widget-sdk";
+
+// src/fleet-count-model.ts
+import { bandAt, SEVERITY_LEVELS, isAlarmLevel } from "@devicechain/widget-sdk";
+function attentionCount(members, measurement, thresholds) {
+  let flagged = 0;
+  let reporting = 0;
+  let pending = 0;
+  let unread = 0;
+  let notMeasured = 0;
+  let worst;
+  let band;
+  let mixed = false;
+  for (const m of members) {
+    const cell = cellFor(m, measurement);
+    if (cell.kind === "loading") pending++;
+    else if (cell.kind === "failed" || cell.kind === "unread") unread++;
+    else if (cell.kind === "not-reported") notMeasured++;
+    if (cell.kind !== "value") continue;
+    reporting++;
+    const hit = bandAt(thresholds, cell.value);
+    if (!hit || !isAlarmLevel(hit.level)) continue;
+    flagged++;
+    if (worst === void 0 || SEVERITY_LEVELS.indexOf(hit.level) > SEVERITY_LEVELS.indexOf(worst)) worst = hit.level;
+    if (band === void 0) band = hit;
+    else if (band !== hit) mixed = true;
+  }
+  return { members: members.length - notMeasured, notMeasured, flagged, reporting, pending, unread, worst, label: !mixed ? band?.label : void 0 };
+}
+
+// src/widgets/fleet-count.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var CAPTION_ROOM_PX = 22;
+function FleetCount({ widget, data }) {
+  const strings = fleetStrings();
+  const severity = useSeverityColors();
+  const fleet = data.members;
+  const showDevices = optString2(widget.options, "show") === "devices";
+  const measurement = optString2(widget.options, "measurement") ?? primaryMeasurementName(widget);
+  const thresholds = useMemo2(() => optThresholds(widget.options, "thresholds"), [widget.options]);
+  const title = optString2(widget.options, "title");
+  const empty = (message) => /* @__PURE__ */ jsx2(WidgetFrame2, { title, children: /* @__PURE__ */ jsx2(LevelEmpty, { message }) });
+  if (!fleet || fleet.status === "loading") return empty(strings.loading);
+  if (fleet.status === "unbound") return empty(strings.unbound);
+  if (fleet.status === "forbidden") return empty(strings.forbidden);
+  if (fleet.status === "unsupported") return empty(strings.unsupported);
+  if (!showDevices) {
+    if (measurement === void 0) return empty(strings.noMeasurementCount);
+    if (thresholds.length === 0) return empty(strings.noBands);
+  }
+  const counted = showDevices ? void 0 : attentionCount(fleet.members, measurement ?? "", thresholds);
+  if (!showDevices && fleet.members.length === 0) return empty(strings.noMembers);
+  if (counted && counted.pending > 0) return empty(strings.loading);
+  if (counted && counted.members === 0) {
+    return empty(fleet.truncated ? strings.noneMeasuredShown(fleet.members.length, fleet.total) : strings.noneMeasured);
+  }
+  const figure = showDevices ? String(fleet.total) : String(counted.flagged);
+  const unit = showDevices ? void 0 : strings.countOf(counted.members);
+  const color = counted ? levelColor(severity, counted.worst) : void 0;
+  const caption2 = showDevices ? strings.devices : counted.flagged > 0 ? counted.label ?? strings.needAttention : strings.needAttention;
+  const notes = [];
+  if (counted) {
+    const silent = counted.members - counted.reporting - counted.unread;
+    if (silent > 0) notes.push(strings.notReporting(silent));
+    if (counted.unread > 0) notes.push(strings.notRead(counted.unread));
+    if (counted.notMeasured > 0) notes.push(strings.notMeasured(counted.notMeasured));
+    if (fleet.truncated) notes.push(strings.truncated(fleet.members.length, fleet.total));
+  }
+  return /* @__PURE__ */ jsx2(WidgetFrame2, { title, children: ({ size, scale }) => {
+    const room = Math.round(CAPTION_ROOM_PX * scale) * (1 + notes.length);
+    const fit = { width: size.width, height: Math.max(Math.round(FIT_MIN_FONT_PX * scale), size.height - room) };
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        "data-fleet-count": showDevices ? "devices" : "attention",
+        "data-flagged": counted?.flagged,
+        "data-of": counted?.members,
+        "data-threshold-level": counted?.worst,
+        style: { display: "flex", flexDirection: "column", justifyContent: "safe center", height: "100%", overflow: "hidden" },
+        children: [
+          /* @__PURE__ */ jsx2("div", { style: { flex: "1 1 0", minHeight: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx2(LevelReadout, { text: figure, unit, color, size: fit, scale }) }),
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              "data-fleet-count-caption": "",
+              style: {
+                flex: "0 0 auto",
+                marginTop: spaceVar(1),
+                textAlign: "center",
+                fontSize: fontVar("sm"),
+                color: css2("muted-foreground"),
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: caption2
+            }
+          ),
+          notes.map((note) => /* @__PURE__ */ jsx2(
+            "div",
+            {
+              "data-fleet-count-note": "",
+              style: { textAlign: "center", fontSize: fontVar("xs"), color: css2("muted-foreground"), overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+              children: note
+            },
+            note
+          ))
+        ]
+      }
+    );
+  } });
+}
+
+// src/widgets/fleet-table.tsx
+import { useEffect, useMemo as useMemo3, useState } from "react";
+import {
+  ageSeconds,
+  bandAt as bandAt2,
+  css as css3,
+  fontVar as fontVar2,
   formatAge,
   formatValue as formatValue2,
   isStale,
-  levelColor,
+  levelColor as levelColor2,
   optNumber as optNumber2,
   optBoolean,
-  optString as optString2,
+  optString as optString3,
   parseThresholds,
   resolveStaleAfterSeconds,
-  spaceVar,
-  useSeverityColors,
+  spaceVar as spaceVar2,
+  useSeverityColors as useSeverityColors2,
   useWidgetScale,
   useWidgetSelect,
   useWidgetTimeRange,
-  WidgetFrame as WidgetFrame2
+  WidgetFrame as WidgetFrame3
 } from "@devicechain/widget-sdk";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var AGE_TICK_MS = 5e3;
 function isRecord(v) {
   return typeof v === "object" && v !== null && !Array.isArray(v);
@@ -352,20 +443,20 @@ function columnBands(raw) {
   for (const [name, items] of grouped) out.set(name, parseThresholds(items));
   return out;
 }
-var cellBox = { padding: `${spaceVar(1)} ${spaceVar(3)}`, textAlign: "left", whiteSpace: "nowrap", verticalAlign: "top" };
+var cellBox = { padding: `${spaceVar2(1)} ${spaceVar2(3)}`, textAlign: "left", whiteSpace: "nowrap", verticalAlign: "top" };
 var headBox = {
   ...cellBox,
-  fontSize: fontVar("xs"),
+  fontSize: fontVar2("xs"),
   fontWeight: 600,
   letterSpacing: "0.04em",
-  color: css2("muted-foreground"),
-  borderBottom: `1px solid ${css2("border")}`,
-  background: css2("card"),
+  color: css3("muted-foreground"),
+  borderBottom: `1px solid ${css3("border")}`,
+  background: css3("card"),
   position: "sticky",
   top: 0,
   zIndex: 1
 };
-var stickyFirst = { position: "sticky", left: 0, background: css2("card") };
+var stickyFirst = { position: "sticky", left: 0, background: css3("card") };
 var plainButton = {
   padding: 0,
   border: "none",
@@ -378,15 +469,15 @@ var plainButton = {
 function FleetTable({ widget, data }) {
   const strings = fleetStrings();
   const fleet = data.members;
-  const title = optString2(widget.options, "title");
+  const title = optString3(widget.options, "title");
   if (!fleet || fleet.status === "loading") {
-    return /* @__PURE__ */ jsx2(Frame, { title, children: /* @__PURE__ */ jsx2(LevelEmpty, { message: strings.loading }) });
+    return /* @__PURE__ */ jsx3(Frame, { title, children: /* @__PURE__ */ jsx3(LevelEmpty, { message: strings.loading }) });
   }
-  if (fleet.status === "unbound") return /* @__PURE__ */ jsx2(Frame, { title, children: /* @__PURE__ */ jsx2(LevelEmpty, { message: strings.unbound }) });
-  if (fleet.status === "forbidden") return /* @__PURE__ */ jsx2(Frame, { title, children: /* @__PURE__ */ jsx2(LevelEmpty, { message: strings.forbidden }) });
-  if (fleet.status === "unsupported") return /* @__PURE__ */ jsx2(Frame, { title, children: /* @__PURE__ */ jsx2(LevelEmpty, { message: strings.unsupported }) });
-  if (fleet.members.length === 0) return /* @__PURE__ */ jsx2(Frame, { title, children: /* @__PURE__ */ jsx2(LevelEmpty, { message: strings.noMembers }) });
-  return /* @__PURE__ */ jsx2(Table, { widget, fleet, strings });
+  if (fleet.status === "unbound") return /* @__PURE__ */ jsx3(Frame, { title, children: /* @__PURE__ */ jsx3(LevelEmpty, { message: strings.unbound }) });
+  if (fleet.status === "forbidden") return /* @__PURE__ */ jsx3(Frame, { title, children: /* @__PURE__ */ jsx3(LevelEmpty, { message: strings.forbidden }) });
+  if (fleet.status === "unsupported") return /* @__PURE__ */ jsx3(Frame, { title, children: /* @__PURE__ */ jsx3(LevelEmpty, { message: strings.unsupported }) });
+  if (fleet.members.length === 0) return /* @__PURE__ */ jsx3(Frame, { title, children: /* @__PURE__ */ jsx3(LevelEmpty, { message: strings.noMembers }) });
+  return /* @__PURE__ */ jsx3(Table, { widget, fleet, strings });
 }
 var STACK_BELOW_PX = 480;
 function Responsive({ wide, narrow }) {
@@ -394,26 +485,26 @@ function Responsive({ wide, narrow }) {
   return width > 0 && width < STACK_BELOW_PX ? narrow : wide;
 }
 function Frame({ title, children }) {
-  return /* @__PURE__ */ jsx2(WidgetFrame2, { title, flush: true, children });
+  return /* @__PURE__ */ jsx3(WidgetFrame3, { title, flush: true, children });
 }
 function Table({
   widget,
   fleet,
   strings
 }) {
-  const colors = useSeverityColors();
+  const colors = useSeverityColors2();
   const range = useWidgetTimeRange();
   const select = useWidgetSelect();
-  const selectionTarget = optString2(widget.options, "selectionTarget");
+  const selectionTarget = optString3(widget.options, "selectionTarget");
   const drillTo = select && selectionTarget ? { select, slot: selectionTarget } : void 0;
-  const columns = useMemo2(() => columnNames(widget.datasource?.measurements ?? [], fleet.members), [widget.datasource, fleet.members]);
-  const formats = useMemo2(() => columnFormats(widget.options?.columns), [widget.options?.columns]);
-  const bands = useMemo2(() => columnBands(widget.options?.thresholds), [widget.options?.thresholds]);
+  const columns = useMemo3(() => columnNames(widget.datasource?.measurements ?? [], fleet.members), [widget.datasource, fleet.members]);
+  const formats = useMemo3(() => columnFormats(widget.options?.columns), [widget.options?.columns]);
+  const bands = useMemo3(() => columnBands(widget.options?.thresholds), [widget.options?.thresholds]);
   const staleAfter = resolveStaleAfterSeconds(widget.options);
   const ageLag = positiveSeconds(optNumber2(widget.options, "ageLagSeconds"));
-  const newest = useMemo2(() => ageLag === void 0 ? void 0 : newestShown(fleet.members, columns), [ageLag, fleet.members, columns]);
+  const newest = useMemo3(() => ageLag === void 0 ? void 0 : newestShown(fleet.members, columns), [ageLag, fleet.members, columns]);
   const pageSize = optNumber2(widget.options, "pageSize") ?? DEFAULT_PAGE_SIZE;
-  const authored = { by: optString2(widget.options, "sortBy") || null, descending: optBoolean(widget.options, "sortDescending") === true };
+  const authored = { by: optString3(widget.options, "sortBy") || null, descending: optBoolean(widget.options, "sortDescending") === true };
   const [picked, setPicked] = useState(void 0);
   const sort = picked ?? authored;
   const [page, setPage] = useState(0);
@@ -423,7 +514,7 @@ function Table({
     return () => clearInterval(id);
   }, []);
   const now = range?.paused ? range.pausedAt ?? tick : tick;
-  const sorted = useMemo2(() => sortMembers(fleet.members, sort), [fleet.members, sort.by, sort.descending]);
+  const sorted = useMemo3(() => sortMembers(fleet.members, sort), [fleet.members, sort.by, sort.descending]);
   const shownPage = clampPage(page, sorted.length, pageSize);
   const rows = sorted.slice(shownPage * pageSize, (shownPage + 1) * pageSize);
   const pages = pageCount(sorted.length, pageSize);
@@ -433,35 +524,35 @@ function Table({
   };
   const ariaSort = (by) => sort.by === by ? sort.descending ? "descending" : "ascending" : "none";
   const arrow = (by) => sort.by === by ? sort.descending ? " \u25BC" : " \u25B2" : "";
-  const wide = /* @__PURE__ */ jsxs2("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: fontVar("md"), color: css2("foreground") }, children: [
-    /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
-      /* @__PURE__ */ jsx2("th", { scope: "col", "aria-sort": ariaSort(null), style: { ...headBox, ...stickyFirst, zIndex: 2 }, children: /* @__PURE__ */ jsxs2("button", { type: "button", style: plainButton, onClick: () => sortOn(null), title: strings.sortBy(strings.device), children: [
+  const wide = /* @__PURE__ */ jsxs3("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: fontVar2("md"), color: css3("foreground") }, children: [
+    /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsxs3("tr", { children: [
+      /* @__PURE__ */ jsx3("th", { scope: "col", "aria-sort": ariaSort(null), style: { ...headBox, ...stickyFirst, zIndex: 2 }, children: /* @__PURE__ */ jsxs3("button", { type: "button", style: plainButton, onClick: () => sortOn(null), title: strings.sortBy(strings.device), children: [
         strings.device,
         arrow(null)
       ] }) }),
       columns.map((name) => {
         const f = formats.get(name);
         const heading = (f?.label ?? name) + (f?.unit ? ` (${f.unit})` : "");
-        return /* @__PURE__ */ jsx2("th", { scope: "col", "aria-sort": ariaSort(name), style: headBox, children: /* @__PURE__ */ jsxs2("button", { type: "button", style: plainButton, onClick: () => sortOn(name), title: strings.sortBy(heading), children: [
+        return /* @__PURE__ */ jsx3("th", { scope: "col", "aria-sort": ariaSort(name), style: headBox, children: /* @__PURE__ */ jsxs3("button", { type: "button", style: plainButton, onClick: () => sortOn(name), title: strings.sortBy(heading), children: [
           heading,
           arrow(name)
         ] }) }, name);
       })
     ] }) }),
-    /* @__PURE__ */ jsx2("tbody", { children: rows.map((member) => {
+    /* @__PURE__ */ jsx3("tbody", { children: rows.map((member) => {
       const label = deviceLabel(member);
-      return /* @__PURE__ */ jsxs2("tr", { "data-device": member.token, style: { borderBottom: `1px solid ${css2("border")}` }, children: [
-        /* @__PURE__ */ jsx2("th", { scope: "row", style: { ...cellBox, ...stickyFirst, fontWeight: 500 }, children: drillTo ? /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsxs3("tr", { "data-device": member.token, style: { borderBottom: `1px solid ${css3("border")}` }, children: [
+        /* @__PURE__ */ jsx3("th", { scope: "row", style: { ...cellBox, ...stickyFirst, fontWeight: 500 }, children: drillTo ? /* @__PURE__ */ jsx3(
           "button",
           {
             type: "button",
-            style: { ...plainButton, color: css2("primary"), textDecoration: "underline", textUnderlineOffset: 2 },
+            style: { ...plainButton, color: css3("primary"), textDecoration: "underline", textUnderlineOffset: 2 },
             title: strings.drill(label),
             onClick: () => drillTo.select({ slot: drillTo.slot, binding: { kind: "device", deviceToken: member.token } }),
             children: label
           }
         ) : label }),
-        columns.map((name) => /* @__PURE__ */ jsx2("td", { "data-measurement": name, style: cellBox, children: /* @__PURE__ */ jsx2(
+        columns.map((name) => /* @__PURE__ */ jsx3("td", { "data-measurement": name, style: cellBox, children: /* @__PURE__ */ jsx3(
           CellView,
           {
             cell: cellFor(member, name),
@@ -478,16 +569,16 @@ function Table({
       ] }, member.token);
     }) })
   ] });
-  const narrow = /* @__PURE__ */ jsxs2("div", { "data-fleet-stacked": "", style: { color: css2("foreground"), fontSize: fontVar("md") }, children: [
-    /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexWrap: "wrap", gap: spaceVar(2), padding: `${spaceVar(2)} ${spaceVar(3)}` }, children: [null, ...columns].map((by) => {
+  const narrow = /* @__PURE__ */ jsxs3("div", { "data-fleet-stacked": "", style: { color: css3("foreground"), fontSize: fontVar2("md") }, children: [
+    /* @__PURE__ */ jsx3("div", { style: { display: "flex", flexWrap: "wrap", gap: spaceVar2(2), padding: `${spaceVar2(2)} ${spaceVar2(3)}` }, children: [null, ...columns].map((by) => {
       const f = by === null ? void 0 : formats.get(by);
       const heading = by === null ? strings.device : f?.label ?? by;
-      return /* @__PURE__ */ jsxs2(
+      return /* @__PURE__ */ jsxs3(
         "button",
         {
           type: "button",
           "aria-pressed": sort.by === by,
-          style: { ...plainButton, fontSize: fontVar("xs"), fontWeight: 600, color: css2("muted-foreground"), overflowWrap: "anywhere" },
+          style: { ...plainButton, fontSize: fontVar2("xs"), fontWeight: 600, color: css3("muted-foreground"), overflowWrap: "anywhere" },
           onClick: () => sortOn(by),
           title: strings.sortBy(heading),
           children: [
@@ -500,12 +591,12 @@ function Table({
     }) }),
     rows.map((member) => {
       const label = deviceLabel(member);
-      return /* @__PURE__ */ jsxs2("div", { "data-device": member.token, style: { padding: `${spaceVar(2)} ${spaceVar(3)}`, borderTop: `1px solid ${css2("border")}` }, children: [
-        /* @__PURE__ */ jsx2("div", { style: { fontWeight: 500, overflowWrap: "anywhere" }, children: drillTo ? /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsxs3("div", { "data-device": member.token, style: { padding: `${spaceVar2(2)} ${spaceVar2(3)}`, borderTop: `1px solid ${css3("border")}` }, children: [
+        /* @__PURE__ */ jsx3("div", { style: { fontWeight: 500, overflowWrap: "anywhere" }, children: drillTo ? /* @__PURE__ */ jsx3(
           "button",
           {
             type: "button",
-            style: { ...plainButton, color: css2("primary"), textDecoration: "underline", textUnderlineOffset: 2, overflowWrap: "anywhere" },
+            style: { ...plainButton, color: css3("primary"), textDecoration: "underline", textUnderlineOffset: 2, overflowWrap: "anywhere" },
             title: strings.drill(label),
             onClick: () => drillTo.select({ slot: drillTo.slot, binding: { kind: "device", deviceToken: member.token } }),
             children: label
@@ -513,9 +604,9 @@ function Table({
         ) : label }),
         columns.map((name) => {
           const f = formats.get(name);
-          return /* @__PURE__ */ jsxs2("div", { "data-measurement": name, style: { display: "flex", justifyContent: "space-between", gap: spaceVar(3), alignItems: "baseline" }, children: [
-            /* @__PURE__ */ jsx2("span", { style: { color: css2("muted-foreground"), fontSize: fontVar("sm"), overflowWrap: "anywhere" }, children: f?.label ?? name }),
-            /* @__PURE__ */ jsx2("span", { style: { textAlign: "right", overflowWrap: "anywhere" }, children: /* @__PURE__ */ jsx2(
+          return /* @__PURE__ */ jsxs3("div", { "data-measurement": name, style: { display: "flex", justifyContent: "space-between", gap: spaceVar2(3), alignItems: "baseline" }, children: [
+            /* @__PURE__ */ jsx3("span", { style: { color: css3("muted-foreground"), fontSize: fontVar2("sm"), overflowWrap: "anywhere" }, children: f?.label ?? name }),
+            /* @__PURE__ */ jsx3("span", { style: { textAlign: "right", overflowWrap: "anywhere" }, children: /* @__PURE__ */ jsx3(
               CellView,
               {
                 cell: cellFor(member, name),
@@ -535,19 +626,19 @@ function Table({
       ] }, member.token);
     })
   ] });
-  return /* @__PURE__ */ jsx2(Frame, { title: optString2(widget.options, "title"), children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
-    /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(Frame, { title: optString3(widget.options, "title"), children: /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
+    /* @__PURE__ */ jsx3(
       "div",
       {
         role: "region",
-        "aria-label": optString2(widget.options, "title") ?? strings.device,
+        "aria-label": optString3(widget.options, "title") ?? strings.device,
         tabIndex: 0,
         "data-fleet-scroll": "",
         style: { flex: 1, minHeight: 0, overflow: "auto" },
-        children: /* @__PURE__ */ jsx2(Responsive, { wide, narrow })
+        children: /* @__PURE__ */ jsx3(Responsive, { wide, narrow })
       }
     ),
-    (fleet.truncated || pages > 1) && /* @__PURE__ */ jsxs2(
+    (fleet.truncated || pages > 1) && /* @__PURE__ */ jsxs3(
       "div",
       {
         "data-fleet-footer": "",
@@ -556,18 +647,18 @@ function Table({
           flexWrap: "wrap",
           alignItems: "center",
           justifyContent: "space-between",
-          gap: spaceVar(2),
-          padding: `${spaceVar(1)} ${spaceVar(3)}`,
-          fontSize: fontVar("sm"),
-          color: css2("muted-foreground"),
-          borderTop: `1px solid ${css2("border")}`
+          gap: spaceVar2(2),
+          padding: `${spaceVar2(1)} ${spaceVar2(3)}`,
+          fontSize: fontVar2("sm"),
+          color: css3("muted-foreground"),
+          borderTop: `1px solid ${css3("border")}`
         },
         children: [
-          /* @__PURE__ */ jsx2("span", { "data-fleet-truncated": fleet.truncated ? "" : void 0, children: fleet.truncated ? strings.truncated(fleet.members.length, fleet.total) : "" }),
-          pages > 1 && /* @__PURE__ */ jsxs2("span", { style: { display: "inline-flex", alignItems: "center", gap: spaceVar(2) }, children: [
-            /* @__PURE__ */ jsx2("button", { type: "button", style: pagerButton, disabled: shownPage === 0, onClick: () => setPage(shownPage - 1), "aria-label": strings.previous, children: "\u2039" }),
-            /* @__PURE__ */ jsx2("span", { children: strings.range(shownPage * pageSize + 1, shownPage * pageSize + rows.length, sorted.length) }),
-            /* @__PURE__ */ jsx2("button", { type: "button", style: pagerButton, disabled: shownPage >= pages - 1, onClick: () => setPage(shownPage + 1), "aria-label": strings.next, children: "\u203A" })
+          /* @__PURE__ */ jsx3("span", { "data-fleet-truncated": fleet.truncated ? "" : void 0, children: fleet.truncated ? strings.truncated(fleet.members.length, fleet.total) : "" }),
+          pages > 1 && /* @__PURE__ */ jsxs3("span", { style: { display: "inline-flex", alignItems: "center", gap: spaceVar2(2) }, children: [
+            /* @__PURE__ */ jsx3("button", { type: "button", style: pagerButton, disabled: shownPage === 0, onClick: () => setPage(shownPage - 1), "aria-label": strings.previous, children: "\u2039" }),
+            /* @__PURE__ */ jsx3("span", { children: strings.range(shownPage * pageSize + 1, shownPage * pageSize + rows.length, sorted.length) }),
+            /* @__PURE__ */ jsx3("button", { type: "button", style: pagerButton, disabled: shownPage >= pages - 1, onClick: () => setPage(shownPage + 1), "aria-label": strings.next, children: "\u203A" })
           ] })
         ]
       }
@@ -590,8 +681,8 @@ function newestShown(members, columns) {
 }
 var pagerButton = {
   minWidth: "2em",
-  padding: `0 ${spaceVar(2)}`,
-  border: `1px solid ${css2("border")}`,
+  padding: `0 ${spaceVar2(2)}`,
+  border: `1px solid ${css3("border")}`,
   borderRadius: 4,
   background: "none",
   color: "inherit",
@@ -610,31 +701,31 @@ function CellView({
   strings,
   wrap
 }) {
-  const muted = { color: css2("muted-foreground"), fontSize: fontVar("sm"), ...wrap ? { overflowWrap: "anywhere" } : {} };
+  const muted = { color: css3("muted-foreground"), fontSize: fontVar2("sm"), ...wrap ? { overflowWrap: "anywhere" } : {} };
   switch (cell.kind) {
     case "loading":
-      return /* @__PURE__ */ jsx2("span", { style: muted, title: strings.loading, "aria-label": strings.loading, children: "\u2026" });
+      return /* @__PURE__ */ jsx3("span", { style: muted, title: strings.loading, "aria-label": strings.loading, children: "\u2026" });
     case "failed":
-      return /* @__PURE__ */ jsx2("span", { style: muted, children: strings.failed });
+      return /* @__PURE__ */ jsx3("span", { style: muted, children: strings.failed });
     case "not-reported":
-      return /* @__PURE__ */ jsx2("span", { style: muted, "data-cell-empty": "not-reported", children: strings.notReported });
+      return /* @__PURE__ */ jsx3("span", { style: muted, "data-cell-empty": "not-reported", children: strings.notReported });
     case "unread":
-      return /* @__PURE__ */ jsx2("span", { style: muted, "data-cell-empty": "unread", children: strings.unread });
+      return /* @__PURE__ */ jsx3("span", { style: muted, "data-cell-empty": "unread", children: strings.unread });
     case "no-data":
-      return /* @__PURE__ */ jsx2("span", { style: muted, "data-cell-empty": "no-data", children: strings.noData });
+      return /* @__PURE__ */ jsx3("span", { style: muted, "data-cell-empty": "no-data", children: strings.noData });
     case "value": {
-      const band = bands ? bandAt(bands, cell.value) : void 0;
-      const color = levelColor(colors, band?.level);
+      const band = bands ? bandAt2(bands, cell.value) : void 0;
+      const color = levelColor2(colors, band?.level);
       const at = cell.sample.occurredTime ? Date.parse(cell.sample.occurredTime) : Number.NaN;
       const age = Number.isNaN(at) ? void 0 : ageSeconds(at, now);
       const stale = age !== void 0 && isStale(age, staleAfter);
       const showAge = age !== void 0 && (ageLag === void 0 || stale || newest === void 0 || newest - at >= ageLag * 1e3);
-      return /* @__PURE__ */ jsxs2("span", { "data-stale": stale ? "" : void 0, style: { display: "inline-flex", flexDirection: "column", opacity: stale ? 0.6 : 1 }, children: [
-        /* @__PURE__ */ jsxs2("span", { "data-threshold-level": band?.level, style: { fontVariantNumeric: "tabular-nums", color }, children: [
+      return /* @__PURE__ */ jsxs3("span", { "data-stale": stale ? "" : void 0, style: { display: "inline-flex", flexDirection: "column", opacity: stale ? 0.6 : 1 }, children: [
+        /* @__PURE__ */ jsxs3("span", { "data-threshold-level": band?.level, style: { fontVariantNumeric: "tabular-nums", color }, children: [
           formatValue2(cell.value, format?.precision),
           format?.unit ? ` ${format.unit}` : ""
         ] }),
-        age !== void 0 && showAge && /* @__PURE__ */ jsxs2("span", { style: muted, "data-cell-age": "", children: [
+        age !== void 0 && showAge && /* @__PURE__ */ jsxs3("span", { style: muted, "data-cell-age": "", children: [
           formatAge(age),
           stale ? ` \xB7 ${strings.stale}` : ""
         ] })
@@ -644,18 +735,18 @@ function CellView({
 }
 
 // src/widgets/pie-chart.tsx
-import { useMemo as useMemo3 } from "react";
-import { css as css3, formatValue as formatValue3, optNumber as optNumber3, optString as optString3, fontVar as fontVar2, spaceVar as spaceVar2, WidgetFrame as WidgetFrame3 } from "@devicechain/widget-sdk";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useMemo as useMemo4 } from "react";
+import { css as css4, formatValue as formatValue3, optNumber as optNumber3, optString as optString4, fontVar as fontVar3, spaceVar as spaceVar3, WidgetFrame as WidgetFrame4 } from "@devicechain/widget-sdk";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var RAMP = ["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"];
 function PieChart({ widget, data }) {
-  const sort = parseSort(optString3(widget.options, "sort"));
-  const items = useMemo3(() => categoryItems(widget, data, sort), [widget, data, sort]);
-  const unit = optString3(widget.options, "unit");
+  const sort = parseSort(optString4(widget.options, "sort"));
+  const items = useMemo4(() => categoryItems(widget, data, sort), [widget, data, sort]);
+  const unit = optString4(widget.options, "unit");
   const precision = optNumber3(widget.options, "precision");
   const strings = aggregateStrings();
   const problem = items.length === 0 ? void 0 : pieProblem(items);
-  return /* @__PURE__ */ jsx3(WidgetFrame3, { title: optString3(widget.options, "title"), children: items.length === 0 ? /* @__PURE__ */ jsx3(LevelEmpty, { message: strings.noCategories }) : problem ? /* @__PURE__ */ jsx3(LevelEmpty, { message: problem === "negative" ? strings.pieNegative : problem === "noShare" ? strings.pieNoShare : strings.noData }) : /* @__PURE__ */ jsx3(Pie, { items, unit, precision }) });
+  return /* @__PURE__ */ jsx4(WidgetFrame4, { title: optString4(widget.options, "title"), children: items.length === 0 ? /* @__PURE__ */ jsx4(LevelEmpty, { message: strings.noCategories }) : problem ? /* @__PURE__ */ jsx4(LevelEmpty, { message: problem === "negative" ? strings.pieNegative : problem === "noShare" ? strings.pieNoShare : strings.noData }) : /* @__PURE__ */ jsx4(Pie, { items, unit, precision }) });
 }
 function Pie({
   items,
@@ -665,8 +756,8 @@ function Pie({
   const slices = pieSlices(items.map((i) => i.value));
   const fmt = (v) => `${formatValue3(v, precision)}${unit ? ` ${unit}` : ""}`;
   const percent = (fraction) => `${Math.round(fraction * 100)}%`;
-  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", height: "100%", gap: spaceVar2(1) }, children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", height: "100%", gap: spaceVar3(1) }, children: [
+    /* @__PURE__ */ jsx4(
       "svg",
       {
         "data-pie": "",
@@ -678,21 +769,21 @@ function Pie({
         children: slices.map((s) => {
           const d = wedgePath(50, 50, 48, s.from, s.to);
           const item = items[s.index];
-          return d ? /* @__PURE__ */ jsx3(
+          return d ? /* @__PURE__ */ jsx4(
             "path",
             {
               "data-slice": item.label,
               "data-fraction": s.fraction,
               d,
-              style: { fill: css3(RAMP[s.index % RAMP.length]), stroke: css3("card"), strokeWidth: 1 },
-              children: /* @__PURE__ */ jsx3("title", { children: `${item.label}: ${item.value === null ? "\u2014" : fmt(item.value)} (${percent(s.fraction)})` })
+              style: { fill: css4(RAMP[s.index % RAMP.length]), stroke: css4("card"), strokeWidth: 1 },
+              children: /* @__PURE__ */ jsx4("title", { children: `${item.label}: ${item.value === null ? "\u2014" : fmt(item.value)} (${percent(s.fraction)})` })
             },
             item.label
           ) : null;
         })
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       "ul",
       {
         "data-pie-legend": "",
@@ -706,12 +797,12 @@ function Pie({
           display: "flex",
           flexWrap: "wrap",
           justifyContent: "center",
-          gap: `0 ${spaceVar2(3)}`,
-          fontSize: fontVar2("xs"),
-          color: css3("muted-foreground")
+          gap: `0 ${spaceVar3(3)}`,
+          fontSize: fontVar3("xs"),
+          color: css4("muted-foreground")
         },
-        children: items.map((item, i) => /* @__PURE__ */ jsxs3("li", { title: `${item.label}: ${item.value === null ? "\u2014" : fmt(item.value)}`, style: { whiteSpace: "nowrap" }, children: [
-          /* @__PURE__ */ jsx3(
+        children: items.map((item, i) => /* @__PURE__ */ jsxs4("li", { title: `${item.label}: ${item.value === null ? "\u2014" : fmt(item.value)}`, style: { whiteSpace: "nowrap" }, children: [
+          /* @__PURE__ */ jsx4(
             "span",
             {
               "aria-hidden": "true",
@@ -721,7 +812,7 @@ function Pie({
                 height: "0.7em",
                 marginRight: "0.4em",
                 borderRadius: 2,
-                background: css3(RAMP[i % RAMP.length])
+                background: css4(RAMP[i % RAMP.length])
               }
             }
           ),
@@ -735,32 +826,33 @@ function Pie({
 }
 
 // src/widgets/stat-card.tsx
-import { useMemo as useMemo4 } from "react";
-import { spanLabel } from "@devicechain/dashboards";
+import { useMemo as useMemo5 } from "react";
+import { bucketSecondsFor, spanLabel } from "@devicechain/dashboards";
 import {
-  bandAt as bandAt2,
-  css as css4,
-  FIT_MIN_FONT_PX,
-  fontVar as fontVar3,
+  bandAt as bandAt3,
+  css as css6,
+  FIT_MIN_FONT_PX as FIT_MIN_FONT_PX2,
+  fontVar as fontVar4,
   formatValue as formatValue4,
-  levelColor as levelColor2,
+  levelColor as levelColor3,
+  optBoolean as optBoolean2,
   optNumber as optNumber4,
-  optString as optString4,
-  optThresholds,
-  spaceVar as spaceVar3,
-  useSeverityColors as useSeverityColors2,
-  WidgetFrame as WidgetFrame4,
+  optString as optString5,
+  optThresholds as optThresholds2,
+  spaceVar as spaceVar4,
+  useSeverityColors as useSeverityColors3,
+  WidgetFrame as WidgetFrame5,
   WidgetFreshnessProvider
 } from "@devicechain/widget-sdk";
 
 // src/aggregate-reading.ts
-import { pickSample, primaryMeasurementName } from "@devicechain/widget-sdk";
+import { pickSample, primaryMeasurementName as primaryMeasurementName2 } from "@devicechain/widget-sdk";
 function parseStat(v) {
   return AGGREGATE_STATS.find((s) => s === v) ?? "avg";
 }
 function statReading(widget, data, stat) {
   const { aggregates } = data;
-  const pinned = primaryMeasurementName(widget);
+  const pinned = primaryMeasurementName2(widget);
   if (widget.datasource?.kind === "unbound") return { kind: "empty", reason: "unbound", name: pinned };
   if (stat === "last") {
     const sample = pickSample(data.latest, pinned);
@@ -786,35 +878,127 @@ function statReading(widget, data, stat) {
   return { kind: "value", stat, name, value: a[stat], spanSeconds: aggregates.spanSeconds };
 }
 
+// src/sparkline.tsx
+import { css as css5 } from "@devicechain/widget-sdk";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function trendValue(point, stat) {
+  switch (stat) {
+    case "min":
+      return point.min;
+    case "max":
+      return point.max;
+    case "sum":
+      return point.sum;
+    case "count":
+      return point.count;
+    case "avg":
+    case "last":
+      return point.avg;
+  }
+}
+function trendPoints(series, stat) {
+  if (!series) return [];
+  const out = [];
+  for (const p of series) {
+    const at = Date.parse(p.bucketStart);
+    const value = trendValue(p, stat);
+    if (Number.isFinite(at) && Number.isFinite(value)) out.push({ at, value });
+  }
+  return out.sort((a, b) => a.at - b.at);
+}
+var VIEW_WIDTH = 100;
+var PAD = 3;
+function sparklineGeometry(points, height, bucketSeconds) {
+  if (points.length === 0) return { d: "", end: void 0, points: 0 };
+  const t0 = points[0].at;
+  const t1 = points[points.length - 1].at;
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (const p of points) {
+    lo = Math.min(lo, p.value);
+    hi = Math.max(hi, p.value);
+  }
+  const x = (at) => t1 === t0 ? VIEW_WIDTH / 2 : PAD + (at - t0) / (t1 - t0) * (VIEW_WIDTH - 2 * PAD);
+  const y = (v) => hi === lo ? height / 2 : PAD + (1 - (v - lo) / (hi - lo)) * (height - 2 * PAD);
+  const steps = points.slice(1).map((p, i) => p.at - points[i].at).sort((a, b) => a - b);
+  const usual = steps.length > 0 ? steps[Math.floor(steps.length / 2)] : 0;
+  const gap = Math.max(bucketSeconds * 2e3, usual * 3);
+  let d = "";
+  let prev;
+  for (const p of points) {
+    const cmd = prev === void 0 || p.at - prev > gap ? "M" : "L";
+    d += `${d ? " " : ""}${cmd}${x(p.at).toFixed(2)} ${y(p.value).toFixed(2)}`;
+    prev = p.at;
+  }
+  const last = points[points.length - 1];
+  return { d, end: { left: x(last.at) / VIEW_WIDTH * 100, top: y(last.value) / height * 100 }, points: points.length };
+}
+function Sparkline({
+  points,
+  height,
+  bucketSeconds,
+  label
+}) {
+  const g = sparklineGeometry(points, height, bucketSeconds);
+  if (g.points === 0) return null;
+  return /* @__PURE__ */ jsxs5("div", { "data-sparkline": g.points, role: "img", "aria-label": label, title: label, style: { position: "relative", height, width: "100%", flex: "0 0 auto" }, children: [
+    /* @__PURE__ */ jsx5("svg", { viewBox: `0 0 ${VIEW_WIDTH} ${height}`, preserveAspectRatio: "none", width: "100%", height, style: { display: "block", overflow: "visible" }, "aria-hidden": "true", children: g.points > 1 ? /* @__PURE__ */ jsx5("path", { d: g.d, fill: "none", stroke: css5("muted-foreground"), strokeWidth: 1.5, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" }) : null }),
+    g.end ? /* @__PURE__ */ jsx5(
+      "span",
+      {
+        "data-sparkline-end": "",
+        style: {
+          position: "absolute",
+          left: `${g.end.left}%`,
+          top: `${g.end.top}%`,
+          width: 6,
+          height: 6,
+          marginLeft: -3,
+          marginTop: -3,
+          borderRadius: "50%",
+          background: css5("muted-foreground")
+        }
+      }
+    ) : null
+  ] });
+}
+
 // src/widgets/stat-card.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var CAPTION_ROOM_PX = 22;
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var CAPTION_ROOM_PX2 = 22;
+var SPARK_ROOM_PX = 28;
 var BESIDE_FIGURE_SHARE = 0.6;
 var AGE_ONLY = { at: void 0, staleAfterSeconds: void 0 };
 function StatCard({ widget, data }) {
-  const severity = useSeverityColors2();
+  const severity = useSeverityColors3();
   const strings = aggregateStrings();
-  const stat = parseStat(optString4(widget.options, "stat"));
+  const stat = parseStat(optString5(widget.options, "stat"));
   const reading = statReading(widget, data, stat);
-  const thresholds = useMemo4(() => optThresholds(widget.options, "thresholds"), [widget.options]);
-  const unit = optString4(widget.options, "unit");
+  const thresholds = useMemo5(() => optThresholds2(widget.options, "thresholds"), [widget.options]);
+  const unit = optString5(widget.options, "unit");
   const precision = optNumber4(widget.options, "precision");
-  const title = optString4(widget.options, "title") ?? reading.name;
-  const card = /* @__PURE__ */ jsx4(WidgetFrame4, { title, sampleTime: stat === "last" ? reading.kind === "value" ? reading.time ?? null : null : void 0, children: ({ size, scale }) => {
+  const title = optString5(widget.options, "title") ?? reading.name;
+  const wantsTrend = optBoolean2(widget.options, "sparkline");
+  const card = /* @__PURE__ */ jsx6(WidgetFrame5, { title, sampleTime: stat === "last" ? reading.kind === "value" ? reading.time ?? null : null : void 0, children: ({ size, scale }) => {
     if (reading.kind === "empty") {
-      return /* @__PURE__ */ jsx4(LevelEmpty, { message: emptyMessage(reading, strings) });
+      return /* @__PURE__ */ jsx6(LevelEmpty, { message: emptyMessage(reading, strings) });
     }
     const isCount = reading.stat === "count";
-    const band = bandAt2(thresholds, reading.value);
-    const room = Math.round(CAPTION_ROOM_PX * scale);
-    const beside = size.height > 0 && size.height - room < 2 * Math.round(FIT_MIN_FONT_PX * scale);
-    const figure = beside ? { width: Math.round(size.width * BESIDE_FIGURE_SHARE), height: size.height } : { width: size.width, height: Math.max(0, size.height - room) };
-    return /* @__PURE__ */ jsxs4(
+    const band = bandAt3(thresholds, reading.value);
+    const room = Math.round(CAPTION_ROOM_PX2 * scale);
+    const floor2 = 2 * Math.round(FIT_MIN_FONT_PX2 * scale);
+    const sparkHeight = Math.round(SPARK_ROOM_PX * scale);
+    const points = wantsTrend && data.aggregates.status === "ready" ? trendPoints(data.aggregates.series?.[reading.name ?? ""], reading.stat) : [];
+    const showTrend = points.length > 0 && size.height - room - sparkHeight >= floor2;
+    const beside = size.height > 0 && size.height - room < 2 * Math.round(FIT_MIN_FONT_PX2 * scale);
+    const figure = beside ? { width: Math.round(size.width * BESIDE_FIGURE_SHARE), height: size.height } : { width: size.width, height: Math.max(0, size.height - room - (showTrend ? sparkHeight : 0)) };
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         "data-stat": reading.stat,
         "data-stat-span": reading.spanSeconds,
         "data-stat-layout": beside ? "beside" : "under",
+        "data-stat-trend": showTrend ? points.length : void 0,
         "data-threshold-level": band?.level,
         title: band?.label,
         style: {
@@ -822,38 +1006,47 @@ function StatCard({ widget, data }) {
           flexDirection: beside ? "row" : "column",
           alignItems: beside ? "center" : void 0,
           justifyContent: "safe center",
-          gap: beside ? spaceVar3(2) : void 0,
+          gap: beside ? spaceVar4(2) : void 0,
           height: "100%",
           overflow: "hidden"
         },
         children: [
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx6(
             "div",
             {
               style: beside ? { flex: "0 1 auto", minWidth: 0, display: "flex", alignItems: "center" } : { flex: "1 1 0", minHeight: 0, display: "flex", alignItems: "center", justifyContent: "center" },
-              children: /* @__PURE__ */ jsx4(
+              children: /* @__PURE__ */ jsx6(
                 LevelReadout,
                 {
                   text: formatValue4(reading.value, isCount ? 0 : precision),
                   unit: isCount ? void 0 : unit,
-                  color: levelColor2(severity, band?.level),
+                  color: levelColor3(severity, band?.level),
                   size: figure,
                   scale
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx4(
+          showTrend && data.aggregates.status === "ready" ? /* @__PURE__ */ jsx6(
+            Sparkline,
+            {
+              points,
+              height: sparkHeight,
+              bucketSeconds: bucketSecondsFor(data.aggregates.spanSeconds),
+              label: strings.trend(strings.stats[reading.stat === "last" ? "avg" : reading.stat], spanLabel(data.aggregates.spanSeconds))
+            }
+          ) : null,
+          /* @__PURE__ */ jsx6(
             "div",
             {
               "data-stat-caption": "",
               style: {
                 flex: beside ? "0 1 auto" : "0 0 auto",
                 minWidth: 0,
-                marginTop: beside ? void 0 : spaceVar3(1),
+                marginTop: beside ? void 0 : spaceVar4(1),
                 textAlign: "center",
-                fontSize: fontVar3("sm"),
-                color: css4("muted-foreground"),
+                fontSize: fontVar4("sm"),
+                color: css6("muted-foreground"),
                 whiteSpace: "nowrap",
                 overflow: "hidden",
                 textOverflow: "ellipsis"
@@ -865,7 +1058,7 @@ function StatCard({ widget, data }) {
       }
     );
   } });
-  return stat === "last" ? /* @__PURE__ */ jsx4(WidgetFreshnessProvider, { freshness: AGE_ONLY, children: card }) : card;
+  return stat === "last" ? /* @__PURE__ */ jsx6(WidgetFreshnessProvider, { freshness: AGE_ONLY, children: card }) : card;
 }
 function caption(r, stats) {
   const name = stats[r.stat];
@@ -889,8 +1082,9 @@ function emptyMessage(r, strings) {
 }
 export {
   BarChart,
+  FleetCount,
   FleetTable,
   PieChart,
   StatCard
 };
-//# sourceMappingURL=aggregate-widgets-HZQI5HTX.js.map
+//# sourceMappingURL=aggregate-widgets-2ZQBW3YF.js.map