>> shiny

• shiny app 是指和一台正运行着 R 会话（live R session）的计算机（即服务端 Server）相连的网页（即用户界面 UI）。

• 用户直接在 UI 中操作，而 Server 根据要求运行 R 代码并更新 UI 内容。

>> shiny Workflow

# app.R #
library(shiny)
# 1. Define UI for application
ui <- fluidPage(
  # Nested R functions that assemble 
  # an HTML UI for your app
)
# 2. Define server logic
server <- function(input, output) {
  # Instructions on how to (re)build 
  # the R objects displayed in the UI
}
# 3. Combines ui and server into an app
shinyApp(ui = ui, server = server)

* 也可以用快捷方式输入snippet：shinyapp -> Shift+Tab

>> shiny Basics

UI >> example codes

# Define UI for application that draws a histogram
ui <- fluidPage(
   # Application title
   titlePanel("Old Faithful Geyser Data"),
   # Sidebar with a slider input for number of bins 
   sidebarLayout(
      sidebarPanel(
         sliderInput(
           inputId = "bins", label = "Number of bins:",
           min = 1, max = 50, value = 30)
      ),
      # Show a plot of the generated distribution
      mainPanel(
         plotOutput(outputId = "distPlot")
      )
   )
)

>> shiny Basics

UI >> layouts

fluidPage(
  titlePanel("Old Faithful Geyser"),
  textInput("a", "")
)

<div class="container-fluid">
  <h2>Old Faithful Geyser</h2>
  <div class="form-group shiny-input-container">
    <label class="control-label" id="a-label" for="a"></label>
    <input id="a" type="text" class="form-control" value=""/>
  </div>
</div>

>> shiny Basics

UI >> Inputs

>> shiny Basics

UI >> Outputs

>> shiny Basics

UI >> shinyuieditor

>> shiny Basics

server >> example codes

# Define server logic required to draw a histogram
server <- function(input, output, session) {
   output$distPlot <- renderPlot({
      # generate bins based on input$bins from ui
      x    <- faithful[, 2] 
      bins <- seq(min(x), max(x), length.out = input$bins + 1)
      # draw the histogram with the specified number of bins
      hist(x, breaks = bins, col = 'darkgray', border = 'white')
   })
}

>> shiny Basics

reactivity

>> shiny Basics

shiny::runExample("01_hello")

* shiny::runExample() 列出内置的11个App示例，可尝试运行并查看代码。

>> shinydashboard Structure

shinydashboard 利用 {{AdminLTE}} ^* 提供的模板主题工具，这让使用 shiny 开发仪表盘式的网页 App 变得更加容易。

* Best open source admin dashboard & control panel theme. Built on top of Bootstrap, AdminLTE provides a range of responsive, reusable, and commonly used components.

## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage( # 仪表盘页面由三部分组成：
  dashboardHeader(),       # 表头
  dashboardSidebar(),      # 边栏
  dashboardBody()          # 主栏
)
server <- function(input, output) { }
shinyApp(ui, server)

>> shinydashboard Structure >> dashboardHeader()

ui <- dashboardPage(
  dashboardHeader(    # 表头
    title = "My awesome DashBoard",
    dropdownMenu(     # 可重复多个 dropdownMenu()
      type = "messages", # "notifications" / "tasks"
      badgeStatus = "primary",
      icon = NULL,
      messageItem(    # 可重复多个 messageItem()
        from, message, icon, time, href
      ),
      # ...
    ),
    # dropdownMenuOutput()  # dynamic dropdown menu (UI-side)
  ),
  dashboardSidebar(), # 边栏
  dashboardBody()     # 主栏
)

>> shinydashboard Structure >> dashboardSidebar()

SIDEBAR <- dashboardSidebar(
  sidebarMenu(
    menuItem("Dashboard", tabName = "dashboard",
             icon = icon("dashboard")),
    menuItem("Widgets", icon = icon("th"), tabName = "widgets", 
             badgeLabel = "new", badgeColor = "green")
    # menuItemOutput()  # dynamic sidebar menu item (UI-side)
  ),
  # sidebarMenuOutput(),  # dynamic sidebar menu (UI-side)
  # sidebarSearchForm(), sidebarUserPanel()
  sliderInput(inputId = "threshold", label = "Threshold",
              min = 1, max = 20, value = 5),
  # *Input()
)
BODY <- dashboardBody(
  tabItems(
    tabItem(tabName = "dashboard", h2("Dashboard tab content")),
    tabItem(tabName = "widgets", h2("Widgets tab content"))
  )
)
dashboardPage(dashboardHeader(), SIDEBAR, BODY)

>> shinydashboard Structure >> dashboardBody()

BODY <- dashboardBody( # mixed row and column layout
  fluidRow(
    box(title = "Box title", width = 6, status = "primary", "Box content"),
    box(status = "warning", width = 6, "Box content")
  ),
  fluidRow(
    column(width = 4,
      box(
        title = "Title 1", width = NULL, solidHeader = TRUE, status = "primary", "..."
      ),
      box(
        with = NULL, background = "black", "A box with a solid black background"
      )
    ),
    # column(width = 4, box(...), box(...)),
    # column(width = 4, box(...), box(...))
  )
)
# box() / tabBox(tabpanel()) / infoBox()/infoBoxOutput() / valueBox()/valueBoxOutput()

>> shinydashboard {{示例：Streaming CRAN data}}

>> bs4Dash {{示例}}

>> flexdashboard

>> flexdashboard Template

File | New File | R Markdown ... | From Template | Flex Dashboard ...

head codes

---
title: "Untitled"
output: 
   flexdashboard::flex_dashboard:
     orientation: columns
     vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
```

>> flexdashboard Template

>> flexdashboard Layouts

# level 1: pages
## level 2: columns / rows
### level 3: boxes

level 1: pages
===
level 2: columns / rows
---
### level 3: boxes

>>{{Sample Layouts，总有一款适合你！}}<<

>> flexdashboard {{Components}}

# 仪表 示例
gauge(
  rating, min = 0, max = 50, 
  gaugeSectors(
    success = c(41, 50), 
    warning = c(21, 40), 
    danger = c(0, 20)
  )
)
# 数值框 示例
valueBox(
  spam, icon="fa-trash", href="#details"
  color = ifelse(
    spam > 10, "warning", "primary")
)

>> flexdashboard {{示例：sharpe_ratio_flexdashboard}}