"use client";
import {
BarChart as RechartsBarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
LineChart as RechartsLineChart,
Line,
PieChart as RechartsPieChart,
Pie,
Cell,
} from "recharts";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { useTranslations } from "next-intl";
// Color palette
export const COLORS = {
primary: "#6366f1",
secondary: "#a855f7",
tertiary: "#ec4899",
quaternary: "#f43f5e",
quinary: "#f97316",
senary: "#eab308",
septenary: "#84cc16",
octonary: "#10b981",
};
// Bar Chart Component
export function BarChart({ data }: { data: any[] }) {
return (
);
}
// Line Chart Component
export function LineChart({ data }: { data: any[] }) {
return (
);
}
// Pie Chart Component
export function PieChart({ data }: { data: any[] }) {
const CHART_COLORS = [
COLORS.primary,
COLORS.secondary,
COLORS.tertiary,
COLORS.quaternary,
COLORS.quinary,
COLORS.senary,
COLORS.septenary,
COLORS.octonary,
];
return (
`${name}: ${(percent * 100).toFixed(0)}%`
}
outerRadius={80}
fill="#8884d8"
dataKey="value"
animationBegin={0}
animationDuration={1500}
>
{data.map((entry, index) => (
|
))}
[`${value}`, name]}
/>
);
}
interface CategoryDistribution {
name: string;
value: number;
}
// Category Distribution Chart Component
export function CategoryDistributionChart({
data,
height = 300,
}: {
data: CategoryDistribution[];
height?: number;
}) {
const tBlog = useTranslations("blog");
const tCommon = useTranslations("common");
const CHART_COLORS = [
COLORS.primary,
COLORS.secondary,
COLORS.tertiary,
COLORS.quaternary,
COLORS.quinary,
COLORS.senary,
COLORS.septenary,
COLORS.octonary,
];
return (
{tCommon("category_distribution")}
{tBlog("posts_distribution_by_category")}
`${name}: ${(percent * 100).toFixed(0)}%`
}
outerRadius={80}
fill="#8884d8"
dataKey="value"
animationBegin={0}
animationDuration={1500}
>
{data.map((entry, index) => (
|
))}
[`${value} posts`, name]}
/>
);
}
interface ContentPerformance {
title: string;
views: number;
comments: number;
}
// Content Performance Chart Component
export function ContentPerformanceChart({
data,
height = 300,
}: {
data: ContentPerformance[];
height?: number;
}) {
const tCommon = useTranslations("common");
return (
{tCommon("content_performance")}
{tCommon("top_performing_content_by_views_and_engagement")}
);
}