اسپارک‌لاین
sparklineنمودارنمودار خیلی کوچک برای کارت آمار و خانه‌ی جدول، خطی یا میله‌ای، با رنگ روند و نقطه‌ی آخرین مقدار.
فروش امروز
۴۸٫۲ میلیون
سفارش لغوشده
۳۸
کاربر فعال
۲٬۴۱۰
سفارش روزانه، ۱۴ روز اخیر
۱۶۳
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.
$ npx vibefarsi add sparklineنصب دستی
محتوای تب «کد» را در
components/charts/sparkline.tsxبگذارید. پیش‌نیاز: chart-core.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { Sparkline, SparkBar } from "@/components/charts/sparkline"23<Sparkline label="فروش هفت روز اخیر" data={[12, 14, 11, 18, 17, 21, 24]} trend />4<SparkBar label="سفارش روزانه" data={[8, 12, 5, 14, 9, 16, 11]} width={96} />پراپ‌ها
| پراپ | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| label | string | - | اول خلاصه‌ی صوتی، مثل «فروش هفت روز اخیر: از ۱۲ به ۲۴، ۱۰۰٪ افزایش». |
| trend | boolean | - | سبز اگه مقدار آخر از اول بیشتر باشه و قرمز اگه کمتر. |
| goodWhen | "up" | "down" | "up" | برای عددهایی که کمتر شدنشون خوبه، مثل سفارش لغوشده، down بدید تا رنگ‌ها برعکس بشن. |
| extremes | boolean | - | نقطه‌ی بیشترین و کمترین. |
| width / height | number | پهنای والد / 32 | بدون width کل عرض والد را می‌گیره. |
نکته‌ها
- اسپارک‌لاین‌ها فوکوس‌پذیر نیستن و فقط یک aria-label خلاصه دارن، چون کنار عدد اصلی کارت می‌شینن.