stuff

src/components/circular_progress.py

@@ -1,4 +1,29 @@
 from nicegui import ui
+from utils import SystemMonitor, GPUMonitor
+from typing import Optional, Literal
+
+
+class MetricCircleAdv:
+    def __init__(self, label: str, monitor: SystemMonitor | GPUMonitor,
+                 target_value: str,
+                 target_max_value: str,
+                 color: str,
+                 formatting: Literal['percent', 'units', 'degree'],
+                 icon: Optional[str] = None):
+        with ui.card().classes('metric-card p-4 text-center'):
+            with ui.column().classes('items-center gap-2'):
+                # Icon at top
+                with ui.row().classes('items-center gap-1'):
+                    if icon:
+                        ui.icon(icon, size='sm', color=color)
+
+                    # Title
+                    ui.label(label).classes('text-sm text-grey-5 font-medium')
+
+                # Circular progress - simplified
+                with ui.circular_progress(size='60px', color=color, show_value=False).bind_value_from(monitor, target_value):
+                    if formatting == 'percent':
+                        ui.label().classes('text-lg font-bold text-white').bind_text_from(monitor, target_value, backward=lambda x: f"{int(x * 100)} %")
 
 
 class MetricCircle:
@@ -46,4 +71,4 @@ class ColorfulMetricCard:
         with ui.card().classes(f'p-4 text-center animate-fade-in').style(f'background: linear-gradient(135deg, {color}20 0%, {color}10 100%); border: 1px solid {color}40'):
             with ui.column().classes('items-center gap-2'):
                 ui.icon(icon, size='xl').style(f'color: {color}')
-                ui.label(title).classes('text-sm font-medium text-white')
+                ui.label(title).classes('text-sm font-medium text-white')