@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/lib/composables/usePieChart.ts

@@ -0,0 +1,362 @@
+import { useCallback, useMemo, useState } from 'react';
+import { ChartDataPoint } from '../types/components';
+
+/**
+ * Pie chart specific options
+ */
+export interface PieChartOptions {
+  /**
+   * Inner radius for donut charts (0-1)
+   */
+  innerRadius?: number;
+
+  /**
+   * Whether to show labels
+   */
+  showLabels?: boolean;
+
+  /**
+   * Whether to show percentages
+   */
+  showPercentages?: boolean;
+
+  /**
+   * Whether to show values
+   */
+  showValues?: boolean;
+
+  /**
+   * Start angle in degrees
+   */
+  startAngle?: number;
+
+  /**
+   * Whether to sort slices by value
+   */
+  sortByValue?: boolean;
+
+  /**
+   * Padding angle between slices in degrees
+   */
+  padAngle?: number;
+
+  /**
+   * Whether to enable animations
+   */
+  enableAnimations?: boolean;
+
+  /**
+   * Whether to enable hover effects
+   */
+  enableHoverEffects?: boolean;
+
+  /**
+   * Whether to enable selection
+   */
+  enableSelection?: boolean;
+
+  /**
+   * Hover offset in pixels
+   */
+  hoverOffset?: number;
+
+  /**
+   * Animation duration in milliseconds
+   */
+  animationDuration?: number;
+
+  /**
+   * Label formatter function
+   */
+  labelFormatter?: (value: number, percentage: number, label: string) => string;
+}
+
+/**
+ * Pie slice interface
+ */
+export interface PieSlice {
+  dataPoint: ChartDataPoint;
+  index: number;
+  startAngle: number;
+  endAngle: number;
+  midAngle: number;
+  color: string;
+  percentage: number;
+  value: number;
+  label: string;
+  path: string;
+  labelPosition: { x: number; y: number };
+  clientX?: number;
+  clientY?: number;
+}
+
+/**
+ * Hook for pie chart functionality
+ */
+export function usePieChart(data: ChartDataPoint[], options: PieChartOptions = {}) {
+  const [hoveredSlice, setHoveredSlice] = useState<number | null>(null);
+  const [selectedSlices, setSelectedSlices] = useState<Set<number>>(new Set());
+  const [animationProgress, setAnimationProgress] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  // Filter and sort data
+  const processedData = useMemo(() => {
+    // Filter out invalid data points
+    const validData = data.filter(
+      point =>
+        typeof point.value === 'number' &&
+        !isNaN(point.value) &&
+        isFinite(point.value) &&
+        point.value > 0
+    );
+
+    if (!validData.length) return [];
+
+    // Sort by value if enabled
+    if (options.sortByValue) {
+      return [...validData].sort((a, b) => b.value - a.value);
+    }
+
+    return validData;
+  }, [data, options.sortByValue]);
+
+  // Calculate total value
+  const totalValue = useMemo(() => {
+    return processedData.reduce((sum, point) => sum + point.value, 0);
+  }, [processedData]);
+
+  // Generate pie slices
+  const slices = useMemo(() => {
+    if (!processedData.length || totalValue <= 0) return [];
+
+    const centerX = 400; // Default center
+    const centerY = 200;
+    const outerRadius = 150;
+    const innerRadius = outerRadius * (options.innerRadius || 0);
+
+    const defaultColors = [
+      '#7AFFD7',
+      '#1AFFD2',
+      '#00E6C3',
+      '#4DFF9F',
+      '#1AFF85',
+      '#00E66B',
+      '#DD6061',
+      '#FF1A1A',
+      '#E60000',
+      '#FFCC00',
+      '#E6B800',
+      '#B38F00',
+    ];
+
+    let currentAngle = ((options.startAngle || 0) * Math.PI) / 180;
+    const padAngleRad = ((options.padAngle || 1) * Math.PI) / 180;
+
+    return processedData.map((point, i) => {
+      const percentage = point.value / totalValue;
+      const angle = percentage * 2 * Math.PI - padAngleRad;
+      const endAngle = currentAngle + angle;
+      const midAngle = currentAngle + angle / 2;
+
+      // Calculate path
+      const outerStartX = centerX + outerRadius * Math.cos(currentAngle);
+      const outerStartY = centerY + outerRadius * Math.sin(currentAngle);
+      const outerEndX = centerX + outerRadius * Math.cos(endAngle);
+      const outerEndY = centerY + outerRadius * Math.sin(endAngle);
+
+      const largeArcFlag = angle > Math.PI ? 1 : 0;
+
+      let path: string;
+
+      if (innerRadius > 0) {
+        // Donut chart path
+        const innerStartX = centerX + innerRadius * Math.cos(endAngle);
+        const innerStartY = centerY + innerRadius * Math.sin(endAngle);
+        const innerEndX = centerX + innerRadius * Math.cos(currentAngle);
+        const innerEndY = centerY + innerRadius * Math.sin(currentAngle);
+
+        path = [
+          `M ${outerStartX},${outerStartY}`,
+          `A ${outerRadius},${outerRadius} 0 ${largeArcFlag},1 ${outerEndX},${outerEndY}`,
+          `L ${innerStartX},${innerStartY}`,
+          `A ${innerRadius},${innerRadius} 0 ${largeArcFlag},0 ${innerEndX},${innerEndY}`,
+          'Z',
+        ].join(' ');
+      } else {
+        // Pie chart path
+        path = [
+          `M ${centerX},${centerY}`,
+          `L ${outerStartX},${outerStartY}`,
+          `A ${outerRadius},${outerRadius} 0 ${largeArcFlag},1 ${outerEndX},${outerEndY}`,
+          'Z',
+        ].join(' ');
+      }
+
+      // Calculate label position
+      const labelRadius = (outerRadius + innerRadius) / 2 || outerRadius * 0.7;
+      const labelX = centerX + labelRadius * Math.cos(midAngle);
+      const labelY = centerY + labelRadius * Math.sin(midAngle);
+
+      const slice: PieSlice = {
+        dataPoint: point,
+        index: i,
+        startAngle: currentAngle,
+        endAngle,
+        midAngle,
+        color: (point.color || defaultColors[i % defaultColors.length]) as string,
+        percentage: percentage * 100,
+        value: point.value,
+        label: point.label,
+        path,
+        labelPosition: { x: labelX, y: labelY },
+      };
+
+      currentAngle = endAngle + padAngleRad;
+
+      return slice;
+    });
+  }, [processedData, totalValue, options.innerRadius, options.startAngle, options.padAngle]);
+
+  // Animation helpers
+  const startAnimation = useCallback(() => {
+    if (!options.enableAnimations) return;
+
+    setIsAnimating(true);
+    setAnimationProgress(0);
+
+    const duration = options.animationDuration || 1000;
+    const startTime = Date.now();
+
+    const animate = () => {
+      const elapsed = Date.now() - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+
+      // Easing function (ease-out)
+      const easedProgress = 1 - Math.pow(1 - progress, 3);
+      setAnimationProgress(easedProgress);
+
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      } else {
+        setIsAnimating(false);
+      }
+    };
+
+    requestAnimationFrame(animate);
+  }, [options.enableAnimations, options.animationDuration]);
+
+  // Slice interaction handlers
+  const handleSliceHover = useCallback(
+    (index: number, clientX?: number, clientY?: number) => {
+      if (!options.enableHoverEffects) return;
+      setHoveredSlice(index);
+
+      // Store client coordinates for tooltip positioning
+      if (clientX !== undefined && clientY !== undefined && slices[index]) {
+        slices[index].clientX = clientX;
+        slices[index].clientY = clientY;
+      }
+    },
+    [options.enableHoverEffects, slices]
+  );
+
+  const handleSliceLeave = useCallback(() => {
+    setHoveredSlice(null);
+  }, []);
+
+  const handleSliceClick = useCallback(
+    (index: number) => {
+      if (!options.enableSelection) return;
+
+      setSelectedSlices(prev => {
+        const newSet = new Set(prev);
+        if (newSet.has(index)) {
+          newSet.delete(index);
+        } else {
+          newSet.add(index);
+        }
+        return newSet;
+      });
+    },
+    [options.enableSelection]
+  );
+
+  // Format label
+  const formatLabel = useCallback(
+    (slice: PieSlice) => {
+      if (options.labelFormatter) {
+        return options.labelFormatter(slice.value, slice.percentage, slice.label);
+      }
+
+      const parts = [];
+
+      if (options.showLabels !== false) {
+        parts.push(slice.label);
+      }
+
+      if (options.showPercentages) {
+        parts.push(`${Math.round(slice.percentage)}%`);
+      }
+
+      if (options.showValues) {
+        parts.push(slice.value.toString());
+      }
+
+      return parts.join(' - ');
+    },
+    [options.labelFormatter, options.showLabels, options.showPercentages, options.showValues]
+  );
+
+  // Get slice transform for hover effect
+  const getSliceTransform = useCallback(
+    (slice: PieSlice, isHovered: boolean) => {
+      if (!isHovered || !options.enableHoverEffects || !options.hoverOffset) {
+        return '';
+      }
+
+      const offsetX = Math.cos(slice.midAngle) * options.hoverOffset;
+      const offsetY = Math.sin(slice.midAngle) * options.hoverOffset;
+
+      return `translate(${offsetX}, ${offsetY})`;
+    },
+    [options.enableHoverEffects, options.hoverOffset]
+  );
+
+  // Check if slice is selected
+  const isSliceSelected = useCallback(
+    (index: number) => {
+      return selectedSlices.has(index);
+    },
+    [selectedSlices]
+  );
+
+  return {
+    // Data
+    processedData,
+    slices,
+    totalValue,
+
+    // State
+    hoveredSlice,
+    selectedSlices,
+    animationProgress,
+    isAnimating,
+
+    // Handlers
+    handleSliceHover,
+    handleSliceLeave,
+    handleSliceClick,
+    startAnimation,
+
+    // Utilities
+    formatLabel,
+    getSliceTransform,
+    isSliceSelected,
+
+    // State setters
+    setHoveredSlice,
+    setSelectedSlices,
+    setAnimationProgress,
+    setIsAnimating,
+  };
+}

package/src/lib/composables/usePopover.ts

@@ -0,0 +1,354 @@
+import { useState, useRef, useEffect, RefObject } from 'react';
+
+type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
+type PopoverTrigger = 'click' | 'hover';
+
+interface UsePopoverProps {
+  position?: PopoverPosition | 'auto';
+  trigger?: PopoverTrigger;
+  offset?: number;
+  delay?: number;
+  defaultOpen?: boolean;
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  closeOnClickOutside?: boolean;
+  closeOnEscape?: boolean;
+  id?: string;
+}
+
+interface UsePopoverResult {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  triggerRef: RefObject<HTMLElement | null>;
+  popoverRef: RefObject<HTMLDivElement | null>;
+  arrowRef: RefObject<HTMLDivElement | null>;
+  popoverId: string;
+  currentPosition: PopoverPosition;
+  updatePosition: () => void;
+}
+
+/**
+ * Hook for managing popover state and positioning logic
+ */
+export const usePopover = ({
+  position = 'top',
+  trigger = 'click',
+  offset = 12,
+  delay = 0,
+  defaultOpen = false,
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  id,
+}: UsePopoverProps): UsePopoverResult => {
+  const [isOpen, setIsOpenState] = useState(defaultOpen);
+  const [currentPosition, setCurrentPosition] = useState<PopoverPosition>(
+    position === 'auto' ? 'top' : (position as PopoverPosition)
+  );
+  const triggerRef = useRef<HTMLElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const arrowRef = useRef<HTMLDivElement>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const popoverId = id || `popover-${Math.random().toString(36).slice(2, 11)}`;
+
+  // Use controlled state if provided
+  const isControlled = controlledIsOpen !== undefined;
+  const isOpenState = isControlled ? controlledIsOpen : isOpen;
+
+  // Define setIsOpen function before using it in useEffect
+  const setIsOpen = (newIsOpen: boolean) => {
+    if (!isControlled) {
+      setIsOpenState(newIsOpen);
+    }
+    if (onOpenChange) {
+      onOpenChange(newIsOpen);
+    }
+  };
+
+  // Handle hover events if trigger is hover
+  useEffect(() => {
+    if (trigger !== 'hover' || !triggerRef.current || !popoverRef.current) return undefined;
+
+    const handleTriggerMouseEnter = () => {
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+
+      if (delay > 0) {
+        timeoutRef.current = setTimeout(() => {
+          setIsOpen(true);
+        }, delay);
+      } else {
+        setIsOpen(true);
+      }
+    };
+
+    const handleTriggerMouseLeave = () => {
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        if (!popoverRef.current?.matches(':hover')) {
+          setIsOpen(false);
+        }
+      }, 100);
+    };
+
+    const handlePopoverMouseEnter = () => {
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+
+    const handlePopoverMouseLeave = () => {
+      setIsOpen(false);
+    };
+
+    // Add hover event listeners
+    triggerRef.current.addEventListener('mouseenter', handleTriggerMouseEnter);
+    triggerRef.current.addEventListener('mouseleave', handleTriggerMouseLeave);
+    popoverRef.current.addEventListener('mouseenter', handlePopoverMouseEnter);
+    popoverRef.current.addEventListener('mouseleave', handlePopoverMouseLeave);
+
+    return () => {
+      if (triggerRef.current) {
+        triggerRef.current.removeEventListener('mouseenter', handleTriggerMouseEnter);
+        triggerRef.current.removeEventListener('mouseleave', handleTriggerMouseLeave);
+      }
+      if (popoverRef.current) {
+        popoverRef.current.removeEventListener('mouseenter', handlePopoverMouseEnter);
+        popoverRef.current.removeEventListener('mouseleave', handlePopoverMouseLeave);
+      }
+      if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [trigger, delay, isOpenState]);
+
+  const updatePosition = (event?: Event) => {
+    if (!triggerRef.current || !popoverRef.current) return;
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const popoverRect = popoverRef.current.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    // Check if the trigger is near viewport edges
+    const isNearViewportEdge =
+      triggerRect.top < 50 ||
+      triggerRect.bottom > viewportHeight - 50 ||
+      triggerRect.left < 50 ||
+      triggerRect.right > viewportWidth - 50;
+
+    // If this is a scroll update and trigger isn't near edges, skip repositioning
+    if (event?.type === 'scroll' && !isNearViewportEdge) {
+      return;
+    }
+
+    // Calculate space available in each direction
+    const spaceTop = triggerRect.top;
+    const spaceBottom = viewportHeight - triggerRect.bottom;
+    const spaceLeft = triggerRect.left;
+    const spaceRight = viewportWidth - triggerRect.right;
+
+    // Determine best position based on available space
+    let bestPosition: PopoverPosition = position === 'auto' ? 'top' : (position as PopoverPosition);
+
+    // If specified position is 'auto', find the position with most space
+    if (position === 'auto') {
+      const spaces = [
+        { position: 'top', space: spaceTop },
+        { position: 'right', space: spaceRight },
+        { position: 'bottom', space: spaceBottom },
+        { position: 'left', space: spaceLeft },
+      ];
+
+      // Sort by available space (descending)
+      spaces.sort((a, b) => b.space - a.space);
+
+      // Select position with most space
+      bestPosition = spaces[0]?.position as PopoverPosition;
+    } else {
+      // Check if the preferred position has enough space
+      const needsFlip =
+        (position === 'top' &&
+          spaceTop < popoverRect.height + offset &&
+          spaceBottom >= popoverRect.height + offset) ||
+        (position === 'bottom' &&
+          spaceBottom < popoverRect.height + offset &&
+          spaceTop >= popoverRect.height + offset) ||
+        (position === 'left' &&
+          spaceLeft < popoverRect.width + offset &&
+          spaceRight >= popoverRect.width + offset) ||
+        (position === 'right' &&
+          spaceRight < popoverRect.width + offset &&
+          spaceLeft >= popoverRect.width + offset);
+
+      if (needsFlip) {
+        // Flip to the opposite side
+        const oppositePositions: Record<PopoverPosition | 'auto', PopoverPosition> = {
+          top: 'bottom',
+          bottom: 'top',
+          left: 'right',
+          right: 'left',
+          auto: 'bottom',
+        };
+        bestPosition = oppositePositions[position as PopoverPosition | 'auto'];
+      }
+    }
+
+    setCurrentPosition(bestPosition);
+
+    // Calculate position based on the determined best position
+    let top = 0;
+    let left = 0;
+
+    // Calculate viewport-relative position
+    switch (bestPosition) {
+      case 'top':
+        top = triggerRect.top - popoverRect.height - offset;
+        left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+        break;
+      case 'bottom':
+        top = triggerRect.bottom + offset;
+        left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+        break;
+      case 'left':
+        top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+        left = triggerRect.left - popoverRect.width - offset;
+        break;
+      case 'right':
+        top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+        left = triggerRect.right + offset;
+        break;
+    }
+
+    // Constrain to viewport boundaries
+    if (left < 0) {
+      left = 5;
+    } else if (left + popoverRect.width > viewportWidth) {
+      left = viewportWidth - popoverRect.width - 5;
+    }
+
+    if (top < 0) {
+      top = 5;
+    } else if (top + popoverRect.height > viewportHeight) {
+      top = viewportHeight - popoverRect.height - 5;
+    }
+
+    // Add scroll position to convert viewport coordinates to absolute position
+    const absoluteTop = top + window.scrollY;
+    const absoluteLeft = left + window.scrollX;
+
+    // Apply position using absolute positioning to follow when scrolling
+    popoverRef.current.style.position = 'absolute';
+    popoverRef.current.style.top = `${absoluteTop}px`;
+    popoverRef.current.style.left = `${absoluteLeft}px`;
+  };
+
+  // Position the popover
+  useEffect(() => {
+    if (!isOpenState || !triggerRef.current || !popoverRef.current) return undefined;
+
+    // Initial positioning
+    updatePosition();
+
+    // Update position on resize
+    window.addEventListener('resize', updatePosition);
+
+    // Update position on scroll, but throttled for performance
+    let scrollTimeout: ReturnType<typeof setTimeout> | null = null;
+    const handleScroll = (e: Event) => {
+      if (scrollTimeout) {
+        return;
+      }
+
+      scrollTimeout = setTimeout(() => {
+        updatePosition(e);
+        scrollTimeout = null;
+      }, 100);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    // Update position less frequently to handle content changes
+    const intervalId: ReturnType<typeof setInterval> = setInterval(() => {
+      updatePosition();
+    }, 500);
+
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', handleScroll);
+      if (scrollTimeout) {
+        clearTimeout(scrollTimeout);
+      }
+      clearInterval(intervalId);
+    };
+  }, [isOpenState, position, offset]);
+
+  // Handle click outside to close popover
+  useEffect(() => {
+    if (!isOpenState || !closeOnClickOutside) return undefined;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(event.target as Node) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpenState, closeOnClickOutside]);
+
+  // Handle escape key to close popover
+  useEffect(() => {
+    if (!isOpenState || !closeOnEscape) return undefined;
+
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleEscapeKey);
+
+    return () => {
+      document.removeEventListener('keydown', handleEscapeKey);
+    };
+  }, [isOpenState, closeOnEscape]);
+
+  // Clean up on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return {
+    isOpen: isOpenState,
+    setIsOpen,
+    triggerRef,
+    popoverRef,
+    arrowRef,
+    popoverId,
+    currentPosition,
+    updatePosition,
+  };
+};
+
+export default usePopover;