@gemx-dev/heatmap-react 3.5.21 → 3.5.23

package/src/components/VizElement/HeatmapElements.tsx

@@ -0,0 +1,147 @@
+import type { HeatmapInfo, WebVisualizer } from '../../types';
+
+import {
+  CLICKED_ELEMENT_ID,
+  HOVERED_ELEMENT_ID,
+  SECONDARY_CLICKED_ELEMENT_ID,
+  SECONDARY_HOVERED_ELEMENT_ID,
+} from '../../constants';
+import {
+  useClickedElement,
+  useHeatmapEffects,
+  useHeatmapElementPosition,
+  useHoveredElement,
+} from '../../hooks';
+
+import { ClickedElementOverlay } from './ClickedElementOverlay';
+import { DefaultRankBadges } from './DefaultRankBadges';
+import { ElementCallout } from './ElementCallout';
+import { HoveredElementOverlay } from './HoveredElementOverlay';
+import { MissingElementMessage } from './MissingElementMessage';
+
+export interface HeatmapElementsProps {
+  widthScale: number;
+  heatmapInfo?: HeatmapInfo;
+  isElementSidebarOpen?: boolean;
+  selectedElement?: string | null;
+  visualizer?: WebVisualizer;
+  isVisible?: boolean;
+  iframeDimensions?: React.CSSProperties;
+  areDefaultRanksHidden?: boolean;
+  isSecondary?: boolean;
+  isRecordingView?: boolean;
+  isCompareMode?: boolean;
+  deviceType?: string;
+  heatmapType?: string;
+  projectId?: string;
+  iframeRef: React.RefObject<HTMLIFrameElement>;
+  parentRef: React.RefObject<HTMLElement>;
+  iframeHeight?: number;
+  selectElement?: (hash: string) => void;
+}
+
+export const HeatmapElements: React.FC<HeatmapElementsProps> = (props) => {
+  const {
+    iframeRef,
+    parentRef,
+    visualizer,
+    heatmapInfo,
+    widthScale,
+    iframeHeight,
+    iframeDimensions,
+    selectedElement,
+    isElementSidebarOpen,
+    isVisible = true,
+    selectElement,
+    areDefaultRanksHidden,
+    isSecondary,
+    ...rest
+  } = props;
+
+  const getRect = useHeatmapElementPosition({
+    iframeRef,
+    parentRef,
+    visualizer,
+    heatmapWidth: heatmapInfo?.width,
+    iframeHeight,
+    widthScale,
+    projectId: props.projectId,
+  });
+
+  const { clickedElement, showMissingElement, shouldShowCallout, setShouldShowCallout } =
+    useClickedElement({
+      selectedElement,
+      heatmapInfo,
+      getRect,
+    });
+
+  const { hoveredElement, handleMouseMove, handleMouseLeave, handleClick } = useHoveredElement({
+    iframeRef,
+    heatmapInfo,
+    getRect,
+    onSelect: selectElement,
+    widthScale,
+  });
+
+  const resetAll = () => {
+    // nếu cần reset thêm state ở đây
+    // setShouldShowCallout(false);
+  };
+
+  useHeatmapEffects({
+    isVisible,
+    isElementSidebarOpen,
+    selectedElement,
+    setShouldShowCallout,
+    resetAll,
+  });
+
+  if (!isVisible) return null;
+
+  const top10 = heatmapInfo?.sortedElements?.slice(0, 10) ?? [];
+
+  return (
+    <div
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      className="heatmapElements gx-hm-elements"
+      style={iframeDimensions}
+    >
+      <DefaultRankBadges
+        elements={top10}
+        getRect={getRect}
+        widthScale={widthScale}
+        hidden={areDefaultRanksHidden}
+      />
+
+      <ClickedElementOverlay
+        widthScale={widthScale}
+        element={clickedElement}
+        shouldShowCallout={shouldShowCallout}
+        isSecondary={isSecondary}
+        targetId={isSecondary ? SECONDARY_CLICKED_ELEMENT_ID : CLICKED_ELEMENT_ID}
+        {...rest}
+      />
+
+      {showMissingElement && <MissingElementMessage widthScale={widthScale} />}
+
+      <HoveredElementOverlay
+        element={hoveredElement}
+        onClick={handleClick}
+        isSecondary={isSecondary}
+        targetId={isSecondary ? SECONDARY_HOVERED_ELEMENT_ID : HOVERED_ELEMENT_ID}
+        totalClicks={heatmapInfo?.totalClicks ?? 1}
+      />
+
+      {hoveredElement !== clickedElement && hoveredElement && (
+        <ElementCallout
+          element={hoveredElement}
+          target={`#${props.isSecondary ? SECONDARY_HOVERED_ELEMENT_ID : HOVERED_ELEMENT_ID}`}
+          totalClicks={props.heatmapInfo?.totalClicks ?? 1}
+          isSecondary={props.isSecondary}
+          parentRef={props.parentRef}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/VizElement/HoveredElementOverlay.tsx

@@ -0,0 +1,46 @@
+import type { ElementInfo } from '../../types';
+
+import React, { Fragment } from 'react';
+import { RankBadge } from './RankBadge';
+
+interface Props {
+  element: ElementInfo | null;
+  onClick?: () => void;
+  isSecondary?: boolean;
+  targetId: string;
+  totalClicks?: number;
+}
+
+export const HoveredElementOverlay: React.FC<Props> = ({
+  element,
+  onClick,
+  isSecondary,
+  targetId,
+  totalClicks = 1,
+}) => {
+  if (!element) return null;
+
+  return (
+    <Fragment>
+      <div
+        onClick={onClick}
+        className="heatmapElement hovered"
+        id={targetId}
+        style={{
+          top: element.top,
+          left: element.left,
+          width: element.width,
+          height: element.height,
+          cursor: 'pointer',
+        }}
+      />
+
+      <RankBadge
+        index={element.rank}
+        elementRect={element}
+        widthScale={1}
+        clickOnElement={onClick}
+      />
+    </Fragment>
+  );
+};

package/src/components/VizElement/MissingElementMessage.tsx

@@ -0,0 +1,32 @@
+// src/components/HeatmapElements/components/MissingElementMessage.tsx
+import React from 'react';
+
+interface Props {
+  widthScale: number;
+}
+
+export const MissingElementMessage: React.FC<Props> = ({ widthScale }) => {
+  return (
+    <div
+      className="missingElement"
+      style={{
+        position: 'absolute',
+        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/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="rankBadge" style={style} onClick={clickOnElement} data-testid="elementRank">
+      {index}
+    </div>
+  );
+};

package/src/components/VizElement/VizElements.tsx

@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import { useHeatmapDataStore } from '../../stores';
+import { HeatmapInfo, WebVisualizer } from '../../types';
+import { HeatmapElements } from './HeatmapElements';
+
+interface VizElementsProps {
+  width: number;
+  height: number;
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+  wrapperRef: React.RefObject<HTMLDivElement>;
+  widthScale: number;
+}
+export const VizElements: React.FC<VizElementsProps> = ({
+  width,
+  height,
+  iframeRef,
+  wrapperRef,
+  widthScale,
+}) => {
+  const data = useHeatmapDataStore((state) => state.data);
+
+  const heatmapInfo: HeatmapInfo = {
+    sortedElements: [
+      {
+        hash: '9ebwu6a3',
+        selector: 'Join our email list',
+      },
+      {
+        hash: '350hde5d4',
+        selector: 'Products',
+      },
+    ],
+    elementMapInfo: {
+      '9ebwu6a3': {
+        totalclicks: 4,
+        hash: '9ebwu6a3',
+      },
+      '350hde5d4': {
+        totalclicks: 4,
+        hash: '350hde5d4',
+      },
+    },
+    totalClicks: 8,
+  };
+
+  const visualizer: WebVisualizer = {
+    get: (hash: string) => {
+      const doc = iframeRef.current?.contentDocument;
+      if (!doc) return null;
+
+      // Find element by hash attribute
+      return doc.querySelector(`[data-clarity-hashalpha="${hash}"]`) as HTMLElement;
+    },
+  };
+  const [selectedElement, setSelectedElement] = useState<string | null>(null);
+
+  if (!iframeRef.current) return null;
+
+  return (
+    <HeatmapElements
+      visualizer={visualizer}
+      iframeRef={iframeRef as React.RefObject<HTMLIFrameElement>}
+      parentRef={wrapperRef as React.RefObject<HTMLElement>}
+      iframeHeight={window.innerHeight}
+      widthScale={widthScale}
+      heatmapInfo={heatmapInfo}
+      selectedElement={selectedElement}
+      selectElement={setSelectedElement}
+      isVisible={true}
+      iframeDimensions={{
+        width,
+        height,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        // pointerEvents: 'none',
+      }}
+    />
+  );
+};

package/src/components/VizElement/index.ts

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