skill

بناء لوحة التحكم

بناء لوحة تحكم تفاعلية بصيغة HTML تتضمن رسوم بيانية وعوامل تصفية وجداول. استخدم هذه عند إنشاء نظرة عامة تنفيذية بطاقات KPI، أو تحويل نتائج الاستعلامات إلى تقرير موحد قابل للمشاركة، أو بناء لقطة مراقبة الفريق، أو عندما تحتاج إلى عدة رسوم بيانية بعوامل تصفية في ملف واحد قابل للفتح في المتصفح.

Anthropic4.82,500+ تثبيتموثوق

نبذة

# /build-dashboard - بناء لوحات المراقبة التفاعلية

> إذا رأيت عناصر نائبة غير مألوفة أو كنت بحاجة للتحقق من الأدوات المتصلة، راجع [CONNECTORS.md](../../CONNECTORS.md).

بناء لوحة مراقبة HTML تفاعلية مستقلة الاحتواء مع رسوم بيانية وفلاتر وجداول وتصميم احترافي. تُفتح مباشرة في المتصفح - لا تحتاج إلى خادم أو تبعيات.

## الاستخدام

``` /build-dashboard <وصف لوحة المراقبة> [مصدر البيانات] ```

## سير العمل

### 1. فهم متطلبات لوحة المراقبة

حدد:

- **الغرض**: نظرة عامة تنفيذية، مراقبة تشغيلية، تحليل متعمق، تقارير الفريق - **المستخدمون**: من سيستخدم هذه لوحة المراقبة؟ - **المقاييس الرئيسية**: ما هي الأرقام الأكثر أهمية؟ - **الأبعاد**: ما الذي يجب على المستخدمين تصفيته أو تقسيمه؟ - **مصدر البيانات**: استعلام مباشر، بيانات مرفوعة، ملف CSV، أو بيانات نموذجية

### 2. جمع البيانات

**إذا كانت مستودعات البيانات متصلة:** 1. استعلم عن البيانات الضرورية 2. ضمّن النتائج كـ JSON داخل ملف HTML

**إذا تم لصق البيانات أو تحميلها:** 1. حلل وقم بتنظيف البيانات 2. ضمّنها كـ JSON في لوحة المراقبة

**إذا كنت تعمل من وصف بدون بيانات:** 1. أنشئ مجموعة بيانات نموذجية واقعية تطابق المخطط الموصوف 2. أشر في لوحة المراقبة إلى أنها تستخدم بيانات نموذجية 3. قدم تعليمات لاستبدال البيانات الحقيقية

### 3. تصميم تخطيط لوحة المراقبة

اتبع نمط تخطيط لوحة المراقبة القياسي:

``` ┌──────────────────────────────────────────────────┐ │ عنوان لوحة المراقبة [الفلاتر ▼] │ ├────────────┬────────────┬────────────┬───────────┤ │ بطاقة KPI │ بطاقة KPI │ بطاقة KPI │ بطاقة KPI │ ├────────────┴────────────┼────────────┴───────────┤ │ │ │ │ الرسم البياني │ الرسم البياني │ │ الأساسي │ الثانوي │ │ (أكبر مساحة) │ │ │ │ │ ├─────────────────────────┴────────────────────────┤ │ │ │ جدول التفاصيل (قابل للفرز والتمرير) │ │ │ └──────────────────────────────────────────────────┘ ```

**كيّف التخطيط حسب المحتوى:** - 2-4 بطاقات KPI في الأعلى للأرقام الرئيسية - 1-3 رسوم بيانية في القسم الأوسط للاتجاهات والتصنيفات - جدول تفاصيل اختياري في الأسفل للتحليل العميق - فلاتر في الرأس أو الشريط الجانبي حسب التعقيد

### 4. بناء لوحة المراقبة HTML

أنشئ ملف HTML واحد مستقل الاحتواء باستخدام القالب الأساسي أدناه. يتضمن الملف:

**البنية (HTML):** - تخطيط HTML5 دلالي - شبكة سريعة الاستجابة باستخدام CSS Grid أو Flexbox - عناصر تحكم الفلاتر (قوائم منسدلة، منتقيات التاريخ، أزرار التبديل) - بطاقات KPI مع القيم والعلامات - حاويات الرسوم البيانية - جدول البيانات مع رؤوس قابلة للفرز

**الأنماط (CSS):** - مخطط ألوان احترافي (أبيض نظيف، رمادي، مع ألوان تمييز للبيانات) - تخطيط قائم على البطاقات مع ظلال دقيقة - طباعة متسقة (خطوط النظام لتحميل سريع) - تصميم سريع الاستجابة يعمل على أحجام شاشات مختلفة - أنماط صديقة للطباعة

**التفاعل (JavaScript):** - Chart.js للرسوم البيانية التفاعلية (متضمنة عبر CDN) - قوائم الفلاتر المنسدلة التي تحدث جميع الرسوم البيانية والجداول في نفس الوقت - أعمدة الجدول القابلة للفرز - تلميحات عند التحويم على الرسوم البيانية - تنسيق الأرقام (فواصل، عملة، نسب مئوية)

**البيانات (JSON مضمّن):** - جميع البيانات مضمنة مباشرة في HTML كمتغيرات JavaScript - بدون جلب بيانات خارجية مطلوب - لوحة المراقبة تعمل تماماً دون اتصال بالإنترنت

### 5. تنفيذ أنواع الرسوم البيانية

استخدم Chart.js لجميع الرسوم البيانية. أنماط لوحة المراقبة الشائعة:

- **رسم بياني خطي**: اتجاهات السلاسل الزمنية - **رسم بياني عمودي**: مقارنات الفئات - **رسم بياني حلقي**: التكوين (عند وجود <6 فئات) - **عمود مكدس**: التكوين عبر الوقت - **مختلط (عمودي + خطي)**: مع تراكب معدل الحجم

استخدم أنماط تكامل Chart.js أدناه لكل نوع رسم بياني.

### 6. إضافة التفاعل

استخدم أنماط التصفية والتفاعل أدناه لقوائم الفلاتر المنسدلة، فلاتر نطاق التاريخ، منطق الفلاتر المدمجة، الجداول القابلة للفرز، وتحديثات الرسوم البيانية.

### 7. الحفظ والفتح

1. احفظ لوحة المراقبة كملف HTML باسم وصفي (مثل `sales_dashboard.html`) 2. افتحها في المتصفح الافتراضي للمستخدم 3. تأكد من عرضها بشكل صحيح 4. قدم تعليمات لتحديث البيانات أو التخصيص

---

## القالب الأساسي

كل لوحة مراقبة تتبع هذا الهيكل:

```html <!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>عنوان لوحة المراقبة</title> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1" integrity="sha384-jb8JQMbMoBUzgWatfe6COACi2ljcDdZQ2OxczGA3bGNeWe+6DChMTBJemed7ZnvJ" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0" integrity="sha384-cVMg8E3QFwTvGCDuK+ET4PD341jF3W8nO1auiXfuZNQkzbUUiBGLsIQUE+b1mxws" crossorigin="anonymous"></script> <style> /* أنماط لوحة المراقبة تذهب هنا */ </style> </head> <body> <div class="dashboard-container"> <hea

التثبيت

شغل هذا الأمر

git clone https://github.com/anthropics/knowledge-work-plugins && cp -r knowledge-work-plugins/data/skills/build-dashboard ~/.claude/skills/

يعمل مع

claude appclaude codeclaude apicursorcodexwindsurfclinezed

خطوات التثبيت

استنسخ المستودع وانسخ مجلد `data/skills/build-dashboard` إلى دليل مهارات Claude الخاص بك. متوافق مع Claude Code و Cursor و Codex وأي وكيل متوافق مع Agent Skills.

عرض المصدر
الرخصة: Apache-2.0بواسطة Anthropic

أصول ذات صلة

مختارات أخرى في البيانات والتحليلات.

skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/knowledge-work-plugins && cp -r knowledge-work-plugins/bio-research/skills/nextflow-development ~/.claude/skills/
تطوير Nextflow
تشغيل خطوط معالجة nf-core للمعلوماتية الحيوية (rnaseq، sarek، atacseq) على بيانات التسلسل. استخدم هذا عند تحليل بيانات RNA-seq أو WGS/WES أو ATAC-seq…★ 4.8 · 2,500+
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/knowledge-work-plugins && cp -r knowledge-work-plugins/data/skills/data-context-extractor ~/.claude/skills/
محلل سياق البيانات
أنشئ أو حسّن مهارة تحليل بيانات خاصة بالشركة من خلال استخراج المعرفة من المحللين. وضع التمهيد - المُشعِلات: "إنشاء مهارة سياق بيانات"، "إعداد تحليل ا…★ 4.8 · 2,500+
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/knowledge-work-plugins && cp -r knowledge-work-plugins/bio-research/skills/instrument-data-to-allotrope ~/.claude/skills/
بيانات الأداة إلى Allotrope
تحويل ملفات مخرجات أجهزة المختبر (PDF و CSV و Excel و TXT) إلى صيغة Allotrope Simple Model (ASM) JSON أو CSV مسطح ثنائي الأبعاد. استخدم هذه المهارة عن…★ 4.8 · 2,500+
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/knowledge-work-plugins && cp -r knowledge-work-plugins/data/skills/analyze ~/.claude/skills/
تحليل
الإجابة على أسئلة البيانات — من الاستعلامات السريعة إلى التحليلات الشاملة. استخدمه عند البحث عن مقياس واحد، أو التحقيق في العوامل التي تؤثر على اتجاه…★ 4.8 · 2,500+
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/knowledge-work-plugins && cp -r knowledge-work-plugins/bio-research/skills/start ~/.claude/skills/
ابدأ
قم بإعداد بيئة البحث البيولوجي واستكشف الأدوات المتاحة. استخدمه عند البدء الأول في التعرف على المكون الإضافي، والتحقق من خوادم MCP المتصلة الخاصة بالأ…★ 4.8 · 2,500+
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/knowledge-work-plugins && cp -r knowledge-work-plugins/data/skills/validate-data ~/.claude/skills/
التحقق من البيانات
التحقق من الجودة والتدقيق قبل مشاركة التحليل — فحص المنهجية والدقة والانحيازات المحتملة. استخدم هذا عند مراجعة تحليل قبل عرضه على أصحاب المصلحة، والتح…★ 4.8 · 2,500+

افحص قبل التثبيت

شغل أي مصدر عبر فحوصاتنا - الظهور في الذكاء الاصطناعي والأمان والأداء واكتشاف التقنيات.

فحص أمني تلقائي للموقع

الأمان

محلل سرعة الصفحة

الأداء

اختبار جودة المحتوى العربي بالذكاء الاصطناعي

جودة المحتوى

مختبر وكلاء الذكاء الاصطناعي

اختبار الذكاء الاصطناعي

كاشف منصة الموقع

الترحيل

تدقيق الظهور في محركات الذكاء الاصطناعي

الظهور في الذكاء الاصطناعي

مولد ملف llms.txt

الظهور في الذكاء الاصطناعي

مقياس سهولة القراءة بالعربية

جودة المحتوى

منشئ البيانات المنظمة

الظهور في الذكاء الاصطناعي

حاسبة تكاليف الذكاء الاصطناعي

اختبار الذكاء الاصطناعي

محلل العناوين العربية

جودة المحتوى

المزيد في البيانات والتحليلات