مؤشّر أداء
Metricبطاقة مؤشّر أداء في React بتسمية وقيمة وفرق تغيّر واتجاه ومخطّط مصغّر اختياري وأيقونة وفتحات إجراء. جمّع البلاطات بـ MetricGroup للوحات التحكّم.
يعرض Metric إحصائية عبر فتحات: icon وlabel وvalue وchange مع trend، ومخطط MetricChart مصغر اختياري. رتب البطاقات بـ MetricGroup.
متى تستخدمه
استخدم Metric للأرقام الرئيسية في لوحة التحكّم: طلبات هذا الشهر، ومتوسّط وقت المعالجة، ودرجة الرضا. اعرض التغيّر مقارنةً بفترة ليكون للأرقام سياق. رتّب عدّة بطاقات بـ MetricGroup.
للسلسلة الكاملة، استخدم Charts بدل المخطّط المصغّر.
أمثلة
الخصائص
الخصائص التي يعرّفها Metric. سمات العنصر الأصلي تمرّ كما هي.
<Metric>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
layout | "small" | "large" | ||
icon | react.ReactNode | Featured icon, shown in a 32px brand-tinted circle at the start of the header. | |
label | react.ReactNode | Short label beside the icon (e.g. "24h Views"). | |
action | react.ReactNode | Header slot at the inline-end (e.g. a "more" menu trigger button). | |
value | react.ReactNode | The metric, pre-formatted by the consumer (e.g. "50%", "SAR 1.2M"). | |
change | react.ReactNode | Change text - include the sign (e.g. "+100%") so AT conveys direction; color comes from trend. | |
trend | Trend | Trend: up → success arrow, down → error arrow. Drives the glyph + color. | |
changeType | ChangeType | Change glyph style - 01 directional arrow (default) · 02 trend glyph. | |
changeLabel | react.ReactNode | Muted comparison text beside the change (e.g. "vs last month"). | |
chart | react.ReactNode | Trend chart - pass a <MetricChart> (full-width in large, beside the value in small). | |
footer | react.ReactNode | Footer actions; when present, a full-bleed divider sits above a space-between actions row. |
<MetricChange>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
trend | Trend | ||
type | ChangeType | 01 directional arrow (default) · 02 trend glyph. |
<MetricChart>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
dataإلزامي | number[] | The series to plot (any numeric scale). | |
trend | Trend | Line + area + marker color: up → success, down → error. Default up. | |
markers | number[] | Indices of data to mark with a dot. Defaults to the highest point. |
<MetricGroup>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
orientation | "vertical" | "horizontal" | ||
gap | "sm" | "md" | "lg" | ||
columns | number | Fixed column count for the horizontal grid (collapses to one column on narrow screens). Omit for an auto-fit responsive grid. |
إمكانية الوصول
التسمية والقيمة نص، فتُقرأ بالترتيب. أيقونة الاتجاه زخرفية؛ يجب أن يتضمّن نص change الاتجاه، مثل «+12%»، حتى لا يعتمد على اللون أو الأيقونة وحدهما.
المخطّط المصغّر مخفي عن التقنيات المساعدة والقيمة تحمل المعنى. تستخدم الفواصل بين البلاطات role="separator".