Dashboard

Dash App Using Flask Factory Pattern and Blueprint - 2

강의 홍보

개요

  • 기존 Flask-Dash-Heroku 연동 예제를 업그레이드 한다.
  • Flask Factory Application의 기본 개념 및 Blueprint의 기본 개념을 이해한다.
  • Dash App을 Flask Factory Application에 맞추어 가공 한다.

리뷰

미리보기

  • 다음과 같이 메뉴가 있도록 코드를 작성할 예정이다.

Untitled

Dash App Using Flask Factory Pattern and Blueprint - 1

강의 홍보

개요

  • 기존 Flask-Dash-Heroku 연동 예제를 업그레이드 한다.
  • Flask Factory Application의 기본 개념 및 Blueprint의 기본 개념을 이해한다.

리뷰

미리보기

  • 다음과 같이 메뉴가 있도록 코드를 작성할 예정이다.

Untitled

Flask-Dash-Heroku 연동

개요

  • Flask 및 Dash를 활용하여 간단한 대시보드를 생성할 수 있다.
  • 기존 구현한 대시보드를 Heroku에 배포할 수 있다.

사전준비

  • 파이썬 가상환경 설치 및 기존 라이브러리에 대한 이해가 어느정도 있음을 가정한 상태에서 본 블로그를 작성했음을 유의한다.
  • Heroku 회원가입 및 로그인이 되어 있어야 한다.

Step 1. Github Repo생성

  • Github Repo 생성 시, 중복되지 않을 법한 이름으로 생성
    • 필자 Repo : flask-heroku-dash-evan1234
  • 해당 Repo를 로컬로 가져온다.
git clone https://github.com/your_name/your_unique_repo.git

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

  • 먼저 가상환경을 설치한다.
virtualenv venv
  • 가상환경에 접속한다.
source venv/Scripts/activate
  • 주요 라이브러리를 설치한다.
    • pandas : 데이터 불러오기 및 가공
    • dash & plotly : 동적 시각화 대시보드 제공 라이브러리
    • Flask : Flask 웹 프레임워크
    • SQLAlchemy : 데이터베이스 연동 프레임워크
pip install dash plotly Flask pandas gunicorn psycopg2-binary SQLAlchemy Flask-SQLAlchemy

Step 3. 기본 배포 테스트

  • 먼저 본격적인 코드에 앞서 기본적으로 배포가 되는지 확인한다.
  • 필요한 파일 app.py, Procfile, runtime.txt, requirements.txt 파일이 필요하다.

(1) app.py

  • 아래와 같이 작성한다.
# -*- coding:utf-8 -*-

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return "Hello World"

(2) Procfile 파일 작성

  • 대문자 및 소문자 정확하게 기재해야 한다.
web: gunicorn app:app

(3) runtime.txt 파일 작성

python-3.9.12

(4) requirements.txt 파일 작성

  • 해당 파일은 기존에 설치했던 라이브러리를 모두 호출하는 형식이어야 한다.
  • 프로젝트 Root 경로에서 아래와 같이 실행한다.
pip freeze > requirements.txt
  • 전체 파일 구조를 확인하면 아래와 같다.
$ ls
app.py  Procfile  README.md  requirements.txt  runtime.txt  venv/

(5) wsgi.py 파일 작성

from app import app

if __name__ == "__main__":
    app.run(threaded=True, port=5000)

(5) 배포 시작

  • 아래 명령어를 순차적으로 입력하여 실행한다.
    • heroku login 시, Web UI에서 실제 ID와 Password를 입력해야 한다.
    • heroku create github repo와 동일하게 작성한다.
heroku login
heroku create your_project_repo
git add .
git commit -m "initial updated"
git push # github repo에 추가
git push heroku main

(6) 배포 사이트 확인

  • 실제로 정상적으로 배포가 완료가 되었다면 실제 웹사이트 URL을 클릭 후, 아래와 같이 확인할 수 있어야 한다.
  • 배포가 진행이 안된다면, 그 다음 코드를 입력하는 것은 의미가 없기 때문에 확인 후 넘어가도록 한다.

Untitled

Heroku App 배포

개요

Procfile 생성

  • 프로젝트 Root 디렉터리에 Procfile 을 생성한다.
web: gunicorn index:server
  • 이 때, index 파일명을 의미한다.

작업 파일 수정

  • index.py을 열고, 다음 코드를 추가한다.
    • server = app.server 을 추가한다.
app = dash.Dash(__name__, meta_tags=[{"name": "viewport",
                                      "content": "width=device-width"}])

server = app.server

Runtime 파일 추가

  • 어떤 파이썬 버전에서 실행할 것인지 해당 코드를 작성한다. (runtime.txt)
    • 마찬가지로 프로젝트의 Root 디렉토리에서 생성한다.
python-3.8.7

Heroku 로그인 및 App 생성

  • Heroku 회원가입을 안했다면, 진행한다.

Python Sales Dashboard Using Dash and Plotly

개요

  • Sales 데이터를 활용하여 대시보드를 만드는 과정을 제작한다.
  • 기본 파이썬 코딩은 할 줄 안다는 전제하에 작성하며, 세부 내용이 필요하면 참고 자료를 확인할 것을 권한다.
  • 윈도우 10에서 본 프로젝트를 수행하였다.

Chapter 1. Github Repo 생성

  • 필자는 Github 레포를 만들었다. (Repo 명: python_dash_sales)
  • git clone을 통해서 로컬로 가져온다.
$ git clone https://github.com/your_id/python_dash_sales.git

Chapter 2. Python 프로젝트 생성

  • PyCharm을 주 에디터로 사용할 예정이다.

Heroku Dash App 배포 - Windows 10

개요

  • WindowsVirtualenv를 활용하여 빠르게 App 배포를 해본다.

1. 프로그램 다운로드

tutorial_01.png

  • 이럴 경우에는 환경변수를 강제로 잡는다.
C:\Program Files\heroku\bin
  • Heroku가 제대로 환경설정이 되어 있는지 확인하려면, 터미널에서 다음 명령어를 입력해 확인한다.
$ heroku -v
heroku/7.53.0 win32-x64 node-v12.21.0
(base)

2. Getting Started

$ heroku login
heroku: Press any key to open up the browser to login or q to exit:
Opening browser to https://cli-auth.heroku.com/auth/cli/browser/93982084-f22f-4a6b-b347-94f1aa4b6b47?requestor=SFMyNTY.g2gDbQAAAA4xMTIuMTQ0LjIyOC43Nm4GACiKMnR9AWIAAVGA.j9hng63oLOpCVOcHcWyOYDqT4s11jMHDtEesGw5xUD4
heroku: Waiting for login...
Logging in... done
Logged in as your_email@gmail.com
  • Github Repo를 생성하고, git clone 으로 바탕화면(또는 적정한 곳)에 Repo를 내려 받는다.
$ git clone https://github.com/your_name/heroku-app-green.git
  • heroku_app 경로에서 다음과 같이 실행한다.
    • 이 때, 프로젝트 폴더명, github repo 이름, heroku 이름이 동일해야 한다.
    • 또 한가지 주의해야 할 점은 name 방식이다. 무료 방식이기 때문에, 타 사용자가 해당 주소를 사용하고 있다면, 쓸수 없다. 또한, heroku_app 과 같은 형식도 되지 않는다.
    • 아래는 heroku app 생성 실패 내역이다.
$ heroku create heroku-app
 »   Warning: heroku update available from 7.53.0 to 7.59.2.
Creating heroku-app... !
 !    Name heroku-app is already taken                   
  • 정상적으로 설치가 완료되면 다음과 같이 뜬다.
$ heroku create heroku-app-green
 »   Warning: heroku update available from 7.53.0 to 7.59.2.
Creating heroku-app-green... done
https://heroku-app-green.herokuapp.com/ | https://git.heroku.com/heroku-app-green.git
(base)
  • heroku login을 진행한다.
$ heroku login
heroku: Press any key to open up the browser to login or q to exit: 
Opening browser to https://cli-auth.heroku.com/auth/cli/browser/9320abcd-b8c6-406d-9198-ca14d1e59a26?requestor=SFMyNTY.g2gDbQAAAA4yMjEuMTU3LjM3LjIxNm4GAGgtTBB7AWIAAVGA.GlyVc8jbyiW6NG0MVzCS0bOjtzBWvYRfjB9-gnkQaoQ
Logging in... done
Logged in as your_email_address
  • 이제 마지막으로 heroku app에 repository를 생성한다.
$ heroku git:remote -a your_app
 »   Warning: heroku update available from 7.53.0 to 7.59.2.
set git remote heroku to https://git.heroku.com/heroku-app-green.git
  • heroku-app-green 이 생긴 것을 확인할 수 있다.

tutorial_02.png

기업 요청 샘플 (수강생) - Python Dash를 활용한 대시보드

강의 홍보

개요

  • 보안 로그 파일을 업로드한 뒤, 점검 결과를 자동으로 출력해주도록 한다.
  • (수강생의 도전) 보안 로그 파일을 업로드 한 뒤, CPU 사용률이 70%가 넘으면 경고 메시지를 뛰우도록 한다.

Chapter 1. 로그데이터 분석 및 확인

  • 먼저 CPU가 들어있는 로그데이터를 확인한다.
    • 골든시스에서 제공한 Sample 데이터를 근거로 랜덤하게 데이터를 생성했다. 파일명: (cpu_test.txt)
Dorm_E_116.95#
Dorm_E_116.95#sh logg
Dorm_E_116.95#sh logging 
Syslog logging: enabled (0 messages dropped, 1 messages rate-limited, 0 flushes, 0 overruns, xml disabled, filtering disabled)

No Active Message Discriminator.

No Inactive Message Discriminator.

    Console logging: level debugging, 2178 messages logged, xml disabled,
                     filtering disabled
    Monitor logging: level debugging, 244 messages logged, xml disabled,
                     filtering disabled
    Buffer logging:  level debugging, 2178 messages logged, xml disabled,
                    filtering disabled
    Exception Logging: size (4096 bytes)
    Count and timestamp logging messages: disabled
    File logging: disabled
    Persistent logging: disabled

No active filter modules.

    Trap logging: level informational, 2176 message lines logged
        Logging Source-Interface:       VRF Name:
          
Log Buffer (100000 bytes):
17:19:23: %PM-4-ERR_DISABLE: storm-control error detected on Gi1/0/36, putting Gi1/0/36 in err-disable state
Jul  7 17:19:23: %STORM_CONTROL-3-SHUTDOWN: A packet storm was detected on Gi1/0/36. The interface has been disabled.
Jul  7 17:19:25: %LINK-3-UPDOWN: Interface GigabitEthernet1/0/36, changed state to down
Jul  7 17:19:53: %PM-4-ERR_RECOVER: Attempting to recover from storm-control err-disable state on Gi1/0/36
Switch#show processor cpu
CPU utilization for five seconds: 4%/1%; one minute: 3%; five minutes: 3%
.
.
.
  • 업무 수행 시, 위와 같은 데이터를 생성한다. 그 후에, 점검일지 파일을 작성한다.
    • 점검일지 파일 Sample /img/programming/2021/08/dash_cpu_logdata/log_01.png log_01.png

(1) 문제점 진단

  • 통상적으로 위와 같이 명령어를 입력한 뒤 결괏값을 찾아 수기로 입력하여 작성하도록 함
  • 일일이 확인해야 하는 번거로움이 있다보니, 이를 자동으로 처리할 수 있는 툴 제작 의뢰를 받음

(2) 해결방안

  • 명령어 및 결괏값이 일정한 패턴이 있기 때문에, 문자열 매칭을 통해 전처리가 가능한 것을 확인
  • 또한, Dash 프레임워크를 통해 비교적 간단하게 대시보드를 만들 수 있음에 착안하였다.

(3) 배경지식

Chapter 2. 문자열 전처리 함수 만들기

  • 우선 Jupyter Lab에서 간단한 테스트 함수를 만들어 보았다.
  • 전체 코드는 아래와 같다.
    • 파일을 불러온 뒤 우선 각 코드 라인 중에서 CPU utilization 가 있는 텍스트만 남기고 그 외에는 모두 삭제한다.
    • 여기에서 다른 명령어의 결괏값을 확인하다면, if else 구문으로 계속적으로 확장할 수 있을 것이다.
    • 그 후에, 각 re.sub 함수를 활용하여 수치만 뽑아낸다.
    • 이를 각 데이터 프레임에 추가한 것이다.
import pandas as pd
import re

def text_cleanser(FILE_PATH):
    with open(FILE_PATH, 'r') as f:
        logLines = f.read().splitlines()
    cleaned_lines = [x for x in logLines if "CPU utilization" in x]
    clean_text = re.sub('/[0-9]%', '', cleaned_lines[0])
    print("temp:", clean_text)
    result_list = re.findall("\d+", clean_text)
    return result_list
        
FILE_PATH = "data/cpu_test.txt"
result_list = text_cleanser(FILE_PATH)
result_list
  • 위 파일을 Jupyter lab에서 실행하면 아래와 같은 결괏값이 출력될 것이다.
temp: CPU utilization for five seconds: 4%; one minute: 3%; five minutes: 3%
['4', '3', '3']
  • 출력한 결과물을 pandas 데이터 프레임에 적용한 결과는 아래와 같다.
data = pd.DataFrame({"분류":["cpu"],
                     "점검내용": ["CPU 사용률 점검 및 불필요한 프로세스 확인"],
                     "점검기준": ["MEM 임계치: 70% (MAX)"],
                     "점검방법": ["show processes cpu | in five"],
                     "5초 동안 CPU 사용률": [result_list[0]], 
                     "1분 동안 CPU 사용률": [result_list[1]], 
                     "5분 동안 CPU 사용률": [result_list[2]], 
                    })
data

log_02.png

네이버 뉴스 댓글 크롤링 대시보드 만들기 with Heroku

강의 홍보

1. 개요

  • 기존 웹크롤링은 주로 코드에 기반한 소개가 주를 이루었음
  • 본 장에서는 가급적 사용자 기준에 맞춰서 뉴스 URL만 입력하면 댓글 수집할 수 있는 기능 소개함

2. 라이브러리

  • 크롤링 및 대시보드 작업을 위한 필수 라이브러리는 다음과 같음 (requirements.txt)
colorama==0.4.4
dash==1.21.0
gunicorn==20.1.0
numpy==1.19.4
pandas==1.2.0
beautifulsoup4==4.9.3
openpyxl==3.0.7
requests==2.26.0
  • 위 파일을 프로젝트의 가장 최상단에 위치시켜 놓는다.
  • 설치 진행 시에는 pip install -r requirements.txt 해도 좋고, 아니면 개별적으로 설치를 해도 좋다.

3. 코드 설명

  • 본장에서는 디테일한 코드 설명은 넘어가도록 한다.

(1) 크롤링 코드

  • 먼저 크롤링 코드는 다음과 같다.
# 크롤링 라이브러리
from bs4 import BeautifulSoup
import requests
import re

# 데이터프레임
import pandas as pd

# 샘플 URL을 적용한다. 
url = "https://news.naver.com/main/read.naver?mode=LSD&mid=shm&sid1=100&oid=022&aid=0003609357" 

def get_df(url):
    # 댓글을 달 빈 리스트를 생성합니다.
    List = []
    url = url
    oid = url.split("oid=")[1].split("&")[0]
    aid = url.split("aid=")[1]
    page = 1
    header = {
        "User-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36",
        "referer": url,

    }
    while True:
        c_url = "https://apis.naver.com/commentBox/cbox/web_neo_list_jsonp.json?ticket=news&templateId=default_society&pool=cbox5&_callback=jQuery1707138182064460843_1523512042464&lang=ko&country=&objectId=news" + oid + "%2C" + aid + "&categoryId=&pageSize=20&indexSize=10&groupId=&listType=OBJECT&pageType=more&page=" + str(
            page) + "&refresh=false&sort=FAVORITE"
    # 파싱하는 단계입니다.
        r = requests.get(c_url, headers=header)
        cont = BeautifulSoup(r.content, "html.parser")
        total_comm = str(cont).split('comment":')[1].split(",")[0]

        match = re.findall('"contents":([^\*]*),"userIdNo"', str(cont))
        # 댓글을 리스트에 중첩합니다.
        List.append(match)

        # 한번에 댓글이 20개씩 보이기 때문에 한 페이지씩 몽땅 댓글을 긁어 옵니다.
        if int(total_comm) <= ((page) * 20):
            break
        else:
            page += 1

		# 
    def flatten(l):
        flatList = []
        for elem in l:
        # if an element of a list is a list
        # iterate over this list and add elements to flatList
            if type(elem) == list:
                for e in elem:
                    flatList.append(e)
            else:
               flatList.append(elem)
        return flatList

    # 리스트 결과입니다.
    # print(flatten(List))

    # convert dataframe
    data = pd.DataFrame(flatten(List), columns=["기사댓글"])
    data = data.rename_axis("index").reset_index()

    # write_excel
    # data.to_excel("news_comments.xlsx", sheet_name="Sheet1")
    return data

# data = get_df(url) # URL 테스트 시, 실행 
data = pd.DataFrame({"index": [0], "기사댓글": ["댓글"]}) # 앱 배포시 실행
# print(data.head())
  • 중간에 주석처리 한 것을 풀면 된다.
  • 해당 코드는 app.py 또는 일반적인 주피터 노트북, 구글 코랩에서 실행해도 된다.
  • 수집된 댓글을 확인해보니, 중간에 삭제된 글은 댓글 수집 시, 제외되는 것을 확인할 수 있다.

dash-crawling-04.png

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가지로 구성이 된다.