36c1e3b39a
Vietnamese text throughout the frontend was missing accent marks (diacritics), using plain ASCII instead of proper Unicode characters. Fixed all user-visible text across dashboard, analytics, listings, search, and chart components. Co-Authored-By: Paperclip <noreply@paperclip.ing>
67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
LineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
Legend,
|
|
} from 'recharts';
|
|
|
|
interface PriceTrendChartProps {
|
|
data: { period: string; 'Gia/m2': number; 'Tin đăng': number }[];
|
|
height?: number;
|
|
}
|
|
|
|
export function PriceTrendChart({ data, height = 350 }: PriceTrendChartProps) {
|
|
return (
|
|
<ResponsiveContainer width="100%" height={height}>
|
|
<LineChart data={data} margin={{ top: 5, right: 30, left: 0, bottom: 5 }}>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
|
<XAxis dataKey="period" tick={{ fontSize: 12 }} className="fill-muted-foreground" />
|
|
<YAxis yAxisId="left" tick={{ fontSize: 12 }} className="fill-muted-foreground" />
|
|
<YAxis
|
|
yAxisId="right"
|
|
orientation="right"
|
|
tick={{ fontSize: 12 }}
|
|
className="fill-muted-foreground"
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'hsl(var(--card))',
|
|
border: '1px solid hsl(var(--border))',
|
|
borderRadius: '0.5rem',
|
|
fontSize: '0.875rem',
|
|
}}
|
|
formatter={(value, name) => [
|
|
name === 'Gia/m2' ? `${value} tr/m²` : value,
|
|
name,
|
|
]}
|
|
/>
|
|
<Legend />
|
|
<Line
|
|
yAxisId="left"
|
|
type="monotone"
|
|
dataKey="Gia/m2"
|
|
stroke="hsl(var(--primary))"
|
|
strokeWidth={2}
|
|
dot={{ r: 4 }}
|
|
activeDot={{ r: 6 }}
|
|
/>
|
|
<Line
|
|
yAxisId="right"
|
|
type="monotone"
|
|
dataKey="Tin đăng"
|
|
stroke="hsl(var(--muted-foreground))"
|
|
strokeWidth={1}
|
|
strokeDasharray="5 5"
|
|
dot={{ r: 3 }}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|