@gemx-dev/heatmap-react 3.5.21 → 3.5.23

package/src/hooks/viz-scale/useIframeHeight.ts

@@ -0,0 +1,119 @@
+// Hook 3: Iframe Height Observer
+
+import { useCallback, useEffect, useRef } from 'react';
+import { useHeatmapDataStore } from '../../stores';
+
+interface IUseIframeHeightProps {
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+  contentWidth: number;
+}
+
+interface IUseIframeHeightResult {
+  iframeHeight: number;
+}
+
+export const useIframeHeight = (props: IUseIframeHeightProps): IUseIframeHeightResult => {
+  const { iframeRef, contentWidth } = props;
+  const iframeHeight = useHeatmapDataStore((state) => state.iframeHeight);
+  const setIframeHeight = useHeatmapDataStore((state) => state.setIframeHeight);
+
+  const resizeObserverRef = useRef<ResizeObserver | null>(null);
+  const mutationObserverRef = useRef<MutationObserver | null>(null);
+
+  const updateIframeHeight = useCallback(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    try {
+      const iframeDocument = iframe.contentDocument;
+      const iframeBody = iframeDocument?.body;
+      if (!iframeBody) return;
+
+      const bodyHeight = Math.max(
+        iframeBody.scrollHeight,
+        iframeBody.offsetHeight,
+        iframeBody.clientHeight,
+      );
+
+      if (bodyHeight > 0) {
+        iframe.height = `${bodyHeight}px`;
+        setIframeHeight(bodyHeight);
+      }
+    } catch (error) {
+      console.warn('Cannot measure iframe content:', error);
+    }
+  }, [iframeRef, setIframeHeight]);
+
+  // Trigger height update when content width changes
+  useEffect(() => {
+    if (contentWidth > 0) {
+      // Delay to allow iframe content to reflow after width change
+      const timeoutId = setTimeout(() => {
+        updateIframeHeight();
+      }, 100);
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [contentWidth, updateIframeHeight]);
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    const setupObservers = () => {
+      try {
+        const iframeDocument = iframe.contentDocument;
+        const iframeBody = iframeDocument?.body;
+        if (!iframeBody) return;
+
+        // Cleanup existing observers
+        if (resizeObserverRef.current) {
+          resizeObserverRef.current.disconnect();
+        }
+        if (mutationObserverRef.current) {
+          mutationObserverRef.current.disconnect();
+        }
+
+        // ResizeObserver for size changes
+        if (typeof window.ResizeObserver !== 'undefined') {
+          resizeObserverRef.current = new ResizeObserver(updateIframeHeight);
+          resizeObserverRef.current.observe(iframeBody);
+        }
+
+        // MutationObserver for DOM changes
+        if (typeof window.MutationObserver !== 'undefined') {
+          mutationObserverRef.current = new MutationObserver(updateIframeHeight);
+          mutationObserverRef.current.observe(iframeBody, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            characterData: true,
+          });
+        }
+
+        // Initial measurement
+        updateIframeHeight();
+      } catch (error) {
+        console.warn('Cannot access iframe content:', error);
+      }
+    };
+
+    if (iframe.contentDocument?.readyState === 'complete') {
+      setupObservers();
+    } else {
+      iframe.addEventListener('load', setupObservers, { once: true });
+    }
+
+    return () => {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+      }
+      if (mutationObserverRef.current) {
+        mutationObserverRef.current.disconnect();
+      }
+      iframe.removeEventListener('load', setupObservers);
+    };
+  }, [iframeRef, updateIframeHeight]);
+
+  return { iframeHeight };
+};

package/src/hooks/viz-scale/useScaleCalculation.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+import { HEATMAP_CONFIG } from '../../configs';
+
+interface IUseScaleCalculationProps {
+  containerWidth: number;
+  contentWidth: number;
+}
+
+interface IUseScaleCalculationResult {
+  scale: number;
+}
+
+export const useScaleCalculation = (
+  props: IUseScaleCalculationProps,
+): IUseScaleCalculationResult => {
+  const { containerWidth, contentWidth } = props;
+  const [scale, setScale] = useState(1);
+
+  useEffect(() => {
+    if (containerWidth > 0 && contentWidth > 0) {
+      const availableWidth = containerWidth - HEATMAP_CONFIG['paddingBlock'] * 2;
+      const calculatedScale = Math.min(availableWidth / contentWidth, 1);
+      setScale(calculatedScale);
+    }
+  }, [containerWidth, contentWidth]);
+
+  return { scale };
+};

package/src/hooks/viz-scale/useScrollSync.ts

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+
+interface IUseScrollSyncProps {
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+  scale: number;
+}
+
+interface IUseScrollSyncResult {
+  handleScroll: (scrollTop: number) => void;
+}
+
+export const useScrollSync = (props: IUseScrollSyncProps): IUseScrollSyncResult => {
+  const { iframeRef, scale } = props;
+
+  const handleScroll = useCallback(
+    (scrollTop: number) => {
+      const iframe = iframeRef.current;
+      if (!iframe || scale <= 0) return;
+
+      try {
+        const iframeWindow = iframe.contentWindow;
+        const iframeDocument = iframe.contentDocument;
+
+        if (iframeWindow && iframeDocument) {
+          const iframeScrollTop = scrollTop / scale;
+          iframe.style.top = `${iframeScrollTop}px`;
+        }
+      } catch (error) {
+        console.warn('Cannot sync scroll to iframe:', error);
+      }
+    },
+    [iframeRef, scale],
+  );
+
+  return { handleScroll };
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './components';
+
+export { useHeatmapDataStore } from './stores';
+
+export type { DecodedPayload } from './types';

package/src/stores/data.ts

@@ -0,0 +1,34 @@
+import { create } from 'zustand';
+import { ClickMapPoint, DecodedPayload, IHeatmapConfig } from '../types';
+
+export interface IHeatmapState {
+  hideSidebar: boolean;
+}
+
+export interface IHeatmapDataStore {
+  data?: DecodedPayload[];
+  clickmap?: ClickMapPoint[];
+  config?: IHeatmapConfig;
+  iframeHeight: number;
+  state: IHeatmapState;
+  setState: (state: IHeatmapState) => void;
+  setData: (data: DecodedPayload[]) => void;
+  setClickmap: (clickmap: ClickMapPoint[]) => void;
+  setConfig: (config: IHeatmapConfig) => void;
+  setIframeHeight: (iframeHeight: number) => void;
+}
+
+export const useHeatmapDataStore = create<IHeatmapDataStore>()((set, get) => ({
+  data: undefined,
+  clickmap: undefined,
+  config: undefined,
+  iframeHeight: 0,
+  state: {
+    hideSidebar: false,
+  },
+  setData: (data) => set({ data }),
+  setClickmap: (clickmap) => set({ clickmap }),
+  setState: (state) => set({ state: { ...get().state, ...state } }),
+  setConfig: (config) => set({ config: { ...get().config, ...config } }),
+  setIframeHeight: (iframeHeight) => set({ iframeHeight }),
+}));

package/src/stores/index.ts

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

package/src/styles/base.css

@@ -0,0 +1 @@
+@import '@xyflow/react/dist/style.css';

package/src/styles/style.css

@@ -0,0 +1,30 @@
+.gx-hm-wrapper iframe {
+  /* position: relative; */
+  display: block;
+  border: 1px solid #CCC;
+}
+
+.gx-hm-wrapper .gx-hm-elements {
+  position: absolute;
+  z-index: 2;
+}
+
+.rankBadge {
+  position: absolute;
+  width: 36px;
+  height: 36px;
+  background: #0078D4;
+  color: white;
+  border: 1px solid #FFFFFF;
+  border-radius: 32px;
+  text-align: center;
+  line-height: 32px;
+  filter: drop-shadow(0px 1.2px 3.6px rgba(0, 0, 0, 0.1));
+  cursor: default;
+}
+
+.heatmapElement {
+  position: absolute;
+  border: 1px solid white;
+  outline: 1px solid #0078D4;
+}

package/src/types/clarity.d.ts

@@ -0,0 +1,38 @@
+import type { Data, MergedPayload } from '@gemx-dev/clarity-visualize';
+
+export interface HeatmapProject {
+  id: string;
+  name: string;
+  domain: string;
+  apiKey: string;
+  _count?: {
+    sessions: number;
+  };
+}
+
+export interface SessionData {
+  id: string;
+  projectId: string;
+  userId?: string;
+  startTime: Date;
+  endTime?: Date;
+  pageUrl: string;
+  userAgent?: string;
+  screenWidth?: number;
+  screenHeight?: number;
+  deviceType?: string;
+  browser?: string;
+}
+
+export interface ClickMapPoint {
+  hash: string;
+  selector: string;
+  totalclicks: number;
+  x: number[];
+  y: number[];
+  clicks: number[];
+  points: number;
+}
+export type DecodedPayload = Data.DecodedPayload;
+export type DecodedEvents = MergedPayload['events'];
+export type DecodedEvent = DecodedEvents[number];

package/src/types/heatmap.d.ts

@@ -0,0 +1,3 @@
+export interface IHeatmapConfig {
+  width: number;
+}

package/src/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './clarity';
+export * from './heatmap';
+export * from './viz-element';

package/src/types/viz-element.d.ts

@@ -0,0 +1,39 @@
+export interface ElementRect {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+export interface ElementInfo extends ElementRect {
+  hash: string;
+  clicks: number;
+  rank: number;
+  selector: string;
+}
+
+export interface HeatmapElement {
+  hash: string;
+  selector?: string;
+  totalclicks?: number;
+}
+
+export interface ElementMapInfo {
+  [key: string]: {
+    totalclicks: number;
+    selector?: string;
+    hash: string;
+  };
+}
+
+export interface HeatmapInfo {
+  sortedElements?: HeatmapElement[];
+  elementMapInfo?: ElementMapInfo;
+  totalClicks?: number;
+  width?: number;
+}
+
+// Web Visualizer interface - simplified for web
+export interface WebVisualizer {
+  get: (hash: string) => HTMLElement | null;
+}

package/src/ui/BoxStack/BoxStack.tsx

@@ -0,0 +1,120 @@
+import { useMemo } from 'react';
+
+type Style = Omit<
+  React.CSSProperties,
+  | 'display'
+  | 'flexDirection'
+  | 'overflow'
+  | 'position'
+  | 'flex'
+  | 'justifyContent'
+  | 'alignItems'
+  | 'flexWrap'
+  | 'gap'
+  | 'height'
+>;
+
+type FlexDirection = 'row' | 'column';
+type Overflow = 'hidden' | 'visible' | 'scroll' | 'auto';
+type Position = 'relative' | 'absolute' | 'fixed' | 'sticky';
+type Flex = `${number}` | 'auto' | 'initial' | 'none' | string;
+type JustifyContent =
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+type Gap = number | string;
+type Height = number | string;
+
+export interface BoxStackProps {
+  id?: string;
+  children: React.ReactNode;
+  style?: Style;
+  /**
+   * The flex of the flex container.
+   * @default 'none'
+   */
+  flex?: Flex;
+  /**
+   * The gap between the children.
+   * @default 0
+   */
+  gap?: Gap;
+  /**
+   * The justify content of the flex container.
+   * @default undefined
+   */
+  justifyContent?: JustifyContent;
+  /**
+   * The align items of the flex container.
+   * @default undefined
+   */
+  alignItems?: AlignItems;
+  /**
+   * The direction of the flex container.
+   */
+  flexDirection: FlexDirection;
+  /**
+   * The overflow of the flex container.
+   * @default 'hidden'
+   */
+  overflow?: Overflow;
+  /**
+   * The position of the flex container.
+   * @default 'relative'
+   */
+  position?: Position;
+  /**
+   * The height of the flex container.
+   * @default 'auto'
+   */
+  height?: Height;
+}
+
+export const BoxStack: React.FC<BoxStackProps> = ({ children, ...props }) => {
+  const id = props.id;
+  const flexDirection = props.flexDirection;
+  const overflow = props.overflow || 'hidden';
+  const position = props.position || 'relative';
+  const flex = props.flex || 'none';
+  const justifyContent = props.justifyContent;
+  const alignItems = props.alignItems;
+  const style = props.style || {};
+  const gap = props.gap || 0;
+  const height = props.height || 'auto';
+
+  const styleGap = useMemo(() => {
+    switch (flexDirection) {
+      case 'row':
+        return {
+          columnGap: gap,
+        };
+      case 'column':
+        return {
+          rowGap: gap,
+        };
+    }
+  }, [gap, flexDirection]);
+
+  const styleProps = {
+    display: 'flex',
+    flexDirection,
+    overflow,
+    position,
+    flex,
+    justifyContent,
+    alignItems,
+    height,
+    ...styleGap,
+    ...style,
+  };
+  return (
+    <div id={id} style={styleProps}>
+      {children}
+    </div>
+  );
+};

package/src/ui/BoxStack/index.ts

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

package/src/ui/index.ts

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

package/src/utils/device.ts

@@ -0,0 +1,7 @@
+export function isMobileDevice(userAgent: string): boolean {
+  if (!userAgent) return false;
+
+  return /android|webos|iphone|ipad|ipod|blackberry|windows phone|opera mini|iemobile|mobile|silk|fennec|bada|tizen|symbian|nokia|palmsource|meego|sailfish|kindle|playbook|bb10|rim/i.test(
+    userAgent,
+  );
+}

package/src/utils/retry.ts

@@ -0,0 +1,20 @@
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export async function retry(
+  fn: () => Promise<any> | any,
+  retries: number,
+  delay: number,
+): Promise<any> {
+  for (let i = 0; i < retries; i++) {
+    try {
+      await fn();
+      return; // If the function succeeds, exit the loop
+    } catch (error) {
+      if (i === retries - 1) return;
+      await sleep(delay);
+    }
+  }
+  throw new Error('Max retries reached');
+}

package/src/utils/sort.ts

@@ -0,0 +1,5 @@
+import { DecodedEvent } from '../types';
+
+export function sortEvents(a: DecodedEvent, b: DecodedEvent): number {
+  return a.time - b.time;
+}