Update app.py

app.py

@@ -1,12 +1,16 @@
-import streamlit as st
+import os
 import requests
 import pandas as pd
 import plotly.express as px
+import streamlit as st
 import matplotlib as mpl
 import matplotlib.font_manager as fm
-import os
 from io import StringIO
 
+# 設定 Streamlit 頁面
+st.set_page_config(page_title="ESG 數據分析", layout="wide")
+
+# 安裝自訂字型
 def install_custom_font():
     font_path = "TaipeiSansTCBeta-Regular.ttf"
     if not os.path.exists(font_path):
@@ -17,44 +21,61 @@ def install_custom_font():
     fm.fontManager.addfont(font_path)
     mpl.rc('font', family='Taipei Sans TC Beta')
 
+# 執行字型安裝
 install_custom_font()
 
-st.title("ESG數據分析")
-
-# 直接讀取固定 URL 的 CSV 檔案
-url = "https://mopsfin.twse.com.tw/opendata/t187ap46_L_1.csv"
-response = requests.get(url)
-response.encoding = "utf-8"
-
-df = pd.read_csv(StringIO(response.text))
-df_cleaned = df.fillna(0)  # 填補缺失值
-
-st.subheader("📌 數據預覽")
-st.write(df_cleaned.head())
-
-# 讓用戶篩選數據
-st.subheader("🔍 數據篩選")
-filter_col = st.selectbox("選擇要篩選的欄位", df_cleaned.columns)
-unique_values = df_cleaned[filter_col].unique()
-selected_value = st.selectbox("選擇篩選值", unique_values)
-filtered_df = df_cleaned[df_cleaned[filter_col] == selected_value]
-
-st.write(filtered_df.head())
-
-# 讓用戶選擇數值欄位
-numeric_cols = filtered_df.select_dtypes(include=['number']).columns
-if len(numeric_cols) > 0:
-    col_choice = st.selectbox("選擇要視覺化的數值欄位", numeric_cols)
-    
-    if st.button("生成圖表"):
-        # 長條圖
-        st.subheader("📊 長條圖")
-        fig_bar = px.bar(filtered_df.head(10), x=filtered_df.index[:10], y=col_choice, title=f"{col_choice} 長條圖")
-        st.plotly_chart(fig_bar)
-        
-        # 圓餅圖
-        st.subheader("🥧 圓餅圖")
-        fig_pie = px.pie(filtered_df.head(10), names=filtered_df.index[:10], values=col_choice, title=f"{col_choice} 圓餅圖")
-        st.plotly_chart(fig_pie)
-else:
-    st.warning("⚠ 沒有數值型欄位可供選擇")
+# 下載 ESG CSV 資料
+esg_url = "https://mopsfin.twse.com.tw/opendata/t187ap46_L_1.csv"
+
+@st.cache_data
+def load_data(url):
+    response = requests.get(url)
+    if response.status_code == 200:
+        data = response.content.decode("utf-8-sig")
+        df = pd.read_csv(StringIO(data))
+        df.fillna(0, inplace=True)  # 填補缺失值
+        return df
+    else:
+        st.error("無法獲取資料，錯誤代碼: " + str(response.status_code))
+        return None
+
+# 加載 ESG 數據
+df = load_data(esg_url)
+
+# Streamlit 標題
+st.title("📊 ESG 數據分析儀表板")
+
+if df is not None:
+    # 顯示數據預覽
+    st.subheader("📌 數據預覽")
+    st.write(df.head(10))
+
+    # 讓用戶篩選數據
+    st.subheader("🔍 數據篩選")
+    filter_col = st.selectbox("選擇要篩選的欄位", df.columns)
+    unique_values = df[filter_col].unique()
+    selected_value = st.selectbox("選擇篩選值", unique_values)
+    filtered_df = df[df[filter_col] == selected_value]
+
+    st.write(filtered_df.head())
+
+    # 確保數據包含數值型欄位
+    numeric_cols = filtered_df.select_dtypes(include=['number']).columns
+    if len(numeric_cols) > 0:
+        col_choice = st.selectbox("選擇要視覺化的數值欄位", numeric_cols)
+
+        if st.button("生成圖表"):
+            # 繪製長條圖
+            st.subheader("📊 長條圖")
+            fig_bar = px.bar(filtered_df.head(10), x=filtered_df.index[:10], y=col_choice, 
+                             title=f"{col_choice} 長條圖", color_discrete_sequence=["#1f77b4"])
+            st.plotly_chart(fig_bar, use_container_width=True)
+
+            # 繪製圓餅圖
+            st.subheader("🥧 圓餅圖")
+            fig_pie = px.pie(filtered_df.head(10), names=filtered_df.index[:10], values=col_choice, 
+                             title=f"{col_choice} 圓餅圖")
+            st.plotly_chart(fig_pie, use_container_width=True)
+
+    else:
+        st.warning("⚠ 沒有數值型欄位可供選擇")