75 lines
3.1 KiB
Python
75 lines
3.1 KiB
Python
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:
|
|
def __init__(self, title: str, value: str, percentage: float, color: str, icon: str):
|
|
with ui.card().classes('metric-card p-4 text-center'):
|
|
with ui.column().classes('items-center gap-2'):
|
|
# Icon at top
|
|
ui.icon(icon, size='md', color=color)
|
|
|
|
# Title
|
|
ui.label(title).classes('text-sm text-grey-5 font-medium')
|
|
|
|
# Circular progress - simplified
|
|
ui.circular_progress(
|
|
value=percentage,
|
|
size='60px',
|
|
color=color
|
|
)
|
|
|
|
# Value
|
|
ui.label(value).classes('text-lg font-bold text-white')
|
|
|
|
|
|
class LargeMetricCircle:
|
|
def __init__(self, title: str, value: str, percentage: float, color: str):
|
|
with ui.card().classes('metric-card p-6 text-center'):
|
|
with ui.column().classes('items-center gap-3'):
|
|
# Title
|
|
ui.label(title).classes('text-sm text-grey-5 font-medium uppercase tracking-wide')
|
|
|
|
# Large circular progress - simplified
|
|
ui.circular_progress(
|
|
value=percentage,
|
|
size='120px',
|
|
color=color
|
|
)
|
|
|
|
# Value below
|
|
ui.label(f'{int(percentage * 100)}%').classes('text-2xl font-bold text-white')
|
|
ui.label(value).classes('text-xs text-grey-5')
|
|
|
|
|
|
class ColorfulMetricCard:
|
|
def __init__(self, title: str, icon: str, color: str):
|
|
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')
|