@gemx-dev/heatmap-react 3.5.23 → 3.5.25

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

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

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

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

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

package/src/stores/data.ts

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

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

package/src/styles/base.css

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

package/src/styles/style.css

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

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

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

package/src/types/index.d.ts

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

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

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

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

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

package/src/ui/index.ts

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

package/src/utils/device.ts

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

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

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