jonas
71803418e5
Shelly device management app with mDNS/subnet discovery, inventory, configuration, and mass operations for Gen1/Gen2+ devices. Includes .gitignore excluding runtime data (device DB, user config), AI conversation history, build artifacts, and common Python/OS patterns.
337 lines
11 KiB
Python
337 lines
11 KiB
Python
"""
|
|
Streamlit Element Explorer - Theme Demo
|
|
|
|
A comprehensive single-page app showcasing all major Streamlit components
|
|
with custom theming. Use this to preview how your theme looks across
|
|
different element types.
|
|
"""
|
|
|
|
import numpy as np
|
|
import pandas as pd
|
|
import streamlit as st
|
|
|
|
st.set_page_config(page_title="Element Explorer", page_icon="🎨", layout="wide")
|
|
|
|
# Initialize sample data in session state
|
|
if "chart_data" not in st.session_state:
|
|
np.random.seed(42)
|
|
st.session_state.chart_data = pd.DataFrame(
|
|
np.random.randn(20, 3), columns=["a", "b", "c"]
|
|
)
|
|
|
|
chart_data = st.session_state.chart_data
|
|
|
|
st.title("Streamlit Element Explorer")
|
|
st.markdown(
|
|
"Explore how Streamlit's built-in elements look with this theme. "
|
|
"Select a category below to preview different components."
|
|
)
|
|
|
|
# Navigation using segmented_control for better performance
|
|
section = st.segmented_control(
|
|
"Section",
|
|
["Widgets", "Data", "Charts", "Text", "Layouts", "Chat", "Status"],
|
|
default="Widgets",
|
|
label_visibility="collapsed",
|
|
)
|
|
|
|
st.divider()
|
|
|
|
# -----------------------------------------------------------------------------
|
|
# WIDGETS SECTION
|
|
# -----------------------------------------------------------------------------
|
|
if section == "Widgets":
|
|
st.header("Widgets")
|
|
|
|
# Buttons
|
|
st.subheader("Buttons")
|
|
cols = st.columns(4)
|
|
cols[0].button("Primary", type="primary")
|
|
cols[1].button("Secondary", type="secondary")
|
|
cols[2].button("Tertiary", type="tertiary")
|
|
cols[3].link_button("Link", url="https://streamlit.io", icon=":material/open_in_new:")
|
|
|
|
# Form
|
|
with st.form(key="demo_form"):
|
|
st.subheader("Form")
|
|
form_cols = st.columns(2)
|
|
form_cols[0].text_input("Name", placeholder="Enter your name")
|
|
form_cols[1].text_input("Email", placeholder="you@example.com")
|
|
st.form_submit_button("Submit", type="primary")
|
|
|
|
# Selection widgets
|
|
st.subheader("Selection Widgets")
|
|
sel_cols = st.columns(2)
|
|
|
|
with sel_cols[0]:
|
|
st.checkbox("Checkbox option")
|
|
st.toggle("Toggle switch")
|
|
st.selectbox("Selectbox", options=["Option A", "Option B", "Option C"])
|
|
st.multiselect("Multiselect", options=["Tag 1", "Tag 2", "Tag 3"], default=["Tag 1"])
|
|
|
|
with sel_cols[1]:
|
|
st.radio("Radio buttons", options=["Choice 1", "Choice 2", "Choice 3"], horizontal=True)
|
|
st.pills("Pills", options=["Small", "Medium", "Large"], default="Medium")
|
|
st.segmented_control("Segmented", options=["Day", "Week", "Month"], default="Week")
|
|
st.caption("Feedback widget")
|
|
st.feedback("stars")
|
|
|
|
# Numeric & Sliders
|
|
st.subheader("Numeric Inputs")
|
|
num_cols = st.columns(3)
|
|
num_cols[0].number_input("Number input", value=42)
|
|
num_cols[1].slider("Slider", 0, 100, 50)
|
|
num_cols[2].select_slider("Select slider", options=["XS", "S", "M", "L", "XL"], value="M")
|
|
|
|
# Date/Time
|
|
st.subheader("Date & Time")
|
|
dt_cols = st.columns(2)
|
|
dt_cols[0].date_input("Date input")
|
|
dt_cols[1].time_input("Time input")
|
|
|
|
# Text inputs
|
|
st.subheader("Text Inputs")
|
|
txt_cols = st.columns(2)
|
|
txt_cols[0].text_input("Text input", placeholder="Type something...")
|
|
txt_cols[1].text_area("Text area", placeholder="Longer text goes here...", height=100)
|
|
|
|
# File upload
|
|
st.subheader("File Upload")
|
|
st.file_uploader("Upload a file", type=["csv", "txt", "pdf"])
|
|
|
|
# -----------------------------------------------------------------------------
|
|
# DATA SECTION
|
|
# -----------------------------------------------------------------------------
|
|
elif section == "Data":
|
|
st.header("Data Display")
|
|
|
|
# Metrics
|
|
st.subheader("Metrics")
|
|
m_cols = st.columns(4)
|
|
m_cols[0].metric("Revenue", "$45,231", "+12.5%")
|
|
m_cols[1].metric("Users", "2,847", "+8.2%")
|
|
m_cols[2].metric("Conversion", "3.24%", "-0.4%", delta_color="inverse")
|
|
m_cols[3].metric("Avg. Session", "4m 32s", "+1.2%")
|
|
|
|
st.divider()
|
|
|
|
# Dataframe
|
|
st.subheader("Dataframe")
|
|
df = pd.DataFrame({
|
|
"Name": ["Alice", "Bob", "Charlie", "Diana", "Eve"],
|
|
"Department": ["Engineering", "Sales", "Marketing", "Engineering", "Sales"],
|
|
"Salary": [95000, 78000, 82000, 105000, 71000],
|
|
"Start Date": pd.date_range("2022-01-15", periods=5, freq="3M"),
|
|
"Active": [True, True, False, True, True],
|
|
})
|
|
st.dataframe(
|
|
df,
|
|
hide_index=True,
|
|
column_config={
|
|
"Salary": st.column_config.NumberColumn(format="$%d"),
|
|
"Start Date": st.column_config.DateColumn(format="MMM DD, YYYY"),
|
|
"Active": st.column_config.CheckboxColumn("Active?"),
|
|
},
|
|
)
|
|
|
|
# Table
|
|
st.subheader("Static Table")
|
|
st.table(chart_data.head(5))
|
|
|
|
# JSON
|
|
st.subheader("JSON Display")
|
|
st.json({"name": "Streamlit", "version": "1.41.0", "features": ["themes", "widgets", "charts"]})
|
|
|
|
# -----------------------------------------------------------------------------
|
|
# CHARTS SECTION
|
|
# -----------------------------------------------------------------------------
|
|
elif section == "Charts":
|
|
st.header("Charts")
|
|
|
|
chart_cols = st.columns(2)
|
|
|
|
with chart_cols[0]:
|
|
st.subheader("Line Chart")
|
|
st.line_chart(chart_data, height=250)
|
|
|
|
st.subheader("Bar Chart")
|
|
st.bar_chart(chart_data, height=250)
|
|
|
|
with chart_cols[1]:
|
|
st.subheader("Area Chart")
|
|
st.area_chart(chart_data, height=250)
|
|
|
|
st.subheader("Scatter Chart")
|
|
st.scatter_chart(chart_data, height=250)
|
|
|
|
# -----------------------------------------------------------------------------
|
|
# TEXT SECTION
|
|
# -----------------------------------------------------------------------------
|
|
elif section == "Text":
|
|
st.header("Text Elements")
|
|
|
|
# Headers
|
|
st.subheader("Headers")
|
|
st.title("Title Element")
|
|
st.header("Header Element")
|
|
st.subheader("Subheader Element")
|
|
st.caption("Caption text - smaller, muted")
|
|
|
|
st.divider()
|
|
|
|
# Markdown
|
|
st.subheader("Markdown Formatting")
|
|
st.markdown(
|
|
"**Bold text**, *italic text*, ~~strikethrough~~, "
|
|
"`inline code`, [link](https://streamlit.io)"
|
|
)
|
|
st.markdown("Math: $E = mc^2$ and $\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}$")
|
|
st.markdown("Emojis: 🚀 🎨 📊 ✨ and icons: :material/home: :material/settings:")
|
|
|
|
# Colored text
|
|
st.subheader("Colored Text")
|
|
color_cols = st.columns(3)
|
|
color_cols[0].markdown(":red[Red text] and :orange[Orange text]")
|
|
color_cols[1].markdown(":green[Green text] and :blue[Blue text]")
|
|
color_cols[2].markdown(":violet[Violet text] and :rainbow[Rainbow text]")
|
|
|
|
# Code blocks
|
|
st.subheader("Code Block")
|
|
st.code(
|
|
'''import streamlit as st
|
|
|
|
# Create a themed dashboard
|
|
st.set_page_config(page_title="My App", layout="wide")
|
|
st.title("Hello, Streamlit!")
|
|
|
|
# Display metrics
|
|
col1, col2 = st.columns(2)
|
|
col1.metric("Users", "1,234", "+5%")
|
|
col2.metric("Revenue", "$56K", "+12%")''',
|
|
language="python",
|
|
)
|
|
|
|
# -----------------------------------------------------------------------------
|
|
# LAYOUTS SECTION
|
|
# -----------------------------------------------------------------------------
|
|
elif section == "Layouts":
|
|
st.header("Layout Elements")
|
|
|
|
# Columns
|
|
st.subheader("Columns with Borders")
|
|
layout_cols = st.columns(3, border=True)
|
|
layout_cols[0].write("**Column 1**\n\nFirst column content")
|
|
layout_cols[1].write("**Column 2**\n\nSecond column content")
|
|
layout_cols[2].write("**Column 3**\n\nThird column content")
|
|
|
|
# Tabs
|
|
st.subheader("Tabs")
|
|
tab1, tab2, tab3 = st.tabs(["📈 Chart", "📋 Data", "⚙️ Settings"])
|
|
with tab1:
|
|
st.write("Chart tab content")
|
|
st.line_chart(chart_data["a"], height=150)
|
|
with tab2:
|
|
st.write("Data tab content")
|
|
st.dataframe(chart_data.head(3))
|
|
with tab3:
|
|
st.write("Settings tab content")
|
|
st.checkbox("Enable feature X")
|
|
st.checkbox("Enable feature Y", value=True)
|
|
|
|
# Expander
|
|
st.subheader("Expander")
|
|
with st.expander("Click to expand"):
|
|
st.write("This content is hidden by default.")
|
|
st.image("https://placehold.co/400x200/29B5E8/white?text=Expanded+Content")
|
|
|
|
# Popover
|
|
st.subheader("Popover")
|
|
pop_cols = st.columns(3)
|
|
with pop_cols[0].popover("Open popover", icon=":material/info:"):
|
|
st.write("Popover content here!")
|
|
st.slider("Popover slider", 0, 100, 50)
|
|
|
|
# Container
|
|
st.subheader("Container with Border")
|
|
with st.container(border=True):
|
|
st.write("**Bordered Container**")
|
|
st.write("Content inside a container with a visible border.")
|
|
st.button("Button inside container")
|
|
|
|
# -----------------------------------------------------------------------------
|
|
# CHAT SECTION
|
|
# -----------------------------------------------------------------------------
|
|
elif section == "Chat":
|
|
st.header("Chat Elements")
|
|
|
|
# Chat messages
|
|
st.subheader("Chat Messages")
|
|
with st.chat_message("user"):
|
|
st.write("Hello! How can I analyze my sales data?")
|
|
|
|
with st.chat_message("assistant"):
|
|
st.write("I can help you with that! Here are a few options:")
|
|
st.markdown("""
|
|
1. **Revenue trends** - View monthly/quarterly patterns
|
|
2. **Top products** - Identify best sellers
|
|
3. **Customer segments** - Analyze by region or category
|
|
""")
|
|
|
|
with st.chat_message("user"):
|
|
st.write("Show me the revenue trends please.")
|
|
|
|
with st.chat_message("assistant"):
|
|
st.write("Here's your revenue trend for the past 20 periods:")
|
|
st.line_chart(chart_data["a"], height=200)
|
|
|
|
# Chat input
|
|
st.chat_input("Type a message...")
|
|
|
|
# -----------------------------------------------------------------------------
|
|
# STATUS SECTION
|
|
# -----------------------------------------------------------------------------
|
|
elif section == "Status":
|
|
st.header("Status Elements")
|
|
|
|
# Alert messages
|
|
st.subheader("Alert Messages")
|
|
st.error("Error: Something went wrong with the data pipeline.")
|
|
st.warning("Warning: API rate limit approaching (80% used).")
|
|
st.info("Info: New features available in the latest release.")
|
|
st.success("Success: Data exported successfully to warehouse.")
|
|
|
|
# Exception
|
|
st.subheader("Exception Display")
|
|
try:
|
|
raise ValueError("This is an example exception for demonstration")
|
|
except ValueError as e:
|
|
st.exception(e)
|
|
|
|
# Interactive status
|
|
st.subheader("Interactive Status")
|
|
status_cols = st.columns(3)
|
|
if status_cols[0].button("Show Toast", icon=":material/notifications:"):
|
|
st.toast("This is a toast notification!", icon="🔔")
|
|
if status_cols[1].button("Balloons", icon=":material/celebration:"):
|
|
st.balloons()
|
|
if status_cols[2].button("Snow", icon=":material/ac_unit:"):
|
|
st.snow()
|
|
|
|
# Progress
|
|
st.subheader("Progress Indicators")
|
|
st.progress(0.7, text="70% complete")
|
|
with st.spinner("Loading..."):
|
|
st.write("Spinner is active (non-blocking in this demo)")
|
|
|
|
# -----------------------------------------------------------------------------
|
|
# SIDEBAR
|
|
# -----------------------------------------------------------------------------
|
|
with st.sidebar:
|
|
st.header("Settings")
|
|
st.selectbox("Time Period", ["Last 7 days", "Last 30 days", "Last 90 days", "All time"])
|
|
st.multiselect("Metrics", ["Revenue", "Users", "Sessions"], default=["Revenue", "Users"])
|
|
st.slider("Confidence threshold", 0.0, 1.0, 0.8)
|
|
st.divider()
|
|
st.caption("Element Explorer v1.0")
|
|
st.caption("Theme: **{{title}}**")
|