File size: 1,621 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 |
import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import type { TopicFrequency } from '../../utils/analysis.utils.ts';
type TopicFrequencyChartProps = {
data: TopicFrequency[];
};
const TopicFrequencyChart = ({ data }: TopicFrequencyChartProps) => {
// Truncate long topic names for display
const chartData = data.map((item) => ({
...item,
topicDisplay: item.topic.length > 40 ? `${item.topic.substring(0, 40)}...` : item.topic,
}));
return (
<div className="h-96 w-full">
<ResponsiveContainer width="100%" height="100%">
<BarChart
layout="vertical"
data={chartData}
margin={{ top: 5, right: 30, left: 150, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis type="number" />
<YAxis
type="category"
dataKey="topicDisplay"
width={140}
style={{ fontSize: '12px' }}
/>
<Tooltip
formatter={(value: number, name: string) => [value, name === 'proCount' ? 'PRO' : name === 'conCount' ? 'CON' : 'Total']}
contentStyle={{ fontSize: '12px' }}
/>
<Legend
formatter={(value) => (value === 'proCount' ? 'PRO' : value === 'conCount' ? 'CON' : 'Total')}
/>
<Bar dataKey="proCount" fill="#10b981" name="proCount" />
<Bar dataKey="conCount" fill="#ef4444" name="conCount" />
</BarChart>
</ResponsiveContainer>
</div>
);
};
export default TopicFrequencyChart;
|