import { o as G } from "./rolldown-runtime.js";
import { i as J, n as U, t as X } from "./vendor/react.js";
import { T as Q, h as Y, k as B } from "./vendor/recharts.js";
import { t as tt } from "./dist.js";
import { t as u } from "./utils.js";
import { a as et, n as rt, t as nt } from "./use-reduced-motion2.js";
import { a as it, i as O, r as st } from "./LineChart.js";
var f = /* @__PURE__ */ G(J(), 1), i = X(), v = [
  "var(--chart-1)",
  "var(--chart-2)",
  "var(--chart-3)"
], M = tt("relative flex items-center justify-center max-w-full", {
  variants: { size: {
    xs: "size-40",
    sm: "size-[200px]",
    md: "size-60",
    lg: "size-[280px]"
  } },
  defaultVariants: { size: "md" }
}), ot = {
  xs: {
    dimension: 160,
    baseThickness: 16,
    innerRadius: 50
  },
  sm: {
    dimension: 200,
    baseThickness: 20,
    innerRadius: 60
  },
  md: {
    dimension: 240,
    baseThickness: 24,
    innerRadius: 75
  },
  lg: {
    dimension: 280,
    baseThickness: 28,
    innerRadius: 90
  }
};
function $({ data: t, series: e, centerValue: r, centerLabel: m, legendPosition: h = "none", ringGap: y = 4, ringThickness: z, startAngle: C = 90, showTooltip: L = !0, size: a, className: j, "aria-label": w, ...N }) {
  const T = nt(), { highlightedSeries: H, setHighlightedSeries: P, getOpacity: V, dimTransition: Z } = it(T), q = (n) => V(e?.[n]?.id || `ring_${n + 1}`), d = f.useMemo(() => t && Array.isArray(t) ? t : [], [t]), g = f.useMemo(() => d.map((n, s) => n.color || v[s % v.length]), [d]), F = ot[a || "md"], R = f.useMemo(() => {
    const n = {};
    return d.forEach((s, o) => {
      const c = O(e?.[o]?.id || `ring_${o + 1}`);
      n[c] = {
        label: e?.[o]?.label || `Ring ${o + 1}`,
        color: g[o]
      }, n[`${c}_remaining`] = {
        label: "Remaining",
        color: "var(--muted)"
      };
    }), n;
  }, [
    d,
    e,
    g
  ]);
  if (d.length === 0) return /* @__PURE__ */ (0, i.jsx)("div", {
    className: u("flex items-center justify-center text-muted-foreground text-sm", M({ size: a }), j),
    ...N,
    children: "No data available"
  });
  const k = F.dimension / 2 - 4, A = d.length, I = r !== void 0 || m ? 30 : 10, K = Math.max(0, A - 1) * y, _ = z || Math.max(4, Math.floor((k - I - K) / A)), E = (n) => k - n * (_ + y), W = (n) => E(n) - _;
  return /* @__PURE__ */ (0, i.jsxs)("div", {
    className: u("flex", h === "right" ? "flex-row gap-4" : "flex-col gap-4", h === "bottom" && "items-center"),
    role: "img",
    "aria-label": w || "Donut chart",
    ...N,
    children: [/* @__PURE__ */ (0, i.jsx)("div", {
      className: u(M({ size: a }), j),
      children: /* @__PURE__ */ (0, i.jsx)(rt, {
        config: R,
        className: "w-full h-full",
        children: /* @__PURE__ */ (0, i.jsxs)(Y, { children: [d.map((n, s) => {
          const o = n.maxValue || 100, c = Math.min(n.value / o * 100, 100), x = 100 - c, b = O(e?.[s]?.id || `ring_${s + 1}`);
          return /* @__PURE__ */ (0, i.jsx)(Q, {
            data: [{
              name: b,
              value: c,
              fill: g[s]
            }, {
              name: `${b}_remaining`,
              value: x,
              fill: "var(--muted)"
            }],
            dataKey: "value",
            nameKey: "name",
            innerRadius: W(s),
            outerRadius: E(s),
            startAngle: C,
            endAngle: C - 360,
            cornerRadius: Math.min(_ / 2, 6),
            paddingAngle: 0,
            opacity: q(s),
            style: Z,
            isAnimationActive: !T,
            children: s === d.length - 1 && (r !== void 0 || m) && /* @__PURE__ */ (0, i.jsx)(B, { content: ({ viewBox: l }) => {
              if (l && "cx" in l && "cy" in l) return /* @__PURE__ */ (0, i.jsxs)("text", {
                x: l.cx,
                y: l.cy,
                textAnchor: "middle",
                dominantBaseline: "middle",
                children: [m && /* @__PURE__ */ (0, i.jsx)("tspan", {
                  x: l.cx,
                  y: (l.cy || 0) - 10,
                  className: u("fill-muted-foreground font-medium", a === "xs" || a === "sm" ? "text-xs" : "text-sm"),
                  children: m
                }), r !== void 0 && /* @__PURE__ */ (0, i.jsx)("tspan", {
                  x: l.cx,
                  y: (l.cy || 0) + (m ? 12 : 0),
                  className: u("fill-foreground font-semibold", a === "xs" && "text-xl", a === "sm" && "text-display-xs", a === "md" && "text-display-sm", a === "lg" && "text-display-md"),
                  children: typeof r == "number" ? r.toLocaleString() : r
                })]
              });
            } })
          }, b);
        }), L && /* @__PURE__ */ (0, i.jsx)(et, { content: ({ payload: n }) => {
          const s = n?.[0];
          if (!s) return null;
          const o = String(s.name), c = R[o.replace(/_remaining$/, "")];
          if (!c) return null;
          const x = o.includes("_remaining") ? 100 - Number(s.value) : Number(s.value);
          return /* @__PURE__ */ (0, i.jsx)("div", {
            className: "rounded-lg border bg-background px-3 py-1.5 text-xs shadow-md",
            children: /* @__PURE__ */ (0, i.jsxs)("div", {
              className: "flex items-center gap-2",
              children: [
                /* @__PURE__ */ (0, i.jsx)("div", {
                  className: "size-2 rounded-full",
                  style: { backgroundColor: c.color }
                }),
                /* @__PURE__ */ (0, i.jsx)("span", { children: c.label }),
                /* @__PURE__ */ (0, i.jsxs)("span", {
                  className: "font-medium",
                  children: [x.toFixed(0), "%"]
                })
              ]
            })
          });
        } })] })
      })
    }), h !== "none" && e && /* @__PURE__ */ (0, i.jsx)(st, {
      series: e,
      position: h === "bottom" ? "top" : "right",
      onSeriesHover: P,
      highlightedSeries: H
    })]
  });
}
$.displayName = "DonutChart";
var at = U(), p = {
  variant: "string",
  size: "string",
  data: "json",
  series: "json",
  centerValue: "string",
  centerLabel: "string",
  legendPosition: "string",
  ringGap: "number",
  ringThickness: "number",
  startAngle: "number",
  showTooltip: "boolean",
  "aria-label": "string"
};
function S(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 D = 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, at.createRoot)(e), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(t, e, r) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(p).map((t) => t.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(t, e) {
    const r = p[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 = p[t] || "string";
    return S(this.getAttribute(e), r);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const t = {};
    for (const [r, m] of Object.entries(p)) if (r in this._props) t[r] = this._props[r];
    else {
      const h = r.replace(/([A-Z])/g, "-$1").toLowerCase();
      t[r] = S(this.getAttribute(h), m);
    }
    const e = f.createElement($, {
      ...t,
      _hostElement: this
    }, f.createElement("span", {
      ref: (r) => {
        r && this._childrenContainer && r.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(e);
  }
};
for (const t of Object.keys(p)) Object.defineProperty(D.prototype, t, {
  get() {
    return this._getProp(t);
  },
  set(e) {
    this._setProp(t, e);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-donut-chart") && customElements.define("hf-donut-chart", D);
export {
  D as DonutChartWC,
  D as default
};

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