common

Common UI components for rendering progress bars and stat cards.

render_stat_card

 render_stat_card (title_text:str, value_text:str, desc_text:str=None,
                   value_color:str=None)

Render a stat card with consistent styling.

	Type	Default	Details
title_text	str		The title text for the stat card
value_text	str		The main value to display in the stat card
desc_text	str	None	Optional description text below the value
value_color	str	None	Optional color class for the value text
Returns	FT		A Div element containing the stat card with consistent styling

from cjm_fasthtml_sysmon.monitors.system import get_static_system_info
info = get_static_system_info()
render_stat_card("System", f"{info['os']} {info['os_release']}", info['architecture'])

<div class="stat">
  <div class="stat-title text-xs text-base-content/60">System</div>
  <div class="stat-value text-2xl font-bold text-base-content">Linux 6.11.0-1018-azure</div>
  <div class="stat-desc text-xs text-base-content/50">x86_64</div>
</div>

source

render_progress_bar

 render_progress_bar (value:float, max_value:float=100, label:str=None)

Render a progress bar with label.

	Type	Default	Details
value	float		The current progress value
max_value	float	100	The maximum value for the progress bar (default: 100)
label	str	None	Optional label text to display above the progress bar
Returns	FT		A Div element containing the progress bar with optional label

render_progress_bar(10, 100, "Label")

<div>
  <div class="justify-between mb-2 flex">
<span class="text-sm font-medium text-base-content">Label</span><span class="text-xs text-base-content/70">10.0%</span>  </div>
<progress value="10" max="100" class="progress progress-success w-full h-2"></progress></div>