@gemx-dev/heatmap-react 3.5.44 → 3.5.46

package/src/components/VizDom/WrapperVisual.tsx

@@ -0,0 +1,73 @@
+import { HEATMAP_CONFIG, HEATMAP_STYLE } from '../../configs';
+import { useHeatmapConfigStore, useHeatmapVizStore } from '../../stores';
+
+interface WrapperVisualProps {
+  children?: React.ReactNode;
+  visualRef: React.RefObject<HTMLDivElement>;
+  wrapperRef: React.RefObject<HTMLDivElement>;
+  scaledHeight: number;
+  iframeHeight: number;
+  onScroll: (e: React.UIEvent<HTMLDivElement>) => void;
+}
+
+export const WrapperVisual: React.FC<WrapperVisualProps> = ({
+  children,
+  visualRef,
+  wrapperRef,
+  scaledHeight,
+  iframeHeight,
+  onScroll,
+}) => {
+  const contentWidth = useHeatmapConfigStore((state) => state.width);
+  const widthScale = useHeatmapVizStore((state) => state.scale);
+
+  const contentHeight =
+    scaledHeight > 0
+      ? `${scaledHeight + HEATMAP_CONFIG['heightToolbar'] + HEATMAP_CONFIG['padding'] * 2}px`
+      : 'auto';
+
+  return (
+    <div
+      ref={visualRef}
+      className="gx-hm-visual"
+      onScroll={onScroll}
+      style={{
+        overflow: 'hidden auto',
+        display: 'flex',
+        position: 'relative',
+        justifyContent: 'center',
+        flex: 1,
+        // paddingBottom: HEATMAP_STYLE['viz']['paddingBottom'],
+        background: '#fff',
+      }}
+    >
+      <div
+        className="gx-hm-visual-unscaled"
+        style={{
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'flex-start',
+          height: contentHeight,
+          padding: HEATMAP_STYLE['wrapper']['padding'],
+          paddingBottom: HEATMAP_STYLE['viz']['paddingBottom'],
+          background: HEATMAP_STYLE['viz']['background'],
+        }}
+      >
+        <div
+          className="gx-hm-wrapper"
+          ref={wrapperRef}
+          style={{
+            width: contentWidth,
+            height: iframeHeight,
+            transform: `scale(${widthScale})`,
+            transformOrigin: 'top center',
+            paddingBlockEnd: '0',
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/VizDom/index.ts

@@ -0,0 +1,5 @@
+export * from './VizContainer';
+export * from './VizDomHeatmap';
+export * from './VizLoading';
+
+export * from './WrapperVisual';

package/src/components/VizElement/DefaultRankBadges.tsx

@@ -0,0 +1,36 @@
+import type { ElementRect, HeatmapElement } from '../../types';
+
+import { useHeatmapDataStore, useHeatmapVizStore } from '../../stores';
+import { RankBadge } from './RankBadge';
+
+const NUMBER_OF_TOP_ELEMENTS = 10;
+interface Props {
+  getRect: (el?: HeatmapElement) => ElementRect | null;
+  hidden?: boolean;
+}
+
+export const DefaultRankBadges: React.FC<Props> = ({ getRect, hidden }) => {
+  const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
+  const widthScale = useHeatmapVizStore((state) => state.scale);
+
+  const elements = heatmapInfo?.sortedElements?.slice(0, NUMBER_OF_TOP_ELEMENTS) ?? [];
+  if (hidden || elements.length === 0) return null;
+
+  return (
+    <>
+      {elements.map((element, index) => {
+        const rect = getRect(element);
+        if (!rect) return null;
+
+        return (
+          <RankBadge
+            key={element.hash}
+            index={index + 1}
+            elementRect={rect}
+            widthScale={widthScale}
+          />
+        );
+      })}
+    </>
+  );
+};

package/src/components/VizElement/ElementCallout.tsx

@@ -0,0 +1,82 @@
+import type { ElementInfo, ICalloutPosition, IHorizontalAlignment } from '../../types';
+
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { calcCalloutPosition } from '../../helpers';
+import { useHeatmapControlStore } from '../../stores';
+
+const DEFAULT_POSITION: ICalloutPosition = {
+  top: 0,
+  left: 0,
+  placement: 'top',
+  horizontalAlign: 'center',
+};
+
+export interface ElementCalloutProps {
+  element: ElementInfo;
+  target: string;
+  visualRef?: React.RefObject<HTMLDivElement>;
+  hozOffset?: number;
+  alignment?: IHorizontalAlignment;
+}
+
+export const ElementCallout: React.FC<ElementCalloutProps> = (props) => {
+  const CompElementCallout = useHeatmapControlStore((state) => state.controls.ElementCallout);
+
+  const { element, target, visualRef, hozOffset, alignment = 'left' } = props;
+
+  const calloutRef = useRef<HTMLDivElement>(null);
+
+  const [position, setPosition] = useState<ICalloutPosition>(DEFAULT_POSITION);
+
+  useEffect(() => {
+    const targetElm = document.querySelector(target);
+    const calloutElm = calloutRef.current;
+    if (!targetElm || !calloutElm) return;
+
+    const positionFn = calcCalloutPosition({
+      targetElm,
+      calloutElm,
+      setPosition,
+      hozOffset,
+      alignment,
+    });
+
+    positionFn();
+    const handleUpdate = () => {
+      requestAnimationFrame(positionFn);
+    };
+
+    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);
+    };
+  }, [element, target, visualRef, hozOffset, alignment]);
+
+  const calloutContent = (
+    <div
+      ref={calloutRef}
+      className={`clarity-callout clarity-callout--${position.placement} clarity-callout--align-${position.horizontalAlign}`}
+      style={{
+        position: 'fixed',
+        top: position.top,
+        left: position.left,
+        zIndex: 2147483647,
+      }}
+      aria-live="assertive"
+      role="tooltip"
+    >
+      {CompElementCallout && <CompElementCallout elementHash={element.hash} />}
+    </div>
+  );
+
+  return createPortal(
+    calloutContent,
+    document.getElementById('gx-hm-viz-container') as Element,
+  ) as React.ReactPortal;
+};

package/src/components/VizElement/ElementMissing.tsx

@@ -0,0 +1,35 @@
+import { useHeatmapVizStore } from '../../stores';
+
+interface Props {
+  show?: boolean;
+}
+
+export const ElementMissing: React.FC<Props> = ({ show = true }) => {
+  if (!show) return null;
+
+  const widthScale = useHeatmapVizStore((state) => state.scale);
+
+  return (
+    <div
+      className="missingElement"
+      style={{
+        position: 'fixed',
+        top: '50%',
+        left: '50%',
+        transform: `translate(-50%, -50%) scale(${1 / widthScale})`,
+        background: 'rgba(0, 0, 0, 0.8)',
+        color: 'white',
+        padding: '12px 20px',
+        borderRadius: '8px',
+        fontSize: '14px',
+        fontWeight: '500',
+        zIndex: 9999,
+        pointerEvents: 'none',
+        whiteSpace: 'nowrap',
+      }}
+      aria-live="assertive"
+    >
+      Element not visible on current screen
+    </div>
+  );
+};

package/src/components/VizElement/ElementOverlay.tsx

@@ -0,0 +1,66 @@
+import type { ElementInfo } from '../../types';
+
+import { Fragment } from 'react';
+import { HEATMAP_CONFIG } from '../../configs/style';
+import {
+  CLICKED_ELEMENT_ID,
+  HOVERED_ELEMENT_ID,
+  SECONDARY_CLICKED_ELEMENT_ID,
+  SECONDARY_HOVERED_ELEMENT_ID,
+} from '../../constants';
+import { useHeatmapVizStore } from '../../stores';
+import { RankBadge } from './RankBadge';
+
+interface Props {
+  type: 'hovered' | 'clicked';
+  element: ElementInfo | null;
+  onClick?: () => void;
+  isSecondary?: boolean;
+}
+
+const TARGET_ID_BY_TYPE = {
+  hovered: {
+    default: HOVERED_ELEMENT_ID,
+    secondary: SECONDARY_HOVERED_ELEMENT_ID,
+  },
+  clicked: {
+    default: CLICKED_ELEMENT_ID,
+    secondary: SECONDARY_CLICKED_ELEMENT_ID,
+  },
+};
+export const ElementOverlay: React.FC<Props> = ({ type, element, onClick, isSecondary }) => {
+  const widthScale = useHeatmapVizStore((state) => state.scale);
+
+  if (!element || (element.width === 0 && element.height === 0)) return null;
+
+  // Iframe has border, so we need to add it to the top position
+  const top = element.top + HEATMAP_CONFIG['borderWidthIframe'];
+  const left = element.left + HEATMAP_CONFIG['borderWidthIframe'];
+  const width = element.width;
+  const height = element.height;
+  const targetId = TARGET_ID_BY_TYPE[type][isSecondary ? 'secondary' : 'default'];
+
+  return (
+    <Fragment>
+      <div
+        onClick={onClick}
+        className="heatmapElement"
+        id={targetId}
+        style={{
+          top,
+          left,
+          width,
+          height,
+          cursor: 'pointer',
+        }}
+      />
+
+      <RankBadge
+        index={element.rank}
+        elementRect={element}
+        widthScale={type === 'hovered' ? 1 : widthScale}
+        clickOnElement={onClick}
+      />
+    </Fragment>
+  );
+};

package/src/components/VizElement/HeatmapElements.tsx

@@ -0,0 +1,127 @@
+import type { IHeatmapInfo, WebVisualizer } from '../../types';
+
+import { CLICKED_ELEMENT_ID, HOVERED_ELEMENT_ID } from '../../constants';
+import {
+  useClickedElement,
+  useElementCalloutVisible,
+  useHeatmapEffects,
+  useHeatmapElementPosition,
+  useHoveredElement,
+} from '../../hooks';
+import { useHeatmapSingleStore } from '../../stores';
+import { DefaultRankBadges } from './DefaultRankBadges';
+import { ElementCallout, ElementCalloutProps } from './ElementCallout';
+import { ElementMissing } from './ElementMissing';
+import { ElementOverlay } from './ElementOverlay';
+
+const ELEMENT_CALLOUT: Pick<ElementCalloutProps, 'hozOffset' | 'alignment'> = {
+  hozOffset: -8,
+  alignment: 'left',
+};
+
+interface HeatmapElementsProps {
+  heatmapInfo?: IHeatmapInfo;
+  isElementSidebarOpen?: boolean;
+  visualizer?: WebVisualizer;
+  isVisible?: boolean;
+  iframeDimensions?: React.CSSProperties;
+  areDefaultRanksHidden?: boolean;
+  isSecondary?: boolean;
+  iframeRef: React.RefObject<HTMLIFrameElement>;
+  wrapperRef: React.RefObject<HTMLElement>;
+  visualRef: React.RefObject<HTMLDivElement>;
+}
+
+export const HeatmapElements: React.FC<HeatmapElementsProps> = (props) => {
+  const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+
+  const {
+    iframeRef,
+    wrapperRef,
+    visualRef,
+    visualizer,
+    iframeDimensions,
+    isElementSidebarOpen,
+    isVisible = true,
+    areDefaultRanksHidden,
+    isSecondary,
+  } = props;
+
+  const getRect = useHeatmapElementPosition({
+    iframeRef,
+    wrapperRef,
+    visualizer,
+  });
+
+  const { clickedElement, showMissingElement, shouldShowCallout, setShouldShowCallout } =
+    useClickedElement({
+      visualRef,
+      getRect,
+    });
+
+  const { hoveredElement, handleMouseMove, handleMouseLeave, handleClick } = useHoveredElement({
+    iframeRef,
+    getRect,
+  });
+
+  useElementCalloutVisible({
+    visualRef,
+    getRect,
+  });
+
+  const resetAll = () => {
+    // setShouldShowCallout(false);
+  };
+
+  useHeatmapEffects({
+    isVisible,
+    isElementSidebarOpen,
+    setShouldShowCallout,
+    resetAll,
+  });
+
+  if (!isVisible) return null;
+
+  return (
+    <div
+      onMouseMove={(event) => {
+        handleMouseMove(event as any);
+        // handleMouseMove2(event as any);
+      }}
+      onMouseLeave={handleMouseLeave}
+      className="gx-hm-elements"
+      style={{ ...iframeDimensions, height: `${iframeHeight}px` }}
+    >
+      {/* Default & Missing element  */}
+      <ElementMissing show={showMissingElement} />
+      <DefaultRankBadges getRect={getRect} hidden={areDefaultRanksHidden} />
+
+      {/* Clicked & Secondary  */}
+      <ElementOverlay type="clicked" element={clickedElement} isSecondary={isSecondary} />
+      <ElementOverlay
+        type="hovered"
+        element={hoveredElement}
+        isSecondary={isSecondary}
+        onClick={handleClick}
+      />
+
+      {/* Element callout */}
+      {hoveredElement?.hash !== clickedElement?.hash && hoveredElement && (
+        <ElementCallout
+          element={hoveredElement}
+          target={`#${HOVERED_ELEMENT_ID}`}
+          visualRef={visualRef}
+          {...ELEMENT_CALLOUT}
+        />
+      )}
+      {shouldShowCallout && clickedElement && (
+        <ElementCallout
+          element={clickedElement}
+          target={`#${CLICKED_ELEMENT_ID}`}
+          visualRef={visualRef}
+          {...ELEMENT_CALLOUT}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/VizElement/HeatmapExample.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useRef } from 'react';
+import { HeatmapData } from '../../hooks/viz-area/useAreaHeatmapManager';
+export function HeatmapWithIframeExample() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  // Dữ liệu mẫu
+  const heatmapData: HeatmapData = {
+    clickData: [
+      {
+        hash: 'main-button',
+        clicks: [1, 2, 3, 4, 5],
+        x: [100, 102, 98, 101, 99],
+        y: [50, 51, 49, 50, 52],
+        points: 15,
+        totalclicks: 150,
+        selector: '.main-button',
+      },
+      {
+        hash: 'iframe-button', // Element trong iframe
+        clicks: [1, 2, 3],
+        x: [200, 201, 199],
+        y: [30, 31, 29],
+        points: 8,
+        totalclicks: 80,
+        selector: '.iframe-button',
+      },
+    ],
+    totalClicks: 230,
+  };
+
+  // Load nội dung vào iframe
+  useEffect(() => {
+    if (iframeRef.current && iframeRef.current.contentDocument) {
+      const iframeDoc = iframeRef.current.contentDocument;
+      iframeDoc.open();
+      iframeDoc.write(`
+        <!DOCTYPE html>
+        <html>
+          <head>
+            <style>
+              body {
+                font-family: Arial, sans-serif;
+                padding: 20px;
+                margin: 0;
+              }
+              .iframe-button {
+                padding: 15px 30px;
+                background: #0078D4;
+                color: white;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+                font-size: 16px;
+              }
+            </style>
+          </head>
+          <body>
+            <h2>Nội dung trong Iframe</h2>
+            <p>Đây là nội dung bên trong iframe</p>
+            <button class="iframe-button" data-clarity-hashalpha="iframe-button">
+              Button trong Iframe (80 clicks)
+            </button>
+          </body>
+        </html>
+      `);
+      iframeDoc.close();
+    }
+  }, []);
+}

package/src/components/VizElement/RankBadge.tsx

@@ -0,0 +1,25 @@
+import type { ElementRect } from '../../types';
+
+import { calculateRankPosition } from '../../helpers/viz-elements';
+
+interface RankBadgeProps {
+  index: number;
+  elementRect: ElementRect;
+  widthScale: number;
+  clickOnElement?: () => void;
+}
+
+export const RankBadge: React.FC<RankBadgeProps> = ({
+  index,
+  elementRect,
+  widthScale,
+  clickOnElement,
+}) => {
+  const style = calculateRankPosition(elementRect, widthScale);
+
+  return (
+    <div className="gx-hm-rank-badge" style={style} onClick={clickOnElement}>
+      {index}
+    </div>
+  );
+};

package/src/components/VizElement/VizElements.tsx

@@ -0,0 +1,57 @@
+import { useHeatmapConfigStore, useHeatmapDataStore, useHeatmapSingleStore } from '../../stores';
+import { WebVisualizer } from '../../types';
+import { HeatmapElements } from './HeatmapElements';
+
+interface VizElementsProps {
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+  visualRef: React.RefObject<HTMLDivElement | null>;
+  wrapperRef: React.RefObject<HTMLDivElement>;
+}
+export const VizElements: React.FC<VizElementsProps> = ({ iframeRef, visualRef, wrapperRef }) => {
+  const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
+  const contentWidth = useHeatmapConfigStore((state) => state.width);
+  const vizRef = useHeatmapSingleStore((state) => state.vizRef);
+
+  const visualizer: WebVisualizer = {
+    get: (hash: string) => {
+      if (vizRef) {
+        return vizRef.get(hash);
+      }
+
+      const doc = iframeRef.current?.contentDocument;
+      if (!doc) return null;
+
+      const elmHashAlpha = doc.querySelector(`[data-clarity-hashalpha="${hash}"]`) as HTMLElement;
+      if (elmHashAlpha) {
+        return elmHashAlpha;
+      }
+
+      const elmHash = doc.querySelector(`[data-clarity-hash="${hash}"]`) as HTMLElement;
+      if (elmHash) {
+        return elmHash;
+      }
+
+      return null;
+    },
+  };
+
+  if (!iframeRef.current) return null;
+
+  return (
+    <HeatmapElements
+      visualizer={visualizer}
+      visualRef={visualRef as React.RefObject<HTMLDivElement>}
+      iframeRef={iframeRef as React.RefObject<HTMLIFrameElement>}
+      wrapperRef={wrapperRef as React.RefObject<HTMLElement>}
+      heatmapInfo={heatmapInfo}
+      isVisible={true}
+      iframeDimensions={{
+        width: contentWidth,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        // pointerEvents: 'none',
+      }}
+    />
+  );
+};

package/src/components/VizElement/index.ts

@@ -0,0 +1 @@
+export * from './VizElements';

package/src/components/VizLive/VizLiveHeatmap.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { useHeatmapControlStore, useHeatmapDataStore, useHeatmapLiveStore } from '../../stores';
+import { VizContainer, VizLoading } from '../VizDom';
+import { VizLiveRenderer } from './VizLiveRenderer';
+
+export const VizLiveHeatmap: React.FC = () => {
+  const controls = useHeatmapControlStore((state) => state.controls);
+  const isRendering = useHeatmapDataStore((state) => state.isRendering);
+  const iframeHeight = useHeatmapLiveStore((state) => state.iframeHeight);
+  const wrapperHeight = useHeatmapLiveStore((state) => state.wrapperHeight);
+  const setWrapperHeight = useHeatmapLiveStore((state) => state.setWrapperHeight);
+  const reset = useHeatmapLiveStore((state) => state.reset);
+
+  useEffect(() => {
+    return () => {
+      reset();
+    };
+  }, [reset]);
+
+  if (isRendering) return controls.VizLoading ?? null;
+  return (
+    <VizContainer setWrapperHeight={setWrapperHeight}>
+      <VizLiveRenderer />
+      {(!iframeHeight || !wrapperHeight) && <VizLoading />}
+    </VizContainer>
+  );
+};

package/src/components/VizLive/VizLiveRenderer.tsx

@@ -0,0 +1,47 @@
+import { useRef } from 'react';
+import { HEATMAP_IFRAME } from '../../configs';
+import { useHeatmapScale } from '../../hooks';
+import { useVizLiveRender } from '../../hooks/viz-live';
+import { useHeatmapConfigStore, useHeatmapLiveStore } from '../../stores';
+import { WrapperVisual } from '../VizDom';
+
+export const VizLiveRenderer: React.FC = () => {
+  const contentWidth = useHeatmapConfigStore((state) => state.width);
+  const iframeHeight = useHeatmapLiveStore((state) => state.iframeHeight);
+  const setIframeHeight = useHeatmapLiveStore((state) => state.setIframeHeight);
+  const visualRef = useRef<HTMLDivElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const { iframeRef } = useVizLiveRender();
+  const { scaledHeight, handleScroll } = useHeatmapScale({
+    wrapperRef,
+    iframeRef,
+    visualRef,
+    iframeHeight,
+    setIframeHeight,
+  });
+
+  const onScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const scrollTop = e.currentTarget.scrollTop;
+    handleScroll(scrollTop);
+  };
+
+  return (
+    <WrapperVisual
+      visualRef={visualRef}
+      wrapperRef={wrapperRef}
+      scaledHeight={scaledHeight}
+      iframeHeight={iframeHeight}
+      onScroll={onScroll}
+    >
+      <iframe
+        ref={iframeRef}
+        {...HEATMAP_IFRAME}
+        width={contentWidth}
+        // height={iframeHeight}
+        scrolling="no"
+        sandbox="allow-scripts allow-same-origin"
+      />
+    </WrapperVisual>
+  );
+};

package/src/components/VizLive/index.ts

@@ -0,0 +1 @@
+export * from './VizLiveHeatmap';