import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
import { saveAs } from 'file-saver';

const data = [
  { name: 'A', value: 20 },
  { name: 'B', value: 30 },
  { name: 'C', value: 40 },
  { name: 'D', value: 10 }
];

const Chart = () => {

  const exportChartData = () => {
    const jsonData = JSON.stringify(data);
    const blob = new Blob([jsonData], { type: 'application/json' });
    saveAs(blob, 'chart_data.json');
  };

  return (
    <div>
      <BarChart width={400} height={300} data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="value" fill="#8884d8" />
      </BarChart>
      <button onClick={exportChartData}>Export Data</button>
    </div>
  );
}

export default Chart;