Add svg gauges

templates/apps_table.html

@@ -1,3 +1,29 @@
+<h2>Live usage</h2>
+<div style="display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 18px 0;">
+    {{ donut("CPU (containers)", data.gauges.cpu_total_pct, "Sum of container CPU%") }}
+    {{ donut("RAM (containers)", data.gauges.ram_pct, "Container RAM vs host total") }}
+    {{ donut("Docker images", data.gauges.docker_images_pct, "Used vs total image store") }}
+</div>
+
+{% macro donut(label, pct, subtitle) %}
+{% set r = 22 %}
+{% set c = 2 * 3.1415926 * r %}
+{% set dash = (pct / 100.0) * c %}
+<div style="border:1px solid #ddd; border-radius: 12px; padding: 12px; display:flex; gap: 12px; align-items:center;">
+    <svg width="64" height="64" viewBox="0 0 64 64" aria-label="{{ label }}">
+        <circle cx="32" cy="32" r="{{ r }}" fill="none" stroke="#eee" stroke-width="8" />
+        <circle cx="32" cy="32" r="{{ r }}" fill="none" stroke="#111" stroke-width="8" stroke-linecap="round"
+            stroke-dasharray="{{ dash }} {{ c - dash }}" transform="rotate(-90 32 32)" />
+        <text x="32" y="36" text-anchor="middle" font-size="14" font-family="system-ui" fill="#111">{{ pct|round(0)
+            }}%</text>
+    </svg>
+    <div>
+        <div style="font-weight:700;">{{ label }}</div>
+        <div class="muted">{{ subtitle }}</div>
+    </div>
+</div>
+{% endmacro %}
+
 <h2>System</h2>
 <div style="display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 18px 0;">
     <div style="border:1px solid #ddd; border-radius: 10px; padding: 12px;">
@@ -21,6 +47,7 @@
     </div>
 </div>
 
+
 <h3>Docker disk usage</h3>
 <table>
     <thead>