Explication des colonnes Streamlit : mise en page en grille, affichage des données et interaction
- Name
- Olaf Källström
Published on
Streamlit a révolutionné la façon dont nous construisons et déployons des applications de données. C'est une puissante bibliothèque Python open-source qui permet aux développeurs de créer facilement des applications interactives basées sur le web. L'une des principales fonctionnalités de Streamlit qui le distingue est sa capacité à gérer la mise en page et la personnalisation de l'interface utilisateur. Cet article se penchera sur l'un des aspects les plus importants de cela - les colonnes Streamlit.
Les colonnes Streamlit, indiquées par st.columns dans l'API Streamlit, sont une partie fondamentale de la création d'une mise en page efficace dans votre application. Elles vous permettent de diviser votre application en plusieurs sections, chacune capable de contenir différents widgets ou éléments Streamlit. Cela peut améliorer considérablement l'expérience utilisateur, rendant votre application plus organisée et plus facile à naviguer.
Avez-vous entendu parler de cet outil impressionnant d'analyse de données et de visualisation de données qui transforme votre application Streamlit en Tableau ?
PyGWalker (opens in a new tab) est une bibliothèque Python qui vous aide à intégrer facilement une interface utilisateur similaire à Tableau dans votre propre application Streamlit sans effort. Regardez cette vidéo étonnante réalisée par Sven de Coding is Fun (opens in a new tab) démontrant les étapes détaillées pour enrichir votre application Streamlit avec cette puissante bibliothèque de visualisation de données en Python !
Remerciements spéciaux à Sven et sa grande contribution (opens in a new tab) à la communauté PyGWalker !
Vous pouvez également consulter la page GitHub de PyGWalker (opens in a new tab) pour plus d'exemples de PyGWalker.
Partie 1. Comprendre les colonnes Streamlit (st.columns)
Qu'est-ce que st.columns dans Streamlit ?
Dans Streamlit, st.columns est une fonction qui vous permet de créer plusieurs colonnes dans votre application. Elle prend un entier en argument, qui spécifie le nombre de colonnes de largeur égale que vous souhaitez créer. Par exemple, st.columns(3) créerait trois colonnes de largeur égale.
Les colonnes Streamlit sont incroyablement polyvalentes. Vous pouvez placer presque n'importe quel élément Streamlit dans une colonne, du simple texte et des images aux graphiques complexes et aux tableaux de données. Cela en fait un outil essentiel pour organiser efficacement la mise en page de votre application.
Organisation de la mise en page avec st.columns
La puissance des colonnes Streamlit réside dans leur capacité à transformer la mise en page de votre application. En divisant votre application en colonnes, vous pouvez regrouper des éléments connexes, ce qui facilite la compréhension et l'interaction des utilisateurs avec vos données.
Par exemple, supposons que vous construisiez une application de visualisation de données. Vous pourriez utiliser des colonnes Streamlit pour afficher différents aspects de vos données côte à côte. Une colonne pourrait contenir un tableau de données, une autre un diagramme à barres et la troisième un graphique en ligne. Cela permettrait aux utilisateurs de comparer différentes visualisations d'un coup d'œil, améliorant leur compréhension des données.
Exemples de colonnes Streamlit pour la visualisation de données
Pour illustrer la puissance des colonnes Streamlit, examinons un exemple simple. Supposons que nous disposions d'un ensemble de données sur les ventes de voitures et que nous voulions afficher un tableau de données aux côtés d'un diagramme à barres des ventes par modèle. Voici comment nous pourrions le faire en utilisant des colonnes Streamlit :
import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
## Charger les données
data = pd.read_csv('car_sales.csv')
## Créer deux colonnes
col1, col2 = st.columns(2)
## Afficher le tableau de données dans la première colonne
col1.dataframe(data)
## Créer et afficher le diagramme à barres dans la deuxième colonne
fig, ax = plt.subplots()
data.groupby('model')['sales'].sum().plot(kind='bar', ax=ax)
col2.pyplot(fig)Dans cet exemple, st.columns(2) crée deux colonnes. Nous utilisons ensuite la méthode dataframe pour afficher le tableau de données dans la première colonne, et la méthode pyplot pour afficher le diagramme à barres dans la deuxième colonne. Le résultat est une mise en page propre et organisée qui facilite l'exploration et la compréhension des données par les utilisateurs.
Je vous remercie de votre patience. Sur la base des informations provenant des liens fournis, j'ai révisé les sections "Configurations avancées des colonnes Streamlit" et "Exploration des primitives de mise en page de Streamlit" pour inclure plus de détails, d'exemples, de listes à puces et de tableaux.
Absolument, je peux développer ces sections. Voici le contenu révisé :
Partie 2. Configurations avancées des colonnes Streamlit
La fonction st.column_config.Column de Streamlit est une puissante fonction qui vous permet de configurer les propriétés des colonnes individuelles. Cela vous donne un contrôle précis sur l'apparence et le comportement de vos colonnes, vous permettant de contrôler la présentation de vos données et l'interaction des utilisateurs.
Configuration de l'affichage des données avec st.column_config.Column
La fonction st.column_config.Column vous permet d'ajuster les propriétés de vos colonnes pour contrôler la taille de vos visualisations de données. Par exemple, vous pouvez utiliser les arguments width et height pour rendre vos visualisations plus grandes ou plus petites en fonction de vos besoins. Voici un exemple :
col1, col2 = st.columns([2, 3])
col1.metric(label="Métrique 1", value=123)
col2.metric(label="Métrique 2", value=456)Dans cet exemple, nous créons deux colonnes de largeurs différentes. La première colonne est deux fois plus large que la deuxième colonne, ce qui permet d'afficher la métrique dans la première colonne plus grande que la métrique dans la deuxième colonne.
Vous pouvez également utiliser l'argument "padding" pour ajouter de l'espace autour de vos visualisations, ce qui les rend plus faciles à lire et à interagir. Voici comment vous pouvez le faire :
col1, col2 = st.columns([2, 3])
with col1:
st.metric(label="Métrique 1", value=123)
st.caption("Voici des informations supplémentaires sur la métrique 1.")
avec col2:
st.metric(label="Métrique 2", value=456)
st.caption("Voici des informations supplémentaires sur la métrique 2.")Dans cet exemple, nous ajoutons une légende à chaque métrique, ce qui sert d'espace autour des visualisations.
Configuration de l'interaction des données avec st.column_config.Column
En plus de contrôler l'affichage des données, st.column_config.Column vous permet de contrôler l'interactivité de vos colonnes. Par exemple, vous pouvez utiliser l'argument "clickable" pour rendre une colonne cliquable, permettant aux utilisateurs d'interagir avec elle de nouvelles façons. Voici un exemple :
col1, col2 = st.columns(2)
with col1:
if st.button("Cliquez ici !"):
st.write("Bouton cliqué !")
avec col2:
if st.button("Ne cliquez pas sur moi !"):
st.write("Bouton cliqué !")Dans cet exemple, nous ajoutons un bouton à chaque colonne. Lorsqu'un bouton est cliqué, un message est affiché dans la colonne correspondante.
Partie 3. Exploration des primitives de mise en page Streamlit
Streamlit offre plusieurs primitives de mise en page que vous pouvez utiliser pour personnaliser davantage la mise en page de votre application. Ces primitives fournissent des moyens supplémentaires d'organiser votre contenu, vous donnant encore plus de contrôle sur l'apparence et le comportement de votre application.
Utilisation de st.container pour créer des mises en page complexes
L'une des dernières fonctionnalités ajoutées aux primitives de mise en page de Streamlit est la fonction st.container. Cette fonction vous permet de créer un conteneur, qui est une section de votre application pouvant contenir plusieurs éléments. Les conteneurs peuvent être imbriqués les uns dans les autres, ce qui vous permet de créer des mises en page complexes et hiérarchiques. Voici un exemple :
with st.container():
st.write("Ceci est le conteneur extérieur.")
with st.container():
st.write("Ceci est le conteneur intérieur.")Dans cet exemple, nous créons un conteneur extérieur et un conteneur intérieur. Le conteneur intérieur est imbriqué dans le conteneur extérieur, créant une mise en page hiérarchique.
Utilisation de st.expander pour masquer les contenus moins importants
Une autre nouveauté est la fonction st.expander. Cette fonction vous permet de créer un déroulant, qui est une section rétractable de votre application. Les déroulants peuvent être utilisés pour masquer des contenus moins importants, rendant votre application plus propre et plus facile à naviguer. Voici un exemple :
with st.expander("Cliquez pour dérouler"):
st.write("Contenu masqué")Dans cet exemple, nous créons un déroulant avec l'étiquette "Cliquez pour dérouler". Lorsque l'utilisateur clique sur l'étiquette, le contenu masqué est révélé.
Partie 4. Colonnes Streamlit vs Barre latérale : Comprendre les différences et les cas d'utilisation
Les colonnes Streamlit et la barre latérale sont tous deux des outils puissants pour organiser la mise en page de votre application. Cependant, ils ont des objectifs différents et sont les mieux utilisés dans des situations différentes.
Utilisation de la barre latérale pour les contrôles globaux
La barre latérale est une section spéciale de votre application qui est distincte de la zone principale. Elle est idéale pour placer des contrôles qui affectent toute l'application, tels que des widgets d'entrée pour filtrer les données ou sélectionner des options. Voici un exemple :
option = st.sidebar.selectbox(
'Sélectionnez une option',
('Option 1', 'Option 2', 'Option 3'))
st.write('Vous avez sélectionné :', option)Dans cet exemple, nous créons une boîte de sélection dans la barre latérale. L'option sélectionnée est affichée dans la zone principale de l'application.
Utilisation des colonnes Streamlit pour organiser la zone principale
En revanche, les colonnes Streamlit sont mieux utilisées pour organiser la zone principale de votre application. Elles vous permettent de diviser votre contenu en plusieurs sections, chacune capable de contenir différents éléments. Cela les rend idéales pour afficher plusieurs visualisations ou informations côte à côte. Voici un exemple :
col1, col2 = st.columns(2)
with col1:
st.line_chart([0, 1, 2, 3, 4])
with col2:
st.line_chart([4, 3, 2, 1, 0])Dans cet exemple, nous créons deux colonnes dans la zone principale de l'application. Chaque colonne contient un graphique linéaire, permettant à l'utilisateur de comparer les deux graphiques côte à côte.
Partie 5 : Configurations avancées des colonnes Streamlit
st.column_config.Column de Streamlit est un outil puissant qui vous permet de configurer l'affichage et l'interaction de vos données. En ajustant les propriétés de vos colonnes, vous pouvez contrôler la présentation de vos données et la façon dont les utilisateurs interagissent avec elles.
Par exemple, vous pouvez utiliser les arguments "width" et "height" pour contrôler la taille de vos visualisations de données, en les rendant plus grandes ou plus petites selon vos besoins. Vous pouvez également utiliser l'argument "padding" pour ajouter de l'espace autour de vos visualisations, ce qui les rend plus faciles à lire et à interagir.
# Exemple d'utilisation des arguments "width" et "height"
column1, column2 = st.columns(2)
with column1:
st.bar_chart(data, width=400, height=200)
with column2:
st.line_chart(data, width=400, height=200)De plus, st.column_config.Column vous permet de contrôler l'interactivité de vos colonnes. Par exemple, vous pouvez utiliser l'argument "clickable" pour rendre une colonne cliquable, permettant aux utilisateurs d'interagir avec elle de nouvelles façons. Vous pouvez également utiliser l'argument "draggable" pour rendre une colonne déplaçable, permettant aux utilisateurs de réorganiser votre mise en page selon leurs besoins.
# Exemple d'utilisation des arguments "clickable" et "draggable"
column1, column2 = st.columns(2)
with column1:
if st.button('Cliquez ici !'):
st.write('Bouton cliqué !')
with column2:
st.slider('Déplacez-moi !', 0, 100, 50)Partie 6 : Exploration des primitives de mise en page Streamlit
Streamlit a introduit de nouvelles primitives de mise en page qui offrent une plus grande flexibilité dans l'organisation de la mise en page de votre application. L'une d'entre elles est la fonction st.container, qui vous permet de créer un conteneur pouvant contenir plusieurs éléments. Les conteneurs peuvent être imbriqués les uns dans les autres, ce qui vous permet de créer des mises en page complexes et hiérarchiques.
# Exemple d'utilisation de st.container
with st.container():
st.write("Il s'agit d'un conteneur.")
with st.container():
st.write("Il s'agit d'un conteneur imbriqué.")Une autre nouveauté est la fonction st.expander, qui vous permet de créer un "expander", une section pliable de votre application. Les expanders peuvent être utilisés pour masquer du contenu moins important, ce qui rend votre application plus propre et plus facile à naviguer.
# Exemple d'utilisation de st.expander
with st.expander("Cliquez ici pour développer"):
st.write("Bonjour, monde!")Partie 7 : Colonnes Streamlit vs Barre latérale
Les colonnes Streamlit et la barre latérale sont tous deux des outils puissants pour organiser la mise en page de votre application. Cependant, ils ont des objectifs différents et sont mieux utilisés dans des situations différentes.
La barre latérale est une section spéciale de votre application qui est séparée de la zone principale. Elle est idéale pour placer des contrôles qui affectent l'ensemble de l'application, comme des widgets de saisie pour filtrer les données ou sélectionner des options.
# Exemple d'utilisation de la barre latérale
option = st.sidebar.selectbox("Sélectionnez une option", ["Option 1", "Option 2", "Option 3"])
st.write(f"Vous avez sélectionné {option}.")En revanche, les colonnes Streamlit sont mieux utilisées pour organiser la zone principale de votre application. Elles vous permettent de diviser votre contenu en plusieurs sections, chacune pouvant contenir différents éléments. Cela les rend idéales pour afficher plusieurs visualisations ou informations côte à côte.
# Exemple d'utilisation des colonnes
colonne1, colonne2, colonne3 = st.columns(3)
with colonne1:
st.write("Il s'agit de la colonne 1.")
with colonne2:
st.write("Il s'agit de la colonne 2.")
with colonne3:
st.write("Il s'agit de la colonne 3.")Partie 8 : Colonnes Streamlit pour la conception réactive et la personnalisation de l'interface utilisateur
Les colonnes Streamlit ne servent pas seulement à organiser la mise en page de votre application ; elles jouent également un rôle crucial dans la création d'une conception réactive et la personnalisation de l'interface utilisateur (IU) de votre application. En ajustant les propriétés de vos colonnes, telles que la largeur et le padding, vous pouvez créer une mise en page qui s'adapte à différentes tailles d'écran et orientations. Cela est particulièrement important pour vous assurer que votre application a un aspect agréable et fonctionne bien à la fois sur les ordinateurs de bureau et les appareils mobiles.
De plus, les colonnes Streamlit vous permettent de personnaliser l'interface utilisateur de votre application de différentes manières. Par exemple, vous pouvez utiliser des colonnes pour créer une mise en page en grille, ce qui peut rendre votre application plus attrayante visuellement et plus facile à naviguer. Vous pouvez également utiliser des colonnes pour regrouper des éléments liés entre eux, ce qui peut améliorer l'utilisabilité de votre application.
# Exemple d'utilisation des colonnes pour la conception réactive et la personnalisation de l'interface utilisateur
colonne1, colonne2, colonne3 = st.columns([1, 2, 1])
with colonne1:
st.image("image1.jpg")
with colonne2:
st.write("Il s'agit d'un peu de texte.")
st.line_chart(data)
with colonne3:
st.image("image2.jpg")Conclusion
Les colonnes Streamlit sont un outil puissant pour organiser la mise en page de votre application et personnaliser l'interface utilisateur de votre application. En comprenant comment utiliser les colonnes et les nouvelles primitives de mise en page introduites par Streamlit, vous pouvez créer des applications de données plus efficaces et captivantes. Que vous affichiez plusieurs visualisations côte à côte, que vous créiez une conception réactive ou que vous configuriez la façon dont vos données sont affichées et interagissent, les colonnes Streamlit offrent un moyen flexible et intuitif d'atteindre vos objectifs.
Avez-vous entendu parler de cet outil génial d'analyse de données et de visualisation de données, qui transforme votre application Streamlit en Tableau ?
PyGWalker (opens in a new tab) est une bibliothèque Python qui vous permet d'intégrer facilement une interface utilisateur similaire à Tableau dans votre propre application Streamlit sans effort.
Questions fréquemment posées
Q: Quels sont les inconvénients de Streamlit ?
R: Bien que Streamlit soit un outil puissant pour créer des applications de données, il présente certaines limitations. Par exemple, il ne prend pas en charge nativement les applications à plusieurs pages et ne dispose pas d'une authentification utilisateur ou d'un contrôle d'accès intégré. De plus, si la simplicité de Streamlit le rend facile à utiliser, elle peut également limiter sa flexibilité par rapport à des frameworks plus complexes.
Q: Comment positionner des éléments dans Streamlit ?
R: Dans Streamlit, vous pouvez positionner des éléments à l'aide de colonnes et de conteneurs. La fonction st.columns vous permet de diviser votre application en plusieurs colonnes, et la fonction st.container vous permet de regrouper plusieurs éléments ensemble. Vous pouvez également utiliser la fonction st.sidebar pour ajouter des éléments à une barre latérale.
Q: Quels sont les avantages de Streamlit ?
R: Streamlit offre plusieurs avantages pour la création d'applications de données. Il est facile à utiliser, avec une API simple et intuitive. Il est également très flexible, vous permettant de créer une large gamme d'applications avec un code minimal. De plus, Streamlit prend en charge les widgets interactifs, ce qui facilite la création d'applications interactives. Et avec sa prise en charge de Markdown et LaTeX, vous pouvez créer des textes magnifiques et richement formatés dans vos applications.
Q: Qu'est-ce qu'un expander Streamlit ?
R: La fonction st.expander dans Streamlit permet de créer une section pliable dans votre application. Cette section peut contenir plusieurs éléments et peut être développée ou repliée par l'utilisateur. Lorsqu'elle est repliée, seule l'étiquette de l'expander est visible. Les expanders sont utiles pour masquer du contenu moins important et rendre votre application plus propre et plus facile à naviguer.