42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { fmtNum } from "@/components/NumberInput";
|
|
|
|
// نمودارِ درآمدِ ۱۴ روزِ گذشته — فقط CSS (بدون کتابخانه). میلههای طلایی با
|
|
// نسبتِ به بیشترین مقدار؛ برچسبِ روز زیرِ هر میله و tooltipِ بومی روی هرکدام.
|
|
export default function RevenueChart({
|
|
days,
|
|
}: {
|
|
days: { date: string; revenue: number; count: number }[];
|
|
}) {
|
|
if (!days.length) return null;
|
|
const max = Math.max(...days.map((d) => d.revenue), 1);
|
|
return (
|
|
<div dir="ltr" role="img" aria-label="نمودار درآمدِ ۱۴ روز گذشته">
|
|
<div className="flex items-end gap-1.5 h-28">
|
|
{days.map((d) => {
|
|
const pct = Math.round((d.revenue / max) * 100);
|
|
return (
|
|
<div
|
|
key={d.date}
|
|
title={`${d.date} · ${fmtNum(d.revenue)} تومان · ${d.count} خرید`}
|
|
className="flex-1 rounded-t bg-gradient-to-t from-[var(--gold-dark)] to-[var(--gold)] transition hover:brightness-110"
|
|
style={{ height: `${Math.max(pct, d.revenue > 0 ? 3 : 0)}%` }}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="flex gap-1.5 mt-1.5">
|
|
{days.map((d) => (
|
|
<span
|
|
key={d.date}
|
|
className="flex-1 text-center text-[9px] text-[#6f90bd] leading-none"
|
|
>
|
|
{d.date.slice(5)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|