Spaces:
Sleeping
Sleeping
File size: 1,820 Bytes
1af45d7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
import React, { FC } from 'react';
import {
ResponsiveContainer,
BarChart,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
Legend,
Bar,
} from 'recharts';
import { ChartRow } from '../types';
interface Props {
data: ChartRow[];
metrics: string[];
selectedMetric: string;
onMetricChange: (metric: string) => void;
comparisonMode: boolean;
colors: string[];
selectedModels: string[];
}
const BarChartView: FC<Props> = ({
data,
metrics,
selectedMetric,
onMetricChange,
comparisonMode,
colors,
selectedModels,
}) => (
<div className="bg-white rounded-xl shadow-lg p-6 mb-8">
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold text-gray-800">
{comparisonMode ? 'Model Comparison' : 'Performance by Language Pair'}
</h2>
<select
value={selectedMetric}
onChange={e => onMetricChange(e.target.value)}
className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
{metrics.map(metric => (
<option key={metric} value={metric}>
{metric.toUpperCase()}
</option>
))}
</select>
</div>
<ResponsiveContainer width="100%" height={400}>
<BarChart data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" angle={-45} textAnchor="end" height={100} />
<YAxis />
<Tooltip />
<Legend />
{comparisonMode
? selectedModels.map((model, i) => (
<Bar key={model} dataKey={model} fill={colors[i % colors.length]} radius={4} />
))
: <Bar dataKey={selectedMetric} fill={colors[0]} radius={4} />}
</BarChart>
</ResponsiveContainer>
</div>
);
export default BarChartView;
|