Build Nginx live traffic monitor

This commit is contained in:
Jordan Wages 2026-09-17 17:47:16 -05:00
commit fb66a69bd7
9 changed files with 525 additions and 2 deletions

View file

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="650" viewBox="0 0 1200 650">
<rect width="1200" height="650" fill="#f5f7fa"/>
<rect x="40" y="30" width="1120" height="55" rx="6" fill="#fff" stroke="#d9e1ea"/>
<text x="70" y="66" font-family="sans-serif" font-size="22" font-weight="bold" fill="#363636">Nginx Live Traffic</text>
<rect x="40" y="110" width="1120" height="110" rx="6" fill="#fff" stroke="#d9e1ea"/>
<text x="70" y="145" font-family="sans-serif" font-size="13" fill="#7a7a7a">INBOUND</text><text x="70" y="180" font-family="sans-serif" font-size="26" font-weight="bold" fill="#363636">3.8 Mbit/s</text>
<text x="320" y="145" font-family="sans-serif" font-size="13" fill="#7a7a7a">OUTBOUND</text><text x="320" y="180" font-family="sans-serif" font-size="26" font-weight="bold" fill="#363636">42.3 Mbit/s</text>
<text x="600" y="145" font-family="sans-serif" font-size="13" fill="#7a7a7a">REQUESTS</text><text x="600" y="180" font-family="sans-serif" font-size="26" font-weight="bold" fill="#363636">183/sec</text>
<text x="40" y="275" font-family="sans-serif" font-size="21" font-weight="bold" fill="#363636">Throughput</text>
<rect x="40" y="295" width="1120" height="250" rx="6" fill="#fff" stroke="#d9e1ea"/>
<polyline points="80,480 180,430 280,455 380,370 480,410 580,330 680,390 780,320 880,360 980,300 1080,340" fill="none" stroke="#3273dc" stroke-width="4"/>
<polyline points="80,510 180,500 280,490 380,470 480,480 580,430 680,450 780,410 880,440 980,400 1080,420" fill="none" stroke="#23d160" stroke-width="4"/>
<text x="40" y="610" font-family="sans-serif" font-size="16" fill="#7a7a7a">Screenshot placeholder — run the app to view live data.</text>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB