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-DNOrahZX.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-Dg7Xdulg.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
};
