fullstuckdev/sql-agent

1import { Bar, Pie, Line } from 'react-chartjs-2';2import {3  Chart as ChartJS,4  CategoryScale,5  LinearScale,6  BarElement,7  LineElement,8  PointElement,9  ArcElement,10  Title,11  Tooltip,12  Legend13} from 'chart.js';14 15ChartJS.register(16  CategoryScale,17  LinearScale,18  BarElement,19  LineElement,20  PointElement,21  ArcElement,22  Title,23  Tooltip,24  Legend25);26 27interface AIVisualizationProps {28  visualization: {29    type: 'bar' | 'pie' | 'line' | 'doughnut';30    config: any;31  };32}33 34export default function AIVisualization({ visualization }: AIVisualizationProps) {35  const ChartComponent = {36    bar: Bar,37    pie: Pie,38    line: Line,39    doughnut: Pie  40  }[visualization.type];41 42  if (!ChartComponent) return null;43 44  const options = {45    responsive: true,46    maintainAspectRatio: false,47    plugins: {48      legend: {49        position: 'top' as const,50      },51      title: {52        display: true,53        text: 'Data Visualization'54      }55    },56    ...(visualization.type === 'doughnut' && {57      cutout: '50%' 58    })59  };60 61  return (62    <div className="w-full h-[400px]">63      <ChartComponent64        data={visualization.config}65        options={options}66      />67    </div>68  );69}