tekivex-ui 2.5.2 → 2.5.4

package/dist/charts.js

@@ -1,235 +1,236 @@
-import { jsx as t, jsxs as b, Fragment as R } from "react/jsx-runtime";
-import { ResponsiveContainer as L, AreaChart as O, CartesianGrid as A, XAxis as D, YAxis as T, Tooltip as v, Legend as w, Area as $, BarChart as j, Bar as G, LineChart as E, ReferenceLine as H, Line as N, PieChart as P, Pie as B, Cell as I, ScatterChart as U, ZAxis as V, Scatter as X, RadarChart as Y, PolarGrid as Z, PolarAngleAxis as _, PolarRadiusAxis as q, Radar as J } from "recharts";
+import { jsx as t, jsxs as g, Fragment as R } from "react/jsx-runtime";
+import { ResponsiveContainer as v, AreaChart as j, CartesianGrid as D, XAxis as F, YAxis as K, Tooltip as L, Legend as w, Area as E, BarChart as G, Bar as q, LineChart as H, ReferenceLine as N, Line as U, PieChart as P, Pie as B, Cell as I, ScatterChart as V, ZAxis as X, Scatter as Y, RadarChart as Z, PolarGrid as _, PolarAngleAxis as J, PolarRadiusAxis as Q, Radar as tt } from "recharts";
 import { u as z } from "./index-eT_U4qB2.js";
-function C(e) {
+import { useState as O, useEffect as $ } from "react";
+function C(r) {
   return [
-    e.primary,
-    e.secondary,
-    e.info,
-    e.success,
-    e.warning,
-    e.danger,
+    r.primary,
+    r.secondary,
+    r.info,
+    r.success,
+    r.warning,
+    r.danger,
     "#a855f7",
     "#f97316",
     "#14b8a6",
     "#e879f9"
   ];
 }
-const F = { top: 10, right: 30, bottom: 10, left: 0 };
-function M(e) {
+const T = { top: 10, right: 30, bottom: 10, left: 0 };
+function M(r) {
   return {
     contentStyle: {
-      backgroundColor: e.surface,
-      border: `1px solid ${e.border}`,
+      backgroundColor: r.surface,
+      border: `1px solid ${r.border}`,
       borderRadius: 8,
       boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
-      color: e.text,
+      color: r.text,
       fontSize: 13
     },
-    labelStyle: { color: e.textMuted, fontWeight: 600, marginBottom: 4 },
-    itemStyle: { color: e.text },
-    cursor: { fill: `${e.primary}15` }
+    labelStyle: { color: r.textMuted, fontWeight: 600, marginBottom: 4 },
+    itemStyle: { color: r.text },
+    cursor: { fill: `${r.primary}15` }
   };
 }
-function rt({
-  data: e,
-  series: S,
-  xKey: y,
-  height: m = 300,
-  margin: d = F,
-  showGrid: s = !0,
-  showLegend: f = !0,
+function ot({
+  data: r,
+  series: m,
+  xKey: h,
+  height: S = 300,
+  margin: d = T,
+  showGrid: y = !0,
+  showLegend: k = !0,
   showTooltip: p = !0,
   smooth: o = !0,
-  xTickFormatter: h,
-  yTickFormatter: r,
-  yDomain: l,
-  ariaLabel: c = "Area chart"
+  xTickFormatter: u,
+  yTickFormatter: i,
+  yDomain: a,
+  ariaLabel: s = "Area chart"
 }) {
-  const i = z(), u = C(i), a = M(i), g = { fill: i.textMuted, fontSize: 12 };
-  return /* @__PURE__ */ t("div", { role: "img", "aria-label": c, style: { width: "100%", height: m }, children: /* @__PURE__ */ t(L, { width: "100%", height: "100%", children: /* @__PURE__ */ b(O, { data: e, margin: d, children: [
-    s && /* @__PURE__ */ t(A, { strokeDasharray: "3 3", stroke: i.border, vertical: !1 }),
+  const e = z(), c = C(e), l = M(e), x = { fill: e.textMuted, fontSize: 12 };
+  return /* @__PURE__ */ t("div", { role: "img", "aria-label": s, style: { width: "100%", height: S }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(j, { data: r, margin: d, children: [
+    y && /* @__PURE__ */ t(D, { strokeDasharray: "3 3", stroke: e.border, vertical: !1 }),
     /* @__PURE__ */ t(
-      D,
+      F,
       {
-        dataKey: y,
-        tick: g,
-        axisLine: { stroke: i.border },
+        dataKey: h,
+        tick: x,
+        axisLine: { stroke: e.border },
         tickLine: !1,
-        tickFormatter: h
+        tickFormatter: u
       }
     ),
     /* @__PURE__ */ t(
-      T,
+      K,
       {
-        tick: g,
+        tick: x,
         axisLine: !1,
         tickLine: !1,
-        tickFormatter: r,
-        domain: l
+        tickFormatter: i,
+        domain: a
       }
     ),
     p && /* @__PURE__ */ t(
-      v,
+      L,
       {
-        contentStyle: a.contentStyle,
-        labelStyle: a.labelStyle,
-        itemStyle: a.itemStyle,
-        cursor: a.cursor
+        contentStyle: l.contentStyle,
+        labelStyle: l.labelStyle,
+        itemStyle: l.itemStyle,
+        cursor: l.cursor
       }
     ),
-    f && /* @__PURE__ */ t(
+    k && /* @__PURE__ */ t(
       w,
       {
-        wrapperStyle: { fontSize: 13, color: i.textMuted, paddingTop: 8 }
+        wrapperStyle: { fontSize: 13, color: e.textMuted, paddingTop: 8 }
       }
     ),
-    S.map((k, x) => {
-      const n = k.color ?? u[x % u.length];
+    m.map((f, b) => {
+      const n = f.color ?? c[b % c.length];
       return /* @__PURE__ */ t(
-        $,
+        E,
         {
           type: o ? "monotone" : "linear",
-          dataKey: k.key,
-          name: k.label ?? k.key,
+          dataKey: f.key,
+          name: f.label ?? f.key,
           stroke: n,
           strokeWidth: 2,
           fill: n,
-          fillOpacity: k.fillOpacity ?? 0.2,
-          stackId: k.stacked ? "stack" : void 0,
+          fillOpacity: f.fillOpacity ?? 0.2,
+          stackId: f.stacked ? "stack" : void 0,
           dot: !1,
           activeDot: { r: 5, strokeWidth: 0 }
         },
-        k.key
+        f.key
       );
     })
   ] }) }) });
 }
-function it({
-  data: e,
-  series: S,
-  xKey: y,
-  height: m = 300,
-  margin: d = F,
-  showGrid: s = !0,
-  showLegend: f = !0,
+function at({
+  data: r,
+  series: m,
+  xKey: h,
+  height: S = 300,
+  margin: d = T,
+  showGrid: y = !0,
+  showLegend: k = !0,
   showTooltip: p = !0,
   layout: o = "horizontal",
-  barSize: h,
-  xTickFormatter: r,
-  yTickFormatter: l,
-  ariaLabel: c = "Bar chart"
+  barSize: u,
+  xTickFormatter: i,
+  yTickFormatter: a,
+  ariaLabel: s = "Bar chart"
 }) {
-  const i = z(), u = C(i), a = M(i), g = { fill: i.textMuted, fontSize: 12 }, k = o === "vertical";
-  return /* @__PURE__ */ t("div", { role: "img", "aria-label": c, style: { width: "100%", height: m }, children: /* @__PURE__ */ t(L, { width: "100%", height: "100%", children: /* @__PURE__ */ b(j, { data: e, margin: d, layout: o, children: [
-    s && /* @__PURE__ */ t(
-      A,
+  const e = z(), c = C(e), l = M(e), x = { fill: e.textMuted, fontSize: 12 }, f = o === "vertical";
+  return /* @__PURE__ */ t("div", { role: "img", "aria-label": s, style: { width: "100%", height: S }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(G, { data: r, margin: d, layout: o, children: [
+    y && /* @__PURE__ */ t(
+      D,
       {
         strokeDasharray: "3 3",
-        stroke: i.border,
-        vertical: k,
-        horizontal: !k
+        stroke: e.border,
+        vertical: f,
+        horizontal: !f
       }
     ),
-    k ? /* @__PURE__ */ b(R, { children: [
-      /* @__PURE__ */ t(T, { dataKey: y, type: "category", tick: g, axisLine: !1, tickLine: !1, tickFormatter: r, width: 100 }),
-      /* @__PURE__ */ t(D, { type: "number", tick: g, axisLine: { stroke: i.border }, tickLine: !1, tickFormatter: l })
-    ] }) : /* @__PURE__ */ b(R, { children: [
-      /* @__PURE__ */ t(D, { dataKey: y, tick: g, axisLine: { stroke: i.border }, tickLine: !1, tickFormatter: r }),
-      /* @__PURE__ */ t(T, { tick: g, axisLine: !1, tickLine: !1, tickFormatter: l })
+    f ? /* @__PURE__ */ g(R, { children: [
+      /* @__PURE__ */ t(K, { dataKey: h, type: "category", tick: x, axisLine: !1, tickLine: !1, tickFormatter: i, width: 100 }),
+      /* @__PURE__ */ t(F, { type: "number", tick: x, axisLine: { stroke: e.border }, tickLine: !1, tickFormatter: a })
+    ] }) : /* @__PURE__ */ g(R, { children: [
+      /* @__PURE__ */ t(F, { dataKey: h, tick: x, axisLine: { stroke: e.border }, tickLine: !1, tickFormatter: i }),
+      /* @__PURE__ */ t(K, { tick: x, axisLine: !1, tickLine: !1, tickFormatter: a })
     ] }),
     p && /* @__PURE__ */ t(
-      v,
+      L,
       {
-        contentStyle: a.contentStyle,
-        labelStyle: a.labelStyle,
-        itemStyle: a.itemStyle,
-        cursor: { fill: `${i.surfaceAlt}` }
+        contentStyle: l.contentStyle,
+        labelStyle: l.labelStyle,
+        itemStyle: l.itemStyle,
+        cursor: { fill: `${e.surfaceAlt}` }
       }
     ),
-    f && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: i.textMuted, paddingTop: 8 } }),
-    S.map((x, n) => {
-      const K = x.color ?? u[n % u.length];
+    k && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: e.textMuted, paddingTop: 8 } }),
+    m.map((b, n) => {
+      const A = b.color ?? c[n % c.length];
       return /* @__PURE__ */ t(
-        G,
+        q,
         {
-          dataKey: x.key,
-          name: x.label ?? x.key,
-          fill: K,
-          stackId: x.stackId,
-          maxBarSize: h ?? 40,
-          radius: x.radius ?? [4, 4, 0, 0]
+          dataKey: b.key,
+          name: b.label ?? b.key,
+          fill: A,
+          stackId: b.stackId,
+          maxBarSize: u ?? 40,
+          radius: b.radius ?? [4, 4, 0, 0]
         },
-        x.key
+        b.key
       );
     })
   ] }) }) });
 }
-function lt({
-  data: e,
-  series: S,
-  xKey: y,
-  height: m = 300,
-  margin: d = F,
-  showGrid: s = !0,
-  showLegend: f = !0,
+function nt({
+  data: r,
+  series: m,
+  xKey: h,
+  height: S = 300,
+  margin: d = T,
+  showGrid: y = !0,
+  showLegend: k = !0,
   showTooltip: p = !0,
   smooth: o = !0,
-  referenceLines: h = [],
-  xTickFormatter: r,
-  yTickFormatter: l,
-  yDomain: c,
-  connectNulls: i = !1,
-  ariaLabel: u = "Line chart"
+  referenceLines: u = [],
+  xTickFormatter: i,
+  yTickFormatter: a,
+  yDomain: s,
+  connectNulls: e = !1,
+  ariaLabel: c = "Line chart"
 }) {
-  const a = z(), g = C(a), k = M(a), x = { fill: a.textMuted, fontSize: 12 };
-  return /* @__PURE__ */ t("div", { role: "img", "aria-label": u, style: { width: "100%", height: m }, children: /* @__PURE__ */ t(L, { width: "100%", height: "100%", children: /* @__PURE__ */ b(E, { data: e, margin: d, children: [
-    s && /* @__PURE__ */ t(A, { strokeDasharray: "3 3", stroke: a.border, vertical: !1 }),
+  const l = z(), x = C(l), f = M(l), b = { fill: l.textMuted, fontSize: 12 };
+  return /* @__PURE__ */ t("div", { role: "img", "aria-label": c, style: { width: "100%", height: S }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(H, { data: r, margin: d, children: [
+    y && /* @__PURE__ */ t(D, { strokeDasharray: "3 3", stroke: l.border, vertical: !1 }),
     /* @__PURE__ */ t(
-      D,
+      F,
       {
-        dataKey: y,
-        tick: x,
-        axisLine: { stroke: a.border },
+        dataKey: h,
+        tick: b,
+        axisLine: { stroke: l.border },
         tickLine: !1,
-        tickFormatter: r
+        tickFormatter: i
       }
     ),
     /* @__PURE__ */ t(
-      T,
+      K,
       {
-        tick: x,
+        tick: b,
         axisLine: !1,
         tickLine: !1,
-        tickFormatter: l,
-        domain: c
+        tickFormatter: a,
+        domain: s
       }
     ),
     p && /* @__PURE__ */ t(
-      v,
+      L,
       {
-        contentStyle: k.contentStyle,
-        labelStyle: k.labelStyle,
-        itemStyle: k.itemStyle,
-        cursor: { stroke: a.border, strokeWidth: 1 }
+        contentStyle: f.contentStyle,
+        labelStyle: f.labelStyle,
+        itemStyle: f.itemStyle,
+        cursor: { stroke: l.border, strokeWidth: 1 }
       }
     ),
-    f && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: a.textMuted, paddingTop: 8 } }),
-    h.map((n, K) => /* @__PURE__ */ t(
-      H,
+    k && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: l.textMuted, paddingTop: 8 } }),
+    u.map((n, A) => /* @__PURE__ */ t(
+      N,
       {
         y: n.y,
         x: n.x,
-        label: n.label ? { value: n.label, fill: a.textMuted, fontSize: 11 } : void 0,
-        stroke: n.color ?? a.border,
+        label: n.label ? { value: n.label, fill: l.textMuted, fontSize: 11 } : void 0,
+        stroke: n.color ?? l.border,
         strokeDasharray: n.dashed ? "4 4" : void 0
       },
-      K
+      A
     )),
-    S.map((n, K) => {
-      const W = n.color ?? g[K % g.length];
+    m.map((n, A) => {
+      const W = n.color ?? x[A % x.length];
       return /* @__PURE__ */ t(
-        N,
+        U,
         {
           type: o ? "monotone" : "linear",
           dataKey: n.key,
@@ -239,242 +240,264 @@ function lt({
           strokeDasharray: n.dashed ? "6 3" : void 0,
           dot: n.dot ?? !1,
           activeDot: { r: 5, strokeWidth: 0, fill: W },
-          connectNulls: i
+          connectNulls: e
         },
         n.key
       );
     })
   ] }) }) });
 }
-function ot({
-  data: e,
-  height: S = 300,
-  showLegend: y = !0,
-  showTooltip: m = !0,
+function ct({
+  data: r,
+  height: m = 300,
+  showLegend: h = !0,
+  showTooltip: S = !0,
   showLabels: d = !1,
-  outerRadius: s = "70%",
-  startAngle: f = 90,
+  outerRadius: y = "70%",
+  startAngle: k = 90,
   ariaLabel: p = "Pie chart"
 }) {
-  const o = z(), h = C(o), r = M(o);
-  return /* @__PURE__ */ t("div", { role: "img", "aria-label": p, style: { width: "100%", height: S }, children: /* @__PURE__ */ t(L, { width: "100%", height: "100%", children: /* @__PURE__ */ b(P, { children: [
-    m && /* @__PURE__ */ t(
-      v,
-      {
-        contentStyle: r.contentStyle,
-        labelStyle: r.labelStyle,
-        itemStyle: r.itemStyle
-      }
-    ),
-    y && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: o.textMuted } }),
-    /* @__PURE__ */ t(
-      B,
-      {
-        data: e,
-        dataKey: "value",
-        nameKey: "name",
-        outerRadius: s,
-        startAngle: f,
-        endAngle: f - 360,
-        label: d ? ({ name: l, percent: c }) => `${l} (${(c * 100).toFixed(0)}%)` : void 0,
-        labelLine: d,
-        strokeWidth: 2,
-        stroke: o.bg,
-        children: e.map((l, c) => /* @__PURE__ */ t(
-          I,
+  const o = z(), u = C(o), i = M(o), [a, s] = O(!1);
+  return $(() => {
+    const e = requestAnimationFrame(() => s(!0));
+    return () => cancelAnimationFrame(e);
+  }, []), /* @__PURE__ */ t(
+    "div",
+    {
+      role: "img",
+      "aria-label": p,
+      style: { width: "100%", minWidth: 240, height: m, position: "relative" },
+      children: a && /* @__PURE__ */ t(v, { width: "100%", height: "100%", debounce: 50, children: /* @__PURE__ */ g(P, { children: [
+        S && /* @__PURE__ */ t(
+          L,
           {
-            fill: l.color ?? h[c % h.length]
-          },
-          l.name
-        ))
-      }
-    )
-  ] }) }) });
+            contentStyle: i.contentStyle,
+            labelStyle: i.labelStyle,
+            itemStyle: i.itemStyle
+          }
+        ),
+        h && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: o.textMuted } }),
+        /* @__PURE__ */ t(
+          B,
+          {
+            data: r,
+            dataKey: "value",
+            nameKey: "name",
+            outerRadius: y,
+            startAngle: k,
+            endAngle: k - 360,
+            label: d ? ({ name: e, percent: c }) => `${e} (${(c * 100).toFixed(0)}%)` : void 0,
+            labelLine: d,
+            strokeWidth: 2,
+            stroke: o.bg,
+            children: r.map((e, c) => /* @__PURE__ */ t(
+              I,
+              {
+                fill: e.color ?? u[c % u.length]
+              },
+              e.name
+            ))
+          }
+        )
+      ] }) })
+    }
+  );
 }
-function at({
-  data: e,
-  height: S = 300,
-  showLegend: y = !0,
-  showTooltip: m = !0,
+function dt({
+  data: r,
+  height: m = 300,
+  showLegend: h = !0,
+  showTooltip: S = !0,
   centerLabel: d,
-  centerSublabel: s,
-  innerRadius: f = "55%",
+  centerSublabel: y,
+  innerRadius: k = "55%",
   outerRadius: p = "75%",
   startAngle: o = 90,
-  ariaLabel: h = "Donut chart"
+  ariaLabel: u = "Donut chart"
 }) {
-  const r = z(), l = C(r), c = M(r);
-  return /* @__PURE__ */ b("div", { role: "img", "aria-label": h, style: { width: "100%", height: S }, children: [
-    /* @__PURE__ */ t(L, { width: "100%", height: "100%", children: /* @__PURE__ */ b(P, { children: [
-      m && /* @__PURE__ */ t(
-        v,
-        {
-          contentStyle: c.contentStyle,
-          labelStyle: c.labelStyle,
-          itemStyle: c.itemStyle
-        }
-      ),
-      y && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: r.textMuted } }),
-      /* @__PURE__ */ t(
-        B,
-        {
-          data: e,
-          dataKey: "value",
-          nameKey: "name",
-          innerRadius: f,
-          outerRadius: p,
-          startAngle: o,
-          endAngle: o - 360,
-          strokeWidth: 3,
-          stroke: r.bg,
-          label: !1,
-          labelLine: !1,
-          children: e.map((i, u) => /* @__PURE__ */ t(I, { fill: i.color ?? l[u % l.length] }, i.name))
-        }
-      ),
-      (d || s) && /* @__PURE__ */ t("text", {})
-    ] }) }),
-    (d || s) && /* @__PURE__ */ b(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          inset: 0,
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          pointerEvents: "none",
-          marginTop: y ? -24 : 0
-        },
-        children: [
-          d && /* @__PURE__ */ t("span", { style: { fontSize: 22, fontWeight: 700, color: r.text, lineHeight: 1 }, children: d }),
-          s && /* @__PURE__ */ t("span", { style: { fontSize: 13, color: r.textMuted, marginTop: 4 }, children: s })
-        ]
-      }
-    )
-  ] });
+  const i = z(), a = C(i), s = M(i), [e, c] = O(!1);
+  return $(() => {
+    const l = requestAnimationFrame(() => c(!0));
+    return () => cancelAnimationFrame(l);
+  }, []), /* @__PURE__ */ g(
+    "div",
+    {
+      role: "img",
+      "aria-label": u,
+      style: { width: "100%", minWidth: 240, height: m, position: "relative" },
+      children: [
+        e && /* @__PURE__ */ t(v, { width: "100%", height: "100%", debounce: 50, children: /* @__PURE__ */ g(P, { children: [
+          S && /* @__PURE__ */ t(
+            L,
+            {
+              contentStyle: s.contentStyle,
+              labelStyle: s.labelStyle,
+              itemStyle: s.itemStyle
+            }
+          ),
+          h && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: i.textMuted } }),
+          /* @__PURE__ */ t(
+            B,
+            {
+              data: r,
+              dataKey: "value",
+              nameKey: "name",
+              innerRadius: k,
+              outerRadius: p,
+              startAngle: o,
+              endAngle: o - 360,
+              strokeWidth: 3,
+              stroke: i.bg,
+              label: !1,
+              labelLine: !1,
+              children: r.map((l, x) => /* @__PURE__ */ t(I, { fill: l.color ?? a[x % a.length] }, l.name))
+            }
+          ),
+          (d || y) && /* @__PURE__ */ t("text", {})
+        ] }) }),
+        (d || y) && /* @__PURE__ */ g(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              pointerEvents: "none",
+              marginTop: h ? -24 : 0
+            },
+            children: [
+              d && /* @__PURE__ */ t("span", { style: { fontSize: 22, fontWeight: 700, color: i.text, lineHeight: 1 }, children: d }),
+              y && /* @__PURE__ */ t("span", { style: { fontSize: 13, color: i.textMuted, marginTop: 4 }, children: y })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
-function nt({
-  series: e,
-  height: S = 300,
-  margin: y = F,
-  showGrid: m = !0,
+function st({
+  series: r,
+  height: m = 300,
+  margin: h = T,
+  showGrid: S = !0,
   showLegend: d = !0,
-  showTooltip: s = !0,
-  xTickFormatter: f,
+  showTooltip: y = !0,
+  xTickFormatter: k,
   yTickFormatter: p,
   zRange: o = [20, 400],
-  ariaLabel: h = "Scatter chart"
+  ariaLabel: u = "Scatter chart"
 }) {
-  const r = z(), l = C(r), c = M(r), i = { fill: r.textMuted, fontSize: 12 };
-  return /* @__PURE__ */ t("div", { role: "img", "aria-label": h, style: { width: "100%", height: S }, children: /* @__PURE__ */ t(L, { width: "100%", height: "100%", children: /* @__PURE__ */ b(U, { margin: y, children: [
-    m && /* @__PURE__ */ t(A, { strokeDasharray: "3 3", stroke: r.border }),
+  const i = z(), a = C(i), s = M(i), e = { fill: i.textMuted, fontSize: 12 };
+  return /* @__PURE__ */ t("div", { role: "img", "aria-label": u, style: { width: "100%", height: m }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(V, { margin: h, children: [
+    S && /* @__PURE__ */ t(D, { strokeDasharray: "3 3", stroke: i.border }),
     /* @__PURE__ */ t(
-      D,
+      F,
       {
         type: "number",
         dataKey: "x",
-        tick: i,
-        axisLine: { stroke: r.border },
+        tick: e,
+        axisLine: { stroke: i.border },
         tickLine: !1,
-        tickFormatter: f
+        tickFormatter: k
       }
     ),
     /* @__PURE__ */ t(
-      T,
+      K,
       {
         type: "number",
         dataKey: "y",
-        tick: i,
+        tick: e,
         axisLine: !1,
         tickLine: !1,
         tickFormatter: p
       }
     ),
-    /* @__PURE__ */ t(V, { type: "number", dataKey: "z", range: o }),
-    s && /* @__PURE__ */ t(
-      v,
+    /* @__PURE__ */ t(X, { type: "number", dataKey: "z", range: o }),
+    y && /* @__PURE__ */ t(
+      L,
       {
-        contentStyle: c.contentStyle,
-        labelStyle: c.labelStyle,
-        itemStyle: c.itemStyle,
+        contentStyle: s.contentStyle,
+        labelStyle: s.labelStyle,
+        itemStyle: s.itemStyle,
         cursor: { strokeDasharray: "3 3" }
       }
     ),
-    d && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: r.textMuted, paddingTop: 8 } }),
-    e.map((u, a) => /* @__PURE__ */ t(
-      X,
+    d && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: i.textMuted, paddingTop: 8 } }),
+    r.map((c, l) => /* @__PURE__ */ t(
+      Y,
       {
-        name: u.name,
-        data: u.data,
-        fill: u.color ?? l[a % l.length],
+        name: c.name,
+        data: c.data,
+        fill: c.color ?? a[l % a.length],
         fillOpacity: 0.8
       },
-      u.name ?? a
+      c.name ?? l
     ))
   ] }) }) });
 }
-function ct({
-  data: e,
-  series: S,
-  angleKey: y,
-  height: m = 300,
+function yt({
+  data: r,
+  series: m,
+  angleKey: h,
+  height: S = 300,
   showLegend: d = !0,
-  showTooltip: s = !0,
-  outerRadius: f = "70%",
+  showTooltip: y = !0,
+  outerRadius: k = "70%",
   ariaLabel: p = "Radar chart"
 }) {
-  const o = z(), h = C(o), r = M(o);
-  return /* @__PURE__ */ t("div", { role: "img", "aria-label": p, style: { width: "100%", height: m }, children: /* @__PURE__ */ t(L, { width: "100%", height: "100%", children: /* @__PURE__ */ b(Y, { data: e, outerRadius: f, children: [
-    /* @__PURE__ */ t(Z, { stroke: o.border }),
+  const o = z(), u = C(o), i = M(o);
+  return /* @__PURE__ */ t("div", { role: "img", "aria-label": p, style: { width: "100%", height: S }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(Z, { data: r, outerRadius: k, children: [
+    /* @__PURE__ */ t(_, { stroke: o.border }),
     /* @__PURE__ */ t(
-      _,
+      J,
       {
-        dataKey: y,
+        dataKey: h,
         tick: { fill: o.textMuted, fontSize: 12 }
       }
     ),
     /* @__PURE__ */ t(
-      q,
+      Q,
       {
         tick: { fill: o.textMuted, fontSize: 10 },
         axisLine: !1,
         tickLine: !1
       }
     ),
-    s && /* @__PURE__ */ t(
-      v,
+    y && /* @__PURE__ */ t(
+      L,
       {
-        contentStyle: r.contentStyle,
-        labelStyle: r.labelStyle,
-        itemStyle: r.itemStyle
+        contentStyle: i.contentStyle,
+        labelStyle: i.labelStyle,
+        itemStyle: i.itemStyle
       }
     ),
     d && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: o.textMuted } }),
-    S.map((l, c) => {
-      const i = l.color ?? h[c % h.length];
+    m.map((a, s) => {
+      const e = a.color ?? u[s % u.length];
       return /* @__PURE__ */ t(
-        J,
+        tt,
         {
-          name: l.label ?? l.key,
-          dataKey: l.key,
-          stroke: i,
-          fill: i,
-          fillOpacity: l.fillOpacity ?? 0.2,
+          name: a.label ?? a.key,
+          dataKey: a.key,
+          stroke: e,
+          fill: e,
+          fillOpacity: a.fillOpacity ?? 0.2,
           strokeWidth: 2
         },
-        l.key
+        a.key
       );
     })
   ] }) }) });
 }
 export {
-  rt as TkxAreaChart,
-  it as TkxBarChart,
-  at as TkxDonutChart,
-  lt as TkxLineChart,
-  ot as TkxPieChart,
-  ct as TkxRadarChart,
-  nt as TkxScatterChart
+  ot as TkxAreaChart,
+  at as TkxBarChart,
+  dt as TkxDonutChart,
+  nt as TkxLineChart,
+  ct as TkxPieChart,
+  yt as TkxRadarChart,
+  st as TkxScatterChart
 };