دیگ

Chart Presetsv1.0.0

تولتیپِ مشترکِ همهٔ نمودارهای دیگ؛ با پراپِ tooltip روی هر نمودار تنظیم می‌شود. راست‌به‌چپ، با عددِ فارسی و رنگِ همان سری. در نمونه‌ها تولتیپ از اول باز است (defaultTooltipIndex)؛ روی میله‌ها حرکت کنید.

ری‌اکت ۱۹ و Next.js با پیاده‌سازی دسترس‌پذیری داخلی دیگویو ۳ با Composition API — هنوز برای این کامپوننت پورت نشدهSvelte ۵ با runes — هنوز برای این کامپوننت پورت نشدهانگولار با signals و دایرکتیوهای standalone — هنوز برای این کامپوننت پورت نشده

این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.

تولتیپِ پیش‌فرض
نشانگرِ نقطه‌ای و تیترِ دسته

این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

نصب

با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.

پکیج‌منیجر پیش‌فرض Node.jsنصب سریع با لینک سخت و دیسک مشترکYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
npx digdesign@latest add https://docs.digdesign.ir/r/chart-presets.json
pnpm dlx digdesign@latest add https://docs.digdesign.ir/r/chart-presets.json
yarn dlx digdesign@latest add https://docs.digdesign.ir/r/chart-presets.json
bunx --bun digdesign@latest add https://docs.digdesign.ir/r/chart-presets.json

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

استفاده

<BarChart
  data={data}
  categoryKey="day"
  series={series}
  tooltip={{
    indicator: "line",
    showTotal: "جمعِ روز",
    formatValue: (value) => `${formatNumber(Number(value))} تیکت`,
  }}
/>

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

ترکیب اجزا

همهٔ نمودارها (Area، Bar، Line، Pie، Radar، Radial) پراپِ tooltip می‌گیرند. indicator شکلِ نشانگرِ رنگ است: dot، line (نوارِ عمودی کنارِ ردیف‌ها)، dashed یا none. hideLabel تیتر را برمی‌دارد و labelFormatter آن را بازنویسی می‌کند؛ مثلاً محورِ کوتاهِ «ش» در تولتیپ «شنبه، ۳۰ شهریور» شود.

formatValue قالبِ هر ردیف است (واحد، تومان، درصد) و از valueFormatter نمودار جداست تا محور کوتاه بماند و تولتیپ کامل. showTotal ردیفِ جمع را با خطِ جداکننده پایین می‌گذارد. اگر سری icon داشته باشد، آیکون جای نشانگرِ رنگ می‌نشیند.

در ChartContainer سطح‌پایین همین گزینه‌ها با پراپِ tooltip کار می‌کنند و renderChartTooltip برای فرمترِ کاملاً سفارشی صادر شده است.

دسترس‌پذیری

  • تولتیپ با صفحه‌کلید و صفحه‌خوان در دسترس نیست؛ عددِ مهم را جای دیگری هم بنویسید.
  • تولتیپ داخلِ کادرِ نمودار می‌ماند (confine) و روی میله نمی‌افتد، تا داده را نپوشاند.

مرجع API

ChartTooltipOptions

ویژگینوعپیش‌فرضتوضیح
indicator"dot" | "line" | "dashed" | "none""dot"شکلِ نشانگرِ رنگِ هر ردیف.
hideLabelbooleanfalseتیترِ دسته پنهان.
labelFormatter(label: string) => ReactNode—بازنویسیِ تیتر.
formatValue(value, key) => ReactNodevalueFormatterِ نمودارقالبِ مقدارِ هر ردیف.
showTotalboolean | stringfalseردیفِ جمع؛ رشته یعنی برچسبِ دلخواه.

روی نمودار

ویژگینوعپیش‌فرضتوضیح
tooltipChartTooltipOptions—گزینه‌های بالا.
cursor"line" | "band" | "none""line"نشانگرِ دستهٔ زیرِ ماوس.
defaultTooltipIndexnumber—تولتیپِ این اندیس از اول باز باشد.

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.