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

2.1 Layout by Column

Dashboard 默认按列布局，下面是一个简单的例子

---
title: "Column Orientation"
output: flexdashboard::flex_dashboard
---
    
Column
-------------------------------------
### Chart 1
   
Column
-------------------------------------
### Chart 2
 
### Chart 3

二级标题##Row创建列,一般为了突出显示,写成上述title + dash line的形式
三级标题###Chart生成一个框(可以包含一个或多个仪表板组件)

2.2 Layout by Row

可以通过设置orientation: rows改成按行分布

output:
  flexdashboard::flex_dashboard:
    orientation: rows

2.3 Scrolling Layout

默认情况下，vertical_layout=fill,图表会自动填充浏览器的高度。
如果你有很多图表，可以使用vertical_layout=scroll设置成通过滑动切换不同的图表。

---
title: "Chart Stack (Scrolling)"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: scroll
---

2.4 Tabsets

在许多情况下，选项卡tabset是比vertical_layout:scroll更好的解决方案，因为它们很容易导航。
添加{.tabset}到节标题上，下一层的内容就会以选项卡的形式排列
{.tabset-fade}切换标签时添加淡入/淡出效果

Two tabs {.tabset}
------------------
### Tab A

### Tab B

2.5 Header attributes

使用#identifier为节标题添加唯一标识符
使用{data-width=300}和{data-height=600}分别设置宽度和高度
注意key=value中间不要有空格,否则要用引号连起来，如data-navmenu="More Info"

2.6 Multiple pages

使用一级标题 # title 或者 title + equal line 设置分页

---
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.1: Multiple pages on a dashboard

页面标题显示为仪表板顶部的导航菜单(Figure 2.1)。可以通过data-icon属性将图标应用于页面标题
{data-orientation=rows}设置页面布局为横向
默认情况下，每个页面在导航栏上都有自己的顶级选项卡。但是，如果有大量的页面(超过5个)，可以使用{data-navmenu="Menu A" data-navmenu-icon="fa-bookmark"}把页面组织成导航栏上的菜单。
下面的例子将Page 1和Page 2组织到Menu A， Page 3和Page 4 组织到Memu B。

---
title: "Page Navigation Menus"
output: flexdashboard::flex_dashboard
---

Page 1 {data-navmenu="Menu A" data-navmenu-icon="fa-bookmark"}
=====================================

Page 2 {data-navmenu="Menu A"}
=====================================  

Page 3 {data-navmenu="Menu B" data-navmenu="fa-cog"}
=====================================

Page 4 {data-navmenu="Menu B"}
=====================================

和rmarkdown一样，可以采用[section title]或者[link label](#section identifier)链接不同的页面
{.hidden}可以设置隐藏页面，使它不出现在顶部导航栏，然后通过上一条的页面链接到达
下面的例子隐藏了Page 3，然后在Page 1里设置了链接[Page 3](#page-3)指向Page 3

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

Sidebar {.sidebar}
=====================================
Link to [Page 3](#page-3)

Page 2 
=====================================  

Page 3 {.hidden}
=====================================

2.7 Story board

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

创建storyboard：storyboard: true

---
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.2: An example story board

{.storyboard}将某一个页面设置为storyboard

---
title: "Storyboard Page"
output: flexdashboard::flex_dashboard
---

Analysis {.storyboard}
=========================================

### Frame 1

### Frame 2

Details
=========================================

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

***向storyboard添加评注

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

### Frame 1

*** 

Some commentary about Frame 1.

### Frame 2 {data-commentary-width=400}

*** 
Some commentary about Frame 2.

3 Themes

有多种主题可用于修改flexdashboard的基本外观。可用的主题包括:
- default
- cosmo
- bootstrap
- cerulean
- journal
- flatly
- readable
- spacelab
- united
- lumen
- paper
- sandstone
- simplex
- yeti
通过theme设置主题

---
title: "Themes"
output: 
  flexdashboard::flex_dashboard:
    theme: bootstrap
---

bootswatch提供多种主题，可以在theme里调用

---
title: "Themes"
output: 
  flexdashboard::flex_dashboard:
    theme: 
      bootswatch: minty
---

使用logo 和favicon添加图标

---
title: "Logo and Favicon"
output: 
  flexdashboard::flex_dashboard:
    logo: logo.png
    favicon: favicon.png
---

也可以使用css设置外观

---
title: "Custom CSS"
output: 
  flexdashboard::flex_dashboard:
    css: styles.css
---

4 Sizing

配置为适合页面(vertical_layout: fill)：图表高度由浏览器高度决定
配置为滚动(vertical_layout: scroll)：图表高度由fig.height决定，默认为480 pixels
可以通过将data-width和data-height属性应用于行row、列column甚至单个图表chart来修改默认的大小。这些属性设定了在相同维度(水平或垂直)中布局的图表之间的相对大小。
默认情况下，flexdashboard在图表边缘放置8个像素的填充。可以添加.no-padding属性来指定完全不填充，也可以添加data-padding属性来指定特定的像素数量。

### Chart 1 {.no-padding}

### Chart 2 {data-padding=10}

5 An example

下面是基于前文的一个例子，效果参见 Dashboard Basic Example

---
title: "Dashboard (Basic)"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    theme: readable
    navbar:
      - { title: "Author", href: "https://rpubs.com/Chris622" }
      - { icon: "fa-solid fa-book", href: "https://rpubs.com/Chris622/FlexDashboard-basic" }
    social: [ "twitter", "facebook", "menu" ]
---

Col-based Layout {#col-layout data-icon="fa-solid fa-file" data-navmenu="Layout" data-navmenu-icon="fa-regular fa-folder"}
===============================

这是一个按列布局的例子，按行布局参见：[row-layout](#row-layout)

This is an example for row-based Layout,you can refer to [row-layout](#row-layout)

col1 {data-width=550}
----------------------

### chart 1 

> 这是一个宽度为550的图表框 This is a chart box with a width of 550 

col2{.tabset .tabset-fade data-width=300}
----------------------

### chart 2 

> 这是一个宽度为300的图表框的一个选项卡 This is a TAB for a chart box of width 300

### chart 3


> 这是一个宽度为300的图表框的另一个选项卡 This is another TAB of a chart box of width 300

Row-based Layout {#row-layout data-icon="fa-regular fa-file" data-navmenu="Layout" data-orientation=rows}
===============================

这是一个按行布局的例子，按列布局参见：[col-layout](#col-layout)

This is an example for row-based Layout,you can refer to [col-layout](#col-layout)

row1 {data-heigh=550}
----------------------

### chart 1 

> 这是一个高度为550的图表框 This is a chart box with a height of 550 

col2{.tabset .tabset-fade data-heigh=300}
----------------------

### chart 2 

> 这是一个高度为300的图表框的一个选项卡 This is a TAB for a chart box of height 300

### chart 3

>这是一个高度为300的图表框的另一个选项卡 This is another TAB for a chart box of height 300

Story board {#story data-icon="fa-solid fa-book"  data-orientation=cols .storyboard}
===============================

### Frame 1


*** 
这是关于Frame1的注释

Some commentary about Frame 1.

### Frame 2 {data-commentary-width=400}



*** 
这是关于Frame2的注释

Some commentary about Frame 2.

FlexDashboard (basic)

FlexDashboard (basic)

1 Flexdashboard

1.1 Install package

1.2 Usage

2 Layout

2.1 Layout by Column

2.2 Layout by Row

2.3 Scrolling Layout

2.4 Tabsets

2.5 Header attributes

2.6 Multiple pages

2.7 Story board

3 Themes

4 Sizing

5 An example