"use client";
import { jsx as d, jsxs as L } from "react/jsx-runtime";
import { forwardRef as K, useRef as $, useEffect as v, useMemo as j } from "react";
import { c as F } from "./cn-ct4n7r74mh8y0f48.js";
var C = /* @__PURE__ */ ((e) => (e.Attention = "#FC574A", e.Warning = "#F8A054", e.Neutral = "#82B6FF", e.NeutralLight = "#B9D6FF", e.Disabled = "#B6B6B6", e.DisabledLight = "#D9D9D9", e))(C || {}), H = /* @__PURE__ */ ((e) => (e.Attention = "#FC574AE6", e.Warning = "#F8A054E6", e.Neutral = "#82B6FFE6", e.NeutralLight = "#B9D6FFE6", e.Disabled = "#B6B6B6E6", e.DisabledLight = "#D9D9D9E6", e))(H || {});
const S = [
  "#086FFF",
  "#CF7EE9",
  "#73CEE6",
  "#5B5FEF",
  "#82B6FF",
  "#F5609F",
  "#C2BDF3",
  "#8D1EB1",
  "#EBCAF6",
  "#7366E4"
  /* Indigo2 */
], G = [
  "#086FFFE6",
  "#CF7EE9E6",
  "#73CEE6E6",
  "#5B5FEFE6",
  "#82B6FFE6",
  "#F5609FE6",
  "#C2BDF3E6",
  "#8D1EB1E6",
  "#EBCAF6E6",
  "#7366E4E6"
  /* Indigo2 */
];
var k;
((e) => {
  function n(r, t = !1) {
    return t ? H[r] : C[r];
  }
  e.semantic = n;
  function a(r, t = !1) {
    return t ? G[r % G.length] : S[r % S.length];
  }
  e.color = a;
})(k || (k = {}));
const _ = K(function({
  echarts: n,
  options: a,
  className: r,
  isDarkMode: t,
  height: h = 350,
  onEvents: f
}, l) {
  const p = $(null), c = $(null), E = $({}), b = $({}), y = $(/* @__PURE__ */ new Set());
  return v(() => {
    if (!p.current) return;
    const o = n.init(
      p.current,
      t ? "dark" : {
        color: t ? G : S
      }
    );
    return c.current = o, typeof l == "function" ? l(o) : l && (l.current = o), () => {
      for (const u of y.current) {
        const s = b.current[u];
        s && o.off(u, s);
      }
      y.current.clear(), typeof l == "function" ? l(null) : l && (l.current = null), c.current = null, o.dispose();
    };
  }, [p, t]), v(() => {
    const o = c.current;
    o && o.setOption(a, { notMerge: !0, lazyUpdate: !0 });
  }, [t, a]), v(() => {
    E.current = f ?? {};
  }, [f]), v(() => {
    const o = c.current;
    if (!o) return;
    const u = /* @__PURE__ */ new Set();
    for (const [s, m] of Object.entries(f ?? {}))
      typeof m == "function" && (u.add(s), b.current[s] || (b.current[s] = (I) => {
        E.current[s]?.(I);
      }), y.current.has(s) || o.on(s, b.current[s]));
    for (const s of y.current) {
      if (u.has(s)) continue;
      const m = b.current[s];
      m && o.off(s, m);
    }
    y.current = u;
  }, [n, t, f]), v(() => {
    const o = c.current, u = p.current;
    if (!o || !u) return;
    let s = !0;
    const m = new ResizeObserver(() => {
      if (s) {
        s = !1;
        return;
      }
      o.resize();
    });
    return m.observe(u), () => m.disconnect();
  }, []), /* @__PURE__ */ d("div", { ref: p, className: F("w-full", r), style: { height: h } });
});
_.displayName = "Chart";
function ee({
  echarts: e,
  type: n = "line",
  data: a,
  xAxisName: r,
  xAxisTickCount: t,
  yAxisTickLabelFormat: h,
  yAxisName: f,
  yAxisTickCount: l,
  onTimeRangeChange: p,
  height: c = 350,
  incomplete: E,
  isDarkMode: b,
  gradient: y,
  loading: o
}) {
  const u = $(null), s = E?.before, m = E?.after, I = j(() => {
    const g = [], D = n === "bar" ? { type: "bar", stack: "total" } : { type: "line", showSymbol: !1 };
    for (const i of a) {
      const x = s && n === "line" ? i.data.filter((R) => R[0] <= s) : [], w = m && n === "line" ? i.data.filter((R) => R[0] >= m) : [], M = x.length > 0 || w.length > 0 ? i.data.slice(
        Math.max(0, x.length - 1),
        Math.max(0, i.data.length - w.length + 1)
      ) : i.data, N = y && n === "line" ? {
        color: new e.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: z(i.color, 0.4) },
          { offset: 1, color: z(i.color, 0) }
        ])
      } : void 0;
      g.push({
        data: M,
        color: i.color,
        name: i.name,
        ...N ? { areaStyle: N } : {},
        ...D
      });
      const A = {
        color: i.color,
        name: i.name,
        type: "line",
        lineStyle: { type: "dashed" },
        showSymbol: !1
      };
      x.length > 0 && g.push({
        ...A,
        data: x
      }), w.length > 0 && g.push({
        ...A,
        data: w
      });
    }
    return {
      aria: {
        enabled: !0
      },
      brush: {
        snapToData: !0,
        xAxisIndex: "all",
        brushType: "lineX",
        brushMode: "single",
        outOfBrush: {
          colorAlpha: 0.3
        },
        brushStyle: {
          borderWidth: 1,
          color: "rgba(120,140,180,0.3)",
          borderColor: "rgba(120,140,180,0.8)"
        }
      },
      tooltip: {
        trigger: "axis",
        axisPointer: { type: "shadow" },
        formatter: (i) => {
          const x = Array.isArray(i) ? i : [i], w = /* @__PURE__ */ new Set(), M = x.filter((B) => w.has(B.seriesName) ? !1 : (w.add(B.seriesName), !0)), N = M[0], A = N?.value?.[0] ?? N?.axisValue, R = A != null ? `<div style="font-weight:600;margin-bottom:4px;">${V(A)}</div>` : "", X = M.map((B) => {
            const W = B?.value?.[1];
            return `${B.marker} ${B.seriesName}: <strong>${h ? h(W) : W}</strong>`;
          }).join("<br/>");
          return `${R}${X}`;
        }
      },
      backgroundColor: "transparent",
      toolbox: { show: !1 },
      xAxis: {
        name: r,
        nameLocation: "middle",
        nameGap: 30,
        type: "time",
        splitLine: {
          show: !1
        },
        axisLine: { show: !1 },
        splitNumber: t ?? 5
      },
      yAxis: {
        name: f,
        nameLocation: "middle",
        nameGap: 40,
        type: "value",
        axisTick: { show: !0 },
        axisLabel: {
          margin: 15
        },
        splitLine: {
          show: !0,
          lineStyle: { type: "dashed", width: 1 }
        },
        splitNumber: l
      },
      grid: {
        left: f ? 30 : 24,
        right: 24,
        top: 24,
        bottom: r ? 30 : 24
      },
      series: g
    };
  }, [
    a,
    r,
    t,
    h,
    f,
    l,
    s,
    m,
    n,
    y,
    e
  ]), P = j(() => p ? {
    brushend: (g) => {
      const D = g.areas[0].coordRange;
      p(D[0], D[1]), u.current?.dispatchAction({ type: "brush", areas: [] });
    }
  } : {}, [p]), T = !!p;
  return v(() => {
    const g = u.current;
    if (g && T)
      return g.dispatchAction({
        type: "takeGlobalCursor",
        key: "brush",
        brushOption: {
          brushType: "lineX",
          brushMode: "single"
        }
      }), () => {
        g.dispatchAction({
          type: "takeGlobalCursor",
          key: "brush",
          brushOption: {
            brushType: !1
          }
        });
      };
  }, [u, T]), /* @__PURE__ */ L("div", { className: "relative w-full", style: { height: c }, children: [
    o && /* @__PURE__ */ d(U, { height: c, isDarkMode: b }),
    !o && /* @__PURE__ */ d(
      _,
      {
        echarts: e,
        ref: u,
        options: I,
        height: c,
        isDarkMode: b,
        onEvents: P
      }
    )
  ] });
}
function U({
  height: e,
  isDarkMode: n
}) {
  const a = e / 2, r = Math.min(e * 0.12, 28), t = 400, h = 120, f = [];
  for (let c = 0; c <= h; c++) {
    const E = -t + c / h * t * 3, b = a + Math.sin(c / h * 2 * Math.PI * 3) * r;
    f.push(`${c === 0 ? "M" : "L"}${E.toFixed(2)},${b.toFixed(2)}`);
  }
  const l = f.join(" "), p = n ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.2)";
  return /* @__PURE__ */ d(
    "div",
    {
      "aria-hidden": "true",
      className: "absolute inset-0 overflow-hidden",
      style: { height: e },
      children: /* @__PURE__ */ d(
        "svg",
        {
          width: "100%",
          height: e,
          viewBox: `0 0 ${t} ${e}`,
          preserveAspectRatio: "none",
          className: "w-full animate-pulse",
          children: /* @__PURE__ */ d(
            "path",
            {
              d: l,
              fill: "none",
              stroke: p,
              strokeWidth: "2",
              style: {
                animation: "kumo-chart-wave 2.4s linear infinite",
                transformOrigin: "0 0"
              }
            }
          )
        }
      )
    }
  );
}
function z(e, n) {
  const a = Math.max(0, Math.min(1, n)), r = e.match(
    /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i
  );
  if (r)
    return `rgba(${r[1]}, ${r[2]}, ${r[3]}, ${a})`;
  let t = e.replace(/^#/, "");
  t.length === 3 && (t = t[0] + t[0] + t[1] + t[1] + t[2] + t[2]), t.length === 8 && (t = t.slice(0, 6));
  const h = parseInt(t.slice(0, 2), 16), f = parseInt(t.slice(2, 4), 16), l = parseInt(t.slice(4, 6), 16);
  return `rgba(${h}, ${f}, ${l}, ${a})`;
}
function O(e) {
  return e.toString().padStart(2, "0");
}
function V(e) {
  const n = new Date(e);
  return `${n.getFullYear()}-${O(n.getMonth() + 1)}-${O(n.getDate())} ${O(n.getHours())}:${O(n.getMinutes())}:${O(n.getSeconds())}`;
}
function Y({ color: e, value: n, name: a, unit: r, inactive: t }) {
  return /* @__PURE__ */ L("div", { className: "inline-flex flex-col gap-2 min-w-42 py-2", children: [
    /* @__PURE__ */ L("div", { className: "flex items-center gap-2", children: [
      /* @__PURE__ */ d(
        "span",
        {
          className: F("size-2 rounded-full inline-block", {
            "opacity-50": t
          }),
          style: { backgroundColor: e }
        }
      ),
      /* @__PURE__ */ d("span", { className: F("text-xs", { "opacity-50": t }), children: a })
    ] }),
    /* @__PURE__ */ L("div", { className: "flex items-baseline gap-0.5", children: [
      /* @__PURE__ */ d(
        "span",
        {
          className: F("text-lg font-medium leading-none", {
            "opacity-50": t
          }),
          children: n
        }
      ),
      r && /* @__PURE__ */ d(
        "span",
        {
          className: F("text-xs text-kumo-subtle leading-none", {
            "opacity-50": t
          }),
          children: r
        }
      )
    ] })
  ] });
}
function q({ color: e, value: n, name: a, inactive: r }) {
  return /* @__PURE__ */ L("div", { className: "inline-flex items-center gap-2", children: [
    /* @__PURE__ */ d(
      "span",
      {
        className: F("size-2 rounded-full inline-block", {
          "opacity-50": r
        }),
        style: { backgroundColor: e }
      }
    ),
    /* @__PURE__ */ d("span", { className: F("text-xs", { "opacity-50": r }), children: a }),
    /* @__PURE__ */ d("span", { className: F("text-xs font-medium", { "opacity-50": r }), children: n })
  ] });
}
const te = {
  SmallItem: q,
  LargeItem: Y
};
export {
  _ as C,
  ee as T,
  te as a,
  k as b
};
//# sourceMappingURL=Legend-glsgxdtqiwf3jebj.js.map
