e850ac48d7
Remove 8 inline formatPrice/formatVND/formatPriceM2 functions scattered across components and pages, replacing them with imports from @/lib/currency. Add formatVNDFull (full locale, no compact notation) for chuyen-nhuong pages. Fix price-history-chart off-by-1000 bug caused by double-dividing through priceToMillions then formatMillions. Add k/m² branch to formatPricePerM2 for sub-million values. Co-Authored-By: Claude Opus 4 <noreply@anthropic.com>
66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
LineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
} from 'recharts';
|
|
|
|
import type { PriceHistoryItem } from '@/lib/listings-api';
|
|
import { formatPrice } from '@/lib/currency';
|
|
|
|
interface PriceHistoryChartProps {
|
|
data: PriceHistoryItem[];
|
|
height?: number;
|
|
}
|
|
|
|
export function PriceHistoryChart({ data, height = 280 }: PriceHistoryChartProps) {
|
|
if (data.length === 0) return null;
|
|
|
|
const chartData = [...data]
|
|
.sort((a, b) => new Date(a.changedAt).getTime() - new Date(b.changedAt).getTime())
|
|
.map((item) => ({
|
|
date: new Date(item.changedAt).toLocaleDateString('vi-VN', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
}),
|
|
price: Number(item.newPrice),
|
|
}));
|
|
|
|
return (
|
|
<ResponsiveContainer width="100%" height={height}>
|
|
<LineChart data={chartData} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
|
<XAxis dataKey="date" tick={{ fontSize: 11 }} className="fill-muted-foreground" />
|
|
<YAxis
|
|
tick={{ fontSize: 11 }}
|
|
className="fill-muted-foreground"
|
|
tickFormatter={(v: number) => formatPrice(v)}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'hsl(var(--card))',
|
|
border: '1px solid hsl(var(--border))',
|
|
borderRadius: '0.5rem',
|
|
fontSize: '0.875rem',
|
|
}}
|
|
formatter={(value) => [formatPrice(Number(value)), 'Giá']}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="price"
|
|
stroke="hsl(var(--primary))"
|
|
strokeWidth={2}
|
|
dot={{ r: 4 }}
|
|
activeDot={{ r: 6 }}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|