نمودار
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 استفاده کنید.