import streamlit as st
from st_screen_stats import ScreenData, WindowQueryHelper
import streamlit_highcharts as hchart
Get screen data
screenD = ScreenData(setTimeout=1000)
screen_d = screenD.st_screen_data()
Store screen width in session state
screen_width = screen_d.get(“width”, 1200) # Default to 1200px if not available
Helper to check screen width range (unique keys assigned)
helper_screen_stats = WindowQueryHelper()
is_mobile = helper_screen_stats.maximum_window_size(max_width=480, key=“max_width_480”)[“status”]
is_tablet = helper_screen_stats.window_range_width(min_width=481, max_width=768, key=“range_width_481_768”)[“status”]
is_laptop = helper_screen_stats.window_range_width(min_width=769, max_width=1024, key=“range_width_769_1024”)[“status”]
is_large_screen = helper_screen_stats.minimum_window_size(min_width=1025, key=“min_width_1025”)[“status”]
Define column layout based on screen size
if is_mobile:
kpi_columns = 1
chart_columns = 1
elif is_tablet:
kpi_columns = 3
chart_columns = 2
elif is_laptop:
kpi_columns = 4
chart_columns = 2
else:
kpi_columns = 6
chart_columns = 4
Dummy KPI data
kpi_data = [
(“Revenue”, “$120K”), (“Orders”, “450”), (“Customers”, “300”),
(“Profit”, “$30K”), (“Growth”, “15%”), (“Retention”, “80%”)
]
Dummy Chart Data
chart_options = {
“chart”: {“type”: “column”},
“title”: {“text”: “Sales Overview”},
“xAxis”: {“categories”: [“Jan”, “Feb”, “Mar”, “Apr”]},
“series”: [{“name”: “Sales”, “data”: [100, 200, 150, 300]}]
}
UI Styling
st.markdown(“”"
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background-color: #0f0f0f !important; color: #00ffaa; font-family: ‘Poppins’, sans-serif; }
.title { font-size: 25px; font-weight: bold; text-align: center; border-bottom: 2px solid #00ffaa; padding: 10px; }
.row { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10px; }
.card { background: #0f0f0f; border: 2px solid #00ffaa; box-shadow: 0 0 10px #00ffaa; padding: 10px; border-radius: 8px; text-align: center; flex: 1; margin: 5px; }
“”", unsafe_allow_html=True)
Title
st.markdown(‘
Dashboard
’, unsafe_allow_html=True)
KPI Container (Row 1)
st.markdown(‘
’, unsafe_allow_html=True)
cols = st.columns(kpi_columns)
for i in range(kpi_columns):
with cols[i]:
if i < len(kpi_data):
name, value = kpi_data[i]
st.markdown(f’
{name}
{value}
‘, unsafe_allow_html=True)
st.markdown(’
', unsafe_allow_html=True)
Row 2 - Charts
st.markdown(‘
’, unsafe_allow_html=True)
cols = st.columns(chart_columns)
for i in range(chart_columns):
with cols[i]:
hchart.streamlit_highcharts(chart_options, key=f"chart_row2_{i}")
st.markdown(‘
’, unsafe_allow_html=True)
Row 3 - Charts
st.markdown(‘
’, unsafe_allow_html=True)
cols = st.columns(chart_columns)
for i in range(chart_columns):
with cols[i]:
hchart.streamlit_highcharts(chart_options, key=f"chart_row3_{i}")
st.markdown(‘
’, unsafe_allow_html=True)
I used it so that the media query gets applied to my streamlit code. But the problem is that I have row1 containing 6 columns. I want my dashboard to have a responsive grid like format so that if I change the screen size the columns inside my row1 get shifted to the next row. For example if it is a laptop then6 column in one row, if tablet then 3 in one horizontal row the rest3 gets to the next row , if mobile then one column in one row only.
how can we achieve using this?