import { o as D } from "./rolldown-runtime.js";
import { i as P, n as V, t as H } from "./vendor/react.js";
import { D as W, E as $, O as q, m as K, w as Z } from "./vendor/recharts.js";
import { t as F } from "./dist.js";
import { t as g } from "./utils.js";
import { a as G, n as J, o as U, t as X } from "./use-reduced-motion2.js";
import { a as B, i as m, r as I, t as _ } from "./LineChart.js";
var l = /* @__PURE__ */ D(P(), 1), o = H(), Q = F("relative max-w-full", {
  variants: { size: {
    sm: "size-[280px]",
    default: "size-[392px]",
    lg: "size-[480px]",
    xl: "size-[560px]"
  } },
  defaultVariants: { size: "default" }
});
function C({ data: t, series: e, legendPosition: r = "none", showTooltip: d = !0, showGrid: h = !0, showAxisLabels: y = !0, showRadiusTicks: j = !0, domain: N, fillOpacity: k = 0.3, strokeWidth: T = 2, size: z, className: A, "aria-label": E, ...w }) {
  const u = X(), { highlightedSeries: L, setHighlightedSeries: O, getOpacity: R, dimTransition: S } = B(u), M = l.useMemo(() => t.map((i) => {
    const s = { label: i.label };
    for (const n of e) {
      const p = m(n.id);
      s[p] = i.values[n.id] ?? 0;
    }
    return s;
  }), [t, e]), c = l.useMemo(() => e.map((i, s) => i.color || _[s % _.length]), [e]), f = l.useMemo(() => {
    const i = {};
    for (const [s, n] of e.entries()) {
      const p = m(n.id);
      i[p] = {
        label: n.label,
        color: c[s]
      };
    }
    return i;
  }, [e, c]), v = N || [0, Math.max(...t.flatMap((i) => Object.values(i.values)))];
  return /* @__PURE__ */ (0, o.jsxs)("div", {
    className: g("flex", r === "right" ? "flex-row gap-4" : "flex-col gap-4", r === "bottom" && "items-center"),
    role: "img",
    "aria-label": E || "Radar chart",
    ...w,
    children: [/* @__PURE__ */ (0, o.jsx)("div", {
      className: g(Q({ size: z }), A),
      children: /* @__PURE__ */ (0, o.jsx)(J, {
        config: f,
        className: "w-full h-full",
        children: /* @__PURE__ */ (0, o.jsxs)(K, {
          data: M,
          margin: {
            top: 24,
            right: 32,
            bottom: 24,
            left: 32
          },
          children: [
            h && /* @__PURE__ */ (0, o.jsx)(q, {
              className: "stroke-border",
              radialLines: !0,
              gridType: "polygon"
            }),
            y && /* @__PURE__ */ (0, o.jsx)($, {
              dataKey: "label",
              tick: {
                fill: "var(--muted-foreground)",
                fontSize: 14,
                fontWeight: 500
              },
              tickLine: !1
            }),
            j && /* @__PURE__ */ (0, o.jsx)(W, {
              angle: 90,
              domain: v,
              tick: {
                fill: "var(--secondary-foreground)",
                fontSize: 12
              },
              tickCount: 6,
              axisLine: !1,
              tickFormatter: (i) => i.toLocaleString()
            }),
            d && /* @__PURE__ */ (0, o.jsx)(G, { content: /* @__PURE__ */ (0, o.jsx)(U, { formatter: (i, s) => {
              const n = f[s];
              return /* @__PURE__ */ (0, o.jsxs)("div", {
                className: "flex items-center gap-2",
                children: [
                  /* @__PURE__ */ (0, o.jsx)("div", {
                    className: "size-2 rounded-full",
                    style: { backgroundColor: n?.color }
                  }),
                  /* @__PURE__ */ (0, o.jsx)("span", { children: n?.label || s }),
                  /* @__PURE__ */ (0, o.jsx)("span", {
                    className: "font-medium",
                    children: Number(i).toLocaleString()
                  })
                ]
              });
            } }) }),
            e.map((i, s) => {
              const n = m(i.id);
              return /* @__PURE__ */ (0, o.jsx)(Z, {
                name: n,
                dataKey: n,
                stroke: c[s],
                fill: c[s],
                fillOpacity: k,
                strokeWidth: T,
                opacity: R(i.id),
                style: S,
                isAnimationActive: !u,
                animationDuration: 300,
                animationEasing: "ease-in-out"
              }, n);
            })
          ]
        })
      })
    }), r !== "none" && /* @__PURE__ */ (0, o.jsx)(I, {
      series: e,
      position: r === "bottom" ? "top" : "right",
      onSeriesHover: O,
      highlightedSeries: L
    })]
  });
}
C.displayName = "RadarChart";
var Y = V(), a = {
  variant: "string",
  size: "string",
  data: "json",
  series: "json",
  legendPosition: "string",
  showTooltip: "boolean",
  showGrid: "boolean",
  showAxisLabels: "boolean",
  showRadiusTicks: "boolean",
  domain: "string",
  fillOpacity: "number",
  strokeWidth: "number",
  "aria-label": "string"
};
function b(t, e) {
  if (t !== null)
    switch (e) {
      case "number":
        return Number(t);
      case "boolean":
        return t !== "false" && t !== "0";
      case "json":
        try {
          return JSON.parse(t);
        } catch {
          return t;
        }
      default:
        return t;
    }
}
var x = class extends HTMLElement {
  _root = null;
  _childrenContainer = null;
  _props = {};
  _initialized = !1;
  connectedCallback() {
    setTimeout(() => this._initialize(), 0);
  }
  _initialize() {
    if (this._initialized) return;
    this._initialized = !0;
    const t = [];
    for (const r of Array.from(this.childNodes))
      r.nodeType === Node.TEXT_NODE && !r.textContent?.trim() || t.push(r);
    const e = document.createElement("div");
    for (e.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", t.forEach((r) => this._childrenContainer.appendChild(r)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(e), this._root = (0, Y.createRoot)(e), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(t, e, r) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(a).map((t) => t.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(t, e) {
    const r = a[t] || "string";
    this._props[t] = this._parseValue(e, r), this._render();
  }
  _parseValue(t, e) {
    if (e === "boolean" && typeof t == "boolean" || e === "number" && typeof t == "number" || e === "string" && typeof t == "string") return t;
    if (typeof t == "string") switch (e) {
      case "boolean":
        return t !== "false" && t !== "0" && t !== "";
      case "number":
        return Number(t);
      case "json":
        try {
          return JSON.parse(t);
        } catch {
          return t;
        }
      default:
        return t;
    }
    return t;
  }
  _getProp(t) {
    if (t in this._props) return this._props[t];
    const e = t.replace(/([A-Z])/g, "-$1").toLowerCase(), r = a[t] || "string";
    return b(this.getAttribute(e), r);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const t = {};
    for (const [r, d] of Object.entries(a)) if (r in this._props) t[r] = this._props[r];
    else {
      const h = r.replace(/([A-Z])/g, "-$1").toLowerCase();
      t[r] = b(this.getAttribute(h), d);
    }
    const e = l.createElement(C, {
      ...t,
      _hostElement: this
    }, l.createElement("span", {
      ref: (r) => {
        r && this._childrenContainer && r.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(e);
  }
};
for (const t of Object.keys(a)) Object.defineProperty(x.prototype, t, {
  get() {
    return this._getProp(t);
  },
  set(e) {
    this._setProp(t, e);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-radar-chart") && customElements.define("hf-radar-chart", x);
export {
  x as RadarChartWC,
  x as default
};

//# sourceMappingURL=hf-radar-chart.js.map