کارت قانون هشدار (AlertRuleCard)
تعریف یک alert ذخیرهشده — شرط فعالسازی، آستانه، شدت، کانالهای اطلاعرسانی، Switch روشن/خاموش، تاریخچهی فعالسازی
معرفی
AlertRuleCard تعریف یک قانون هشدار ذخیرهشده را نمایش میدهد: «هرگاه نرخ منفی > 20٪ شود، با severity فوری از طریق ایمیل + تلگرام به تیم اعلام کن». مناسب صفحهی مدیریت Alertها در پنل افکارسنجی، که کاربر میتواند rule را روشن/خاموش کند و تاریخچهی فعالسازی را ببیند.
چه زمانی استفاده کنیم:
- لیست all alerts در داشبورد ادمین
- صفحهی آلارمهای اخیر — کارت rule + ActionTimeline
- نمایش inline در یک Concept/Page card که از این rule notify میگیرد
چه زمانی استفاده نکنیم:
- نوتیفیکیشن زنده/dismissable در صف کاربر →
NotificationCenter(آیتمها از نوع دادهیNotificationItemهستند، نه کامپوننت) - ایجاد rule جدید form-style → از
WizardPageیا یک Form سفارشی استفاده کنید — این کارت نمایشگر است نه ادیتور
افزایش ناگهانی منفی
فوریفعال
شرط فعالسازی
هرگاه نرخ منفی بیش از 20٪ شود
آستانه:≥ 20٪
کانالها:ایمیلتلگرامدرونبرنامهای
آخرین فعالسازی: 2 ساعت پیشتعداد فعالسازی: 14
زمین بازی
زمین بازی
افزایش ناگهانی منفی
فوریفعال
شرط فعالسازی
هرگاه نرخ منفی بیش از 20٪ شود
آستانه:≥ 20٪
کانالها:ایمیلتلگرامدرونبرنامهای
آخرین فعالسازی: 2 ساعت پیشتعداد فعالسازی: 14
تنظیمات
ظاهر
حالت
محتوا
کد این نمونه بهصورت خودکار قابل تولید نیست — برای کد آمادهی copy/paste به بخش «استفاده» در بالای صفحه مراجعه کنید.
استفاده
import { AlertRuleCard } from '@partodata/ui'
const [active, setActive] = React.useState(true)
<AlertRuleCard
name="افزایش ناگهانی منفی"
trigger="هرگاه نرخ منفی بیش از 20٪ شود"
threshold="≥ 20٪"
severity="urgent"
channels={['email', 'telegram', 'in-app']}
active={active}
onActiveChange={setActive}
lastFired="2 ساعت پیش"
fireCount={14}
/>channels هر یک از email | sms | telegram | in-app | webhook هستند که با آیکون Lucide مرتبط نمایش داده میشوند.
راهنمای استفاده
بکنید
triggerرا بهزبان طبیعی فارسی بنویسید (نه expression code-like) — کاربر تحلیلگر میخواند نه dev -thresholdرا بهصورت فشرده پاس بدهید (≥ 20٪،> 1000 پست) — کارت جا محدود است -lastFiredرا باformatRelativeLocaleTime(یا فرم similar) به نسبی-زمان تبدیل کنید
نکنید
active=trueاما همه channels خالی نگذارید — rule فعال است ولی به جایی notify نمیکند → state inconsistent - severity را اشتباه نگیرید: severity مربوط به اولویت آلارم است، نه شدت کلاستر/concept هدف
جدول ویژگیها
دسترسیپذیری
- master
Switchاز Radix Switch زیرین میآید کهrole="switch"+aria-checkedرا بهصورت خودکار ست میکند و با Space قابل toggle است. نام دسترسپذیر آن باaria-labelledbyاز دو تکه ساخته میشود: یک برچسب پنهان («فعال») بهعلاوهی خودِ<h3>نام rule — پس در فهرستی از چند کارت، هر switch با نام قانون خودش اعلام میشود («فعال، افزایش ناگهانی منفی») و نه یک «فعال» تکراری. چونnameاز نوعReactNodeاست، ارجاع با id تنها راه درست است. - آیکونهای Bell/BellOff (وضعیت master)، channel iconها، و jp Lucide ها همگی
aria-hidden="true"هستند — معنا از label و متن کنار آنها منتقل میشود. - channelهای اطلاعرسانی بهصورت گروهی از iconها نمایش داده میشوند، ولی label هر channel (email، telegram…) برای screen reader قابل دسترسی است.
- severity بهصورت رنگ + متن نمایش داده میشود، نه فقط رنگ — کاربر color-blind نیز اولویت را میفهمد.
- تنها master
Switchقابل focus است و تنها stop در ترتیب tab این کارت بهشمار میرود؛ نام rule (یک<h3>) و آیکونها (Bell/BellOff و آیکونهای channel، همگیaria-hidden) focusable نیستند.
کامپوننتهای مرتبط
- نوتیفیکیشن زنده در صف کاربر →
NotificationCenter(آیتمها از نوع دادهیNotificationItemبه آن داده میشوند) - جستجوی ذخیرهشده (نه آلارم) →
SavedQueryCard - نمایش timeline فعالسازیها →
ActionTimeline - severity badge standalone →
SeverityBadge