File size: 1,536 Bytes
75137c7 2251e03 75137c7 |
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 |
import React from 'react';
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
import type { StanceStats } from '../../utils/analysis.utils.ts';
type StanceDistributionChartProps = {
stats: StanceStats;
};
const COLORS = {
PRO: '#10b981', // green-500
CON: '#ef4444', // red-500
};
const StanceDistributionChart = ({ stats }: StanceDistributionChartProps) => {
const data = [
{ name: 'PRO', value: stats.pro, percentage: stats.proPercentage },
{ name: 'CON', value: stats.con, percentage: stats.conPercentage },
];
return (
<div className="h-64 w-full">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={data}
cx="50%"
cy="50%"
labelLine={false}
label={({ name, percentage }) => `${name}: ${percentage.toFixed(1)}%`}
outerRadius={80}
fill="#8884d8"
dataKey="value"
>
{data.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={entry.name === 'PRO' ? COLORS.PRO : COLORS.CON}
/>
))}
</Pie>
<Tooltip
formatter={(value: number, name: string, props: any) => [
`${value} (${props.payload.percentage.toFixed(1)}%)`,
name,
]}
/>
<Legend />
</PieChart>
</ResponsiveContainer>
</div>
);
};
export default StanceDistributionChart;
|