Spaces:
Sleeping
Sleeping
File size: 1,463 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 |
import React, { FC } from 'react';
import {
ResponsiveContainer,
RadarChart,
PolarGrid,
PolarAngleAxis,
PolarRadiusAxis,
Radar,
Legend,
} from 'recharts';
import { ChartRow } from '../types';
interface Props {
data: ChartRow[];
comparisonMode: boolean;
colors: string[];
}
const RadarView: FC<Props> = ({ data, comparisonMode, colors }) => (
<div className="bg-white rounded-xl shadow-lg p-6 mb-8">
<h2 className="text-2xl font-bold text-gray-800 mb-6">
{comparisonMode ? 'Multi-Model Radar' : 'Metric Distribution'}
</h2>
<ResponsiveContainer width="100%" height={400}>
<RadarChart data={data}>
<PolarGrid />
<PolarAngleAxis dataKey="metric" />
<PolarRadiusAxis angle={90} domain={[0, 1]} />
{comparisonMode
? data[0] /* assume all rows have same keys */ &&
Object.keys(data[0])
.filter(k => k !== 'metric')
.map((key, i) => (
<Radar
key={key}
name={key}
dataKey={key}
stroke={colors[i % colors.length]}
fill={colors[i % colors.length]}
fillOpacity={0.3}
/>
))
: <Radar name="Performance" dataKey="value" stroke={colors[0]} fill={colors[0]} fillOpacity={0.3} />}
<Legend />
</RadarChart>
</ResponsiveContainer>
</div>
);
export default RadarView;
|