@gemx-dev/heatmap-react 3.5.45 → 3.5.46

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

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

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

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