نمودار خالی (EmptyChart)
Placeholder یکنواخت برای charts بدون داده — آیکون شکل نمودار + پیام محلی + hint اختیاری + action.
معرفی
EmptyChart یک جایگزین یکدست برای هر نموداری است که داده ندارد. Sankey/Scatter/Network بهطور خودکار این کامپوننت را وقتی data یا nodes خالی است رندر میکنند، ولی شما میتوانید از آن مستقیماً در کارتهای دیگر هم استفاده کنید.
چه زمانی استفاده کنیم:
- nodata state یک chart سفارشی
- placeholder در کارتهای dashboard قبل از لود داده
- وقتی filter هیچ نتیجهای برنمیگرداند
دادهای برای نمایش وجود ندارد
بازه زمانی دیگری را انتخاب کنید
زمین بازی
با تغییر تنظیمات زیر، پیشنمایش زنده را مشاهده کنید.
زمین بازی
دادهای برای نمایش وجود ندارد
تنظیمات
ظاهر
محتوا
کد این نمونه بهصورت خودکار قابل تولید نیست — برای کد آمادهی copy/paste به بخش «استفاده» در بالای صفحه مراجعه کنید.
استفاده
import { EmptyChart, Button } from '@parto-system-design/ui'
;<div style={{ height: 220 }}>
<EmptyChart
shape="bar"
hint="بازه زمانی دیگری را انتخاب کنید"
action={
<Button variant="outline" size="sm">
تغییر بازه
</Button>
}
/>
</div>راهنمای استفاده
بکنید
- این کامپوننت را روی هر چارتی که
dataخالی دارد رندر کنید — وضوح UX بهتر از یک چارت سفید - shape مناسب را بر اساس نوع چارت اصلی انتخاب کنید (bar/line/pie/network/generic) - پیام را به state داده مرتبط کنید (مثل «هیچ پستی در بازهی انتخابی نیست») - اگر action قابل انجام است، slotactionرا با Button پر کنید
نکنید
- این کامپوننت را برای loading state استفاده نکنید —
ChartLoadingSkeletonکاربرد دارد - پیام طولانی نگذارید — یک خط معنادار + یک hint کافی است
- چارت Sankey/Scatter/Network خود EmptyChart را خودکار رندر میکنند — برای آنها
if (!data) return <EmptyChart>تکرار نکنید
Props
دسترسیپذیری
role="status"+aria-labelاز پیام ساخته میشود.- آیکون
aria-hidden="true"است. - Screen reader پیام + hint + action را به ترتیب میخواند.
کامپوننتهای مرتبط
- ErrorState — برای حالت خطا (نه صرف nodata)
- Skeleton — برای placeholder loading
- Empty — empty state عمومی (نه مخصوص chart)