داشبورد باستخدام رياكت dashboard by react

تصميم داشبورد باستخدام React يمنحك القوة والمرونة لخلق تجربة تفاعلية مذهلة وسهلة الاستخدام. تخيل لوحة تحكم ديناميكية تتيح لك مراقبة وتحليل البيانات في الوقت الفعلي، مع رسومات بيانية أنيقة، وجداول بيانات مُنظمة، وتنبيهات فورية تظهر لك كل جديد. باستخدام مكتبات مثل Material-UI و Recharts، يمكنك إنشاء واجهة مستخدم حديثة وجذابة تعمل بسلاسة على جميع الأجهزة. بالإضافة إلى ذلك، سهولة استخدام React في إعادة استخدام المكونات والتحديثات التلقائية تجعل تطوير الداشبورد ممتعًا وفعالاً، مما يوفر تجربة مميزة للمستخدمين مع سرعة استجابة وانسيابية لا مثيل لها.

المتطلبات

تثبيت React

نقوم بانشاء مشروع جديد باسم dashboard-app باستخدام الكود التالي

				
					npx create-react-app dashboard-app

				
					cd dashboard-app

المكتبات المستخدمة

سنقوم باضافة مكتبة Material-UI و مكتبة @mui/x-data-grid الي المشروع باستخدام الكودين التاليين

				
					npm install @mui/material @emotion/react @emotion/styled

				
					npm install @mui/x-data-grid

لتحقيق وظائف مثل الرسوم البيانية، يمكنك اضافة مكتبات مثل Recharts الي المشروع باستخدام الكود التالي

				
					npm install recharts

يمكنك إضافة FontAwesome لتحسين الأيقونات. باستخدام الكود التالي

				
					npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core

المكونات الاساسية

سنقوم بانشاء الملفات الاساسية لتنفيذ dashboard والمكونة من sidebar , navbar و content

Sidebar.js

				
					import React from 'react';
import { List, ListItem, ListItemText } from '@mui/material';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChartLine, faUsers, faCog } from '@fortawesome/free-solid-svg-icons';

function Sidebar() {
  return (
    <div style={{ width: '250px', background: '#f4f4f4', height: '100vh' }}>
      <List>
        <ListItem button>
          <FontAwesomeIcon icon={faChartLine} style={{ marginRight: '10px' }} />
          <ListItemText primary="Dashboard" />
        </ListItem>
        <ListItem button>
          <FontAwesomeIcon icon={faUsers} style={{ marginRight: '10px' }} />
          <ListItemText primary="Users" />
        </ListItem>
        <ListItem button>
          <FontAwesomeIcon icon={faCog} style={{ marginRight: '10px' }} />
          <ListItemText primary="Settings" />
        </ListItem>
      </List>
    </div>
  );
}

export default Sidebar;

الشــــــــرح

يتم استيراد React لبناء مكون React.
يتم استيراد عناصر List, ListItem, و ListItemText من مكتبة Material-UI لتصميم القائمة.
يتم استيراد FontAwesomeIcon من مكتبة FontAwesome لإضافة أيقونات.
الأيقونات المستوردة:
- faChartLine: أيقونة الخط البياني (Dashboard).
- faUsers: أيقونة المستخدمين (Users).
- faCog: أيقونة الترس (Settings).

div : العنصر الجذر الذي يحتوي على القائمة الجانبية. يتم تحديد العرض 250px، والخلفية بلون فاتح #f4f4f4، وارتفاع 100vh لجعل القائمة تمتد على كامل الشاشة الرأسية.
List : العنصر الذي يمثل القائمة.
ListItem : كل عنصر في القائمة يكون قابلاً للضغط (button). كل عنصر يحتوي على:
- أيقونة من FontAwesome يتم وضعها بجانب النص، مع مسافة 10px بينها وبين النص.
- نص يعبر عن اسم القسم (مثل “Dashboard”, “Users”, “Settings”) باستخدام مكون ListItemText.

Navbar.js

				
					import React from 'react';
import { AppBar, Toolbar, Typography } from '@mui/material';
function Navbar() {
  return (
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6">
          Dashboard
        </Typography>
      </Toolbar>
    </AppBar>
  );
}

export default Navbar;

الشــــــــرح

يتم استيراد React لبناء مكون React.
يتم استيراد العناصر AppBar, Toolbar, و Typography من مكتبة Material-UI. هذه العناصر تُستخدم لتصميم شريط التنقل.
AppBar : يمثل شريط التطبيق أو شريط التنقل (Navbar) في الأعلى. يتم تحديد الموضع الخاص به ليكون static، مما يعني أن شريط التنقل لن يتحرك أثناء التمرير في الصفحة.
Toolbar : عنصر يحتوي على المكونات الداخلية لشريط التنقل، ويُستخدم لترتيب المحتوى داخل AppBar بشكل جيد.
Typography : عنصر يُستخدم لعرض النص “Dashboard” داخل شريط التنقل. يتم تحديد المتغير variant="h6" لعرض النص بحجم وشكل العنوان الرئيسي السادس (h6)، وهو تنسيق مُعتمد من Material-UI لتنسيق النصوص بشكل جاهز.

Content.js

				
					import React from 'react';
import Chart from './Chart';
import DataTable from './DataTable';
import StatsCard from './StatsCard';
import Notifications from './Notifications';

function Content() {
  return (
    <div style={{ padding: '20px' }}>
      <h1>Welcome to the Dashboard!</h1>
      <Notifications />
      <div style={{ display: 'flex', justifyContent: 'space-around' }}>
        <StatsCard title="Total Users" value="1200" />
        <StatsCard title="Active Sessions" value="250" />
        <StatsCard title="Revenue" value="$12,000" />
      </div>
      
      <Chart />
      <h2>Users Table</h2>
      <DataTable />
    </div>
  );
}

export default Content;

الشــــــــرح

يتم استيراد React لبناء مكون React.
يتم استيراد المكونات الفرعية:
- Chart: مكون لعرض الرسم البياني.
- DataTable: مكون لعرض جدول المستخدمين.
- StatsCard: مكون لعرض بطاقات الإحصائيات.
- Notifications: مكون لعرض الإشعارات.

div (الأول) : يحتوي على جميع المحتويات الخاصة بالمكون. يتم تطبيق padding بقيمة 20px لجعل المحتوى بعيدًا قليلاً عن حواف الصفحة.
h1 : يعرض عنوان الترحيب “Welcome to the Dashboard!”.
Notifications : يعرض إشعارات للمستخدم داخل لوحة التحكم. يتم استدعاؤه مباشرة بعد العنوان الرئيسي.
div (الثاني) : يتم استخدامه لتنسيق بطاقات الإحصائيات (StatsCard). يحتوي هذا div على 3 مكونات StatsCard والتي تعرض الإحصائيات التالية:
- Total Users: عدد المستخدمين الإجمالي (1200).
- Active Sessions: عدد الجلسات النشطة (250).
- Revenue: الإيرادات المحققة ($12,000).
- يتم استخدام display: flex لترتيب البطاقات بشكل أفقي، و justifyContent: 'space-around' لتوزيع البطاقات بالتساوي.
Chart : مكون لعرض الرسم البياني داخل لوحة التحكم.
h2 : يعرض عنوان “Users Table” للإشارة إلى الجدول الذي يحتوي على بيانات المستخدمين.
DataTable : يعرض جدول المستخدمين.

المكونات الاضافية

Chart.js

				
					import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const data = [
  { name: 'Jan', uv: 4000, pv: 2400, amt: 2400 },
  { name: 'Feb', uv: 3000, pv: 1398, amt: 2210 },
  { name: 'Mar', uv: 2000, pv: 9800, amt: 2290 },
];

function DashboardChart() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey="pv" stroke="#8884d8" />
        <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
      </LineChart>
    </ResponsiveContainer>
  );
}

export default DashboardChart;

الهدف من الكود

الكود يُنشئ رسمًا بيانيًا خطيًا باستخدام مكتبة recharts لعرض بيانات بسيطة لعدة شهور (يناير، فبراير، مارس). يتم رسم خطين بيانيين يعرضان البيانات uv و pv بشكل متجاوب مع حجم الشاشة، مع ميزات إضافية مثل الشبكة الديكارتية، الإرشادات (Tooltip)، والأسطورة (Legend) لتسهيل فهم البيانات.

DataTable.js

				
					import React from 'react';
import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'email', headerName: 'Email', width: 150 },
  { field: 'age', headerName: 'Age', width: 110 },
];

const rows = [
  { id: 1, name: 'Ahmed', email: 'ahmed@example.com', age: 35 },
  { id: 2, name: 'Mohamed Ghareb', email: 'mohamed@example.com', age: 42 },
  { id: 3, name: 'Ali Johnson', email: 'ali@example.com', age: 28 },
];

function DataTable() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
    </div>
  );
}

export default DataTable;

الهدف من الكود

الكود يُنشئ جدول بيانات تفاعلي باستخدام مكتبة @mui/x-data-grid. يعرض الجدول 3 صفوف و 4 أعمدة (ID, Name, Email, Age) مع ميزات مثل تحديد الصفوف باستخدام مربعات اختيار (checkboxes) والتحكم في عدد الصفوف المعروضة في الصفحة (pageSize). الجدول يتميز بواجهة مستخدم سهلة التعامل ومتكاملة مع التصميم العصري الخاص بـ Material-UI.

StatsCard.js

				
					import React from 'react';
import { Card, CardContent, Typography } from '@mui/material';

function StatsCard({ title, value }) {
  return (
    <Card style={{ margin: '10px', width: '200px' ,backgroundColor:'lightYellow'}}>
      <CardContent>
        <Typography variant="h5" component="div">
          {value}
        </Typography>
        <Typography color="textSecondary">
          {title}
        </Typography>
      </CardContent>
    </Card>
  );
}

export default StatsCard;

الهدف من الكود

الكود يُنشئ بطاقة إحصائيات يمكن استخدامها لعرض قيم مثل عدد المستخدمين أو الإيرادات. البطاقة تحتوي على عنصرين رئيسيين: القيمة و العنوان، مع تنسيق بسيط باستخدام مكتبة Material-UI. يتم تخصيص البطاقة بألوان وخطوط مميزة لجعلها تتماشى مع تصميم واجهة المستخدم.

Notifications.js

				
					import React, { useState } from 'react';
import { Snackbar, Button } from '@mui/material';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBell } from '@fortawesome/free-solid-svg-icons';


function Notifications() {
  const [open, setOpen] = useState(false);

  const handleClick = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button variant="contained" onClick={handleClick}>
        
        <FontAwesomeIcon icon={faBell} style={{ marginRight: '10px' }} />
        Show Notification
      </Button>
      <Snackbar
        open={open}
        autoHideDuration={6000}
        onClose={handleClose}
        message="This is a notification!"
      />
    </div>
  );
}

export default Notifications;

الهدف من الكود

الكود يُنشئ مكون إشعارات بسيط باستخدام Snackbar و Button من مكتبة Material-UI. عندما يضغط المستخدم على الزر الذي يحتوي على أيقونة الجرس، يظهر إشعار في أسفل الشاشة لمدة 6 ثوانٍ ثم يختفي تلقائيًا. كما يمكن إغلاق الإشعار يدويًا بالنقر عليه أو خارجه.

دمج المكونات

App.js

				
					import React from 'react';
import Sidebar from './Sidebar';
import Navbar from './Navbar';
import Content from './Content';

function App() {
  return (
    <div style={{ display: 'flex' }}>
      <Sidebar />
      <div style={{ flexGrow: 1 }}>
        <Navbar />
        <Content />
      </div>
    </div>
  );
}

export default App;

الشــــــــــــرح

- يتم استيراد مكتبة React.
- يتم استيراد المكونات الثلاثة الرئيسية:
  - Sidebar: الشريط الجانبي للتطبيق.
  - Navbar: شريط التنقل في أعلى الصفحة.
  - Content: المحتوى الرئيسي الذي يظهر في الصفحة بعد شريط التنقل.
div الخارجي:
- - يحتوي على مكونات التطبيق ويتم تطبيق نمط display: 'flex' لجعل المحتويات تظهر بشكل أفقي.
- Sidebar:
  - يتم عرض مكون الشريط الجانبي، والذي يشغل مساحة ثابتة إلى اليسار.
- div الداخلي:
  - يحتوي على مكونات Navbar و Content.
  - خاصية flexGrow: 1 تعني أن هذا الجزء سيأخذ المساحة المتبقية المتاحة من الشاشة بعد تخصيص المساحة للشريط الجانبي.
- Navbar:
  - مكون شريط التنقل الذي يظهر في أعلى الصفحة.
- Content:
  - مكون المحتوى الرئيسي الذي يحتوي على البيانات أو الرسومات أو أي محتوى آخر يظهر أسفل شريط التنقل.

بذلك نكون صممنا داشبورد باستخدام رياكت بالصورة الاخيرة لة

Sharing to

Post Views: 706