@marcoschwartz/lite-ui 0.27.8 → 0.27.9

package/dist/index.js

@@ -7246,7 +7246,7 @@ var LineChart = ({
   tooltipContent,
   onPointClick,
   onPointHover,
-  showCrosshair = false,
+  showCrosshair = true,
   showValueLabels = false,
   className = "",
   children,
@@ -7255,8 +7255,7 @@ var LineChart = ({
 }) => {
   const containerRef = (0, import_react32.useRef)(null);
   const svgRef = (0, import_react32.useRef)(null);
-  const [hoveredPoint, setHoveredPoint] = (0, import_react32.useState)(null);
-  const [crosshairX, setCrosshairX] = (0, import_react32.useState)(null);
+  const [activeIndex, setActiveIndex] = (0, import_react32.useState)(null);
   const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
   const {
     width,
@@ -7388,43 +7387,59 @@ var LineChart = ({
       return { points, path };
     });
   }, [data, xScale, yScale]);
-  const handlePointEnter = (0, import_react32.useCallback)((e, seriesIndex, pointIndex) => {
-    const series = data[seriesIndex];
-    const point = series.data[pointIndex];
-    const scaledPoint = seriesPaths[seriesIndex].points[pointIndex];
-    setHoveredPoint({ seriesIndex, pointIndex });
-    if (showCrosshair) {
-      setCrosshairX(scaledPoint.x);
+  const handleChartMouseMove = (0, import_react32.useCallback)((e) => {
+    if (!svgRef.current || !containerRef.current || data.length === 0 || data[0].data.length === 0) return;
+    const svgElement = svgRef.current;
+    const point = svgElement.createSVGPoint();
+    point.x = e.clientX;
+    point.y = e.clientY;
+    const ctm = svgElement.getScreenCTM();
+    if (!ctm) return;
+    const svgPoint = point.matrixTransform(ctm.inverse());
+    const chartX = svgPoint.x - padding.left;
+    const firstSeriesPoints = seriesPaths[0].points;
+    let nearestIndex = 0;
+    let minDist = Infinity;
+    for (let i = 0; i < firstSeriesPoints.length; i++) {
+      const dist = Math.abs(firstSeriesPoints[i].x - chartX);
+      if (dist < minDist) {
+        minDist = dist;
+        nearestIndex = i;
+      }
     }
-    if (showTooltip && containerRef.current) {
+    setActiveIndex(nearestIndex);
+    if (showTooltip) {
       const rect = containerRef.current.getBoundingClientRect();
       const mouseX = e.clientX - rect.left;
       const mouseY = e.clientY - rect.top;
-      const payload = [{
+      const tooltipPayload = data.filter((series) => nearestIndex < series.data.length).map((series, i) => ({
         name: series.name,
-        value: point.y,
-        color: series.color || colors[seriesIndex % colors.length],
-        payload: point
-      }];
+        value: series.data[nearestIndex].y,
+        color: series.color || colors[i % colors.length],
+        payload: series.data[nearestIndex]
+      }));
       showTooltipFn({
         x: mouseX,
         y: mouseY,
-        label: xFormatter(point.x),
-        payload
+        label: xFormatter(data[0].data[nearestIndex].x),
+        payload: tooltipPayload
       });
     }
-    onPointHover?.(point, seriesIndex, pointIndex);
-  }, [data, seriesPaths, showCrosshair, showTooltip, colors, xFormatter, showTooltipFn, onPointHover]);
-  const handlePointLeave = (0, import_react32.useCallback)(() => {
-    setHoveredPoint(null);
-    setCrosshairX(null);
+    onPointHover?.(data[0].data[nearestIndex], 0, nearestIndex);
+  }, [data, seriesPaths, padding, showTooltip, colors, xFormatter, showTooltipFn, onPointHover]);
+  const handleChartMouseLeave = (0, import_react32.useCallback)(() => {
+    setActiveIndex(null);
     hideTooltip();
     onPointHover?.(null, -1, -1);
   }, [hideTooltip, onPointHover]);
-  const handlePointClick = (0, import_react32.useCallback)((seriesIndex, pointIndex) => {
-    const point = data[seriesIndex].data[pointIndex];
-    onPointClick?.(point, seriesIndex, pointIndex);
-  }, [data, onPointClick]);
+  const handleChartClick = (0, import_react32.useCallback)(() => {
+    if (activeIndex === null || !onPointClick) return;
+    data.forEach((series, seriesIndex) => {
+      if (series.data[activeIndex]) {
+        onPointClick(series.data[activeIndex], seriesIndex, activeIndex);
+      }
+    });
+  }, [activeIndex, data, onPointClick]);
   const legendItems = (0, import_react32.useMemo)(
     () => data.map((series, i) => ({
       name: series.name,
@@ -7501,12 +7516,12 @@ var LineChart = ({
                   }
                 ),
                 referenceElements,
-                showCrosshair && crosshairX !== null && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+                showCrosshair && activeIndex !== null && seriesPaths[0]?.points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
                   "line",
                   {
-                    x1: crosshairX,
+                    x1: seriesPaths[0].points[activeIndex].x,
                     y1: 0,
-                    x2: crosshairX,
+                    x2: seriesPaths[0].points[activeIndex].x,
                     y2: chartHeight,
                     stroke: "currentColor",
                     strokeWidth: 1,
@@ -7542,30 +7557,60 @@ var LineChart = ({
                   const showSeriesDots = series.dot !== false;
                   if (!showSeriesDots) return null;
                   return points.map((point, pointIndex) => {
-                    const isHovered = hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex;
+                    const isActive = activeIndex === pointIndex;
                     const animateDots = animate && !isResponsive;
                     return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
                       "circle",
                       {
                         cx: point.x,
                         cy: point.y,
-                        r: isHovered ? CHART_DEFAULTS.line.activeDotRadius : CHART_DEFAULTS.line.dotRadius,
+                        r: isActive ? CHART_DEFAULTS.line.activeDotRadius : CHART_DEFAULTS.line.dotRadius,
                         fill: color,
                         stroke: "white",
                         strokeWidth: 2,
-                        className: "cursor-pointer transition-all duration-150",
+                        className: "transition-all duration-150",
                         style: {
                           opacity: animateDots ? 0 : 1,
                           animation: animateDots ? `fadeIn 200ms ease-out ${animationDuration + pointIndex * 20}ms forwards` : void 0
                         },
-                        onMouseEnter: (e) => handlePointEnter(e, seriesIndex, pointIndex),
-                        onMouseLeave: handlePointLeave,
-                        onClick: () => handlePointClick(seriesIndex, pointIndex)
+                        pointerEvents: "none"
                       },
                       `dot-${seriesIndex}-${pointIndex}`
                     );
                   });
                 }),
+                !showDots && activeIndex !== null && data.map((series, seriesIndex) => {
+                  const point = seriesPaths[seriesIndex]?.points[activeIndex];
+                  if (!point || activeIndex >= series.data.length) return null;
+                  const color = series.color || colors[seriesIndex % colors.length];
+                  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+                    "circle",
+                    {
+                      cx: point.x,
+                      cy: point.y,
+                      r: CHART_DEFAULTS.line.activeDotRadius,
+                      fill: color,
+                      stroke: "white",
+                      strokeWidth: 2,
+                      pointerEvents: "none"
+                    },
+                    `active-dot-${seriesIndex}`
+                  );
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+                  "rect",
+                  {
+                    x: 0,
+                    y: 0,
+                    width: chartWidth,
+                    height: chartHeight,
+                    fill: "transparent",
+                    onMouseMove: handleChartMouseMove,
+                    onMouseLeave: handleChartMouseLeave,
+                    onClick: handleChartClick,
+                    style: { cursor: "default" }
+                  }
+                ),
                 showValueLabels && data.map((series, seriesIndex) => {
                   const lastPoint = series.data[series.data.length - 1];
                   const { points } = seriesPaths[seriesIndex];
@@ -8174,8 +8219,9 @@ var AreaChart = ({
   ariaLabel
 }) => {
   const containerRef = (0, import_react34.useRef)(null);
+  const svgRef = (0, import_react34.useRef)(null);
   const chartId = (0, import_react34.useId)();
-  const [hoveredPoint, setHoveredPoint] = (0, import_react34.useState)(null);
+  const [activeIndex, setActiveIndex] = (0, import_react34.useState)(null);
   const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
   const {
     width,
@@ -8323,38 +8369,59 @@ var AreaChart = ({
     });
     return paths;
   }, [data, xScale, yScale, stacked, curved]);
-  const handlePointEnter = (0, import_react34.useCallback)((e, seriesIndex, pointIndex) => {
-    const series = data[seriesIndex];
-    const point = series.data[pointIndex];
-    setHoveredPoint({ seriesIndex, pointIndex });
-    if (showTooltip && containerRef.current) {
+  const handleChartMouseMove = (0, import_react34.useCallback)((e) => {
+    if (!svgRef.current || !containerRef.current || data.length === 0 || data[0].data.length === 0) return;
+    const svgElement = svgRef.current;
+    const point = svgElement.createSVGPoint();
+    point.x = e.clientX;
+    point.y = e.clientY;
+    const ctm = svgElement.getScreenCTM();
+    if (!ctm) return;
+    const svgPoint = point.matrixTransform(ctm.inverse());
+    const chartX = svgPoint.x - padding.left;
+    const firstSeriesPoints = areaPaths[0].points;
+    let nearestIndex = 0;
+    let minDist = Infinity;
+    for (let i = 0; i < firstSeriesPoints.length; i++) {
+      const dist = Math.abs(firstSeriesPoints[i].x - chartX);
+      if (dist < minDist) {
+        minDist = dist;
+        nearestIndex = i;
+      }
+    }
+    setActiveIndex(nearestIndex);
+    if (showTooltip) {
       const rect = containerRef.current.getBoundingClientRect();
       const mouseX = e.clientX - rect.left;
       const mouseY = e.clientY - rect.top;
-      const payload = [{
+      const tooltipPayload = data.filter((series) => nearestIndex < series.data.length).map((series, i) => ({
         name: series.name,
-        value: point.y,
-        color: series.color || colors[seriesIndex % colors.length],
-        payload: point
-      }];
+        value: series.data[nearestIndex].y,
+        color: series.color || colors[i % colors.length],
+        payload: series.data[nearestIndex]
+      }));
       showTooltipFn({
         x: mouseX,
         y: mouseY,
-        label: xFormatter(point.x),
-        payload
+        label: xFormatter(data[0].data[nearestIndex].x),
+        payload: tooltipPayload
       });
     }
-    onPointHover?.(point, seriesIndex, pointIndex);
-  }, [data, showTooltip, colors, xFormatter, showTooltipFn, onPointHover]);
-  const handlePointLeave = (0, import_react34.useCallback)(() => {
-    setHoveredPoint(null);
+    onPointHover?.(data[0].data[nearestIndex], 0, nearestIndex);
+  }, [data, areaPaths, padding, showTooltip, colors, xFormatter, showTooltipFn, onPointHover]);
+  const handleChartMouseLeave = (0, import_react34.useCallback)(() => {
+    setActiveIndex(null);
     hideTooltip();
     onPointHover?.(null, -1, -1);
   }, [hideTooltip, onPointHover]);
-  const handlePointClick = (0, import_react34.useCallback)((seriesIndex, pointIndex) => {
-    const point = data[seriesIndex].data[pointIndex];
-    onPointClick?.(point, seriesIndex, pointIndex);
-  }, [data, onPointClick]);
+  const handleChartClick = (0, import_react34.useCallback)(() => {
+    if (activeIndex === null || !onPointClick) return;
+    data.forEach((series, seriesIndex) => {
+      if (series.data[activeIndex]) {
+        onPointClick(series.data[activeIndex], seriesIndex, activeIndex);
+      }
+    });
+  }, [activeIndex, data, onPointClick]);
   const legendItems = (0, import_react34.useMemo)(
     () => data.map((series, i) => ({
       name: series.name,
@@ -8402,6 +8469,7 @@ var AreaChart = ({
         /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
           "svg",
           {
+            ref: svgRef,
             width: svgWidth,
             height: svgHeight,
             viewBox: `0 0 ${width} ${height}`,
@@ -8484,35 +8552,79 @@ var AreaChart = ({
                     )
                   ] }, `area-${seriesIndex}`);
                 }),
+                activeIndex !== null && areaPaths[0]?.points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                  "line",
+                  {
+                    x1: areaPaths[0].points[activeIndex].x,
+                    y1: 0,
+                    x2: areaPaths[0].points[activeIndex].x,
+                    y2: chartHeight,
+                    stroke: "currentColor",
+                    strokeWidth: 1,
+                    strokeDasharray: "4 4",
+                    className: "text-[hsl(var(--muted-foreground))]",
+                    pointerEvents: "none"
+                  }
+                ),
                 showDots && data.map((series, seriesIndex) => {
                   const { points } = areaPaths[seriesIndex];
                   const color = series.color || colors[seriesIndex % colors.length];
                   const showSeriesDots = series.dot !== false;
                   if (!showSeriesDots) return null;
                   return points.map((point, pointIndex) => {
-                    const isHovered = hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex;
+                    const isActive = activeIndex === pointIndex;
                     return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                       "circle",
                       {
                         cx: point.x,
                         cy: point.y,
-                        r: isHovered ? CHART_DEFAULTS.line.activeDotRadius : CHART_DEFAULTS.line.dotRadius,
+                        r: isActive ? CHART_DEFAULTS.line.activeDotRadius : CHART_DEFAULTS.line.dotRadius,
                         fill: color,
                         stroke: "white",
                         strokeWidth: 2,
-                        className: "cursor-pointer transition-all duration-150",
+                        className: "transition-all duration-150",
                         style: animate ? {
                           opacity: 0,
                           animation: `fadeIn 200ms ease-out ${animationDuration + pointIndex * 20}ms forwards`
                         } : void 0,
-                        onMouseEnter: (e) => handlePointEnter(e, seriesIndex, pointIndex),
-                        onMouseLeave: handlePointLeave,
-                        onClick: () => handlePointClick(seriesIndex, pointIndex)
+                        pointerEvents: "none"
                       },
                       `dot-${seriesIndex}-${pointIndex}`
                     );
                   });
                 }),
+                !showDots && activeIndex !== null && data.map((series, seriesIndex) => {
+                  const point = areaPaths[seriesIndex]?.points[activeIndex];
+                  if (!point || activeIndex >= series.data.length) return null;
+                  const color = series.color || colors[seriesIndex % colors.length];
+                  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                    "circle",
+                    {
+                      cx: point.x,
+                      cy: point.y,
+                      r: CHART_DEFAULTS.line.activeDotRadius,
+                      fill: color,
+                      stroke: "white",
+                      strokeWidth: 2,
+                      pointerEvents: "none"
+                    },
+                    `active-dot-${seriesIndex}`
+                  );
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                  "rect",
+                  {
+                    x: 0,
+                    y: 0,
+                    width: chartWidth,
+                    height: chartHeight,
+                    fill: "transparent",
+                    onMouseMove: handleChartMouseMove,
+                    onMouseLeave: handleChartMouseLeave,
+                    onClick: handleChartClick,
+                    style: { cursor: "default" }
+                  }
+                ),
                 showXAxis && /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("g", { transform: `translate(0, ${chartHeight})`, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                     "line",