@gemx-dev/heatmap-react 3.5.44 → 3.5.45

package/dist/esm/index.js

@@ -93,18 +93,37 @@ var IHeatmapType;
     IHeatmapType["Click"] = "click";
     IHeatmapType["Scroll"] = "scroll";
 })(IHeatmapType || (IHeatmapType = {}));
+var IClickType;
+(function (IClickType) {
+    IClickType["Total"] = "total-clicks";
+    IClickType["Rage"] = "rage-clicks";
+    IClickType["Dead"] = "dead-clicks";
+    IClickType["Error"] = "error-clicks";
+    IClickType["First"] = "first-clicks";
+    IClickType["Last"] = "last-clicks";
+})(IClickType || (IClickType = {}));
+var IScrollType;
+(function (IScrollType) {
+    IScrollType["Depth"] = "scroll-depth";
+    IScrollType["Attention"] = "attention-scroll";
+    IScrollType["Revenue"] = "revenue-scroll";
+})(IScrollType || (IScrollType = {}));
 
 const useHeatmapConfigStore = create()((set, get) => {
     return {
         mode: 'single',
         width: 1440,
         sidebarWidth: DEFAULT_SIDEBAR_WIDTH,
-        heatmapType: IHeatmapType.Click,
+        heatmapType: IHeatmapType.Scroll,
+        clickType: IClickType.Total,
+        scrollType: IScrollType.Depth,
         setMode: (mode) => set({ mode }),
         resetMode: () => set({ mode: 'single' }),
         setWidth: (width) => set({ width }),
         setSidebarWidth: (sidebarWidth) => set({ sidebarWidth }),
         setHeatmapType: (heatmapType) => set({ heatmapType }),
+        setClickType: (clickType) => set({ clickType }),
+        setScrollType: (scrollType) => set({ scrollType }),
     };
 });
 
@@ -113,11 +132,13 @@ const useHeatmapDataStore = create()((set, get) => {
         data: undefined,
         clickmap: undefined,
         dataInfo: undefined,
+        scrollmap: undefined,
         isRendering: true,
         setIsRendering: (isRendering) => set({ isRendering }),
         setDataInfo: (dataInfo) => set({ dataInfo }),
         setData: (data) => set({ data }),
         setClickmap: (clickmap) => set({ clickmap }),
+        setScrollmap: (scrollmap) => set({ scrollmap }),
     };
 });
 
@@ -145,6 +166,17 @@ const useHeatmapVizStore = create()((set, get) => {
     };
 });
 
+const useHeatmapVizScrollmapStore = create()((set, get) => {
+    return {
+        zones: [],
+        hoveredZone: null,
+        showMinimap: true,
+        setZones: (zones) => set({ zones }),
+        setHoveredZone: (hoveredZone) => set({ hoveredZone }),
+        setShowMinimap: (showMinimap) => set({ showMinimap }),
+    };
+});
+
 const initialState = {
     payloads: [],
     htmlContent: '',
@@ -219,16 +251,25 @@ const useRegisterData = (data, dataInfo) => {
     }, [dataInfo]);
 };
 
-const useRegisterHeatmap = (clickmap) => {
+const useRegisterHeatmap = ({ clickmap, scrollmap }) => {
     const setClickmap = useHeatmapDataStore((state) => state.setClickmap);
+    const setScrollmap = useHeatmapDataStore((state) => state.setScrollmap);
     const handleSetClickmap = useCallback((clickmap) => {
         if (!clickmap)
             return;
         setClickmap(clickmap);
     }, [clickmap]);
+    const handleSetScrollmap = useCallback((scrollmap) => {
+        if (!scrollmap)
+            return;
+        setScrollmap(scrollmap);
+    }, [scrollmap]);
     useEffect(() => {
         handleSetClickmap(clickmap);
     }, [clickmap]);
+    useEffect(() => {
+        handleSetScrollmap(scrollmap);
+    }, [scrollmap]);
 };
 
 const PADDING = 0;
@@ -1246,8 +1287,6 @@ const debounce = (fn, delay) => {
     };
 };
 
-// ===================== CONSTANTS =====================
-const HEATMAP_ELEMENT_ATTRIBUTE = 'data-clarity-hashalpha'; // Hoặc attribute bạn đang dùng
 // ===================== UTILITY FUNCTIONS =====================
 /**
  * Lấy bounding box tuyệt đối của element (relative to document)
@@ -1290,74 +1329,6 @@ function getElementsAtPoint(documentOrShadowRoot, x, y, filterFunction, visitedS
     }
     return elementsAtPoint;
 }
-// ===================== MAIN HOOK =====================
-function useHeatmapMouseHandler(props) {
-    const { heatmapWrapperRef, iframeRef, parentRef, heatmapInfo, scaleRatio, onElementHover } = props;
-    const handleMouseMove = useCallback((event) => {
-        // Kiểm tra tất cả refs và data cần thiết
-        if (!heatmapWrapperRef?.current ||
-            !iframeRef?.current ||
-            !iframeRef.current.contentDocument ||
-            !heatmapInfo?.elementMapInfo ||
-            !parentRef?.current) {
-            return;
-        }
-        try {
-            // Tính toán scroll position (đã scale)
-            const scrollTop = parentRef.current.scrollTop / scaleRatio;
-            console.log(`🚀 🐥 ~ useHeatmapMouseHandler ~ scrollTop:`, scrollTop);
-            // Lấy vị trí của heatmap wrapper
-            const wrapperRect = heatmapWrapperRef.current.getBoundingClientRect();
-            // Tính toán tọa độ chuột trong iframe (đã scale)
-            const mouseX = (event.clientX - wrapperRect.left) / scaleRatio;
-            const mouseY = (event.clientY - wrapperRect.top) / scaleRatio - scrollTop;
-            // Tìm elements tại vị trí chuột
-            const elementsAtPoint = getElementsAtPoint(iframeRef.current.contentDocument, Math.round(mouseX), Math.round(mouseY), 
-            // Filter: chỉ lấy elements có heatmap attribute
-            (element) => element.hasAttribute(HEATMAP_ELEMENT_ATTRIBUTE));
-            if (!elementsAtPoint || elementsAtPoint.length === 0) {
-                return;
-            }
-            // Duyệt qua các elements tìm được
-            for (let i = 0; i < elementsAtPoint.length; i++) {
-                const element = elementsAtPoint[i];
-                // Lấy hash/id của element
-                const elementHash = element.getAttribute(HEATMAP_ELEMENT_ATTRIBUTE);
-                // Kiểm tra element có data trong heatmapInfo không
-                if (elementHash && heatmapInfo.elementMapInfo[elementHash]) {
-                    const elementData = heatmapInfo.elementMapInfo[elementHash];
-                    // Lấy bounding box của element
-                    const boundingBox = getBoundingBox(element);
-                    if (boundingBox) {
-                        // Tính rank của element
-                        const rank = Array.isArray(heatmapInfo.sortedElements) && elementData
-                            ? heatmapInfo.sortedElements.indexOf(elementData) + 1
-                            : NaN;
-                        // Callback với thông tin element
-                        onElementHover({
-                            ...boundingBox,
-                            // Giới hạn width không vượt quá width của heatmap
-                            width: Math.min(boundingBox.width, heatmapInfo.width || 0),
-                            // Adjust top position với scroll
-                            top: boundingBox.top + scrollTop,
-                            // Metadata
-                            hash: elementHash,
-                            clicks: elementData.totalclicks,
-                            rank: rank,
-                            selector: elementData.selector || '',
-                        });
-                        // Dừng loop khi tìm thấy element hợp lệ đầu tiên
-                        break;
-                    }
-                }
-            }
-        }
-        catch (error) {
-            console.warn('Error handling mouse move on heatmap:', error);
-        }
-    }, [heatmapWrapperRef, iframeRef, parentRef, heatmapInfo, scaleRatio, onElementHover]);
-    return { handleMouseMove };
-}
 // ===================== EXAMPLE USAGE =====================
 /*
 import { useRef, useState } from 'react';
@@ -2118,6 +2089,135 @@ const useWrapperRefHeight = (props) => {
     return {};
 };
 
+const useZonePositions = (options) => {
+    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const getZonePosition = useCallback((zone) => {
+        if (!iframeHeight) {
+            return null;
+        }
+        const startYPx = (zone.startY / 100) * iframeHeight;
+        const heightPx = ((zone.endY - zone.startY) / 100) * iframeHeight;
+        return {
+            top: startYPx,
+            height: heightPx,
+        };
+    }, [iframeHeight]);
+    return {
+        getZonePosition,
+    };
+};
+
+const SCROLL_GRADIENT_COLORS = [
+    [255, 0, 0], // Red
+    [255, 255, 0], // Yellow
+    [0, 255, 0], // Green
+];
+const useScrollmapZones = (options) => {
+    const { mode = 'basic', enabled = true, iframeRef, wrapperRef } = options;
+    const [isReady, setIsReady] = useState(false);
+    const [zones, setZones] = useState([]);
+    const scrollmap = useHeatmapDataStore((state) => state.scrollmap);
+    const scrollMapInfo = useHeatmapDataStore((state) => state.dataInfo?.scrollMapInfo);
+    const { getZonePosition } = useZonePositions();
+    const maxUsers = useMemo(() => {
+        if (!scrollmap || scrollmap.length === 0)
+            return 100;
+        return Math.max(...scrollmap.map((d) => d.percUsers));
+    }, [scrollmap]);
+    const createZones = useCallback((data) => {
+        if (mode === 'basic') {
+            const breakpoints = [0, 25, 50, 75, 100];
+            const zones = [];
+            for (let i = 0; i < breakpoints.length - 1; i++) {
+                const startY = breakpoints[i];
+                const endY = breakpoints[i + 1];
+                const pointsInRange = data.filter((d) => d.scrollReachY >= startY && d.scrollReachY < endY);
+                const avgUsers = pointsInRange.length > 0
+                    ? pointsInRange.reduce((sum, p) => sum + p.percUsers, 0) / pointsInRange.length
+                    : 0;
+                zones.push({
+                    id: `zone_${startY}_${endY}`,
+                    startY,
+                    endY,
+                    percUsers: avgUsers,
+                    label: `${startY}% - ${endY}%`,
+                });
+            }
+            return zones;
+        }
+        else {
+            // Metrics mode: 20 zones (5% intervals)
+            const zones = [];
+            const interval = 5;
+            // Prepare metrics map
+            let metricsMap;
+            if (scrollMapInfo && Object.keys(scrollMapInfo).length > 0) {
+                metricsMap = new Map();
+                Object.entries(scrollMapInfo).forEach(([key, value]) => {
+                    metricsMap.set(Number(key), value);
+                });
+            }
+            for (let i = 0; i < 100; i += interval) {
+                const startY = i;
+                const endY = i + interval;
+                const point = data.find((d) => d.scrollReachY === startY) || {
+                    scrollReachY: startY,
+                    cumulativeSum: 0,
+                    percUsers: 0,
+                };
+                const metrics = metricsMap?.get(startY);
+                zones.push({
+                    id: `zone_${startY}_${endY}`,
+                    startY,
+                    endY,
+                    percUsers: point.percUsers,
+                    metrics,
+                    label: `${startY}% - ${endY}%`,
+                });
+            }
+            return zones;
+        }
+    }, [mode, scrollMapInfo]);
+    /**
+     * Initialize zones
+     */
+    useEffect(() => {
+        if (!enabled || !scrollmap || scrollmap.length === 0) {
+            setIsReady(false);
+            return;
+        }
+        try {
+            const newZones = createZones(scrollmap);
+            setZones(newZones);
+            setIsReady(true);
+            console.log(`[useScrollmap] Created ${newZones.length} zones in ${mode} mode`);
+        }
+        catch (error) {
+            console.error('[useScrollmap] Error:', error);
+            setIsReady(false);
+        }
+    }, [enabled, scrollmap, mode, createZones]);
+    return {
+        zones,
+        isReady,
+        maxUsers,
+        getZonePosition,
+    };
+};
+/**
+ * Get scroll gradient color for minimap
+ */
+const getScrollGradientColor = (normalized) => {
+    const idx = Math.min(Math.floor(normalized * 2), 1);
+    const [r1, g1, b1] = SCROLL_GRADIENT_COLORS[idx];
+    const [r2, g2, b2] = SCROLL_GRADIENT_COLORS[idx + 1];
+    const localPercent = (normalized * 2) % 1;
+    const r = Math.round(r1 + (r2 - r1) * localPercent);
+    const g = Math.round(g1 + (g2 - g1) * localPercent);
+    const b = Math.round(b1 + (b2 - b1) * localPercent);
+    return `rgb(${r}, ${g}, ${b})`;
+};
+
 const BoxStack = forwardRef(({ children, ...props }, ref) => {
     const id = props.id;
     const flexDirection = props.flexDirection;
@@ -2222,113 +2322,11 @@ const useClickmap = () => {
     return { start };
 };
 
-const DATA_SCROLLMAP = [
-    {
-        scrollReachY: 5,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 10,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 15,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 20,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 25,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 30,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 35,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 40,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 45,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 50,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 55,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 60,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 65,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 70,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 75,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 80,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 85,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 90,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 95,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-    {
-        scrollReachY: 100,
-        cumulativeSum: 0,
-        percUsers: 0,
-    },
-];
 const useScrollmap = () => {
     const vizRef = useHeatmapSingleStore((state) => state.vizRef);
+    const scrollmap = useHeatmapDataStore((state) => state.scrollmap);
     const start = useCallback(() => {
         // if (isInitialized) return;
-        const scrollmap = DATA_SCROLLMAP;
         if (!vizRef || !scrollmap || scrollmap.length === 0)
             return;
         try {
@@ -2339,11 +2337,11 @@ const useScrollmap = () => {
         catch (error) {
             console.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
         }
-    }, [vizRef]);
+    }, [vizRef, scrollmap]);
     return { start };
 };
 
-const useHeatmapVizCanvas = () => {
+const useHeatmapCanvas = ({ iframeRef, }) => {
     const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
     const { start: startClickmap } = useClickmap();
     const { start: startScrollmap } = useScrollmap();
@@ -2353,7 +2351,7 @@ const useHeatmapVizCanvas = () => {
                 startClickmap();
                 break;
             case IHeatmapType.Scroll:
-                startClickmap();
+                startScrollmap();
                 break;
         }
     }, [heatmapType, startClickmap, startScrollmap]);
@@ -2485,8 +2483,7 @@ const ELEMENT_CALLOUT = {
 };
 const HeatmapElements = (props) => {
     const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
-    const setHoveredElement = useHeatmapInteractionStore((state) => state.setHoveredElement);
-    const { iframeRef, wrapperRef, visualRef, visualizer, iframeDimensions, isElementSidebarOpen, isVisible = true, areDefaultRanksHidden, isSecondary, ...rest } = props;
+    const { iframeRef, wrapperRef, visualRef, visualizer, iframeDimensions, isElementSidebarOpen, isVisible = true, areDefaultRanksHidden, isSecondary, } = props;
     const getRect = useHeatmapElementPosition({
         iframeRef,
         wrapperRef,
@@ -2500,27 +2497,6 @@ const HeatmapElements = (props) => {
         iframeRef,
         getRect,
     });
-    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
-    useHeatmapMouseHandler({
-        heatmapWrapperRef: wrapperRef,
-        iframeRef,
-        parentRef: visualRef,
-        heatmapInfo: heatmapInfo || {},
-        scaleRatio: 0.8, // 80% zoom
-        onElementHover: (info) => {
-            setHoveredElement({
-                hash: info.hash,
-                clicks: info.clicks,
-                rank: info.rank,
-                selector: info.selector,
-                top: info.top,
-                left: info.left,
-                width: info.width,
-                height: info.height,
-            });
-            console.log(`🚀 🐥 ~ HeatmapElements ~ info:`, info);
-        },
-    });
     useElementCalloutVisible({
         visualRef,
         getRect,
@@ -2576,6 +2552,293 @@ const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
         } }));
 };
 
+const AverageFoldLine = ({ iframeRef, wrapperRef }) => {
+    const averageFold = useHeatmapDataStore((state) => state.dataInfo?.averageFold || 50);
+    const { getZonePosition } = useZonePositions();
+    const position = getZonePosition({
+        startY: averageFold,
+        endY: averageFold,
+    });
+    if (!position)
+        return null;
+    return (jsx("div", { style: {
+            position: 'absolute',
+            top: `${position.top}px`,
+            left: 0,
+            width: '100%',
+            height: '2px',
+            backgroundColor: '#0078D4',
+            pointerEvents: 'none',
+            zIndex: 2,
+            boxShadow: '0 0 4px rgba(0,120,212,0.5)',
+            display: 'flex',
+            alignItems: 'center',
+        }, children: jsxs("div", { style: {
+                position: 'absolute',
+                padding: '8px',
+                backgroundColor: 'rgba(0, 120, 212, 0.9)',
+                color: 'white',
+                fontSize: '16px',
+                fontWeight: 600,
+                borderRadius: '4px',
+                whiteSpace: 'nowrap',
+                left: '12px',
+                minWidth: '120px',
+                textAlign: 'center',
+            }, children: ["Average fold - ", averageFold.toFixed(0), "%"] }) }));
+};
+
+const ScrollmapMarker = ({ iframeRef, wrapperRef }) => {
+    const scrollmap = useHeatmapDataStore((state) => state.scrollmap);
+    const scrollType = useHeatmapConfigStore((state) => state.scrollType);
+    const { getZonePosition } = useZonePositions();
+    if (!scrollmap || scrollmap.length === 0)
+        return null;
+    const findScrollPositionForUserPercent = (targetPercent) => {
+        for (let i = 0; i < scrollmap.length; i++) {
+            if (scrollmap[i].percUsers <= targetPercent) {
+                if (i > 0) {
+                    return scrollmap[i - 1].scrollReachY;
+                }
+                return scrollmap[i].scrollReachY;
+            }
+        }
+        return scrollmap[scrollmap.length - 1]?.scrollReachY || null;
+    };
+    const boundaries = [
+        { percent: 75, label: '75%', color: '#10B981' },
+        { percent: 50, label: '50%', color: '#F59E0B' },
+        { percent: 25, label: '25%', color: '#EF4444' },
+        { percent: 5, label: '5%', color: '#8B5CF6' },
+    ];
+    const isScrollDepth = scrollType === IScrollType.Depth;
+    if (!isScrollDepth)
+        return null;
+    return (jsx(Fragment, { children: boundaries.map((boundary) => {
+            const scrollY = findScrollPositionForUserPercent(boundary.percent);
+            if (scrollY === null)
+                return null;
+            const position = getZonePosition({
+                startY: scrollY,
+                endY: scrollY,
+            });
+            if (!position)
+                return null;
+            return (jsx("div", { className: `marker-boundary-line-${boundary.percent}`, style: {
+                    position: 'absolute',
+                    top: `${position.top}px`,
+                    left: 0,
+                    transformOrigin: 'left center',
+                    width: '100%',
+                    height: '0px',
+                    // borderBottom: `2px dashed #323130`,
+                    borderBottom: `2px solid ${boundary.color}`,
+                    // background: 'repeating-linear-gradient(90deg, #323130, transparent 2px 3px)',
+                    zIndex: 1,
+                    display: 'flex',
+                    alignItems: 'center',
+                }, children: jsx("div", { style: {
+                        position: 'absolute',
+                        padding: '8px',
+                        backgroundColor: boundary.color,
+                        color: 'white',
+                        fontSize: '16px',
+                        fontWeight: 600,
+                        borderRadius: '4px',
+                        whiteSpace: 'nowrap',
+                        left: '12px',
+                        minWidth: '120px',
+                        textAlign: 'center',
+                        // textAlign: 'center',
+                        // padding: '8px',
+                        // paddingInline: '8px',
+                        // fontSize: '16px',
+                        // background: '#fff',
+                        // width: 'auto',
+                        // borderRadius: '4px',
+                        // position: 'absolute',
+                        // left: '12px',
+                        // minWidth: '120px',
+                    }, children: boundary.label }) }, boundary.label));
+        }) }));
+};
+
+const ScrollMapMinimap = ({ zones, maxUsers }) => {
+    const showMinimap = useHeatmapVizScrollmapStore((state) => state.showMinimap);
+    const scrollType = useHeatmapConfigStore((state) => state.scrollType);
+    const isScrollType = [IScrollType.Attention].includes(scrollType);
+    if (!showMinimap || !isScrollType)
+        return null;
+    return (jsx("div", { style: {
+            position: 'fixed',
+            left: '20px',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            width: '60px',
+            height: '400px',
+            backgroundColor: 'white',
+            borderRadius: '8px',
+            boxShadow: '0 4px 16px rgba(0,0,0,0.15)',
+            zIndex: 10002,
+            padding: '8px',
+            boxSizing: 'border-box',
+        }, children: jsx("div", { style: {
+                width: '100%',
+                height: '100%',
+                borderRadius: '4px',
+                overflow: 'hidden',
+                display: 'flex',
+                flexDirection: 'column',
+            }, children: zones.map((zone) => {
+                const normalized = maxUsers > 0 ? zone.percUsers / maxUsers : 0;
+                const color = getScrollGradientColor(normalized);
+                return (jsx("div", { title: `${zone.label}: ${zone.percUsers.toFixed(2)}%`, style: {
+                        width: '100%',
+                        flex: `${zone.endY - zone.startY}`,
+                        backgroundColor: color,
+                        borderBottom: '1px solid rgba(255,255,255,0.2)',
+                    } }, zone.id));
+            }) }) }));
+};
+
+const ScrollZoneTooltip = ({ zone, position, currentScrollPercent, scrollmap, }) => {
+    const tooltipRef = useRef(null);
+    const currentData = useMemo(() => {
+        if (!scrollmap || scrollmap.length === 0)
+            return null;
+        const roundedPercent = Math.floor(currentScrollPercent);
+        return scrollmap.find((d) => d.scrollReachY === roundedPercent) || null;
+    }, [scrollmap, currentScrollPercent]);
+    return (jsxs("div", { id: "gx-hm-scrollmap-tooltip", ref: tooltipRef, style: {
+            position: 'fixed',
+            top: `${position.y}px`,
+            backgroundColor: 'black',
+            zIndex: 10001,
+            pointerEvents: 'none',
+            width: '100%',
+            height: '2px',
+        }, children: [jsxs("div", { style: {
+                    position: 'absolute',
+                    left: '50%',
+                    top: '-50%',
+                    transform: 'translate(-50%, -50%)',
+                    padding: '16px',
+                    borderRadius: '8px',
+                    boxShadow: '0 4px 16px rgba(0,0,0,0.15)',
+                    fontSize: '14px',
+                    width: 'fit-content',
+                    backgroundColor: 'white',
+                    minWidth: '230px',
+                    display: 'flex',
+                    gap: '8px',
+                    alignItems: 'center',
+                }, children: [jsxs("p", { style: {
+                            fontWeight: 650,
+                            fontSize: '20px',
+                            lineHeight: '24px',
+                            letterSpacing: '-0.2px',
+                            verticalAlign: 'middle',
+                            fontVariantNumeric: 'tabular-nums',
+                        }, children: [currentData?.percUsers?.toFixed(2), "%", ' '] }), jsx("p", { style: { fontWeight: 450 }, children: "user scrolled this far" })] }), jsx(TooltipByZone, { zone: zone })] }));
+};
+const TooltipByZone = ({ zone }) => {
+    const scrollType = useHeatmapConfigStore((state) => state.scrollType);
+    if (!zone)
+        return null;
+    const contentMarkup = () => {
+        switch (scrollType) {
+            case IScrollType.Depth:
+                return jsx(BasicTooltipContent, { zone: zone });
+            case IScrollType.Attention:
+                return jsx(MetricsTooltipContent, { zone: zone });
+            default:
+                return jsx(BasicTooltipContent, { zone: zone });
+        }
+    };
+    return (jsx("div", { style: { paddingTop: '12px', borderTop: '1px solid #E5E7EB' }, children: contentMarkup() }));
+};
+const BasicTooltipContent = ({ zone }) => {
+    if (!zone)
+        return null;
+    return (jsxs(Fragment, { children: [jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: zone.label }), jsxs("div", { style: { fontSize: '24px', fontWeight: 700, color: '#0078D4' }, children: [zone.percUsers.toFixed(2), "%"] }), jsx("div", { style: { fontSize: '12px', color: '#605E5C', marginTop: '4px' }, children: "of users reached this point" })] }));
+};
+const MetricsTooltipContent = ({ zone }) => {
+    if (!zone)
+        return null;
+    return (jsxs(Fragment, { children: [jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: zone.label }), jsxs("div", { style: { fontSize: '20px', fontWeight: 700, marginBottom: '8px' }, children: [zone.percUsers.toFixed(2), "% users"] }), zone.metrics && (jsxs("div", { style: { display: 'grid', gap: '6px', fontSize: '13px' }, children: [zone.metrics.revenue !== undefined && (jsx(MetricRow, { label: "Revenue", value: `$${zone.metrics.revenue.toFixed(2)}` })), zone.metrics.conversionRate !== undefined && (jsx(MetricRow, { label: "Conversion", value: `${zone.metrics.conversionRate.toFixed(2)}%` })), zone.metrics.orders !== undefined && (jsx(MetricRow, { label: "Orders", value: zone.metrics.orders.toString() }))] }))] }));
+};
+const MetricRow = ({ label, value }) => (jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [jsxs("span", { style: { color: '#605E5C' }, children: [label, ":"] }), jsx("span", { style: { fontWeight: 600 }, children: value })] }));
+
+const HoverZones = ({ iframeRef, wrapperRef, position, currentScrollPercent, }) => {
+    const scrollmap = useHeatmapDataStore((state) => state.scrollmap);
+    // const hoveredZone = useHeatmapVizScrollmapStore((state) => state.hoveredZone);
+    // const setHoveredZone = useHeatmapVizScrollmapStore((state) => state.setHoveredZone);
+    const { zones, isReady, maxUsers } = useScrollmapZones({
+        iframeRef,
+        wrapperRef,
+    });
+    if (!isReady || !zones.length)
+        return null;
+    if (!position)
+        return null;
+    return (jsxs(Fragment, { children: [jsx(ScrollZoneTooltip, { position: position, currentScrollPercent: currentScrollPercent, scrollmap: scrollmap || [] }), jsx(ScrollMapMinimap, { zones: zones, maxUsers: maxUsers })] }));
+};
+
+const ScrollMapOverlay = ({ wrapperRef, iframeRef }) => {
+    const overlayRef = useRef(null);
+    const [position, setPosition] = useState();
+    const [currentScrollPercent, setCurrentScrollPercent] = useState(0);
+    const widthScale = useHeatmapVizStore((state) => state.scale);
+    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const handleMouseMove = (event) => {
+        if (!iframeRef.current || !wrapperRef.current)
+            return;
+        const iframe = iframeRef.current;
+        const iframeRect = iframe.getBoundingClientRect();
+        const { x, y } = convertViewportToIframeCoords(event.clientX, event.clientY, iframeRect, widthScale);
+        const wrapperEl = wrapperRef.current;
+        const scrollOffset = (wrapperEl?.scrollTop || 0) / widthScale;
+        const actualY = y + scrollOffset;
+        const scrollPercent = Math.min(100, Math.max(0, (actualY / iframeHeight) * 100));
+        setCurrentScrollPercent(scrollPercent);
+        setPosition({ x, y });
+    };
+    const onMouseMove = useCallback((event) => {
+        requestAnimationFrame(() => handleMouseMove(event));
+    }, [handleMouseMove]);
+    const onMouseLeave = () => {
+        requestAnimationFrame(() => {
+            setCurrentScrollPercent(0);
+            setPosition(undefined);
+        });
+    };
+    return (jsx("div", { ref: overlayRef, id: "gx-hm-scrollmap-overlay", onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: `${iframeHeight}px`,
+            zIndex: 3,
+        }, children: jsx(HoverZones, { position: position, currentScrollPercent: currentScrollPercent, iframeRef: iframeRef, wrapperRef: wrapperRef }) }));
+};
+
+const SCROLL_TYPES = [IHeatmapType.Scroll];
+const VizScrollMap = ({ iframeRef, wrapperRef }) => {
+    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
+    const isHeatmapScroll = SCROLL_TYPES.includes(heatmapType);
+    if (!iframeHeight || !isHeatmapScroll)
+        return null;
+    return (jsxs("div", { style: {
+            position: 'absolute',
+            top: 0,
+            left: '2px',
+            width: `calc(100% - 4px)`,
+            height: '100%',
+            transform: 'translateZ(0)',
+        }, children: [jsx(ScrollmapMarker, { iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx(AverageFoldLine, { iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx(ScrollMapOverlay, { wrapperRef: wrapperRef, iframeRef: iframeRef })] }));
+};
+
 const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHeight, onScroll, }) => {
     const contentWidth = useHeatmapConfigStore((state) => state.width);
     const widthScale = useHeatmapVizStore((state) => state.scale);
@@ -2610,6 +2873,7 @@ const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHe
 
 const VizDomRenderer = ({ mode = 'heatmap' }) => {
     const width = useHeatmapConfigStore((state) => state.width);
+    const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
     const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
     const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
     const setSelectedElement = useHeatmapInteractionStore((state) => state.setSelectedElement);
@@ -2627,7 +2891,7 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
         const scrollTop = e.currentTarget.scrollTop;
         handleScroll(scrollTop);
     };
-    useHeatmapVizCanvas();
+    useHeatmapCanvas({ iframeRef: iframeRef });
     const cleanUp = () => {
         setIframeHeight(0);
         setSelectedElement(null);
@@ -2635,7 +2899,7 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
     useEffect(() => {
         return cleanUp;
     }, []);
-    return (jsxs(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, onScroll: onScroll, iframeHeight: iframeHeight, children: [jsx(VizElements, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef }), jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, scrolling: "no" })] }));
+    return (jsxs(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, onScroll: onScroll, iframeHeight: iframeHeight, children: [heatmapType === IHeatmapType.Click && (jsx(VizElements, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef })), jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, scrolling: "no" }), jsx(VizScrollMap, { iframeRef: iframeRef, wrapperRef: visualRef })] }));
 };
 
 const VizLoading = () => {
@@ -2742,10 +3006,10 @@ const WrapperLayout = () => {
     return (jsxs(BoxStack, { id: "gx-hm-layout", flexDirection: "column", flex: "1", children: [jsx(ContentTopBar, {}), jsx(WrapperPreview, {})] }));
 };
 
-const HeatmapLayout = ({ data, clickmap, controls, dataInfo, }) => {
+const HeatmapLayout = ({ data, clickmap, scrollmap, controls, dataInfo, }) => {
     useRegisterControl(controls);
     useRegisterData(data, dataInfo);
-    useRegisterHeatmap(clickmap);
+    useRegisterHeatmap({ clickmap, scrollmap });
     useRegisterConfig();
     return (jsx(BoxStack, { id: "gx-hm-project", flexDirection: "column", flex: "1", height: "100%", style: getVariableStyle(), children: jsx(BoxStack, { id: "gx-hm-project-content", flexDirection: "column", flex: "1", children: jsx("div", { style: {
                     minHeight: '100%',
@@ -2760,4 +3024,4 @@ const HeatmapLayout = ({ data, clickmap, controls, dataInfo, }) => {
     }
 };
 
-export { GraphView, HeatmapLayout, IHeatmapType, useHeatmapConfigStore, useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapLiveStore, useHeatmapVizStore };
+export { GraphView, HeatmapLayout, IClickType, IHeatmapType, IScrollType, useHeatmapConfigStore, useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapLiveStore, useHeatmapVizStore };