Heroku

Python Dash를 활용한 대시보드에서 엑셀 데이터로 다운로드 받기

강의 홍보

[대시보드] Dash Project - Excel 다운로드

개요

  • 각 레벨에 따라 달라지는 데이터를 시각화로 표현하고 결과치를 엑셀로 다운로드 받는 기능을 구현한다.

데이터 다운로드

import pandas as pd
train_df = pd.read_csv("train.csv")

id  level                                           full_log
0   0      0  Sep 24 10:02:22 localhost kibana: {"type":"err...
1   1      0  Feb  8 16:21:00 localhost logstash: [2021-02-0...
2   2      0  Jan 13 01:50:40 localhost kibana: {"type":"err...
3   3      0  Jan  4 10:18:31 localhost kibana: {"type":"err...
4   4      1  type=SYSCALL msg=audit(1603094402.016:52981): ...

함수 작성

  • 각 레벨에 따른 첫번째 글자수의 빈도를 구하는 데이터를 구하도록 한다.
  • 예를 들면, level 1에 대한 첫번째 글자 수를 집계한 결과는 아래와 같다.
    • 아래와 같은 결과값이 나오는 함수를 작성할 것이다.
index     cnt
0  type=SYSCALL  116496
1           Jan    3019
2           Oct    2904
3           Nov    2646
4           Feb    2381
  • 먼저 함수를 작성해본다.
def get_df(data, level=0):

    # pandas dataframe
    lvl_df = data.loc[data.level == level].full_log.apply(lambda x: x.split(' ')[0]).value_counts().rename(
        'cnt').to_frame().reset_index()

    return lvl_df

data = get_df(train_df, level = 1)
print(data.head())
index     cnt
0  type=SYSCALL  116496
1           Jan    3019
2           Oct    2904
3           Nov    2646
4           Feb    2381
  • 위 데이터를 토대로 시각화를 작성하고, 그 후에는 엑셀로 된 데이터로 변환하는 것이 목표이다.
  • 이 때, 각 레벨의 값에 따라 데이터 결괏값과 시각화의 그림도 달라지게 된다.

프로젝트 폴더 정리

  • 최종적인 프로젝트 폴더 및 파일은 아래와 같다.
C:.
  .gitignore
  app.py
  README.md


├─assets
      style.css

├─data
      train.csv

(1) 데이터 불러오기

  • 이제 app.py를 작성하도록 한다.
  • 먼저 데이터를 불러오는 코드 사용자 정의 함수는 다음과 같다.
import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
from dash.dependencies import Input, Output

# 함수 정의
def get_df(data, level=0):
    # pandas dataframe
    lvl_df = data.loc[data.level == level].full_log.apply(lambda x: x.split(' ')[0]).value_counts().rename(
        'cnt').to_frame().reset_index()

    return lvl_df

DATA_PATH = "data/"
train_df = pd.read_csv(DATA_PATH + "train.csv")
print(train_df.head())

data = get_df(train_df, level=1)
print(data.head()) # 결과치가 잘 나오는지 확인하다. 
  • level=1 에서, 숫자를 변경하여 결괏값이 서로 다르게 나타나는지 반드시 확인하도록 한다.

(2) Dash 객체 생성

  • dash 클래스를 호출화여 app 인스턴스화를 진행한다.
  • 또한, app.titleapp.layout 작성한다.
.
.
external_stylesheets = [
    {
        "href": "https://fonts.googleapis.com/css2?"
                "family=Lato:wght@400;700&display=swap",
        "rel": "stylesheet",
    },
]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.title = "Temp Analytics: Understand Your Data!"

app.layout = html.Div(
    html.P("Hello World")
)

if __name__ == "__main__":
	app.run_server(debug=True)
  • 앱을 실행하면 아래와 같이 결괏값이 나타날 것이다.
id  level                                           full_log
0   0      0  Sep 24 10:02:22 localhost kibana: {"type":"err...
1   1      0  Feb  8 16:21:00 localhost logstash: [2021-02-0...
2   2      0  Jan 13 01:50:40 localhost kibana: {"type":"err...
3   3      0  Jan  4 10:18:31 localhost kibana: {"type":"err...
4   4      1  type=SYSCALL msg=audit(1603094402.016:52981): ...
          index     cnt
0  type=SYSCALL  116496
1           Jan    3019
2           Oct    2904
3           Nov    2646
4           Feb    2381
Dash is running on http://127.0.0.1:8050/
  • [http://127.0.0.1:8050/](http://127.0.0.1:8050/) 을 클릭하면 Hello World 만 나타날 것이다.

(3) HTML 상단 머리글 입력

  • 이제 HTML 코드를 추가로 입력한다.
  • 이제 app.layout 을 입력 하는 코드를 작성해보도록 한다.
  • HTML 코드는 DIV 태그가 기준이 된다. 따라서, DIV 태그가 완성될 때마다 화면을 공유하도록 했다.
  • 먼저, 화면의 상단 DIV 태그를 작업한다.
.
.
app.layout = html.Div(
	children=[
        html.Div(
            children=[
                html.P(children="📈", className="header_emoji"),
                html.H1(children="Temp Analytics", className="header_title", ),
                html.P(children="Temp", className="header_description", ),
            ],
            className='header',
        ),
	]
)
.
.
  • 아직 style.css을 입히기 전의 화면을 보면 다음과 같이 출력될 것이다.

dash_01.png

Python Dash를 활용한 대시보드 만들기 with Heroku

강의 소개

  • 필자의 강의를 소개합니다.

개요

  • 대시보드 프로젝트를 진행한다.
  • Heroku에 배포까지 진행하는 것을 목적으로 한다.
  • 참조: https://realpython.com/python-dash/
    • 여기에 있는 내용을 최대한 간결하게 한글로 재 작성하였다. 중간에 없는 코드들도 있으니, 가급적 본 소스코드를 활용한다.

1. 데이터 수집

C:\Users\1\Desktop\dashboard-project21>tree /f
폴더 PATH의 목록입니다.
볼륨 일련 번호는 E657-CFA3입니다.
C:.
  README.md

└─data
        avocado.csv
  • 파일 경로를 주의해서 보도록 합니다.

2. 가상환경 및 라이브러리 설치

  • conda를 활용하여 가상환경 설정을 합니다.
  • (dashboard-project21) 형태로 터미널 명령어가 바뀌어 있어야 합니다.
$ conda create --name dashboard-project21 python=3.8
.
.
$ conda activate dashboard-project21
(dashboard-project21) C:\Users\1\Desktop\dashboard-project21>
  • 이번에는 dash 라이브러리를 설치한다.
$ conda install dash
$ conda install pandas
$ conda install colorama

3. 대시 보드 코드 작성

(1) 데이터 수집 및 Dash 클래스 정의

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

# step 1. Data Import
data = pd.read_csv("avocado.csv", index_col=0)
data = data.query("type == 'conventional' and region == 'Albany'")
data["Date"] = pd.to_datetime(data["Date"], format="%Y-%m-%d")
data.sort_values("Date", inplace=True)

# step 2. Dash Class
app = dash.Dash(__name__)
  • dash 라이브러리는 대시보드 어플리케이션 초기화를 담당한다.
  • dash_core_components 동적 구성요소들(예: 그래프, 드롭다운 메뉴, 날짜 기간 등) 작성할 수 있도록 도와주는 기능을 제공한다.
  • dash_html_components 은 html 태그에 접근하도록 한다.
  • pandas 데이터 수집 및 가공을 제공할 수 있는 함수들을 지원한다.
  • 코드 설명
    • step 1
      • 데이터를 avocado.csv 데이터를 수집한 후, type = conventional 과, region = Albany 만 추출하는 행을 추출한다.
      • 그 이후 날짜의 오름차순으로 정렬하는 코드를 작성한다.
    • step 2
      • Dash 클래스를 정의하여 app이라는 객체를 별도 생성한 것을 의미한다.

(2) 대시보드 HTML Layout 정의

  • 이전 코드에 이어서 작성을 하도록 한다.
# step 3. HTML
app.layout = html.Div(
	  # Header Message
    children=[
        html.H1(children="Temp Analytics",),
        html.P(
            children="Temp",
        ),
        # 그래프		
        dcc.Graph(
            figure={
                "data": [
                    {
                        "x": data["Date"],
                        "y": data["AveragePrice"],
                        "type": "lines",
                    },
                ],
                "layout": {"title": "Title_1"},
            },
        ),
        dcc.Graph(
            figure={
                "data": [
                    {
                        "x": data["Date"],
                        "y": data["Total Volume"],
                        "type": "lines",
                    },
                ],
                "layout": {"title": "Title_2"},
            },
        ),
    ]
)
  • Dash는 크게 2가지로 구성이 된다.