@gemx-dev/heatmap-react 3.5.46 → 3.5.48

package/src/components/VizScrollmap/ScrollmapMarker.tsx

@@ -1,106 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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/VizScrollmapV2/ScrollmapOverlay.css

@@ -1,94 +0,0 @@
-/* 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;
-  }
-}

package/src/components/VizScrollmapV2/ScrollmapOverlayV2.tsx

@@ -1,130 +0,0 @@
-// ScrollmapOverlay.tsx
-import React, { useCallback, useState } from 'react';
-import { useHeatmapVizStore } from '../../stores';
-import { ScrollMapMarker, ScrollmapOverlayProps } from './scrollmap.types';
-import './ScrollmapOverlay.css';
-import { useScrollmapOverlayV2 } from './useScrollmapOverlay';
-
-export const ScrollmapOverlayV2: React.FC<ScrollmapOverlayProps> = ({
-  iframeRef,
-  wrapperRef,
-  enabled = true,
-}) => {
-  const [isHovering, setIsHovering] = useState(false);
-  const [mouseY, setMouseY] = useState(0);
-
-  const { isReady, markers, hoveredPercentage, setHoveredMouseY } = useScrollmapOverlayV2({
-    enabled,
-    iframeRef,
-    wrapperRef,
-  });
-
-  /**
-   * Handle mouse move - track position for hover tooltip
-   */
-  const handleMouseMove = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
-      const wrapper = wrapperRef.current;
-      if (!wrapper) return;
-
-      const rect = wrapper.getBoundingClientRect();
-      const relativeY = event.clientY - rect.top;
-
-      setIsHovering(true);
-      setMouseY(relativeY);
-      setHoveredMouseY(relativeY);
-    },
-    [wrapperRef, setHoveredMouseY],
-  );
-
-  /**
-   * Handle mouse leave - hide tooltip
-   */
-  const handleMouseLeave = useCallback(() => {
-    setIsHovering(false);
-    setMouseY(0);
-    setHoveredMouseY(null);
-  }, [setHoveredMouseY]);
-
-  if (!enabled || !isReady) {
-    return null;
-  }
-
-  return (
-    <div
-      className="scrollmap-overlay"
-      onMouseMove={handleMouseMove}
-      onMouseLeave={handleMouseLeave}
-    >
-      {/* Render markers */}
-      {markers.map((marker) => (
-        <ScrollmapMarker key={marker.id} marker={marker} />
-      ))}
-
-      {/* Hover tooltip */}
-      {isHovering && hoveredPercentage !== null && (
-        <ScrollmapHoverTooltip mouseY={mouseY} percentage={hoveredPercentage} />
-      )}
-    </div>
-  );
-};
-
-/**
- * Individual marker component
- */
-interface ScrollmapMarkerProps {
-  marker: ScrollMapMarker;
-}
-
-const ScrollmapMarker: React.FC<ScrollmapMarkerProps> = ({ marker }) => {
-  const widthScale = useHeatmapVizStore((state) => state.scale);
-
-  const markerStyle: React.CSSProperties = {
-    transform: `scale(${1 / widthScale})`,
-    transformOrigin: 'left',
-    top: marker.yPosition - 24, // Offset for label height
-    left: 0,
-  };
-
-  const markerClassName = `scrollmap-marker ${
-    marker.type === 'avgFold' ? 'scrollmap-marker--avgfold' : 'scrollmap-marker--percentage'
-  }`;
-
-  return (
-    <div className="scrollmap-marker-wrapper" style={markerStyle}>
-      <div className="scrollmap-marker-line" />
-      <div className={markerClassName}>
-        <span className="scrollmap-marker-label">{marker.label}</span>
-      </div>
-      <div className="scrollmap-marker-line" />
-    </div>
-  );
-};
-
-/**
- * Hover tooltip component
- */
-interface ScrollmapHoverTooltipProps {
-  mouseY: number;
-  percentage: number;
-}
-
-const ScrollmapHoverTooltip: React.FC<ScrollmapHoverTooltipProps> = ({ mouseY, percentage }) => {
-  const widthScale = useHeatmapVizStore((state) => state.scale);
-
-  const tooltipStyle: React.CSSProperties = {
-    transform: `scale(${1 / widthScale})`,
-    transformOrigin: 'left',
-    top: mouseY / widthScale - 24,
-    left: 0,
-  };
-
-  return (
-    <div className="scrollmap-hover-tooltip" style={tooltipStyle}>
-      <div className="scrollmap-hover-tooltip-content">
-        <span className="scrollmap-hover-tooltip-percentage">{percentage}%</span>
-        <span className="scrollmap-hover-tooltip-label">of users</span>
-      </div>
-    </div>
-  );
-};

package/src/components/VizScrollmapV2/scrollmap.types.ts

@@ -1,21 +0,0 @@
-// scrollmap.types.ts
-
-export interface ScrollMapDataPoint {
-  scrollReachY: number; // 0-100 (vị trí % trên trang)
-  cumulativeSum: number; // Tổng số users đến điểm này
-  percUsers: number; // % users đạt được (100 -> 0, giảm dần)
-}
-
-export interface ScrollMapMarker {
-  id: string;
-  type: 'avgFold' | 'percentage';
-  yPosition: number; // Vị trí pixel
-  label: string;
-  percentage?: number; // Chỉ có với type 'percentage'
-}
-
-export interface ScrollmapOverlayProps {
-  iframeRef: React.RefObject<HTMLIFrameElement>;
-  wrapperRef: React.RefObject<HTMLElement>;
-  enabled?: boolean;
-}

package/src/components/VizScrollmapV2/useScrollmapOverlay.ts

@@ -1,187 +0,0 @@
-// useScrollmapOverlay.ts
-import { useEffect, useMemo, useState } from 'react';
-import { useHeatmapDataStore, useHeatmapSingleStore, useHeatmapVizStore } from '../../stores';
-import { ScrollMapDataPoint, ScrollMapMarker } from './scrollmap.types';
-
-interface UseScrollmapOverlayOptions {
-  enabled?: boolean;
-  iframeRef: React.RefObject<HTMLIFrameElement>;
-  wrapperRef: React.RefObject<HTMLElement>;
-}
-
-interface UseScrollmapOverlayReturn {
-  isReady: boolean;
-  markers: ScrollMapMarker[];
-  averageFold: number;
-  hoveredPercentage: number | null;
-  setHoveredMouseY: (y: number | null) => void;
-}
-
-export const useScrollmapOverlayV2 = (
-  options: UseScrollmapOverlayOptions,
-): UseScrollmapOverlayReturn => {
-  const { enabled = true, iframeRef, wrapperRef } = options;
-
-  const [isReady, setIsReady] = useState(false);
-  const [hoveredMouseY, setHoveredMouseY] = useState<number | null>(null);
-
-  // Zustand stores
-  const scrollMapInfo = useHeatmapDataStore((state) => state.scrollmap);
-  const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
-  const widthScale = useHeatmapVizStore((state) => state.scale);
-
-  /**
-   * Tính Average Fold (vị trí mà 50% users scroll đến)
-   * Returns: pixel position
-   */
-  const averageFold = useMemo(() => {
-    if (!scrollMapInfo || scrollMapInfo.length === 0 || !iframeHeight) {
-      return 0;
-    }
-
-    // Total users = điểm đầu tiên (100% users)
-    const totalUsers = scrollMapInfo[0]?.percUsers || 100;
-    const halfUsers = totalUsers / 2;
-
-    // Tìm điểm đầu tiên có percUsers <= 50%
-    for (const point of scrollMapInfo) {
-      if (point.percUsers <= halfUsers) {
-        // Convert % sang pixel
-        return (point.scrollReachY / 100) * iframeHeight;
-      }
-    }
-
-    // Fallback: 50% chiều cao
-    return iframeHeight / 2;
-  }, [scrollMapInfo, iframeHeight]);
-
-  /**
-   * Tính Percentage Markers (75%, 50%, 25%)
-   * Tìm điểm gần nhất với mỗi target, trong khoảng ±5%
-   */
-  const percentageMarkers = useMemo(() => {
-    if (!scrollMapInfo || scrollMapInfo.length === 0 || !iframeHeight) {
-      return [];
-    }
-
-    const markers: ScrollMapMarker[] = [];
-    const targetPercentages = [75, 50, 25];
-
-    for (const targetPerc of targetPercentages) {
-      // Tìm điểm GẦN NHẤT với target percentage
-      const closestPoint = scrollMapInfo.reduce<ScrollMapDataPoint | null>((prev, curr) => {
-        if (prev === null) return curr;
-
-        const prevDiff = Math.abs(prev.percUsers - targetPerc);
-        const currDiff = Math.abs(curr.percUsers - targetPerc);
-
-        return currDiff < prevDiff ? curr : prev;
-      }, null);
-
-      // Chỉ thêm marker nếu điểm gần nhất nằm trong khoảng ±5%
-      if (
-        closestPoint &&
-        closestPoint.percUsers >= targetPerc - 5 &&
-        closestPoint.percUsers <= targetPerc + 5
-      ) {
-        const yPosition = (closestPoint.scrollReachY / 100) * iframeHeight;
-
-        markers.push({
-          id: `percentage_${targetPerc}`,
-          type: 'percentage',
-          yPosition,
-          label: `${targetPerc}%`,
-          percentage: targetPerc,
-        });
-      }
-    }
-
-    return markers;
-  }, [scrollMapInfo, iframeHeight]);
-
-  /**
-   * Combine tất cả markers (Average Fold + Percentage Markers)
-   */
-  const markers = useMemo(() => {
-    const allMarkers: ScrollMapMarker[] = [];
-
-    // Average Fold marker
-    if (averageFold > 0) {
-      allMarkers.push({
-        id: 'avgFold',
-        type: 'avgFold',
-        yPosition: averageFold,
-        label: 'Average Fold',
-      });
-    }
-
-    // Percentage markers
-    allMarkers.push(...percentageMarkers);
-
-    return allMarkers;
-  }, [averageFold, percentageMarkers]);
-
-  /**
-   * Tính % users tại vị trí hover
-   * Input: mouseY (pixel position from wrapper top)
-   * Output: percentage of users reached this position
-   */
-  const hoveredPercentage = useMemo(() => {
-    if (
-      hoveredMouseY === null ||
-      !scrollMapInfo ||
-      scrollMapInfo.length === 0 ||
-      !iframeHeight ||
-      !widthScale
-    ) {
-      return null;
-    }
-
-    // Tính % scroll position từ mouseY
-    const scrollPercent = (hoveredMouseY / widthScale / iframeHeight) * 100;
-
-    // Tìm điểm đầu tiên có scrollReachY >= scrollPercent
-    for (const point of scrollMapInfo) {
-      if (point.scrollReachY >= scrollPercent) {
-        // Tính % cumulative users
-        const percentage = (point.cumulativeSum / scrollMapInfo[0].cumulativeSum) * 100;
-        return Math.round(percentage * 10) / 10; // 1 decimal place
-      }
-    }
-
-    // Fallback: lấy điểm cuối cùng
-    const lastPoint = scrollMapInfo[scrollMapInfo.length - 1];
-    const percentage = (lastPoint.cumulativeSum / scrollMapInfo[0].cumulativeSum) * 100;
-    return Math.round(percentage * 10) / 10;
-  }, [hoveredMouseY, scrollMapInfo, iframeHeight, widthScale]);
-
-  /**
-   * Check if data is ready
-   */
-  useEffect(() => {
-    if (!enabled) {
-      setIsReady(false);
-      return;
-    }
-
-    if (scrollMapInfo && scrollMapInfo.length > 0 && iframeHeight) {
-      setIsReady(true);
-      console.log('[useScrollmapOverlay] Ready:', {
-        dataPoints: scrollMapInfo.length,
-        iframeHeight,
-        averageFold,
-        markers: markers.length,
-      });
-    } else {
-      setIsReady(false);
-    }
-  }, [enabled, scrollMapInfo, iframeHeight, averageFold, markers.length]);
-
-  return {
-    isReady,
-    markers,
-    averageFold,
-    hoveredPercentage,
-    setHoveredMouseY,
-  };
-};

package/src/components/index.tsx

@@ -1,2 +0,0 @@
-export { GraphView } from './GraphView';
-export { HeatmapLayout } from './Layout';

package/src/configs/iframe.ts

@@ -1,15 +0,0 @@
-interface IFrameAttrs {
-  id: string;
-  title: string;
-  sandbox: string;
-  scrolling: string;
-  height?: string;
-}
-
-export const HEATMAP_IFRAME: IFrameAttrs = {
-  id: 'clarity-iframe',
-  title: 'Clarity Session Replay',
-  sandbox: 'allow-same-origin allow-scripts',
-  scrolling: 'no',
-  height: '100%',
-};

package/src/configs/index.ts

@@ -1,2 +0,0 @@
-export * from './iframe';
-export * from './style';

package/src/configs/style.ts

@@ -1,21 +0,0 @@
-export const HEATMAP_CONFIG = {
-  padding: 8,
-  borderWidth: 1,
-  borderWidthIframe: 2,
-  borderColor: '#E3E3E3',
-  heightToolbar: 60, // height of the toolbar
-};
-
-export const HEATMAP_STYLE = {
-  viz: {
-    background: '#f3f3f3',
-    paddingBottom: `${HEATMAP_CONFIG.padding}px`,
-  },
-  wrapper: {
-    padding: `${HEATMAP_CONFIG.padding}px 0`,
-    paddingBlock: `${HEATMAP_CONFIG.padding}px`,
-    paddingInline: `${HEATMAP_CONFIG.padding}px`,
-  },
-};
-
-export const DEFAULT_SIDEBAR_WIDTH = 260;

package/src/constants/index.ts

@@ -1,4 +0,0 @@
-export const CLICKED_ELEMENT_ID = 'gx-hm-clicked-element';
-export const SECONDARY_CLICKED_ELEMENT_ID = 'gx-hm-secondary-clicked-element';
-export const HOVERED_ELEMENT_ID = 'gx-hm-hovered-element';
-export const SECONDARY_HOVERED_ELEMENT_ID = 'gx-hm-secondary-hovered-element';

package/src/global.d.ts

@@ -1,5 +0,0 @@
-/* eslint-disable @typescript-eslint/consistent-type-definitions */
-
-declare namespace JSX {
-  interface IntrinsicElements {}
-}