---
GA: UA-159972578-2
---
###### tags: `R` `Shiny` `Visualization` `Report` `資料視覺化`
# Shiny Dashboard介紹
{%hackmd theme-dark %}
Reference from <i class="fa fa-book fa-fw"></i> [Building Dashboards with shinydashboard](https://www.datacamp.com/courses/building-dashboards-with-shinydashboard).
View another note on <i class="fa fa-book fa-fw"></i> [ShinyApp](https://hackmd.io/@ritatang242/SJZeR727I).
Example
---
```{r}
library(shinydashboard)
# create header, sidebar & body
header = dashboardHeader(...)
sidebar = dashboardSidebar(...)
body = dashboardBody(...)
ui = dashboardPage(header,sidebar,body)
server = function(input, output) {
...
}
shinyApp(ui, server)
```
## 1. UI
### (1) Header
+ Messages
```{r}
dashboardHeader(
dropdownMenu(
type = "messages",
messageItem(
from = "Lucy",
message = "You can view the International Space Station!",
href = "https://spotthestation.nasa.gov/sightings/"
),
messageItem(
from = "Lucy",
message = "Learn more about the International Space Station",
href = "https://spotthestation.nasa.gov/faq.cfm"
)
)
)
```
+ Notifications
```{r}
dashboardHeader(
dropdownMenu(
type = 'notifications',
notificationItem("The International Space Station is overhead!")
)
)
```
+ Tasks
```{r}
dashboardHeader(
dropdownMenu(
type = 'tasks',
taskItem("Mission Learn Shiny Dashboard", 10) # progress bar
)
)
```
+ Reactive Menu Items
```{r}
output$task_menu <- renderMenu({
tasks = apply(task_data, 1, function(row){
taskItem(text = row[['text']],
value = row[['value']])
})
dropdownMenu(type = 'tasks', .list = tasks)
```
### (2) Sidebar
View 'ShinyApp' note for the detail.
```{r}
dashboardSidebar(
sidebarMenu(
menuItem(text = 'Dashboard', tabName = 'dashboard'),
menuItem(text = 'Inputs', tabName = 'inputs')
)
selectInput(...)
)
```
### (3) Body
```{r}
dashboardBody(
tabItems(
tabItem(
tabName = "dashboard",
tabBox(title = "International Space Station Fun Facts",
tabPanel("Fun Fact 1"),
tabPanel("Fun Fact 2")
),
tabItem(tabName = "inputs")
)
)
)
```
+ Row-based Layout
+ Status parameter
+ primary: Blue (sometimes dark blue)
+ success: Green
+ info: Blue
+ warning: Orange
+ danger: Red
+ Color argument
```{r}
body <- dashboardBody(
fluidRow(
box(
width = 12,
title = 'Regular Box, Row 1',
subtitle = 'Star Wars',
color = 'yellow'
))
)
)
```
+ Column-based Layout
```{r}
body <- dashboardBody(
fluidRow(
column(width = 6,
infoBox(
width = NULL,
title = "Regular Box, Column 1",
subtitle = "Gimme those Star Wars",
status = 'danger'
)
)
)
)
```
### (4) Beautify
+ Skin
+ blue, black, purple, green, red, yellow
```{r}
ui <- dashboardPage(
skin = 'purple',
header = dashboardHeader(),
sidebar = dashboardSidebar(),
body = dashboardBody()
)
```
+ CSS
+ customize the CSS by using the tags()
```{r}
body <- dashboardBody(
tags$head(
tags$style(HTML(
'h3 {
font-weight: bold;
}'))
)
)
```
+ icon
+ more icons at: [Font Awesome Website](http://fontawesome.io/icons/)
```{r}
icon = icon('rocket')
```
## 2. Server
+ Read in real-time data
+ reactiveFileReader
+ reactivePoll
```{r}
server = function(input, output, session) {
reactive_starwars_data = reactiveFileReader(
intervalMillis = 1000,
session = session,
filePath = starwars_url,
readFunc = function(filePath) {
read.csv(url(filePath))
}
)
output$table = renderTable({
reactive_starwars_data()
})
}
```
+ Reactive Boxes
```{r}
sidebar = dashboardSidebar(
actionButton("click", "Update click box")
)
server = function(input, output) {
output$click_box <- renderValueBox({
valueBox(
value = input$click, # increases in value each time the user clicks the action button.
subtitle = 'Click Box'
)
})
}
body = dashboardBody(
valueBoxOutput('click_box')
)
```
+ Optimization
+ You have a file that is static that you want your users to have access to.
```{r}
# Each time a new user visits your application.
server <- function(input, output) {
storms <- read.csv("starwars.csv")
}
# Optimizational way:
# Once when the application is launched.
storms <- read.csv("starwars.csv")
server <- function(input, output) {
}
```
## 3. Other Method: Using Rmd
+ 一但將runtime改為Shiny後
+ 會從靜態網頁變成動態網站
+ 需要有一個Web Server才能使用
Sign in with Wallet
Connect another wallet