@devicechain/widgets 0.21.1-rc.1 → 0.22.0-rc.1

package/dist/chunks/aggregate-widgets-WVXAW3UL.js

@@ -0,0 +1,895 @@
+import {
+  DEFAULT_PAGE_SIZE,
+  cellFor,
+  clampPage,
+  columnNames,
+  deviceBars,
+  deviceLabel,
+  fleetStrings,
+  pageCount,
+  sortMembers
+} from "./chunk-S2OMBJLI.js";
+import {
+  LevelEmpty,
+  LevelReadout
+} from "./chunk-XQQQNTBX.js";
+
+// src/widgets/bar-chart.tsx
+import { useMemo } from "react";
+import {
+  css,
+  formatValue,
+  optNumber,
+  optString,
+  WidgetFrame
+} from "@devicechain/widget-sdk";
+
+// src/aggregate-strings.ts
+import { viewerLocale } from "@devicechain/widget-sdk";
+var AGGREGATE_STATS = ["avg", "min", "max", "sum", "count", "last"];
+var AGGREGATE_STRINGS = {
+  en: {
+    stats: { avg: "Average", min: "Minimum", max: "Maximum", sum: "Sum", count: "Readings", last: "Latest" },
+    loading: "Loading",
+    unsupported: "This data source cannot compute aggregates",
+    failed: (m) => m ? `Aggregates unavailable: ${m}` : "Aggregates unavailable",
+    noReadings: (span) => `No readings in the last ${span}`,
+    noData: "No data",
+    unbound: "Choose a device for this widget",
+    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"
+  },
+  es: {
+    stats: { avg: "Promedio", min: "M\xEDnimo", max: "M\xE1ximo", sum: "Suma", count: "Lecturas", last: "\xDAltimo" },
+    loading: "Cargando",
+    unsupported: "Esta fuente de datos no puede calcular agregados",
+    failed: (m) => m ? `Agregados no disponibles: ${m}` : "Agregados no disponibles",
+    noReadings: (span) => `Sin lecturas en los \xFAltimos ${span}`,
+    noData: "Sin datos",
+    unbound: "Elija un dispositivo para este widget",
+    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"
+  }
+};
+function aggregateStrings(locale = viewerLocale()) {
+  return locale?.toLowerCase().split("-")[0] === "es" ? AGGREGATE_STRINGS.es : AGGREGATE_STRINGS.en;
+}
+
+// src/category-items.ts
+var CATEGORY_SORTS = ["none", "ascending", "descending"];
+function parseSort(v) {
+  return CATEGORY_SORTS.find((s) => s === v) ?? "none";
+}
+function categoryItems(widget, data, sort) {
+  const named = widget.datasource?.measurements ?? [];
+  const names = named.length > 0 ? [...new Set(named)] : Object.keys(data.latest);
+  const items = names.map((label) => {
+    const v = data.latest[label]?.value;
+    return { label, value: typeof v === "number" && Number.isFinite(v) ? v : null };
+  });
+  if (sort === "none") return items;
+  const sign = sort === "ascending" ? 1 : -1;
+  return items.map((item, i) => ({ item, i })).sort((a, b) => {
+    if (a.item.value === null || b.item.value === null) {
+      return a.item.value === b.item.value ? a.i - b.i : a.item.value === null ? 1 : -1;
+    }
+    return sign * (a.item.value - b.item.value) || a.i - b.i;
+  }).map((x) => x.item);
+}
+function pieProblem(items) {
+  const values = items.map((i) => i.value).filter((v) => v !== null);
+  if (values.length === 0) return "noData";
+  if (values.some((v) => v < 0)) return "negative";
+  if (values.every((v) => v === 0)) return "noShare";
+  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;
+var MAX_LABELLED_BARS = 12;
+var MAX_BAR_PX = 56;
+var MAX_DEVICE_BARS = 100;
+function BarChart({ widget, data }) {
+  const sort = parseSort(optString(widget.options, "sort"));
+  const perDevice = optString(widget.options, "groupBy") === "device";
+  const measurement = optString(widget.options, "measurement") ?? widget.datasource?.measurements[0];
+  const items = useMemo(
+    () => perDevice ? [] : categoryItems(widget, data, sort),
+    [widget, data, sort, perDevice]
+  );
+  const unit = optString(widget.options, "unit");
+  const precision = optNumber(widget.options, "precision");
+  return /* @__PURE__ */ jsx(WidgetFrame, { title: optString(widget.options, "title"), children: (ws) => {
+    if (perDevice) {
+      return /* @__PURE__ */ jsx(DeviceBars, { data, measurement, sort, unit, precision, ws });
+    }
+    return items.length === 0 ? /* @__PURE__ */ jsx(LevelEmpty, { message: aggregateStrings().noCategories }) : /* @__PURE__ */ jsx(Bars, { items, unit, precision, ws });
+  } });
+}
+function DeviceBars({
+  data,
+  measurement,
+  sort,
+  unit,
+  precision,
+  ws
+}) {
+  const strings = fleetStrings();
+  const fleet = data.members;
+  const bars = useMemo(
+    () => fleet && measurement ? deviceBars(fleet.members, measurement, sort) : [],
+    [fleet, measurement, sort]
+  );
+  if (!measurement) return /* @__PURE__ */ jsx(LevelEmpty, { message: strings.noMeasurement });
+  if (!fleet || fleet.status === "loading") return /* @__PURE__ */ jsx(LevelEmpty, { message: strings.loading });
+  if (fleet.status === "unbound") return /* @__PURE__ */ jsx(LevelEmpty, { message: strings.unbound });
+  if (fleet.status === "forbidden") return /* @__PURE__ */ jsx(LevelEmpty, { message: strings.forbidden });
+  if (fleet.status === "unsupported") return /* @__PURE__ */ jsx(LevelEmpty, { message: strings.unsupported });
+  if (bars.length === 0) return /* @__PURE__ */ jsx(LevelEmpty, { message: strings.noMembers });
+  const drawn = bars.slice(0, MAX_DEVICE_BARS);
+  const note = fleet.truncated || drawn.length < bars.length ? strings.truncated(drawn.length, Math.max(fleet.total, bars.length)) : void 0;
+  return /* @__PURE__ */ jsx(
+    Bars,
+    {
+      items: drawn.map((b) => ({ label: b.label, key: b.token, value: b.value })),
+      unit,
+      precision,
+      ws,
+      note
+    }
+  );
+}
+function fitLabel(label, chars) {
+  if (chars < 2) return "";
+  return label.length <= chars ? label : `${label.slice(0, Math.max(1, chars - 1))}\u2026`;
+}
+function Bars({
+  items,
+  unit,
+  precision,
+  ws,
+  note
+}) {
+  const W = ws.size.width > 0 ? ws.size.width : 240;
+  const fullH = ws.size.height > 0 ? ws.size.height : 160;
+  const noteH = note ? ws.px("font-xs") * 1.8 : 0;
+  const H = Math.max(1, fullH - noteH);
+  const horizontal = H > W;
+  const font = ws.px("font-xs");
+  const pad = ws.px("space-1");
+  const charPx = font * CHAR_EM;
+  const fmt = (v) => formatValue(v, precision);
+  const withUnit = (v) => unit ? `${fmt(v)} ${unit}` : fmt(v);
+  const domain = niceDomain(items.flatMap((i) => i.value === null ? [] : [i.value]));
+  const span = domain.max - domain.min;
+  const few = items.length <= MAX_LABELLED_BARS;
+  const widest = (texts) => texts.reduce((n, t) => Math.max(n, t.length), 0) * charPx;
+  const tickText = domain.ticks.map(fmt);
+  const catLabelH = font * 1.7;
+  const topH = font * 1.7;
+  let x0, x1, y0, y1;
+  if (horizontal) {
+    x0 = Math.min(W * 0.4, widest(items.map((i) => i.label)) + pad * 2);
+    x1 = W - pad - (few ? widest(items.map((i) => i.value === null ? "" : withUnit(i.value))) + pad : pad);
+    y0 = pad;
+    y1 = H - catLabelH;
+  } else {
+    x0 = widest(tickText) + pad * 2;
+    x1 = W - pad;
+    y0 = topH;
+    y1 = H - catLabelH;
+  }
+  const length = horizontal ? Math.max(0, x1 - x0) : Math.max(0, y1 - y0);
+  const along = (v) => (v - domain.min) / span * length;
+  const bandPx = (horizontal ? y1 - y0 : x1 - x0) / items.length;
+  const labelled = few && (horizontal || widest(items.map((i) => i.value === null ? "" : fmt(i.value))) <= bandPx);
+  const thick = Math.min(bandPx * 0.62, MAX_BAR_PX * ws.scale);
+  const muted = { fill: css("muted-foreground") };
+  const text = { fontSize: font, fontVariantNumeric: "tabular-nums" };
+  const zero = along(0);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "data-bar-chart": horizontal ? "horizontal" : "vertical",
+      width: W,
+      height: H,
+      viewBox: `0 0 ${W} ${H}`,
+      role: "img",
+      "aria-label": items.map((i) => `${i.label}: ${i.value === null ? "\u2014" : withUnit(i.value)}`).join(", "),
+      style: { display: "block" },
+      children: [
+        note ? /* @__PURE__ */ jsx("text", { "data-bar-note": "", x: pad, y: fullH - font * 0.4, style: { ...text, ...muted }, children: note }) : null,
+        unit ? /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: horizontal ? W - pad : pad,
+            y: horizontal ? H - pad : font,
+            textAnchor: horizontal ? "end" : "start",
+            style: { ...text, ...muted },
+            children: unit
+          }
+        ) : null,
+        domain.ticks.map((t, i) => {
+          const d = along(t);
+          return horizontal ? /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx("line", { x1: x0 + d, x2: x0 + d, y1: y0, y2: y1, style: { stroke: css("border") } }),
+            /* @__PURE__ */ jsx("text", { x: x0 + d, y: y1 + font * 1.2, textAnchor: "middle", style: { ...text, ...muted }, children: tickText[i] })
+          ] }, t) : /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx("line", { x1: x0, x2: x1, y1: y1 - d, y2: y1 - d, style: { stroke: css("border") } }),
+            /* @__PURE__ */ jsx("text", { x: x0 - pad, y: y1 - d + font * 0.35, textAnchor: "end", style: { ...text, ...muted }, children: tickText[i] })
+          ] }, t);
+        }),
+        items.map((item, i) => {
+          const centre = (horizontal ? y0 : x0) + bandPx * (i + 0.5);
+          const label = fitLabel(item.label, Math.floor((horizontal ? x0 - pad : bandPx) / charPx));
+          const v = item.value;
+          const end = v === null ? zero : along(v);
+          const lo = Math.min(zero, end);
+          const hi = Math.max(zero, end);
+          return /* @__PURE__ */ jsxs("g", { "data-bar": item.label, "data-value": v ?? void 0, children: [
+            /* @__PURE__ */ jsx("title", { children: `${item.label}: ${v === null ? "\u2014" : withUnit(v)}` }),
+            v === null ? null : horizontal ? /* @__PURE__ */ jsx("rect", { x: x0 + lo, y: centre - thick / 2, width: Math.max(1, hi - lo), height: thick, style: { fill: css("chart-1") } }) : /* @__PURE__ */ jsx("rect", { x: centre - thick / 2, y: y1 - hi, width: thick, height: Math.max(1, hi - lo), style: { fill: css("chart-1") } }),
+            labelled && v !== null ? horizontal ? /* @__PURE__ */ jsx("text", { x: x0 + hi + pad, y: centre + font * 0.35, style: { ...text, fill: css("foreground") }, children: withUnit(v) }) : /* @__PURE__ */ jsx("text", { x: centre, y: y1 - hi - pad, textAnchor: "middle", style: { ...text, fill: css("foreground") }, children: fmt(v) }) : null,
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: horizontal ? x0 - pad : centre,
+                y: horizontal ? centre + font * 0.35 : y1 + font * 1.2,
+                textAnchor: horizontal ? "end" : "middle",
+                style: { ...text, ...muted },
+                children: label
+              }
+            )
+          ] }, item.key ?? item.label);
+        })
+      ]
+    }
+  );
+}
+
+// src/widgets/fleet-table.tsx
+import { useEffect, useMemo as useMemo2, useState } from "react";
+import {
+  ageSeconds,
+  bandAt,
+  css as css2,
+  fontVar,
+  formatAge,
+  formatValue as formatValue2,
+  isStale,
+  levelColor,
+  optNumber as optNumber2,
+  optBoolean,
+  optString as optString2,
+  parseThresholds,
+  resolveStaleAfterSeconds,
+  spaceVar,
+  useSeverityColors,
+  useWidgetScale,
+  useWidgetSelect,
+  useWidgetTimeRange,
+  WidgetFrame as WidgetFrame2
+} from "@devicechain/widget-sdk";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var AGE_TICK_MS = 5e3;
+function isRecord(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function columnFormats(raw) {
+  const out = /* @__PURE__ */ new Map();
+  if (!Array.isArray(raw)) return out;
+  for (const item of raw) {
+    if (!isRecord(item) || typeof item.measurement !== "string" || item.measurement === "") continue;
+    const f = {};
+    if (typeof item.label === "string" && item.label !== "") f.label = item.label;
+    if (typeof item.unit === "string" && item.unit !== "") f.unit = item.unit;
+    if (typeof item.precision === "number" && Number.isInteger(item.precision) && item.precision >= 0 && item.precision <= 100) {
+      f.precision = item.precision;
+    }
+    out.set(item.measurement, f);
+  }
+  return out;
+}
+function columnBands(raw) {
+  const grouped = /* @__PURE__ */ new Map();
+  if (Array.isArray(raw)) {
+    for (const item of raw) {
+      if (!isRecord(item) || typeof item.measurement !== "string") continue;
+      const list = grouped.get(item.measurement) ?? [];
+      list.push(item);
+      grouped.set(item.measurement, list);
+    }
+  }
+  const out = /* @__PURE__ */ new Map();
+  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 headBox = {
+  ...cellBox,
+  fontSize: fontVar("xs"),
+  fontWeight: 600,
+  letterSpacing: "0.04em",
+  color: css2("muted-foreground"),
+  borderBottom: `1px solid ${css2("border")}`,
+  background: css2("card"),
+  position: "sticky",
+  top: 0,
+  zIndex: 1
+};
+var stickyFirst = { position: "sticky", left: 0, background: css2("card") };
+var plainButton = {
+  padding: 0,
+  border: "none",
+  background: "none",
+  font: "inherit",
+  color: "inherit",
+  cursor: "pointer",
+  textAlign: "left"
+};
+function FleetTable({ widget, data }) {
+  const strings = fleetStrings();
+  const fleet = data.members;
+  const title = optString2(widget.options, "title");
+  if (!fleet || fleet.status === "loading") {
+    return /* @__PURE__ */ jsx2(Frame, { title, children: /* @__PURE__ */ jsx2(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 });
+}
+var STACK_BELOW_PX = 480;
+function Responsive({ wide, narrow }) {
+  const { width } = useWidgetScale().size;
+  return width > 0 && width < STACK_BELOW_PX ? narrow : wide;
+}
+function Frame({ title, children }) {
+  return /* @__PURE__ */ jsx2(WidgetFrame2, { title, flush: true, children });
+}
+function Table({
+  widget,
+  fleet,
+  strings
+}) {
+  const colors = useSeverityColors();
+  const range = useWidgetTimeRange();
+  const select = useWidgetSelect();
+  const selectionTarget = optString2(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 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 pageSize = optNumber2(widget.options, "pageSize") ?? DEFAULT_PAGE_SIZE;
+  const authored = { by: optString2(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);
+  const [tick, setTick] = useState(() => Date.now());
+  useEffect(() => {
+    const id = setInterval(() => setTick(Date.now()), AGE_TICK_MS);
+    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 shownPage = clampPage(page, sorted.length, pageSize);
+  const rows = sorted.slice(shownPage * pageSize, (shownPage + 1) * pageSize);
+  const pages = pageCount(sorted.length, pageSize);
+  const sortOn = (by) => {
+    setPicked({ by, descending: sort.by === by ? !sort.descending : false });
+    setPage(0);
+  };
+  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: [
+        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: [
+          heading,
+          arrow(name)
+        ] }) }, name);
+      })
+    ] }) }),
+    /* @__PURE__ */ jsx2("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(
+          "button",
+          {
+            type: "button",
+            style: { ...plainButton, color: css2("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(
+          CellView,
+          {
+            cell: cellFor(member, name),
+            format: formats.get(name),
+            bands: bands.get(name),
+            colors,
+            staleAfter,
+            ageLag,
+            newest,
+            now,
+            strings
+          }
+        ) }, name))
+      ] }, 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 f = by === null ? void 0 : formats.get(by);
+      const heading = by === null ? strings.device : f?.label ?? by;
+      return /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": sort.by === by,
+          style: { ...plainButton, fontSize: fontVar("xs"), fontWeight: 600, color: css2("muted-foreground"), overflowWrap: "anywhere" },
+          onClick: () => sortOn(by),
+          title: strings.sortBy(heading),
+          children: [
+            heading,
+            arrow(by)
+          ]
+        },
+        by ?? ""
+      );
+    }) }),
+    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(
+          "button",
+          {
+            type: "button",
+            style: { ...plainButton, color: css2("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
+          }
+        ) : 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(
+              CellView,
+              {
+                cell: cellFor(member, name),
+                format: f,
+                bands: bands.get(name),
+                colors,
+                staleAfter,
+                ageLag,
+                newest,
+                now,
+                strings,
+                wrap: true
+              }
+            ) })
+          ] }, name);
+        })
+      ] }, 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(
+      "div",
+      {
+        role: "region",
+        "aria-label": optString2(widget.options, "title") ?? strings.device,
+        tabIndex: 0,
+        "data-fleet-scroll": "",
+        style: { flex: 1, minHeight: 0, overflow: "auto" },
+        children: /* @__PURE__ */ jsx2(Responsive, { wide, narrow })
+      }
+    ),
+    (fleet.truncated || pages > 1) && /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        "data-fleet-footer": "",
+        style: {
+          display: "flex",
+          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")}`
+        },
+        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" })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+function positiveSeconds(v) {
+  return v !== void 0 && Number.isFinite(v) && v > 0 ? v : void 0;
+}
+function newestShown(members, columns) {
+  let newest;
+  for (const m of members) {
+    for (const name of columns) {
+      const t = m.latest[name]?.occurredTime;
+      const at = t ? Date.parse(t) : Number.NaN;
+      if (!Number.isNaN(at) && (newest === void 0 || at > newest)) newest = at;
+    }
+  }
+  return newest;
+}
+var pagerButton = {
+  minWidth: "2em",
+  padding: `0 ${spaceVar(2)}`,
+  border: `1px solid ${css2("border")}`,
+  borderRadius: 4,
+  background: "none",
+  color: "inherit",
+  font: "inherit",
+  cursor: "pointer"
+};
+function CellView({
+  cell,
+  format,
+  bands,
+  colors,
+  staleAfter,
+  ageLag,
+  newest,
+  now,
+  strings,
+  wrap
+}) {
+  const muted = { color: css2("muted-foreground"), fontSize: fontVar("sm"), ...wrap ? { overflowWrap: "anywhere" } : {} };
+  switch (cell.kind) {
+    case "loading":
+      return /* @__PURE__ */ jsx2("span", { style: muted, title: strings.loading, "aria-label": strings.loading, children: "\u2026" });
+    case "failed":
+      return /* @__PURE__ */ jsx2("span", { style: muted, children: strings.failed });
+    case "not-reported":
+      return /* @__PURE__ */ jsx2("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 });
+    case "no-data":
+      return /* @__PURE__ */ jsx2("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 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: [
+          formatValue2(cell.value, format?.precision),
+          format?.unit ? ` ${format.unit}` : ""
+        ] }),
+        age !== void 0 && showAge && /* @__PURE__ */ jsxs2("span", { style: muted, "data-cell-age": "", children: [
+          formatAge(age),
+          stale ? ` \xB7 ${strings.stale}` : ""
+        ] })
+      ] });
+    }
+  }
+}
+
+// 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";
+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 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 }) });
+}
+function Pie({
+  items,
+  unit,
+  precision
+}) {
+  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(
+      "svg",
+      {
+        "data-pie": "",
+        viewBox: "0 0 100 100",
+        preserveAspectRatio: "xMidYMid meet",
+        role: "img",
+        "aria-label": items.map((i, n) => `${i.label}: ${i.value === null ? "\u2014" : fmt(i.value)} (${percent(slices[n].fraction)})`).join(", "),
+        style: { flex: "1 1 0", minHeight: 0, width: "100%", display: "block" },
+        children: slices.map((s) => {
+          const d = wedgePath(50, 50, 48, s.from, s.to);
+          const item = items[s.index];
+          return d ? /* @__PURE__ */ jsx3(
+            "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)})` })
+            },
+            item.label
+          ) : null;
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "ul",
+      {
+        "data-pie-legend": "",
+        style: {
+          flex: "0 1 auto",
+          maxHeight: "45%",
+          overflow: "hidden",
+          margin: 0,
+          padding: 0,
+          listStyle: "none",
+          display: "flex",
+          flexWrap: "wrap",
+          justifyContent: "center",
+          gap: `0 ${spaceVar2(3)}`,
+          fontSize: fontVar2("xs"),
+          color: css3("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(
+            "span",
+            {
+              "aria-hidden": "true",
+              style: {
+                display: "inline-block",
+                width: "0.7em",
+                height: "0.7em",
+                marginRight: "0.4em",
+                borderRadius: 2,
+                background: css3(RAMP[i % RAMP.length])
+              }
+            }
+          ),
+          item.label,
+          " ",
+          item.value === null ? "\u2014" : `${fmt(item.value)} \xB7 ${percent(slices[i].fraction)}`
+        ] }, item.label))
+      }
+    )
+  ] });
+}
+
+// src/widgets/stat-card.tsx
+import { useMemo as useMemo4 } from "react";
+import { spanLabel } from "@devicechain/dashboards";
+import {
+  bandAt as bandAt2,
+  css as css4,
+  FIT_MIN_FONT_PX,
+  fontVar as fontVar3,
+  formatValue as formatValue4,
+  levelColor as levelColor2,
+  optNumber as optNumber4,
+  optString as optString4,
+  optThresholds,
+  spaceVar as spaceVar3,
+  useSeverityColors as useSeverityColors2,
+  WidgetFrame as WidgetFrame4,
+  WidgetFreshnessProvider
+} from "@devicechain/widget-sdk";
+
+// src/aggregate-reading.ts
+import { pickSample, primaryMeasurementName } 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);
+  if (widget.datasource?.kind === "unbound") return { kind: "empty", reason: "unbound", name: pinned };
+  if (stat === "last") {
+    const sample = pickSample(data.latest, pinned);
+    const name2 = pinned ?? sample?.name;
+    if (sample?.value == null) return { kind: "empty", reason: "noData", name: name2 };
+    if (aggregates.status === "ready" && sample.occurredTime && Date.parse(sample.occurredTime) < Date.parse(aggregates.startTime)) {
+      return { kind: "empty", reason: "noReadings", name: name2, spanSeconds: aggregates.spanSeconds };
+    }
+    return { kind: "value", stat, name: name2, value: sample.value, spanSeconds: void 0, time: sample.occurredTime };
+  }
+  if (aggregates.status === "loading") return { kind: "empty", reason: "loading", name: pinned };
+  if (aggregates.status === "unavailable") {
+    return { kind: "empty", reason: aggregates.reason, name: pinned, message: aggregates.message };
+  }
+  const name = pinned ?? Object.keys(aggregates.byName)[0];
+  const a = name === void 0 ? void 0 : aggregates.byName[name];
+  if (!a) {
+    if (stat === "count" && pinned !== void 0 && widget.datasource) {
+      return { kind: "value", stat, name: pinned, value: 0, spanSeconds: aggregates.spanSeconds };
+    }
+    return { kind: "empty", reason: "noReadings", name, spanSeconds: aggregates.spanSeconds };
+  }
+  return { kind: "value", stat, name, value: a[stat], spanSeconds: aggregates.spanSeconds };
+}
+
+// src/widgets/stat-card.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var CAPTION_ROOM_PX = 22;
+var BESIDE_FIGURE_SHARE = 0.6;
+var AGE_ONLY = { at: void 0, staleAfterSeconds: void 0 };
+function StatCard({ widget, data }) {
+  const severity = useSeverityColors2();
+  const strings = aggregateStrings();
+  const stat = parseStat(optString4(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 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 }) => {
+    if (reading.kind === "empty") {
+      return /* @__PURE__ */ jsx4(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(
+      "div",
+      {
+        "data-stat": reading.stat,
+        "data-stat-span": reading.spanSeconds,
+        "data-stat-layout": beside ? "beside" : "under",
+        "data-threshold-level": band?.level,
+        title: band?.label,
+        style: {
+          display: "flex",
+          flexDirection: beside ? "row" : "column",
+          alignItems: beside ? "center" : void 0,
+          justifyContent: "safe center",
+          gap: beside ? spaceVar3(2) : void 0,
+          height: "100%",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsx4(
+            "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(
+                LevelReadout,
+                {
+                  text: formatValue4(reading.value, isCount ? 0 : precision),
+                  unit: isCount ? void 0 : unit,
+                  color: levelColor2(severity, band?.level),
+                  size: figure,
+                  scale
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "div",
+            {
+              "data-stat-caption": "",
+              style: {
+                flex: beside ? "0 1 auto" : "0 0 auto",
+                minWidth: 0,
+                marginTop: beside ? void 0 : spaceVar3(1),
+                textAlign: "center",
+                fontSize: fontVar3("sm"),
+                color: css4("muted-foreground"),
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+              },
+              children: caption(reading, strings.stats)
+            }
+          )
+        ]
+      }
+    );
+  } });
+  return stat === "last" ? /* @__PURE__ */ jsx4(WidgetFreshnessProvider, { freshness: AGE_ONLY, children: card }) : card;
+}
+function caption(r, stats) {
+  const name = stats[r.stat];
+  return r.spanSeconds === void 0 ? name : `${name} \xB7 ${spanLabel(r.spanSeconds)}`;
+}
+function emptyMessage(r, strings) {
+  switch (r.reason) {
+    case "loading":
+      return strings.loading;
+    case "unsupported":
+      return strings.unsupported;
+    case "failed":
+      return strings.failed(r.message);
+    case "noReadings":
+      return strings.noReadings(r.spanSeconds === void 0 ? "" : spanLabel(r.spanSeconds));
+    case "noData":
+      return strings.noData;
+    case "unbound":
+      return strings.unbound;
+  }
+}
+export {
+  BarChart,
+  FleetTable,
+  PieChart,
+  StatCard
+};
+//# sourceMappingURL=aggregate-widgets-WVXAW3UL.js.map