@moontra/moonui-pro 2.0.22 → 2.0.23

package/src/components/virtual-list/index.tsx

@@ -0,0 +1,369 @@
+"use client"
+
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
+import { cn } from '../../lib/utils'
+
+// Virtual List Props
+export interface VirtualListProps<T = any> {
+  items: T[]
+  height: number
+  itemHeight?: number
+  estimatedItemHeight?: number
+  variableHeight?: boolean
+  overscan?: number
+  renderItem: (item: T, index: number) => React.ReactNode
+  onScroll?: (scrollTop: number) => void
+  className?: string
+}
+
+// Item bilgilerini saklamak için
+interface ItemInfo {
+  index: number
+  height: number
+  top: number
+}
+
+// Performans optimize edilmiş Virtual List Component
+export function VirtualList<T = any>({
+  items,
+  height,
+  itemHeight = 50,
+  estimatedItemHeight = 50,
+  variableHeight = false,
+  overscan = 5,
+  renderItem,
+  onScroll,
+  className
+}: VirtualListProps<T>) {
+  // State yönetimi
+  const [scrollTop, setScrollTop] = useState(0)
+  const [isScrolling, setIsScrolling] = useState(false)
+  const [itemHeights, setItemHeights] = useState<Map<number, number>>(new Map())
+
+  // Refs
+  const containerRef = useRef<HTMLDivElement>(null)
+  const scrollElementRef = useRef<HTMLDivElement>(null)
+  const scrollTimeoutRef = useRef<NodeJS.Timeout>()
+  const isScrollingTimeoutRef = useRef<NodeJS.Timeout>()
+
+  // Item pozisyonlarını hesapla
+  const itemPositions = useMemo(() => {
+    const positions: ItemInfo[] = []
+    let currentTop = 0
+
+    for (let i = 0; i < items.length; i++) {
+      const currentHeight = variableHeight 
+        ? (itemHeights.get(i) || estimatedItemHeight)
+        : itemHeight
+
+      positions.push({
+        index: i,
+        height: currentHeight,
+        top: currentTop
+      })
+
+      currentTop += currentHeight
+    }
+
+    return positions
+  }, [items.length, itemHeight, estimatedItemHeight, variableHeight, itemHeights])
+
+  // Toplam içerik yüksekliği
+  const totalHeight = useMemo(() => {
+    return itemPositions.length > 0 
+      ? itemPositions[itemPositions.length - 1].top + itemPositions[itemPositions.length - 1].height
+      : 0
+  }, [itemPositions])
+
+  // Görünür aralığı hesapla
+  const visibleRange = useMemo(() => {
+    const start = itemPositions.findIndex(item => item.top + item.height >= scrollTop)
+    const end = itemPositions.findIndex(item => item.top > scrollTop + height)
+
+    const actualStart = Math.max(0, start - overscan)
+    const actualEnd = end === -1 
+      ? Math.min(items.length - 1, start + Math.ceil(height / itemHeight) + overscan)
+      : Math.min(items.length - 1, end + overscan)
+
+    return {
+      start: actualStart,
+      end: actualEnd
+    }
+  }, [scrollTop, height, itemPositions, overscan, items.length, itemHeight])
+
+  // Görünür itemlar
+  const visibleItems = useMemo(() => {
+    const result: Array<{ item: T; index: number; style: React.CSSProperties }> = []
+    
+    for (let i = visibleRange.start; i <= visibleRange.end; i++) {
+      if (i >= 0 && i < items.length && itemPositions[i]) {
+        const position = itemPositions[i]
+        result.push({
+          item: items[i],
+          index: i,
+          style: {
+            position: 'absolute',
+            top: position.top,
+            left: 0,
+            right: 0,
+            height: variableHeight ? 'auto' : position.height,
+            minHeight: variableHeight ? position.height : undefined
+          }
+        })
+      }
+    }
+
+    return result
+  }, [items, visibleRange, itemPositions, variableHeight])
+
+  // Scroll handler
+  const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+    const scrollTop = e.currentTarget.scrollTop
+    setScrollTop(scrollTop)
+    setIsScrolling(true)
+
+    // Scroll callback
+    if (onScroll) {
+      onScroll(scrollTop)
+    }
+
+    // Scroll timeout'ını temizle ve yenisini ayarla
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current)
+    }
+
+    if (isScrollingTimeoutRef.current) {
+      clearTimeout(isScrollingTimeoutRef.current)
+    }
+
+    // 150ms sonra scrolling'i false yap (performans için)
+    isScrollingTimeoutRef.current = setTimeout(() => {
+      setIsScrolling(false)
+    }, 150)
+  }, [onScroll])
+
+  // Variable height için resize observer
+  useEffect(() => {
+    if (!variableHeight || !containerRef.current) return
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      const newHeights = new Map(itemHeights)
+      let hasChanges = false
+
+      entries.forEach((entry) => {
+        const element = entry.target as HTMLElement
+        const indexAttr = element.getAttribute('data-index')
+        
+        if (indexAttr) {
+          const index = parseInt(indexAttr, 10)
+          const newHeight = entry.contentRect.height
+          
+          if (newHeights.get(index) !== newHeight) {
+            newHeights.set(index, newHeight)
+            hasChanges = true
+          }
+        }
+      })
+
+      if (hasChanges) {
+        setItemHeights(newHeights)
+      }
+    })
+
+    // Mevcut tüm item elementlerini observe et
+    const itemElements = containerRef.current.querySelectorAll('[data-index]')
+    itemElements.forEach(el => resizeObserver.observe(el))
+
+    return () => resizeObserver.disconnect()
+  }, [variableHeight, itemHeights, visibleItems])
+
+  // Keyboard navigation desteği
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!containerRef.current) return
+
+      switch (e.key) {
+        case 'ArrowUp':
+          e.preventDefault()
+          scrollElementRef.current?.scrollBy({ top: -itemHeight, behavior: 'smooth' })
+          break
+        case 'ArrowDown':
+          e.preventDefault()
+          scrollElementRef.current?.scrollBy({ top: itemHeight, behavior: 'smooth' })
+          break
+        case 'PageUp':
+          e.preventDefault()
+          scrollElementRef.current?.scrollBy({ top: -height, behavior: 'smooth' })
+          break
+        case 'PageDown':
+          e.preventDefault()
+          scrollElementRef.current?.scrollBy({ top: height, behavior: 'smooth' })
+          break
+        case 'Home':
+          e.preventDefault()
+          scrollElementRef.current?.scrollTo({ top: 0, behavior: 'smooth' })
+          break
+        case 'End':
+          e.preventDefault()
+          scrollElementRef.current?.scrollTo({ top: totalHeight, behavior: 'smooth' })
+          break
+      }
+    }
+
+    const container = containerRef.current
+    if (container) {
+      container.addEventListener('keydown', handleKeyDown)
+      return () => container.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [itemHeight, height, totalHeight])
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "relative overflow-hidden border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-ring",
+        className
+      )}
+      style={{ height }}
+      tabIndex={0}
+      role="listbox"
+      aria-label={`Virtual list with ${items.length} items`}
+    >
+      <div
+        ref={scrollElementRef}
+        className="h-full overflow-auto scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent"
+        onScroll={handleScroll}
+      >
+        <div
+          style={{
+            height: totalHeight,
+            position: 'relative'
+          }}
+        >
+          {visibleItems.map(({ item, index, style }) => (
+            <div
+              key={index}
+              data-index={index}
+              style={style}
+              role="option"
+              aria-selected="false"
+              className="outline-none"
+            >
+              {renderItem(item, index)}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Loading indicator for scrolling */}
+      {isScrolling && (
+        <div className="absolute top-2 right-2 bg-muted/80 text-muted-foreground px-2 py-1 rounded text-xs">
+          Scrolling...
+        </div>
+      )}
+
+      {/* Scroll position indicator */}
+      {items.length > 100 && (
+        <div className="absolute bottom-2 right-2 bg-muted/80 text-muted-foreground px-2 py-1 rounded text-xs">
+          {Math.round((scrollTop / Math.max(totalHeight - height, 1)) * 100)}%
+        </div>
+      )}
+    </div>
+  )
+}
+
+// Utility hook for virtual list state management
+export function useVirtualList<T>(
+  items: T[],
+  initialConfig: Partial<VirtualListProps<T>> = {}
+) {
+  const [config, setConfig] = useState(initialConfig)
+  const [selectedItems, setSelectedItems] = useState<Set<number>>(new Set())
+
+  const updateConfig = useCallback((newConfig: Partial<VirtualListProps<T>>) => {
+    setConfig(prev => ({ ...prev, ...newConfig }))
+  }, [])
+
+  const selectItem = useCallback((index: number) => {
+    setSelectedItems(prev => new Set([...prev, index]))
+  }, [])
+
+  const deselectItem = useCallback((index: number) => {
+    setSelectedItems(prev => {
+      const newSet = new Set(prev)
+      newSet.delete(index)
+      return newSet
+    })
+  }, [])
+
+  const clearSelection = useCallback(() => {
+    setSelectedItems(new Set())
+  }, [])
+
+  return {
+    config,
+    updateConfig,
+    selectedItems,
+    selectItem,
+    deselectItem,
+    clearSelection
+  }
+}
+
+// Enhanced Virtual List with selection support
+export interface SelectableVirtualListProps<T = any> extends VirtualListProps<T> {
+  selectable?: boolean
+  multiSelect?: boolean
+  selectedItems?: Set<number>
+  onSelectionChange?: (selectedItems: Set<number>) => void
+}
+
+export function SelectableVirtualList<T = any>({
+  selectable = false,
+  multiSelect = false,
+  selectedItems = new Set(),
+  onSelectionChange,
+  renderItem: originalRenderItem,
+  ...props
+}: SelectableVirtualListProps<T>) {
+  const handleItemClick = useCallback((index: number) => {
+    if (!selectable || !onSelectionChange) return
+
+    const newSelection = new Set(selectedItems)
+
+    if (multiSelect) {
+      if (newSelection.has(index)) {
+        newSelection.delete(index)
+      } else {
+        newSelection.add(index)
+      }
+    } else {
+      newSelection.clear()
+      newSelection.add(index)
+    }
+
+    onSelectionChange(newSelection)
+  }, [selectable, multiSelect, selectedItems, onSelectionChange])
+
+  const renderItem = useCallback((item: T, index: number) => {
+    const isSelected = selectedItems.has(index)
+    
+    return (
+      <div
+        className={cn(
+          "transition-colors",
+          selectable && "cursor-pointer hover:bg-muted/50",
+          isSelected && "bg-primary/10 border-l-4 border-primary"
+        )}
+        onClick={() => selectable && handleItemClick(index)}
+      >
+        {originalRenderItem(item, index)}
+      </div>
+    )
+  }, [originalRenderItem, selectable, selectedItems, handleItemClick])
+
+  return <VirtualList {...props} renderItem={renderItem} />
+}
+
+// Export types
+export type { VirtualListProps, SelectableVirtualListProps }

package/src/hooks/use-chart.ts

@@ -0,0 +1,205 @@
+"use client"
+
+import React from 'react'
+import { ChartDataPoint, ChartSeries } from '../components/advanced-chart'
+
+export interface UseChartOptions {
+  data: ChartDataPoint[]
+  series: ChartSeries[]
+  realtime?: boolean
+  refreshInterval?: number
+  maxDataPoints?: number
+}
+
+export interface UseChartReturn {
+  data: ChartDataPoint[]
+  series: ChartSeries[]
+  isLoading: boolean
+  error: string | null
+  addDataPoint: (point: ChartDataPoint) => void
+  updateSeries: (seriesUpdate: Partial<ChartSeries>[]) => void
+  toggleSeries: (dataKey: string) => void
+  resetData: () => void
+  exportData: (format: 'csv' | 'json') => void
+  getStats: () => {
+    total: number
+    average: number
+    min: number
+    max: number
+    trend: 'up' | 'down' | 'neutral'
+  }
+}
+
+export function useChart({
+  data: initialData,
+  series: initialSeries,
+  realtime = false,
+  refreshInterval = 5000,
+  maxDataPoints = 100,
+}: UseChartOptions): UseChartReturn {
+  const [data, setData] = React.useState<ChartDataPoint[]>(initialData)
+  const [series, setSeries] = React.useState<ChartSeries[]>(initialSeries)
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+
+  // Realtime data updates
+  React.useEffect(() => {
+    if (!realtime) return
+
+    const interval = setInterval(() => {
+      // This would typically fetch new data from an API
+      // For demo purposes, we'll simulate data updates
+      setData(prevData => {
+        const newData = [...prevData]
+        
+        // Keep only the last maxDataPoints
+        if (newData.length >= maxDataPoints) {
+          newData.shift()
+        }
+
+        // Add simulated new data point
+        const lastPoint = newData[newData.length - 1]
+        if (lastPoint) {
+          const newPoint: ChartDataPoint = { ...lastPoint }
+          
+          // Simulate data changes for each series
+          series.forEach(s => {
+            if (typeof lastPoint[s.dataKey] === 'number') {
+              const currentValue = lastPoint[s.dataKey] as number
+              const change = (Math.random() - 0.5) * currentValue * 0.1
+              newPoint[s.dataKey] = Math.max(0, currentValue + change)
+            }
+          })
+
+          // Update timestamp if exists
+          if ('timestamp' in newPoint) {
+            newPoint.timestamp = Date.now()
+          }
+
+          newData.push(newPoint)
+        }
+
+        return newData
+      })
+    }, refreshInterval)
+
+    return () => clearInterval(interval)
+  }, [realtime, refreshInterval, maxDataPoints, series])
+
+  const addDataPoint = React.useCallback((point: ChartDataPoint) => {
+    setData(prevData => {
+      const newData = [...prevData, point]
+      
+      // Keep only the last maxDataPoints
+      if (newData.length > maxDataPoints) {
+        return newData.slice(-maxDataPoints)
+      }
+      
+      return newData
+    })
+  }, [maxDataPoints])
+
+  const updateSeries = React.useCallback((seriesUpdate: Partial<ChartSeries>[]) => {
+    setSeries(prevSeries => {
+      return prevSeries.map(s => {
+        const update = seriesUpdate.find(u => u.dataKey === s.dataKey)
+        return update ? { ...s, ...update } : s
+      })
+    })
+  }, [])
+
+  const toggleSeries = React.useCallback((dataKey: string) => {
+    setSeries(prevSeries => {
+      return prevSeries.map(s => 
+        s.dataKey === dataKey ? { ...s, hide: !s.hide } : s
+      )
+    })
+  }, [])
+
+  const resetData = React.useCallback(() => {
+    setData(initialData)
+    setSeries(initialSeries)
+    setError(null)
+  }, [initialData, initialSeries])
+
+  const exportData = React.useCallback((format: 'csv' | 'json') => {
+    try {
+      if (format === 'csv') {
+        const headers = Object.keys(data[0] || {})
+        const csvContent = [
+          headers.join(','),
+          ...data.map(row => 
+            headers.map(header => {
+              const value = row[header]
+              if (typeof value === 'string' && (value.includes(',') || value.includes('"'))) {
+                return `"${value.replace(/"/g, '""')}"`
+              }
+              return value
+            }).join(',')
+          )
+        ].join('\n')
+
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
+        const link = document.createElement('a')
+        link.href = URL.createObjectURL(blob)
+        link.download = 'chart-data.csv'
+        link.click()
+      } else if (format === 'json') {
+        const jsonContent = JSON.stringify({ data, series }, null, 2)
+        const blob = new Blob([jsonContent], { type: 'application/json;charset=utf-8;' })
+        const link = document.createElement('a')
+        link.href = URL.createObjectURL(blob)
+        link.download = 'chart-data.json'
+        link.click()
+      }
+    } catch (err) {
+      setError('Failed to export data')
+    }
+  }, [data, series])
+
+  const getStats = React.useCallback(() => {
+    if (!data.length || !series.length) {
+      return { total: 0, average: 0, min: 0, max: 0, trend: 'neutral' as const }
+    }
+
+    const firstSeries = series[0]
+    const values = data
+      .map(d => Number(d[firstSeries.dataKey]))
+      .filter(v => !isNaN(v))
+
+    if (!values.length) {
+      return { total: 0, average: 0, min: 0, max: 0, trend: 'neutral' as const }
+    }
+
+    const total = values.reduce((sum, val) => sum + val, 0)
+    const average = total / values.length
+    const min = Math.min(...values)
+    const max = Math.max(...values)
+
+    // Calculate trend
+    let trend: 'up' | 'down' | 'neutral' = 'neutral'
+    if (values.length >= 2) {
+      const first = values[0]
+      const last = values[values.length - 1]
+      const change = ((last - first) / first) * 100
+      
+      if (change > 5) trend = 'up'
+      else if (change < -5) trend = 'down'
+    }
+
+    return { total, average, min, max, trend }
+  }, [data, series])
+
+  return {
+    data,
+    series,
+    isLoading,
+    error,
+    addDataPoint,
+    updateSeries,
+    toggleSeries,
+    resetData,
+    exportData,
+    getStats,
+  }
+}