نمودار
chartکامپوننتنمودار میلهای، خطی و اسپارکلاین با SVG خالص، با برچسبهای شمسی، هفتهای که از شنبه شروع میشه، تیکهای فارسی و محور مقدار در سمت راست.
فروش هفتگی (میلهای)
بازدید ۱۰ روز اخیر (خطی)
اسپارکلاین:
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add chartنصب دستی
محتوای تب «کد» را در
components/ui/chart.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { BarChart, LineChart, Sparkline, jalaliWeekLabels, jalaliDayLabels } from "@/components/ui/chart"23const week = jalaliWeekLabels() // ["ش","ی","د","س","چ","پ","ج"] ending today4<BarChart data={week.map((label, i) => ({ label, value: sales[i] }))} highlight={6} />5<LineChart data={jalaliDayLabels(10).map((label, i) => ({ label, value: visits[i] }))} />6<Sparkline data={[3, 5, 4, 8, 7, 9]} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| data | { label: string; value: number }[] | - | نقطهها. اولی سمت راست رسم میشه. |
| format | (n) => string | compactFa | قالب تیکها، مثل «۱۲ میلیون» و «۸۰۰ هزار». |
| highlight | number | - | شاخص میلهی برجسته (مثلاً امروز). |
| height | number | 180 | ارتفاع viewBox. |
نکتههای راستچین
- بدون کتابخانهی نمودار، فقط SVG با viewBox و عرض ۱۰۰٪. برای داشبوردهای سنگین همین هندسه را میشه به Recharts منتقل کرد.
- jalaliWeekLabels از شنبه شروع نمیکنه و هفت روز اخیر را با نام روز شمسی برمیگردونه. برای هفتهی تقویمی ثابت از JALALI_WEEKDAYS_SHORT استفاده کنید.