CSS로 shinydashboard 사용자 지정하기
shinydashboard는 CSS(cascading style sheets)를 사용해 더 폭넓게 사용자 지정할 수 있어요.
방법은 여러 가지가 있습니다. 실제로는 별도의 CSS 파일을 만드는 것이 좋지만, 이번 연습에서는 body에 CSS 코드를 직접 포함할 거예요.
여기서는 CSS 서식이 어떻게 적용되는지 보게 됩니다. CSS를 잘 몰라도 걱정하지 마세요! 이미 있는 CSS 코드를 약간만 수정하시면 됩니다.
헤더와 사이드바는 각각 header, sidebar로 저장되어 있어요.
이 연습은 강의의 일부입니다
shinydashboard로 대시보드 만들기
연습 안내
- 10번째 줄에서 헤더의 배경색을 헥스 코드 "#000000"로 바꾸세요.
- 14번째 줄에서 헤더(마우스를 올렸을 때)의 배경색을 "gray"로 바꾸세요.
- 이제 shinydashboard를 구성하는 요소를 모두 살펴봤으니, 코드를 자유롭게 수정하며 더 탐색해 보세요.
실습형 인터랙티브 연습
이 예제를 이 샘플 코드를 완성하여 풀어보세요.
body <- dashboardBody(
tags$head(tags$style(HTML('
.main-header .logo {
font-family: "helvetica", serif, Times, "Times New Roman";
font-weight: bold;
font-size: 24px;
}
/* Change the background-color to hexcode #000000 */
.skin-blue .main-header .logo {
background-color: #999999;
}
/* Change the hovered over color to gray */
.skin-blue .main-header .logo:hover {
background-color: white;
}
.skin-blue .main-header .navbar {
background-color: #999999;
}
.content-wrapper, .right-side {
background-color: #252525;
}
'))),
fluidRow(box(selectInput("stock", "Stock name", choices = c("AAPL", "DIS")))),
fluidRow(valueBoxOutput("name", width = 2),
valueBoxOutput("open", width = 2),
valueBoxOutput("close", width = 2),
valueBoxOutput("high", width = 2),
valueBoxOutput("low", width = 2),
valueBoxOutput("vol", width = 2)),
fluidRow(box("This stock is in your portfolio", width = 2, status = "success"),
valueBoxOutput("open_pct", width = 2),
valueBoxOutput("close_pct", width = 2),
valueBoxOutput("high_pct", width = 2),
valueBoxOutput("low_pct", width = 2),
valueBoxOutput("vol_pct", width = 2)),
fluidRow(box(plotlyOutput("line")),
box(radioButtons("feature", "Features",
choiceNames = c("Open", "Close", "High", "Low", "Volume"),
choiceValues = c("open", "close", "high", "low", "volume")) ) )
)
ui <- dashboardPage(header, sidebar, body)
server <- function(input, output) {
output$name <- renderValueBox(valueBox("Stock name", get_name(input$stock), color = "black"))
output$open <- renderValueBox(valueBox("Open price", most_recent(input$stock, "open"), color = "black"))
output$close <- renderValueBox(valueBox("Close price", most_recent(input$stock, "close"), color = "black"))
output$high <- renderValueBox(valueBox("High", most_recent(input$stock, "high"), color = "black"))
output$low <- renderValueBox(valueBox("Low", most_recent(input$stock, "low"), color = "black"))
output$vol <- renderValueBox(valueBox("Volume", most_recent(input$stock, "volume"), color = "black"))
output$open_pct <- renderValueBox(valueBox("Change", paste0(most_recent_pct(input$stock, "open"),"%"), color = box_color(most_recent_pct(input$stock, "open"))))
output$close_pct <- renderValueBox(valueBox("Change", paste0(most_recent_pct(input$stock, "close"),"%"), color = box_color(most_recent_pct(input$stock, "close"))))
output$high_pct <- renderValueBox(valueBox("Change", paste0(most_recent_pct(input$stock, "high"),"%"), color = box_color(most_recent_pct(input$stock, "high"))))
output$low_pct <- renderValueBox(valueBox("Change", paste0(most_recent_pct(input$stock, "low"),"%"), color = box_color(most_recent_pct(input$stock, "low"))))
output$vol_pct <- renderValueBox(valueBox("Change", paste0(most_recent_pct(input$stock, "volume"),"%"), color = box_color(most_recent_pct(input$stock, "volume"))))
output$line <- renderPlotly(plot_line(input$stock, input$feature))
}
shinyApp(ui, server)