هسته‌ی نمودار
chart-coreنمودارقاب مشترک همه‌ی نمودارها که عرض را اندازه می‌گیره و راهنما، تولتیپ، ناوبری با کیبورد، جدول مخفی برای صفحه‌خوان و پالت رنگ را فراهم می‌کنه.
پالت هفت‌رنگ که از --chart-1 تا --chart-7 خونده میشه:
- رنگ ۱
- رنگ ۲
- رنگ ۳
- رنگ ۴
- رنگ ۵
- رنگ ۶
- رنگ ۷
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.
$ npx vibefarsi add chart-coreنصب دستی
محتوای تب «کد» را در
components/charts/chart-core.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { ChartFrame, Legend, ChartTooltip, colorAt, useActive } from "@/components/charts/chart-core"23// بیشتر وقت‌ها مستقیم سراغش نمیاید. هر نمودار خودش از این فایل استفاده می‌کنه.4// برای نمودار سفارشی:5<ChartFrame title="فروش" height={240} table={{ head: ["ماه", "فروش"], rows }}>6 {(width) => <svg width={width} height={240}>…</svg>}7</ChartFrame>پراپ‌ها
| پراپ | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| title | string | - | اسم قابل دسترس نمودار که عنوان جدول مخفی هم میشه. |
| height | number | - | ارتفاع ناحیه‌ی رسم به پیکسل. عرض از والد گرفته میشه. |
| children | (width) => ReactNode | - | بعد از اندازه‌گیری با عرض واقعی صدا زده میشه. |
| table | { head, rows } | - | جدولی که فقط صفحه‌خوان می‌خونه. |
| keyboard | useActive(n) | - | فوکوس‌پذیر می‌کنه و کلیدهای جهت را وصل می‌کنه. |
نکته‌ها
- رنگ‌ها اول --chart-1 تا --chart-7 را می‌خونن، پس کافیه در globals.css این متغیرها را تعریف کنید تا همه‌ی نمودارها رنگ برند شما را بگیرن.
- انیمیشن‌ها از --motion و --motion-ease تم می‌آن، پس در سیستم ترمینال پله‌ای و در سیستم خمیری فنری حرکت می‌کنن.