CNC Machine Monitoring Dashboard

A comprehensive real-time monitoring dashboard for CNC machines built with React, Material-UI, and Recharts. Features dark/light mode, real-time data visualization, and interactive charts.

🚀 Features

• Real-time Monitoring: Live data updates every 5 seconds
• Interactive Dashboard: Multiple chart types including line charts, area charts, bar charts, and gauge charts
• Time-based Filtering: Filter data by time ranges (10min to 30 days)
• Dark/Light Mode: Toggle between themes with persistent settings
• Responsive Design: Works on desktop and mobile devices
• Machine Status Overview: Current status and distribution analysis
• Performance Metrics: Spindle speed, power consumption, temperature, vibration, and more

📊 Dashboard Components

Charts & Visualizations

• Summary Stats: Gauge charts for key metrics (Power, Spindle Speed, Servo Load, Temperature)
• Spindle Chart: Line chart showing spindle speed and feed rate
• Power Chart: Area chart comparing power consumption vs servo load
• Temperature Chart: Line chart for spindle temperature and vibration
• Coolant Chart: Bar chart for coolant system health
• Environmental Chart: Radar chart for environmental conditions
• Machine Status: Horizontal bar chart showing status distribution

Interactive Features

• Time Range Selector: Filter data by predefined time ranges
• Real-time Updates: Automatic data refresh every 5 seconds
• Theme Toggle: Switch between dark and light modes
• Responsive Grid: Adaptive layout for different screen sizes

🛠 Tech Stack

Frontend

• React 18 - UI framework
• Material-UI (MUI) - Component library
• Recharts - Charting library
• Axios - HTTP client
• React Router - Navigation

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• PostgreSQL - Database (Neon)
• CORS - Cross-origin resource sharing

📁 Project Structure

RealTime_data_simulater
├── .gitignore
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
│
├── simulator
│   ├── .env
│   ├── generator.py
│   └── requirements.txt
│
├── backend
│   ├── src
│   │   ├── routes
│   │   │   └── machines.js
│   │   ├── db.js
│   │   └── server.js
│   ├── .env
│   ├── .gitignore
│   ├── package-lock.json
│   └── package.json
│
└── frontend
    ├── public
    │   ├── elliot_logo.jpeg
    │   └── favicon.png
    ├── src
    │   ├── assets
    │   ├── components
    │   │   ├── charts
    │   │   │   ├── CoolantChart.jsx
    │   │   │   ├── EnvironmentalChart.jsx
    │   │   │   ├── GaugeChart.jsx
    │   │   │   ├── LineChartComponent.jsx
    │   │   │   ├── MachineStatusBarChart.jsx
    │   │   │   ├── PowerChart.jsx
    │   │   │   ├── ServoLoadChart.jsx
    │   │   │   ├── SpindleChart.jsx
    │   │   │   ├── SummaryStats.jsx
    │   │   │   └── TemperatureChart.jsx
    │   │   ├── MachineCard.jsx
    │   │   ├── MachinesGrid.jsx
    │   │   └── Navbar.jsx
    │   ├── data
    │   │   └── api.js
    │   ├── pages
    │   │   └── MachineDashboard.jsx
    │   └── theme
    │       ├── chartTheme.js
    │       └── theme.js
    ├── .env
    ├── .gitignore
    ├── eslint.config.js
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── README.md
    ├── tailwind.config.js
    └── vite.config.js

🚀 Quick Start

Prerequisites

• Node.js 16+
• PostgreSQL database (Neon)
• Python 3.8+ (for data simulation)

Installation

1. Clone the repository

git clone <repository-url>
cd cnc-monitoring-dashboard

2. Backend Setup

cd backend
npm install

Create .env file:

DATABASE_URL=your_neon_postgresql_connection_string
PORT=4000
CORS_ALLOWED_ORIGIN=http://localhost:5173
MACHINE_TABLE=machine_01

3. Frontend Setup

cd frontend
npm install

Create .env file:

VITE_BACKEND_URL=http://localhost:4000

4. Start the Application

# Terminal 1 - Backend
cd backend
npm start

# Terminal 2 - Frontend  
cd frontend
npm run dev

The application will be available at http://localhost:5173

🐍 Python Data Simulator

A Python script to generate realistic CNC machine data for testing and development.

Usage

cd backend
python data_simulator.py

Configuration

Edit data_simulator.py to adjust:

• Update interval (default: 2 seconds)
• Machine parameters (RPM ranges, temperature limits, etc.)
• Error simulation frequency and types
• Data patterns (cyclic behavior, trends)

Simulated Data Fields

The script generates realistic CNC machine data including:

• machine_id: Unique machine identifier
• spindle_speed_rpm: Spindle rotation speed (0-10,000 RPM)
• power_consumption_kw: Power usage (0-15 kW)
• spindle_temperature_c: Temperature monitoring (20-100°C)
• servo_motor_load_pct: Servo load percentage (0-100%)
• vibration_mm_s: Vibration levels
• coolant_flow_l_min: Coolant system flow rate
• machine_status: Current state (Running, Idle, Error, Maintenance)
• And 10+ additional metrics...

🎨 Customization

Theme Colors

Edit src/theme/theme.js to customize colors:

primary: '#FD6600', // Main orange
secondary: '#2E5AAC', // Complementary blue
success: '#10b981',
warning: '#f59e0b', 
error: '#ef4444',

Chart Configuration

Modify src/theme/chartTheme.js for chart-specific styling:

• Color schemes for different chart types
• Dark/light mode adaptations
• Threshold values for gauge charts

📈 API Endpoints

Backend API

• GET /api/health - Health check
• GET /api/machine/latest - Latest machine data
• GET /api/machine/history?limit=200 - Historical data

Query Parameters

• limit: Number of records (default: 200, max: 5000)
• from: Start timestamp (ISO format)
• to: End timestamp (ISO format)

🔧 Development

Adding New Charts

1. Create component in src/components/charts/
2. Import and add to MachineDashboard.jsx
3. Update data formatting as needed
4. Apply theme using getChartTheme(darkMode)

Adding New Metrics

1. Update PostgreSQL table schema
2. Modify Python simulator
3. Update API response handling
4. Create/update chart components

🐛 Troubleshooting

Common Issues

1. Backend Connection Refused

   • Ensure backend is running on port 4000
   • Check CORS configuration
   • Verify database connection

2. No Data Displayed

   • Run Python data simulator
   • Check browser console for errors
   • Verify API endpoints

3. Chart Display Issues

   • Check data formatting in chart components
   • Verify Recharts installation
   • Ensure proper responsive container usage

📄 License

MIT License - feel free to use this project for personal or commercial purposes.

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

📞 Support

For issues and questions:

1. Check troubleshooting section
2. Review API documentation
3. Create GitHub issue with detailed description

---

Note: This dashboard is designed for monitoring and demonstration purposes. For production use, ensure proper security measures, authentication, and data validation are implemented.