@gemx-dev/heatmap-react 3.5.44 → 3.5.46

package/src/components/VizScrollmapV2/ScrollmapOverlayV2.tsx

@@ -0,0 +1,130 @@
+// 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/index.ts

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

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

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

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

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

package/src/configs/iframe.ts

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

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

package/src/configs/style.ts

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

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

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