Tableaux de bord Streamlit

Composez des métriques, graphiques et données dans des mises en page de tableau de bord propres.

Cartes avec bordures

Utilisez border=True pour créer des cartes visuelles. Supporté sur st.container, st.metric, st.columns et st.form :

# Container card
with st.container(border=True):
    st.subheader("Sales Overview")
    st.line_chart(sales_data)

# Metric card
st.metric("Revenue", "$1.2M", "+12%", border=True)

# Column cards
for col in st.columns(3, border=True):
    with col:
        st.metric("Users", "1.2k")

Étiquettes de cartes

Ajoutez du contexte aux cartes avec des en-têtes ou du texte en gras :

# With subheader
with st.container(border=True):
    st.subheader("Monthly Trends")
    st.line_chart(data)

# With bold label
with st.container(border=True):
    st.markdown("**Top Products**")
    st.dataframe(top_products)

Lignes KPI

Utilisez des conteneurs horizontaux pour des lignes de métriques réactives :

with st.container(horizontal=True):
    st.metric("Revenue", "$1.2M", "-7%", border=True)
    st.metric("Users", "762k", "+12%", border=True)
    st.metric("Orders", "1.4k", "+5%", border=True)

Les conteneurs horizontaux s'adaptent sur les petits écrans. Préférez-les à st.columns pour les lignes de métriques.

Métriques avec sparklines

Ajoutez du contexte de tendance avec chart_data :

weekly_values = [700, 720, 715, 740, 762, 755, 780]

st.metric(
    "Active Users",
    "780k",
    "+3.2%",
    border=True,
    chart_data=weekly_values,
    chart_type="line",  # or "bar"
)

Les sparklines affichent uniquement les valeurs y—utilisez-les pour des données régulièrement espacées comme des instantanés quotidiens ou hebdomadaires.

Mise en page du tableau de bord

Combinez les cartes dans un tableau de bord :

# KPI row
with st.container(horizontal=True):
    st.metric("Revenue", "$1.2M", "-7%", border=True, chart_data=rev_trend, chart_type="line")
    st.metric("Users", "762k", "+12%", border=True, chart_data=user_trend, chart_type="line")
    st.metric("Orders", "1.4k", "+5%", border=True, chart_data=order_trend, chart_type="bar")

# Charts row
col1, col2 = st.columns(2)
with col1:
    with st.container(border=True):
        st.subheader("Revenue by Region")
        st.bar_chart(region_data, x="region", y="revenue")

with col2:
    with st.container(border=True):
        st.subheader("Monthly Trend")
        st.line_chart(monthly_data, x="month", y="value")

# Data table
with st.container(border=True):
    st.subheader("Recent Orders")
    st.dataframe(orders_df, hide_index=True)

Filtres de la barre latérale

Placez les filtres dans la barre latérale pour maximiser l'espace du tableau de bord :

with st.sidebar:
    date_range = st.date_input("Date range", value=(start, end))
    region = st.multiselect("Region", regions, default=regions)

# Main area is all dashboard content

Modèles de tableau de bord

Des modèles de tableau de bord prêts à l'emploi sont disponibles dans templates/apps/ :

Chaque modèle utilise des données synthétiques qui peuvent être remplacées par des requêtes réelles. Voir templates/apps/README.md pour les instructions de configuration.

Compétences associées

• using-streamlit-layouts : Colonnes, conteneurs, onglets, dialogues
• displaying-streamlit-data : Graphiques, dataframes, configuration de colonnes
• optimizing-streamlit-performance : Mise en cache et fragments pour les tableaux de bord lourds

Références

• st.container
• st.metric
• st.columns