Thanh Quy - wolf
111 lines
4.7 KiB
TypeScript
111 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
import { formatCurrency } from "@/lib/analytics-utils";
|
|
import type { RevenueDataPoint } from "@/lib/types";
|
|
import { useState } from "react";
|
|
|
|
interface BarChartProps {
|
|
current: RevenueDataPoint[];
|
|
previous: RevenueDataPoint[];
|
|
height?: number;
|
|
}
|
|
|
|
/**
|
|
* Pure-SVG grouped bar chart comparing current vs previous period revenue.
|
|
* Hover bars show tooltip with label, revenue, and order count.
|
|
* Tooltip auto-flips above/below bar top to stay inside the viewBox.
|
|
*/
|
|
export function BarChart({ current, previous, height = 200 }: BarChartProps) {
|
|
const [hovered, setHovered] = useState<{ set: "cur" | "prev"; idx: number } | null>(null);
|
|
const W = 800;
|
|
const H = height;
|
|
const padL = 56, padR = 16, padT = 16, padB = 40;
|
|
const chartW = W - padL - padR;
|
|
const chartH = H - padT - padB;
|
|
|
|
const n = current.length;
|
|
const maxVal = Math.max(...current.map((d) => d.revenue), ...previous.map((d) => d.revenue)) || 1;
|
|
const groupW = chartW / n;
|
|
const barW = groupW * 0.35;
|
|
const gap = groupW * 0.05;
|
|
|
|
const yTicks = 5;
|
|
const gridLines = Array.from({ length: yTicks + 1 }, (_, i) => ({
|
|
val: (maxVal / yTicks) * (yTicks - i),
|
|
y: padT + (i / yTicks) * chartH,
|
|
}));
|
|
|
|
const step = Math.ceil(n / 8);
|
|
|
|
return (
|
|
<div className="relative w-full overflow-x-auto">
|
|
<svg
|
|
viewBox={`0 0 ${W} ${H}`}
|
|
className="w-full"
|
|
style={{ height: H, minWidth: 320 }}
|
|
onMouseLeave={() => setHovered(null)}
|
|
>
|
|
{gridLines.map((g, i) => (
|
|
<g key={i}>
|
|
<line x1={padL} y1={g.y} x2={W - padR} y2={g.y} stroke="#E2C9A8" strokeWidth="1" strokeDasharray={i === yTicks ? "0" : "4 3"} />
|
|
<text x={padL - 6} y={g.y + 4} textAnchor="end" fontSize="10" fill="#A08060">{formatCurrency(g.val)}</text>
|
|
</g>
|
|
))}
|
|
|
|
{current.map((d, i) => {
|
|
const groupX = padL + i * groupW;
|
|
const curH = (d.revenue / maxVal) * chartH;
|
|
const prevH = ((previous[i]?.revenue ?? 0) / maxVal) * chartH;
|
|
const curX = groupX + gap;
|
|
const prevX = curX + barW + gap;
|
|
const isHovCur = hovered?.set === "cur" && hovered.idx === i;
|
|
const isHovPrev = hovered?.set === "prev" && hovered.idx === i;
|
|
return (
|
|
<g key={i}>
|
|
<rect x={prevX} y={padT + chartH - prevH} width={barW} height={prevH} rx="3"
|
|
fill={isHovPrev ? "#A0785A" : "#E2C9A8"}
|
|
style={{ cursor: "pointer", transition: "fill 150ms" }}
|
|
onMouseEnter={() => setHovered({ set: "prev", idx: i })} />
|
|
<rect x={curX} y={padT + chartH - curH} width={barW} height={curH} rx="3"
|
|
fill={isHovCur ? "#4A3728" : "#6F4E37"}
|
|
style={{ cursor: "pointer", transition: "fill 150ms" }}
|
|
onMouseEnter={() => setHovered({ set: "cur", idx: i })} />
|
|
{i % step === 0 && (
|
|
<text x={groupX + groupW / 2} y={H - 8} textAnchor="middle" fontSize="10" fill="#A08060">{d.label}</text>
|
|
)}
|
|
</g>
|
|
);
|
|
})}
|
|
|
|
{hovered !== null && (() => {
|
|
const d = hovered.set === "cur" ? current[hovered.idx] : previous[hovered.idx];
|
|
if (!d) return null;
|
|
const groupX = padL + hovered.idx * groupW;
|
|
const tipW = 130, tipH = 50;
|
|
const tipX = Math.min(Math.max(groupX - tipW / 2, padL), W - padR - tipW);
|
|
const barH = (d.revenue / maxVal) * chartH;
|
|
const barTopY = padT + chartH - barH;
|
|
const aboveY = barTopY - tipH - 8;
|
|
const tipY = Math.min(Math.max(aboveY >= padT ? aboveY : barTopY + 8, padT), padT + chartH - tipH);
|
|
return (
|
|
<g>
|
|
<rect x={tipX} y={tipY} width={tipW} height={tipH} rx="6" fill="#3D2B1F" opacity="0.92" />
|
|
<text x={tipX + tipW / 2} y={tipY + 15} textAnchor="middle" fontSize="10" fill="#F0D9A8">
|
|
{d.label} ({hovered.set === "cur" ? "Hiện tại" : "Trước"})
|
|
</text>
|
|
<text x={tipX + tipW / 2} y={tipY + 30} textAnchor="middle" fontSize="11" fontWeight="600" fill="#C8973A">{formatCurrency(d.revenue)}</text>
|
|
<text x={tipX + tipW / 2} y={tipY + 44} textAnchor="middle" fontSize="10" fill="#A08060">{d.orders} đơn hàng</text>
|
|
</g>
|
|
);
|
|
})()}
|
|
|
|
{/* Legend */}
|
|
<rect x={padL} y={4} width={10} height={10} rx="2" fill="#6F4E37" />
|
|
<text x={padL + 13} y={13} fontSize="10" fill="#6F4E37">Hiện tại</text>
|
|
<rect x={padL + 65} y={4} width={10} height={10} rx="2" fill="#E2C9A8" />
|
|
<text x={padL + 78} y={13} fontSize="10" fill="#A08060">Kỳ trước</text>
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|