@moontra/moonui-pro 2.20.0 → 2.20.2

package/src/components/memory-efficient-data/index.tsx

@@ -5,7 +5,7 @@ import { motion, AnimatePresence } from 'framer-motion'
 import { cn } from '../../lib/utils'
 import { Search, Filter, Download, SortAsc, SortDesc, BarChart3, Cpu, Clock, Zap } from 'lucide-react'
 
-// Memory konfigürasyonu için tip tanımları  
+// Type definitions for memory configuration  
 interface MemoryConfig {
   chunkSize?: number
   maxMemoryItems?: number
@@ -16,7 +16,7 @@ interface MemoryConfig {
   streamingMode?: boolean
   enableAnalytics?: boolean
   analyticsCallback?: (stats: MemoryStats) => void
-  // Yeni özellikler
+  // New features
   variableHeight?: boolean
   preloadStrategy?: 'none' | 'aggressive' | 'smart'
   performanceTracking?: boolean
@@ -27,7 +27,7 @@ interface MemoryConfig {
   animations?: boolean
 }
 
-// Performance metrikleri için tip tanımı
+// Type definition for performance metrics
 interface MemoryPerformanceMetrics {
   fps: number
   renderTime: number
@@ -36,7 +36,7 @@ interface MemoryPerformanceMetrics {
   lastUpdate: number
 }
 
-// Search/Sort/Filter için tip tanımları
+// Type definitions for Search/Sort/Filter
 interface TableFeatures<T> {
   searchTerm?: string
   sortConfig?: {
@@ -50,14 +50,14 @@ interface TableFeatures<T> {
   }>
 }
 
-// Height measurement için tip tanımı
+// Type definition for height measurement
 interface ItemHeightInfo {
   index: number
   height: number
   offset: number
 }
 
-// Memory istatistikleri için tip tanımı
+// Type definition for memory statistics
 interface MemoryStats {
   memoryUsage: number
   itemCount: number
@@ -67,7 +67,7 @@ interface MemoryStats {
   performance?: MemoryPerformanceMetrics
 }
 
-// Ana component props
+// Main component props
 export interface MemoryEfficientDataProps<T = any> {
   data: T[]
   config?: MemoryConfig
@@ -75,7 +75,7 @@ export interface MemoryEfficientDataProps<T = any> {
   height?: number
   onMemoryUpdate?: (stats: MemoryStats) => void
   className?: string
-  // Yeni özellikler
+  // New features
   itemHeight?: number | ((item: T, index: number) => number)
   onSearch?: (searchTerm: string) => T[]
   onSort?: (data: T[], key: keyof T, direction: 'asc' | 'desc') => T[]
@@ -127,7 +127,7 @@ class MemoryCache<T> {
 
     switch (this.strategy) {
       case 'lru':
-        // En eski erişileni sil
+        // Delete least recently used
         let oldestTime = Infinity
         for (const [key, node] of this.cache) {
           if (node.timestamp < oldestTime) {
@@ -138,7 +138,7 @@ class MemoryCache<T> {
         break
 
       case 'lfu':
-        // En az kullanılanı sil
+        // Delete least frequently used
         let minAccess = Infinity
         for (const [key, node] of this.cache) {
           if (node.accessCount < minAccess) {
@@ -149,7 +149,7 @@ class MemoryCache<T> {
         break
 
       case 'fifo':
-        // İlk gireni sil
+        // Delete first in
         keyToDelete = this.cache.keys().next().value || null
         break
     }
@@ -184,7 +184,7 @@ class MemoryCache<T> {
     return total === 0 ? 0 : this.hitCount / total
   }
 
-  // Hit/miss tracking için güncelle
+  // Update for hit/miss tracking
   get(key: string): T[] | null {
     const node = this.cache.get(key)
     if (!node) {
@@ -214,7 +214,7 @@ class PerformanceTracker {
     const renderTime = performance.now() - this.startTime
     this.renderTimes.push(renderTime)
     
-    // Son 60 render time'ı tut
+    // Keep last 60 render times
     if (this.renderTimes.length > 60) {
       this.renderTimes.shift()
     }
@@ -226,7 +226,7 @@ class PerformanceTracker {
       const fps = 1000 / (now - this.lastFrameTime)
       this.frames.push(fps)
       
-      // Son 60 frame'i tut
+      // Keep last 60 frames
       if (this.frames.length > 60) {
         this.frames.shift()
       }
@@ -253,12 +253,12 @@ class PerformanceTracker {
   }
 
   private detectMemoryLeaks(): number {
-    // Basit memory leak detection
+    // Simple memory leak detection
     return this.renderTimes.filter(time => time > 16).length // 16ms = 60fps threshold
   }
 
   private calculateScrollPerformance(): number {
-    // Scroll performance hesaplama (0-100 score)
+    // Calculate scroll performance (0-100 score)
     const avgFPS = this.frames.length > 0 
       ? this.frames.reduce((a, b) => a + b, 0) / this.frames.length 
       : 60
@@ -318,7 +318,7 @@ class VariableHeightManager {
     let start = 0
     let currentOffset = 0
     
-    // Scroll position'a kadar olan itemları say
+    // Count items up to scroll position
     while (start < itemCount && currentOffset < scrollTop) {
       currentOffset += this.getItemHeight(start)
       start++
@@ -326,7 +326,7 @@ class VariableHeightManager {
     
     start = Math.max(0, start - 1)
     
-    // Görünür alan boyunca devam et
+    // Continue through visible area
     let end = start
     const targetOffset = scrollTop + containerHeight
     currentOffset = this.getOffsetForIndex(start)
@@ -340,22 +340,22 @@ class VariableHeightManager {
   }
 }
 
-// Ana Memory Efficient Data Component
-export function MemoryEfficientData<T = any>({
+// Main Memory Efficient Data Component
+function MemoryEfficientData<T = any>({
   data,
   config = {},
   renderItem,
   height = 400,
   onMemoryUpdate,
   className,
-  // Yeni props
+  // New props
   itemHeight = 60,
   onSearch,
   onSort,
   onFilter,
   onExport,
-  searchPlaceholder = "Ara...",
-  emptyStateMessage = "Veri bulunamadı",
+  searchPlaceholder = "Search...",
+  emptyStateMessage = "No data found",
   loadingComponent,
   errorComponent
 }: MemoryEfficientDataProps<T>) {
@@ -369,7 +369,7 @@ export function MemoryEfficientData<T = any>({
     streamingMode = false,
     enableAnalytics = false,
     analyticsCallback,
-    // Yeni konfigürasyonlar
+    // New configurations
     variableHeight = false,
     preloadStrategy = 'smart',
     performanceTracking = false,
@@ -380,7 +380,7 @@ export function MemoryEfficientData<T = any>({
     animations = true
   } = config
 
-  // State yönetimi
+  // State management
   const [visibleRange, setVisibleRange] = useState({ start: 0, end: Math.min(chunkSize, data.length) })
   const [memoryStats, setMemoryStats] = useState<MemoryStats>({
     memoryUsage: 0,
@@ -392,8 +392,6 @@ export function MemoryEfficientData<T = any>({
     sortConfig: undefined,
     filters: []
   })
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
 
   // Refs
   const containerRef = useRef<HTMLDivElement>(null)
@@ -403,13 +401,11 @@ export function MemoryEfficientData<T = any>({
   const heightManagerRef = useRef(new VariableHeightManager(typeof itemHeight === 'number' ? itemHeight : 60))
   const itemRefs = useRef<Map<number, HTMLDivElement>>(new Map())
 
-  // İşlenmiş data'yı hesapla (search, sort, filter)
+  // Calculate processed data (search, sort, filter)
   const processedData = useMemo(() => {
     let result = [...data]
     
     try {
-      setIsLoading(true)
-      
       // Search functionality
       if (enableSearch && tableFeatures.searchTerm && onSearch) {
         result = onSearch(tableFeatures.searchTerm)
@@ -425,17 +421,14 @@ export function MemoryEfficientData<T = any>({
         result = onSort(result, tableFeatures.sortConfig.key, tableFeatures.sortConfig.direction)
       }
       
-      setError(null)
       return result
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Veri işlenirken hata oluştu')
+      console.error('Error processing data:', err)
       return data
-    } finally {
-      setIsLoading(false)
     }
   }, [data, tableFeatures, enableSearch, enableFilter, enableSort, onSearch, onFilter, onSort])
 
-  // Visible data'yı memoize et
+  // Memoize visible data
   const visibleData = useMemo(() => {
     if (performanceTracking) {
       performanceTrackerRef.current.startRender()
@@ -444,7 +437,7 @@ export function MemoryEfficientData<T = any>({
     const start = visibleRange.start
     const end = Math.min(visibleRange.end, processedData.length)
     
-    // Cache'den kontrol et
+    // Check from cache
     const cacheKey = `${start}-${end}-${JSON.stringify(tableFeatures)}`
     const cachedData = cacheRef.current.get(cacheKey)
     
@@ -455,10 +448,10 @@ export function MemoryEfficientData<T = any>({
       return cachedData
     }
 
-    // Yeni data slice'ını oluştur
+    // Create new data slice
     const newData = processedData.slice(start, end)
     
-    // Cache'e kaydet
+    // Save to cache
     cacheRef.current.set(cacheKey, newData, compression)
     
     if (performanceTracking) {
@@ -498,17 +491,17 @@ export function MemoryEfficientData<T = any>({
     let newStart: number, newEnd: number
     
     if (variableHeight) {
-      // Variable height kullan
+      // Use variable height
       const range = heightManagerRef.current.getVisibleRange(scrollTop, containerHeight, processedData.length)
       newStart = range.start
       newEnd = range.end
     } else {
-      // Fixed height kullan
+      // Use fixed height
       const itemHeightValue = typeof itemHeight === 'number' ? itemHeight : 60
       const startIndex = Math.floor(scrollTop / itemHeightValue)
       const visibleCount = Math.ceil(containerHeight / itemHeightValue)
       
-      // Buffer ekle
+      // Add buffer
       const bufferSize = Math.floor(visibleCount * 0.5)
       newStart = Math.max(0, startIndex - bufferSize)
       newEnd = Math.min(processedData.length, startIndex + visibleCount + bufferSize)
@@ -520,7 +513,7 @@ export function MemoryEfficientData<T = any>({
       newStart = Math.max(0, newStart - extraBuffer)
       newEnd = Math.min(processedData.length, newEnd + extraBuffer)
     } else if (preloadStrategy === 'smart') {
-      // Scroll direction'a göre preload
+      // Preload based on scroll direction
       const currentScroll = scrollTop
       const lastScroll = scrollTimeoutRef.current ? parseInt(scrollTimeoutRef.current as any) : 0
       const isScrollingDown = currentScroll > lastScroll
@@ -547,22 +540,6 @@ export function MemoryEfficientData<T = any>({
     setTableFeatures(prev => ({ ...prev, searchTerm }))
   }, [])
 
-  // Sort handler
-  const handleSort = useCallback((key: keyof T) => {
-    setTableFeatures(prev => {
-      const currentDirection = prev.sortConfig?.key === key && prev.sortConfig?.direction === 'asc' ? 'desc' : 'asc'
-      return {
-        ...prev,
-        sortConfig: { key, direction: currentDirection }
-      }
-    })
-  }, [])
-
-  // Filter handler
-  const handleFilter = useCallback((filters: TableFeatures<T>['filters']) => {
-    setTableFeatures(prev => ({ ...prev, filters }))
-  }, [])
-
   // Export handler
   const handleExport = useCallback((format: 'csv' | 'json' | 'xlsx') => {
     if (onExport) {
@@ -570,30 +547,39 @@ export function MemoryEfficientData<T = any>({
     }
   }, [processedData, onExport])
 
-  // Memory statistics'i güncelle
+  // Update memory statistics - debounced to prevent excessive updates
   useEffect(() => {
-    const cacheStats = cacheRef.current.getStats()
-    const performanceMetrics = performanceTracking ? performanceTrackerRef.current.getMetrics() : undefined
+    if (!enableAnalytics && !onMemoryUpdate) return
     
-    const newStats: MemoryStats = {
-      memoryUsage: cacheStats.memoryUsage,
-      itemCount: visibleData.length,
-      cacheHitRate: cacheStats.hitRate,
-      compressionRatio: compression ? 0.7 : 1.0,
-      lastCleanup: Date.now(),
-      performance: performanceMetrics
-    }
+    const updateStats = () => {
+      const cacheStats = cacheRef.current.getStats()
+      const performanceMetrics = performanceTracking ? performanceTrackerRef.current.getMetrics() : undefined
+      
+      const newStats: MemoryStats = {
+        memoryUsage: cacheStats.memoryUsage,
+        itemCount: visibleData.length,
+        cacheHitRate: cacheStats.hitRate,
+        compressionRatio: compression ? 0.7 : 1.0,
+        lastCleanup: Date.now(),
+        performance: performanceMetrics
+      }
 
-    setMemoryStats(newStats)
-    
-    if (enableAnalytics && analyticsCallback) {
-      analyticsCallback(newStats)
-    }
+      setMemoryStats(newStats)
+      
+      if (enableAnalytics && analyticsCallback) {
+        analyticsCallback(newStats)
+      }
 
-    if (onMemoryUpdate) {
-      onMemoryUpdate(newStats)
+      if (onMemoryUpdate) {
+        onMemoryUpdate(newStats)
+      }
     }
-  }, [visibleData, enableAnalytics, analyticsCallback, onMemoryUpdate, compression, performanceTracking])
+    
+    // Debounce updates to prevent loops
+    const timeoutId = setTimeout(updateStats, 500)
+    
+    return () => clearTimeout(timeoutId)
+  }, [visibleData.length, enableAnalytics, performanceTracking, compression]) // Remove callbacks from deps
 
   // Auto cleanup effect
   useEffect(() => {
@@ -602,29 +588,25 @@ export function MemoryEfficientData<T = any>({
     const cleanupInterval = setInterval(() => {
       const memoryUsage = (visibleData.length / maxMemoryItems)
       if (memoryUsage > cleanupThreshold) {
-        // Basit cleanup - cache'i temizle
+        // Simple cleanup - clear cache
         cacheRef.current.clear()
       }
-    }, 5000) // Her 5 saniyede kontrol et
+    }, 5000) // Check every 5 seconds
 
     return () => clearInterval(cleanupInterval)
   }, [autoCleanup, cleanupThreshold, maxMemoryItems, visibleData.length])
 
-  // Loading ve Error states için render
-  if (error && errorComponent) {
-    return errorComponent
+  // Render for loading and error states
+  if (loadingComponent && data.length === 0) {
+    return <>{loadingComponent}</>
   }
 
-  if (isLoading && loadingComponent) {
-    return loadingComponent
-  }
-
-  // Total height hesapla
+  // Calculate total height
   const totalHeight = variableHeight 
     ? heightManagerRef.current.getTotalHeight(processedData.length)
     : processedData.length * (typeof itemHeight === 'number' ? itemHeight : 60)
 
-  // Offset hesapla
+  // Calculate offset
   const offsetY = variableHeight
     ? heightManagerRef.current.getOffsetForIndex(visibleRange.start)
     : visibleRange.start * (typeof itemHeight === 'number' ? itemHeight : 60)
@@ -655,9 +637,9 @@ export function MemoryEfficientData<T = any>({
           <div className="flex items-center gap-1">
             {enableFilter && (
               <button
-                onClick={() => {/* Filter modal açılacak */}}
+                onClick={() => {/* Filter modal will open */}}
                 className="p-2 hover:bg-muted rounded-md transition-colors"
-                title="Filtrele"
+                title="Filter"
               >
                 <Filter className="h-4 w-4" />
               </button>
@@ -668,7 +650,7 @@ export function MemoryEfficientData<T = any>({
                 <button
                   onClick={() => handleExport('csv')}
                   className="p-2 hover:bg-muted rounded-md transition-colors"
-                  title="Dışa Aktar"
+                  title="Export"
                 >
                   <Download className="h-4 w-4" />
                 </button>
@@ -770,11 +752,10 @@ interface RealTimePerformanceMonitorProps {
   updateInterval?: number
 }
 
-export function RealTimePerformanceMonitor({
+function RealTimePerformanceMonitor({
   memoryStats,
   className,
-  showChart = false,
-  updateInterval = 1000
+  showChart = false
 }: RealTimePerformanceMonitorProps) {
   const [history, setHistory] = useState<MemoryStats[]>([])
   const [isActive, setIsActive] = useState(true)
@@ -784,7 +765,7 @@ export function RealTimePerformanceMonitor({
 
     setHistory(prev => {
       const newHistory = [...prev, memoryStats]
-      // Son 60 entry'yi tut (1 dakika)
+      // Keep last 60 entries (1 minute)
       return newHistory.length > 60 ? newHistory.slice(-60) : newHistory
     })
   }, [memoryStats, isActive])
@@ -807,7 +788,7 @@ export function RealTimePerformanceMonitor({
     return (
       <div className={cn("p-4 border rounded-lg bg-muted/5", className)}>
         <div className="text-center text-muted-foreground">
-          Performance monitoring devre dışı
+          Performance monitoring disabled
         </div>
       </div>
     )
@@ -823,7 +804,7 @@ export function RealTimePerformanceMonitor({
       <div className="flex items-center justify-between">
         <h3 className="font-semibold flex items-center gap-2">
           <BarChart3 className="h-4 w-4" />
-          Gerçek Zamanlı Performans
+          Real-time Performance
         </h3>
         <button
           onClick={() => setIsActive(!isActive)}
@@ -834,7 +815,7 @@ export function RealTimePerformanceMonitor({
               : "bg-muted text-muted-foreground hover:bg-muted/80"
           )}
         >
-          {isActive ? 'Aktif' : 'Durduruldu'}
+          {isActive ? 'Active' : 'Paused'}
         </button>
       </div>
 
@@ -852,7 +833,7 @@ export function RealTimePerformanceMonitor({
 
         {/* Render Time */}
         <div className="space-y-1">
-          <div className="text-xs text-muted-foreground">Render Süresi</div>
+          <div className="text-xs text-muted-foreground">Render Time</div>
           <div className={cn(
             "text-lg font-mono font-bold",
             memoryStats.performance ? getPerformanceColor(100 - memoryStats.performance.renderTime, { good: 84, warning: 70 }) : ''
@@ -863,7 +844,7 @@ export function RealTimePerformanceMonitor({
 
         {/* Memory Usage */}
         <div className="space-y-1">
-          <div className="text-xs text-muted-foreground">Bellek Kullanımı</div>
+          <div className="text-xs text-muted-foreground">Memory Usage</div>
           <div className="text-lg font-mono font-bold">
             {formatBytes(memoryStats.memoryUsage)}
           </div>
@@ -908,7 +889,7 @@ export function RealTimePerformanceMonitor({
       {/* Mini Chart */}
       {showChart && history.length > 1 && (
         <div className="pt-2 border-t">
-          <div className="text-xs text-muted-foreground mb-2">FPS Geçmişi (Son 60 güncelleme)</div>
+          <div className="text-xs text-muted-foreground mb-2">FPS History (Last 60 updates)</div>
           <div className="h-16 flex items-end gap-1">
             {history.slice(-30).map((stat, index) => {
               const fps = stat.performance?.fps || 0
@@ -940,7 +921,7 @@ interface MemoryAnalyticsProps {
   className?: string
 }
 
-export function MemoryAnalytics({
+function MemoryAnalytics({
   onStatsUpdate,
   showRealTime = false,
   className
@@ -951,21 +932,35 @@ export function MemoryAnalytics({
     cacheHitRate: 0.95
   })
 
-  // Mock real-time updates for backward compatibility
+  // Simulate real-time updates with realistic data
   useEffect(() => {
     if (!showRealTime) return
 
+    // Initialize with some realistic base values
+    let baseMemory = 10 * 1024 * 1024 // 10MB base
+    let currentFPS = 60
+    let currentRenderTime = 5
+
     const interval = setInterval(() => {
+      // Simulate realistic memory usage growth
+      baseMemory += Math.random() * 1024 * 1024 - 500 * 1024 // Fluctuate around base
+      
+      // Simulate FPS variations
+      currentFPS = Math.min(60, Math.max(30, currentFPS + (Math.random() - 0.5) * 10))
+      
+      // Simulate render time variations
+      currentRenderTime = Math.max(1, Math.min(16, currentRenderTime + (Math.random() - 0.5) * 2))
+
       const newStats: MemoryStats = {
-        memoryUsage: Math.random() * 50 * 1024 * 1024,
-        itemCount: Math.floor(Math.random() * 50000),
-        cacheHitRate: 0.9 + Math.random() * 0.1,
+        memoryUsage: Math.max(0, baseMemory),
+        itemCount: 50000, // Fixed item count for demo
+        cacheHitRate: 0.85 + Math.random() * 0.15, // 85-100% hit rate
         lastCleanup: Date.now(),
         performance: {
-          fps: Math.floor(30 + Math.random() * 30),
-          renderTime: Math.random() * 16,
-          memoryLeaks: Math.floor(Math.random() * 3),
-          scrollPerformance: 70 + Math.random() * 30,
+          fps: Math.round(currentFPS),
+          renderTime: parseFloat(currentRenderTime.toFixed(2)),
+          memoryLeaks: currentRenderTime > 10 ? Math.floor(currentRenderTime / 5) : 0,
+          scrollPerformance: Math.round((currentFPS / 60) * 100),
           lastUpdate: Date.now()
         } as MemoryPerformanceMetrics
       }
@@ -983,12 +978,12 @@ export function MemoryAnalytics({
 }
 
 // Utility hook for streaming data
-export function useStreamingData<T>(
+function useStreamingData<T>(
   initialData: T[] = [],
-  streamingConfig?: { interval?: number; maxItems?: number }
+  streamingConfig?: { maxItems?: number }
 ) {
   const [data, setData] = useState<T[]>(initialData)
-  const { interval = 1000, maxItems = 10000 } = streamingConfig || {}
+  const { maxItems = 10000 } = streamingConfig || {}
 
   const addItem = useCallback((newItem: T) => {
     setData(prev => {
@@ -1004,7 +999,14 @@ export function useStreamingData<T>(
   return { data, addItem, clearData }
 }
 
-// Export types
+// Export components and types
+export {
+  MemoryEfficientData,
+  MemoryAnalytics,
+  RealTimePerformanceMonitor,
+  useStreamingData
+};
+
 export type { 
   MemoryConfig, 
   MemoryStats, 
@@ -1013,4 +1015,4 @@ export type {
   TableFeatures, 
   ItemHeightInfo,
   RealTimePerformanceMonitorProps
-}
+};