웹 대시보드 프로젝트 - 2일차 ( 이미지, 차트로 데이터 표기)

2022-12-16 진행했던 웹 대시보드 프로젝트 2일차 

 

1일차에는 데이터를 가져와 확인하고 수정하는 과정을 거쳤습니다.

 

먼저 웹 대시보드를 어떻게 구성할지 고민을 하였고 다음과 같이 설정하고 작업을 시작하였습니다.

home.py , player.py , team.py 를 만들어 코드를 작성합니다.

 

1. home.py

 - 기본적으로 들어왔을 때 보여주기 위해 title과 이미지 하나를 가져왔습니다.

import streamlit as st

def home() :
    st.title('Welcome to NBA Data Center')
    image_url = '이미지'
    st.image(image_url)

 

2. player.py 

- 선수파일에는 비어있는 함수만 만들어놓아 추후 작성하도록 합니다.

import streamlit as st

def player(player_name) :
    pass

 

3.team.py

- 팀은 전에 가져왔던 데이터를 본격적으로 분석을 시작합니다.

-  먼저 그전에 했던 작업들을 비쥬얼코드에 data_init.py로 옮겨놓습니다.

# data_init.py
import pandas as pd

df_teams = pd.read_csv('data/teams.csv')
df_games = pd.read_csv('data/games.csv')
df_players = pd.read_csv('data/players.csv')
df_games_detail = pd.read_csv('data/games_details.csv',low_memory = False)

df_teams = df_teams.loc[:,['TEAM_ID','ABBREVIATION','YEARFOUNDED','CITY','ARENA']]
df_games = df_games.loc[:,['GAME_DATE_EST','GAME_ID','HOME_TEAM_ID','PTS_home','AST_home','REB_home','TEAM_ID_away','PTS_away','AST_away','REB_away','HOME_TEAM_WINS']]
# 문제 없는 데이터프레임
df_games_detail_1 = df_games_detail.loc[:,:'START_POSITION']
# 문제 있는 데이터프레임 짜른 뒤 수정
df_games_detail_2 = df_games_detail.loc[:,'COMMENT':].shift(-1,axis= 1)
# 짜른 두 코드를 합쳤다.
df_games_detail = pd.concat([df_games_detail_1,df_games_detail_2],axis=1)
df_games_detail = df_games_detail.loc[:,['GAME_ID', 'TEAM_ID','PLAYER_ID','PLAYER_NAME','START_POSITION',
                       'COMMENT','MIN', 'FG_PCT', 'FG3_PCT', 
                       'DREB', 'REB', 'AST', 'STL', 'BLK','TO']]
rename ={ 'GAME_DATE_EST' : '경기날짜' ,'GAME_ID':'경기ID', 'HOME_TEAM_ID':'홈팀ID','PTS_home':'홈팀점수','AST_home':'홈팀어시','REB_home':'홈팀리바운드','TEAM_ID_away':'어웨이팀ID','PTS_away':'어웨이팀점수','AST_away':'어웨이팀어시','REB_away':'어웨이팀리바운드','HOME_TEAM_WINS':'홈팀승리여부'  }
df_games = df_games.rename(columns=rename)

rename_detail = { 'GAME_ID':'경기ID','TEAM_ID':'팀ID','PLAYER_ID':'선수ID','PLAYER_NAME':'선수명',
                    'START_POSITION':'포지션',
    'COMMENT':'출전시간','MIN':'2점슛', 'FG_PCT':'3점슛', 'FG3_PCT':'자유투',
    'DREB':'리바운드','REB':'어시스트','AST':'가로채기','STL':'블락','TO':'턴오버수'}
df_games_detail = df_games_detail.rename(columns=rename_detail)
    
rename_playes = { 'PLAYER_NAME':'선수명','TEAM_ID':'팀ID','PLAYER_ID':'선수ID','SEASON':'시즌' }
df_players=df_players.rename(columns=rename_playes)
    
rename_team = {'TEAM_ID':'팀ID','ABBREVIATION':'팀약어','YEARFOUNDED':'팀창설해',
                'CITY':'연고지','ARENA':'홈구장'}
df_teams = df_teams.rename(columns=rename_team)

 

그리고 team에는 import 하여 가져오고 사이드바에서 팀을 선택하면 

df_teams에 데이터를 보여주도록 합니다.

또한 시작 일자와, 종료 일자를 선택하여 df_games 의 데이터를 조회하고 

차트로 표기합니다.

 

import streamlit as st
import pandas as pd
#팀의 사진 정보를 담은 team_url도 생성하였습니다.
import team_url as tu
import data_init
import matplotlib.pyplot as plt
import numpy as np
from matplotlib import font_manager, rc

def team(team_name) :
    # 팀의 데이터를 읽어온다.
    df_teams = data_init.df_teams
    df_games = data_init.df_games
    # 팀정보 헤더 지정
    st.header('team info')
    # 팀의 맞는 이미지 생성
    st.image(tu.team_url(team_name),width=500)
    # 사이드바에서 선택한 팀으로 정보
    df_teams_info = df_teams.loc[df_teams['팀약어'] == team_name,'팀약어':]
    st.dataframe(df_teams_info)
    
    # 시즌별 성적보기
    st.header('일자별 성적보기')
    team_id = df_teams[df_teams['팀약어'] == team_name]['팀ID'].values[0]
    st.subheader('홈 성적')
    # 시작과 끝 종료날짜를 설정하여 데이터 가져오기
    start_date = st.date_input('시작 날짜')
    end_date = st.date_input('종료 날짜')
    start_date = start_date.strftime('%Y-%m-%d')
    end_date = end_date.strftime('%Y-%m-%d')
    df_games_home = df_games.loc[ (df_games['홈팀ID']==team_id) & (start_date<=df_games['경기날짜']) & (df_games['경기날짜']<=end_date),['경기날짜','홈팀점수','홈팀어시','홈팀리바운드','어웨이팀점수','어웨이팀어시','어웨이팀리바운드','홈팀승리여부']]
    st.dataframe(df_games_home)

    # 차트의 표시
    font_name = font_manager.FontProperties(fname="malgun.ttf").get_name()
    rc('font', family=font_name)
    if st.checkbox('홈 평균') :
        fig1 = plt.figure()
        x= np.arange(3)
        x_label = ['점수','어시','리바운드']
        home_value = df_games_home.iloc[:,1:3+1].mean()
        home_value2 = df_games_home.iloc[:,4:-1].mean()
        p1=plt.bar(x,home_value,width = 0.4,color='r')
        p2=plt.bar(x+0.4,home_value2,width = 0.4,color='b')
        plt.xticks(np.arange(0.2,3+0.2,1),x_label)
        plt.legend((p1[0],p2[0]) , ('Home','Away'), fontsize = 10 )
        st.pyplot(fig1)
    else :
        st.write('')
    st.subheader('어웨이 성적')
    df_games_away =df_games.loc[ (df_games['어웨이팀ID']==team_id) & (start_date<=df_games['경기날짜']) & (df_games['경기날짜']<=end_date),['경기날짜','홈팀점수','홈팀어시','홈팀리바운드','어웨이팀점수','어웨이팀어시','어웨이팀리바운드','홈팀승리여부']]
    st.dataframe(df_games_away)
    if st.checkbox('어웨이 평균') :
        
        fig2 = plt.figure()
        x= np.arange(3)
        x_label = ['점수','어시','리바운드']
        away_value2 = df_games_away.iloc[:,1:3+1].mean()
        away_value = df_games_away.iloc[:,4:-1].mean()
        p1=plt.bar(x,away_value,width = 0.4,color='g')
        p2=plt.bar(x+0.4,away_value2,width = 0.4,color='y')
        plt.xticks(np.arange(0.2,3+0.2,1),x_label)
        plt.legend((p1[0],p2[0]) , ('Away','Home'), fontsize = 10 )
        
        st.pyplot(fig2)
    else :
        st.write('')

 

 

4. 이제 이모든걸 app.py로 보여줍니다.

import streamlit as st
from home import home
from team import team
from player import player
def main() :
    home()
    st.sidebar.title('menu')
    team_name_list = ['ATL', 'BOS', 'NOP', 'CHI', 'DAL', 'DEN', 'HOU', 'LAC', 'LAL',
       'MIA', 'MIL', 'MIN', 'BKN', 'NYK', 'ORL', 'IND', 'PHI', 'PHX',
       'POR', 'SAC', 'SAS', 'OKC', 'TOR', 'UTA', 'MEM', 'WAS', 'DET',
       'CHA', 'CLE', 'GSW']
    team_name = st.sidebar.selectbox('team',team_name_list)
    if team_name is not None :
        team(team_name)
    player_name = st.sidebar.selectbox('player info',[''])
    if player_name is not None :
        player(player_name)

if __name__ == '__main__' :
    main()