Spaces:
Running
Running
File size: 1,583 Bytes
26f4db3 |
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 |
"use client";
import { Pie, PieChart, ResponsiveContainer } from "recharts";
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
ChartLegend,
ChartLegendContent,
} from "@/components/ui/chart";
const chartData = [
{ sentiment: "Positive", value: 45, fill: "hsl(var(--chart-2))" },
{ sentiment: "Negative", value: 15, fill: "hsl(var(--chart-5))" },
{ sentiment: "Neutral", value: 40, fill: "hsl(var(--muted-foreground))" },
];
const chartConfig = {
value: {
label: "Percentage",
},
positive: {
label: "Positive",
color: "hsl(var(--chart-2))",
},
negative: {
label: "Negative",
color: "hsl(var(--chart-5))",
},
neutral: {
label: "Neutral",
color: "hsl(var(--muted-foreground))",
},
};
export function SentimentChart() {
return (
<ChartContainer
config={chartConfig}
className="mx-auto aspect-square max-h-[250px]"
>
<ResponsiveContainer>
<PieChart>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent hideLabel />}
/>
<Pie
data={chartData}
dataKey="value"
nameKey="sentiment"
innerRadius={60}
strokeWidth={5}
aria-label="Sentiment distribution pie chart"
/>
<ChartLegend
content={<ChartLegendContent nameKey="sentiment" />}
className="-translate-y-[2rem] flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
/>
</PieChart>
</ResponsiveContainer>
</ChartContainer>
);
}
|