مؤشر أداء
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. | |
asChild | boolean | Render the card as its single child (a router <Link>), so the whole card navigates. The
child's own children render after the figures. Don't combine with action or footer
controls: interactive content inside a link is invalid. |
<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".