R에서는 대시보드를 만들기 위해 많은 패키지들이 존재하지만, 크게 shinydashboard와 flexdashboard가 존재한다. 오늘은 이중에서도 flexdashboard를 활용해 보려고 한다.
flexdashboard의 장점은 R이외의 코드를 최소화한다는 장점과 html 파일로 생성되어 서버가 필요하지 않다는 장점이 있지만 shiny를 활용하는 것 대비 세부적으로 적용가능한 폭이 좁다는 점이 있다.
대시보드 파일 생성
flexdashboard는 Markdown을 활용한다. from Template에서 Flex Dashboard를 선택하고 생성하여도 되고 YAML 부분을 수정하여도 된다. YAML과 같은 Markdown관련 부분에 대한 정보가 필요하면 아래 링크를 참조하기 바란다.
위키미디어 프로젝트 기여자
조창제
자 이제 파일이 생성되었다면 간략하게 알아보도록 하자.
레이아웃 설정
YAML 설정
레이아웃은 YAML을 통해 설정할 수 있다. 파일을 생성하게 되면 아래와 같이 나타나는데 orientation: columns 는 열로 배치하겠다는 의미이다. vertical_layout 옵션으로는 scroll을 줄 수도 있다.
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
추가로 shiny를 적용하고 싶다면 아래와같이 runtime: shiny 를 추가하면 된다. randerPlot등의 함수를 추가로 사용가능해진다.
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
runtime: shiny
---
상세하게 설명하기에 앞서 수준별 레이아웃 구성에 대해 알아보자.
header 설정
수준1은 page를 나타내며, 수준 2는 행 혹은 열을 의미하고, 수준 3은 윤곽을 의미한다.
# First-level heading (page)
## Second level heading (row or column)
### Third-level heading (pane for plot, chart, etc.)
아래에서 수준1과 수준 3은 쉽게 이해가 되었을 것이다. 현재 수준3들이 새로로 3개가 정렬 된 것을 볼 수 있는데, 이는 수준2가 3개라는 것을 의미한다.
페이지 생성
{data-navmenu=} 옵션을 header에 추가하여 리스트화하여 페이지를 생성할 수 있다. 특정 페이지를 삭제하고 싶은 경우 {.hidden} 옵션을 줌으로써 숨길 수 있다. 또한 옵션으로 {data-icon} 을 주어 페이지 앞에 아이콘을 넣을 수 있다.
사이드 바 생성
{.sidebar} 옵션을 header에 추가하여 사이드바를 생성할 수 있다.
윤곽 조절 및 탭 추가
2수준의 header에 {data-width=650} 나 {data-height=450} 옵션을 추가하여 크기를 조절할 수 있다. .tabset 을 대시보드의 탭을 생성할 수도 있으며.tabset-fade 를 추가 옵션으로 줄 수 있다.
또한 3수준의 패딩은 8로 설정되어있는데 {.no-padding} 나 {data-padding=10} 등으로 수정이가능하다.
테마 설정
default, cosmo, bootstrap, cerulean, journal, flatly, readable, spacelab, united, lumen, paper, sandstone, simplex, yeti 테마가 설정이 가능하며 아래와 같이 YAML에 적용한다.
---
title: "ggplot2 Diamonds Explorer"
output:
flexdashboard::flex_dashboard:
orientation: columns
social: menu
source_code: embed
theme: bootstrap
runtime: shiny
---예제
pkgdown
참고
pkgdownpkgdown
---
title: "ggplot2 Diamonds Explorer"
output:
flexdashboard::flex_dashboard:
orientation: columns
social: menu
source_code: embed
theme:
bg: "#101010"
fg: "#FDF7F7"
primary: "#ED79F9"
navbar-bg: "#3ADAC6"
base_font: !expr bslib::font_google("Prompt")
code_font: !expr bslib::font_google("JetBrains Mono")
logo: logo.png
favicon: logo.png
navbar:
- { title: "About", href: "https://google.com", align: right, icon: glyphicon-time}
- { title: "Home", href: "https://google.com", align: right, icon: fa-facebook }
runtime: shiny
---
