"use client";
import { jsx as f, jsxs as S } from "react/jsx-runtime";
import { forwardRef as Z, useRef as A, useEffect as B, useMemo as z } from "react";
import { c as v } from "./cn-ct4n7r74mh8y0f48.js";
var X = /* @__PURE__ */ ((e) => (e.Attention = "#FC574A", e.Warning = "#F8A054", e.Success = "#00A63E", e.Neutral = "#B9D6FF", e.Disabled = "#CBCBCB", e.Skeleton = "#DDDDDD", e))(X || {}), K = /* @__PURE__ */ ((e) => (e.Attention = "#FC574A", e.Warning = "#F8A054", e.Success = "#00A63E", e.Neutral = "#8EC5FF", e.Disabled = "#878787", e.Skeleton = "#5C5C5C", e))(K || {});
const ee = {
  blues: ["#E1EAF4", "#8EBCF6", "#4290F0", "#0E58B4", "#03254F"]
}, te = {
  blues: ["#03254F", "#0E58B4", "#4290F0", "#A6BFDD", "#E1EAF4"]
}, C = [
  "#4290F0",
  "#F5B647",
  "#E8649D",
  "#8D58EE",
  "#50C3B6",
  "#D37536"
  /* Orange */
], G = [
  "#4290F0",
  "#EEB720",
  "#E8649D",
  "#8D58EE",
  "#50C3B6",
  "#D37536"
  /* Orange */
];
var P;
((e) => {
  function n(t, s = !1) {
    return s ? K[t] : X[t];
  }
  e.semantic = n;
  function a(t, s = !1) {
    return s ? G[t % G.length] : C[t % C.length];
  }
  e.categorical = a;
  function r(t, s = !1) {
    return s ? [...te[t]] : [...ee[t]];
  }
  e.sequential = r;
})(P || (P = {}));
const q = (e) => {
  const { dangerousHtmlFormatter: n, ...a } = e;
  return {
    ...a,
    formatter: n
  };
}, ne = (e) => e.tooltip ? {
  ...e,
  tooltip: Array.isArray(e.tooltip) ? e.tooltip.map(q) : q(e.tooltip)
} : e, V = Z(function({
  echarts: n,
  options: a,
  optionUpdateBehavior: r,
  className: t,
  isDarkMode: s,
  height: h = 350,
  onEvents: p
}, i) {
  const u = A(null), b = A(null), y = A({}), w = A({}), x = A(/* @__PURE__ */ new Set());
  return B(() => {
    if (!u.current) return;
    const c = n.init(
      u.current,
      s ? "dark" : {
        color: s ? G : C
      }
    );
    return b.current = c, typeof i == "function" ? i(c) : i && (i.current = c), () => {
      for (const d of x.current) {
        const o = w.current[d];
        o && c.off(d, o);
      }
      x.current.clear(), typeof i == "function" ? i(null) : i && (i.current = null), b.current = null, c.dispose();
    };
  }, [u, s]), B(() => {
    const c = b.current;
    c && c.setOption(ne(a), {
      notMerge: !1,
      lazyUpdate: !0,
      ...r
    });
  }, [s, r, a]), B(() => {
    y.current = p ?? {};
  }, [p]), B(() => {
    const c = b.current;
    if (!c) return;
    const d = /* @__PURE__ */ new Set();
    for (const [o, m] of Object.entries(p ?? {}))
      typeof m == "function" && (d.add(o), w.current[o] || (w.current[o] = (N) => {
        y.current[o]?.(N);
      }), x.current.has(o) || c.on(o, w.current[o]));
    for (const o of x.current) {
      if (d.has(o)) continue;
      const m = w.current[o];
      m && c.off(o, m);
    }
    x.current = d;
  }, [n, s, p]), B(() => {
    const c = b.current, d = u.current;
    if (!c || !d) return;
    let o = !0;
    const m = new ResizeObserver(() => {
      if (o) {
        o = !1;
        return;
      }
      c.resize();
    });
    return m.observe(d), () => m.disconnect();
  }, []), /* @__PURE__ */ f(
    "div",
    {
      ref: u,
      className: v("w-full", t),
      style: { height: h },
      tabIndex: a.aria?.enabled ? 0 : void 0,
      role: a.aria?.enabled ? "img" : void 0
    }
  );
});
V.displayName = "Chart";
function ue({
  echarts: e,
  type: n = "line",
  data: a,
  xAxisName: r,
  xAxisTickCount: t,
  xAxisTickFormat: s,
  yAxisTickFormat: h,
  yAxisTickLabelFormat: p,
  yAxisName: i,
  yAxisTickCount: u,
  tooltipValueFormat: b,
  onTimeRangeChange: y,
  height: w = 350,
  incomplete: x,
  isDarkMode: c,
  gradient: d,
  loading: o,
  ariaDescription: m
}) {
  const N = A(null), H = x?.before, T = x?.after, Y = z(() => {
    const g = [], I = n === "bar" ? { type: "bar", stack: "total" } : { type: "line", showSymbol: !1 };
    for (const l of a) {
      const F = H && n === "line" ? l.data.filter((O) => O[0] <= H) : [], $ = T && n === "line" ? l.data.filter((O) => O[0] >= T) : [], D = F.length > 0 || $.length > 0 ? l.data.slice(
        Math.max(0, F.length - 1),
        Math.max(0, l.data.length - $.length + 1)
      ) : l.data, L = d && n === "line" ? {
        color: new e.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: _(l.color, 0.4) },
          { offset: 1, color: _(l.color, 0) }
        ])
      } : void 0;
      g.push({
        data: D,
        color: l.color,
        name: l.name,
        emphasis: { focus: "series" },
        ...L ? { areaStyle: L } : {},
        ...I
      });
      const M = {
        color: l.color,
        name: l.name,
        type: "line",
        lineStyle: { type: "dashed" },
        showSymbol: !1,
        emphasis: { focus: "series" }
      };
      F.length > 0 && g.push({
        ...M,
        data: F
      }), $.length > 0 && g.push({
        ...M,
        data: $
      });
    }
    return {
      aria: {
        enabled: !0,
        ...m && { label: { description: m } }
      },
      brush: {
        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",
        appendTo: "body",
        axisPointer: { type: "shadow" },
        dangerousHtmlFormatter: (l) => {
          const F = Array.isArray(l) ? l : [l], $ = /* @__PURE__ */ new Set(), D = F.filter((E) => $.has(E.seriesName) ? !1 : ($.add(E.seriesName), !0)), L = D[0], M = L?.value?.[0] ?? L?.axisValue, O = M != null ? `<div style="font-weight:600;margin-bottom:4px;">${e.format.encodeHTML(se(M))}</div>` : "", Q = D.map((E) => {
            const j = E?.value?.[1], k = b ?? p, U = k ? e.format.encodeHTML(String(k(j))) : e.format.encodeHTML(String(j));
            return `${E.marker} ${e.format.encodeHTML(E.seriesName)}: <strong>${U}</strong>`;
          }).join("<br/>");
          return `${O}${Q}`;
        }
      },
      backgroundColor: "transparent",
      toolbox: { show: !1 },
      xAxis: {
        name: r,
        nameLocation: "middle",
        nameGap: 30,
        type: "time",
        splitLine: {
          show: !1
        },
        axisLine: { show: !1 },
        splitNumber: t ?? 5,
        ...s && {
          axisLabel: {
            formatter: (l) => s(l)
          }
        }
      },
      yAxis: {
        name: i,
        nameLocation: "middle",
        nameGap: 40,
        type: "value",
        axisTick: { show: !0 },
        axisLabel: {
          margin: 15,
          ...h && {
            formatter: (l) => h(l)
          }
        },
        splitLine: {
          show: !0,
          lineStyle: { type: "dashed", width: 1 }
        },
        splitNumber: u
      },
      grid: {
        left: i ? 30 : 24,
        right: 24,
        top: 24,
        bottom: r ? 30 : 24
      },
      series: g
    };
  }, [
    a,
    r,
    t,
    s,
    h,
    p,
    i,
    u,
    b,
    H,
    T,
    n,
    d,
    e,
    m
  ]), J = z(() => y ? {
    brushend: (g) => {
      const I = g.areas[0].coordRange;
      y(I[0], I[1]), N.current?.dispatchAction({ type: "brush", areas: [] });
    }
  } : {}, [y]), W = !!y;
  return B(() => {
    const g = N.current;
    if (g && W)
      return g.dispatchAction({
        type: "takeGlobalCursor",
        key: "brush",
        brushOption: {
          brushType: "lineX",
          brushMode: "single"
        }
      }), () => {
        g.dispatchAction({
          type: "takeGlobalCursor",
          key: "brush",
          brushOption: {
            brushType: !1
          }
        });
      };
  }, [N, W, o]), /* @__PURE__ */ S("div", { className: "relative w-full", style: { height: w }, children: [
    o && /* @__PURE__ */ f(re, { height: w, isDarkMode: c }),
    !o && /* @__PURE__ */ f(
      V,
      {
        echarts: e,
        ref: N,
        options: Y,
        height: w,
        isDarkMode: c,
        onEvents: J
      }
    )
  ] });
}
function re({
  height: e,
  isDarkMode: n
}) {
  const a = e / 2, r = Math.min(e * 0.12, 28), t = 400, s = 120, h = [];
  for (let u = 0; u <= s; u++) {
    const b = -t + u / s * t * 3, y = a + Math.sin(u / s * 2 * Math.PI * 3) * r;
    h.push(`${u === 0 ? "M" : "L"}${b.toFixed(2)},${y.toFixed(2)}`);
  }
  const p = h.join(" "), i = n ? "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 _(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 s = parseInt(t.slice(0, 2), 16), h = parseInt(t.slice(2, 4), 16), p = parseInt(t.slice(4, 6), 16);
  return `rgba(${s}, ${h}, ${p}, ${a})`;
}
function R(e) {
  return e.toString().padStart(2, "0");
}
function se(e) {
  const n = new Date(e);
  return `${n.getFullYear()}-${R(n.getMonth() + 1)}-${R(n.getDate())} ${R(n.getHours())}:${R(n.getMinutes())}:${R(n.getSeconds())}`;
}
function oe({ color: e, value: n, name: a, unit: r, inactive: t }) {
  return /* @__PURE__ */ S("div", { className: "inline-flex flex-col gap-2 min-w-42 py-2", children: [
    /* @__PURE__ */ S("div", { className: "flex items-center gap-2", children: [
      /* @__PURE__ */ f(
        "span",
        {
          className: v("size-2 rounded-full inline-block", {
            "opacity-50": t
          }),
          style: { backgroundColor: e }
        }
      ),
      /* @__PURE__ */ f("span", { className: v("text-xs", { "opacity-50": t }), children: a })
    ] }),
    /* @__PURE__ */ S("div", { className: "flex items-baseline gap-0.5", children: [
      /* @__PURE__ */ f(
        "span",
        {
          className: v("text-lg font-medium leading-none", {
            "opacity-50": t
          }),
          children: n
        }
      ),
      r && /* @__PURE__ */ f(
        "span",
        {
          className: v("text-xs text-kumo-subtle leading-none", {
            "opacity-50": t
          }),
          children: r
        }
      )
    ] })
  ] });
}
function ae({ color: e, value: n, name: a, inactive: r }) {
  return /* @__PURE__ */ S("div", { className: "inline-flex items-center gap-2", children: [
    /* @__PURE__ */ f(
      "span",
      {
        className: v("size-2 rounded-full inline-block", {
          "opacity-50": r
        }),
        style: { backgroundColor: e }
      }
    ),
    /* @__PURE__ */ f("span", { className: v("text-xs", { "opacity-50": r }), children: a }),
    /* @__PURE__ */ f("span", { className: v("text-xs font-medium", { "opacity-50": r }), children: n })
  ] });
}
const fe = {
  SmallItem: ae,
  LargeItem: oe
};
export {
  V as C,
  ue as T,
  fe as a,
  P as b
};
//# sourceMappingURL=Legend-ibjxhfm9pn2vrb6f.js.map
