@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.17

package/dist/hooks/use-frame-rate.esm.js

@@ -1,251 +1,178 @@
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
-
-export interface FrameRateMetrics {
-  fps: number
-  frameTime: number
-  frameCount: number
-  averageFPS: number
-  minFPS: number
-  maxFPS: number
-  droppedFrames: number
-  performanceScore: 'excellent' | 'good' | 'fair' | 'poor'
-}
-
-export interface FrameRateThresholds {
-  warning: number
-  critical: number
-  excellent: number
-}
-
-export interface FrameRateCallbacks {
-  onFPSWarning?: (fps: number) => void
-  onFPSDrop?: (fps: number, previousFPS: number) => void
-  onPerformanceScoreChange?: (score: FrameRateMetrics['performanceScore']) => void
-}
-
-export interface FrameRateOptions {
-  updateInterval?: number
-  sampleSize?: number
-  thresholds?: Partial<FrameRateThresholds>
-  callbacks?: FrameRateCallbacks
-}
-
-const DEFAULT_THRESHOLDS: FrameRateThresholds = {
-  warning: 45,
-  critical: 30,
-  excellent: 55
-}
-
-const DEFAULT_SAMPLE_SIZE = 60 // 1 second at 60fps
-
-export const useFrameRate = (options: FrameRateOptions = {}) => {
-  const {
-    updateInterval = 1000,
-    sampleSize = DEFAULT_SAMPLE_SIZE,
-    thresholds = {},
-    callbacks = {}
-  } = options
-
-  const [metrics, setMetrics] = useState<FrameRateMetrics>({
-    fps: 60,
-    frameTime: 16.67,
-    frameCount: 0,
-    averageFPS: 60,
-    minFPS: 60,
-    maxFPS: 60,
-    droppedFrames: 0,
-    performanceScore: 'excellent'
-  })
-
-  const [isMonitoring, setIsMonitoring] = useState(false)
-  const frameCountRef = useRef(0)
-  const lastTimeRef = useRef(performance.now())
-  const animationIdRef = useRef<number>()
-  const intervalIdRef = useRef<NodeJS.Timeout>()
-  const fpsHistoryRef = useRef<number[]>([])
-  const previousFPSRef = useRef(60)
-
-  // Merge default thresholds with custom ones
-  const finalThresholds = useMemo(() => ({
-    ...DEFAULT_THRESHOLDS,
-    ...thresholds
-  }), [thresholds])
-
-  // Calculate performance score based on FPS
-  const calculatePerformanceScore = useCallback((fps: number): FrameRateMetrics['performanceScore'] => {
-    if (fps >= finalThresholds.excellent) return 'excellent'
-    if (fps >= finalThresholds.warning) return 'good'
-    if (fps >= finalThresholds.critical) return 'fair'
-    return 'poor'
-  }, [finalThresholds])
-
-  // Update FPS history and calculate statistics
-  const updateFPSHistory = useCallback((fps: number) => {
-    fpsHistoryRef.current.push(fps)
-    
-    // Keep only the last sampleSize frames
-    if (fpsHistoryRef.current.length > sampleSize) {
-      fpsHistoryRef.current.shift()
-    }
-
-    // Calculate statistics
-    const averageFPS = Math.round(
-      fpsHistoryRef.current.reduce((sum, f) => sum + f, 0) / fpsHistoryRef.current.length
-    )
-    const minFPS = Math.min(...fpsHistoryRef.current)
-    const maxFPS = Math.max(...fpsHistoryRef.current)
-
-    return { averageFPS, minFPS, maxFPS }
-  }, [sampleSize])
-
-  // Detect dropped frames
-  const detectDroppedFrames = useCallback((fps: number, previousFPS: number) => {
-    if (fps < previousFPS && previousFPS >= finalThresholds.warning) {
-      const drop = previousFPS - fps
-      if (drop > 10) { // Significant drop
-        return drop
-      }
-    }
-    return 0
-  }, [finalThresholds.warning])
-
-  // 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
-      
-      // Update FPS history and get statistics
-      const { averageFPS, minFPS, maxFPS } = updateFPSHistory(fps)
-      
-      // Detect dropped frames
-      const droppedFrames = detectDroppedFrames(fps, previousFPSRef.current)
-      
-      // Calculate performance score
-      const performanceScore = calculatePerformanceScore(fps)
-      
-      const newMetrics: FrameRateMetrics = {
-        fps,
-        frameTime,
-        frameCount: frameCountRef.current,
-        averageFPS,
-        minFPS,
-        maxFPS,
-        droppedFrames,
-        performanceScore
-      }
-
-      setMetrics(newMetrics)
-
-      // Check thresholds and call callbacks
-      if (fps <= finalThresholds.critical && callbacks.onFPSWarning) {
-        callbacks.onFPSWarning(fps)
-      }
-
-      if (droppedFrames > 0 && callbacks.onFPSDrop) {
-        callbacks.onFPSDrop(fps, previousFPSRef.current)
-      }
-
-      // Check if performance score changed
-      if (performanceScore !== metrics.performanceScore && callbacks.onPerformanceScoreChange) {
-        callbacks.onPerformanceScoreChange(performanceScore)
-      }
-
-      // Reset counters
-      frameCountRef.current = 0
-      lastTimeRef.current = currentTime
-      previousFPSRef.current = fps
-    }
-
-    animationIdRef.current = requestAnimationFrame(measureFrameRate)
-  }, [updateInterval, finalThresholds.critical, callbacks, metrics.performanceScore, updateFPSHistory, detectDroppedFrames, calculatePerformanceScore])
-
-  // Start monitoring
-  const startMonitoring = useCallback(() => {
-    if (isMonitoring) return
-
-    setIsMonitoring(true)
-    measureFrameRate()
-  }, [isMonitoring, measureFrameRate])
-
-  // Stop monitoring
-  const stopMonitoring = useCallback(() => {
-    setIsMonitoring(false)
-    
-    if (animationIdRef.current) {
-      cancelAnimationFrame(animationIdRef.current)
-    }
-    
-    if (intervalIdRef.current) {
-      clearInterval(intervalIdRef.current)
-    }
-  }, [])
-
-  // Reset statistics
-  const resetStats = useCallback(() => {
-    fpsHistoryRef.current = []
-    setMetrics(prev => ({
-      ...prev,
-      averageFPS: 60,
-      minFPS: 60,
-      maxFPS: 60,
-      droppedFrames: 0
-    }))
-  }, [])
-
-  // Auto-start monitoring on mount
-  useEffect(() => {
-    startMonitoring()
-    return () => stopMonitoring()
-  }, [startMonitoring, stopMonitoring])
-
-  // Performance insights
-  const getPerformanceInsights = useCallback(() => {
-    const insights: string[] = []
-    
-    if (metrics.fps < finalThresholds.critical) {
-      insights.push('Critical FPS drop detected - consider reducing animation complexity')
-    } else if (metrics.fps < finalThresholds.warning) {
-      insights.push('FPS below optimal range - monitor for performance issues')
-    }
-    
-    if (metrics.droppedFrames > 0) {
-      insights.push(`${metrics.droppedFrames} frames dropped - check for heavy operations`)
-    }
-    
-    if (metrics.averageFPS < 50) {
-      insights.push('Average FPS is low - consider performance optimizations')
-    }
-    
-    return insights
-  }, [metrics, finalThresholds])
-
-  return {
-    // Metrics
-    metrics,
-    
-    // Controls
-    startMonitoring,
-    stopMonitoring,
-    isMonitoring,
-    resetStats,
-    
-    // Performance analysis
-    performanceScore: metrics.performanceScore,
-    getPerformanceInsights,
-    
-    // Raw values
-    fps: metrics.fps,
-    frameTime: metrics.frameTime,
-    averageFPS: metrics.averageFPS,
-    minFPS: metrics.minFPS,
-    maxFPS: metrics.maxFPS,
-    droppedFrames: metrics.droppedFrames,
-    
-    // Thresholds
-    thresholds: finalThresholds
-  }
-}
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+const DEFAULT_THRESHOLDS = {
+    warning: 45,
+    critical: 30,
+    excellent: 55
+};
+const DEFAULT_SAMPLE_SIZE = 60; // 1 second at 60fps
+export const useFrameRate = (options = {}) => {
+    const { updateInterval = 1000, sampleSize = DEFAULT_SAMPLE_SIZE, thresholds = {}, callbacks = {} } = options;
+    const [metrics, setMetrics] = useState({
+        fps: 60,
+        frameTime: 16.67,
+        frameCount: 0,
+        averageFPS: 60,
+        minFPS: 60,
+        maxFPS: 60,
+        droppedFrames: 0,
+        performanceScore: 'excellent'
+    });
+    const [isMonitoring, setIsMonitoring] = useState(false);
+    const frameCountRef = useRef(0);
+    const lastTimeRef = useRef(performance.now());
+    const animationIdRef = useRef();
+    const intervalIdRef = useRef();
+    const fpsHistoryRef = useRef([]);
+    const previousFPSRef = useRef(60);
+    // Merge default thresholds with custom ones
+    const finalThresholds = useMemo(() => ({
+        ...DEFAULT_THRESHOLDS,
+        ...thresholds
+    }), [thresholds]);
+    // Calculate performance score based on FPS
+    const calculatePerformanceScore = useCallback((fps) => {
+        if (fps >= finalThresholds.excellent)
+            return 'excellent';
+        if (fps >= finalThresholds.warning)
+            return 'good';
+        if (fps >= finalThresholds.critical)
+            return 'fair';
+        return 'poor';
+    }, [finalThresholds]);
+    // Update FPS history and calculate statistics
+    const updateFPSHistory = useCallback((fps) => {
+        fpsHistoryRef.current.push(fps);
+        // Keep only the last sampleSize frames
+        if (fpsHistoryRef.current.length > sampleSize) {
+            fpsHistoryRef.current.shift();
+        }
+        // Calculate statistics
+        const averageFPS = Math.round(fpsHistoryRef.current.reduce((sum, f) => sum + f, 0) / fpsHistoryRef.current.length);
+        const minFPS = Math.min(...fpsHistoryRef.current);
+        const maxFPS = Math.max(...fpsHistoryRef.current);
+        return { averageFPS, minFPS, maxFPS };
+    }, [sampleSize]);
+    // Detect dropped frames
+    const detectDroppedFrames = useCallback((fps, previousFPS) => {
+        if (fps < previousFPS && previousFPS >= finalThresholds.warning) {
+            const drop = previousFPS - fps;
+            if (drop > 10) { // Significant drop
+                return drop;
+            }
+        }
+        return 0;
+    }, [finalThresholds.warning]);
+    // 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;
+            // Update FPS history and get statistics
+            const { averageFPS, minFPS, maxFPS } = updateFPSHistory(fps);
+            // Detect dropped frames
+            const droppedFrames = detectDroppedFrames(fps, previousFPSRef.current);
+            // Calculate performance score
+            const performanceScore = calculatePerformanceScore(fps);
+            const newMetrics = {
+                fps,
+                frameTime,
+                frameCount: frameCountRef.current,
+                averageFPS,
+                minFPS,
+                maxFPS,
+                droppedFrames,
+                performanceScore
+            };
+            setMetrics(newMetrics);
+            // Check thresholds and call callbacks
+            if (fps <= finalThresholds.critical && callbacks.onFPSWarning) {
+                callbacks.onFPSWarning(fps);
+            }
+            if (droppedFrames > 0 && callbacks.onFPSDrop) {
+                callbacks.onFPSDrop(fps, previousFPSRef.current);
+            }
+            // Check if performance score changed
+            if (performanceScore !== metrics.performanceScore && callbacks.onPerformanceScoreChange) {
+                callbacks.onPerformanceScoreChange(performanceScore);
+            }
+            // Reset counters
+            frameCountRef.current = 0;
+            lastTimeRef.current = currentTime;
+            previousFPSRef.current = fps;
+        }
+        animationIdRef.current = requestAnimationFrame(measureFrameRate);
+    }, [updateInterval, finalThresholds.critical, callbacks, metrics.performanceScore, updateFPSHistory, detectDroppedFrames, calculatePerformanceScore]);
+    // Start monitoring
+    const startMonitoring = useCallback(() => {
+        if (isMonitoring)
+            return;
+        setIsMonitoring(true);
+        measureFrameRate();
+    }, [isMonitoring, measureFrameRate]);
+    // Stop monitoring
+    const stopMonitoring = useCallback(() => {
+        setIsMonitoring(false);
+        if (animationIdRef.current) {
+            cancelAnimationFrame(animationIdRef.current);
+        }
+        if (intervalIdRef.current) {
+            clearInterval(intervalIdRef.current);
+        }
+    }, []);
+    // Reset statistics
+    const resetStats = useCallback(() => {
+        fpsHistoryRef.current = [];
+        setMetrics(prev => ({
+            ...prev,
+            averageFPS: 60,
+            minFPS: 60,
+            maxFPS: 60,
+            droppedFrames: 0
+        }));
+    }, []);
+    // Auto-start monitoring on mount
+    useEffect(() => {
+        startMonitoring();
+        return () => stopMonitoring();
+    }, [startMonitoring, stopMonitoring]);
+    // Performance insights
+    const getPerformanceInsights = useCallback(() => {
+        const insights = [];
+        if (metrics.fps < finalThresholds.critical) {
+            insights.push('Critical FPS drop detected - consider reducing animation complexity');
+        }
+        else if (metrics.fps < finalThresholds.warning) {
+            insights.push('FPS below optimal range - monitor for performance issues');
+        }
+        if (metrics.droppedFrames > 0) {
+            insights.push(`${metrics.droppedFrames} frames dropped - check for heavy operations`);
+        }
+        if (metrics.averageFPS < 50) {
+            insights.push('Average FPS is low - consider performance optimizations');
+        }
+        return insights;
+    }, [metrics, finalThresholds]);
+    return {
+        // Metrics
+        metrics,
+        // Controls
+        startMonitoring,
+        stopMonitoring,
+        isMonitoring,
+        resetStats,
+        // Performance analysis
+        performanceScore: metrics.performanceScore,
+        getPerformanceInsights,
+        // Raw values
+        fps: metrics.fps,
+        frameTime: metrics.frameTime,
+        averageFPS: metrics.averageFPS,
+        minFPS: metrics.minFPS,
+        maxFPS: metrics.maxFPS,
+        droppedFrames: metrics.droppedFrames,
+        // Thresholds
+        thresholds: finalThresholds
+    };
+};