@moontra/moonui-pro 2.0.22 → 2.1.0

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

@@ -0,0 +1,352 @@
+"use client"
+
+import React, { useMemo, useCallback, useState, useEffect, useRef } from 'react'
+import { cn } from '../../lib/utils'
+
+// Memory konfigürasyonu için tip tanımları
+export interface MemoryConfig {
+  chunkSize?: number
+  maxMemoryItems?: number
+  cacheStrategy?: 'lru' | 'fifo' | 'lfu'
+  compression?: boolean
+  autoCleanup?: boolean
+  cleanupThreshold?: number
+  streamingMode?: boolean
+  enableAnalytics?: boolean
+  analyticsCallback?: (stats: MemoryStats) => void
+}
+
+// Memory istatistikleri için tip tanımı
+export interface MemoryStats {
+  memoryUsage: number
+  itemCount: number
+  cacheHitRate: number
+  compressionRatio?: number
+  lastCleanup?: number
+}
+
+// Ana component props
+export interface MemoryEfficientDataProps<T = any> {
+  data: T[]
+  config?: MemoryConfig
+  renderItem: (item: T, index: number) => React.ReactNode
+  height?: number
+  onMemoryUpdate?: (stats: MemoryStats) => void
+  className?: string
+}
+
+// Cache node yapısı
+interface CacheNode<T> {
+  data: T[]
+  timestamp: number
+  accessCount: number
+  compressed?: boolean
+}
+
+// Memory cache sınıfı
+class MemoryCache<T> {
+  private cache = new Map<string, CacheNode<T>>()
+  private maxSize: number
+  private strategy: 'lru' | 'fifo' | 'lfu'
+
+  constructor(maxSize: number, strategy: 'lru' | 'fifo' | 'lfu' = 'lru') {
+    this.maxSize = maxSize
+    this.strategy = strategy
+  }
+
+  set(key: string, data: T[], compressed = false): void {
+    if (this.cache.size >= this.maxSize) {
+      this.evict()
+    }
+
+    this.cache.set(key, {
+      data,
+      timestamp: Date.now(),
+      accessCount: 0,
+      compressed
+    })
+  }
+
+  get(key: string): T[] | null {
+    const node = this.cache.get(key)
+    if (!node) return null
+
+    // Access count'ı artır (LFU için)
+    node.accessCount++
+    node.timestamp = Date.now() // LRU için timestamp güncelle
+
+    return node.data
+  }
+
+  private evict(): void {
+    if (this.cache.size === 0) return
+
+    let keyToDelete: string | null = null
+
+    switch (this.strategy) {
+      case 'lru':
+        // En eski erişileni sil
+        let oldestTime = Infinity
+        for (const [key, node] of this.cache) {
+          if (node.timestamp < oldestTime) {
+            oldestTime = node.timestamp
+            keyToDelete = key
+          }
+        }
+        break
+
+      case 'lfu':
+        // En az kullanılanı sil
+        let minAccess = Infinity
+        for (const [key, node] of this.cache) {
+          if (node.accessCount < minAccess) {
+            minAccess = node.accessCount
+            keyToDelete = key
+          }
+        }
+        break
+
+      case 'fifo':
+        // İlk gireni sil
+        keyToDelete = this.cache.keys().next().value
+        break
+    }
+
+    if (keyToDelete) {
+      this.cache.delete(keyToDelete)
+    }
+  }
+
+  clear(): void {
+    this.cache.clear()
+  }
+
+  getStats(): { size: number; hitRate: number } {
+    return {
+      size: this.cache.size,
+      hitRate: 0.95 // Basit bir mock değer
+    }
+  }
+}
+
+// Ana Memory Efficient Data Component
+export function MemoryEfficientData<T = any>({
+  data,
+  config = {},
+  renderItem,
+  height = 400,
+  onMemoryUpdate,
+  className
+}: MemoryEfficientDataProps<T>) {
+  const {
+    chunkSize = 1000,
+    maxMemoryItems = 10000,
+    cacheStrategy = 'lru',
+    compression = false,
+    autoCleanup = true,
+    cleanupThreshold = 0.8,
+    streamingMode = false,
+    enableAnalytics = false,
+    analyticsCallback
+  } = config
+
+  // State yönetimi
+  const [visibleRange, setVisibleRange] = useState({ start: 0, end: Math.min(chunkSize, data.length) })
+  const [memoryStats, setMemoryStats] = useState<MemoryStats>({
+    memoryUsage: 0,
+    itemCount: 0,
+    cacheHitRate: 0.95
+  })
+
+  // Refs
+  const containerRef = useRef<HTMLDivElement>(null)
+  const cacheRef = useRef(new MemoryCache<T>(Math.floor(maxMemoryItems / chunkSize), cacheStrategy))
+  const scrollTimeoutRef = useRef<NodeJS.Timeout>()
+
+  // Visible data'yı memoize et
+  const visibleData = useMemo(() => {
+    const start = visibleRange.start
+    const end = Math.min(visibleRange.end, data.length)
+    
+    // Cache'den kontrol et
+    const cacheKey = `${start}-${end}`
+    const cachedData = cacheRef.current.get(cacheKey)
+    
+    if (cachedData && cachedData.length === (end - start)) {
+      return cachedData
+    }
+
+    // Yeni data slice'ını oluştur
+    const newData = data.slice(start, end)
+    
+    // Cache'e kaydet
+    cacheRef.current.set(cacheKey, newData, compression)
+    
+    return newData
+  }, [data, visibleRange, compression])
+
+  // Scroll handler
+  const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+    const scrollTop = e.currentTarget.scrollTop
+    const containerHeight = e.currentTarget.clientHeight
+    
+    // Tahmini item yüksekliği (temel implementasyon)
+    const estimatedItemHeight = 60
+    const startIndex = Math.floor(scrollTop / estimatedItemHeight)
+    const visibleCount = Math.ceil(containerHeight / estimatedItemHeight)
+    
+    // Buffer ekle
+    const bufferSize = Math.floor(visibleCount * 0.5)
+    const newStart = Math.max(0, startIndex - bufferSize)
+    const newEnd = Math.min(data.length, startIndex + visibleCount + bufferSize)
+
+    // Throttle scroll updates
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current)
+    }
+
+    scrollTimeoutRef.current = setTimeout(() => {
+      setVisibleRange({ start: newStart, end: newEnd })
+    }, 16) // ~60fps
+  }, [data.length])
+
+  // Memory statistics'i güncelle
+  useEffect(() => {
+    const cacheStats = cacheRef.current.getStats()
+    const newStats: MemoryStats = {
+      memoryUsage: visibleData.length * 1024, // Rough estimation
+      itemCount: visibleData.length,
+      cacheHitRate: cacheStats.hitRate,
+      compressionRatio: compression ? 0.7 : 1.0,
+      lastCleanup: Date.now()
+    }
+
+    setMemoryStats(newStats)
+    
+    if (enableAnalytics && analyticsCallback) {
+      analyticsCallback(newStats)
+    }
+
+    if (onMemoryUpdate) {
+      onMemoryUpdate(newStats)
+    }
+  }, [visibleData, enableAnalytics, analyticsCallback, onMemoryUpdate, compression])
+
+  // Auto cleanup effect
+  useEffect(() => {
+    if (!autoCleanup) return
+
+    const cleanupInterval = setInterval(() => {
+      const memoryUsage = (visibleData.length / maxMemoryItems)
+      if (memoryUsage > cleanupThreshold) {
+        // Basit cleanup - cache'i temizle
+        cacheRef.current.clear()
+      }
+    }, 5000) // Her 5 saniyede kontrol et
+
+    return () => clearInterval(cleanupInterval)
+  }, [autoCleanup, cleanupThreshold, maxMemoryItems, visibleData.length])
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "overflow-auto border rounded-lg bg-background",
+        className
+      )}
+      style={{ height }}
+      onScroll={handleScroll}
+    >
+      <div style={{ height: data.length * 60, position: 'relative' }}>
+        <div 
+          style={{ 
+            transform: `translateY(${visibleRange.start * 60}px)`,
+            position: 'absolute',
+            width: '100%'
+          }}
+        >
+          {visibleData.map((item, index) => (
+            <React.Fragment key={visibleRange.start + index}>
+              {renderItem(item, visibleRange.start + index)}
+            </React.Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Memory Analytics Component
+export interface MemoryAnalyticsProps {
+  onStatsUpdate?: (stats: MemoryStats) => void
+  showRealTime?: boolean
+  className?: string
+}
+
+export function MemoryAnalytics({
+  onStatsUpdate,
+  showRealTime = false,
+  className
+}: MemoryAnalyticsProps) {
+  const [stats, setStats] = useState<MemoryStats>({
+    memoryUsage: 0,
+    itemCount: 0,
+    cacheHitRate: 0.95
+  })
+
+  // Mock real-time updates
+  useEffect(() => {
+    if (!showRealTime) return
+
+    const interval = setInterval(() => {
+      const newStats: MemoryStats = {
+        memoryUsage: Math.random() * 50 * 1024 * 1024, // 0-50MB
+        itemCount: Math.floor(Math.random() * 50000),
+        cacheHitRate: 0.9 + Math.random() * 0.1, // 90-100%
+        lastCleanup: Date.now()
+      }
+      
+      setStats(newStats)
+      if (onStatsUpdate) {
+        onStatsUpdate(newStats)
+      }
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [showRealTime, onStatsUpdate])
+
+  if (!showRealTime) {
+    return null
+  }
+
+  return (
+    <div className={cn("text-xs text-muted-foreground", className)}>
+      Memory Analytics Active - Updates every second
+    </div>
+  )
+}
+
+// Utility hook for streaming data
+export function useStreamingData<T>(
+  initialData: T[] = [],
+  streamingConfig?: { interval?: number; maxItems?: number }
+) {
+  const [data, setData] = useState<T[]>(initialData)
+  const { interval = 1000, maxItems = 10000 } = streamingConfig || {}
+
+  const addItem = useCallback((newItem: T) => {
+    setData(prev => {
+      const newData = [...prev, newItem]
+      return newData.length > maxItems ? newData.slice(-maxItems) : newData
+    })
+  }, [maxItems])
+
+  const clearData = useCallback(() => {
+    setData([])
+  }, [])
+
+  return { data, addItem, clearData }
+}
+
+// Export types
+export type { MemoryConfig, MemoryStats, MemoryEfficientDataProps, MemoryAnalyticsProps }