Create a Custom Interactive dashboard using SVG
7 days ago
- #Dashboard
- #SVG
- #Infrastructure
- Author wanted a custom dashboard for monitoring self-hosted services, similar to Grafana Canvas.
- Initially considered designing the device model with CSS but realized it would be too time-consuming without frontend expertise.
- Consulted a fullstack developer, Adokshaj Bhandarkar, who suggested using SVG for the dashboard design.
- SVG allows for custom designs (e.g., router model) and easy DOM manipulation for real-time updates.
- Each SVG element can be targeted via unique IDs, with attributes like 'fill' color to represent statuses (e.g., red for shutdown, green for online).
- Proof of Concept (PoC) steps: Run server.js, open index.html, use chokidar to watch SVG files, and see real-time updates when editing mikrotik_plain.svg.