A comprehensive analysis of hard disk drive (HDD) performance during software build and publish operations, with interactive visualizations and practical recommendations for developers.
Visit the live dashboard: kusl.github.io/performancemetrics
This project analyzes real-world disk performance data collected during 21+ iterations of build/publish cycles on traditional hard disk storage. The dashboard provides insights into how HDD performance affects developer productivity and offers practical guidance for storage optimization.
- 📈 Interactive Performance Trends - Visualize queue length, throughput, and disk utilization over time
- 📊 Distribution Analysis - Understand performance patterns across multiple test runs
- 🔍 Correlation Analysis - Explore relationships between different performance metrics
- 📋 Summary Statistics - Key performance indicators and trends
- 💡 Educational Content - Friendly analysis of HDD vs SSD for development work
Our analysis reveals:
- Average build time: 15-17 minutes per cycle
- Disk utilization: 354% average (indicating severe bottlenecking)
- Throughput: 30.5 MB/s average, with improvement trends over time
- Performance stabilization: After approximately 10 iterations
- Frontend: React 18 with TypeScript
- Charts: Recharts library for interactive visualizations
- Styling: Tailwind CSS for responsive design
- Build Tool: Vite for fast development and building
- Deployment: GitHub Pages
- Node.js 18+
- Yarn or npm
-
Clone the repository
git clone https://github.com/kusl/performancemetrics.git cd performancemetrics -
Install dependencies
yarn install # or npm install -
Start development server
yarn dev # or npm run dev -
Open your browser Navigate to
http://localhost:5173
yarn build
# or
npm run buildThe built files will be in the dist directory.
performancemetrics/
├── src/
│ ├── components/
│ │ ├── DiskPerformanceDashboard.tsx # Main dashboard component
│ │ └── StorageAnalysisComponent.tsx # Educational analysis
│ ├── App.tsx # Main application
│ ├── main.tsx # Application entry point
│ └── App.css # Global styles
├── public/ # Static assets
├── .github/workflows/ # GitHub Actions for deployment
└── README.md # You are here!
The performance data was collected using PowerShell scripts that monitored:
- Average Disk Queue Length - Number of pending I/O operations
- Bytes Per Second - Disk throughput measurements
- Percent Disk Time - Percentage of time disk was busy
- System Statistics - Additional performance metrics
Data spans 21 primary test iterations plus additional validation runs, providing a comprehensive view of HDD performance patterns.
- Multiple Visualization Types: Line charts, bar charts, and scatter plots
- Responsive Design: Works on desktop, tablet, and mobile devices
- Tabbed Interface: Organized into logical sections for easy navigation
- Hover Tooltips: Detailed information on data points
- Non-Technical Explanations: Storage concepts explained in simple terms
- Practical Recommendations: Actionable advice for different budgets
- Cost-Benefit Analysis: Real-world impact calculations
- Expandable Sections: Progressive disclosure for different detail levels
This project is automatically deployed to GitHub Pages using GitHub Actions. The deployment workflow:
- Triggers on pushes to the
mainbranch - Installs dependencies and builds the project
- Deploys the
distfolder to thegh-pagesbranch - Makes the site available at the GitHub Pages URL
Contributions are welcome! Here are some ways you can help:
- 🐛 Report bugs or suggest improvements via issues
- 📊 Add more data analysis features or visualizations
- 🎨 Improve the UI/UX design and accessibility
- 📝 Enhance documentation or add more educational content
- 🔧 Optimize performance or add new features
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes with clear, descriptive commits
- Push to your branch (
git push origin feature/amazing-feature) - Open a Pull Request with a detailed description
- Large datasets may cause slight performance impact on older browsers
- Some chart animations may be reduced on mobile devices for performance
This project is open source and available under the MIT License.
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Add SSD performance comparison data
- Implement data export functionality
- Add more detailed system information display
- Create mobile-optimized chart layouts
- Add performance recommendations engine
- Implement dark mode theme
- Understanding Disk Performance Metrics
- HDD vs SSD Performance Analysis
- React Performance Best Practices
- Recharts Documentation
Built with ❤️ for the developer community