@gemx-dev/heatmap-react 3.5.45 → 3.5.46

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/{dist/esm/components/VizScrollmap/index.d.ts → src/components/VizScrollmap/index.ts}

@@ -1,2 +1 @@
 export * from './ScrollMapOverlay';
-//# sourceMappingURL=index.d.ts.map

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;
+  }
+}

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/{dist/esm/components/VizScrollmapV2/index.d.ts → src/components/VizScrollmapV2/index.ts}

@@ -1,2 +1 @@
 export * from './ScrollmapOverlayV2';
-//# sourceMappingURL=index.d.ts.map

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 {}
+}