サイトアイコン アマチュア無線局JS2IIU

【Streamlit】st.column_config.DatetimeColumnの基本と使い方

JS2IIU

こんにちは、JS2IIUです。StreamlitのDataFrame表示で日時を自在に表示するcolumn_config.DatetimeColumnを紹介します。日時の表示もDataFrameで時系列のデータを扱う際には欠かせないですね。今回もよろしくお願いします。

はじめに

データフレーム内で日付や時間を扱いたい場合、Streamlitのst.column_config.DatetimeColumnを利用することで、日時情報を直感的かつ便利に操作できます。このクラスを使えば、データフレームに日時形式の列を追加し、カスタマイズ可能なインターフェースを提供できます。本記事では、DatetimeColumnの基本的な使い方や実例を交えて詳しく解説します。

st.column_config.DatetimeColumnとは

st.column_config.DatetimeColumnは、データフレームの列を日時データとしてフォーマットし、ユーザーにわかりやすく表示するためのクラスです。これにより、日付と時間がフォーマットされた状態で表示されるだけでなく、ユーザーにとって直感的に使いやすいインターフェースを提供します。

主な用途

パラメータの説明

以下は、DatetimeColumnの各パラメータとその用途です。

Moment.js | Docs
momentjs.com

実際の使用例

以下は、DatetimeColumnを使ったシンプルな例です。

例：イベント管理の日時列

from datetime import datetime
import streamlit as st
import pandas as pd
from streamlit.column_config import DatetimeColumn

# データフレームを作成
data = {
    "Event": ["Event A", "Event B", "Event C"],
    "Start Time": ["2024-11-20 14:00:00", "2024-11-21 10:00:00", "2024-11-22 16:30:00"]
}
df = pd.DataFrame(data)

# 日時列のデータ型を変換
df["Start Time"] = pd.to_datetime(df["Start Time"])

# DatetimeColumnで列をカスタマイズ
column_config = {
    "Start Time": DatetimeColumn(
        label="開始時刻",
        help="イベントの開始日時",
        format="MMM Do, YYYY hh:mm:ss A",  # カスタムフォーマット
        min_value=datetime(2024, 11, 20, 0, 0, 0),
        max_value=datetime(2024, 11, 30, 0, 0, 0),
        step=60  # 1分単位で選択可能
    )
}

# カスタム列設定でデータフレームを表示
st.data_editor(df, column_config=column_config)

こちらの動画では、min_value, max_valueで指定した範囲内で日時選択した場合と、範囲外を選択しようとしたときの操作を行なっています。

https://js2iiu.com/wp-content/uploads/2024/11/st_06_01.mov

1. ライブラリのインポート

from datetime import datetime
import streamlit as st
import pandas as pd
from streamlit.column_config import DatetimeColumn

2. データフレームの作成

data = {
    "Event": ["Event A", "Event B", "Event C"],
    "Start Time": ["2024-11-20 14:00:00", "2024-11-21 10:00:00", "2024-11-22 16:30:00"]
}
df = pd.DataFrame(data)

結果として、以下のようなデータフレームが作成されます：

EventStart Time
Event A2024-11-20 14:00:00
Event B2024-11-21 10:00:00
Event C2024-11-22 16:30:00

3. 日時列のデータ型を変換

df["Start Time"] = pd.to_datetime(df["Start Time"])

4. DatetimeColumnで列のカスタマイズ

column_config = {
    "Start Time": DatetimeColumn(
        label="開始時刻",
        help="イベントの開始日時",
        format="MMM Do, YYYY hh:mm:ss A",  # カスタムフォーマット
        min_value=datetime(2024, 11, 20, 0, 0, 0),
        max_value=datetime(2024, 11, 30, 0, 0, 0),
        step=60
    )
}

5. st.data_editorでデータフレームを表示

st.data_editor(df, column_config=column_config)

プログラムの動作

  1. データフレームの表示:
  1. インタラクティブ操作:
  1. ヘルプ表示:

ポイント

応用例：特定の日時範囲でフィルタリング

以下のコードでは、特定の日時範囲に基づいてイベントを抽出します。

# フィルタリング用の日時範囲を定義
start_date = pd.Timestamp("2024-11-21 00:00:00")
end_date = pd.Timestamp("2024-11-22 23:59:59")

# 指定した範囲内のイベントを抽出
filtered_events = df[(df["Start Time"] >= start_date) & (df["Start Time"] <= end_date)]

# フィルタリング結果を表示
st.write("指定された期間のイベント:", filtered_events)

注意点

  1. 日時データの型
    DatetimeColumnを使用する場合、対象列のデータ型はdatetime64[ns]である必要があります。pd.to_datetimeで事前に変換しましょう。
  2. フォーマット指定
    formatオプションに無効なフォーマットを指定するとエラーになります。Pythonの日時フォーマット（strftime形式）ではなく、Moment.jsのフォーマットに従って正確に記述してください。
  3. タイムゾーン
    タイムゾーンを指定しない場合、システムのデフォルトが使用されるため、アプリケーションの要件に応じて設定しましょう。
Moment.js | Docs
momentjs.com

まとめ

st.column_config.DatetimeColumnは、データフレームで日時データを操作するのに非常に便利なツールです。日時フォーマットをカスタマイズしたり、特定の範囲でデータをフィルタリングしたりする際に役立ちます。
次回は、日付情報に特化したst.column_config.DateColumnについて解説します。どうぞお楽しみに！

公式ドキュメントはこちら：st.column_config.DatetimeColumn

モバイルバージョンを終了