@gemx-dev/heatmap-react 3.5.46 → 3.5.47

package/src/helpers/viz-canvas/area-clustering.ts

@@ -1,234 +0,0 @@
-import { ClickMapPoint, IClusterArea, IClusterAreaRect } from '../../types';
-
-interface ClickElement {
-  hash: string;
-  element: HTMLElement;
-  rect: IClusterAreaRect;
-  clicks: number;
-}
-
-const HEATMAP_GRADIENT_COLORS: [number, number, number][] = [
-  [0, 0, 255], // Blue (cold)
-  [0, 255, 255], // Cyan
-  [0, 255, 0], // Green
-  [255, 255, 0], // Yellow
-  [255, 0, 0], // Red (hot)
-];
-
-const GRADIENT_COLOR_COUNT = HEATMAP_GRADIENT_COLORS.length - 1;
-
-// Configuration
-const CLUSTERING_CONFIG = {
-  maxDistance: 1, // Khoảng cách tối đa để gom nhóm (px)
-  minElements: 1, // Số elements tối thiểu trong 1 cluster
-  mergePadding: 0, // Padding khi merge các rects
-};
-
-export class AreaClusteringEngine {
-  /**
-   * Cluster click elements thành các vùng
-   */
-  public clusterAreas(
-    clickData: ClickMapPoint[],
-    iframeDoc: Document,
-    totalClicks: number,
-  ): IClusterArea[] {
-    // 1. Get all click elements với rect
-    const clickElements = this.getClickElements(clickData, iframeDoc);
-    if (clickElements.length === 0) return [];
-
-    // 2. Clustering based on proximity
-    const clusters = this.performClustering(clickElements);
-
-    // 3. Create area objects từ clusters
-    const areas = this.createAreasFromClusters(clusters, totalClicks);
-
-    // 4. Sort by click percentage (descending)
-    areas.sort((a, b) => b.clickPercentage - a.clickPercentage);
-
-    console.log(
-      `[AreaClustering] Created ${areas.length} areas from ${clickElements.length} elements`,
-    );
-
-    return areas;
-  }
-
-  /**
-   * Get click elements with their rects
-   */
-  private getClickElements(clickData: ClickMapPoint[], iframeDoc: Document): ClickElement[] {
-    const elements: ClickElement[] = [];
-
-    clickData.forEach((item) => {
-      const element = iframeDoc.querySelector(
-        `[data-clarity-hashalpha="${item.hash}"]`,
-      ) as HTMLElement;
-
-      if (!element || item.clicks.length === 0) return;
-      if (element.tagName === 'BODY') return;
-
-      const rect = this.getElementRect(element);
-
-      // Lọc elements quá nhỏ hoặc không visible
-      if (rect.width < 10 || rect.height < 10) return;
-
-      elements.push({
-        hash: item.hash,
-        element,
-        rect,
-        clicks: item.clicks.reduce((sum, click) => sum + click, 0),
-      });
-    });
-
-    return elements;
-  }
-
-  /**
-   * Get element rect
-   */
-  private getElementRect(element: HTMLElement): IClusterAreaRect {
-    const domRect = element.getBoundingClientRect();
-    return {
-      top: domRect.top,
-      left: domRect.left,
-      width: domRect.width,
-      height: domRect.height,
-      right: domRect.right,
-      bottom: domRect.bottom,
-    };
-  }
-
-  /**
-   * Perform clustering using distance-based algorithm
-   */
-  private performClustering(clickElements: ClickElement[]): ClickElement[][] {
-    const clusters: ClickElement[][] = [];
-    const used = new Set<number>();
-
-    // Sort by clicks descending để ưu tiên elements có nhiều clicks
-    const sorted = [...clickElements].sort((a, b) => b.clicks - a.clicks);
-
-    sorted.forEach((element, index) => {
-      if (used.has(index)) return;
-
-      // Tạo cluster mới với element này làm seed
-      const cluster: ClickElement[] = [element];
-      used.add(index);
-
-      // Tìm các elements gần với cluster này
-      sorted.forEach((other, otherIndex) => {
-        if (used.has(otherIndex)) return;
-
-        // Check khoảng cách với bất kỳ element nào trong cluster
-        const isNear = cluster.some((clusterEl) => {
-          return this.getDistance(clusterEl.rect, other.rect) <= CLUSTERING_CONFIG.maxDistance;
-        });
-
-        if (isNear) {
-          cluster.push(other);
-          used.add(otherIndex);
-        }
-      });
-
-      // Chỉ thêm cluster nếu đủ elements
-      if (cluster.length >= CLUSTERING_CONFIG.minElements) {
-        clusters.push(cluster);
-      }
-    });
-
-    return clusters;
-  }
-
-  /**
-   * Calculate distance between two rects (edge-to-edge)
-   */
-  private getDistance(rect1: IClusterAreaRect, rect2: IClusterAreaRect): number {
-    // Tính khoảng cách edge-to-edge thay vì center-to-center
-    const horizontalDistance = Math.max(0, rect1.left - rect2.right, rect2.left - rect1.right);
-
-    const verticalDistance = Math.max(0, rect1.top - rect2.bottom, rect2.top - rect1.bottom);
-
-    // Euclidean distance
-    return Math.sqrt(horizontalDistance ** 2 + verticalDistance ** 2);
-  }
-
-  /**
-   * Create area objects from clusters
-   */
-  private createAreasFromClusters(clusters: ClickElement[][], totalClicks: number): IClusterArea[] {
-    return clusters.map((cluster, index) => {
-      const totalClusterClicks = cluster.reduce((sum, el) => sum + el.clicks, 0);
-      const clickPercentage = (totalClusterClicks / totalClicks) * 100;
-
-      // Calculate bounding rect cho cluster
-      const boundingRect = this.calculateBoundingRect(cluster.map((c) => c.rect));
-
-      // Calculate centroid
-      const centroid = this.calculateCentroid(cluster.map((c) => c.rect));
-
-      return {
-        id: `area_${index}`,
-        elements: cluster.map((c) => c.element),
-        hashes: cluster.map((c) => c.hash),
-        boundingRect,
-        totalClicks: totalClusterClicks,
-        clickPercentage,
-        color: this.getHeatmapColor(clickPercentage / 100),
-        hoverColor: this.getHoverColor(clickPercentage / 100),
-        centroid,
-      };
-    });
-  }
-
-  /**
-   * Calculate bounding rect for multiple rects
-   */
-  private calculateBoundingRect(rects: IClusterAreaRect[]): IClusterAreaRect {
-    const padding = CLUSTERING_CONFIG.mergePadding;
-
-    const minLeft = Math.min(...rects.map((r) => r.left)) - padding;
-    const minTop = Math.min(...rects.map((r) => r.top)) - padding;
-    const maxRight = Math.max(...rects.map((r) => r.right)) + padding;
-    const maxBottom = Math.max(...rects.map((r) => r.bottom)) + padding;
-
-    return {
-      left: minLeft,
-      top: minTop,
-      width: maxRight - minLeft,
-      height: maxBottom - minTop,
-      right: maxRight,
-      bottom: maxBottom,
-    };
-  }
-
-  /**
-   * Calculate centroid (center point) of cluster
-   */
-  private calculateCentroid(rects: IClusterAreaRect[]): { x: number; y: number } {
-    const sumX = rects.reduce((sum, r) => sum + (r.left + r.width / 2), 0);
-    const sumY = rects.reduce((sum, r) => sum + (r.top + r.height / 2), 0);
-
-    return {
-      x: sumX / rects.length,
-      y: sumY / rects.length,
-    };
-  }
-
-  /**
-   * Get heatmap color based on percentage (0-1)
-   */
-  private getHeatmapColor(percentage: number): string {
-    const index = Math.min(Math.floor(percentage * GRADIENT_COLOR_COUNT), GRADIENT_COLOR_COUNT - 1);
-    const [r, g, b] = HEATMAP_GRADIENT_COLORS[index];
-    return `rgba(${r}, ${g}, ${b}, 0.5)`;
-  }
-
-  /**
-   * Get hover color
-   */
-  private getHoverColor(percentage: number): string {
-    const index = Math.min(Math.floor(percentage * GRADIENT_COLOR_COUNT), GRADIENT_COLOR_COUNT - 1);
-    const [r, g, b] = HEATMAP_GRADIENT_COLORS[index];
-    return `rgba(${r}, ${g}, ${b}, 0.8)`;
-  }
-}

package/src/helpers/viz-canvas/area-overlay-manager-v2.ts

@@ -1,176 +0,0 @@
-import { AreaMapData } from './area-overlay-manager';
-import {
-  HierarchicalAreaClusteringEngine,
-  HierarchicalCluster,
-} from './hierarchical-area-clustering';
-
-const MIN_LABEL_WIDTH = 67;
-const MIN_LABEL_HEIGHT = 30;
-
-export class AreaOverlayManagerV2 {
-  private iframe: HTMLIFrameElement;
-  private overlayContainer: HTMLDivElement | null = null;
-  private areas = new Map<string, HierarchicalCluster>();
-  private clusteringEngine = new HierarchicalAreaClusteringEngine();
-  private overlayElements = new Map<string, HTMLDivElement>();
-
-  constructor(iframe: HTMLIFrameElement) {
-    this.iframe = iframe;
-  }
-
-  public init(): void {
-    if (this.overlayContainer) {
-      this.clear();
-    }
-
-    const container = document.createElement('div');
-    container.id = 'area-overlay-container';
-
-    Object.assign(container.style, {
-      position: 'absolute',
-      top: '0',
-      left: '0',
-      width: '100%',
-      height: '100%',
-      pointerEvents: 'none',
-      zIndex: '9998',
-      overflow: 'hidden',
-    });
-
-    const iframeStyle = window.getComputedStyle(this.iframe);
-    // if (iframeStyle.position === 'static') {
-    //   this.iframe.style.position = 'relative';
-    // }
-
-    this.iframe.parentElement?.insertBefore(container, this.iframe.nextSibling);
-    this.overlayContainer = container;
-
-    console.log('[AreaOverlayManager] Initialized');
-  }
-
-  public render(data: AreaMapData): void {
-    if (!this.overlayContainer || !this.iframe.contentDocument) {
-      console.warn('[AreaOverlayManager] Not ready');
-      return;
-    }
-
-    this.clear();
-
-    // Use hierarchical clustering
-    const clusters = this.clusteringEngine.clusterAreas(
-      data.clickData,
-      this.iframe.contentDocument,
-      data.totalClicks,
-    );
-    console.log(`🚀 🐥 ~ AreaOverlayManagerV2 ~ render ~ clusters:`, clusters);
-
-    // Render each cluster
-    clusters.forEach((cluster) => {
-      this.createOverlay(cluster);
-      this.areas.set(cluster.id, cluster);
-    });
-
-    console.log(`[AreaOverlayManager] Rendered ${clusters.length} hierarchical clusters`);
-  }
-
-  private createOverlay(cluster: HierarchicalCluster): void {
-    if (!this.overlayContainer) return;
-
-    const overlay = document.createElement('div');
-    const rect = cluster.boundingRect;
-
-    Object.assign(overlay.style, {
-      position: 'absolute',
-      top: `${rect.top}px`,
-      left: `${rect.left}px`,
-      width: `${rect.width}px`,
-      height: `${rect.height}px`,
-      backgroundColor: cluster.color,
-      boxShadow: '0 0 0 2px white inset',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      pointerEvents: 'auto',
-      cursor: 'pointer',
-      transition: 'background-color 0.2s ease, box-shadow 0.2s ease',
-      zIndex: '9999',
-      boxSizing: 'border-box',
-      borderRadius: '4px',
-    });
-
-    overlay.setAttribute('data-area-id', cluster.id);
-    overlay.setAttribute('data-area-level', cluster.level.toString());
-    overlay.setAttribute('data-area-clicks', cluster.totalClicks.toString());
-
-    if (rect.width >= MIN_LABEL_WIDTH && rect.height >= MIN_LABEL_HEIGHT) {
-      const label = document.createElement('div');
-      label.textContent = `${cluster.clickPercentage.toFixed(2)}%`;
-
-      Object.assign(label.style, {
-        color: '#161514',
-        backgroundColor: 'rgba(255, 255, 255, 0.9)',
-        padding: '8px 12px',
-        borderRadius: '4px',
-        fontSize: '14px',
-        lineHeight: '20px',
-        fontWeight: '600',
-        fontFamily: '"Segoe UI", system-ui, -apple-system, sans-serif',
-        pointerEvents: 'none',
-        userSelect: 'none',
-        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-      });
-
-      overlay.appendChild(label);
-    }
-
-    // Events
-    overlay.addEventListener('mouseenter', () => {
-      overlay.style.backgroundColor = cluster.hoverColor;
-      overlay.style.boxShadow = '0 0 0 1px #0078D4, 0 0 0 1px #0078D4 inset, 0 0 0 2px white inset';
-    });
-
-    overlay.addEventListener('mouseleave', () => {
-      overlay.style.backgroundColor = cluster.color;
-      overlay.style.boxShadow = '0 0 0 2px white inset';
-    });
-
-    overlay.addEventListener('click', () => {
-      console.log('[AreaOverlayManager] Cluster clicked:', {
-        id: cluster.id,
-        level: cluster.level,
-        parentHash: cluster.parentHash,
-        clicks: cluster.totalClicks,
-        elements: cluster.elements.length,
-      });
-
-      window.dispatchEvent(new CustomEvent('area-clicked', { detail: cluster }));
-
-      if (cluster.elements[0]) {
-        cluster.elements[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
-      }
-    });
-
-    this.overlayContainer.appendChild(overlay);
-    this.overlayElements.set(cluster.id, overlay);
-  }
-
-  public clear(): void {
-    if (this.overlayContainer) {
-      this.overlayContainer.innerHTML = '';
-    }
-    this.areas.clear();
-    this.overlayElements.clear();
-  }
-
-  public destroy(): void {
-    this.clear();
-    if (this.overlayContainer?.parentElement) {
-      this.overlayContainer.parentElement.removeChild(this.overlayContainer);
-    }
-    this.overlayContainer = null;
-  }
-
-  public getAreas(): HierarchicalCluster[] {
-    return Array.from(this.areas.values());
-  }
-}

package/src/helpers/viz-canvas/area-overlay-manager.ts

@@ -1,273 +0,0 @@
-import { ClickMapPoint, IClusterArea } from '../../types';
-import { AreaClusteringEngine } from './area-clustering';
-
-export interface AreaMapData {
-  clickData: ClickMapPoint[];
-  totalClicks: number;
-}
-
-const MIN_LABEL_WIDTH = 67;
-const MIN_LABEL_HEIGHT = 30;
-
-export class AreaOverlayManager {
-  private iframe: HTMLIFrameElement;
-  private overlayContainer: HTMLDivElement | null = null;
-  private areas = new Map<string, IClusterArea>();
-  private clusteringEngine = new AreaClusteringEngine();
-  private overlayElements = new Map<string, HTMLDivElement>();
-
-  constructor(iframe: HTMLIFrameElement) {
-    this.iframe = iframe;
-  }
-
-  /**
-   * Initialize overlay container
-   */
-  public init(): void {
-    if (this.overlayContainer) {
-      this.clear();
-    }
-
-    const container = document.createElement('div');
-    container.id = 'area-overlay-container';
-
-    Object.assign(container.style, {
-      position: 'absolute',
-      top: '0',
-      left: '0',
-      width: '100%',
-      height: '100%',
-      pointerEvents: 'none',
-      zIndex: '9998',
-      overflow: 'hidden',
-    });
-
-    const iframeStyle = window.getComputedStyle(this.iframe);
-    // if (iframeStyle.position === 'static') {
-    //   this.iframe.style.position = 'relative';
-    // }
-
-    this.iframe.parentElement?.insertBefore(container, this.iframe.nextSibling);
-    this.overlayContainer = container;
-
-    console.log('[AreaOverlayManager] Initialized');
-  }
-
-  /**
-   * Render clustered areas
-   */
-  public render(data: AreaMapData): void {
-    if (!this.overlayContainer || !this.iframe.contentDocument) {
-      console.warn('[AreaOverlayManager] Not ready');
-      return;
-    }
-
-    this.clear();
-
-    // Cluster areas
-    const clusterAreas = this.clusteringEngine.clusterAreas(
-      data.clickData,
-      this.iframe.contentDocument,
-      data.totalClicks,
-    );
-
-    // Render each area
-    clusterAreas.forEach((area) => {
-      this.createOverlay(area);
-      this.areas.set(area.id, area);
-    });
-
-    console.log(`[AreaOverlayManager] Rendered ${clusterAreas.length} cluster areas`);
-  }
-
-  /**
-   * Create overlay for a cluster area
-   */
-  private createOverlay(area: IClusterArea): void {
-    if (!this.overlayContainer) return;
-
-    const overlay = document.createElement('div');
-    const rect = area.boundingRect;
-
-    Object.assign(overlay.style, {
-      position: 'absolute',
-      top: `${rect.top}px`,
-      left: `${rect.left}px`,
-      width: `${rect.width}px`,
-      height: `${rect.height}px`,
-      backgroundColor: area.color,
-      boxShadow: '0 0 0 2px white inset',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      pointerEvents: 'auto',
-      cursor: 'pointer',
-      transition: 'background-color 0.2s ease, box-shadow 0.2s ease',
-      zIndex: '9999',
-      boxSizing: 'border-box',
-      borderRadius: '4px',
-    });
-
-    overlay.setAttribute('data-area-id', area.id);
-    overlay.setAttribute('data-area-clicks', area.totalClicks.toString());
-
-    // Add label
-    if (rect.width >= MIN_LABEL_WIDTH && rect.height >= MIN_LABEL_HEIGHT) {
-      const label = this.createLabel(area);
-      overlay.appendChild(label);
-    }
-
-    // Event handlers
-    overlay.addEventListener('mouseenter', () => {
-      overlay.style.backgroundColor = area.hoverColor;
-      overlay.style.boxShadow = '0 0 0 1px #0078D4, 0 0 0 1px #0078D4 inset, 0 0 0 2px white inset';
-    });
-
-    overlay.addEventListener('mouseleave', () => {
-      overlay.style.backgroundColor = area.color;
-      overlay.style.boxShadow = '0 0 0 2px white inset';
-    });
-
-    overlay.addEventListener('click', () => {
-      this.handleAreaClick(area);
-    });
-
-    this.overlayContainer.appendChild(overlay);
-    this.overlayElements.set(area.id, overlay);
-  }
-
-  /**
-   * Create label
-   */
-  private createLabel(area: IClusterArea): HTMLDivElement {
-    const label = document.createElement('div');
-
-    // Hiển thị % clicks
-    label.textContent = `${area.clickPercentage.toFixed(2)}%`;
-
-    Object.assign(label.style, {
-      color: '#161514',
-      backgroundColor: 'rgba(255, 255, 255, 0.9)',
-      padding: '8px 12px',
-      borderRadius: '4px',
-      fontSize: '14px',
-      lineHeight: '20px',
-      fontWeight: '600',
-      fontFamily: '"Segoe UI", system-ui, -apple-system, sans-serif',
-      pointerEvents: 'none',
-      userSelect: 'none',
-      boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-    });
-
-    return label;
-  }
-
-  /**
-   * Handle area click
-   */
-  private handleAreaClick(area: IClusterArea): void {
-    console.log('[AreaOverlayManager] Area clicked:', {
-      id: area.id,
-      clicks: area.totalClicks,
-      percentage: area.clickPercentage,
-      elements: area.elements.length,
-    });
-
-    // Dispatch event
-    window.dispatchEvent(
-      new CustomEvent('area-clicked', {
-        detail: area,
-      }),
-    );
-
-    // Scroll to centroid
-    if (area.elements[0]) {
-      area.elements[0].scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-      });
-    }
-  }
-
-  /**
-   * Update positions when iframe resizes
-   */
-  public updatePositions(): void {
-    if (!this.iframe.contentDocument) return;
-
-    this.areas.forEach((area) => {
-      const overlay = this.overlayElements.get(area.id);
-      if (!overlay) return;
-
-      // Recalculate bounding rect
-      const rects = area.elements.map((el) => {
-        const domRect = el.getBoundingClientRect();
-        return {
-          top: domRect.top,
-          left: domRect.left,
-          width: domRect.width,
-          height: domRect.height,
-          right: domRect.right,
-          bottom: domRect.bottom,
-        };
-      });
-
-      const newBoundingRect = this.calculateBoundingRect(rects);
-
-      Object.assign(overlay.style, {
-        top: `${newBoundingRect.top}px`,
-        left: `${newBoundingRect.left}px`,
-        width: `${newBoundingRect.width}px`,
-        height: `${newBoundingRect.height}px`,
-      });
-    });
-  }
-
-  private calculateBoundingRect(rects: any[]): any {
-    const padding = 0;
-    const minLeft = Math.min(...rects.map((r) => r.left)) - padding;
-    const minTop = Math.min(...rects.map((r) => r.top)) - padding;
-    const maxRight = Math.max(...rects.map((r) => r.right)) + padding;
-    const maxBottom = Math.max(...rects.map((r) => r.bottom)) + padding;
-
-    return {
-      left: minLeft,
-      top: minTop,
-      width: maxRight - minLeft,
-      height: maxBottom - minTop,
-      right: maxRight,
-      bottom: maxBottom,
-    };
-  }
-
-  /**
-   * Clear all overlays
-   */
-  public clear(): void {
-    if (this.overlayContainer) {
-      this.overlayContainer.innerHTML = '';
-    }
-    this.areas.clear();
-    this.overlayElements.clear();
-  }
-
-  /**
-   * Destroy
-   */
-  public destroy(): void {
-    this.clear();
-
-    if (this.overlayContainer?.parentElement) {
-      this.overlayContainer.parentElement.removeChild(this.overlayContainer);
-    }
-
-    this.overlayContainer = null;
-  }
-
-  /**
-   * Get all areas
-   */
-  public getAreas(): IClusterArea[] {
-    return Array.from(this.areas.values());
-  }
-}