@deepnoid/ui 0.1.181 → 0.1.182

package/dist/components/charts/index.js

@@ -822,8 +822,8 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
     const { payload, x, y } = e;
     if (!payload || !payload[dataKey]) return;
     setTooltipState({
-      x,
-      y,
+      barX: x,
+      barY: y - 10,
       value: payload[dataKey],
       dataKey,
       label: payload.title
@@ -894,7 +894,7 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
     const tooltipRect = tooltipRef.current.getBoundingClientRect();
     const chartWidth = chartRect.width;
     const tooltipWidth = tooltipRect.width;
-    let left = tooltipState.x - tooltipWidth / 2;
+    let left = tooltipState.barX - tooltipWidth / 2;
     const padding2 = 8;
     if (left < padding2) {
       left = padding2;
@@ -903,114 +903,128 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
     }
     setTooltipLeft(left);
   }, [tooltipState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref: chartRef, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onMouseLeave: handleMouseLeave, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-      import_recharts3.BarChart,
-      {
-        data,
-        margin: { left: -20 },
-        barSize: 20,
-        barGap,
-        className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("defs", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: "blueGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "0%", stopColor: "#DEC1FA" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "100%", stopColor: "#3F9CF2" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: "greenGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "0%", stopColor: "#C2E59C" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "100%", stopColor: "#64B3F4" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: "pinkGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "0%", stopColor: "#DDD6F3" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "100%", stopColor: "#FAACA8" })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            import_recharts3.CartesianGrid,
-            {
-              vertical: true,
-              horizontal: false,
-              strokeDasharray: "4 4",
-              className: "stroke-neutral-light",
-              verticalPoints: tickPositions
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            import_recharts3.XAxis,
-            {
-              dataKey: "title",
-              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-              tickLine: false,
-              tick: CustomTick,
-              padding: { left: 0, right: 0 }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            import_recharts3.YAxis,
-            {
-              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-              tickLine: false,
-              tick: CustomYAxisTick,
-              ticks: yAxisTicks,
-              domain: yAxisDomain
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            import_recharts3.Bar,
-            {
-              dataKey: "blue",
-              fill: "url(#blueGradient)",
-              shape: CustomBarShape,
-              onMouseEnter: (e) => handleMouseEnter(e, "blue"),
-              onMouseLeave: handleMouseLeave
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            import_recharts3.Bar,
-            {
-              dataKey: "green",
-              fill: "url(#greenGradient)",
-              shape: CustomBarShape,
-              onMouseEnter: (e) => handleMouseEnter(e, "green"),
-              onMouseLeave: handleMouseLeave
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            import_recharts3.Bar,
-            {
-              dataKey: "pink",
-              fill: "url(#pinkGradient)",
-              shape: CustomBarShape,
-              onMouseEnter: (e) => handleMouseEnter(e, "pink"),
-              onMouseLeave: handleMouseLeave
-            }
-          )
-        ]
-      }
-    ) }),
-    tooltipFormatter && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "div",
-      {
-        ref: tooltipRef,
-        style: {
-          position: "absolute",
-          left: tooltipLeft + 10,
-          top: (tooltipState == null ? void 0 : tooltipState.y) ? tooltipState.y - 40 : 0,
-          pointerEvents: "none",
-          zIndex: 10,
-          opacity: tooltipState ? 1 : 0,
-          transition: "opacity 0.1s ease-out",
-          visibility: tooltipState ? "visible" : "hidden",
-          width: "fit-content",
-          whiteSpace: "nowrap"
-        },
-        children: tooltipState && tooltipFormatter(tooltipState)
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      ref: chartRef,
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
+      onMouseLeave: handleMouseLeave,
+      onMouseMove: (e) => {
+        const target = e.target;
+        if (!target.closest('[data-testid="recharts-bar-rectangle"]') && !target.closest(".recharts-bar-rectangle") && target.tagName !== "path") {
+          setTooltipState(null);
+        }
+      },
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          import_recharts3.BarChart,
+          {
+            data,
+            margin: { left: -20 },
+            barSize: 20,
+            barGap,
+            className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("defs", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: "blueGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "0%", stopColor: "#DEC1FA" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "100%", stopColor: "#3F9CF2" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: "greenGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "0%", stopColor: "#C2E59C" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "100%", stopColor: "#64B3F4" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: "pinkGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "0%", stopColor: "#DDD6F3" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "100%", stopColor: "#FAACA8" })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                import_recharts3.CartesianGrid,
+                {
+                  vertical: true,
+                  horizontal: false,
+                  strokeDasharray: "4 4",
+                  className: "stroke-neutral-light",
+                  verticalPoints: tickPositions
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                import_recharts3.XAxis,
+                {
+                  dataKey: "title",
+                  axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+                  tickLine: false,
+                  tick: CustomTick,
+                  padding: { left: 0, right: 0 }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                import_recharts3.YAxis,
+                {
+                  axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+                  tickLine: false,
+                  tick: CustomYAxisTick,
+                  ticks: yAxisTicks,
+                  domain: yAxisDomain
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                import_recharts3.Bar,
+                {
+                  dataKey: "blue",
+                  fill: "url(#blueGradient)",
+                  shape: CustomBarShape,
+                  onMouseEnter: (e) => handleMouseEnter(e, "blue"),
+                  onMouseLeave: handleMouseLeave
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                import_recharts3.Bar,
+                {
+                  dataKey: "green",
+                  fill: "url(#greenGradient)",
+                  shape: CustomBarShape,
+                  onMouseEnter: (e) => handleMouseEnter(e, "green"),
+                  onMouseLeave: handleMouseLeave
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                import_recharts3.Bar,
+                {
+                  dataKey: "pink",
+                  fill: "url(#pinkGradient)",
+                  shape: CustomBarShape,
+                  onMouseEnter: (e) => handleMouseEnter(e, "pink"),
+                  onMouseLeave: handleMouseLeave
+                }
+              )
+            ]
+          }
+        ) }),
+        tooltipFormatter && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            ref: tooltipRef,
+            style: {
+              position: "absolute",
+              left: tooltipLeft + 10,
+              top: (tooltipState == null ? void 0 : tooltipState.barY) || 0,
+              pointerEvents: "none",
+              zIndex: 10,
+              opacity: tooltipState ? 1 : 0,
+              transition: "opacity 0.1s ease-out",
+              visibility: tooltipState ? "visible" : "hidden",
+              width: "fit-content",
+              whiteSpace: "nowrap"
+            },
+            children: tooltipState && tooltipFormatter(tooltipState)
+          }
+        )
+      ]
+    }
+  );
 });
 BarChartComponent.displayName = "barChart";
 var barChart_default = BarChartComponent;
@@ -1193,8 +1207,8 @@ var SimpleBarChartComponent = (0, import_react5.forwardRef)((originalProps, ref)
     const { payload, x, y } = e;
     if (!payload) return;
     setTooltipState({
-      x,
-      y,
+      barX: x,
+      barY: y - 20,
       value: payload.value,
       label: payload.title
     });
@@ -1237,7 +1251,7 @@ var SimpleBarChartComponent = (0, import_react5.forwardRef)((originalProps, ref)
     const tooltipRect = tooltipRef.current.getBoundingClientRect();
     const chartWidth = chartRect.width;
     const tooltipWidth = tooltipRect.width;
-    let left = tooltipState.x - tooltipWidth / 2;
+    let left = tooltipState.barX - tooltipWidth / 2;
     const padding2 = 8;
     if (left < padding2) {
       left = padding2;
@@ -1246,82 +1260,96 @@ var SimpleBarChartComponent = (0, import_react5.forwardRef)((originalProps, ref)
     }
     setTooltipLeft(left);
   }, [tooltipState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: chartRef, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onMouseLeave: handleMouseLeave, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts5.ResponsiveContainer, { width: "100%", height: 140, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-      import_recharts5.BarChart,
-      {
-        data,
-        margin: { left: 0, right: 0, top: 0, bottom: 0 },
-        barSize: 10,
-        barGap,
-        className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_recharts5.CartesianGrid,
-            {
-              vertical: true,
-              horizontal: false,
-              strokeDasharray: "4 4",
-              className: "stroke-neutral-light",
-              verticalPoints: tickPositions
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_recharts5.CartesianGrid,
-            {
-              vertical: true,
-              horizontal: false,
-              strokeDasharray: "0",
-              strokeWidth: 2,
-              className: "stroke-neutral-light",
-              verticalPoints: [0]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_recharts5.XAxis,
-            {
-              dataKey: "title",
-              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-              tickLine: false,
-              tick: CustomTick,
-              padding: { left: 0, right: 0 }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts5.YAxis, { hide: true, ticks: yAxisTicks, domain: yAxisDomain }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_recharts5.Bar,
-            {
-              dataKey: "value",
-              fill: "#C7E5FA",
-              shape: CustomBarShape,
-              onMouseEnter: handleMouseEnter,
-              onMouseLeave: handleMouseLeave
-            }
-          )
-        ]
-      }
-    ) }),
-    tooltipFormatter && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      "div",
-      {
-        ref: tooltipRef,
-        style: {
-          position: "absolute",
-          left: tooltipLeft + 5,
-          top: (tooltipState == null ? void 0 : tooltipState.y) ? tooltipState.y - 20 : 0,
-          pointerEvents: "none",
-          zIndex: 10,
-          opacity: tooltipState ? 1 : 0,
-          transition: "opacity 0.1s ease-out",
-          visibility: tooltipState ? "visible" : "hidden",
-          width: "fit-content",
-          whiteSpace: "nowrap"
-        },
-        children: tooltipState && tooltipFormatter(tooltipState)
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      ref: chartRef,
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
+      onMouseLeave: handleMouseLeave,
+      onMouseMove: (e) => {
+        const target = e.target;
+        if (!target.closest('[data-testid="recharts-bar-rectangle"]') && !target.closest(".recharts-bar-rectangle") && target.tagName !== "path") {
+          setTooltipState(null);
+        }
+      },
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts5.ResponsiveContainer, { width: "100%", height: 140, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          import_recharts5.BarChart,
+          {
+            data,
+            margin: { left: 0, right: 0, top: 0, bottom: 0 },
+            barSize: 10,
+            barGap,
+            className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                import_recharts5.CartesianGrid,
+                {
+                  vertical: true,
+                  horizontal: false,
+                  strokeDasharray: "4 4",
+                  className: "stroke-neutral-light",
+                  verticalPoints: tickPositions
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                import_recharts5.CartesianGrid,
+                {
+                  vertical: true,
+                  horizontal: false,
+                  strokeDasharray: "0",
+                  strokeWidth: 2,
+                  className: "stroke-neutral-light",
+                  verticalPoints: [0]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                import_recharts5.XAxis,
+                {
+                  dataKey: "title",
+                  axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+                  tickLine: false,
+                  tick: CustomTick,
+                  padding: { left: 0, right: 0 }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts5.YAxis, { hide: true, ticks: yAxisTicks, domain: yAxisDomain }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                import_recharts5.Bar,
+                {
+                  dataKey: "value",
+                  fill: "#C7E5FA",
+                  shape: CustomBarShape,
+                  onMouseEnter: handleMouseEnter,
+                  onMouseLeave: handleMouseLeave
+                }
+              )
+            ]
+          }
+        ) }),
+        tooltipFormatter && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            ref: tooltipRef,
+            style: {
+              position: "absolute",
+              left: tooltipLeft + 5,
+              top: (tooltipState == null ? void 0 : tooltipState.barY) || 0,
+              pointerEvents: "none",
+              zIndex: 10,
+              opacity: tooltipState ? 1 : 0,
+              transition: "opacity 0.1s ease-out",
+              visibility: tooltipState ? "visible" : "hidden",
+              width: "fit-content",
+              whiteSpace: "nowrap"
+            },
+            children: tooltipState && tooltipFormatter(tooltipState)
+          }
+        )
+      ]
+    }
+  );
 });
 SimpleBarChartComponent.displayName = "simpleBarChart";
 var simpleBarChart_default = SimpleBarChartComponent;

package/dist/components/charts/index.mjs

@@ -8,7 +8,7 @@ import "../../chunk-EWS3FESG.mjs";
 import {
   BarChartTooltip,
   barChart_default
-} from "../../chunk-JOK735WN.mjs";
+} from "../../chunk-WKTRWHDA.mjs";
 import {
   circularProgress_default
 } from "../../chunk-WA7CSZQ3.mjs";
@@ -17,10 +17,10 @@ import {
 } from "../../chunk-U7SYKG2C.mjs";
 import {
   simpleBarChart_default
-} from "../../chunk-GWHUQUKA.mjs";
+} from "../../chunk-6WD32ERF.mjs";
+import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-U4DJHAM5.mjs";
-import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   areaChart_default as AreaChart,