@gemx-dev/heatmap-react 3.5.44 → 3.5.46

package/src/components/VizScrollmap/AverageFoldLine.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useZonePositions } from '../../hooks';
+import { useHeatmapDataStore } from '../../stores';
+
+interface AverageFoldLineProps {
+  iframeRef: React.RefObject<HTMLIFrameElement>;
+  wrapperRef: React.RefObject<HTMLElement>;
+}
+
+export const AverageFoldLine: React.FC<AverageFoldLineProps> = ({ iframeRef, wrapperRef }) => {
+  const averageFold = useHeatmapDataStore((state) => state.dataInfo?.averageFold || 50);
+
+  const { getZonePosition } = useZonePositions({ iframeRef, wrapperRef });
+
+  const position = getZonePosition({
+    startY: averageFold,
+    endY: averageFold,
+  });
+
+  if (!position) return null;
+
+  return (
+    <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',
+      }}
+    >
+      <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',
+        }}
+      >
+        Average fold - {averageFold.toFixed(0)}%
+      </div>
+    </div>
+  );
+};

package/src/components/VizScrollmap/HoverZones.tsx

@@ -0,0 +1,58 @@
+import { useScrollmapZones } from '../../hooks';
+import { useHeatmapDataStore } from '../../stores';
+import { IScrollMapPosition } from '../../types';
+import { ScrollMapMinimap } from './ScrollMapMinimap';
+import { ScrollZoneTooltip } from './ScrollZoneTooltip';
+
+interface HoverZonesProps {
+  wrapperRef: React.RefObject<HTMLElement>;
+  iframeRef: React.RefObject<HTMLIFrameElement>;
+  position?: IScrollMapPosition;
+  currentScrollPercent: number;
+}
+
+export const HoverZones: React.FC<HoverZonesProps> = ({
+  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 (
+    <>
+      {/* {zones.map((zone) => {
+        const position = getZonePosition(zone);
+        if (!position) return null;
+
+        return (
+          <ScrollZoneHoverArea
+            key={zone.id}
+            zone={zone}
+            position={position}
+            isHovered={hoveredZone?.id === zone.id}
+            onHoverChange={setHoveredZone}
+          />
+        );
+      })} */}
+
+      <ScrollZoneTooltip
+        position={position}
+        currentScrollPercent={currentScrollPercent}
+        scrollmap={scrollmap || []}
+      />
+
+      <ScrollMapMinimap zones={zones} maxUsers={maxUsers} />
+    </>
+  );
+};

package/src/components/VizScrollmap/ScrollMapMinimap.tsx

@@ -0,0 +1,64 @@
+import { getScrollGradientColor } from '../../hooks';
+import { useHeatmapConfigStore, useHeatmapVizScrollmapStore } from '../../stores';
+import { IScrollType, IScrollZone } from '../../types';
+
+interface ScrollMapMinimapProps {
+  zones: IScrollZone[];
+  maxUsers: number;
+}
+
+export const ScrollMapMinimap: React.FC<ScrollMapMinimapProps> = ({ 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 (
+    <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',
+      }}
+    >
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          borderRadius: '4px',
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        {zones.map((zone) => {
+          const normalized = maxUsers > 0 ? zone.percUsers / maxUsers : 0;
+          const color = getScrollGradientColor(normalized);
+
+          return (
+            <div
+              key={zone.id}
+              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)',
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/components/VizScrollmap/ScrollMapOverlay.tsx

@@ -0,0 +1,79 @@
+import { useCallback, useRef, useState } from 'react';
+import { convertViewportToIframeCoords } from '../../hooks';
+import { useHeatmapSingleStore, useHeatmapVizStore } from '../../stores';
+import { IScrollMapPosition } from '../../types';
+import { HoverZones } from './HoverZones';
+
+interface ScrollMapOverlayProps {
+  wrapperRef: React.RefObject<HTMLElement>;
+  iframeRef: React.RefObject<HTMLIFrameElement>;
+}
+
+export const ScrollMapOverlay: React.FC<ScrollMapOverlayProps> = ({ wrapperRef, iframeRef }) => {
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  const [position, setPosition] = useState<IScrollMapPosition>();
+  const [currentScrollPercent, setCurrentScrollPercent] = useState<number>(0);
+
+  const widthScale = useHeatmapVizStore((state) => state.scale);
+  const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+
+  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
+    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 as HTMLElement;
+    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: React.MouseEvent<HTMLDivElement>) => {
+      requestAnimationFrame(() => handleMouseMove(event));
+    },
+    [handleMouseMove],
+  );
+
+  const onMouseLeave = () => {
+    requestAnimationFrame(() => {
+      setCurrentScrollPercent(0);
+      setPosition(undefined);
+    });
+  };
+
+  return (
+    <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,
+      }}
+    >
+      <HoverZones
+        position={position}
+        currentScrollPercent={currentScrollPercent}
+        iframeRef={iframeRef}
+        wrapperRef={wrapperRef}
+      />
+    </div>
+  );
+};

package/src/components/VizScrollmap/ScrollZoneHoverArea.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { IScrollZone } from '../../types';
+
+interface ScrollZoneHoverAreaProps {
+  zone: IScrollZone;
+  position: { top: number; height: number };
+  isHovered: boolean;
+  onHoverChange: (zone: IScrollZone | null) => void;
+}
+
+export const ScrollZoneHoverArea: React.FC<ScrollZoneHoverAreaProps> = ({
+  zone,
+  position,
+  isHovered,
+  onHoverChange,
+}) => {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: `${position.top}px`,
+        left: 0,
+        width: '100%',
+        height: `${position.height}px`,
+        pointerEvents: 'auto',
+        cursor: 'pointer',
+        backgroundColor: isHovered ? 'rgba(0, 120, 212, 0.1)' : 'transparent',
+        transition: 'background-color 0.2s ease',
+        borderBottom: '1px dashed rgba(0, 120, 212, 0.2)',
+      }}
+      onMouseEnter={() => onHoverChange(zone)}
+      onMouseLeave={() => onHoverChange(null)}
+    />
+  );
+};

package/src/components/VizScrollmap/ScrollZoneTooltip.tsx

@@ -0,0 +1,146 @@
+import { useMemo, useRef } from 'react';
+import { useHeatmapConfigStore } from '../../stores';
+import { IScrollMapPosition, IScrollType, IScrollZone, ScrollMapPoint } from '../../types';
+
+interface ScrollZoneTooltipProps {
+  zone?: IScrollZone;
+  position: IScrollMapPosition;
+  currentScrollPercent: number;
+  scrollmap: ScrollMapPoint[];
+}
+
+export const ScrollZoneTooltip: React.FC<ScrollZoneTooltipProps> = ({
+  zone,
+  position,
+  currentScrollPercent,
+  scrollmap,
+}) => {
+  const tooltipRef = useRef<HTMLDivElement>(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 (
+    <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',
+      }}
+    >
+      <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',
+        }}
+      >
+        <p
+          style={{
+            fontWeight: 650,
+            fontSize: '20px',
+            lineHeight: '24px',
+            letterSpacing: '-0.2px',
+            verticalAlign: 'middle',
+            fontVariantNumeric: 'tabular-nums',
+          }}
+        >
+          {currentData?.percUsers?.toFixed(2)}%{' '}
+        </p>
+        <p style={{ fontWeight: 450 }}>user scrolled this far</p>
+      </div>
+
+      <TooltipByZone zone={zone} />
+    </div>
+  );
+};
+
+const TooltipByZone: React.FC<{ zone?: IScrollZone }> = ({ zone }) => {
+  const scrollType = useHeatmapConfigStore((state) => state.scrollType);
+  if (!zone) return null;
+
+  const contentMarkup = () => {
+    switch (scrollType) {
+      case IScrollType.Depth:
+        return <BasicTooltipContent zone={zone} />;
+      case IScrollType.Attention:
+        return <MetricsTooltipContent zone={zone} />;
+      default:
+        return <BasicTooltipContent zone={zone} />;
+    }
+  };
+  return (
+    <div style={{ paddingTop: '12px', borderTop: '1px solid #E5E7EB' }}>{contentMarkup()}</div>
+  );
+};
+
+const BasicTooltipContent: React.FC<{ zone?: IScrollZone }> = ({ zone }) => {
+  if (!zone) return null;
+
+  return (
+    <>
+      <div style={{ fontWeight: 600, marginBottom: '8px' }}>{zone.label}</div>
+      <div style={{ fontSize: '24px', fontWeight: 700, color: '#0078D4' }}>
+        {zone.percUsers.toFixed(2)}%
+      </div>
+      <div style={{ fontSize: '12px', color: '#605E5C', marginTop: '4px' }}>
+        of users reached this point
+      </div>
+    </>
+  );
+};
+
+const MetricsTooltipContent: React.FC<{ zone?: IScrollZone }> = ({ zone }) => {
+  if (!zone) return null;
+
+  return (
+    <>
+      <div style={{ fontWeight: 600, marginBottom: '8px' }}>{zone.label}</div>
+      <div style={{ fontSize: '20px', fontWeight: 700, marginBottom: '8px' }}>
+        {zone.percUsers.toFixed(2)}% users
+      </div>
+
+      {zone.metrics && (
+        <div style={{ display: 'grid', gap: '6px', fontSize: '13px' }}>
+          {zone.metrics.revenue !== undefined && (
+            <MetricRow label="Revenue" value={`$${zone.metrics.revenue.toFixed(2)}`} />
+          )}
+          {zone.metrics.conversionRate !== undefined && (
+            <MetricRow label="Conversion" value={`${zone.metrics.conversionRate.toFixed(2)}%`} />
+          )}
+          {zone.metrics.orders !== undefined && (
+            <MetricRow label="Orders" value={zone.metrics.orders.toString()} />
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+const MetricRow: React.FC<{ label: string; value: string }> = ({ label, value }) => (
+  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+    <span style={{ color: '#605E5C' }}>{label}:</span>
+    <span style={{ fontWeight: 600 }}>{value}</span>
+  </div>
+);

package/src/components/VizScrollmap/ScrollmapMarker.tsx

@@ -0,0 +1,106 @@
+import { useZonePositions } from '../../hooks';
+import { useHeatmapConfigStore, useHeatmapDataStore } from '../../stores';
+import { IScrollType } from '../../types';
+
+interface ScrollmapMarkerProps {
+  iframeRef: React.RefObject<HTMLIFrameElement>;
+  wrapperRef: React.RefObject<HTMLElement>;
+}
+
+export const ScrollmapMarker: React.FC<ScrollmapMarkerProps> = ({ iframeRef, wrapperRef }) => {
+  const scrollmap = useHeatmapDataStore((state) => state.scrollmap);
+  const scrollType = useHeatmapConfigStore((state) => state.scrollType);
+
+  const { getZonePosition } = useZonePositions({ iframeRef, wrapperRef });
+
+  if (!scrollmap || scrollmap.length === 0) return null;
+
+  const findScrollPositionForUserPercent = (targetPercent: number): number | null => {
+    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 (
+    <>
+      {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 (
+          <div
+            className={`marker-boundary-line-${boundary.percent}`}
+            key={boundary.label}
+            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',
+            }}
+          >
+            <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',
+              }}
+            >
+              {boundary.label}
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+};

package/src/components/VizScrollmap/VizScrollMap.tsx

@@ -0,0 +1,36 @@
+import { useHeatmapConfigStore, useHeatmapSingleStore } from '../../stores';
+import { IHeatmapType } from '../../types';
+import { AverageFoldLine } from './AverageFoldLine';
+import { ScrollmapMarker } from './ScrollmapMarker';
+import { ScrollMapOverlay } from './ScrollMapOverlay';
+
+interface VizScrollMapProps {
+  iframeRef: React.RefObject<HTMLIFrameElement>;
+  wrapperRef: React.RefObject<HTMLElement>;
+}
+
+const SCROLL_TYPES = [IHeatmapType.Scroll];
+export const VizScrollMap: React.FC<VizScrollMapProps> = ({ 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 (
+    <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: '2px',
+        width: `calc(100% - 4px)`,
+        height: '100%',
+        transform: 'translateZ(0)',
+      }}
+    >
+      <ScrollmapMarker iframeRef={iframeRef} wrapperRef={wrapperRef} />
+      <AverageFoldLine iframeRef={iframeRef} wrapperRef={wrapperRef} />
+      <ScrollMapOverlay wrapperRef={wrapperRef} iframeRef={iframeRef} />
+    </div>
+  );
+};

package/src/components/VizScrollmap/index.ts

@@ -0,0 +1 @@
+export * from './ScrollMapOverlay';

package/src/components/VizScrollmapV2/ScrollmapOverlay.css

@@ -0,0 +1,94 @@
+/* ScrollmapOverlay.css */
+
+.scrollmap-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+}
+
+/* Marker wrapper */
+.scrollmap-marker-wrapper {
+  position: absolute;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  pointer-events: none;
+}
+
+/* Marker lines */
+.scrollmap-marker-line {
+  flex: 1;
+  height: 2px;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Marker label base */
+.scrollmap-marker {
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Average Fold marker - distinctive color */
+.scrollmap-marker--avgfold {
+  background-color: #ff6b6b;
+  color: white;
+}
+
+/* Percentage markers - neutral color */
+.scrollmap-marker--percentage {
+  background-color: #4a90e2;
+  color: white;
+}
+
+/* Hover tooltip */
+.scrollmap-hover-tooltip {
+  position: absolute;
+  pointer-events: none;
+  z-index: 100;
+}
+
+.scrollmap-hover-tooltip-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 12px;
+  background-color: rgba(0, 0, 0, 0.85);
+  color: white;
+  border-radius: 6px;
+  font-size: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  max-height: 48px;
+}
+
+.scrollmap-hover-tooltip-percentage {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.scrollmap-hover-tooltip-label {
+  font-size: 11px;
+  opacity: 0.8;
+  line-height: 1.2;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .scrollmap-marker {
+    font-size: 10px;
+    padding: 3px 8px;
+  }
+
+  .scrollmap-hover-tooltip-content {
+    padding: 6px 10px;
+  }
+}