Streamlit Version1.12.0で何が変わったか見てみよう

Python

はじめに

2022-8-11にVersin1.12.0がリリースされました。
さっそく変更点を見てみましょう。

何がかわったの?

Version1.12.0での追加・変更点です。

ハイライト

  • 組み込みのチャートの外観とパラメータ(xとy)が新しくなりました。

注目すべき変更

  • st.experimental_memoもしくはst.experimental_singletonでキャッシュされた関数に、静的なstコマンドを含めることが出来るようになりました。このことにより、テキスト、チャート、データフレームなどをキャッシュすることが出来るようになります。
  • サイドバーの横幅をドラッグ&ドロップで変更できるようになりました。
  • st.info、st.success、st.error、st.warningのメッセージ系のデザインを変更し、新たにキーワードのみのパラメータ「icon」を追加しました。

その他の変更

  • st.select_sliderがすべてのfloat型を正しく処理するようになりました。
  • st.multi_selectは列挙型(enum)から値をとることが出来るようになりました。
  • st.sliderの範囲の値はst.session_stateを通して設定できるようになりました。
  • st.progressが再設計されました。
  • st.radioがリストのようなデータフレームをより良く扱えるようになりました。
  • st.cacheがJSONファイルを適切に処理するようになりました。
  • anchorパラメータが設定された時にヘッダがマークダウンをレンダリングするようになりました。
  • st.imageがInkscapeからSVGを読み込むことが出来るようになりました。
  • st.mapとst.pydeck_chartはアプリのテーマに基づいてligntスタイルかdarkスタイルを使用します。
  • st.balloonsとst.snowの下の要素をクリックしてもブロックされなくなりました。
  • 埋め込まれたアプリの上部のパディングが小さくなりました。
  • ウィジット、チャート、データフレームのパディングとアライメントが調整されました。
  • 型ヒントを増やしました。

ハイライト

組み込みチャートの外観とパラメータ

新しい外観

Streamlitの他の部分とシームレスに連携する美しいチャートテーマを作成しました。スマートでモダンなデザインで公式カラーパレットを使用しています。

色合いや見た目が少し変わっています。

プログラムコード
import streamlit as st
import pandas as pd
import numpy as np

# 20行3列のデータを作成
chart_data = pd.DataFrame(np.random.randn(20, 3), columns=["a", "b", "c"])
# ラインチャート
st.line_chart(chart_data)
# エリアチャート
st.area_chart(chart_data)
# バーチャート
st.bar_chart(chart_data)
実行画面(ラインチャート)

ラインチャート(ライトモード
上段がVersion1.11.1、下段がVersion1.12.0

上段:Version1.11.1、 下段:Version1.12.0

ラインチャート(ダークモード)
上段がVersion1.11.1、下段がVersion1.12.0

上段:Version1.11.1、 下段:Version1.12.0

実行画面(エリアチャート)

エリアチャート(ライトモード)
上段がVersion1.11.1、下段がVersion1.12.0

上段:Version1.11.1、 下段:Version1.12.0

エリアチャート(ダークモード)
上段がVersion1.11.1、下段がVersion1.12.0

上段:Version1.11.1、 下段:Version1.12.0
実行画面(バーチャート)

バーチャート(ライトモード)
上段がVersion1.11.1、下段がVersion1.12.0

上段:Version1.11.1、 下段:Version1.12.0

バーチャート(ダークモード)
上段がVersion1.11.1、下段がVersion1.12.0

上段:Version1.11.1、 下段:Version1.12.0

新しいパラメータ:x、y

組み込みチャート(st.line_chart, st.area_chart, st.bar_chart)でパラメータxとyで何をプロットするかをコントロールすることが出来るようになりました。
たとえば、次のようなデータフレームの時、その日の最高気温(temp_max)をプロットしたい場合は、xにdate、yにtemp_maxを指定するだけでプロット出来るようになりました。

dateprecipitationtemp_maxtemp_minwindweather
2021-08-010.012.85.04.7drizzlerain
2021-08-0210.910.62.84.5rain
2021-08-030.811.77.22.3rain
2021-08-0420.312.25.64.7rain
2021-08-051.38.92.86.1rain
プログラムコード
import streamlit as st
impor pandas as pd

f = pd.DataFrame(
    { 
        'date': ['2022-08-01', '2022-08-02', '2022-08-03', '2022-08-04', '2022-08-05', '2022-08-06', '2022-08-07'],
        'precipitation': [0.0, 10.9, 0.8, 20.3, 1.3, 2.5, 0.0],
        'temp_max': [12.8, 10.6, 11.7, 12.2, 8.9, 4.4, 7.2],
        'temp_min': [5.0, 2.8, 7.2, 5.6, 2.8 ,2.2, 2.8],
        'wind': [4.7, 4.5,2.3, 4.7, 6.1, 2.2, 2.3],
        'weather': ['drizzlerain', 'rain', 'rain', 'rain', 'rain', 'rain', 'rain']
    }
)
st.line_chart(df, x="date", y="temp_max")
実行画面

複数の項目を表示するには、yに列名をリストとして指定します。例えば、最高気温と最低気温を表示する場合は以下のようになります。

プログラムコード
import streamlit as st
impor pandas as pd

f = pd.DataFrame(
    { 
        'date': ['2022-08-01', '2022-08-02', '2022-08-03', '2022-08-04', '2022-08-05', '2022-08-06', '2022-08-07'],
        'precipitation': [0.0, 10.9, 0.8, 20.3, 1.3, 2.5, 0.0],
        'temp_max': [12.8, 10.6, 11.7, 12.2, 8.9, 4.4, 7.2],
        'temp_min': [5.0, 2.8, 7.2, 5.6, 2.8 ,2.2, 2.8],
        'wind': [4.7, 4.5,2.3, 4.7, 6.1, 2.2, 2.3],
        'weather': ['drizzlerain', 'rain', 'rain', 'rain', 'rain', 'rain', 'rain']
    }
)
# yにリスト形式で指定します。
st.line_chart(df, x="date", y=["temp_max", "temp_min"])
実行画面

注目すべき変更

キャッシュ関連

st.experimental_memoまたはst.experimental_singletonによってキャッシュされる関数に、チャートやその他の静的要素(データフレーム、テキストなど)を入れることが出来るようになりました。
このことにより、長い計算やAPIコールだけでなく、ユーザインタフェースの一部分全体をキャッシュすることが出来ます。
今後数か月のうちに詳細をお知らせしますとの事です。

サイドバーの横幅変更

サイドバーの横幅変更をドラッグ&ドロップで変更できるようになりました。

実行画面

メッセージ関連にアイコン表示

st.info、st.success、st.error、st.warningにiconパラメータを追加しました。

プログラムコード
import streamlit as st

st.error('This is an error', icon="🚨")
st.warning('This is a warning', icon="⚠️")
st.info('This is a purely informational message', icon="ℹ️")
st.success('This is a success message!', icon="✅")
実行画面

おわりに

チャートをxとyで指定できるのはすごく便利になったと思います。
また、「より複雑なグラフやカスタマイズが必要な場合は、サポートされているサードパーティのグラフ作成ライブラリを使用するように」と書かれていますが、この標準のチャートについても徐々に機能が充実してきそうな気がします。

参考にさせていただいたもの

Streamlit Official Announcements

コメント