@stfrigerio/sito-template 0.1.34 → 0.1.35

package/dist/components/organisms/charts/MoodChart/MoodChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoodChart.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/charts/MoodChart/MoodChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAInE,UAAU,YAAY;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;CACnB;AAMD,UAAU,cAAc;IACpB,QAAQ,EAAE,YAAY,EAAE,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAClB;AAID,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAuL9C,CAAA"}
+{"version":3,"file":"MoodChart.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/charts/MoodChart/MoodChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAInE,UAAU,YAAY;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;CACnB;AAMD,UAAU,cAAc;IACpB,QAAQ,EAAE,YAAY,EAAE,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAClB;AAID,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoN9C,CAAA"}

package/dist/index.esm.js

@@ -3036,8 +3036,10 @@ var styles$7 = {"container":"MoodChart-module_container__MB1Vr","chart":"MoodCha
 const MoodChart = ({ moodData, width = 800, height = 400 }) => {
     const svgRef = useRef(null);
     const containerRef = useRef(null);
+    const tooltipRef = useRef(null);
     const [selectedMood, setSelectedMood] = useState(null);
     const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+    const [isHoveringTooltip, setIsHoveringTooltip] = useState(false);
     const margin = { top: 20, right: 20, bottom: 50, left: 40 };
     const chartWidth = width - margin.left - margin.right;
     const chartHeight = height - margin.top - margin.bottom;
@@ -3115,11 +3117,26 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
             .style('cursor', 'pointer')
             .on('mouseenter', (event, d) => {
             const rect = svgRef.current?.getBoundingClientRect();
-            if (rect) {
-                setTooltipPosition({
-                    x: event.clientX - rect.left + 20,
-                    y: event.clientY - rect.top - 10
-                });
+            const containerRect = containerRef.current?.getBoundingClientRect();
+            if (rect && containerRect) {
+                let x = event.clientX - rect.left + 10;
+                let y = event.clientY - rect.top - 10;
+                // Check if tooltip would overflow on the right
+                const estimatedTooltipWidth = 250; // Approximate tooltip width
+                const rightEdgeBuffer = 20; // Buffer from the right edge
+                if (x + estimatedTooltipWidth > chartWidth + margin.left - rightEdgeBuffer) {
+                    // Position tooltip to the left of the cursor, but keep it close
+                    x = event.clientX - rect.left - estimatedTooltipWidth - 10;
+                    // Ensure it doesn't go off the left edge
+                    if (x < 0) {
+                        x = 10;
+                    }
+                }
+                // Ensure tooltip doesn't go above the container
+                if (y < 0) {
+                    y = 10;
+                }
+                setTooltipPosition({ x, y });
             }
             setSelectedMood(d);
             d3.select(event.currentTarget)
@@ -3128,28 +3145,33 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
                 .attr('r', 8);
         })
             .on('mouseleave', (event) => {
-            // Use a timeout to ensure the event fires
+            // Add delay to allow mouse to move to tooltip
             setTimeout(() => {
-                setSelectedMood(null);
-            }, 0);
+                if (!isHoveringTooltip) {
+                    setSelectedMood(null);
+                }
+            }, 250);
             d3.select(event.currentTarget)
                 .transition()
                 .duration(200)
                 .attr('r', 5);
         });
-    }, [processedData, chartWidth, chartHeight, colorScale, margin]);
+    }, [processedData, chartWidth, chartHeight, colorScale, margin, isHoveringTooltip]);
     // Clean up tooltip on unmount
     useEffect(() => {
         return () => {
             setSelectedMood(null);
         };
     }, []);
-    return (jsxs("div", { className: styles$7.container, ref: containerRef, onMouseLeave: () => setSelectedMood(null), children: [jsx("svg", { ref: svgRef, width: width, height: height, className: styles$7.chart }), selectedMood && (jsxs("div", { className: styles$7.tooltip, style: {
+    return (jsxs("div", { className: styles$7.container, ref: containerRef, children: [jsx("svg", { ref: svgRef, width: width, height: height, className: styles$7.chart }), selectedMood && (jsxs("div", { ref: tooltipRef, className: styles$7.tooltip, style: {
                     position: 'absolute',
-                    pointerEvents: 'none',
+                    pointerEvents: 'auto',
                     left: tooltipPosition.x,
                     top: tooltipPosition.y,
                     zIndex: 1000
+                }, onMouseEnter: () => setIsHoveringTooltip(true), onMouseLeave: () => {
+                    setIsHoveringTooltip(false);
+                    setSelectedMood(null);
                 }, children: [jsxs("div", { className: styles$7.tooltipHeader, children: [jsx("div", { className: styles$7.tooltipDate, children: selectedMood.date.toLocaleDateString() }), jsxs("div", { className: styles$7.tooltipRating, children: [jsx("span", { className: styles$7.ratingValue, children: selectedMood.rating }), jsx("span", { className: styles$7.ratingMax, children: "/10" })] })] }), selectedMood.tags.length > 0 && (jsx("div", { className: styles$7.tooltipTags, children: selectedMood.tags.map((tag, index) => (jsx("span", { className: styles$7.tag, children: tag }, index))) })), selectedMood.comment && (jsx("div", { className: styles$7.tooltipComment, children: selectedMood.comment }))] }))] }));
 };