@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.3 → 0.1.5

package/src/hooks/use-performance-throttling.ts

@@ -0,0 +1,348 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface PerformanceThrottlingConfig {
+  enablePerformanceMonitoring?: boolean
+  enableAutomaticThrottling?: boolean
+  enableUserExperienceOptimization?: boolean
+  enableBatteryPreservation?: boolean
+  performanceThreshold?: number
+  frameRateTarget?: number
+  memoryThreshold?: number
+  cpuThreshold?: number
+}
+
+export interface PerformanceMetrics {
+  fps: number
+  frameTime: number
+  memoryUsage: number
+  cpuUsage: number
+  performanceScore: number
+  isThrottling: boolean
+  throttleReason: string
+}
+
+export interface PerformanceThrottlingCallbacks {
+  onPerformanceWarning?: (metrics: PerformanceMetrics) => void
+  onThrottlingApplied?: (level: string, reason: string) => void
+  onPerformanceRecovery?: (metrics: PerformanceMetrics) => void
+  onUserExperienceOptimized?: (optimization: string) => void
+}
+
+export const usePerformanceThrottling = (
+  config: PerformanceThrottlingConfig = {},
+  callbacks: PerformanceThrottlingCallbacks = {}
+) => {
+  const {
+    enablePerformanceMonitoring = true,
+    enableAutomaticThrottling = true,
+    enableUserExperienceOptimization = true,
+    enableBatteryPreservation = true,
+    performanceThreshold = 70,
+    frameRateTarget = 60,
+    memoryThreshold = 80,
+    cpuThreshold = 80
+  } = config
+
+  const [metrics, setMetrics] = useState<PerformanceMetrics>({
+    fps: 60,
+    frameTime: 16.67,
+    memoryUsage: 0,
+    cpuUsage: 0,
+    performanceScore: 100,
+    isThrottling: false,
+    throttleReason: 'none'
+  })
+
+  const [isOptimizing, setIsOptimizing] = useState(false)
+  const [optimizations, setOptimizations] = useState<string[]>([])
+  const [throttleLevel, setThrottleLevel] = useState<'none' | 'light' | 'moderate' | 'aggressive'>('none')
+  
+  const frameCountRef = useRef(0)
+  const lastFrameTimeRef = useRef(performance.now())
+  const performanceTimerRef = useRef<number | null>(null)
+  const throttlingTimerRef = useRef<number | null>(null)
+
+  // Performance monitoring
+  const measurePerformance = useCallback(() => {
+    if (!enablePerformanceMonitoring) return
+
+    try {
+      const now = performance.now()
+      frameCountRef.current++
+      
+      if (now - lastFrameTimeRef.current >= 1000) {
+        const fps = Math.round((frameCountRef.current * 1000) / (now - lastFrameTimeRef.current))
+        const frameTime = 1000 / fps
+        
+        // Simulate memory and CPU usage
+        const memoryUsage = Math.random() * 100
+        const cpuUsage = Math.random() * 100
+        
+        // Calculate performance score
+        const fpsScore = Math.min((fps / frameRateTarget) * 100, 100)
+        const timeScore = Math.max(100 - (frameTime - 16.67) * 10, 0)
+        const memoryScore = Math.max(100 - memoryUsage, 0)
+        const cpuScore = Math.max(100 - cpuUsage, 0)
+        
+        const performanceScore = Math.round((fpsScore + timeScore + memoryScore + cpuScore) / 4)
+        
+        // Determine if throttling is needed
+        const isThrottling = performanceScore < performanceThreshold || 
+                           fps < frameRateTarget * 0.8 || 
+                           memoryUsage > memoryThreshold || 
+                           cpuUsage > cpuThreshold
+        
+        let throttleReason = 'none'
+        if (performanceScore < performanceThreshold) throttleReason = 'low_performance'
+        else if (fps < frameRateTarget * 0.8) throttleReason = 'low_fps'
+        else if (memoryUsage > memoryThreshold) throttleReason = 'high_memory'
+        else if (cpuUsage > cpuThreshold) throttleReason = 'high_cpu'
+        
+        const newMetrics: PerformanceMetrics = {
+          fps,
+          frameTime,
+          memoryUsage,
+          cpuUsage,
+          performanceScore,
+          isThrottling,
+          throttleReason
+        }
+        
+        setMetrics(newMetrics)
+        
+        // Trigger callbacks
+        if (isThrottling) {
+          callbacks.onPerformanceWarning?.(newMetrics)
+        } else if (metrics.isThrottling) {
+          callbacks.onPerformanceRecovery?.(newMetrics)
+        }
+        
+        frameCountRef.current = 0
+        lastFrameTimeRef.current = now
+      }
+    } catch (error) {
+      console.warn('Performance measurement failed:', error)
+    }
+  }, [enablePerformanceMonitoring, performanceThreshold, frameRateTarget, memoryThreshold, cpuThreshold, callbacks, metrics.isThrottling])
+
+  // Automatic throttling
+  const applyPerformanceThrottling = useCallback(() => {
+    if (!enableAutomaticThrottling) return
+
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      let newThrottleLevel: 'none' | 'light' | 'moderate' | 'aggressive' = 'none'
+      let optimizations: string[] = []
+      
+      // Determine throttle level based on performance metrics
+      if (metrics.performanceScore < 50 || metrics.fps < 30) {
+        newThrottleLevel = 'aggressive'
+        optimizations.push('Critical performance: Maximum throttling applied')
+        optimizations.push('All non-essential animations disabled')
+        optimizations.push('Frame rate limited to 30fps')
+        optimizations.push('Memory usage optimized')
+      } else if (metrics.performanceScore < 70 || metrics.fps < 45) {
+        newThrottleLevel = 'moderate'
+        optimizations.push('Performance issue: Moderate throttling applied')
+        optimizations.push('Animation complexity reduced by 50%')
+        optimizations.push('Frame rate limited to 45fps')
+        optimizations.push('Memory optimization enabled')
+      } else if (metrics.performanceScore < 85 || metrics.fps < 55) {
+        newThrottleLevel = 'light'
+        optimizations.push('Performance warning: Light throttling applied')
+        optimizations.push('Animation complexity reduced by 25%')
+        optimizations.push('Frame rate limited to 55fps')
+        optimizations.push('Performance monitoring enhanced')
+      }
+      
+      // Battery preservation considerations
+      if (enableBatteryPreservation && newThrottleLevel !== 'none') {
+        optimizations.push('Battery preservation: Animation efficiency optimized')
+        optimizations.push('GPU usage minimized for power efficiency')
+      }
+      
+      // User experience optimization
+      if (enableUserExperienceOptimization && newThrottleLevel !== 'none') {
+        optimizations.push('User experience: Smooth performance prioritized')
+        optimizations.push('Animation quality balanced with performance')
+        optimizations.push('Responsive interactions maintained')
+      }
+      
+      setThrottleLevel(newThrottleLevel)
+      setOptimizations(prev => [...prev, ...optimizations])
+      setIsOptimizing(false)
+      
+      callbacks.onThrottlingApplied?.(newThrottleLevel, metrics.throttleReason)
+      
+      optimizations.forEach(optimization => {
+        callbacks.onUserExperienceOptimized?.(optimization)
+      })
+    }, 200)
+  }, [enableAutomaticThrottling, enableBatteryPreservation, enableUserExperienceOptimization, metrics, callbacks])
+
+  // Get throttling recommendations
+  const getThrottlingRecommendations = useCallback(() => {
+    const recommendations = []
+    
+    if (metrics.performanceScore < 50) {
+      recommendations.push('Critical: Disable all animations and complex UI operations')
+      recommendations.push('Use static UI elements and minimal interactions')
+      recommendations.push('Implement aggressive memory cleanup')
+    } else if (metrics.performanceScore < 70) {
+      recommendations.push('High: Significantly reduce animation complexity')
+      recommendations.push('Limit concurrent animations to 2-3 maximum')
+      recommendations.push('Use CSS transforms instead of JavaScript animations')
+    } else if (metrics.performanceScore < 85) {
+      recommendations.push('Medium: Consider light performance optimization')
+      recommendations.push('Monitor animation frame rates closely')
+      recommendations.push('Implement animation debouncing')
+    }
+    
+    if (metrics.fps < frameRateTarget * 0.8) {
+      recommendations.push('Low FPS: Reduce animation frame rate')
+      recommendations.push('Use requestAnimationFrame for smooth animations')
+      recommendations.push('Implement frame skipping for complex animations')
+    }
+    
+    if (metrics.memoryUsage > memoryThreshold) {
+      recommendations.push('High Memory: Optimize memory usage')
+      recommendations.push('Clean up animation references')
+      recommendations.push('Use object pooling for repeated animations')
+    }
+    
+    if (metrics.cpuUsage > cpuThreshold) {
+      recommendations.push('High CPU: Reduce computational complexity')
+      recommendations.push('Use CSS animations instead of JavaScript')
+      recommendations.push('Implement animation pausing when not visible')
+    }
+    
+    return recommendations
+  }, [metrics, frameRateTarget, memoryThreshold, cpuThreshold])
+
+  // Get optimal performance settings
+  const getOptimalPerformanceSettings = useCallback(() => {
+    const settings = {
+      maxConcurrentAnimations: 5,
+      frameRateLimit: 60,
+      animationQuality: 'high',
+      memoryOptimization: false,
+      cpuOptimization: false
+    }
+    
+    switch (throttleLevel) {
+      case 'aggressive':
+        settings.maxConcurrentAnimations = 1
+        settings.frameRateLimit = 30
+        settings.animationQuality = 'minimal'
+        settings.memoryOptimization = true
+        settings.cpuOptimization = true
+        break
+      case 'moderate':
+        settings.maxConcurrentAnimations = 2
+        settings.frameRateLimit = 45
+        settings.animationQuality = 'medium'
+        settings.memoryOptimization = true
+        settings.cpuOptimization = true
+        break
+      case 'light':
+        settings.maxConcurrentAnimations = 3
+        settings.frameRateLimit = 55
+        settings.animationQuality = 'high'
+        settings.memoryOptimization = true
+        settings.cpuOptimization = false
+        break
+      default:
+        settings.maxConcurrentAnimations = 5
+        settings.frameRateLimit = 60
+        settings.animationQuality = 'high'
+        settings.memoryOptimization = false
+        settings.cpuOptimization = false
+    }
+    
+    return settings
+  }, [throttleLevel])
+
+  // Reset throttling
+  const resetThrottling = useCallback(() => {
+    setThrottleLevel('none')
+    setOptimizations([])
+    setMetrics(prev => ({
+      ...prev,
+      isThrottling: false,
+      throttleReason: 'none'
+    }))
+  }, [])
+
+  // Initialize performance monitoring
+  useEffect(() => {
+    if (!enablePerformanceMonitoring) return
+
+    try {
+      performanceTimerRef.current = window.setInterval(measurePerformance, 1000)
+      
+      return () => {
+        if (performanceTimerRef.current) {
+          clearInterval(performanceTimerRef.current)
+        }
+      }
+    } catch (error) {
+      console.warn('Performance monitoring initialization failed:', error)
+    }
+  }, [enablePerformanceMonitoring, measurePerformance])
+
+  // Apply throttling when performance degrades
+  useEffect(() => {
+    if (enableAutomaticThrottling && metrics.isThrottling) {
+      throttlingTimerRef.current = window.setTimeout(applyPerformanceThrottling, 1000)
+      
+      return () => {
+        if (throttlingTimerRef.current) {
+          clearTimeout(throttlingTimerRef.current)
+        }
+      }
+    }
+  }, [enableAutomaticThrottling, metrics.isThrottling, applyPerformanceThrottling])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (throttlingTimerRef.current) {
+        clearTimeout(throttlingTimerRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    // State
+    metrics,
+    isOptimizing,
+    optimizations,
+    throttleLevel,
+    
+    // Actions
+    measurePerformance,
+    applyPerformanceThrottling,
+    resetThrottling,
+    
+    // Computed values
+    isThrottling: throttleLevel !== 'none',
+    performanceLevel: metrics.performanceScore >= 90 ? 'excellent' : 
+                     metrics.performanceScore >= 80 ? 'good' : 
+                     metrics.performanceScore >= 70 ? 'fair' : 'poor',
+    needsOptimization: metrics.performanceScore < 70,
+    recommendations: getThrottlingRecommendations(),
+    performanceSettings: getOptimalPerformanceSettings(),
+    
+    // Utility functions
+    getPerformanceHealth: () => {
+      if (metrics.performanceScore >= 90) return 'excellent'
+      if (metrics.performanceScore >= 80) return 'good'
+      if (metrics.performanceScore >= 70) return 'fair'
+      if (metrics.performanceScore >= 50) return 'poor'
+      return 'critical'
+    }
+  }
+}
+
+export default usePerformanceThrottling

package/src/hooks/use-performance.ts

@@ -0,0 +1,316 @@
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
+
+export interface PerformanceMetrics {
+  fps: number
+  frameTime: number
+  memoryUsage?: number
+  memoryLimit?: number
+  memoryPercentage?: number
+  batteryLevel?: number
+  isLowPowerMode?: boolean
+  isCharging?: boolean
+  performanceMode: 'high' | 'medium' | 'low'
+  throttlingEnabled: boolean
+  throttlingReason?: string
+}
+
+export interface PerformanceThresholds {
+  fps: {
+    warning: number
+    critical: number
+  }
+  memory: {
+    warning: number
+    critical: number
+  }
+  battery: {
+    low: number
+    critical: number
+  }
+}
+
+export interface PerformanceCallbacks {
+  onFPSWarning?: (fps: number) => void
+  onMemoryWarning?: (usage: number) => void
+  onBatteryLow?: (level: number) => void
+  onPerformanceModeChange?: (mode: PerformanceMetrics['performanceMode']) => void
+  onThrottlingChange?: (enabled: boolean, reason?: string) => void
+}
+
+export interface PerformanceOptions {
+  updateInterval?: number
+  thresholds?: Partial<PerformanceThresholds>
+  enableThrottling?: boolean
+  enableBatteryOptimization?: boolean
+  callbacks?: PerformanceCallbacks
+}
+
+const DEFAULT_THRESHOLDS: PerformanceThresholds = {
+  fps: {
+    warning: 45,
+    critical: 30
+  },
+  memory: {
+    warning: 0.7,
+    critical: 0.85
+  },
+  battery: {
+    low: 0.3,
+    critical: 0.15
+  }
+}
+
+export const usePerformance = (options: PerformanceOptions = {}) => {
+  const {
+    updateInterval = 1000,
+    thresholds = {},
+    enableThrottling = true,
+    enableBatteryOptimization = true,
+    callbacks = {}
+  } = options
+
+  const [metrics, setMetrics] = useState<PerformanceMetrics>({
+    fps: 60,
+    frameTime: 16.67,
+    performanceMode: 'high',
+    throttlingEnabled: false
+  })
+
+  const [isMonitoring, setIsMonitoring] = useState(false)
+  const frameCountRef = useRef(0)
+  const lastTimeRef = useRef(performance.now())
+  const animationIdRef = useRef<number>()
+  const intervalIdRef = useRef<NodeJS.Timeout>()
+
+  // Merge default thresholds with custom ones
+  const finalThresholds = useMemo(() => ({
+    ...DEFAULT_THRESHOLDS,
+    ...thresholds
+  }), [thresholds])
+
+  // Frame rate monitoring
+  const measureFrameRate = useCallback(() => {
+    frameCountRef.current++
+    const currentTime = performance.now()
+    
+    if (currentTime - lastTimeRef.current >= updateInterval) {
+      const fps = Math.round((frameCountRef.current * 1000) / (currentTime - lastTimeRef.current))
+      const frameTime = 1000 / fps
+      
+      setMetrics(prev => ({
+        ...prev,
+        fps,
+        frameTime
+      }))
+
+      // Check FPS thresholds
+      if (fps <= finalThresholds.fps.critical && callbacks.onFPSWarning) {
+        callbacks.onFPSWarning(fps)
+      }
+
+      frameCountRef.current = 0
+      lastTimeRef.current = currentTime
+    }
+
+    animationIdRef.current = requestAnimationFrame(measureFrameRate)
+  }, [updateInterval, finalThresholds.fps.critical, callbacks.onFPSWarning])
+
+  // Memory usage monitoring
+  const updateMemoryInfo = useCallback(() => {
+    if ('memory' in performance) {
+      const memory = (performance as any).memory
+      const memoryUsage = memory.usedJSHeapSize / memory.jsHeapSizeLimit
+      
+      setMetrics(prev => ({
+        ...prev,
+        memoryUsage,
+        memoryLimit: memory.jsHeapSizeLimit,
+        memoryPercentage: memoryUsage * 100
+      }))
+
+      // Check memory thresholds
+      if (memoryUsage >= finalThresholds.memory.critical && callbacks.onMemoryWarning) {
+        callbacks.onMemoryWarning(memoryUsage)
+      }
+    }
+  }, [finalThresholds.memory.critical, callbacks.onMemoryWarning])
+
+  // Battery status monitoring
+  const updateBatteryInfo = useCallback(async () => {
+    if ('getBattery' in navigator) {
+      try {
+        const battery = await (navigator as any).getBattery()
+        
+        setMetrics(prev => ({
+          ...prev,
+          batteryLevel: battery.level,
+          isLowPowerMode: battery.level < finalThresholds.battery.low,
+          isCharging: battery.charging
+        }))
+
+        // Check battery thresholds
+        if (battery.level <= finalThresholds.battery.critical && callbacks.onBatteryLow) {
+          callbacks.onBatteryLow(battery.level)
+        }
+      } catch (error) {
+        console.warn('Battery API not available:', error)
+      }
+    }
+  }, [finalThresholds.battery.low, finalThresholds.battery.critical, callbacks.onBatteryLow])
+
+  // Performance mode determination
+  const determinePerformanceMode = useCallback((fps: number, memoryUsage?: number): PerformanceMetrics['performanceMode'] => {
+    if (fps < finalThresholds.fps.critical || (memoryUsage && memoryUsage > finalThresholds.memory.critical)) {
+      return 'low'
+    }
+    if (fps < finalThresholds.fps.warning || (memoryUsage && memoryUsage > finalThresholds.memory.warning)) {
+      return 'medium'
+    }
+    return 'high'
+  }, [finalThresholds])
+
+  // Performance throttling logic
+  const shouldThrottle = useCallback((): { should: boolean; reason?: string } => {
+    const { fps, memoryPercentage, batteryLevel, isLowPowerMode } = metrics
+    
+    // FPS-based throttling
+    if (fps < finalThresholds.fps.critical) {
+      return { should: true, reason: 'Low FPS' }
+    }
+    
+    // Memory-based throttling
+    if (memoryPercentage && memoryPercentage > finalThresholds.memory.critical * 100) {
+      return { should: true, reason: 'High memory usage' }
+    }
+    
+    // Battery-based throttling
+    if (enableBatteryOptimization && (isLowPowerMode || (batteryLevel && batteryLevel < finalThresholds.battery.low))) {
+      return { should: true, reason: 'Low battery' }
+    }
+    
+    return { should: false }
+  }, [metrics, finalThresholds, enableBatteryOptimization])
+
+  // Update performance mode and throttling
+  useEffect(() => {
+    const newMode = determinePerformanceMode(metrics.fps, metrics.memoryUsage)
+    const { should: shouldThrottleNow, reason } = shouldThrottle()
+    
+    setMetrics(prev => ({
+      ...prev,
+      performanceMode: newMode,
+      throttlingEnabled: enableThrottling && shouldThrottleNow,
+      throttlingReason: reason
+    }))
+
+    // Notify callbacks
+    if (newMode !== metrics.performanceMode && callbacks.onPerformanceModeChange) {
+      callbacks.onPerformanceModeChange(newMode)
+    }
+
+    if (enableThrottling && shouldThrottleNow !== metrics.throttlingEnabled && callbacks.onThrottlingChange) {
+      callbacks.onThrottlingChange(shouldThrottleNow, reason)
+    }
+  }, [metrics.fps, metrics.memoryUsage, metrics.batteryLevel, metrics.isLowPowerMode, enableThrottling, determinePerformanceMode, shouldThrottle, callbacks, metrics.performanceMode, metrics.throttlingEnabled])
+
+  // Start monitoring
+  const startMonitoring = useCallback(() => {
+    if (isMonitoring) return
+
+    setIsMonitoring(true)
+    measureFrameRate()
+    
+    // Set up interval for memory and battery updates
+    intervalIdRef.current = setInterval(() => {
+      updateMemoryInfo()
+      updateBatteryInfo()
+    }, updateInterval)
+  }, [isMonitoring, measureFrameRate, updateMemoryInfo, updateBatteryInfo, updateInterval])
+
+  // Stop monitoring
+  const stopMonitoring = useCallback(() => {
+    setIsMonitoring(false)
+    
+    if (animationIdRef.current) {
+      cancelAnimationFrame(animationIdRef.current)
+    }
+    
+    if (intervalIdRef.current) {
+      clearInterval(intervalIdRef.current)
+    }
+  }, [])
+
+  // Auto-start monitoring on mount
+  useEffect(() => {
+    startMonitoring()
+    return () => stopMonitoring()
+  }, [startMonitoring, stopMonitoring])
+
+  // Performance optimization recommendations
+  const getOptimizationRecommendations = useCallback(() => {
+    const recommendations: string[] = []
+    
+    if (metrics.fps < finalThresholds.fps.warning) {
+      recommendations.push('Consider reducing animation complexity or enabling performance mode')
+    }
+    
+    if (metrics.memoryPercentage && metrics.memoryPercentage > finalThresholds.memory.warning * 100) {
+      recommendations.push('Memory usage is high - consider implementing lazy loading or cleanup')
+    }
+    
+    if (metrics.isLowPowerMode) {
+      recommendations.push('Low battery detected - performance optimizations are active')
+    }
+    
+    return recommendations
+  }, [metrics, finalThresholds])
+
+  // Throttling controls
+  const enableThrottlingMode = useCallback(() => {
+    setMetrics(prev => ({
+      ...prev,
+      throttlingEnabled: true,
+      throttlingReason: 'Manual override'
+    }))
+  }, [])
+
+  const disableThrottlingMode = useCallback(() => {
+    setMetrics(prev => ({
+      ...prev,
+      throttlingEnabled: false,
+      throttlingReason: undefined
+    }))
+  }, [])
+
+  return {
+    // Metrics
+    metrics,
+    
+    // Controls
+    startMonitoring,
+    stopMonitoring,
+    isMonitoring,
+    
+    // Throttling
+    throttlingEnabled: metrics.throttlingEnabled,
+    throttlingReason: metrics.throttlingReason,
+    enableThrottlingMode,
+    disableThrottlingMode,
+    
+    // Performance mode
+    performanceMode: metrics.performanceMode,
+    
+    // Recommendations
+    getOptimizationRecommendations,
+    
+    // Thresholds
+    thresholds: finalThresholds,
+    
+    // Raw values for advanced usage
+    fps: metrics.fps,
+    frameTime: metrics.frameTime,
+    memoryUsage: metrics.memoryUsage,
+    batteryLevel: metrics.batteryLevel,
+    isLowPowerMode: metrics.isLowPowerMode
+  }
+}