TorbatYar/frontend/modules/experience/design-system/ExperienceChart.tsx
Mortezakoohjani 0eec9f729b feat(experience): deploy Experience frontend FE-11.0-11.5 portal
Commit completed Torbat Pages admin frontend module, BFF proxy, routes, and validation artifacts for official platform deploy.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-27 21:01:50 +03:30

58 lines
1.6 KiB
TypeScript

"use client";
import {
ResponsiveContainer,
BarChart,
Bar,
LineChart,
Line,
XAxis,
YAxis,
Tooltip,
CartesianGrid,
} from "recharts";
export type ExperienceChartPoint = { name: string; value: number };
export function ExperienceChart({
data,
variant = "bar",
height = 220,
ariaLabel = "نمودار",
}: {
data: ExperienceChartPoint[];
variant?: "bar" | "line";
height?: number;
ariaLabel?: string;
}) {
return (
<div role="img" aria-label={ariaLabel} className="w-full" style={{ height }}>
<ResponsiveContainer width="100%" height="100%">
{variant === "line" ? (
<LineChart data={data}>
<CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
<XAxis dataKey="name" tick={{ fontSize: 12 }} />
<YAxis allowDecimals={false} tick={{ fontSize: 12 }} />
<Tooltip />
<Line
type="monotone"
dataKey="value"
stroke="var(--experience-accent)"
strokeWidth={2}
dot={{ r: 3 }}
/>
</LineChart>
) : (
<BarChart data={data}>
<CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
<XAxis dataKey="name" tick={{ fontSize: 12 }} />
<YAxis allowDecimals={false} tick={{ fontSize: 12 }} />
<Tooltip />
<Bar dataKey="value" fill="var(--experience-accent)" radius={[6, 6, 0, 0]} />
</BarChart>
)}
</ResponsiveContainer>
</div>
);
}