@libredb/studio 0.9.7

package/src/components/DataCharts.tsx

@@ -0,0 +1,962 @@
+"use client";
+
+import React, { useState, useMemo, useRef, useCallback } from 'react';
+import {
+  BarChart,
+  Bar,
+  LineChart,
+  Line,
+  PieChart,
+  Pie,
+  AreaChart,
+  Area,
+  ScatterChart,
+  Scatter,
+  ZAxis,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  Cell,
+  ResponsiveContainer,
+} from 'recharts';
+import { QueryResult } from '@/lib/types';
+import { cn } from '@/lib/utils';
+import {
+  BarChart3,
+  LineChart as LineChartIcon,
+  PieChart as PieChartIcon,
+  AreaChart as AreaChartIcon,
+  Download,
+  Settings2,
+  TrendingUp,
+  Hash,
+  Calendar,
+  Type,
+  AlertCircle,
+  Circle,
+  BarChart2,
+  Save,
+  FolderOpen,
+  X,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { storage } from '@/lib/storage';
+
+// Chart colors matching CSS variables
+const CHART_COLORS = [
+  'hsl(217, 91%, 60%)',  // Blue
+  'hsl(142, 71%, 45%)',  // Green
+  'hsl(38, 92%, 50%)',   // Amber
+  'hsl(270, 91%, 65%)',  // Purple
+  'hsl(330, 81%, 60%)',  // Pink
+  'hsl(199, 89%, 48%)',  // Cyan
+  'hsl(24, 95%, 53%)',   // Orange
+  'hsl(162, 63%, 41%)',  // Teal
+];
+
+type ChartType = 'bar' | 'line' | 'pie' | 'area' | 'scatter' | 'histogram' | 'stacked-bar' | 'stacked-area';
+
+export type AggregationType = 'none' | 'sum' | 'avg' | 'count' | 'min' | 'max';
+export type DateGrouping = 'hour' | 'day' | 'week' | 'month' | 'year';
+
+export interface FieldAnalysis {
+  name: string;
+  type: 'numeric' | 'categorical' | 'date' | 'unknown';
+  uniqueValues: number;
+  hasNulls: boolean;
+  sample: unknown;
+}
+
+export interface DataAnalysis {
+  fields: FieldAnalysis[];
+  numericFields: string[];
+  categoricalFields: string[];
+  dateFields: string[];
+  suggestedChartType: ChartType;
+  isVisualizable: boolean;
+  reason?: string;
+}
+
+interface DataChartsProps {
+  result: QueryResult | null;
+}
+
+export function analyzeField(name: string, values: unknown[]): FieldAnalysis {
+  const nonNullValues = values.filter(v => v !== null && v !== undefined);
+  const uniqueValues = new Set(nonNullValues).size;
+  const sample = nonNullValues[0];
+
+  // Check if numeric
+  const numericCount = nonNullValues.filter(v => typeof v === 'number' || (typeof v === 'string' && !isNaN(Number(v)))).length;
+  const isNumeric = numericCount > nonNullValues.length * 0.8;
+
+  // Check if date
+  const datePatterns = [
+    /^\d{4}-\d{2}-\d{2}/,  // ISO date
+    /^\d{2}\/\d{2}\/\d{4}/, // US date
+    /^\d{2}\.\d{2}\.\d{4}/, // EU date
+  ];
+  const isDate = nonNullValues.some(v =>
+    (typeof v === 'string' && datePatterns.some(p => p.test(v))) ||
+    v instanceof Date
+  );
+
+  let type: FieldAnalysis['type'] = 'unknown';
+  if (isDate) type = 'date';
+  else if (isNumeric) type = 'numeric';
+  else if (uniqueValues <= 50) type = 'categorical';
+
+  return {
+    name,
+    type,
+    uniqueValues,
+    hasNulls: nonNullValues.length < values.length,
+    sample,
+  };
+}
+
+export function analyzeData(result: QueryResult | null): DataAnalysis {
+  if (!result || !result.rows || result.rows.length === 0) {
+    return {
+      fields: [],
+      numericFields: [],
+      categoricalFields: [],
+      dateFields: [],
+      suggestedChartType: 'bar',
+      isVisualizable: false,
+      reason: 'No data to visualize',
+    };
+  }
+
+  if (result.rows.length < 2) {
+    return {
+      fields: [],
+      numericFields: [],
+      categoricalFields: [],
+      dateFields: [],
+      suggestedChartType: 'bar',
+      isVisualizable: false,
+      reason: 'Need at least 2 rows for visualization',
+    };
+  }
+
+  const fieldNames = result.fields || Object.keys(result.rows[0]);
+  const fields = fieldNames.map(name =>
+    analyzeField(name, result.rows.map(row => row[name]))
+  );
+
+  const numericFields = fields.filter(f => f.type === 'numeric').map(f => f.name);
+  const categoricalFields = fields.filter(f => f.type === 'categorical').map(f => f.name);
+  const dateFields = fields.filter(f => f.type === 'date').map(f => f.name);
+
+  if (numericFields.length === 0) {
+    return {
+      fields,
+      numericFields,
+      categoricalFields,
+      dateFields,
+      suggestedChartType: 'bar',
+      isVisualizable: false,
+      reason: 'No numeric fields found for Y-axis',
+    };
+  }
+
+  // Suggest chart type based on data
+  let suggestedChartType: ChartType = 'bar';
+
+  if (dateFields.length > 0) {
+    suggestedChartType = 'line'; // Time series → line chart
+  } else if (numericFields.length >= 2 && categoricalFields.length === 0) {
+    suggestedChartType = 'scatter'; // 2+ numeric, no categorical → scatter
+  } else if (categoricalFields.length > 0 && result.rows.length <= 10) {
+    suggestedChartType = 'pie'; // Few categories → pie chart
+  } else if (categoricalFields.length > 0) {
+    suggestedChartType = 'bar'; // Many categories → bar chart
+  }
+
+  return {
+    fields,
+    numericFields,
+    categoricalFields,
+    dateFields,
+    suggestedChartType,
+    isVisualizable: true,
+  };
+}
+
+export function formatNumber(value: number): string {
+  if (Math.abs(value) >= 1000000) {
+    return (value / 1000000).toFixed(1) + 'M';
+  }
+  if (Math.abs(value) >= 1000) {
+    return (value / 1000).toFixed(1) + 'K';
+  }
+  return value.toLocaleString();
+}
+
+interface TooltipProps {
+  active?: boolean;
+  payload?: Array<{
+    name: string;
+    value: number;
+    color: string;
+  }>;
+  label?: string;
+}
+
+const CustomTooltip = ({ active, payload, label }: TooltipProps) => {
+  if (!active || !payload || !payload.length) return null;
+
+  return (
+    <div className="bg-[#111] border border-white/10 rounded-lg px-3 py-2 shadow-xl">
+      <p className="text-zinc-400 text-xs mb-1">{label}</p>
+      {payload.map((entry, index) => (
+        <p key={index} className="text-sm" style={{ color: entry.color }}>
+          {entry.name}: <span className="font-mono font-medium">{formatNumber(entry.value)}</span>
+        </p>
+      ))}
+    </div>
+  );
+};
+
+// Histogram bin calculation
+export function computeHistogramBins(values: number[], buckets: number): { range: string; count: number; min: number; max: number }[] {
+  if (values.length === 0) return [];
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  if (min === max) return [{ range: `${min}`, count: values.length, min, max }];
+  const binWidth = (max - min) / buckets;
+  const bins = Array.from({ length: buckets }, (_, i) => ({
+    range: `${(min + i * binWidth).toFixed(1)}-${(min + (i + 1) * binWidth).toFixed(1)}`,
+    count: 0,
+    min: min + i * binWidth,
+    max: min + (i + 1) * binWidth,
+  }));
+  values.forEach(v => {
+    let idx = Math.floor((v - min) / binWidth);
+    if (idx >= buckets) idx = buckets - 1;
+    bins[idx].count++;
+  });
+  return bins;
+}
+
+// Data aggregation helper
+export function aggregateData(
+  rows: Record<string, unknown>[],
+  groupByField: string,
+  metrics: { field: string; aggregation: AggregationType }[],
+  dateGrouping?: DateGrouping
+): Record<string, unknown>[] {
+  if (metrics.every(m => m.aggregation === 'none')) return rows;
+
+  const groups = new Map<string, Record<string, unknown>[]>();
+  rows.forEach(row => {
+    let key = String(row[groupByField] ?? '');
+    if (dateGrouping && key) {
+      key = groupByDate(key, dateGrouping);
+    }
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key)!.push(row);
+  });
+
+  return Array.from(groups.entries()).map(([key, groupRows]) => {
+    const result: Record<string, unknown> = { [groupByField]: key };
+    metrics.forEach(({ field, aggregation }) => {
+      const values = groupRows.map(r => Number(r[field]) || 0);
+      switch (aggregation) {
+        case 'sum': result[field] = values.reduce((a, b) => a + b, 0); break;
+        case 'avg': result[field] = values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0; break;
+        case 'count': result[field] = values.length; break;
+        case 'min': result[field] = Math.min(...values); break;
+        case 'max': result[field] = Math.max(...values); break;
+        default: result[field] = values[0];
+      }
+    });
+    return result;
+  });
+}
+
+export function groupByDate(dateStr: string, grouping: DateGrouping): string {
+  const date = new Date(dateStr);
+  if (isNaN(date.getTime())) return dateStr;
+  switch (grouping) {
+    case 'hour': return `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')} ${String(date.getHours()).padStart(2,'0')}:00`;
+    case 'day': return `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')}`;
+    case 'week': { const d = new Date(date); d.setDate(d.getDate() - d.getDay()); return `W${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`; }
+    case 'month': return `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}`;
+    case 'year': return `${date.getFullYear()}`;
+    default: return dateStr;
+  }
+}
+
+export function DataCharts({ result }: DataChartsProps) {
+  const chartRef = useRef<HTMLDivElement>(null);
+  const analysis = useMemo(() => analyzeData(result), [result]);
+
+  const [chartType, setChartType] = useState<ChartType>(analysis.suggestedChartType);
+  const [xAxis, setXAxis] = useState<string>('');
+  const [yAxis, setYAxis] = useState<string[]>([]);
+  const [scatterY, setScatterY] = useState<string>('');
+  const [histogramBuckets, setHistogramBuckets] = useState(10);
+  const [aggregation, setAggregation] = useState<AggregationType>('none');
+  const [dateGrouping, setDateGrouping] = useState<DateGrouping | ''>('');
+
+  // Saved charts state
+  const [savedCharts, setSavedCharts] = useState<{ id: string; name: string; chartType: ChartType; xAxis: string; yAxis: string[]; aggregation: AggregationType; dateGrouping: string }[]>([]);
+  const [showSaveDialog, setShowSaveDialog] = useState(false);
+  const [saveName, setSaveName] = useState('');
+
+  // Load saved charts from storage
+  React.useEffect(() => {
+    const charts = storage.getSavedCharts();
+    if (charts.length > 0) {
+      setSavedCharts(charts.map(c => ({
+        id: c.id,
+        name: c.name,
+        chartType: c.chartType as ChartType,
+        xAxis: c.xAxis,
+        yAxis: c.yAxis,
+        aggregation: (c.aggregation || 'none') as AggregationType,
+        dateGrouping: c.dateGrouping || '',
+      })));
+    }
+  }, []);
+
+  // Initialize axis selections when analysis changes
+  React.useEffect(() => {
+    if (analysis.isVisualizable) {
+      setChartType(analysis.suggestedChartType);
+
+      const defaultX = analysis.categoricalFields[0] || analysis.dateFields[0] || analysis.fields[0]?.name || '';
+      setXAxis(defaultX);
+
+      if (analysis.numericFields.length > 0) {
+        setYAxis([analysis.numericFields[0]]);
+      }
+      if (analysis.numericFields.length >= 2) {
+        setScatterY(analysis.numericFields[1]);
+      }
+    }
+  }, [analysis]);
+
+  const chartData = useMemo(() => {
+    if (!result?.rows) return [];
+
+    // Histogram: special data preparation
+    if (chartType === 'histogram' && yAxis.length > 0) {
+      const values = result.rows.map(r => Number(r[yAxis[0]]) || 0).filter(v => !isNaN(v));
+      return computeHistogramBins(values, histogramBuckets);
+    }
+
+    // Scatter: needs both axes as numeric
+    if (chartType === 'scatter') {
+      if (!xAxis || !scatterY) return [];
+      return result.rows.map(row => ({
+        [xAxis]: typeof row[xAxis] === 'number' ? row[xAxis] : Number(row[xAxis]) || 0,
+        [scatterY]: typeof row[scatterY] === 'number' ? row[scatterY] : Number(row[scatterY]) || 0,
+      }));
+    }
+
+    if (!xAxis) return [];
+
+    const baseData = result.rows.map(row => {
+      const dataPoint: Record<string, unknown> = { [xAxis]: row[xAxis] };
+      yAxis.forEach(field => {
+        const value = row[field];
+        dataPoint[field] = typeof value === 'number' ? value : Number(value) || 0;
+      });
+      return dataPoint;
+    });
+
+    // Apply aggregation if set
+    if (aggregation !== 'none' && yAxis.length > 0) {
+      return aggregateData(
+        baseData,
+        xAxis,
+        yAxis.map(f => ({ field: f, aggregation })),
+        dateGrouping || undefined
+      );
+    }
+
+    // Apply date grouping even without aggregation
+    if (dateGrouping) {
+      return aggregateData(
+        baseData,
+        xAxis,
+        yAxis.map(f => ({ field: f, aggregation: 'sum' })),
+        dateGrouping
+      );
+    }
+
+    return baseData;
+  }, [result, xAxis, yAxis, chartType, scatterY, histogramBuckets, aggregation, dateGrouping]);
+
+  // Save chart config
+  const handleSaveChart = useCallback(() => {
+    if (!saveName.trim()) return;
+    const newChart = {
+      id: Date.now().toString(),
+      name: saveName.trim(),
+      chartType,
+      xAxis,
+      yAxis: [...yAxis],
+      aggregation,
+      dateGrouping: dateGrouping || '',
+    };
+    const updated = [...savedCharts, newChart];
+    setSavedCharts(updated);
+    storage.saveChart({
+      id: newChart.id,
+      name: newChart.name,
+      chartType: newChart.chartType,
+      xAxis: newChart.xAxis,
+      yAxis: newChart.yAxis,
+      aggregation: newChart.aggregation,
+      dateGrouping: (newChart.dateGrouping || undefined) as DateGrouping | undefined,
+      createdAt: new Date(),
+    });
+    setShowSaveDialog(false);
+    setSaveName('');
+  }, [saveName, chartType, xAxis, yAxis, aggregation, dateGrouping, savedCharts]);
+
+  // Load saved chart config
+  const loadSavedChart = useCallback((chart: typeof savedCharts[0]) => {
+    setChartType(chart.chartType);
+    setXAxis(chart.xAxis);
+    setYAxis(chart.yAxis);
+    setAggregation(chart.aggregation);
+    setDateGrouping((chart.dateGrouping || '') as DateGrouping | '');
+  }, []);
+
+  // Delete saved chart
+  const deleteSavedChart = useCallback((id: string) => {
+    const updated = savedCharts.filter(c => c.id !== id);
+    setSavedCharts(updated);
+    storage.deleteChart(id);
+  }, [savedCharts]);
+
+  const exportChart = useCallback(async (format: 'png' | 'svg') => {
+    if (!chartRef.current) return;
+
+    if (format === 'png') {
+      try {
+        // Dynamic import for html2canvas
+        const html2canvasModule = await import('html2canvas');
+        const html2canvas = html2canvasModule.default as (element: HTMLElement, options?: { backgroundColor?: string; scale?: number }) => Promise<HTMLCanvasElement>;
+        const canvas = await html2canvas(chartRef.current, {
+          backgroundColor: '#080808',
+          scale: 2,
+        });
+        const link = document.createElement('a');
+        link.download = `chart_${Date.now()}.png`;
+        link.href = canvas.toDataURL('image/png');
+        link.click();
+      } catch (error) {
+        console.error('Failed to export PNG:', error);
+      }
+    } else {
+      // SVG export - find the SVG element
+      const svgElement = chartRef.current.querySelector('svg');
+      if (svgElement) {
+        const svgData = new XMLSerializer().serializeToString(svgElement);
+        const blob = new Blob([svgData], { type: 'image/svg+xml' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.download = `chart_${Date.now()}.svg`;
+        link.href = url;
+        link.click();
+        URL.revokeObjectURL(url);
+      }
+    }
+  }, []);
+
+  const toggleYAxis = (field: string) => {
+    setYAxis(prev => {
+      if (prev.includes(field)) {
+        return prev.filter(f => f !== field);
+      }
+      return [...prev, field];
+    });
+  };
+
+  // Empty state
+  if (!analysis.isVisualizable) {
+    return (
+      <div className="h-full flex flex-col items-center justify-center bg-[#080808] text-zinc-500">
+        <TrendingUp className="w-12 h-12 mb-4 opacity-30" />
+        <p className="text-sm font-medium mb-1">Cannot Visualize Data</p>
+        <p className="text-xs text-zinc-600">{analysis.reason}</p>
+      </div>
+    );
+  }
+
+  const chartTypes: { type: ChartType; icon: React.ReactNode; label: string }[] = [
+    { type: 'bar', icon: <BarChart3 className="w-4 h-4" />, label: 'Bar' },
+    { type: 'line', icon: <LineChartIcon className="w-4 h-4" />, label: 'Line' },
+    { type: 'pie', icon: <PieChartIcon className="w-4 h-4" />, label: 'Pie' },
+    { type: 'area', icon: <AreaChartIcon className="w-4 h-4" />, label: 'Area' },
+    { type: 'scatter', icon: <Circle className="w-4 h-4" />, label: 'Scatter' },
+    { type: 'histogram', icon: <BarChart2 className="w-4 h-4" />, label: 'Histogram' },
+    { type: 'stacked-bar', icon: <BarChart3 className="w-4 h-4" />, label: 'Stacked' },
+    { type: 'stacked-area', icon: <AreaChartIcon className="w-4 h-4" />, label: 'Stack Area' },
+  ];
+
+  const getFieldIcon = (type: FieldAnalysis['type']) => {
+    switch (type) {
+      case 'numeric': return <Hash className="w-3 h-3" />;
+      case 'date': return <Calendar className="w-3 h-3" />;
+      case 'categorical': return <Type className="w-3 h-3" />;
+      default: return <AlertCircle className="w-3 h-3" />;
+    }
+  };
+
+  return (
+    <div className="h-full flex flex-col bg-[#080808]">
+      {/* Config Bar */}
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-white/5 bg-[#0a0a0a] flex-wrap">
+        {/* Chart Type Selector */}
+        <div className="flex items-center gap-1 bg-white/5 rounded-lg p-0.5">
+          {chartTypes.map(({ type, icon, label }) => (
+            <button
+              key={type}
+              onClick={() => setChartType(type)}
+              className={cn(
+                "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all",
+                chartType === type
+                  ? "bg-blue-600 text-white"
+                  : "text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
+              )}
+              title={label}
+            >
+              {icon}
+              <span className="hidden sm:inline">{label}</span>
+            </button>
+          ))}
+        </div>
+
+        <div className="h-4 w-px bg-white/10 hidden sm:block" />
+
+        {/* X-Axis Selector */}
+        {chartType !== 'pie' && (
+          <div className="flex items-center gap-2">
+            <span className="text-[10px] text-zinc-600 uppercase tracking-wider">X-Axis</span>
+            <Select value={xAxis} onValueChange={setXAxis}>
+              <SelectTrigger className="h-7 w-[140px] text-xs bg-white/5 border-white/10">
+                <SelectValue placeholder="Select field" />
+              </SelectTrigger>
+              <SelectContent className="bg-[#111] border-white/10">
+                {analysis.fields.map(field => (
+                  <SelectItem key={field.name} value={field.name} className="text-xs">
+                    <div className="flex items-center gap-2">
+                      {getFieldIcon(field.type)}
+                      {field.name}
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
+        {/* Y-Axis Selector (for pie, this becomes the value field) */}
+        <div className="flex items-center gap-2">
+          <span className="text-[10px] text-zinc-600 uppercase tracking-wider">
+            {chartType === 'pie' ? 'Value' : 'Y-Axis'}
+          </span>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm" className="h-7 text-xs bg-white/5 border-white/10 gap-1">
+                {yAxis.length > 0 ? yAxis.join(', ') : 'Select fields'}
+                <Settings2 className="w-3 h-3 ml-1" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="bg-[#111] border-white/10">
+              {analysis.numericFields.map(field => (
+                <DropdownMenuItem
+                  key={field}
+                  onClick={() => chartType === 'pie' ? setYAxis([field]) : toggleYAxis(field)}
+                  className={cn(
+                    "text-xs cursor-pointer",
+                    yAxis.includes(field) && "bg-blue-600/20 text-blue-400"
+                  )}
+                >
+                  <Hash className="w-3 h-3 mr-2" />
+                  {field}
+                  {yAxis.includes(field) && <span className="ml-auto">✓</span>}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        {/* Scatter Y-axis */}
+        {chartType === 'scatter' && (
+          <div className="flex items-center gap-2">
+            <span className="text-[10px] text-zinc-600 uppercase tracking-wider">Y</span>
+            <Select value={scatterY} onValueChange={setScatterY}>
+              <SelectTrigger className="h-7 w-[120px] text-xs bg-white/5 border-white/10">
+                <SelectValue placeholder="Y field" />
+              </SelectTrigger>
+              <SelectContent className="bg-[#111] border-white/10">
+                {analysis.numericFields.filter(f => f !== xAxis).map(field => (
+                  <SelectItem key={field} value={field} className="text-xs">{field}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
+        {/* Histogram buckets */}
+        {chartType === 'histogram' && (
+          <div className="flex items-center gap-2">
+            <span className="text-[10px] text-zinc-600 uppercase tracking-wider">Buckets</span>
+            <Select value={String(histogramBuckets)} onValueChange={(v) => setHistogramBuckets(Number(v))}>
+              <SelectTrigger className="h-7 w-[70px] text-xs bg-white/5 border-white/10">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent className="bg-[#111] border-white/10">
+                {[5, 10, 20, 50].map(n => (
+                  <SelectItem key={n} value={String(n)} className="text-xs">{n}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
+        {/* Aggregation */}
+        {chartType !== 'scatter' && chartType !== 'histogram' && chartType !== 'pie' && (
+          <div className="flex items-center gap-2">
+            <span className="text-[10px] text-zinc-600 uppercase tracking-wider">Agg</span>
+            <Select value={aggregation} onValueChange={(v) => setAggregation(v as AggregationType)}>
+              <SelectTrigger className="h-7 w-[80px] text-xs bg-white/5 border-white/10">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent className="bg-[#111] border-white/10">
+                {(['none', 'sum', 'avg', 'count', 'min', 'max'] as const).map(a => (
+                  <SelectItem key={a} value={a} className="text-xs uppercase">{a}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
+        {/* Date Grouping */}
+        {analysis.dateFields.length > 0 && chartType !== 'scatter' && chartType !== 'histogram' && (
+          <div className="flex items-center gap-2">
+            <span className="text-[10px] text-zinc-600 uppercase tracking-wider">Group</span>
+            <Select value={dateGrouping || 'none'} onValueChange={(v) => setDateGrouping(v === 'none' ? '' : v as DateGrouping)}>
+              <SelectTrigger className="h-7 w-[80px] text-xs bg-white/5 border-white/10">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent className="bg-[#111] border-white/10">
+                <SelectItem value="none" className="text-xs">None</SelectItem>
+                {(['hour', 'day', 'week', 'month', 'year'] as const).map(g => (
+                  <SelectItem key={g} value={g} className="text-xs capitalize">{g}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
+        {/* Spacer */}
+        <div className="flex-1" />
+
+        {/* Save Chart */}
+        {showSaveDialog ? (
+          <div className="flex items-center gap-1">
+            <input
+              type="text"
+              placeholder="Chart name..."
+              value={saveName}
+              onChange={(e) => setSaveName(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && handleSaveChart()}
+              className="h-7 px-2 text-xs bg-white/5 border border-white/10 rounded text-zinc-300 focus:outline-none focus:border-blue-500"
+              autoFocus
+            />
+            <Button variant="ghost" size="sm" className="h-7 text-xs text-blue-400" onClick={handleSaveChart}>Save</Button>
+            <Button variant="ghost" size="sm" className="h-7 text-xs text-zinc-500" onClick={() => setShowSaveDialog(false)}>Cancel</Button>
+          </div>
+        ) : (
+          <div className="flex items-center gap-1">
+            <Button variant="ghost" size="sm" className="h-7 text-[10px] text-zinc-500 hover:text-white gap-1" onClick={() => setShowSaveDialog(true)}>
+              <Save className="w-3 h-3" /> Save
+            </Button>
+            {savedCharts.length > 0 && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="sm" className="h-7 text-[10px] text-zinc-500 hover:text-white gap-1">
+                    <FolderOpen className="w-3 h-3" /> Saved ({savedCharts.length})
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="bg-[#111] border-white/10 max-h-48 overflow-auto">
+                  {savedCharts.map(chart => (
+                    <DropdownMenuItem key={chart.id} className="text-xs cursor-pointer flex items-center justify-between gap-4">
+                      <span onClick={() => loadSavedChart(chart)}>{chart.name} <span className="text-zinc-600">({chart.chartType})</span></span>
+                      <button onClick={(e) => { e.stopPropagation(); deleteSavedChart(chart.id); }} className="text-zinc-600 hover:text-red-400">
+                        <X className="w-3 h-3" />
+                      </button>
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </div>
+        )}
+
+        {/* Export Button */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="h-7 text-[10px] font-bold uppercase text-zinc-500 hover:text-white gap-1">
+              <Download className="w-3 h-3" /> Export
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="bg-[#111] border-white/10">
+            <DropdownMenuItem onClick={() => exportChart('png')} className="text-xs cursor-pointer">
+              Export as PNG
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => exportChart('svg')} className="text-xs cursor-pointer">
+              Export as SVG
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* Chart Area */}
+      <div ref={chartRef} className="flex-1 p-4 min-h-0">
+        {yAxis.length === 0 ? (
+          <div className="h-full flex items-center justify-center text-zinc-600 text-sm">
+            Select at least one numeric field for the chart
+          </div>
+        ) : (
+          <ResponsiveContainer width="100%" height="100%">
+            {chartType === 'bar' ? (
+              <BarChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 60 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#222" />
+                <XAxis
+                  dataKey={xAxis}
+                  tick={{ fill: '#666', fontSize: 11 }}
+                  angle={-45}
+                  textAnchor="end"
+                  height={60}
+                />
+                <YAxis
+                  tick={{ fill: '#666', fontSize: 11 }}
+                  tickFormatter={formatNumber}
+                />
+                <Tooltip content={<CustomTooltip />} />
+                <Legend wrapperStyle={{ paddingTop: 20 }} />
+                {yAxis.map((field, index) => (
+                  <Bar
+                    key={field}
+                    dataKey={field}
+                    fill={CHART_COLORS[index % CHART_COLORS.length]}
+                    radius={[4, 4, 0, 0]}
+                  />
+                ))}
+              </BarChart>
+            ) : chartType === 'line' ? (
+              <LineChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 60 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#222" />
+                <XAxis
+                  dataKey={xAxis}
+                  tick={{ fill: '#666', fontSize: 11 }}
+                  angle={-45}
+                  textAnchor="end"
+                  height={60}
+                />
+                <YAxis
+                  tick={{ fill: '#666', fontSize: 11 }}
+                  tickFormatter={formatNumber}
+                />
+                <Tooltip content={<CustomTooltip />} />
+                <Legend wrapperStyle={{ paddingTop: 20 }} />
+                {yAxis.map((field, index) => (
+                  <Line
+                    key={field}
+                    type="monotone"
+                    dataKey={field}
+                    stroke={CHART_COLORS[index % CHART_COLORS.length]}
+                    strokeWidth={2}
+                    dot={{ fill: CHART_COLORS[index % CHART_COLORS.length], strokeWidth: 0, r: 4 }}
+                    activeDot={{ r: 6, strokeWidth: 0 }}
+                  />
+                ))}
+              </LineChart>
+            ) : chartType === 'area' ? (
+              <AreaChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 60 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#222" />
+                <XAxis
+                  dataKey={xAxis}
+                  tick={{ fill: '#666', fontSize: 11 }}
+                  angle={-45}
+                  textAnchor="end"
+                  height={60}
+                />
+                <YAxis
+                  tick={{ fill: '#666', fontSize: 11 }}
+                  tickFormatter={formatNumber}
+                />
+                <Tooltip content={<CustomTooltip />} />
+                <Legend wrapperStyle={{ paddingTop: 20 }} />
+                {yAxis.map((field, index) => (
+                  <Area
+                    key={field}
+                    type="monotone"
+                    dataKey={field}
+                    stroke={CHART_COLORS[index % CHART_COLORS.length]}
+                    fill={CHART_COLORS[index % CHART_COLORS.length]}
+                    fillOpacity={0.3}
+                    strokeWidth={2}
+                  />
+                ))}
+              </AreaChart>
+            ) : chartType === 'scatter' ? (
+              <ScatterChart margin={{ top: 20, right: 30, left: 20, bottom: 60 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#222" />
+                <XAxis
+                  dataKey={xAxis}
+                  type="number"
+                  tick={{ fill: '#666', fontSize: 11 }}
+                  name={xAxis}
+                  label={{ value: xAxis, position: 'bottom', fill: '#666', fontSize: 11 }}
+                />
+                <YAxis
+                  dataKey={scatterY}
+                  type="number"
+                  tick={{ fill: '#666', fontSize: 11 }}
+                  name={scatterY}
+                  label={{ value: scatterY, angle: -90, position: 'insideLeft', fill: '#666', fontSize: 11 }}
+                />
+                <ZAxis range={[40, 200]} />
+                <Tooltip content={<CustomTooltip />} cursor={{ strokeDasharray: '3 3' }} />
+                <Scatter
+                  name={`${xAxis} vs ${scatterY}`}
+                  data={chartData}
+                  fill={CHART_COLORS[0]}
+                  shape="circle"
+                />
+              </ScatterChart>
+            ) : chartType === 'histogram' ? (
+              <BarChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 60 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#222" />
+                <XAxis
+                  dataKey="range"
+                  tick={{ fill: '#666', fontSize: 10 }}
+                  angle={-45}
+                  textAnchor="end"
+                  height={60}
+                />
+                <YAxis
+                  tick={{ fill: '#666', fontSize: 11 }}
+                  label={{ value: 'Count', angle: -90, position: 'insideLeft', fill: '#666', fontSize: 11 }}
+                />
+                <Tooltip content={<CustomTooltip />} />
+                <Bar dataKey="count" fill={CHART_COLORS[0]} radius={[4, 4, 0, 0]} />
+              </BarChart>
+            ) : chartType === 'stacked-bar' ? (
+              <BarChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 60 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#222" />
+                <XAxis
+                  dataKey={xAxis}
+                  tick={{ fill: '#666', fontSize: 11 }}
+                  angle={-45}
+                  textAnchor="end"
+                  height={60}
+                />
+                <YAxis
+                  tick={{ fill: '#666', fontSize: 11 }}
+                  tickFormatter={formatNumber}
+                />
+                <Tooltip content={<CustomTooltip />} />
+                <Legend wrapperStyle={{ paddingTop: 20 }} />
+                {yAxis.map((field, index) => (
+                  <Bar
+                    key={field}
+                    dataKey={field}
+                    stackId="stack"
+                    fill={CHART_COLORS[index % CHART_COLORS.length]}
+                  />
+                ))}
+              </BarChart>
+            ) : chartType === 'stacked-area' ? (
+              <AreaChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 60 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#222" />
+                <XAxis
+                  dataKey={xAxis}
+                  tick={{ fill: '#666', fontSize: 11 }}
+                  angle={-45}
+                  textAnchor="end"
+                  height={60}
+                />
+                <YAxis
+                  tick={{ fill: '#666', fontSize: 11 }}
+                  tickFormatter={formatNumber}
+                />
+                <Tooltip content={<CustomTooltip />} />
+                <Legend wrapperStyle={{ paddingTop: 20 }} />
+                {yAxis.map((field, index) => (
+                  <Area
+                    key={field}
+                    type="monotone"
+                    dataKey={field}
+                    stackId="stack"
+                    stroke={CHART_COLORS[index % CHART_COLORS.length]}
+                    fill={CHART_COLORS[index % CHART_COLORS.length]}
+                    fillOpacity={0.5}
+                  />
+                ))}
+              </AreaChart>
+            ) : (
+              <PieChart margin={{ top: 20, right: 30, left: 20, bottom: 20 }}>
+                <Pie
+                  data={chartData.slice(0, 10)}
+                  dataKey={yAxis[0]}
+                  nameKey={xAxis}
+                  cx="50%"
+                  cy="50%"
+                  outerRadius="70%"
+                  label={({ name, percent }) => `${name} (${(percent * 100).toFixed(0)}%)`}
+                  labelLine={{ stroke: '#444' }}
+                >
+                  {chartData.slice(0, 10).map((_entry, index) => (
+                    <Cell
+                      key={`cell-${index}`}
+                      fill={CHART_COLORS[index % CHART_COLORS.length]}
+                    />
+                  ))}
+                </Pie>
+                <Tooltip content={<CustomTooltip />} />
+                <Legend />
+              </PieChart>
+            )}
+          </ResponsiveContainer>
+        )}
+      </div>
+
+      {/* Footer Stats */}
+      <div className="px-3 py-2 border-t border-white/5 bg-[#0a0a0a] flex items-center gap-4 text-[10px] text-zinc-600">
+        <span>Rows: <span className="text-zinc-400 font-mono">{result?.rows.length || 0}</span></span>
+        <span>Fields: <span className="text-zinc-400 font-mono">{analysis.fields.length}</span></span>
+        <span>Numeric: <span className="text-zinc-400 font-mono">{analysis.numericFields.length}</span></span>
+        {chartType === 'pie' && chartData.length > 10 && (
+          <span className="text-amber-500">Showing top 10 values</span>
+        )}
+      </div>
+    </div>
+  );
+}