Chart Presetsv1.0.0
مقایسهٔ مقدارِ چند دسته کنارِ هم. نمونهٔ بالا تعاملی است: روی عددهای هدر بزنید تا سری عوض شود. نوارِ پشتِ میلهٔ زیرِ ماوس (cursor=band) دسته را بی‌آنکه میله را بپوشاند نشان می‌دهد.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/chart-presets.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/chart-presets.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/chart-presets.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/chart-presets.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { BarChart } from "@/components/ui/chart-presets"
<BarChart
data={data}
categoryKey="month"
series={[{ key: "online", label: "فروشِ آنلاین" }]}
cursor="band"
/>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
دسته‌ها از راست شروع می‌شوند و محورِ مقدار سمتِ راست می‌نشیند، چون خواندن از راست است. با horizontal میله‌ها افقی می‌شوند و اولین دسته بالا؛ برای برچسب‌های بلندِ فارسی خواناتر است. labelsInside نامِ دسته را داخلِ خودِ میله می‌برد و جای محور را آزاد می‌کند.
showLabels مقدار را بالای هر میله می‌نویسد؛ در انباشته فقط جمع، روی بالاترین تکه. colorByCategory به هر میله رنگِ خودش را می‌دهد و activeIndex یک میله را با کادرِ خط‌چین برجسته می‌کند (مثلاً ماهِ جاری). مقدارِ منفی خودکار رنگِ --destructive و لبهٔ گردِ پایین می‌گیرد.
برای حالتِ تعاملی، onBarClick اندیس و ردیفِ داده را می‌دهد؛ با آن جزئیاتِ همان دسته را باز کنید.
دسترس‌پذیری
- مقدارهای مهم را با showLabels روی خودِ میله بنویسید؛ تولتیپ با صفحه‌کلید در دسترس نیست.
- دکمه‌های هدرِ تعاملی role=tab و aria-selected دارند و با Tab و Enter کار می‌کنند.
- رنگِ منفی تنها نشانه نباشد: برچسبِ عدد علامتِ منفی را هم نشان می‌دهد.
مرجع API
داده
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| data | ChartRow[] | — | آرایهٔ ردیف‌ها؛ همان شکلی که از API می‌آید. |
| categoryKey | string | — | فیلدی که روی محورِ دسته‌ها می‌نشیند (مثلاً ماه). |
| series | { key, label?, color?, icon? }[] | — | فیلدهایی که رسم می‌شوند. color پیش‌فرض --chart-N است؛ icon در تولتیپ می‌نشیند و راهنما را HTML می‌کند. |
BarChart
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| horizontal | boolean | false | میله‌های افقی؛ اولین دسته بالا. |
| stacked | boolean | false | سری‌ها روی هم؛ فقط بالاترین تکه گرد می‌شود. |
| showLabels | boolean | false | مقدار بالای میله؛ در انباشته فقط جمع. |
| labelsInside | boolean | false | فقط افقی: نامِ دسته داخلِ میله، محورِ دسته حذف. |
| colorByCategory | boolean | false | هر میله رنگِ --chart-N خودش. |
| activeIndex | number | — | میلهٔ برجسته با کادرِ خط‌چین. |
| negativeColor | string | "var(--destructive)" | رنگِ مقدارهای منفی. |
| onBarClick | (index, row) => void | — | کلیک روی میله. |
مشترک
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| showLegend | boolean | بیش از یک سری | راهنمای رنگ‌ها؛ اولین سری سمتِ راست. |
| showGrid | boolean | true | خطوطِ شبکه در امتدادِ محورِ مقدار. |
| hideValueAxis | boolean | false | عددهای محورِ مقدار پنهان؛ وقتی برچسب یا تولتیپ کافی است. |
| valueFormatter | (value: number) => string | عددِ فارسی | روی محور، برچسب و تولتیپ هر سه اثر می‌کند. |
| cursor | "line" | "band" | "none" | "line" | نشانگرِ دستهٔ زیرِ ماوس؛ band نوارِ پرِ پشتِ میله‌هاست. |
| tooltip | ChartTooltipOptions | — | ظاهرِ تولتیپ: indicator، hideLabel، labelFormatter، formatValue و showTotal. جزئیات در برگهٔ «تولتیپ». |
| defaultTooltipIndex | number | — | تولتیپِ این اندیس از اول باز باشد؛ مثلاً مقدارِ امروز. |
| className | string | h-72 w-full | ارتفاع را از همین‌جا بدهید؛ نمودار ارتفاعِ ذاتی ندارد. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
نمودار میله‌ای
فروشِ آنلاینِ شش ماهِ اول
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
میله‌ای افقی
برای برچسب‌های بلندِ فارسی خواناتر است
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
میله‌ای چندسری
آنلاین و حضوری کنارِ هم
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
میله‌ای انباشته با راهنما
سهمِ هر کانال از فروشِ ماه
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
میله‌ای با برچسب
مقدار بالای هر میله
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
برچسب داخلِ میله
نامِ شهر داخلِ میله، مقدار در انتها
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
میله‌ای چندرنگ
هر شهر رنگِ خودش
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
میله‌ای با میلهٔ فعال
شهرِ هدفِ کمپینِ این فصل برجسته شده
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
میله‌ای با مقدارِ منفی
تغییرِ ماهانهٔ موجودیِ انبار؛ کاهش قرمز
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| نمودار میله‌ای | فروشِ آنلاینِ شش ماهِ اول |
| میله‌ای افقی | برای برچسب‌های بلندِ فارسی خواناتر است |
| میله‌ای چندسری | آنلاین و حضوری کنارِ هم |
| میله‌ای انباشته با راهنما | سهمِ هر کانال از فروشِ ماه |
| میله‌ای با برچسب | مقدار بالای هر میله |
| برچسب داخلِ میله | نامِ شهر داخلِ میله، مقدار در انتها |
| میله‌ای چندرنگ | هر شهر رنگِ خودش |
| میله‌ای با میلهٔ فعال | شهرِ هدفِ کمپینِ این فصل برجسته شده |
| میله‌ای با مقدارِ منفی | تغییرِ ماهانهٔ موجودیِ انبار؛ کاهش قرمز |
دستورالعمل استفاده
برچسبِ بلند، میلهٔ افقی
انجام بده
نام‌های فارسی در امتدادِ خواندن می‌نشینند و نمی‌چرخند.
انجام نده
روی محورِ افقی برچسب‌ها فشرده می‌شوند و بعضی پنهان.
عدد روی میله وقتی دقیق مهم است
انجام بده
مقدار روی میله یا داخلش؛ خواننده لازم نیست هاور کند.
انجام نده
تغییرِ منفی بدونِ عدد هم دیده می‌شود، ولی اندازه‌اش فقط با هاور.