【実践チャレンジその3】

第3章の総まとめです。上から下まで一直線に並んだ見づらい画面を、レイアウト機能を使ってプロっぽいダッシュボードに変身させてください。

課題：ダッシュボードを整理せよ

要件:

設定: 年度と店舗の選択ボックスを「サイドバー」に移動する。
指標: 売上・客数・満足度の3つの指標を「3列のカラム（横並び）」にする。
詳細: 生データ部分は邪魔なので「エキスパンダー」に入れて、クリックした時だけ見えるようにする。

解答例

クリックして解答コードを見る

import streamlit as st

st.title("売上ダッシュボード 📊")

# 1. サイドバーへ移動
st.sidebar.header("表示設定")
year = st.sidebar.selectbox("年度", [2023, 2024, 2025])
shop = st.sidebar.selectbox("店舗", ["東京", "大阪", "福岡"])

st.write(f"**{year}年度 {shop}店** のデータです")
st.write("---")

# 2. カラムで横並び
col1, col2, col3 = st.columns(3)
col1.metric("売上", "1,200万円", "+5%")
col2.metric("客数", "450人", "-2%")
col3.metric("満足度", "4.8", "+0.1")

st.write("---")

# 3. エキスパンダーで隠す
with st.expander("詳細データを見る"):
    st.write("ここに詳細なデータが表示されます...")
    st.table({"項目": ["A", "B", "C"], "値": [100, 200, 300]})