@axzydev/axzy_ui_system 1.4.5 → 1.4.7

package/dist/index.cjs

@@ -8354,7 +8354,12 @@ function ITLineBarChart({
   const linePoints = data.map((d, i) => `${x(i)},${y(d.line)}`).join(" ");
   const areaPath = data.length > 0 ? `M ${x(0)} ${y(data[0].line)} ` + data.slice(1).map((d, i) => `L ${x(i + 1)} ${y(d.line)}`).join(" ") + ` L ${x(data.length - 1)} ${padding.top + plotHeight} L ${x(0)} ${padding.top + plotHeight} Z` : "";
   const active = hover !== null ? data[hover] : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: `flex flex-col gap-3 ${className}`.trim(), children: [
+  const tooltipLeft = (() => {
+    if (hover === null) return 0;
+    const center = x(hover) / width * 100;
+    return Math.min(Math.max(center, 12), 88);
+  })();
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: `relative flex flex-col gap-3 ${className}`.trim(), children: [
     /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
       "svg",
       {
@@ -8423,20 +8428,27 @@ function ITLineBarChart({
           data.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("g", { onMouseEnter: () => setHover(i), children: [
             /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("rect", { x: padding.left + step * i, y: padding.top, width: step, height: plotHeight, fill: "transparent" }),
             /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("text", { x: x(i), y: height - 8, textAnchor: "middle", fontSize: 10, fill: "#64748b", children: d.label })
-          ] }, `hit-${d.label}`)),
-          active && hover !== null && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("g", { transform: `translate(${Math.min(Math.max(x(hover) - 62, 4), width - 132)}, ${padding.top + 4})`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("rect", { width: 128, height: 46, rx: 6, fill: "#0f172a", opacity: 0.9 }),
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("text", { x: 10, y: 18, fontSize: 10, fill: "#e2e8f0", children: active.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("text", { x: 10, y: 32, fontSize: 10, fill: lineColor, children: [
-              lineLabel,
-              ": ",
-              formatValue(active.line)
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("text", { x: 10, y: 44, fontSize: 10, fill: "#93c5fd", children: [
-              barLabel,
-              ": ",
-              formatValue(active.bar)
-            ] })
+          ] }, `hit-${d.label}`))
+        ]
+      }
+    ),
+    active && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+      "div",
+      {
+        className: "pointer-events-none absolute z-10 -translate-x-1/2 rounded-lg px-2.5 py-1.5 shadow-lg",
+        style: { left: `${tooltipLeft}%`, top: 4, background: "#0f172a", opacity: 0.94, minWidth: 132 },
+        role: "status",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "text-[10px] font-semibold", style: { color: "#e2e8f0" }, children: active.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("p", { className: "text-[11px] tabular-nums", style: { color: lineColor }, children: [
+            lineLabel,
+            ": ",
+            formatValue(active.line)
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("p", { className: "text-[11px] tabular-nums", style: { color: "#93c5fd" }, children: [
+            barLabel,
+            ": ",
+            formatValue(active.bar)
           ] })
         ]
       }