@gemx-dev/heatmap-react 3.5.44 → 3.5.46

package/src/hooks/viz-canvas/useAreamap.ts

@@ -0,0 +1,162 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { AreaMapData, AreaOverlayManagerV2 } from '../../helpers';
+import { useHeatmapDataStore } from '../../stores';
+import { IClusterArea } from '../../types';
+
+interface IAreamapReturn {
+  start: () => void;
+  clear: () => void;
+  refresh: () => void;
+  isInitialized: boolean;
+  areas: IClusterArea[];
+}
+
+interface IAreamapProps {
+  iframeRef: React.RefObject<HTMLIFrameElement>;
+}
+export const useAreamap = ({ iframeRef }: IAreamapProps): IAreamapReturn => {
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [areas, setAreas] = useState<IClusterArea[]>([]);
+
+  const clickmap = useHeatmapDataStore((state) => state.clickmap); // Area map data từ store
+
+  const managerRef = useRef<AreaOverlayManagerV2 | null>(null);
+  const resizeObserverRef = useRef<ResizeObserver | null>(null);
+
+  /**
+   * Start rendering area overlays
+   */
+  const start = useCallback(() => {
+    if (isInitialized) {
+      console.log('[useAreamap] Already initialized');
+      return;
+    }
+
+    const iframe = iframeRef?.current;
+    if (!iframe || !clickmap || clickmap.length === 0) {
+      console.warn('[useAreamap] Missing iframe or areamap data');
+      return;
+    }
+
+    try {
+      // Khởi tạo manager
+      if (!managerRef.current) {
+        managerRef.current = new AreaOverlayManagerV2(iframe);
+      }
+
+      managerRef.current.init();
+
+      // Transform data nếu cần
+      const areaMapData: AreaMapData = transformToAreaMapData(clickmap);
+
+      // Render areas
+      managerRef.current.render(areaMapData);
+      setAreas(managerRef.current.getAreas());
+      setIsInitialized(true);
+
+      // Setup resize observer để update positions khi iframe thay đổi
+      setupResizeObserver(iframe);
+
+      console.log('[useAreamap] Started successfully');
+    } catch (error) {
+      console.error('[useAreamap] Error:', error);
+    }
+  }, [iframeRef, clickmap, isInitialized]);
+
+  /**
+   * Clear all areas
+   */
+  const clear = useCallback(() => {
+    if (managerRef.current) {
+      managerRef.current.clear();
+      setAreas([]);
+      setIsInitialized(false);
+    }
+
+    cleanupResizeObserver();
+  }, []);
+
+  /**
+   * Refresh (re-render) areas
+   */
+  const refresh = useCallback(() => {
+    if (!managerRef.current || !clickmap) return;
+
+    const areaMapData: AreaMapData = transformToAreaMapData(clickmap);
+    managerRef.current.render(areaMapData);
+    setAreas(managerRef.current.getAreas());
+  }, [clickmap]);
+
+  /**
+   * Setup resize observer
+   */
+  const setupResizeObserver = (iframe: HTMLIFrameElement) => {
+    cleanupResizeObserver();
+
+    resizeObserverRef.current = new ResizeObserver(() => {
+      if (managerRef.current) {
+        // managerRef.current.updatePositions();
+      }
+    });
+
+    resizeObserverRef.current.observe(iframe);
+
+    // Observe iframe content document body
+    if (iframe.contentDocument?.body) {
+      resizeObserverRef.current.observe(iframe.contentDocument.body);
+    }
+  };
+
+  /**
+   * Cleanup resize observer
+   */
+  const cleanupResizeObserver = () => {
+    if (resizeObserverRef.current) {
+      resizeObserverRef.current.disconnect();
+      resizeObserverRef.current = null;
+    }
+  };
+
+  /**
+   * Cleanup on unmount
+   */
+  useEffect(() => {
+    return () => {
+      clear();
+      if (managerRef.current) {
+        managerRef.current.destroy();
+        managerRef.current = null;
+      }
+    };
+  }, []);
+
+  return {
+    start,
+    clear,
+    refresh,
+    isInitialized,
+    areas,
+  };
+};
+
+/**
+ * Transform raw areamap data to AreaMapData format
+ */
+function transformToAreaMapData(areamap: any[]): AreaMapData {
+  // Giả sử areamap có format tương tự clickmap
+  // Adjust theo format thực tế của bạn
+  const totalClicks = areamap.reduce((sum, item) => sum + (item.totalclicks || 0), 0);
+
+  return {
+    clickData: areamap.map((item) => ({
+      hash: item.hash || '',
+      clicks: item.clicks || [],
+      x: item.x || [],
+      y: item.y || [],
+      points: item.points || 0,
+      totalclicks: item.totalclicks || 0,
+      selector: item.selector || '',
+    })),
+    totalClicks,
+  };
+}

package/src/hooks/viz-canvas/useClickmap.ts

@@ -0,0 +1,24 @@
+import { useCallback, useState } from 'react';
+import { useHeatmapDataStore, useHeatmapSingleStore } from '../../stores';
+
+export const useClickmap = () => {
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  const clickmap = useHeatmapDataStore((state) => state.clickmap);
+  const vizRef = useHeatmapSingleStore((state) => state.vizRef);
+
+  const start = useCallback(() => {
+    if (isInitialized) return;
+    if (!vizRef || !clickmap || clickmap.length === 0) return;
+
+    try {
+      vizRef?.clearmap?.();
+      vizRef?.clickmap?.(clickmap);
+      setIsInitialized(true);
+    } catch (error) {
+      console.error(`🚀 🐥 ~ useClickmap ~ error:`, error);
+    }
+  }, [vizRef, clickmap]);
+
+  return { start };
+};

package/src/hooks/viz-canvas/useHeatmapCanvas.ts

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { useHeatmapConfigStore } from '../../stores';
+import { IHeatmapType } from '../../types';
+import { useClickmap } from './useClickmap';
+import { useScrollmap } from './useScrollmap';
+
+export const useHeatmapCanvas = ({
+  iframeRef,
+}: {
+  iframeRef: React.RefObject<HTMLIFrameElement>;
+}) => {
+  const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
+
+  const { start: startClickmap } = useClickmap();
+  const { start: startScrollmap } = useScrollmap();
+
+  useEffect(() => {
+    switch (heatmapType) {
+      case IHeatmapType.Click:
+        startClickmap();
+        break;
+      case IHeatmapType.Scroll:
+        startScrollmap();
+        break;
+    }
+  }, [heatmapType, startClickmap, startScrollmap]);
+};

package/src/hooks/viz-canvas/useScrollmap.ts

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+import { useHeatmapDataStore, useHeatmapSingleStore } from '../../stores';
+
+export const useScrollmap = () => {
+  const vizRef = useHeatmapSingleStore((state) => state.vizRef);
+  const scrollmap = useHeatmapDataStore((state) => state.scrollmap);
+
+  const start = useCallback(() => {
+    // if (isInitialized) return;
+
+    if (!vizRef || !scrollmap || scrollmap.length === 0) return;
+    try {
+      vizRef?.clearmap?.();
+      vizRef?.scrollmap?.(scrollmap);
+      // setIsInitialized(true);
+    } catch (error) {
+      console.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
+    }
+  }, [vizRef, scrollmap]);
+
+  return { start };
+};

package/src/hooks/viz-elements/index.ts

@@ -0,0 +1,5 @@
+export * from './useClickedElement';
+export * from './useElementCalloutVisible';
+export * from './useHeatmapEffects';
+export * from './useHeatmapElementPosition';
+export * from './useHoveredElement';

package/src/hooks/viz-elements/useClickedElement.ts

@@ -0,0 +1,86 @@
+import type { ElementInfo, ElementRect } from '../../types';
+
+import { useEffect, useState } from 'react';
+import { buildElementInfo, isElementInViewport } from '../../helpers';
+import { useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapVizStore } from '../../stores';
+
+interface Params {
+  visualRef: React.RefObject<HTMLDivElement>;
+  getRect: (el?: any) => ElementRect | null;
+}
+
+const scrollToElementIfNeeded = (
+  visualRef: React.RefObject<HTMLDivElement>,
+  rect: ElementRect,
+  scale: number,
+): void => {
+  if (!visualRef.current) return;
+
+  const visualRect = visualRef.current.getBoundingClientRect();
+  if (isElementInViewport(rect, visualRef, scale)) {
+    return;
+  }
+
+  const topRaw = rect.top; // - visualRect.top
+  const topScaled = topRaw * scale;
+
+  const viewportHeight = visualRect.height;
+  const elementHeightScaled = rect.height * scale;
+  const scrollTop = topScaled - (viewportHeight - elementHeightScaled) / 2;
+
+  visualRef.current.scrollTo({
+    top: Math.max(0, scrollTop),
+    behavior: 'smooth',
+  });
+};
+
+export const useClickedElement = ({ visualRef, getRect }: Params) => {
+  const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
+  const selectedElement = useHeatmapInteractionStore((state) => state.selectedElement);
+  const shouldShowCallout = useHeatmapInteractionStore((state) => state.shouldShowCallout);
+  const setShouldShowCallout = useHeatmapInteractionStore((state) => state.setShouldShowCallout);
+  const scale = useHeatmapVizStore((state) => state.scale);
+
+  const [clickedElement, setClickedElement] = useState<ElementInfo | null>(null);
+  const [showMissingElement, setShowMissingElement] = useState(false);
+
+  const reset = () => {
+    setClickedElement(null);
+    setShowMissingElement(false);
+    setShouldShowCallout(false);
+  };
+
+  useEffect(() => {
+    if (!selectedElement || !heatmapInfo?.elementMapInfo) {
+      reset();
+      return;
+    }
+
+    const info = heatmapInfo.elementMapInfo[selectedElement];
+    if (!info) {
+      setClickedElement(null);
+      return;
+    }
+
+    const hash = selectedElement;
+    const selector = info.selector;
+    const rect = getRect({ hash: selectedElement, selector });
+    const elementInfo = buildElementInfo(hash, rect, heatmapInfo);
+
+    if (!rect) {
+      setClickedElement(elementInfo);
+      setShowMissingElement(true);
+      setShouldShowCallout(false);
+      return;
+    }
+
+    setShowMissingElement(false);
+    scrollToElementIfNeeded(visualRef, rect, scale);
+    setShouldShowCallout(true);
+    requestAnimationFrame(() => {
+      setClickedElement(elementInfo);
+    });
+  }, [selectedElement, heatmapInfo, getRect, visualRef, scale]);
+
+  return { clickedElement, showMissingElement, shouldShowCallout, setShouldShowCallout };
+};

package/src/hooks/viz-elements/useElementCalloutVisible.ts

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { isElementInViewport } from '../../helpers';
+import { useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapVizStore } from '../../stores';
+
+interface Params {
+  visualRef: React.RefObject<HTMLDivElement>;
+  getRect: (el?: any) => any;
+}
+
+export const useElementCalloutVisible = ({ visualRef, getRect }: Params) => {
+  const scale = useHeatmapVizStore((state) => state.scale);
+  const selectedElement = useHeatmapInteractionStore((state) => state.selectedElement);
+  const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
+  const setShouldShowCallout = useHeatmapInteractionStore((state) => state.setShouldShowCallout);
+
+  useEffect(() => {
+    if (!selectedElement) return;
+
+    const elementIsInViewportFn = () => {
+      const elementInfo = heatmapInfo?.elementMapInfo?.[selectedElement];
+      if (!elementInfo) return;
+
+      const rect = getRect({ hash: selectedElement, selector: elementInfo.selector });
+      const isInViewport = isElementInViewport(rect, visualRef, scale);
+      setShouldShowCallout(isInViewport);
+    };
+
+    elementIsInViewportFn();
+    const handleUpdate = () => {
+      requestAnimationFrame(elementIsInViewportFn);
+    };
+
+    window.addEventListener('scroll', handleUpdate, true);
+    window.addEventListener('resize', handleUpdate);
+    visualRef?.current?.addEventListener('scroll', handleUpdate);
+
+    return () => {
+      window.removeEventListener('scroll', handleUpdate, true);
+      window.removeEventListener('resize', handleUpdate);
+      visualRef?.current?.removeEventListener('scroll', handleUpdate);
+    };
+  }, [selectedElement, visualRef, getRect, scale, heatmapInfo, setShouldShowCallout]);
+
+  return {};
+};

package/src/hooks/viz-elements/useHeatmapEffects.ts

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { useHeatmapInteractionStore } from '../../stores';
+
+export const useHeatmapEffects = ({
+  isVisible,
+  isElementSidebarOpen,
+  setShouldShowCallout,
+  resetAll,
+}: {
+  isVisible?: boolean;
+  isElementSidebarOpen?: boolean;
+  setShouldShowCallout: (v: boolean) => void;
+  resetAll: () => void;
+}) => {
+  const selectedElement = useHeatmapInteractionStore((state) => state.selectedElement);
+
+  // Reset khi ẩn
+  useEffect(() => {
+    if (!isVisible) resetAll();
+  }, [isVisible, resetAll]);
+
+  // Ẩn callout khi sidebar mở
+  useEffect(() => {
+    if (isElementSidebarOpen && selectedElement) {
+      setShouldShowCallout(false);
+    } else if (!isElementSidebarOpen && selectedElement) {
+      setShouldShowCallout(true);
+    }
+  }, [isElementSidebarOpen, selectedElement, setShouldShowCallout]);
+};

package/src/hooks/viz-elements/useHeatmapElementPosition.ts

@@ -0,0 +1,60 @@
+import type { ElementRect, HeatmapElement, WebVisualizer } from '../../types';
+
+import { useCallback } from 'react';
+import { getElementLayout } from '../../helpers';
+import { useHeatmapConfigStore, useHeatmapSingleStore, useHeatmapVizStore } from '../../stores';
+
+interface Params {
+  iframeRef: React.RefObject<HTMLIFrameElement>;
+  wrapperRef: React.RefObject<HTMLElement>;
+  visualizer?: WebVisualizer;
+}
+
+export const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }: Params) => {
+  const widthScale = useHeatmapVizStore((state) => state.scale);
+  const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+  const heatmapWidth = useHeatmapConfigStore((state) => state.width);
+
+  return useCallback(
+    (element?: HeatmapElement): ElementRect | null => {
+      const hash = element?.hash;
+      if (!iframeRef.current?.contentDocument || !hash || !visualizer) return null;
+
+      let domElement: HTMLElement | null = null;
+      try {
+        domElement = visualizer.get(hash);
+      } catch (error) {
+        console.error('Visualizer error:', { hash, error });
+        return null;
+      }
+
+      if (!domElement) return null;
+
+      const layout = getElementLayout(domElement);
+      if (!layout) return null;
+
+      const parentEl = wrapperRef.current;
+      if (!parentEl) return null;
+
+      const scrollOffset = parentEl.scrollTop / widthScale;
+      const adjustedTop = layout.top + scrollOffset;
+
+      const outOfBounds =
+        adjustedTop < 0 ||
+        adjustedTop > (iframeHeight || Infinity) ||
+        layout.left < 0 ||
+        (typeof heatmapWidth === 'number' && layout.left > heatmapWidth);
+
+      if (outOfBounds) return null;
+
+      return {
+        left: layout.left,
+        top: adjustedTop,
+        width: Math.min(layout.width, heatmapWidth || layout.width),
+        height: layout.height,
+        outOfBounds,
+      };
+    },
+    [iframeRef, wrapperRef, visualizer, heatmapWidth, iframeHeight, widthScale],
+  );
+};