File size: 2,815 Bytes
359c749 8db7b4c 359c749 8db7b4c a167418 8db7b4c a167418 8db7b4c a167418 8db7b4c a167418 359c749 8db7b4c 359c749 a167418 359c749 8db7b4c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
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])
# Determine status and color based on the same logic as get_simple_color_scale
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"
# Render the pollution box
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,
)
|