مقاييس Angular للتقدّم والمقياس والحلقة | ng-hub-ui-metrics

عناصر مقاييس Angular للقراءة فقط — شريط تقدّم خطّي، ومقياس متدرّج، وعدّاد حلقي دائري — مدفوعة برموز نظام التصميم مع دلالات ARIA كاملة.

نظرة عامة

لماذا تبحث الفِرَق عن هذه المكتبة

استخدم ng-hub-ui-metrics عندما يحتاج تطبيق Angular الخاص بك إلى تصوّر قيمة واحدة — تقدّم الرفع، أو السعة، أو نتيجة، أو تقييم — دون الاستعانة بمكتبة رسوم بيانية كاملة.

التثبيت

npm install ng-hub-ui-metrics

انتقل إلى

مثالي لـ

  • تقدّم الرفع والمهام
  • مقاييس القرص والذاكرة والسعة
  • نتائج الجودة والتقييمات
  • حلقات مؤشّرات الأداء الرئيسية في لوحات المعلومات

حول metrics

ng-hub-ui-metrics هي عائلة صغيرة من العناصر العرضية. يعرض `hub-progress` شريطًا خطّيًا محدَّدًا أو غير محدَّد؛ ويصنّف `hub-meter` قيمة عددية مقابل هضبة `[low, high]` وفق دلالات HTML `<meter>`؛ ويرسم `hub-ring` نتيجة مُطبَّعة كقوس SVG مع تعليق مُسقَط اختياري. لا يثبّت أيٌّ من المكوّنات لونًا بشكل صارم — بل تقرأ عائلات `--hub-sys-color-*` المشتركة وتكشف الخصائص المخصّصة `--hub-progress-*` و`--hub-meter-*` و`--hub-ring-*` للتنسيق.

أدلّة الميزات

تقدّم خطّي

شريط تقدّم محدَّد أو غير محدَّد مع مقياس أحجام وألوان دلالية وتسمية قيمة اختيارية.

أمثلة:
أشرطة التقدّم

أشرطة التقدّم

Determinate progress with value labelsDocuments92%Images68%Videos34%Archives12%
Size scale
IndeterminateSyncing workspace

مقياس متدرّج

عدّاد يتبع دلالات HTML <meter> ويعيد تلوين نفسه حسب النطاق نسبةً إلى هضبة low/high ونقطة optimum.

أمثلة:
المقاييس المتدرّجة

المقاييس المتدرّجة

Primary storage40% used
Media library90% used
Battery reserve10% left

عدّاد حلقي دائري

حلقة SVG تعرض نتيجة مُطبَّعة، مع عتبات ألوان وتعليق يُسقَط عبر <ng-content>.

أمثلة:
العدّادات الحلقية

العدّادات الحلقية

92%Coverage
58%Performance
34%SEO
A+Custom caption

التنسيق

لوّن عنصرًا واحدًا باستخدام مُدخل `color` الدلالي (المرتبط بعائلات `--hub-sys-color-*` في ds)، أو أعد تلوين الثلاثة دفعة واحدة عبر مِكسِن SCSS المسمى `hub-metrics-theme()` باستدعاء واحد وخصائص `--hub-*` المخصّصة.

أمثلة:
التنسيق عبر mixin والألوان الدلالية

التنسيق عبر mixin والألوان الدلالية

Semantic colours — the color input reads the design-system --hub-sys-color-* familiesprimary70%success70%warning70%danger70%neutral70%
Custom theme — one hub-metrics-theme() include retints all three primitives at once (see the CSS tab)
Coverage64%86%Score

الميزات الرئيسية

التغييرات الأخيرة

Version 22.0.0 - 7/5/26, 12:00 AM

added: HubProgressComponent: a determinate/indeterminate linear progress bar with a size scale, semantic colours and an optional value label.

added: HubMeterComponent: a graded gauge following HTML <meter> semantics that selects its fill band from the low/high plateau and the optimum point.

added: HubRingComponent: a circular SVG ring gauge with colour thresholds, a projected centre caption and exportAs "hubGauge".

added: CSS-variable theming surface (--hub-progress-*, --hub-meter-*, --hub-ring-*) mapped onto the shared --hub-sys-color-* token families.

المكتبات ذات الصلة

ng-hub-ui-skeleton ng-hub-ui-badges ng-hub-ui-stepper