npm - @gemx-dev/heatmap-react - Versions diffs - 3.5.46 → 3.5.47 - Mend

@gemx-dev/heatmap-react 3.5.46 → 3.5.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (493) hide show

package/src/components/VizElement/HeatmapExample.tsx DELETED Viewed

@@ -1,70 +0,0 @@
-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 DELETED Viewed

@@ -1,25 +0,0 @@
-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 DELETED Viewed

@@ -1,57 +0,0 @@
-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 DELETED Viewed

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

package/src/components/VizLive/VizLiveHeatmap.tsx DELETED Viewed

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

@@ -1,47 +0,0 @@
-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 DELETED Viewed

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

package/src/components/VizScrollmap/AverageFoldLine.tsx DELETED Viewed

@@ -1,57 +0,0 @@
-import React from 'react';
-import { useZonePositions } from '../../hooks';
-import { useHeatmapDataStore } from '../../stores';
-interface AverageFoldLineProps {
-  iframeRef: React.RefObject<HTMLIFrameElement>;
-  wrapperRef: React.RefObject<HTMLElement>;
-}
-export const AverageFoldLine: React.FC<AverageFoldLineProps> = ({ iframeRef, wrapperRef }) => {
-  const averageFold = useHeatmapDataStore((state) => state.dataInfo?.averageFold || 50);
-  const { getZonePosition } = useZonePositions({ iframeRef, wrapperRef });
-  const position = getZonePosition({
-    startY: averageFold,
-    endY: averageFold,
-  });
-  if (!position) return null;
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        top: `${position.top}px`,
-        left: 0,
-        width: '100%',
-        height: '2px',
-        backgroundColor: '#0078D4',
-        pointerEvents: 'none',
-        zIndex: 2,
-        boxShadow: '0 0 4px rgba(0,120,212,0.5)',
-        display: 'flex',
-        alignItems: 'center',
-      }}
-    >
-      <div
-        style={{
-          position: 'absolute',
-          padding: '8px',
-          backgroundColor: 'rgba(0, 120, 212, 0.9)',
-          color: 'white',
-          fontSize: '16px',
-          fontWeight: 600,
-          borderRadius: '4px',
-          whiteSpace: 'nowrap',
-          left: '12px',
-          minWidth: '120px',
-          textAlign: 'center',
-        }}
-      >
-        Average fold - {averageFold.toFixed(0)}%
-      </div>
-    </div>
-  );
-};

package/src/components/VizScrollmap/HoverZones.tsx DELETED Viewed

@@ -1,58 +0,0 @@
-import { useScrollmapZones } from '../../hooks';
-import { useHeatmapDataStore } from '../../stores';
-import { IScrollMapPosition } from '../../types';
-import { ScrollMapMinimap } from './ScrollMapMinimap';
-import { ScrollZoneTooltip } from './ScrollZoneTooltip';
-interface HoverZonesProps {
-  wrapperRef: React.RefObject<HTMLElement>;
-  iframeRef: React.RefObject<HTMLIFrameElement>;
-  position?: IScrollMapPosition;
-  currentScrollPercent: number;
-}
-export const HoverZones: React.FC<HoverZonesProps> = ({
-  iframeRef,
-  wrapperRef,
-  position,
-  currentScrollPercent,
-}) => {
-  const scrollmap = useHeatmapDataStore((state) => state.scrollmap);
-  // const hoveredZone = useHeatmapVizScrollmapStore((state) => state.hoveredZone);
-  // const setHoveredZone = useHeatmapVizScrollmapStore((state) => state.setHoveredZone);
-  const { zones, isReady, maxUsers } = useScrollmapZones({
-    iframeRef,
-    wrapperRef,
-  });
-  if (!isReady || !zones.length) return null;
-  if (!position) return null;
-  return (
-    <>
-      {/* {zones.map((zone) => {
-        const position = getZonePosition(zone);
-        if (!position) return null;
-        return (
-          <ScrollZoneHoverArea
-            key={zone.id}
-            zone={zone}
-            position={position}
-            isHovered={hoveredZone?.id === zone.id}
-            onHoverChange={setHoveredZone}
-          />
-        );
-      })} */}
-      <ScrollZoneTooltip
-        position={position}
-        currentScrollPercent={currentScrollPercent}
-        scrollmap={scrollmap || []}
-      />
-      <ScrollMapMinimap zones={zones} maxUsers={maxUsers} />
-    </>
-  );
-};

package/src/components/VizScrollmap/MetricRow.tsx DELETED Viewed

File without changes

package/src/components/VizScrollmap/ScrollMapMinimap.tsx DELETED Viewed

@@ -1,64 +0,0 @@
-import { getScrollGradientColor } from '../../hooks';
-import { useHeatmapConfigStore, useHeatmapVizScrollmapStore } from '../../stores';
-import { IScrollType, IScrollZone } from '../../types';
-interface ScrollMapMinimapProps {
-  zones: IScrollZone[];
-  maxUsers: number;
-}
-export const ScrollMapMinimap: React.FC<ScrollMapMinimapProps> = ({ zones, maxUsers }) => {
-  const showMinimap = useHeatmapVizScrollmapStore((state) => state.showMinimap);
-  const scrollType = useHeatmapConfigStore((state) => state.scrollType);
-  const isScrollType = [IScrollType.Attention].includes(scrollType);
-  if (!showMinimap || !isScrollType) return null;
-  return (
-    <div
-      style={{
-        position: 'fixed',
-        left: '20px',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        width: '60px',
-        height: '400px',
-        backgroundColor: 'white',
-        borderRadius: '8px',
-        boxShadow: '0 4px 16px rgba(0,0,0,0.15)',
-        zIndex: 10002,
-        padding: '8px',
-        boxSizing: 'border-box',
-      }}
-    >
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          borderRadius: '4px',
-          overflow: 'hidden',
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
-        {zones.map((zone) => {
-          const normalized = maxUsers > 0 ? zone.percUsers / maxUsers : 0;
-          const color = getScrollGradientColor(normalized);
-          return (
-            <div
-              key={zone.id}
-              title={`${zone.label}: ${zone.percUsers.toFixed(2)}%`}
-              style={{
-                width: '100%',
-                flex: `${zone.endY - zone.startY}`,
-                backgroundColor: color,
-                borderBottom: '1px solid rgba(255,255,255,0.2)',
-              }}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-};

package/src/components/VizScrollmap/ScrollMapOverlay.tsx DELETED Viewed

@@ -1,79 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-import { convertViewportToIframeCoords } from '../../hooks';
-import { useHeatmapSingleStore, useHeatmapVizStore } from '../../stores';
-import { IScrollMapPosition } from '../../types';
-import { HoverZones } from './HoverZones';
-interface ScrollMapOverlayProps {
-  wrapperRef: React.RefObject<HTMLElement>;
-  iframeRef: React.RefObject<HTMLIFrameElement>;
-}
-export const ScrollMapOverlay: React.FC<ScrollMapOverlayProps> = ({ wrapperRef, iframeRef }) => {
-  const overlayRef = useRef<HTMLDivElement>(null);
-  const [position, setPosition] = useState<IScrollMapPosition>();
-  const [currentScrollPercent, setCurrentScrollPercent] = useState<number>(0);
-  const widthScale = useHeatmapVizStore((state) => state.scale);
-  const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
-  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (!iframeRef.current || !wrapperRef.current) return;
-    const iframe = iframeRef.current;
-    const iframeRect = iframe.getBoundingClientRect();
-    const { x, y } = convertViewportToIframeCoords(
-      event.clientX,
-      event.clientY,
-      iframeRect,
-      widthScale,
-    );
-    const wrapperEl = wrapperRef.current as HTMLElement;
-    const scrollOffset = (wrapperEl?.scrollTop || 0) / widthScale;
-    const actualY = y + scrollOffset;
-    const scrollPercent = Math.min(100, Math.max(0, (actualY / iframeHeight) * 100));
-    setCurrentScrollPercent(scrollPercent);
-    setPosition({ x, y });
-  };
-  const onMouseMove = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
-      requestAnimationFrame(() => handleMouseMove(event));
-    },
-    [handleMouseMove],
-  );
-  const onMouseLeave = () => {
-    requestAnimationFrame(() => {
-      setCurrentScrollPercent(0);
-      setPosition(undefined);
-    });
-  };
-  return (
-    <div
-      ref={overlayRef}
-      id="gx-hm-scrollmap-overlay"
-      onMouseMove={onMouseMove}
-      onMouseLeave={onMouseLeave}
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: `${iframeHeight}px`,
-        zIndex: 3,
-      }}
-    >
-      <HoverZones
-        position={position}
-        currentScrollPercent={currentScrollPercent}
-        iframeRef={iframeRef}
-        wrapperRef={wrapperRef}
-      />
-    </div>
-  );
-};

package/src/components/VizScrollmap/ScrollZoneHoverArea.tsx DELETED Viewed

@@ -1,35 +0,0 @@
-import React from 'react';
-import { IScrollZone } from '../../types';
-interface ScrollZoneHoverAreaProps {
-  zone: IScrollZone;
-  position: { top: number; height: number };
-  isHovered: boolean;
-  onHoverChange: (zone: IScrollZone | null) => void;
-}
-export const ScrollZoneHoverArea: React.FC<ScrollZoneHoverAreaProps> = ({
-  zone,
-  position,
-  isHovered,
-  onHoverChange,
-}) => {
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        top: `${position.top}px`,
-        left: 0,
-        width: '100%',
-        height: `${position.height}px`,
-        pointerEvents: 'auto',
-        cursor: 'pointer',
-        backgroundColor: isHovered ? 'rgba(0, 120, 212, 0.1)' : 'transparent',
-        transition: 'background-color 0.2s ease',
-        borderBottom: '1px dashed rgba(0, 120, 212, 0.2)',
-      }}
-      onMouseEnter={() => onHoverChange(zone)}
-      onMouseLeave={() => onHoverChange(null)}
-    />
-  );
-};

package/src/components/VizScrollmap/ScrollZoneTooltip.tsx DELETED Viewed

@@ -1,146 +0,0 @@
-import { useMemo, useRef } from 'react';
-import { useHeatmapConfigStore } from '../../stores';
-import { IScrollMapPosition, IScrollType, IScrollZone, ScrollMapPoint } from '../../types';
-interface ScrollZoneTooltipProps {
-  zone?: IScrollZone;
-  position: IScrollMapPosition;
-  currentScrollPercent: number;
-  scrollmap: ScrollMapPoint[];
-}
-export const ScrollZoneTooltip: React.FC<ScrollZoneTooltipProps> = ({
-  zone,
-  position,
-  currentScrollPercent,
-  scrollmap,
-}) => {
-  const tooltipRef = useRef<HTMLDivElement>(null);
-  const currentData = useMemo(() => {
-    if (!scrollmap || scrollmap.length === 0) return null;
-    const roundedPercent = Math.floor(currentScrollPercent);
-    return scrollmap.find((d) => d.scrollReachY === roundedPercent) || null;
-  }, [scrollmap, currentScrollPercent]);
-  return (
-    <div
-      id="gx-hm-scrollmap-tooltip"
-      ref={tooltipRef}
-      style={{
-        position: 'fixed',
-        top: `${position.y}px`,
-        backgroundColor: 'black',
-        zIndex: 10001,
-        pointerEvents: 'none',
-        width: '100%',
-        height: '2px',
-      }}
-    >
-      <div
-        style={{
-          position: 'absolute',
-          left: '50%',
-          top: '-50%',
-          transform: 'translate(-50%, -50%)',
-          padding: '16px',
-          borderRadius: '8px',
-          boxShadow: '0 4px 16px rgba(0,0,0,0.15)',
-          fontSize: '14px',
-          width: 'fit-content',
-          backgroundColor: 'white',
-          minWidth: '230px',
-          display: 'flex',
-          gap: '8px',
-          alignItems: 'center',
-        }}
-      >
-        <p
-          style={{
-            fontWeight: 650,
-            fontSize: '20px',
-            lineHeight: '24px',
-            letterSpacing: '-0.2px',
-            verticalAlign: 'middle',
-            fontVariantNumeric: 'tabular-nums',
-          }}
-        >
-          {currentData?.percUsers?.toFixed(2)}%{' '}
-        </p>
-        <p style={{ fontWeight: 450 }}>user scrolled this far</p>
-      </div>
-      <TooltipByZone zone={zone} />
-    </div>
-  );
-};
-const TooltipByZone: React.FC<{ zone?: IScrollZone }> = ({ zone }) => {
-  const scrollType = useHeatmapConfigStore((state) => state.scrollType);
-  if (!zone) return null;
-  const contentMarkup = () => {
-    switch (scrollType) {
-      case IScrollType.Depth:
-        return <BasicTooltipContent zone={zone} />;
-      case IScrollType.Attention:
-        return <MetricsTooltipContent zone={zone} />;
-      default:
-        return <BasicTooltipContent zone={zone} />;
-    }
-  };
-  return (
-    <div style={{ paddingTop: '12px', borderTop: '1px solid #E5E7EB' }}>{contentMarkup()}</div>
-  );
-};
-const BasicTooltipContent: React.FC<{ zone?: IScrollZone }> = ({ zone }) => {
-  if (!zone) return null;
-  return (
-    <>
-      <div style={{ fontWeight: 600, marginBottom: '8px' }}>{zone.label}</div>
-      <div style={{ fontSize: '24px', fontWeight: 700, color: '#0078D4' }}>
-        {zone.percUsers.toFixed(2)}%
-      </div>
-      <div style={{ fontSize: '12px', color: '#605E5C', marginTop: '4px' }}>
-        of users reached this point
-      </div>
-    </>
-  );
-};
-const MetricsTooltipContent: React.FC<{ zone?: IScrollZone }> = ({ zone }) => {
-  if (!zone) return null;
-  return (
-    <>
-      <div style={{ fontWeight: 600, marginBottom: '8px' }}>{zone.label}</div>
-      <div style={{ fontSize: '20px', fontWeight: 700, marginBottom: '8px' }}>
-        {zone.percUsers.toFixed(2)}% users
-      </div>
-      {zone.metrics && (
-        <div style={{ display: 'grid', gap: '6px', fontSize: '13px' }}>
-          {zone.metrics.revenue !== undefined && (
-            <MetricRow label="Revenue" value={`$${zone.metrics.revenue.toFixed(2)}`} />
-          )}
-          {zone.metrics.conversionRate !== undefined && (
-            <MetricRow label="Conversion" value={`${zone.metrics.conversionRate.toFixed(2)}%`} />
-          )}
-          {zone.metrics.orders !== undefined && (
-            <MetricRow label="Orders" value={zone.metrics.orders.toString()} />
-          )}
-        </div>
-      )}
-    </>
-  );
-};
-const MetricRow: React.FC<{ label: string; value: string }> = ({ label, value }) => (
-  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-    <span style={{ color: '#605E5C' }}>{label}:</span>
-    <span style={{ fontWeight: 600 }}>{value}</span>
-  </div>
-);