@moontra/moonui-pro 2.20.2 → 2.20.3

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

@@ -1,1246 +0,0 @@
-"use client"
-
-import React from 'react'
-import {
-  ResponsiveContainer,
-  LineChart,
-  BarChart,
-  AreaChart,
-  PieChart,
-  ScatterChart,
-  Line,
-  Bar,
-  Area,
-  Pie,
-  Cell,
-  Scatter,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  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'
-import { 
-  Download, 
-  Maximize2, 
-  Settings, 
-  RefreshCw,
-  TrendingUp,
-  TrendingDown,
-  Minus,
-  Lock,
-  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' | 'composed' | 'radar' | 'radialBar' | 'treemap' | 'funnel'
-
-export interface ChartDataPoint {
-  [key: string]: string | number | null
-}
-
-export interface ChartSeries {
-  dataKey: string
-  name: string
-  color: string
-  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 {
-  data: ChartDataPoint[]
-  type: ChartType
-  series: ChartSeries[]
-  title?: string
-  subtitle?: string
-  height?: number
-  width?: number | string
-  xAxisKey?: string
-  yAxisKey?: string
-  showGrid?: boolean
-  showTooltip?: boolean
-  showLegend?: boolean
-  showBrush?: boolean
-  showReference?: boolean
-  referenceLines?: Array<{
-    value: number
-    label?: string
-    color?: string
-  }>
-  referenceAreas?: Array<{
-    x1: string | number
-    x2: string | number
-    label?: string
-    color?: string
-  }>
-  colors?: string[]
-  className?: string
-  onDataPointClick?: (data: ChartDataPoint) => void
-  onExport?: (format: 'png' | 'svg' | 'pdf' | 'json' | 'csv') => void
-  onRefresh?: () => void
-  customTooltip?: React.ComponentType<any>
-  customLegend?: React.ComponentType<any>
-  loading?: boolean
-  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 = 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 p-3 rounded-xl shadow-2xl border border-border/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",
-            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,
-  type,
-  series,
-  title,
-  subtitle,
-  height = 400,
-  width = '100%',
-  xAxisKey = 'name',
-  yAxisKey,
-  showGrid = true,
-  showTooltip = true,
-  showLegend = true,
-  showBrush = false,
-  showReference = false,
-  referenceLines = [],
-  referenceAreas = [],
-  colors = DEFAULT_COLORS,
-  className,
-  onDataPointClick,
-  onExport,
-  onRefresh,
-  customTooltip,
-  customLegend,
-  loading = false,
-  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(() => {
-    if (!data || !Array.isArray(data) || !data.length || !series || !Array.isArray(series) || !series.length) return null
-    
-    const firstSeries = series[0]
-    if (!firstSeries || !firstSeries.dataKey) return null
-    
-    const values = data.map(d => Number(d[firstSeries.dataKey])).filter(v => !isNaN(v))
-    
-    if (values.length < 2) return null
-    
-    const first = values[0]
-    const last = values[values.length - 1]
-    
-    if (first === 0) return null // Avoid division by zero
-    
-    const change = ((last - first) / first) * 100
-    
-    return {
-      direction: change > 0 ? 'up' : change < 0 ? 'down' : 'neutral',
-      percentage: Math.abs(change).toFixed(1)
-    }
-  }, [data, series])
-
-  // 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 = () => {
-    // Güvenlik kontrolleri
-    if (!data || !Array.isArray(data) || !series || !Array.isArray(series)) {
-      return <div className="flex items-center justify-center h-full text-muted-foreground">No data available</div>
-    }
-
-    const commonProps = {
-      data,
-      width: typeof width === 'string' ? undefined : width,
-      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 && !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}>
-            {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 || (darkMode ? '#6b7280' : '#9ca3af')}
-                strokeDasharray="5 5"
-                label={ref.label}
-              />
-            ))}
-            {showReference && referenceAreas.map((ref, index) => (
-              <ReferenceArea
-                key={index}
-                x1={ref.x1}
-                x2={ref.x2}
-                fill={ref.color || (darkMode ? '#374151' : '#f3f4f6')}
-                fillOpacity={0.3}
-                label={ref.label}
-              />
-            ))}
-            {showBrush && !sparklineMode && (
-              <Brush 
-                height={30}
-                fill={darkMode ? '#1f2937' : '#f9fafb'}
-                stroke={darkMode ? '#374151' : '#e5e7eb'}
-              />
-            )}
-          </LineChart>
-        )
-
-      case 'bar':
-        return (
-          <BarChart {...commonProps}>
-            {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 || (darkMode ? '#6b7280' : '#9ca3af')}
-                strokeDasharray="5 5"
-                label={ref.label}
-              />
-            ))}
-            {showBrush && (
-              <Brush 
-                height={30}
-                fill={darkMode ? '#1f2937' : '#f9fafb'}
-                stroke={darkMode ? '#374151' : '#e5e7eb'}
-              />
-            )}
-          </BarChart>
-        )
-
-      case 'area':
-        return (
-          <AreaChart {...commonProps}>
-            {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 
-                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 || (darkMode ? '#6b7280' : '#9ca3af')}
-                strokeDasharray="5 5"
-                label={ref.label}
-              />
-            ))}
-            {showBrush && (
-              <Brush 
-                height={30}
-                fill={darkMode ? '#1f2937' : '#f9fafb'}
-                stroke={darkMode ? '#374151' : '#e5e7eb'}
-              />
-            )}
-          </AreaChart>
-        )
-
-      case 'pie':
-        return (
-          <PieChart {...commonProps}>
-            {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 ? 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) => {
-                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>
-        )
-
-      case 'scatter':
-        return (
-          <ScatterChart {...commonProps}>
-            {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 
-                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
-                    // Extract only the necessary props for the circle element
-                    const { cx, cy, fill } = props
-                    return (
-                      <circle
-                        cx={cx}
-                        cy={cy}
-                        fill={fill}
-                        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>
-    }
-  }
-
-  if (loading) {
-    return (
-      <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>
-    )
-  }
-
-  if (error) {
-    return (
-      <Card className={cn("w-full", className)}>
-        <CardContent className="flex items-center justify-center" style={{ height }}>
-          <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}
-                className="group"
-              >
-                <RefreshCw className="mr-2 h-4 w-4 group-hover:rotate-180 transition-transform duration-500" />
-                Retry
-              </Button>
-            )}
-          </motion.div>
-        </CardContent>
-      </Card>
-    )
-  }
-
-  return (
-    <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-muted-foreground" />
-                  )}
-                  <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-muted-foreground"
-                  )}>
-                    {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>
-                <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>
-            )}
-            
-            {/* 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>
-          )}
-          
-          {/* 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>
-          )}
-        </CardContent>
-      </Card>
-    </motion.div>
-  )
-}
-
-export default AdvancedChart