import React from 'react';
import { BarChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Bar, ResponsiveContainer } from 'recharts';

const BarChartComponent = ({ chartData, metricName, metricType, colors }) => {
    // Преобразуем данные для отображения
    const data = Object.keys(chartData).map(instance => {
        const instanceData = chartData[instance].reduce((acc, point) => {
            if (point.value !== null) {
                acc[point.quantile] = point.value;
            }
            return acc;
        }, {});
        return { instance, ...instanceData };
    });

    // Получаем все уникальные квантили
    const allQuantiles = [...new Set(
        Object.values(chartData).flat().map(point => point.quantile)
    )];

    return (
        <div>
            <h2>{metricName} ({metricType})</h2>
            <ResponsiveContainer width="100%" height={400}>
                <BarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="instance" />
                    <YAxis />
                    <Tooltip />
                    <Legend />
                    {allQuantiles.map((quantile, index) => (
                        <Bar
                            key={quantile}
                            dataKey={quantile}
                            fill={colors[index % colors.length]}
                            name={`Quantile ${quantile}`}
                        />
                    ))}
                </BarChart>
            </ResponsiveContainer>
        </div>
    );
};

export default BarChartComponent;