تطبيقات ويب
راصد — لوحة مؤشرات
راصد لوحة تعرض حالة الخدمات ومؤشراتها الأساسية في مكان واحد، مصمّمة لتُقرأ في ثوانٍ دون الحاجة إلى فتح عدة أدوات متفرقة.
المشكلة
متابعة حالة عدة خدمات تعني التنقل بين لوحات متعددة لكل منها لغتها البصرية الخاصة. النتيجة وقت ضائع في التنقل، وتأخر في ملاحظة المؤشرات غير الطبيعية.
الفكرة
لوحة واحدة تُقرأ بنظرة: المؤشرات الحرجة أولًا في أعلى الشاشة، والتفاصيل تحتها عند الطلب. مصادر البيانات تُعرَّف في ملف إعداد واحد، فيمكن إضافة مصدر جديد دون كتابة كود واجهة.
أهم الخصائص
- بطاقات مؤشرات قابلة للترتيب حسب الأهمية.
- رسوم بيانية خفيفة مبنية على D3 بلا مكتبات ثقيلة.
- تنبيه بصري عند تجاوز الحدود المعرّفة.
- وضع داكن ودعم كامل للشاشات الصغيرة.
- تعريف مصادر البيانات من ملف إعداد واحد.
التقنيات المستخدمة
- React
- TypeScript
- Vite
- D3
البنية التقنية
واجهة React تقرأ من طبقة موحّدة تحوّل استجابات المصادر المختلفة إلى شكل داخلي واحد، فتبقى مكوّنات العرض غير مرتبطة بمصدر بعينه. التحديث يتم على فترات قابلة للضبط لكل مصدر.
هذا مشروع تجريبي ببيانات مبدئية لعرض شكل الصفحة. استبدل محتواه بمشروعك الحقيقي.