plotly gauge chart




```python
import plotly.graph_objects as go
import plotly.express as px
import streamlit as st

class PlotlyGaugeChart():
    """
    そのうちやりたいアップデート
    ．全体的にリファクタリング
    ．グラフ全体のサイズを三通りくらいに変える(それに合わせて、表示サイズを変える)
    ．色の基準を変える機能の実装

    coloerはself.value_colorとして定義、
    再描写部分refresh_gaugeメソッド化して流用性を高める
    """

    def __init__(self):
        # ラベルに関する設定
        self.label_text = 'default'
        self.label_font_size = 20

        # グラフに関する設定
        self.current_value = 0
        self.graph_size = 200
        
        # グラフの色に関する設定
        self.current_value_color = 'green'
        self.yellow_threshold = 30
        self.red_threshold = 10

        # ゲージチャートの作成
        self.fig = px.pie(
            names=["", ""],
            values=[self.current_value, 100 - self.current_value],
            hole=0.7,
            width=200, # 200-400くらいを推奨
            height=200,
            category_orders={"names": ["", ""]},  # カテゴリの順序を指定
        )

        # グラフのリフレッシュ
        self.refresh_gauge()

    def refresh_gauge(self):
        if self.current_value <= 10:
            self.current_value_color = "red"
        elif self.current_value <= 30:
            self.current_value_color = "orange"
        else:
            self.current_value_color = "green"

        # 塗りつぶしの設定
        self.fig.update_traces(
            values=[self.current_value, 100 - self.current_value],
            marker=dict(colors=[self.current_value_color, "lightgray"]),
            hoverinfo="none",  # hover情報を非表示に設定
            hovertemplate=None,  # hoverテンプレートを無効化
            textinfo="none",
            direction='clockwise',  # 時計回り
            rotation=0,  # 塗りつぶしの始点を調整
        )

        # ラベルやレイアウトの設定
        self.fig.update_layout(
            margin=dict(l=20, r=20, t=20, b=20),  # 左右上下の余白を調整
            showlegend=False,
            annotations=[
                {
                    "text": f"{self.label_text}<br>{self.current_value}%",
                    "x": 0.5, # ラベルのx座標, 0.5はチャートの中央
                    "y": 0.5, # ラベルのy座標, 0.5はチャートの中央
                    "font_size": self.label_font_size, 
                    "showarrow": False,
                }
            ],
        )
    
    def update_label_text(self, new_label_text: str):
        # ラベルテキストの更新
        self.label_text = new_label_text
        # グラフのリフレッシュ
        self.refresh_gauge()

    def update_label_fontsize(self, new_label_size: int):
        # ラベルサイズの更新
        self.label_font_size = new_label_size
        # グラフのリフレッシュ
        self.refresh_gauge()
    
    def update_threshold(self, new_yellow_threshold: int, new_red_threshold: int):
        self.yellow_threshold = new_yellow_threshold
        self.red_threshold = new_red_threshold
        # グラフのリフレッシュ
        self.refresh_gauge()
        
    def update_current_value(self, input_value):
        self.current_value = input_value
        # グラフのリフレッシュ
        self.refresh_gauge()

    
    def choose_gauge_size(self, size_param):
        if size_param == 'small':
            self.fig.update_layout(width=150, height=150)
        elif size_param == 'medium':
            self.fig.update_layout(width=200, height=200)
        elif size_param == 'large':
            self.fig.update_layout(width=300, height=300)
        else:
            pass
        
    def show_fig_jupyter(self):
        self.fig.show()

    def show_fig_streamlit(self):
        st.plotly_chart(self.fig)


```


```python

a = PlotlyGaugeChart()
a.show_fig_jupyter()

```


```python

a = PlotlyGaugeChart()
a.update_current_value(4)
a.show_fig_jupyter()

```

```python

a.update_label_text('aiue')
a.update_label_fontsize(10)
a.update_threshold(50, 20)
a.update_current_value(50)
a.show_fig_jupyter()

```

```python

a.choose_gauge_size('large')
a.show_fig_jupyter()

```