feat: implement weather radar component and update water resource data records. before river

2026-06-06 21:04:19 +02:00
parent 231961da19
commit ec540e056d
49 changed files with 1038 additions and 198 deletions
@@ -8,6 +8,11 @@ interface Props {
 export const Tooltip = ({ content, children }: Props) => {
  const [show, setShow] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const [positionStyle, setPositionStyle] = useState<React.CSSProperties>({
+    left: '50%',
+    transform: 'translateX(-50%)',
+  });

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
@@ -19,6 +24,45 @@ export const Tooltip = ({ content, children }: Props) => {
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

+  useEffect(() => {
+    if (!show) {
+      setPositionStyle({
+        left: '50%',
+        transform: 'translateX(-50%)',
+      });
+      return;
+    }
+
+    // Measure and adjust positioning to prevent overflow
+    const adjustPosition = () => {
+      if (tooltipRef.current) {
+        const rect = tooltipRef.current.getBoundingClientRect();
+        const windowWidth = window.innerWidth;
+        const padding = 12; // safety margin from screen edges
+
+        if (rect.right > windowWidth - padding) {
+          setPositionStyle({
+            right: '0px',
+            left: 'auto',
+            transform: 'none',
+          });
+        } else if (rect.left < padding) {
+          setPositionStyle({
+            left: '0px',
+            transform: 'none',
+          });
+        }
+      }
+    };
+
+    // Run adjustment immediately
+    adjustPosition();
+    
+    // Also adjust on resize
+    window.addEventListener('resize', adjustPosition);
+    return () => window.removeEventListener('resize', adjustPosition);
+  }, [show]);
+
  return (
    <div 
      ref={containerRef}
@@ -32,26 +76,28 @@ export const Tooltip = ({ content, children }: Props) => {
    >
      {children}
      {show && (
-        <div style={{
-          position: 'absolute',
-          bottom: '100%',
-          left: '50%',
-          transform: 'translateX(-50%)',
-          marginBottom: '8px',
-          backgroundColor: 'var(--bg-card)',
-          border: '1px solid var(--border-color)',
-          padding: '0.5rem 0.75rem',
-          borderRadius: '8px',
-          width: 'max-content',
-          maxWidth: '220px',
-          zIndex: 9999,
-          boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
-          color: 'var(--text-main)',
-          fontSize: '0.8rem',
-          lineHeight: 1.4,
-          textAlign: 'center',
-          pointerEvents: 'none'
-        }}>
+        <div 
+          ref={tooltipRef}
+          style={{
+            position: 'absolute',
+            bottom: '100%',
+            marginBottom: '8px',
+            backgroundColor: 'var(--bg-card)',
+            border: '1px solid var(--border-color)',
+            padding: '0.5rem 0.75rem',
+            borderRadius: '8px',
+            width: 'max-content',
+            maxWidth: '220px',
+            zIndex: 9999,
+            boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
+            color: 'var(--text-main)',
+            fontSize: '0.8rem',
+            lineHeight: 1.4,
+            textAlign: 'center',
+            pointerEvents: 'none',
+            ...positionStyle
+          }}
+        >
          {content}
        </div>
      )}