@omniviewdev/ui 0.1.0

package/dist/charts.js

@@ -0,0 +1,967 @@
+import { useEffect as ht, useMemo as h, useState as nt, useCallback as it, useRef as bt } from "react";
+import { useTheme as Ct } from "@mui/material/styles";
+import { jsx as n, Fragment as pt, jsxs as P } from "react/jsx-runtime";
+import { createPortal as St } from "react-dom";
+import M from "@mui/material/Box";
+import kt from "@mui/material/Popper";
+import { LineChart as gt } from "@mui/x-charts/LineChart";
+import { ChartsReferenceLine as lt } from "@mui/x-charts/ChartsReferenceLine";
+import { useXScale as Mt, useDrawingArea as xt, useYScale as $t } from "@mui/x-charts/hooks";
+import { LuChartBar as At, LuRefreshCw as zt, LuEllipsisVertical as wt } from "react-icons/lu";
+import { S as st } from "./Skeleton-BUYyXUiC.js";
+import { a as Dt, E as Lt } from "./ErrorState-CexYrMpy.js";
+import { BarChart as Tt } from "@mui/x-charts/BarChart";
+import { PieChart as Ft } from "@mui/x-charts/PieChart";
+import { ScatterChart as Pt } from "@mui/x-charts/ScatterChart";
+import { SparkLineChart as Et } from "@mui/x-charts/SparkLineChart";
+import ct from "@mui/material/Typography";
+import { Gauge as Bt } from "@mui/x-charts/Gauge";
+import mt from "@mui/material/IconButton";
+import Nt from "@mui/material/MenuItem";
+import Ht from "@mui/material/Menu";
+import { S as Wt } from "./Select-DTUF31OP.js";
+const vt = {
+  primary: "--ov-accent",
+  secondary: "--ov-fg-muted",
+  success: "--ov-success-default",
+  warning: "--ov-warning-default",
+  error: "--ov-danger-default",
+  info: "--ov-info-default",
+  neutral: "--ov-fg-default",
+  accent: "--ov-accent",
+  danger: "--ov-danger-default",
+  muted: "--ov-fg-muted"
+}, It = new Set(Object.keys(vt)), ut = /* @__PURE__ */ new Map();
+function D(t) {
+  const e = ut.get(t);
+  if (e !== void 0) return e;
+  let o;
+  if (It.has(t)) {
+    const r = vt[t];
+    typeof document < "u" ? o = getComputedStyle(document.documentElement).getPropertyValue(r).trim() || `var(${r})` : o = `var(${r})`;
+  } else
+    o = t;
+  return ut.set(t, o), o;
+}
+function Gt() {
+  ut.clear();
+}
+const Vt = [
+  "primary",
+  "success",
+  "warning",
+  "info",
+  "error",
+  "secondary",
+  "accent",
+  "neutral"
+];
+function X(t) {
+  return (t && t.length > 0 ? t : Vt).map(D);
+}
+const w = new Intl.NumberFormat(void 0, { maximumFractionDigits: 1 }), Ot = new Intl.DateTimeFormat(void 0, { hour: "2-digit", minute: "2-digit" });
+function jt(t, e) {
+  const o = Math.abs(t);
+  return o < 1024 ? `${t} ${e ?? "B"}` : o < 1024 ** 2 ? `${w.format(t / 1024)} ${e ?? "KiB"}` : o < 1024 ** 3 ? `${w.format(t / 1024 ** 2)} ${e ?? "MiB"}` : o < 1024 ** 4 ? `${w.format(t / 1024 ** 3)} ${e ?? "GiB"}` : `${w.format(t / 1024 ** 4)} ${e ?? "TiB"}`;
+}
+function Yt(t, e) {
+  return `${w.format(t)}${e ?? "%"}`;
+}
+function Kt(t, e) {
+  const o = Math.abs(t);
+  return e ? `${w.format(t)} ${e}` : o < 1e3 ? `${w.format(t)} ms` : o < 6e4 ? `${w.format(t / 1e3)} s` : o < 36e5 ? `${w.format(t / 6e4)} m` : `${w.format(t / 36e5)} h`;
+}
+const K = ["", "k", "M", "G", "T", "P"];
+function Rt(t, e) {
+  const o = Math.abs(t);
+  let r = 0, a = o;
+  for (; a >= 1e3 && r < K.length - 1; )
+    a /= 1e3, r++;
+  return `${t < 0 ? "-" : ""}${w.format(a)} ${K[r]}${e ?? "/s"}`;
+}
+function Xt(t, e) {
+  const o = Math.abs(t);
+  let r = 0, a = o;
+  for (; a >= 1e3 && r < K.length - 1; )
+    a /= 1e3, r++;
+  const i = t < 0 ? "-" : "", l = e ? ` ${e}` : K[r] ? ` ${K[r]}` : "";
+  return `${i}${w.format(a)}${l}`;
+}
+function qt(t, e) {
+  const o = new Intl.NumberFormat(void 0).format(t);
+  return e ? `${o} ${e}` : o;
+}
+function Ne(t) {
+  return Ot.format(t);
+}
+function R(t, e) {
+  const o = (() => {
+    switch (t) {
+      case "bytes":
+        return (r) => jt(r, e);
+      case "percent":
+        return (r) => Yt(r, e);
+      case "duration":
+        return (r) => Kt(r, e);
+      case "rate":
+        return (r) => Rt(r, e);
+      case "si":
+        return (r) => Xt(r, e);
+      case "number":
+        return (r) => qt(r, e);
+    }
+  })();
+  return (r) => r == null ? "–" : o(r);
+}
+const dt = /* @__PURE__ */ new Map();
+function Y(t, e) {
+  if (typeof document > "u") return e;
+  const o = dt.get(t);
+  if (o !== void 0) return o;
+  const a = getComputedStyle(document.documentElement).getPropertyValue(t).trim() || e;
+  return dt.set(t, a), a;
+}
+function Z() {
+  const t = Ct(), e = t.palette.mode === "dark";
+  return ht(() => {
+    dt.clear(), Gt();
+  }, [e]), h(() => ({
+    axisLineColor: Y("--ov-border-default", e ? "#3a3a3a" : "#d4d4d4"),
+    gridColor: Y("--ov-border-subtle", e ? "#2a2a2a" : "#e8e8e8"),
+    tooltipBg: Y("--ov-bg-surface", e ? "#1e1e1e" : "#ffffff"),
+    tooltipFg: Y("--ov-fg-default", e ? "#e0e0e0" : "#1a1a1a"),
+    fontFamily: Y("--ov-font-sans", t.typography.fontFamily ?? "sans-serif"),
+    fontSize: 11,
+    areaOpacity: 0.15
+  }), [e, t.typography.fontFamily]);
+}
+function q({
+  loading: t,
+  error: e,
+  onRetry: o,
+  empty: r,
+  width: a,
+  height: i,
+  children: l
+}) {
+  return t ? /* @__PURE__ */ n(M, { sx: { width: a ?? "100%", height: i }, children: /* @__PURE__ */ n(st, { variant: "rectangular", width: "100%", height: i }) }) : e ? /* @__PURE__ */ n(M, { sx: { width: a ?? "100%", height: i, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ n(Dt, { message: e, onRetry: o, variant: "panel" }) }) : r ? /* @__PURE__ */ n(M, { sx: { width: a ?? "100%", height: i, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ n(
+    Lt,
+    {
+      icon: /* @__PURE__ */ n(At, { size: 32 }),
+      title: "No data",
+      description: "There is no data to display.",
+      size: "sm"
+    }
+  ) }) : /* @__PURE__ */ n(pt, { children: l });
+}
+const Jt = { xs: 120, sm: 180, md: 260, lg: 360, xl: 480 };
+function Qt({ markers: t }) {
+  const e = Mt(), { top: o } = xt(), [r, a] = nt(null), i = it((s, m) => {
+    const v = m.currentTarget.getBoundingClientRect();
+    a({
+      index: s,
+      anchor: { getBoundingClientRect: () => v }
+    });
+  }, []), l = it(() => a(null), []), u = r != null ? t[r.index] : null;
+  return /* @__PURE__ */ P("g", { children: [
+    t.map((s, m) => {
+      const v = s.timestamp instanceof Date ? s.timestamp : new Date(s.timestamp), p = e(v);
+      if (p == null || isNaN(p)) return null;
+      const y = D(s.color ?? "muted"), f = !!s.tooltip;
+      return /* @__PURE__ */ P(
+        "g",
+        {
+          style: f ? { cursor: "pointer" } : void 0,
+          onPointerEnter: f ? (d) => i(m, d) : void 0,
+          onPointerLeave: f ? l : void 0,
+          children: [
+            f && /* @__PURE__ */ n(
+              "rect",
+              {
+                x: p - 16,
+                y: o - (s.label ? 20 : 12),
+                width: 32,
+                height: s.label ? 20 : 12,
+                fill: "transparent"
+              }
+            ),
+            /* @__PURE__ */ n("text", { x: p, y: o - 1, textAnchor: "middle", fill: y, fontSize: 8, children: "▼" }),
+            s.label && /* @__PURE__ */ n("text", { x: p, y: o - 9, textAnchor: "middle", fill: y, fontSize: 9, fontWeight: 500, children: s.label })
+          ]
+        },
+        `evt-${m}`
+      );
+    }),
+    r && u?.tooltip && St(
+      /* @__PURE__ */ n(
+        kt,
+        {
+          open: !0,
+          anchorEl: r.anchor,
+          placement: "top",
+          modifiers: [{ name: "offset", options: { offset: [0, 6] } }],
+          sx: { zIndex: 1500, pointerEvents: "none" },
+          children: /* @__PURE__ */ n(
+            M,
+            {
+              sx: {
+                bgcolor: "var(--ov-bg-elevated, #1e1e2e)",
+                color: "var(--ov-fg-default, #cdd6f4)",
+                border: "1px solid var(--ov-border-subtle, #45475a)",
+                borderRadius: "6px",
+                px: 1.25,
+                py: 0.75,
+                fontSize: "0.75rem",
+                lineHeight: 1.4,
+                maxWidth: 260,
+                boxShadow: "0 4px 12px rgba(0,0,0,0.4)"
+              },
+              children: u.tooltip
+            }
+          )
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function Ut({ formatter: t, color: e, position: o = "right" }) {
+  const r = $t(), { left: a, top: i, width: l, height: u } = xt(), s = r.ticks?.() ?? [], m = o === "right", v = m ? a + l - 4 : a + 4, p = m ? "end" : "start";
+  return /* @__PURE__ */ n("g", { children: s.map((y) => {
+    const f = r(y);
+    if (f == null || isNaN(f) || f < i - 2 || f > i + u + 2) return null;
+    const d = t(y);
+    return /* @__PURE__ */ n(
+      "text",
+      {
+        x: v,
+        y: f - 4,
+        textAnchor: p,
+        fill: e,
+        fontSize: 10,
+        opacity: 0.7,
+        children: d
+      },
+      y
+    );
+  }) });
+}
+function yt({
+  series: t,
+  timeRange: e,
+  yAxisLabel: o,
+  valueFormat: r = "number",
+  unit: a,
+  valueFormatter: i,
+  annotations: l,
+  area: u = !1,
+  grid: s = !0,
+  showLegend: m = !1,
+  showMarks: v = !1,
+  colors: p,
+  yAxisPosition: y = "left",
+  xAxisPosition: f = "bottom",
+  compact: d = !1,
+  margin: g,
+  yAxisWidth: x,
+  xAxisHeight: A,
+  yAxisInline: $ = !1,
+  yAxisInlinePosition: L = "right",
+  eventMarkers: b,
+  size: E = "md",
+  height: S,
+  loading: C,
+  error: N,
+  onRetry: W,
+  skipAnimation: _ = !1,
+  sx: tt
+}) {
+  const T = Z(), J = S ?? Jt[E], I = h(() => X(p), [p]), B = h(
+    () => i ?? R(r, a),
+    [i, r, a]
+  ), G = t.length === 0 || t.every((c) => c.data.length === 0), { xData: et, alignedValues: V } = h(() => {
+    if (t.length === 0 || t.every((z) => z.data.length === 0))
+      return { xData: [], alignedValues: t.map(() => []) };
+    const c = /* @__PURE__ */ new Set();
+    for (const z of t)
+      for (const H of z.data)
+        c.add(H.timestamp);
+    const F = Array.from(c).sort((z, H) => z - H), k = F.map((z) => new Date(z)), at = t.map((z) => {
+      const H = /* @__PURE__ */ new Map();
+      for (const U of z.data)
+        H.set(U.timestamp, U.value);
+      return F.map((U) => H.get(U) ?? null);
+    });
+    return { xData: k, alignedValues: at };
+  }, [t]), O = h(
+    () => t.map((c, F) => ({
+      id: c.id,
+      label: c.label,
+      data: V[F] ?? [],
+      color: c.color ? D(c.color) : I[F % I.length],
+      area: c.area ?? u,
+      showMark: v,
+      valueFormatter: B,
+      ...c.lineStyle === "dashed" ? { strokeDasharray: "6 3" } : {},
+      ...c.lineStyle === "dotted" ? { strokeDasharray: "2 2" } : {}
+    })),
+    [t, V, u, v, B, I]
+  ), Q = d ? { top: 4, right: 2, bottom: 2, left: 2 } : { top: 8, right: 8, bottom: 8, left: 8 }, rt = b?.length ? b.some((c) => c.label) ? 20 : 10 : 0, ot = {
+    ...Q,
+    ...g,
+    top: (g?.top ?? Q.top) + rt
+  }, j = $ ? 0 : x ?? (d ? 30 : 40);
+  return /* @__PURE__ */ n(M, { sx: tt, children: /* @__PURE__ */ n(q, { loading: C, error: N, onRetry: W, empty: G, height: J, children: /* @__PURE__ */ P(
+    gt,
+    {
+      height: J,
+      series: O,
+      xAxis: [
+        {
+          data: et,
+          scaleType: "time",
+          height: A ?? (d ? 20 : 24),
+          position: f,
+          ...e && { min: e.from, max: e.to }
+        }
+      ],
+      yAxis: [
+        {
+          label: o,
+          valueFormatter: B,
+          position: y,
+          width: j
+        }
+      ],
+      grid: s ? { horizontal: !0 } : void 0,
+      skipAnimation: _,
+      hideLegend: !m,
+      margin: ot,
+      sx: {
+        "& .MuiChartsAxis-line": d ? { display: "none" } : { stroke: T.axisLineColor },
+        "& .MuiChartsAxis-tick": d ? { display: "none" } : { stroke: T.axisLineColor },
+        "& .MuiChartsAxis-tickLabel": {
+          fill: T.tooltipFg,
+          fontSize: T.fontSize
+        },
+        // Hide the entire default y-axis when rendering labels inline
+        ...$ && { "& .MuiChartsAxis-left, & .MuiChartsAxis-right": { display: "none" } },
+        "& .MuiChartsGrid-line": { stroke: T.gridColor, opacity: 0.5 },
+        "& .MuiAreaElement-root": { opacity: T.areaOpacity }
+      },
+      children: [
+        l?.map((c, F) => /* @__PURE__ */ n(
+          lt,
+          {
+            y: c.value,
+            label: c.label,
+            lineStyle: {
+              stroke: c.color ? D(c.color) : "var(--ov-fg-muted)",
+              strokeDasharray: c.lineStyle === "dashed" ? "6 3" : void 0
+            },
+            labelStyle: { fill: T.tooltipFg, fontSize: T.fontSize }
+          },
+          `ann-${F}`
+        )),
+        b?.map((c, F) => /* @__PURE__ */ n(
+          lt,
+          {
+            x: c.timestamp instanceof Date ? c.timestamp : new Date(c.timestamp),
+            lineStyle: {
+              stroke: D(c.color ?? "muted"),
+              strokeDasharray: c.lineStyle === "solid" ? void 0 : "4 3",
+              strokeWidth: 1
+            }
+          },
+          `evt-line-${F}`
+        )),
+        b?.length && /* @__PURE__ */ n(Qt, { markers: b }),
+        $ && /* @__PURE__ */ n(Ut, { formatter: B, color: T.tooltipFg, position: L })
+      ]
+    }
+  ) }) });
+}
+yt.displayName = "TimeSeriesChart";
+const Zt = { xs: 120, sm: 180, md: 260, lg: 360, xl: 480 };
+function _t({
+  data: t,
+  horizontal: e = !1,
+  valueFormat: o = "number",
+  unit: r,
+  valueFormatter: a,
+  showLabels: i = !1,
+  colors: l,
+  size: u = "md",
+  height: s,
+  loading: m,
+  error: v,
+  onRetry: p,
+  skipAnimation: y = !1,
+  sx: f
+}) {
+  const d = Z(), g = s ?? Zt[u], x = h(() => X(l), [l]), A = h(
+    () => a ?? R(o, r),
+    [a, o, r]
+  ), $ = t.length === 0, L = h(
+    () => t.map((S, C) => S.color ? D(S.color) : x[C % x.length]),
+    [t, x]
+  ), b = h(() => t.map((S) => S.label), [t]), E = h(() => t.map((S) => S.value), [t]);
+  return /* @__PURE__ */ n(M, { sx: f, children: /* @__PURE__ */ n(q, { loading: m, error: v, onRetry: p, empty: $, height: g, children: /* @__PURE__ */ n(
+    Tt,
+    {
+      height: g,
+      layout: e ? "horizontal" : "vertical",
+      series: [
+        {
+          data: E,
+          valueFormatter: A,
+          label: i ? "Value" : void 0
+        }
+      ],
+      xAxis: e ? [{ valueFormatter: A }] : [{ data: b, scaleType: "band" }],
+      yAxis: e ? [{ data: b, scaleType: "band" }] : [{ valueFormatter: A }],
+      colors: L,
+      skipAnimation: y,
+      hideLegend: !0,
+      sx: {
+        "& .MuiChartsAxis-line": { stroke: d.axisLineColor },
+        "& .MuiChartsAxis-tick": { stroke: d.axisLineColor },
+        "& .MuiChartsAxis-tickLabel": {
+          fill: d.tooltipFg,
+          fontSize: d.fontSize
+        }
+      }
+    }
+  ) }) });
+}
+_t.displayName = "BarChart";
+const te = { xs: 120, sm: 180, md: 260, lg: 360, xl: 480 };
+function ee({
+  data: t,
+  innerRadius: e,
+  showLabels: o = !1,
+  colors: r,
+  size: a = "md",
+  height: i,
+  loading: l,
+  error: u,
+  onRetry: s,
+  skipAnimation: m = !1,
+  sx: v
+}) {
+  const p = i ?? te[a], y = h(() => X(r), [r]), f = t.length === 0, d = h(
+    () => t.map((g, x) => ({
+      id: g.id,
+      value: g.value,
+      label: g.label,
+      color: g.color ? D(g.color) : y[x % y.length]
+    })),
+    [t, y]
+  );
+  return /* @__PURE__ */ n(M, { sx: v, children: /* @__PURE__ */ n(q, { loading: l, error: u, onRetry: s, empty: f, height: p, children: /* @__PURE__ */ n(
+    Ft,
+    {
+      height: p,
+      series: [
+        {
+          data: d,
+          innerRadius: e ?? 0,
+          arcLabel: o ? (g) => g.label ?? "" : void 0
+        }
+      ],
+      skipAnimation: m
+    }
+  ) }) });
+}
+ee.displayName = "PieChart";
+const re = { xs: 120, sm: 180, md: 260, lg: 360, xl: 480 };
+function oe({
+  series: t,
+  xAxisLabel: e,
+  yAxisLabel: o,
+  xFormat: r = "number",
+  yFormat: a = "number",
+  colors: i,
+  size: l = "md",
+  height: u,
+  loading: s,
+  error: m,
+  onRetry: v,
+  skipAnimation: p = !1,
+  sx: y
+}) {
+  const f = Z(), d = u ?? re[l], g = h(() => X(i), [i]), x = t.length === 0 || t.every((b) => b.data.length === 0), A = h(() => R(r), [r]), $ = h(() => R(a), [a]), L = h(
+    () => t.map((b, E) => ({
+      id: b.id,
+      label: b.label,
+      data: b.data.map((S, C) => ({ x: S.x, y: S.y, id: S.id ?? C })),
+      color: b.color ? D(b.color) : g[E % g.length]
+    })),
+    [t, g]
+  );
+  return /* @__PURE__ */ n(M, { sx: y, children: /* @__PURE__ */ n(q, { loading: s, error: m, onRetry: v, empty: x, height: d, children: /* @__PURE__ */ n(
+    Pt,
+    {
+      height: d,
+      series: L,
+      xAxis: [{ label: e, valueFormatter: A }],
+      yAxis: [{ label: o, valueFormatter: $ }],
+      skipAnimation: p,
+      sx: {
+        "& .MuiChartsAxis-line": { stroke: f.axisLineColor },
+        "& .MuiChartsAxis-tick": { stroke: f.axisLineColor },
+        "& .MuiChartsAxis-tickLabel": {
+          fill: f.tooltipFg,
+          fontSize: f.fontSize
+        }
+      }
+    }
+  ) }) });
+}
+oe.displayName = "ScatterChart";
+const ae = { top: 2, bottom: 2, left: 2, right: 2 };
+function ne({
+  data: t,
+  plotType: e = "line",
+  area: o = !1,
+  color: r = "primary",
+  height: a = 40,
+  width: i = "100%",
+  showTooltip: l = !1,
+  skipAnimation: u = !1
+}) {
+  const s = D(r);
+  return /* @__PURE__ */ n(
+    Et,
+    {
+      data: t,
+      plotType: e,
+      area: o,
+      height: a,
+      width: typeof i == "number" ? i : void 0,
+      color: s,
+      curve: "natural",
+      margin: ae,
+      showTooltip: l,
+      skipAnimation: u,
+      sx: typeof i == "string" ? { width: i } : void 0
+    }
+  );
+}
+ne.displayName = "Sparkline";
+const ie = { xs: 80, sm: 100, md: 140, lg: 180, xl: 220 };
+function le(t, e, o, r) {
+  const a = (t - e) / (o - e) * 100;
+  return a < r[0] ? "success" : a < r[1] ? "warning" : "danger";
+}
+function se({
+  value: t,
+  min: e = 0,
+  max: o = 100,
+  label: r,
+  unit: a,
+  color: i,
+  thresholds: l = [60, 85],
+  size: u = "md",
+  loading: s = !1
+}) {
+  const m = ie[u], v = h(
+    () => D(i ?? le(t, e, o, l)),
+    [i, t, e, o, l]
+  );
+  return s ? /* @__PURE__ */ P(
+    M,
+    {
+      sx: {
+        p: 2,
+        border: "1px solid var(--ov-border-default)",
+        borderRadius: "8px",
+        bgcolor: "var(--ov-bg-surface)",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 1
+      },
+      children: [
+        /* @__PURE__ */ n(st, { variant: "circular", width: m, height: m }),
+        /* @__PURE__ */ n(st, { variant: "text", width: "60%" })
+      ]
+    }
+  ) : /* @__PURE__ */ P(
+    M,
+    {
+      sx: {
+        p: 2,
+        border: "1px solid var(--ov-border-default)",
+        borderRadius: "8px",
+        bgcolor: "var(--ov-bg-surface)",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 0.5
+      },
+      children: [
+        /* @__PURE__ */ n(
+          Bt,
+          {
+            value: t,
+            valueMin: e,
+            valueMax: o,
+            startAngle: -110,
+            endAngle: 110,
+            width: m,
+            height: m,
+            sx: {
+              "& .MuiGauge-valueArc": { fill: v },
+              "& .MuiGauge-referenceArc": { fill: "var(--ov-bg-surface-inset)" }
+            },
+            text: a ? `${t}${a}` : `${t}`
+          }
+        ),
+        /* @__PURE__ */ n(
+          ct,
+          {
+            variant: "caption",
+            sx: {
+              fontSize: "0.6875rem",
+              fontWeight: 600,
+              color: "var(--ov-fg-muted)",
+              textTransform: "uppercase",
+              letterSpacing: "0.04em",
+              textAlign: "center"
+            },
+            children: r
+          }
+        )
+      ]
+    }
+  );
+}
+se.displayName = "GaugeCard";
+const ce = [
+  { label: "15m", duration: 900 * 1e3 },
+  { label: "1h", duration: 3600 * 1e3 },
+  { label: "6h", duration: 360 * 60 * 1e3 },
+  { label: "24h", duration: 1440 * 60 * 1e3 },
+  { label: "7d", duration: 10080 * 60 * 1e3 }
+];
+function ue(t, e) {
+  const o = t.to.getTime() - t.from.getTime();
+  let r = e[0], a = Math.abs(o - r.duration);
+  for (const i of e) {
+    const l = Math.abs(o - i.duration);
+    l < a && (r = i, a = l);
+  }
+  return String(r.duration);
+}
+function de({
+  title: t,
+  icon: e,
+  subtitle: o,
+  series: r,
+  timeRange: a,
+  onTimeRangeChange: i,
+  refreshInterval: l = 0,
+  onRefresh: u,
+  valueFormat: s = "number",
+  unit: m,
+  valueFormatter: v,
+  annotations: p,
+  eventMarkers: y,
+  area: f = !1,
+  presets: d = ce,
+  colors: g,
+  headerActions: x,
+  toolbar: A,
+  menuItems: $,
+  yAxisPosition: L = "none",
+  xAxisPosition: b = "none",
+  margin: E,
+  yAxisWidth: S,
+  xAxisHeight: C,
+  yAxisInline: N = !0,
+  yAxisInlinePosition: W,
+  variant: _ = "default",
+  height: tt = 260,
+  loading: T,
+  error: J,
+  onRetry: I
+}) {
+  const B = bt(null), [G, et] = nt(l > 0), [V, O] = nt(null), Q = _ === "compact", rt = h(
+    () => ue(a, d),
+    [a, d]
+  ), ot = h(
+    () => d.map((k) => ({ value: String(k.duration), label: k.label })),
+    [d]
+  ), j = it(() => {
+    B.current && (clearInterval(B.current), B.current = null);
+  }, []);
+  ht(() => (j(), G && l > 0 && u && (B.current = setInterval(u, l)), j), [G, l, u, j]);
+  const ft = (k) => {
+    if (!i) return;
+    const at = Number(Array.isArray(k) ? k[0] : k), z = /* @__PURE__ */ new Date();
+    i({ from: new Date(z.getTime() - at), to: z });
+  }, c = i || A || x || u, F = $ && $.length > 0;
+  return /* @__PURE__ */ P(
+    M,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        ...Q ? { bgcolor: "transparent" } : {
+          bgcolor: "var(--ov-bg-surface)",
+          border: "1px solid var(--ov-border-default)",
+          borderRadius: "8px"
+        }
+      },
+      children: [
+        /* @__PURE__ */ P(
+          M,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.75,
+              px: 1,
+              py: 0.5,
+              minHeight: 32
+            },
+            children: [
+              e && /* @__PURE__ */ n(M, { sx: { display: "flex", alignItems: "center", color: "var(--ov-fg-muted)", flexShrink: 0 }, children: e }),
+              /* @__PURE__ */ P(M, { sx: { minWidth: 0, flex: 1 }, children: [
+                /* @__PURE__ */ n(
+                  ct,
+                  {
+                    variant: "subtitle2",
+                    noWrap: !0,
+                    sx: {
+                      fontWeight: 600,
+                      color: "var(--ov-fg-default)",
+                      fontSize: "0.75rem",
+                      lineHeight: 1.2
+                    },
+                    children: t
+                  }
+                ),
+                o && /* @__PURE__ */ n(
+                  ct,
+                  {
+                    variant: "caption",
+                    noWrap: !0,
+                    sx: {
+                      color: "var(--ov-fg-muted)",
+                      fontSize: "0.625rem",
+                      lineHeight: 1.2,
+                      display: "block"
+                    },
+                    children: o
+                  }
+                )
+              ] }),
+              c && /* @__PURE__ */ P(M, { sx: { display: "flex", alignItems: "center", gap: 0.25, flexShrink: 0 }, children: [
+                i && /* @__PURE__ */ n(
+                  Wt,
+                  {
+                    options: ot,
+                    value: rt,
+                    onChange: ft,
+                    size: "xs"
+                  }
+                ),
+                A,
+                x,
+                u && /* @__PURE__ */ n(
+                  mt,
+                  {
+                    size: "small",
+                    onClick: () => {
+                      l > 0 ? et((k) => !k) : u();
+                    },
+                    sx: {
+                      color: G ? "var(--ov-accent)" : "var(--ov-fg-muted)",
+                      p: 0.25
+                    },
+                    children: /* @__PURE__ */ n(zt, { size: 12 })
+                  }
+                )
+              ] }),
+              F && /* @__PURE__ */ P(pt, { children: [
+                /* @__PURE__ */ n(
+                  mt,
+                  {
+                    size: "small",
+                    onClick: (k) => O(k.currentTarget),
+                    sx: { color: "var(--ov-fg-muted)", p: 0.25, flexShrink: 0 },
+                    children: /* @__PURE__ */ n(wt, { size: 13 })
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  Ht,
+                  {
+                    anchorEl: V,
+                    open: !!V,
+                    onClose: () => O(null),
+                    anchorOrigin: { vertical: "bottom", horizontal: "right" },
+                    transformOrigin: { vertical: "top", horizontal: "right" },
+                    slotProps: {
+                      paper: {
+                        sx: {
+                          bgcolor: "var(--ov-bg-surface)",
+                          border: "1px solid var(--ov-border-subtle)",
+                          minWidth: 140
+                        }
+                      }
+                    },
+                    children: $.map((k) => /* @__PURE__ */ n(
+                      Nt,
+                      {
+                        onClick: () => {
+                          O(null), k.onClick();
+                        },
+                        sx: { fontSize: "0.8125rem" },
+                        children: k.label
+                      },
+                      k.label
+                    ))
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ n(
+          yt,
+          {
+            series: r,
+            timeRange: a,
+            valueFormat: s,
+            unit: m,
+            valueFormatter: v,
+            annotations: p,
+            eventMarkers: y,
+            area: f,
+            colors: g,
+            height: tt,
+            loading: T,
+            error: J,
+            onRetry: I,
+            skipAnimation: !0,
+            yAxisPosition: L,
+            xAxisPosition: b,
+            margin: E,
+            yAxisWidth: S,
+            xAxisHeight: C,
+            yAxisInline: N,
+            yAxisInlinePosition: W,
+            compact: !0,
+            grid: !0
+          }
+        )
+      ]
+    }
+  );
+}
+de.displayName = "MetricsPanel";
+const fe = { xs: 120, sm: 180, md: 260, lg: 360, xl: 480 };
+function me({
+  series: t,
+  capacity: e,
+  timeRange: o,
+  valueFormat: r = "number",
+  unit: a,
+  valueFormatter: i,
+  stacked: l = !0,
+  colors: u,
+  yAxisPosition: s = "left",
+  size: m = "md",
+  height: v,
+  loading: p,
+  error: y,
+  onRetry: f,
+  skipAnimation: d = !1,
+  sx: g
+}) {
+  const x = Z(), A = v ?? fe[m], $ = h(() => X(u), [u]), L = h(
+    () => i ?? R(r, a),
+    [i, r, a]
+  ), b = t.length === 0 || t.every((C) => C.data.length === 0), E = h(() => {
+    for (const C of t)
+      if (C.data.length > 0) return C.data.map((N) => new Date(N.timestamp));
+    return [];
+  }, [t]), S = h(
+    () => t.map((C, N) => ({
+      id: C.id,
+      label: C.label,
+      data: C.data.map((W) => W.value),
+      color: C.color ? D(C.color) : $[N % $.length],
+      area: !0,
+      showMark: !1,
+      stack: l ? "total" : void 0,
+      valueFormatter: L
+    })),
+    [t, l, L, $]
+  );
+  return /* @__PURE__ */ n(M, { sx: g, children: /* @__PURE__ */ n(q, { loading: p, error: y, onRetry: f, empty: b, height: A, children: /* @__PURE__ */ n(
+    gt,
+    {
+      height: A,
+      series: S,
+      xAxis: [
+        {
+          data: E,
+          scaleType: "time",
+          ...o && { min: o.from, max: o.to }
+        }
+      ],
+      yAxis: [{ valueFormatter: L, position: s }],
+      grid: { horizontal: !0 },
+      skipAnimation: d,
+      hideLegend: !0,
+      sx: {
+        "& .MuiChartsAxis-line": { stroke: x.axisLineColor },
+        "& .MuiChartsAxis-tick": { stroke: x.axisLineColor },
+        "& .MuiChartsAxis-tickLabel": {
+          fill: x.tooltipFg,
+          fontSize: x.fontSize
+        },
+        "& .MuiChartsGrid-line": { stroke: x.gridColor },
+        "& .MuiAreaElement-root": { opacity: x.areaOpacity }
+      },
+      children: e != null && /* @__PURE__ */ n(
+        lt,
+        {
+          y: e,
+          label: "Capacity",
+          lineStyle: {
+            stroke: D("danger"),
+            strokeDasharray: "6 3"
+          },
+          labelStyle: { fill: x.tooltipFg, fontSize: x.fontSize }
+        }
+      )
+    }
+  ) }) });
+}
+me.displayName = "StackedAreaChart";
+export {
+  _t as BarChart,
+  se as GaugeCard,
+  de as MetricsPanel,
+  ee as PieChart,
+  oe as ScatterChart,
+  ne as Sparkline,
+  me as StackedAreaChart,
+  yt as TimeSeriesChart,
+  X as chartPalette,
+  jt as formatBytes,
+  Kt as formatDuration,
+  qt as formatNumber,
+  Yt as formatPercent,
+  Rt as formatRate,
+  Xt as formatSI,
+  Ne as formatTimeAxisTick,
+  R as getValueFormatter,
+  D as resolveChartColor,
+  Z as useChartTheme
+};