File size: 3,019 Bytes
359c749 8db7b4c 359c749 8db7b4c 359c749 8db7b4c 359c749 8db7b4c 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.
This function generates a styled markdown box displaying pollution level status, value, and other related information.
Parameters:
----------
label : str
The text label representing the type of pollution or metric.
value : str
The value of the pollution metric, typically a string that can be converted to a float.
delta : str
A string representing the change in pollution level, though not currently used in the rendering.
threshold : float
The threshold value to determine if the pollution level is "Good" or "Bad".
Returns:
-------
None
"""
# Determine if the pollution level is "Good" or "Bad"
status = "Good" if float(value.split()[0]) < threshold else "Bad"
status_color = "#77C124" if status == "Good" else "#E68B0A"
# 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> <!-- Bigger label -->
<p style="font-size: 36px; font-weight: bold; color: {status_color}; margin: 0;">{status}</p> <!-- Good/Bad with color -->
<p style="font-size: 18px; margin: 0;">{value}</p> <!-- Smaller value where delta used to be -->
</div>
""",
unsafe_allow_html=True,
)
|