Adding graphs for better analytics

[yogeshnimangre007]

📊 Add Chart.js Visualizations to Server Monitoring UI

Overview

This PR enhances the server monitoring page with interactive, real-time data visualizations using Chart.js. The changes improve the monitoring experience by providing graphical representations of server metrics for easier trend analysis and system health monitoring.

Features Added

• Real-time visualization of server metrics using Chart.js
• Three distinct chart types displaying:
  • Server Activity: Request counts (total/successful/errors)
  • Memory Usage: Current and peak memory consumption
  • Upload Statistics: Upload counts and data volume
• Historical data tracking with time-series display
• Responsive chart layouts for all screen sizes
• Dark theme optimization for better readability
• Auto-refreshing data with animated transitions

Technical Implementation

• Added Chart.js integration via CDN (v3.9.1)
• Created data history collection system to track metrics over time
• Implemented chart initialization and update cycle
• Added responsive styling for chart containers
• Enhanced error handling for chart loading and data parsing
• Fixed URL paths for API endpoints to ensure proper data loading

UI/UX Improvements

• Clean card-based design for visualizing metrics
• Interactive charts with hover states for detailed information
• Clear loading states and fallback messages
• Consistent styling with the existing monitoring interface
• Optimized layout for both desktop and mobile viewing

Code Structure

• Enhanced script.js with chart initialization and update logic
• Added chart-specific styles to styles.css
• Updated content.html with chart container markup
• Modified templates.rs to include Chart.js in page rendering

Testing

• Verified chart rendering on multiple screen sizes
• Tested data collection and visualization with varying metrics
• Ensured proper error handling when data is unavailable
• Validated memory tracking functionality
• Tested auto-refresh capabilities

Screenshots

Future Improvements

• Add configuration options for refresh rate and data point history
• Implement data export functionality
• Add additional chart types for more detailed analysis
• Consider bundling Chart.js instead of using CDN for offline functionality