本文中提到的Dashboard组分实例可参见 A Dashboard example by lmj

1 Components

Dashboard里可以包含的组分有

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

其中后四个是flexdashboard特有的。

1.1 R Graphics

当创建包含标准静态R图形仪表板时，设置fig.width和fig.height值控制图片大小。

1.2 Tabular Data

1.2.1 Simple table

简单表格采用knitr::kable调用

knitr::kable(mtcars)

1.2.2 Data Table

DT package可以将R表格显示为支持过滤、分页和排序的交互式HTML表。

install.packages("DT")

DT::datatable 函数输出表格
bPaginate = FALSE设置不分页，通过滑动展示全部数据

DT::datatable(mtcars, options = list(
  bPaginate = FALSE
))

pagelength设置一页展示多少条数据

DT::datatable(mtcars, options = list(
  pagelength =25
))

1.3 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 1.1: Three value boxes side by side on a dashboard

1.4 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 1.2: Three gauges side by side on a dashboard

1.5 Text annotations

Figure 1.3: Text annotations on a dashboard

在引入dashboard section之前，在页面顶部包含文本 (Figure 1.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 1.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 1.3 左下角图注)

### Male Deaths

[Here is a dashbord component produced by rcode]

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

设置{.no-title}不显示节标题

### All Lung Deaths {.no-title}

1.6 Navigation bar

添加链接 title/icon+href,title和icon至少有一样，设置align控制位置

---
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" ,align: left}
---

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

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

添加源代码
- 内嵌源代码 source_code: embed
- 设置连接 source_code: "https://github.com/user/repo"
```
---
title: "Source Code"
output: 
flexdashboard::flex_dashboard:
  source_code: embed
---
```

2 Shiny Basics

2.1 A shiny dashboard

Figure 2.1: An interactive dashboard based on Shiny

2.2 Using Shiny

2.2.1 Prepare

添加 runtime:shiny 到YAML在dashboard中引入shiny

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

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

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

2.2.2 Input & output

当你在一个flexdashboard中使用Shiny时，你会同时使用输入元素(例如滑块、复选框等)和输出元素(图表、表格等)。输入元素通常显示在侧边栏中，而输出显示在flexdashboard内容窗格中(也可以在单个窗格中组合输入和输出)。

下面是一个简单的例子，sliderInput设置滑块输入bins，renderplot调用输入值进行绘图

sliderInput("bins", "Number of bins:", 
            min = 1, max = 50, value = 30)

renderPlot({
  hist(faithful[, 2], breaks = input$bins)
})

Shiny Input包括
- selectInput 提供备选项输入框
- sliderInput 滑块输入调
- radioButtons 一组单选按钮
- textInput 文本输入框
- numericInput 数值输入框
- checkboxInput 复选框/Ture False输入框
- dateInput 日期输入框
- dateRangeInput 日期段输入框
- fileInput 文件输入框
Shiny Output包括
- renderPlot 输出R图形
- renderPrint 输出打印
- renderTable 输出表格
- renderText 输出字符向量
使用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)
})
#```

2.3 Input sidebar

在dashboard节标题中指定{.sidebar} 添加shiny的input参数 (Figure 2.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
)
 #```

也可以将一级标题设置为sidebar，即整个页面为sidebar

---
title: "Sidebar for Multiple Pages"
output: flexdashboard::flex_dashboard
runtime: shiny
---
  
Sidebar {.sidebar}
=====================================
# shiny inputs defined here

Page 1
=====================================  
### Chart 1
    
Page 2
=====================================     
### Chart 2

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

3 HTML Widgets

CRAN上有超过30个提供htmlwidgets的包。可以在htmlwidgets showcase中找到常用的htmlwidgets的示例使用，并在gallary中浏览所有可用的wodgets。

3.1 Leaflet

leflet用于创建支持平移和缩放的动态地图，具有各种注释，如标记、多边形和弹出窗口。

library(leaflet)
library(maps)
mapStates = map("state", fill = TRUE, plot = FALSE)
leaflet(data = mapStates) %>% addTiles() %>%
  addPolygons(fillColor = topo.colors(10, alpha = NULL), stroke = FALSE)

3.2 dygraphs

dygraphs为绘制时间序列数据提供丰富的工具，并支持许多交互功能，包括序列/点突出显示、缩放和平移。

library(dygraphs)
dygraph(nhtemp, main = "New Haven Temperatures") %>% 
  dyRangeSelector(dateWindow = c("1920-01-01", "1960-01-01"))

3.3 Plotly

Plotly通过它的ggplotly界面允许您轻松地将ggplot2图形转换为交互式的基于web的版本。

library(ggplot2)
library(plotly)
p <- ggplot(data = diamonds, aes(x = cut, fill = clarity)) +
            geom_bar(position = "dodge")
ggplotly(p)

3.4 rbokeh

rbokeh是Bokeh的接口，一个强大的声明式Bokeh框架，用于创建基于web的图。

library(rbokeh)
figure() %>%
  ly_points(Sepal.Length, Sepal.Width, data = iris,
    color = Species, glyph = Species,
    hover = list(Sepal.Length, Sepal.Width))

3.5 Highcharter

Highcharter一个JavaScript图形库的R接口。

library(magrittr)
library(highcharter)
hchart(mtcars, "scatter", hcaes(wt, mpg, z = drat, color = hp)) %>%
  hc_title(text = "Scatter chart with size and color")

FlexDashboard