hello dash

hello dash 2024-11-27 @nishimotz / @24motz github.com/nishimotz/hello-dash 2

3

実践Dash - 手を抜きながら本気で作る データ可視化Webアプリの基本と応用 • @shinyorke さん 4

5

開始,終了,講師,タイトル 9:30,10:00,-,開場・受付 10:00,10:15,-,オープニング 10:15,10:50,tomo,信頼性を高めるって結局何だったの？ 10:50,10:55,谷 昌典,新しくできたPlatform Engineeringに関わるチームを紹介する【サイボウズ株式会社】 10:55,11:05,-,休憩 11:05,11:40,菅原政行,野良SREが考えるひとりめの仕事、透明性の作り方 11:40,11:55,今野 結太,コードに魂を吹き込め！GitHubで作る夢の開発環境【ウルシステムズ株式会社】 11:55,12:30,菱田健太@トポタル,SREの組織類型に応じたリーダーシップの考察 12:30,13:30,-,集合写真・休憩 『むさしのお弁当、先着50名』！！ 13:30,14:05,宇田 誠之朗,プロダクトと開発を支えるSREの力 14:05,14:40,谷 昌典,開発組織を横断して支える生産性向上チームの取り組み 14:40,14:50,-,休憩 14:50,15:25,dyoshikawa,エンジニアのための情報共有コミュニティサービスZennの開発チームを支える自動化の仕組み 15:25,15:40,小西 啓太,エンジニアとサブスレッド【株式会社サブスレッド】 15:40,16:15,chanyou,データの信頼性を支える仕組みと技術 16:15,16:25,-,休憩 16:25,16:40,安藤 光昭,TBD【ビットリバー株式会社】 16:40,17:15,Wataru Tsuda / gr1m0h,"""君は見ているが観察していない"" で考えるインシデントマネジメント" 17:15,17:30,クロージング,『書籍プレゼント企画、5名様』！！ 6

Hello Dash してみた • https://github.com/nishimotz/hello-dash • 主なプロンプト • csv ファイル • dash_table で表示 • スライダーで9時から18時まで時間帯を選ぶと、 現在のセッションの色を強調して表示 • 一番外側の div に padding 7

• https://github.com/nishimotz/hello-dash

8

import pandas as pd from dash import Dash, dash_table, html, dcc, Output, Input # Dashアプリケーションの初期化 app = Dash(__name__) # CSVファイルの読み込み df = pd.read_csv("data.csv") # 時間を数値に変換する関数 def time_to_float(time_str): """時間文字列を浮動小数点数に変換します。""" hour, minute = map(int, time_str.split(":")) return hour + minute / 60 # データフレームに開始時刻と終了時刻の数値列を追加 df["開始_数値"] = df["開始"].apply(time_to_float) df["終了_数値"] = df["終了"].apply(time_to_float) 9

# アプリケーションのレイアウト
app.layout = html.Div(
style={"padding": "1rem 2rem"},
children=[

html.H1("オープンセミナー2024@広島"),
# スライダー
html.Div(
[
html.Label("時間を選択してください:"),
dcc.Slider(
id="time-slider",
min=9,

max=18,
step=0.1,
value=9,
marks={i: f"{i}:00" for i in range(9, 19)},
),

],
style={"width": "80%", "margin": "1rem auto"},
),

10

# テーブル
dash_table.DataTable(
id="schedule-table",
columns=[

{"name": col, "id": col}
for col in df.columns
if col not in ["開始_数値", "終了_数値"]
],
data=df.to_dict("records"),
style_cell={"textAlign": "left", "padding": "0.5rem"},
style_header={
"backgroundColor": "rgb(230, 230, 230)",

"fontWeight": "bold",
},
style_data_conditional=[
{"if": {"row_index": "odd"}, "backgroundColor": "rgb(248, 248, 248)"}
],

),
]
)

11

# コールバックの定義
@app.callback(
Output("schedule-table", "style_data_conditional"), Input("time-slider", "value")
)
def highlight_current_session(selected_time):

"""スライダーで選択された時間に基づいて、該当するセッションの行を強調表示します。"""
return [
{

"if": {
"filter_query": f"{{開始_数値}} <= {selected_time} && {{終了_数値}} > {selected_time}"
},
"backgroundColor": "tomato",
"color": "white",

}
]
# サーバーの実行
if __name__ == "__main__":
app.run_server(debug=True)

12