1 flexdashboard

1.1 Install package

#安装 flexdashboard package
install.packages("flexdashboard")
remotes::install_github('rstudio/flexdashboard')

1.2 Usage

使用Rstudio：File-New File-Rmarkdown-template-flex_dashboard
在YAML的output中加入flexdashboard::flex_dashboard

title: "dashboard"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill

2 Layout

一级标题创建页面
二级标题创建列（或行）
三级标题生成一个框(包含一个或多个仪表板组件)

---
title: "Get Started"
output: flexdashboard::flex_dashboard
---

Column 1
--------------------------------------------------

### Chart A

Column 2
--------------------------------------------------

### Chart B

### Chart C

Figure 2.1: A quick example of the dashboard layout

Column也可以写成二级标题的形式，但为了突出显示，写成上述title + dash line的形式

## Column 1

2.1 Row-based layouts

默认二级标题创建一列，可以通过设置orientation: rows改成按行分布

output:
  flexdashboard::flex_dashboard:
    orientation: rows

2.2 Attributes on sections

{data-width= }和{data-height= }分别设置宽度和高度,后者用于row-based layouts(Section 2.1)

A narrow column {data-width=350}
--------------------------------

{.tab}属性可以应用到列上，这样第三层的部分就会以选项卡的形式排列

Two tabs {.tabset}
------------------

### Tab A

### Tab B

2.3 Multiple pages

使用一级标题 # title 或者 title + equal line 设置分页
页面标题显示为仪表板顶部的导航菜单(Figure 2.2)。可以通过data-icon属性将图标应用于页面标题

---
title: "Multiple Pages"
output: flexdashboard::flex_dashboard
---

Visualizations {data-icon="fa-signal"}
===================================== 
    
### Chart 1
    
### Chart 2


Tables {data-icon="fa-table"}
=====================================     

### Table 1

### Table 2

Figure 2.2: Multiple pages on a dashboard

。

2.4 Story board

storyboard布局允许给图片添加评述,顶部的左/右导航按钮，点击后逐一浏览所有可视化和相关的注释 (Figure 2.3)。

---
title: "Storyboard Commentary"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
---

### A nice scatterplot here

---

Some commentary about Frame 1.

### A beautiful histogram on this board

---

Some commentary about Frame 2.

Figure 2.3: An example story board

3 Components

Dashboard里可以包含的组分有

基于HTML小部件的交互式JavaScript数据可视化 HTML widgets
R图形输出：包括base, lattice, and grid graphics R graphical output
表格数据(带有可选的排序、过滤和分页) Tabular data
用于突出显示重要摘要数据的值框 Value boxes
仪表上在指定范围内显示数值的仪表 Gauges
各种文本注释 Text annotations
一个导航栏，提供与仪表板相关的更多链接 navigation bar

其中后四个是flexdashboard特有的。

3.1 Value box

使用valueBox发出一个值并指定一个图标，参数包括

value 值
icon 图标
color 颜色，这可以是一个内置的背景颜色:"primary"， "info"， "success"， "warning"， "danger"或任何有效的CSS颜色值,e.g., "#ffffff", "rgb(100, 100, 100)"
heref 一个可选的URL链接。也可以是另一个仪表板页面的锚(例如。“#details”)

spam=12
valueBox(
  value=spam, #值
  icon = "fa-trash",#图标
  color = ifelse(spam > 10, "warning", "primary")
)

Figure 3.1: Three value boxes side by side on a dashboard

3.2 Gauges

gauge在指定范围内显示仪表上的数值,参数包括：

value 值
min 最大值
max 最小值
sectors = gaugeSectors() gaugeSectors()指定"success", "warning", "danger"的分隔
symbol = NULL 单位
label = NULL 展示在数值下的标签
abbreviate = TRUE 将大数字缩写(例如1234567 -1.23M)。默认为TRUE。
href = NULL 一个可选的URL链接。也可以是另一个仪表板页面的锚(例如。“#details”)
colors 用于表示"success", "warning", "danger"范围的颜色向量。可以是一个内置的背景颜色:"primary"， "info"， "success"， "warning"， "danger"或任何有效的CSS颜色值,e.g., "#ffffff", "rgb(100, 100, 100)"

gauge(37.4, min = 0, max = 50, 
      gaugeSectors(success = c(41, 50),
             warning = c(21, 40), 
             danger = c(0, 20)),
      symbol = 'unit',label='click to see more details')

Figure 3.2: Three gauges side by side on a dashboard

3.3 Text annotations

Figure 3.3: Text annotations on a dashboard

在引入dashboard section之前，在页面顶部包含文本 (Figure 3.3 顶部文字)

---
title: "Text Annotations"
output:
  flexdashboard::flex_dashboard:
    orientation: rows
---

Monthly deaths from bronchitis, emphysema and asthma in the
UK, 1974–1979 (Source: P. J. Diggle, 1990, Time Series: A
Biostatistical Introduction. Oxford, table A.3)

Col1
----------------------
### section1

定义不包含图表但包含任意内容(文本、图像和方程等)的仪表板部分 (Figure 3.3 右下角文字框)

### Pure txt

This example makes use of the dygraphs R package. The dygraphs
package provides rich facilities for charting time-series data 
in R. You can use dygraphs at the R console, within R Markdown
documents, and within Shiny applications.

用>对组件进行文字描述 (Figure 3.3 左下角图注)

### Male Deaths

[Here is a dashbord component produced by rcode]

> Monthly deaths from lung disease in the UK, 1974–1979

3.4 Navigation bar

添加链接 title/icon+href,title和icon至少有一样

---
title: "Navigation Bar"
output:
  flexdashboard::flex_dashboard:
    navbar:
      - { title: "About", href: "https://example.com/about" }
      - { icon: "fa-solid fa-book", href: "https://bookdown.org/yihui/rmarkdown/dashboards.html" }
---

添加分享 social,social选项可以包括以下任何数量的服务:“facebook”，“twitter”，“google-plus”，“linkedin”和“pinterest”。还可以指定“menu”以提供包含所有服务的通用共享下拉菜单。

---
title: "Social Links"
output:
  flexdashboard::flex_dashboard:
    social: [ "twitter", "facebook", "menu" ]
---

4 Shiny

Figure 4.1: An interactive dashboard based on Shiny

在dashboard中引入shiny

添加 runtime:shiny 到YAML

---
title: "Old Faithful Eruptions"
output: flexdashboard::flex_dashboard
runtime: shiny
---

添加global rcode，加入需要的全局数据，并设置include=FALSE

# ```{r global,include=FALSE}
library(datasets)
data(faithful)
# ```

{.sidebar} column添加shiny的input参数 (Figure 4.1 左侧 sidebar)

Column {.sidebar}#设置该列为sidebar
--------------------------------------------------

Waiting time between eruptions and the duration of the eruption
for the Old Faithful geyser in Yellowstone National Park,
Wyoming, USA.

 #```{r}
selectInput(
  "n_breaks", label = "Number of bins:",
  choices = c(10, 20, 35, 50), selected = 20
) 

sliderInput(
  "bw_adjust", label = "Bandwidth adjustment:",
  min = 0.2, max = 2, value = 1, step = 0.2
)
 #```

绘图时，使用shiny::renderPlot函数

Column
--------------------------------------------------

### Geyser Eruption Duration

#```{r}
renderPlot({
  erpt = faithful$eruptions
  hist(
    erpt, probability = TRUE, breaks = as.integer(input$n_breaks),
    xlab = "Duration (minutes)", main = "Geyser Eruption Duration",
    col = 'gray', border = 'white'
  )
  
  dens = density(erpt, adjust = input$bw_adjust)
  lines(dens, col = "blue", lwd = 2)
})
#```

也可以使用shinydashboard包创建dashboard
更多关于shiny使用

Dashboard note