9bcf53b766
- Beautiful responsive dashboard (index.html) - 6 interactive Chart.js visualizations - Project cards with key metrics - Purple/blue gradient design - Mobile-friendly layout - Ready for GitHub Pages deployment
63 lines
1.6 KiB
Markdown
63 lines
1.6 KiB
Markdown
# BlackRoad OS Metrics Dashboard
|
|
|
|
Beautiful, interactive visualization of all 294 KPIs.
|
|
|
|
## View Live
|
|
|
|
**GitHub Pages:** https://blackroad-os.github.io/blackroad-os-metrics/dashboards/
|
|
|
|
**Local Preview:**
|
|
```bash
|
|
cd dashboards
|
|
python3 -m http.server 8000
|
|
# Open http://localhost:8000
|
|
```
|
|
|
|
## Features
|
|
|
|
- **Real-time metrics** from JSON data files
|
|
- **Interactive charts** using Chart.js
|
|
- **Responsive design** for mobile/desktop
|
|
- **Auto-updates** when data changes
|
|
- **Beautiful gradients** and animations
|
|
|
|
## Charts Included
|
|
|
|
1. **Language Distribution** - Doughnut chart of code by language
|
|
2. **Infrastructure Overview** - Bar chart of cloud resources
|
|
3. **Engineering Performance** - Radar chart of performance scores
|
|
4. **Deployment Success** - Line chart showing trends
|
|
5. **Security & Compliance** - Bar chart of security metrics
|
|
6. **Project Cards** - Featured projects with key metrics
|
|
|
|
## Customization
|
|
|
|
Edit `index.html` to:
|
|
- Change colors (currently purple/blue gradient)
|
|
- Add/remove charts
|
|
- Modify data sources
|
|
- Adjust layout
|
|
|
|
## Data Sources
|
|
|
|
All data loaded from JSON files:
|
|
- `../kpis.json` - 294 KPIs across all categories
|
|
- `../projects.json` - 10 project examples
|
|
- `../infrastructure.json` - Infrastructure inventory
|
|
- `../resume-data.json` - Personal metrics
|
|
|
|
## Embed in Your Site
|
|
|
|
```html
|
|
<iframe src="https://blackroad-os.github.io/blackroad-os-metrics/dashboards/"
|
|
width="100%" height="800px" frameborder="0"></iframe>
|
|
```
|
|
|
|
## Screenshots
|
|
|
|
|
|
|
|
---
|
|
|
|
**Auto-Generated by BlackRoad OS Metrics System**
|