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