@moontra/moonui-pro 2.4.4 → 2.4.6

package/src/components/advanced-chart/index.tsx

@@ -22,6 +22,19 @@ import {
   ReferenceLine,
   ReferenceArea,
   Brush,
+  ComposedChart,
+  RadarChart,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  Radar,
+  Treemap,
+  Funnel,
+  FunnelChart,
+  Sankey,
+  RadialBarChart,
+  RadialBar,
+  BarChart as RechartsBarChart,
 } from 'recharts'
 import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
 import { Button } from '../ui/button'
@@ -34,11 +47,42 @@ import {
   TrendingDown,
   Minus,
   Lock,
-  Sparkles
+  Sparkles,
+  Eye,
+  EyeOff,
+  FileJson,
+  FileSpreadsheet,
+  Image,
+  ZoomIn,
+  ZoomOut,
+  Move,
+  Crosshair,
+  Palette,
+  Activity,
+  MoreVertical,
+  X,
+  Check
 } from 'lucide-react'
 import { cn } from '../../lib/utils'
+import { motion, AnimatePresence, useMotionValue, useTransform } from 'framer-motion'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from '../ui/dropdown-menu'
+import { Skeleton } from '../ui/skeleton'
+import { Switch } from '../ui/switch'
+import { Label } from '../ui/label'
+import { Slider } from '../ui/slider'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '../ui/popover'
 
-export type ChartType = 'line' | 'bar' | 'area' | 'pie' | 'scatter'
+export type ChartType = 'line' | 'bar' | 'area' | 'pie' | 'scatter' | 'composed' | 'radar' | 'radialBar' | 'treemap' | 'funnel'
 
 interface ChartDataPoint {
   [key: string]: string | number | null
@@ -48,10 +92,17 @@ interface ChartSeries {
   dataKey: string
   name: string
   color: string
-  type?: 'monotone' | 'linear' | 'step'
+  type?: 'monotone' | 'linear' | 'step' | 'basis' | 'basisClosed' | 'basisOpen' | 'natural'
   strokeWidth?: number
   fillOpacity?: number
   hide?: boolean
+  gradient?: boolean
+  strokeDasharray?: string
+  dot?: boolean | object
+  activeDot?: boolean | object
+  label?: boolean | object
+  stackId?: string
+  yAxisId?: string
 }
 
 interface AdvancedChartProps {
@@ -83,7 +134,7 @@ interface AdvancedChartProps {
   colors?: string[]
   className?: string
   onDataPointClick?: (data: ChartDataPoint) => void
-  onExport?: (format: 'png' | 'svg' | 'pdf') => void
+  onExport?: (format: 'png' | 'svg' | 'pdf' | 'json' | 'csv') => void
   onRefresh?: () => void
   customTooltip?: React.ComponentType<any>
   customLegend?: React.ComponentType<any>
@@ -91,12 +142,144 @@ interface AdvancedChartProps {
   error?: string | null
   animated?: boolean
   responsive?: boolean
+  showCrosshair?: boolean
+  enableZoom?: boolean
+  enablePan?: boolean
+  showMiniMap?: boolean
+  darkMode?: boolean
+  gradientColors?: boolean
+  interactiveLegend?: boolean
+  showDataLabels?: boolean
+  sparklineMode?: boolean
+  animationDuration?: number
+  theme?: 'default' | 'vibrant' | 'pastel' | 'dark' | 'neon'
+}
+
+// Tema renk paletleri
+const COLOR_THEMES = {
+  default: [
+    '#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6',
+    '#06b6d4', '#f97316', '#84cc16', '#ec4899', '#6366f1'
+  ],
+  vibrant: [
+    '#FF006E', '#FB5607', '#FFBE0B', '#8338EC', '#3A86FF',
+    '#06FFB4', '#FF4365', '#00F5FF', '#FF124F', '#7209B7'
+  ],
+  pastel: [
+    '#B5E2FA', '#F7AEF8', '#FDC5F5', '#F8B7D3', '#FAC9B8',
+    '#C8E9A0', '#A7D2CB', '#F2D98D', '#E5B3BB', '#D6A2E8'
+  ],
+  dark: [
+    '#1e3a5f', '#4b0e0e', '#0e4b2b', '#4b3c0e', '#2e0e4b',
+    '#0e3c4b', '#4b2e0e', '#2b4b0e', '#4b0e3c', '#1e0e4b'
+  ],
+  neon: [
+    '#39FF14', '#FF10F0', '#00FFFF', '#FE019A', '#FFFF00',
+    '#FF073A', '#00FF00', '#FF0099', '#0FF0FC', '#FFE400'
+  ]
 }
 
-const DEFAULT_COLORS = [
-  '#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6',
-  '#06b6d4', '#f97316', '#84cc16', '#ec4899', '#6366f1'
-]
+const DEFAULT_COLORS = COLOR_THEMES.default
+
+// Özel Tooltip bileşeni
+const CustomTooltip: React.FC<any> = ({ active, payload, label }) => {
+  if (!active || !payload || !payload.length) return null
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.9 }}
+      className="backdrop-blur-xl bg-background/80 dark:bg-gray-900/90 p-3 rounded-xl shadow-2xl border border-border/50 dark:border-gray-700/50"
+    >
+      <p className="text-sm font-medium mb-2">{label}</p>
+      {payload.map((entry: any, index: number) => (
+        <div key={index} className="flex items-center gap-2 text-sm">
+          <div
+            className="w-3 h-3 rounded-full"
+            style={{ backgroundColor: entry.color }}
+          />
+          <span className="text-muted-foreground">{entry.name}:</span>
+          <span className="font-semibold">{entry.value}</span>
+        </div>
+      ))}
+    </motion.div>
+  )
+}
+
+// Özel Legend bileşeni
+const CustomLegend: React.FC<any> = ({ payload, onItemClick }) => {
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-4 mt-4">
+      {payload.map((entry: any, index: number) => (
+        <motion.button
+          key={`item-${index}`}
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          onClick={() => onItemClick && onItemClick(entry)}
+          className={cn(
+            "flex items-center gap-2 px-3 py-1.5 rounded-lg transition-all",
+            "hover:bg-accent/10 dark:hover:bg-gray-800/50",
+            entry.inactive && "opacity-50"
+          )}
+        >
+          <motion.div
+            animate={{
+              scale: entry.inactive ? 0.8 : 1,
+              opacity: entry.inactive ? 0.5 : 1
+            }}
+            className="w-3 h-3 rounded-full"
+            style={{ backgroundColor: entry.color }}
+          />
+          <span className="text-sm font-medium">{entry.value}</span>
+        </motion.button>
+      ))}
+    </div>
+  )
+}
+
+// Mini sparkline bileşeni
+const SparklinePreview = ({ data, dataKey, color }: any) => {
+  const values = data.map((d: any) => d[dataKey])
+  const min = Math.min(...values)
+  const max = Math.max(...values)
+  const range = max - min
+  
+  return (
+    <svg width="60" height="20" className="ml-2">
+      <polyline
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        points={values.map((v: number, i: number) => 
+          `${(i / (values.length - 1)) * 60},${20 - ((v - min) / range) * 20}`
+        ).join(' ')}
+      />
+    </svg>
+  )
+}
+
+// Loading Skeleton bileşeni
+const ChartSkeleton = ({ height }: { height: number }) => (
+  <div className="w-full" style={{ height }}>
+    <div className="flex items-end justify-center h-full gap-2 px-8">
+      {[...Array(8)].map((_, i) => (
+        <motion.div
+          key={i}
+          initial={{ height: 0 }}
+          animate={{ height: `${Math.random() * 80 + 20}%` }}
+          transition={{ 
+            duration: 1.5, 
+            delay: i * 0.1,
+            repeat: Infinity,
+            repeatType: "reverse"
+          }}
+          className="w-full bg-gradient-to-t from-primary/20 to-primary/5 rounded-t-lg"
+        />
+      ))}
+    </div>
+  </div>
+)
 
 export function AdvancedChart({
   data,
@@ -126,9 +309,34 @@ export function AdvancedChart({
   error = null,
   animated = true,
   responsive = true,
+  showCrosshair = false,
+  enableZoom = false,
+  enablePan = false,
+  showMiniMap = false,
+  darkMode = false,
+  gradientColors = true,
+  interactiveLegend = true,
+  showDataLabels = false,
+  sparklineMode = false,
+  animationDuration = 1500,
+  theme = 'default',
 }: AdvancedChartProps) {
   const [isFullscreen, setIsFullscreen] = React.useState(false)
+  const [showSettings, setShowSettings] = React.useState(false)
+  const [zoomLevel, setZoomLevel] = React.useState(100)
+  const [selectedTheme, setSelectedTheme] = React.useState(theme)
+  const [hoveredDataPoint, setHoveredDataPoint] = React.useState<any>(null)
+  const [hiddenSeries, setHiddenSeries] = React.useState<Set<string>>(new Set())
   const chartRef = React.useRef<HTMLDivElement>(null)
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  
+  // Tema renklerini al
+  const themeColors = React.useMemo(() => {
+    return COLOR_THEMES[selectedTheme] || DEFAULT_COLORS
+  }, [selectedTheme])
+  
+  // Gradient tanımlamaları için benzersiz ID oluştur
+  const gradientId = React.useId()
 
   // Calculate trend for the first series
   const trend = React.useMemo(() => {
@@ -149,48 +357,159 @@ export function AdvancedChart({
     }
   }, [data, series])
 
-  const handleExport = (format: 'png' | 'svg' | 'pdf') => {
+  // Seri görünürlüğünü toggle et
+  const toggleSeriesVisibility = (dataKey: string) => {
+    setHiddenSeries(prev => {
+      const newSet = new Set(prev)
+      if (newSet.has(dataKey)) {
+        newSet.delete(dataKey)
+      } else {
+        newSet.add(dataKey)
+      }
+      return newSet
+    })
+  }
+  
+  // Legend item click handler
+  const handleLegendItemClick = (entry: any) => {
+    if (interactiveLegend) {
+      toggleSeriesVisibility(entry.dataKey)
+    }
+  }
+  
+  const handleExport = (format: 'png' | 'svg' | 'pdf' | 'json' | 'csv') => {
     if (onExport) {
       onExport(format)
     }
   }
+  
+  // Zoom kontrolü
+  const handleZoom = (direction: 'in' | 'out') => {
+    setZoomLevel(prev => {
+      if (direction === 'in') return Math.min(prev + 10, 200)
+      return Math.max(prev - 10, 50)
+    })
+  }
 
+  // Gradient tanımlamaları oluştur
+  const renderGradientDefs = () => (
+    <defs>
+      {series.map((s, index) => {
+        const color = s.color || themeColors[index % themeColors.length]
+        return (
+          <linearGradient
+            key={`gradient-${s.dataKey}`}
+            id={`gradient-${gradientId}-${s.dataKey}`}
+            x1="0" y1="0" x2="0" y2="1"
+          >
+            <stop offset="0%" stopColor={color} stopOpacity={0.8} />
+            <stop offset="100%" stopColor={color} stopOpacity={0.1} />
+          </linearGradient>
+        )
+      })}
+    </defs>
+  )
+  
   const renderChart = () => {
     const commonProps = {
       data,
       width: typeof width === 'string' ? undefined : width,
-      height,
-      margin: { top: 20, right: 30, left: 20, bottom: 20 },
-      // onClick: onDataPointClick,
+      height: sparklineMode ? 60 : height,
+      margin: sparklineMode 
+        ? { top: 5, right: 5, left: 5, bottom: 5 }
+        : { top: 20, right: 30, left: 20, bottom: showBrush ? 60 : 20 },
     }
 
-    const visibleSeries = series.filter(s => !s.hide)
+    const visibleSeries = series.filter(s => !s.hide && !hiddenSeries.has(s.dataKey))
+    
+    // Axis stil özellikleri
+    const axisStyle = {
+      fontSize: 12,
+      fill: darkMode ? '#9ca3af' : '#6b7280',
+    }
+    
+    // Grid stil özellikleri  
+    const gridStyle = {
+      stroke: darkMode ? '#374151' : '#e5e7eb',
+      strokeDasharray: '3 3',
+      opacity: 0.5
+    }
 
     switch (type) {
       case 'line':
         return (
           <LineChart {...commonProps}>
-            {showGrid && <CartesianGrid strokeDasharray="3 3" />}
-            <XAxis dataKey={xAxisKey} />
-            <YAxis />
-            {showTooltip && <Tooltip />}
-            {showLegend && <Legend />}
-            {visibleSeries.map((s, index) => (
-              <Line
-                key={s.dataKey}
-                type={s.type || 'monotone'}
-                dataKey={s.dataKey}
-                stroke={s.color || colors[index % colors.length]}
-                strokeWidth={s.strokeWidth || 2}
-                name={s.name}
-                animationDuration={animated ? 1000 : 0}
+            {gradientColors && renderGradientDefs()}
+            {showGrid && !sparklineMode && (
+              <CartesianGrid {...gridStyle} />
+            )}
+            {!sparklineMode && (
+              <>
+                <XAxis 
+                  dataKey={xAxisKey} 
+                  {...axisStyle}
+                  tick={{ fontSize: 11 }}
+                  axisLine={{ stroke: darkMode ? '#4b5563' : '#d1d5db' }}
+                />
+                <YAxis 
+                  {...axisStyle}
+                  tick={{ fontSize: 11 }}
+                  axisLine={{ stroke: darkMode ? '#4b5563' : '#d1d5db' }}
+                />
+              </>
+            )}
+            {showTooltip && !sparklineMode && (
+              <Tooltip 
+                cursor={showCrosshair ? { 
+                  stroke: darkMode ? '#6b7280' : '#9ca3af',
+                  strokeWidth: 1,
+                  strokeDasharray: '5 5'
+                } : false}
               />
-            ))}
+            )}
+            {showLegend && !sparklineMode && (
+              <Legend 
+                content={(props) => {
+                  const CustomLegendComponent = customLegend
+                  return CustomLegendComponent ? <CustomLegendComponent {...props} /> : 
+                    <CustomLegend {...props} onItemClick={handleLegendItemClick} />
+                }}
+              />
+            )}
+            {visibleSeries.map((s, index) => {
+              const color = s.color || themeColors[index % themeColors.length]
+              return (
+                <Line
+                  key={s.dataKey}
+                  type={s.type || 'monotone'}
+                  dataKey={s.dataKey}
+                  stroke={color}
+                  strokeWidth={sparklineMode ? 1.5 : (s.strokeWidth || 2)}
+                  strokeDasharray={s.strokeDasharray}
+                  name={s.name}
+                  dot={sparklineMode ? false : (s.dot !== undefined ? s.dot : {
+                    r: 3,
+                    strokeWidth: 2,
+                    fill: darkMode ? '#1f2937' : '#ffffff'
+                  })}
+                  activeDot={sparklineMode ? false : (s.activeDot !== undefined ? s.activeDot : {
+                    r: 5,
+                    strokeWidth: 2,
+                    fill: color,
+                    stroke: darkMode ? '#1f2937' : '#ffffff',
+                    className: 'animate-pulse'
+                  })}
+                  animationDuration={animated ? animationDuration : 0}
+                  animationBegin={index * 100}
+                  label={showDataLabels ? s.label : false}
+                />
+              )
+            })}
             {showReference && referenceLines.map((ref, index) => (
               <ReferenceLine
                 key={index}
                 y={ref.value}
-                stroke={ref.color || '#666'}
+                stroke={ref.color || (darkMode ? '#6b7280' : '#9ca3af')}
                 strokeDasharray="5 5"
                 label={ref.label}
               />
@@ -200,95 +519,210 @@ export function AdvancedChart({
                 key={index}
                 x1={ref.x1}
                 x2={ref.x2}
-                fill={ref.color || '#f0f0f0'}
+                fill={ref.color || (darkMode ? '#374151' : '#f3f4f6')}
                 fillOpacity={0.3}
                 label={ref.label}
               />
             ))}
-            {showBrush && <Brush />}
+            {showBrush && !sparklineMode && (
+              <Brush 
+                height={30}
+                fill={darkMode ? '#1f2937' : '#f9fafb'}
+                stroke={darkMode ? '#374151' : '#e5e7eb'}
+              />
+            )}
           </LineChart>
         )
 
       case 'bar':
         return (
           <BarChart {...commonProps}>
-            {showGrid && <CartesianGrid strokeDasharray="3 3" />}
-            <XAxis dataKey={xAxisKey} />
-            <YAxis />
-            {showTooltip && <Tooltip />}
-            {showLegend && <Legend />}
-            {visibleSeries.map((s, index) => (
-              <Bar
-                key={s.dataKey}
-                dataKey={s.dataKey}
-                fill={s.color || colors[index % colors.length]}
-                name={s.name}
-                animationDuration={animated ? 1000 : 0}
+            {gradientColors && renderGradientDefs()}
+            {showGrid && <CartesianGrid {...gridStyle} />}
+            <XAxis 
+              dataKey={xAxisKey} 
+              {...axisStyle}
+              tick={{ fontSize: 11 }}
+              axisLine={{ stroke: darkMode ? '#4b5563' : '#d1d5db' }}
+            />
+            <YAxis 
+              {...axisStyle}
+              tick={{ fontSize: 11 }}
+              axisLine={{ stroke: darkMode ? '#4b5563' : '#d1d5db' }}
+            />
+            {showTooltip && (
+              <Tooltip 
+                cursor={{ fill: darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)' }}
               />
-            ))}
+            )}
+            {showLegend && (
+              <Legend 
+                content={(props) => {
+                  const CustomLegendComponent = customLegend
+                  return CustomLegendComponent ? <CustomLegendComponent {...props} /> : 
+                    <CustomLegend {...props} onItemClick={handleLegendItemClick} />
+                }}
+              />
+            )}
+            {visibleSeries.map((s, index) => {
+              const color = s.color || themeColors[index % themeColors.length]
+              return (
+                <Bar
+                  key={s.dataKey}
+                  dataKey={s.dataKey}
+                  fill={gradientColors ? `url(#gradient-${gradientId}-${s.dataKey})` : color}
+                  name={s.name}
+                  animationDuration={animated ? animationDuration : 0}
+                  animationBegin={index * 100}
+                  radius={[4, 4, 0, 0]}
+                  label={showDataLabels ? s.label : false}
+                  stackId={s.stackId}
+                  onMouseEnter={() => setHoveredDataPoint(s.dataKey)}
+                  onMouseLeave={() => setHoveredDataPoint(null)}
+                  className="hover:opacity-80 transition-opacity cursor-pointer"
+                />
+              )
+            })}
             {showReference && referenceLines.map((ref, index) => (
               <ReferenceLine
                 key={index}
                 y={ref.value}
-                stroke={ref.color || '#666'}
+                stroke={ref.color || (darkMode ? '#6b7280' : '#9ca3af')}
                 strokeDasharray="5 5"
                 label={ref.label}
               />
             ))}
-            {showBrush && <Brush />}
+            {showBrush && (
+              <Brush 
+                height={30}
+                fill={darkMode ? '#1f2937' : '#f9fafb'}
+                stroke={darkMode ? '#374151' : '#e5e7eb'}
+              />
+            )}
           </BarChart>
         )
 
       case 'area':
         return (
           <AreaChart {...commonProps}>
-            {showGrid && <CartesianGrid strokeDasharray="3 3" />}
-            <XAxis dataKey={xAxisKey} />
-            <YAxis />
+            {gradientColors && renderGradientDefs()}
+            {showGrid && <CartesianGrid {...gridStyle} />}
+            <XAxis 
+              dataKey={xAxisKey} 
+              {...axisStyle}
+              tick={{ fontSize: 11 }}
+              axisLine={{ stroke: darkMode ? '#4b5563' : '#d1d5db' }}
+            />
+            <YAxis 
+              {...axisStyle}
+              tick={{ fontSize: 11 }}
+              axisLine={{ stroke: darkMode ? '#4b5563' : '#d1d5db' }}
+            />
             {showTooltip && <Tooltip />}
-            {showLegend && <Legend />}
-            {visibleSeries.map((s, index) => (
-              <Area
-                key={s.dataKey}
-                type={s.type || 'monotone'}
-                dataKey={s.dataKey}
-                stroke={s.color || colors[index % colors.length]}
-                fill={s.color || colors[index % colors.length]}
-                fillOpacity={s.fillOpacity || 0.3}
-                name={s.name}
-                animationDuration={animated ? 1000 : 0}
+            {showLegend && (
+              <Legend 
+                content={(props) => {
+                  const CustomLegendComponent = customLegend
+                  return CustomLegendComponent ? <CustomLegendComponent {...props} /> : 
+                    <CustomLegend {...props} onItemClick={handleLegendItemClick} />
+                }}
               />
-            ))}
+            )}
+            {visibleSeries.map((s, index) => {
+              const color = s.color || themeColors[index % themeColors.length]
+              return (
+                <Area
+                  key={s.dataKey}
+                  type={s.type || 'monotone'}
+                  dataKey={s.dataKey}
+                  stroke={color}
+                  strokeWidth={2}
+                  fill={gradientColors ? `url(#gradient-${gradientId}-${s.dataKey})` : color}
+                  fillOpacity={s.fillOpacity || 0.6}
+                  name={s.name}
+                  animationDuration={animated ? animationDuration : 0}
+                  animationBegin={index * 100}
+                  dot={s.dot !== undefined ? s.dot : false}
+                  activeDot={s.activeDot !== undefined ? s.activeDot : {
+                    r: 4,
+                    strokeWidth: 2,
+                    fill: color,
+                    stroke: darkMode ? '#1f2937' : '#ffffff',
+                    className: 'animate-pulse'
+                  }}
+                  label={showDataLabels ? s.label : false}
+                  stackId={s.stackId}
+                />
+              )
+            })}
             {showReference && referenceLines.map((ref, index) => (
               <ReferenceLine
                 key={index}
                 y={ref.value}
-                stroke={ref.color || '#666'}
+                stroke={ref.color || (darkMode ? '#6b7280' : '#9ca3af')}
                 strokeDasharray="5 5"
                 label={ref.label}
               />
             ))}
-            {showBrush && <Brush />}
+            {showBrush && (
+              <Brush 
+                height={30}
+                fill={darkMode ? '#1f2937' : '#f9fafb'}
+                stroke={darkMode ? '#374151' : '#e5e7eb'}
+              />
+            )}
           </AreaChart>
         )
 
       case 'pie':
         return (
           <PieChart {...commonProps}>
-            {showTooltip && <Tooltip />}
-            {showLegend && <Legend />}
+            {showTooltip && (
+              <Tooltip 
+                /* @ts-ignore */
+                content={customTooltip ? customTooltip : CustomTooltip} 
+              />
+            )}
+            {showLegend && (
+              <Legend 
+                content={(props) => {
+                  const CustomLegendComponent = customLegend
+                  return CustomLegendComponent ? <CustomLegendComponent {...props} /> : 
+                    <CustomLegend {...props} onItemClick={handleLegendItemClick} />
+                }}
+              />
+            )}
             <Pie
               data={data}
               dataKey={series[0]?.dataKey || 'value'}
               nameKey={xAxisKey}
               cx="50%"
               cy="50%"
+              innerRadius={type === 'pie' ? 0 : '40%'}
               outerRadius={Math.min(height, typeof width === 'number' ? width : 400) / 3}
-              animationDuration={animated ? 1000 : 0}
+              animationDuration={animated ? animationDuration : 0}
+              animationBegin={0}
+              label={showDataLabels ? {
+                fill: darkMode ? '#e5e7eb' : '#374151',
+                fontSize: 12
+              } : false}
+              labelLine={showDataLabels ? {
+                stroke: darkMode ? '#6b7280' : '#9ca3af',
+                strokeWidth: 1
+              } : false}
             >
-              {data.map((entry, index) => (
-                <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
-              ))}
+              {data.map((entry, index) => {
+                const color = themeColors[index % themeColors.length]
+                return (
+                  <Cell 
+                    key={`cell-${index}`} 
+                    fill={color}
+                    className="hover:opacity-80 transition-opacity cursor-pointer"
+                    onMouseEnter={() => setHoveredDataPoint(entry)}
+                    onMouseLeave={() => setHoveredDataPoint(null)}
+                  />
+                )
+              })}
             </Pie>
           </PieChart>
         )
@@ -296,23 +730,142 @@ export function AdvancedChart({
       case 'scatter':
         return (
           <ScatterChart {...commonProps}>
-            {showGrid && <CartesianGrid strokeDasharray="3 3" />}
-            <XAxis dataKey={xAxisKey} />
-            <YAxis dataKey={yAxisKey} />
+            {showGrid && <CartesianGrid {...gridStyle} />}
+            <XAxis 
+              dataKey={xAxisKey}
+              {...axisStyle}
+              tick={{ fontSize: 11 }}
+              axisLine={{ stroke: darkMode ? '#4b5563' : '#d1d5db' }}
+            />
+            <YAxis 
+              dataKey={yAxisKey}
+              {...axisStyle}
+              tick={{ fontSize: 11 }}
+              axisLine={{ stroke: darkMode ? '#4b5563' : '#d1d5db' }}
+            />
             {showTooltip && <Tooltip />}
-            {showLegend && <Legend />}
-            {visibleSeries.map((s, index) => (
-              <Scatter
-                key={s.dataKey}
-                dataKey={s.dataKey}
-                fill={s.color || colors[index % colors.length]}
-                name={s.name}
-                animationDuration={animated ? 1000 : 0}
+            {showLegend && (
+              <Legend 
+                content={(props) => {
+                  const CustomLegendComponent = customLegend
+                  return CustomLegendComponent ? <CustomLegendComponent {...props} /> : 
+                    <CustomLegend {...props} onItemClick={handleLegendItemClick} />
+                }}
               />
-            ))}
+            )}
+            {visibleSeries.map((s, index) => {
+              const color = s.color || themeColors[index % themeColors.length]
+              return (
+                <Scatter
+                  key={s.dataKey}
+                  data={data}
+                  fill={color}
+                  name={s.name}
+                  animationDuration={animated ? animationDuration : 0}
+                  animationBegin={index * 100}
+                  shape={(props: any) => {
+                    const isHovered = hoveredDataPoint === props.payload
+                    return (
+                      <circle
+                        {...props}
+                        r={isHovered ? 6 : 4}
+                        className="transition-all duration-200 hover:r-6"
+                        onMouseEnter={() => setHoveredDataPoint(props.payload)}
+                        onMouseLeave={() => setHoveredDataPoint(null)}
+                      />
+                    )
+                  }}
+                />
+              )
+            })}
           </ScatterChart>
         )
 
+      case 'radar':
+        return (
+          <RadarChart {...commonProps}>
+            <PolarGrid 
+              stroke={darkMode ? '#374151' : '#e5e7eb'}
+              strokeDasharray="3 3"
+            />
+            <PolarAngleAxis 
+              dataKey={xAxisKey}
+              {...axisStyle}
+              tick={{ fontSize: 10 }}
+            />
+            <PolarRadiusAxis 
+              {...axisStyle}
+              tick={{ fontSize: 10 }}
+              axisLine={false}
+            />
+            {showTooltip && (
+              <Tooltip 
+                /* @ts-ignore */
+                content={customTooltip ? customTooltip : CustomTooltip} 
+              />
+            )}
+            {showLegend && (
+              <Legend 
+                content={(props) => {
+                  const CustomLegendComponent = customLegend
+                  return CustomLegendComponent ? <CustomLegendComponent {...props} /> : 
+                    <CustomLegend {...props} onItemClick={handleLegendItemClick} />
+                }}
+              />
+            )}
+            {visibleSeries.map((s, index) => {
+              const color = s.color || themeColors[index % themeColors.length]
+              return (
+                <Radar
+                  key={s.dataKey}
+                  dataKey={s.dataKey}
+                  stroke={color}
+                  fill={color}
+                  fillOpacity={0.3}
+                  name={s.name}
+                  animationDuration={animated ? animationDuration : 0}
+                  animationBegin={index * 100}
+                />
+              )
+            })}
+          </RadarChart>
+        )
+        
+      case 'radialBar':
+        return (
+          <RadialBarChart 
+            {...commonProps}
+            innerRadius="10%"
+            outerRadius="90%"
+          >
+            {showTooltip && (
+              <Tooltip 
+                /* @ts-ignore */
+                content={customTooltip ? customTooltip : CustomTooltip} 
+              />
+            )}
+            {showLegend && (
+              <Legend 
+                content={(props) => {
+                  const CustomLegendComponent = customLegend
+                  return CustomLegendComponent ? <CustomLegendComponent {...props} /> : 
+                    <CustomLegend {...props} onItemClick={handleLegendItemClick} />
+                }}
+              />
+            )}
+            <RadialBar
+              dataKey={series[0]?.dataKey || 'value'}
+              cornerRadius={10}
+              fill={themeColors[0]}
+              animationDuration={animated ? animationDuration : 0}
+              label={showDataLabels ? {
+                fill: darkMode ? '#e5e7eb' : '#374151',
+                position: 'center'
+              } : false}
+            />
+          </RadialBarChart>
+        )
+
       default:
         return <div>Unsupported chart type</div>
     }
@@ -320,12 +873,20 @@ export function AdvancedChart({
 
   if (loading) {
     return (
-      <Card className={cn("w-full", className)}>
-        <CardContent className="flex items-center justify-center" style={{ height }}>
-          <div className="flex items-center space-x-2">
-            <RefreshCw className="h-4 w-4 animate-spin" />
-            <span>Loading chart...</span>
+      <Card className={cn("w-full overflow-hidden", className)}>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <div className="space-y-1">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-3 w-48" />
+          </div>
+          <div className="flex items-center space-x-1">
+            <Skeleton className="h-8 w-8 rounded" />
+            <Skeleton className="h-8 w-8 rounded" />
+            <Skeleton className="h-8 w-8 rounded" />
           </div>
+        </CardHeader>
+        <CardContent>
+          <ChartSkeleton height={height} />
         </CardContent>
       </Card>
     )
@@ -335,77 +896,336 @@ export function AdvancedChart({
     return (
       <Card className={cn("w-full", className)}>
         <CardContent className="flex items-center justify-center" style={{ height }}>
-          <div className="text-center">
-            <p className="text-destructive mb-2">{error}</p>
+          <motion.div 
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className="text-center"
+          >
+            <div className="w-12 h-12 rounded-full bg-destructive/10 dark:bg-destructive/20 flex items-center justify-center mx-auto mb-4">
+              <X className="w-6 h-6 text-destructive" />
+            </div>
+            <p className="text-destructive mb-4 font-medium">{error}</p>
             {onRefresh && (
-              <Button variant="outline" onClick={onRefresh}>
-                <RefreshCw className="mr-2 h-4 w-4" />
+              <Button 
+                variant="outline" 
+                onClick={onRefresh}
+                className="group"
+              >
+                <RefreshCw className="mr-2 h-4 w-4 group-hover:rotate-180 transition-transform duration-500" />
                 Retry
               </Button>
             )}
-          </div>
+          </motion.div>
         </CardContent>
       </Card>
     )
   }
 
   return (
-    <Card className={cn("w-full", className)} ref={chartRef}>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <div className="space-y-1">
-          <CardTitle className="text-base font-medium">
-            {title}
-            {trend && (
-              <span className="ml-2 inline-flex items-center">
-                {trend.direction === 'up' && <TrendingUp className="h-4 w-4 text-green-500" />}
-                {trend.direction === 'down' && <TrendingDown className="h-4 w-4 text-red-500" />}
-                {trend.direction === 'neutral' && <Minus className="h-4 w-4 text-gray-500" />}
-                <span className={cn(
-                  "ml-1 text-sm",
-                  trend.direction === 'up' && "text-green-500",
-                  trend.direction === 'down' && "text-red-500",
-                  trend.direction === 'neutral' && "text-gray-500"
-                )}>
-                  {trend.percentage}%
+    <motion.div
+      ref={containerRef}
+      className={cn(
+        "relative",
+        isFullscreen && "fixed inset-0 z-50 bg-background p-4"
+      )}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      <Card className={cn(
+        "w-full overflow-hidden transition-all duration-300",
+        darkMode && "dark",
+        isFullscreen && "h-full",
+        className
+      )} ref={chartRef}>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <motion.div 
+            className="space-y-1"
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.1 }}
+          >
+            <CardTitle className="text-base font-medium flex items-center gap-2">
+              {title}
+              {trend && (
+                <motion.span 
+                  className="inline-flex items-center"
+                  initial={{ scale: 0 }}
+                  animate={{ scale: 1 }}
+                  transition={{ type: "spring", delay: 0.3 }}
+                >
+                  {trend.direction === 'up' && (
+                    <TrendingUp className="h-4 w-4 text-green-500 dark:text-green-400" />
+                  )}
+                  {trend.direction === 'down' && (
+                    <TrendingDown className="h-4 w-4 text-red-500 dark:text-red-400" />
+                  )}
+                  {trend.direction === 'neutral' && (
+                    <Minus className="h-4 w-4 text-gray-500 dark:text-gray-400" />
+                  )}
+                  <span className={cn(
+                    "ml-1 text-sm font-semibold",
+                    trend.direction === 'up' && "text-green-500 dark:text-green-400",
+                    trend.direction === 'down' && "text-red-500 dark:text-red-400",
+                    trend.direction === 'neutral' && "text-gray-500 dark:text-gray-400"
+                  )}>
+                    {trend.percentage}%
+                  </span>
+                </motion.span>
+              )}
+              {sparklineMode && series[0] && (
+                <SparklinePreview 
+                  data={data} 
+                  dataKey={series[0].dataKey}
+                  color={series[0].color || themeColors[0]}
+                />
+              )}
+            </CardTitle>
+            {subtitle && (
+              <p className="text-xs text-muted-foreground">{subtitle}</p>
+            )}
+          </motion.div>
+          
+          <motion.div 
+            className="flex items-center space-x-1"
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.2 }}
+          >
+            {/* Zoom controls */}
+            {enableZoom && !sparklineMode && (
+              <div className="flex items-center border rounded-lg mr-2">
+                <Button 
+                  variant="ghost" 
+                  size="sm" 
+                  onClick={() => handleZoom('out')}
+                  disabled={zoomLevel <= 50}
+                  className="h-7 w-7 p-0"
+                >
+                  <ZoomOut className="h-3 w-3" />
+                </Button>
+                <span className="text-xs px-2 text-muted-foreground">
+                  {zoomLevel}%
                 </span>
-              </span>
+                <Button 
+                  variant="ghost" 
+                  size="sm" 
+                  onClick={() => handleZoom('in')}
+                  disabled={zoomLevel >= 200}
+                  className="h-7 w-7 p-0"
+                >
+                  <ZoomIn className="h-3 w-3" />
+                </Button>
+              </div>
             )}
-          </CardTitle>
-          {subtitle && (
-            <p className="text-xs text-muted-foreground">{subtitle}</p>
-          )}
-        </div>
-        <div className="flex items-center space-x-1">
-          {onRefresh && (
-            <Button variant="ghost" size="sm" onClick={onRefresh}>
-              <RefreshCw className="h-4 w-4" />
+            
+            {/* Other controls */}
+            {onRefresh && (
+              <Button 
+                variant="ghost" 
+                size="sm" 
+                onClick={onRefresh}
+                className="group"
+              >
+                <RefreshCw className="h-4 w-4 group-hover:rotate-180 transition-transform duration-500" />
+              </Button>
+            )}
+            
+            {/* Settings popover */}
+            <Popover open={showSettings} onOpenChange={setShowSettings}>
+              <PopoverTrigger asChild>
+                <Button variant="ghost" size="sm">
+                  <Settings className="h-4 w-4" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-80" align="end">
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <h4 className="font-medium text-sm">Chart Settings</h4>
+                  </div>
+                  
+                  {/* Theme selector */}
+                  <div className="space-y-2">
+                    <Label className="text-xs">Color Theme</Label>
+                    <div className="grid grid-cols-3 gap-2">
+                      {Object.entries(COLOR_THEMES).map(([themeName, colors]) => (
+                        <button
+                          key={themeName}
+                          onClick={() => setSelectedTheme(themeName as any)}
+                          className={cn(
+                            "p-2 rounded-lg border-2 transition-all",
+                            selectedTheme === themeName 
+                              ? "border-primary" 
+                              : "border-transparent hover:border-muted-foreground/20"
+                          )}
+                        >
+                          <div className="flex gap-1">
+                            {colors.slice(0, 3).map((color, i) => (
+                              <div
+                                key={i}
+                                className="w-3 h-3 rounded-full"
+                                style={{ backgroundColor: color }}
+                              />
+                            ))}
+                          </div>
+                          <span className="text-xs mt-1 block capitalize">
+                            {themeName}
+                          </span>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                  
+                  {/* Animation toggle */}
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="animation" className="text-xs">
+                      Animations
+                    </Label>
+                    <Switch
+                      id="animation"
+                      checked={animated}
+                      onCheckedChange={(checked) => {
+                        // Update animated prop
+                      }}
+                    />
+                  </div>
+                  
+                  {/* Grid toggle */}
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="grid" className="text-xs">
+                      Show Grid
+                    </Label>
+                    <Switch
+                      id="grid"
+                      checked={showGrid}
+                      onCheckedChange={(checked) => {
+                        // Update showGrid prop
+                      }}
+                    />
+                  </div>
+                  
+                  {/* Crosshair toggle */}
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="crosshair" className="text-xs">
+                      Crosshair Cursor
+                    </Label>
+                    <Switch
+                      id="crosshair"
+                      checked={showCrosshair}
+                      onCheckedChange={(checked) => {
+                        // Update showCrosshair prop
+                      }}
+                    />
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+            
+            {/* Export menu */}
+            {onExport && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="sm">
+                    <Download className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onClick={() => handleExport('png')}>
+                    <Image className="mr-2 h-4 w-4" />
+                    Export as PNG
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => handleExport('svg')}>
+                    <FileSpreadsheet className="mr-2 h-4 w-4" />
+                    Export as SVG
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => handleExport('pdf')}>
+                    <FileSpreadsheet className="mr-2 h-4 w-4" />
+                    Export as PDF
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={() => handleExport('csv')}>
+                    <FileSpreadsheet className="mr-2 h-4 w-4" />
+                    Export as CSV
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => handleExport('json')}>
+                    <FileJson className="mr-2 h-4 w-4" />
+                    Export as JSON
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+            
+            {/* Fullscreen toggle */}
+            <Button 
+              variant="ghost" 
+              size="sm" 
+              onClick={() => setIsFullscreen(!isFullscreen)}
+            >
+              {isFullscreen ? (
+                <X className="h-4 w-4" />
+              ) : (
+                <Maximize2 className="h-4 w-4" />
+              )}
             </Button>
+          </motion.div>
+        </CardHeader>
+        
+        <CardContent className="relative">
+          {/* Pan indicator */}
+          {enablePan && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              className="absolute top-2 left-2 z-10 flex items-center gap-1 text-xs text-muted-foreground bg-background/80 backdrop-blur-sm px-2 py-1 rounded-md"
+            >
+              <Move className="h-3 w-3" />
+              <span>Drag to pan</span>
+            </motion.div>
           )}
-          <Button variant="ghost" size="sm">
-            <Settings className="h-4 w-4" />
-          </Button>
-          {onExport && (
-            <Button variant="ghost" size="sm" onClick={() => handleExport('png')}>
-              <Download className="h-4 w-4" />
-            </Button>
+          
+          {/* Chart container */}
+          <motion.div
+            animate={{ scale: zoomLevel / 100 }}
+            transition={{ type: "spring", stiffness: 300, damping: 30 }}
+            style={{ transformOrigin: "center" }}
+          >
+            {responsive ? (
+              <ResponsiveContainer width="100%" height={sparklineMode ? 60 : height}>
+                {renderChart()}
+              </ResponsiveContainer>
+            ) : (
+              <div style={{ width: '100%', height: sparklineMode ? '60px' : `${height}px` }}>
+                {renderChart()}
+              </div>
+            )}
+          </motion.div>
+          
+          {/* Mini map */}
+          {showMiniMap && !sparklineMode && (
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="absolute bottom-2 right-2 w-32 h-20 bg-background/80 backdrop-blur-sm border rounded-lg p-1"
+            >
+              <ResponsiveContainer width="100%" height="100%">
+                <LineChart data={data} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
+                  {series.filter(s => !s.hide && !hiddenSeries.has(s.dataKey)).map((s, index) => (
+                    <Line
+                      key={s.dataKey}
+                      type="monotone"
+                      dataKey={s.dataKey}
+                      stroke={s.color || themeColors[index % themeColors.length]}
+                      strokeWidth={1}
+                      dot={false}
+                    />
+                  ))}
+                </LineChart>
+              </ResponsiveContainer>
+            </motion.div>
           )}
-          <Button variant="ghost" size="sm" onClick={() => setIsFullscreen(!isFullscreen)}>
-            <Maximize2 className="h-4 w-4" />
-          </Button>
-        </div>
-      </CardHeader>
-      <CardContent>
-        {responsive ? (
-          <ResponsiveContainer width="100%" height={height}>
-            {renderChart()}
-          </ResponsiveContainer>
-        ) : (
-          <div style={{ width: '100%', height: `${height}px` }}>
-            {renderChart()}
-          </div>
-        )}
-      </CardContent>
-    </Card>
+        </CardContent>
+      </Card>
+    </motion.div>
   )
 }