@gemx-dev/heatmap-react 3.5.46 → 3.5.48

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

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

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

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

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

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

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

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

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

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

@@ -1,60 +0,0 @@
-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],
-  );
-};