R4CR

Day3 - shiny 고급 | 2024-03-04
Jinhwan Kim

Overview

Dashboard

자동차의 대시보드

표기 되는 정보들이 실시간으로 바뀜
운행에 필요한 정보들만 표기
사용자와의 상호작용

Dashboard 2

용인세브란스 통합반응상황실
여러가지 데이터들이 보여지고 있음.

대시보드를 유닛(Components)들로 채워넣는 부분

bslib

대시보드 = 구성요소를 잘 배치한 Shiny
대시보드를 구성할 수 있는 많은 패키지 중 bslib을 다룸
BootStrap LIBrary의 줄임말
Shiny는 기본적으로 Bootstrap을 사용하지만 굉장히 오래된 버전을 사용하고 있었다. 이는 코드가 많이 꼬여있어 업데이트가 어려웠고, bslib이라는 별도의 패키지로 최신 기능을 제공
23년 11월에 업데이트 됨

First Shiny

Try this

library(bslib)
bslib::bs_theme_preview()

reshape2 패키지의 tips 데이터를 사용한 데모 대시보드
여러 UI, theme 확인 가능
기본 shiny 보다 대체로 좋음

First Shiny

bslib의 주요 기능 1. value box 2. card 3. theme customizer

Value box

이름(title), 값(value), 아이콘(showcase)으로 구성되는 대시보드에서 특정 지표를 강조하는 목적의 요소.
사용가능한 아이콘은 링크 참조

Card

bslib에서 권장하는 UI 배치 단위 요소 . 제목(header), 본문(body), 기타(footer)로 구성.
카드에서도 탭셋이나 사이드바 등 다양한 기능들을 사용할 수 있지만, 복잡도가 올라가기 때문에 권장하지는 않음.

Layout Column Wrap

한 줄에 여러 개의 요소(카드)를 배치하기 위한 방법.
이미지는 반반(1/2) 을 위한 예시이며 다른 배치는 <a href=‘https://rstudio.github.io/bslib/articles/column-layout/index.html’ target= “_blank” 링크 참조.

Theme customizer

대부분의 Shiny 개발에서는 테마 설정이 중요하진 않지만, 상황에 따라 필요할 수 있음.
bslib에서는 bs_theme_update()라는 함수를 제공하는데 데모 대시보드에서 선택 후 그 결과를 반영할 수 있는 코드 또한 제공.

bslib dashboard 템플릿

library(shiny)
library(bslib)
library(bsicons)

ui <- page_navbar(
  title = "TITLE",
  sidebar = sidebar(
    "Sidebar"
  ),
  nav_panel(
    title = 'A', 
    p("A panel"),
    layout_column_wrap(
      fill = FALSE,
      value_box(
        title = "I got",
        value = "99 problems",
        showcase = bs_icon("music-note-beamed"),
        p("bslib ain't one", bs_icon("emoji-smile")),
        p("hit me", bs_icon("suit-spade"))
      ),
      value_box(
        title = "1st value",
        value = "123",
        showcase = bs_icon("bar-chart"),
        theme = "purple",
        p("The 1st detail")
      )
    ),
    layout_column_wrap(
      card(
        card_header("header"),
        card_body("body"),
        card_footer("footer")
      ),
      card(
        card_header("header 2"),
        card_body("body 2"),
        card_footer("footer 2")
      )
    )
  ),
  nav_panel(
    title = 'B', p("B panel")
  )
)

server <- function(input, output, session){
  
}

shinyApp(ui, server)

navbar: 영역 구분
sidebar: 사용자 입력값
value box: 강조요소
card: 메인 요소

examples

shinyMRI

shinyMRI 앱, 코드
2019년 Shiny Contest 수상작

navbar
3 column
fileInput / selectinput / numericInput / plotOutput

Height/Weight Dashboard

set.seed(123)

myData <- data.frame(
  height = round(rnorm(n = 100, mean = 180, sd = 5), 1),
  weight = round(rnorm(n = 100, mean = 65, sd = 5), 1)
)
  
model <- lm(data = myData, formula = height ~ weight)

# save(model, file = 'model.Rdata')

value <- 35

newData <- data.frame(weight = value)
predict(model, newData) # 181.8224

왼쪽과 같은 역할을 할 수 있는 대시보드 앱
모델은 만들어져 있다고 가정
대시보드를 잠깐 고민해보자

shinyApp(ui, server)

ui <- page_sidebar(
  title = 'app',
  sidebar = sidebar(
    sliderInput(
      inputId = 'weight',
      label = 'select weight', 
      value = 50,
      min = 20, 
      max = 80, 
      step = 1
    ),
    actionButton(
      inputId = 'btn', 
      label = 'Calculate'
    )
  ),
  card(
    p('expected height is '),
    textOutput(outputId = 'result')
  )
)

server <- function(input, output, session) {
  # load('model.Rdata')
  observeEvent(input$btn, {
    value <- input$weight
    
    newData <- data.frame(weight = value)
    height <- predict(model, newData)
    
    output$result <- renderText(
      round(height, 1)
    )
  })
}

Shiny Ui Editor

ShinyUiEditor

마찬가지로 2023년 9월에 본격적으로 업데이트 된 R 패키지
Shiny의 UI 를 드래그&드랍으로 만들 수 있음. UI 구성에 익숙하지 않다면 도움 됨.
R 패키지인만큼 설치 후 사용도 가능하지만 Shiny로 사용해도 무방

ShinyUiEditor

템플릿에서 “Chick Weights navbar”를 선택하면 나타나는 첫 페이지
Elements에서 드래그 후 Editor로 드랍. Properties에서 설정 후 Code로 보이는 UI를 만들 수 있는 R 코드를 사용

ShinyUiEditor

정리

Shiny Dashboard는 shiny app의 종류 중 하나
head, sidebar, main 등으로 구성되며, bslib을 사용하여 만들 수 있다.
테마, 레이아웃, component 의 종류는 다양하며, 앱의 목적에 따라 차용하면 된다.
Shiny UI의 구성을 위해 Shiny Ui Editor 를 사용해도 좋다.