This project is a customizable dashboard built using ReactJS, React ApexCharts, React Toastify, and RSuite. It provides real-time computer data visualization such as RAM usage, CPU usage, and more. The backend is developed using .NET 3.1 and SignalR for communication between the frontend and backend.
- Drag and drop functionality to resize, move, remove, and add new charts according to your preference.
- Real-time visualization of computer data such as RAM and CPU usage.
- Save and reset feature to persist and restore the dashboard layout.
- Responsive design for optimal viewing experience on different devices.
- ReactJS
- React ApexCharts: A wrapper for ApexCharts to create interactive and visually appealing charts.
- React Toastify: A notification library for displaying messages and alerts.
- RSuite: A suite of React components for building a responsive and customizable UI.
- .NET 3.1: Backend framework for handling data retrieval and processing.
- SignalR: A library for real-time communication between the frontend and backend.
- gRPC: A high-performance, open-source framework for remote procedure calls.
To run this project locally, follow these steps:
-
Clone the repository from GitHub:
git clone https://github.com/berykay/Dashboard
-
Go to the frontend directory.
-
Install the required dependencies using npm:
npm install
-
Start the development server:
npm run start
The project should now be running on http://localhost:3000.
To configure the gRPC connection, follow these steps:
-
Go to the frontend directory.
-
Go to the proto file
cd src\components\graph\proto
-
Run the gRPC
python .\RouteGuideServicer.py
To configure the backend and SignalR connection, follow these steps:
-
Open the
backend/SignalRChatdirectory. -
Start backend
dotnet run
-
Upon accessing the dashboard, you will see a default set of charts displaying computer data.
-
To customize the dashboard, you can perform the following actions:
- Drag and drop charts to rearrange their positions.
- Resize charts by dragging their edges.
- Remove a chart by clicking on the close button.
- Add new charts by selecting from the available options.
-
The dashboard will automatically update the displayed data in real-time.
-
Use the save feature to persist the dashboard layout. The saved layout can be restored using the reset feature.
-
The dashboard is responsive and will adapt to different screen sizes for optimal viewing experience.
This project is licensed under the MIT License.