|
|
import streamlit as st |
|
|
|
|
|
|
|
|
def custom_metric_box(label: str, value: str) -> None: |
|
|
""" |
|
|
Create a styled metric box with a compact layout. |
|
|
|
|
|
This function generates a styled markdown box displaying a label and its corresponding value. |
|
|
|
|
|
Parameters: |
|
|
---------- |
|
|
label : str |
|
|
The text label to display in the metric box. |
|
|
|
|
|
value : str |
|
|
The value to be displayed in the metric box, typically representing a metric. |
|
|
|
|
|
Returns: |
|
|
------- |
|
|
None |
|
|
""" |
|
|
st.markdown( |
|
|
f""" |
|
|
<div style=" |
|
|
padding: 5px; |
|
|
margin-bottom: 5px; |
|
|
width: 100%; /* Full width */ |
|
|
display: flex; |
|
|
flex-direction: column; /* Align items vertically */ |
|
|
align-items: flex-start; /* Align all content to the left */ |
|
|
"> |
|
|
<div> |
|
|
<h4 style="font-size: 14px; font-weight: normal; margin: 0;">{label}</h4> <!-- Smaller label --> |
|
|
</div> |
|
|
<div> |
|
|
<p style="font-size: 18px; font-weight: bold; margin: 0;">{value}</p> <!-- Smaller metric --> |
|
|
</div> |
|
|
</div> |
|
|
""", |
|
|
unsafe_allow_html=True, |
|
|
) |
|
|
|
|
|
|
|
|
def pollution_box(label: str, value: str, delta: str, threshold: float) -> None: |
|
|
""" |
|
|
Create a pollution metric box with a side-by-side layout and fixed width. |
|
|
|
|
|
Parameters: |
|
|
---------- |
|
|
label : str |
|
|
The text label representing the type of pollution or metric. |
|
|
value : str |
|
|
The value of the pollution metric. |
|
|
delta : str |
|
|
The change in pollution level. |
|
|
threshold : float |
|
|
The threshold value to determine pollution level status. |
|
|
""" |
|
|
current_value = float(value.split()[0]) |
|
|
|
|
|
|
|
|
if current_value < threshold: |
|
|
status = "Good" |
|
|
status_color = "#77C124" |
|
|
elif current_value < 2 * threshold: |
|
|
status = "Medium" |
|
|
status_color = "#E68B0A" |
|
|
else: |
|
|
status = "Bad" |
|
|
status_color = "#E63946" |
|
|
|
|
|
|
|
|
st.markdown( |
|
|
f""" |
|
|
<div style=" |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border-radius: 16px; |
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); |
|
|
backdrop-filter: blur(5px); |
|
|
-webkit-backdrop-filter: blur(5px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.15); |
|
|
padding: 15px; |
|
|
margin-bottom: 10px; |
|
|
"> |
|
|
<h4 style="font-size: 24px; font-weight: bold; margin: 0;">{label}</h4> |
|
|
<p style="font-size: 36px; font-weight: bold; color: {status_color}; margin: 0;">{status}</p> |
|
|
<p style="font-size: 18px; margin: 0;">{value}</p> |
|
|
</div> |
|
|
""", |
|
|
unsafe_allow_html=True, |
|
|
) |
|
|
|
