جمّع لوحة البيانات الجاهزة للنشر
جمّع لوحة البيانات الجاهزة للنشر
هذا هو المشروع الختامي. لقد بنيت بطاقات مؤشرات الأداء، ومخططاً، وتخطيط تقرير — والآن ستجمع القطع معاً في صفحة لوحة بيانات واحدة مكتملة وقابلة للنشر، يمكنك شحنها إلى رابط حقيقي.
ستجمّع صفحة كاملة: ترويسة تحمل الهوية، وصفاً من بطاقات KPI، وقسم مخطط، وجدول بيانات — كل ذلك في شاشة واحدة متناسقة. هذا هو المنتج الذي تسلّمه لصاحب المصلحة وتقول له: "هذه هي لوحة البيانات الحية."
فكّر من البداية إلى النهاية. التطبيق القابل للنشر ليس جميلاً فحسب؛ بل منظّم ومقروء ويشرح نفسه بنفسه. حين تُنهي هذا الدرس سيكون لديك تطبيق بيانات جاهز لملف أعمالك. هيا ننشره.
التعليمات
أضف ترويسة صفحة تحتوي على h1 بعنوان التطبيق "تحليلات المبيعات".
تلميح: استخدم: `<header class="bg-gray-800 ..."><h1 class="text-2xl font-bold">تحليلات المبيعات</h1></header>`.
أين أكتب هذا؟
<!-- جمّع لوحة البيانات الكاملة هنا -->اكتبه في السطر 11 — أسفل هذا التعليق، بعد الكود الذي أضفته بالفعل.
أضف صف مؤشرات أداء باستخدام حاوية شبكة متجاوبة.
أضف قسم مخطط باستخدام أعمدة div منسّقة باللون bg-purple-500.
أضف جدول بيانات لأحدث الطلبات لإكمال لوحة البيانات.
الكود الخاص بك
صف ما تريد بناءه في هذه الخطوة وسأكتب الكود — ثم انقر «تطبيق» لإدراجه في محرّرك. هذه الخطوة: أضف ترويسة صفحة تحتوي على h1 بعنوان التطبيق "تحليلات المبيعات".