[原]打造数据产品的快速原型：如何使用 flexdashboard 制作dashboard

概述

2016年制作 Dashboard 是一种怎样的体验？我们想要的：

响应式+自适应+移动先行+敏捷开发+模块化+微服务+单页面应用，

相信这些一定已经成为了前端开发的标准配置。那我们需要使用

yarn+jquery+react+nodejs+webpack+seajs+echarts

等等前端工具才能完成我们的数据可视化吗？

2016年的Dashboard已经不一定需要如此复杂的前端组件了，由于Dashboard已经是一个较为成熟的领域，常用的组件已经模块化，而Dashboard最为复杂的部分其实在于 响应式钻取交互分析，而数据处理这件事情其实并不是前端工程师最擅长的事情，如果可以让最擅长数据处理的人来完成 多图表 响应式 交互式 钻取分析那么这不失为一种好的解决方案。本文将讨论在R语言中使用 flexdashboard的dashboard开发方法，用markdown完成dashboard不是梦。

制作工艺

让我们来看看这样一个 MVC 工作流（Model + Visz + Controller）：

1.首先，数据分析师接到产品运营团队的Dashboard需求，数据分析师在服务器上写一些简单的SQL，对数据进行初步分析。

2.然后，通过初步分析明确了需要的数据范围，向DBA申请某区间数据，完成数据源 Models 的定义。==》Model
3.接着，写了一连串的SQL语句做数据的进一步分析，这里实际上就是定义了一些 DAG（通常在R中可以组合使用sqldf(小数据集)或者dplyr（大数据集）来流畅完成）==》Controller
4.最后，数据再经过图层叠加、分组、切面、交互式、自适应等等方式渲染做数据可视化。==》Visz

什么是 flexdashboard

flexdashboard 是一个基于Rmarkdown的仪表盘，易于编排和发布，且兼容移动端显示。一方面，由于flexdashboard可以利用htmlwidgets套件来完成丰富的可视化工作，比如柱状图、折线图、表格等等，所以在图表呈现方面非常惊艳。另一方面，它还允许运行在shiny服务器上，支持响应式编程特性，通过可交互的界面操作就可以完成直观的数据钻取工作。

flexdashboard真的使得制作Dashboard的成本和效率得到了提升！

flexdashboard 语法归纳

排版语法（HTML）

组件	语法	布局	元素
标题	#	=======	Page
方向	##	-------------	Column (或者 Row 如果在yaml中选择 orientation: row)
区块	###		Box

元素配置（CSS）

配置	效果
{.mobile}	只在移动端显示
{.no-mobile}	移动端不显示
{.no-padding}	无边距图标 (默认边距8像素)
{.no-title}	去除组件名称
{.sidebar}	以左侧边栏显示
{.storyboard}	添加故事板(也可以在yaml中配置 storyboard: true)
{.tabset}	以选项卡方式显示子页面
{.tabset-fade}	添加带有渐变效果的选项卡
{data-padding=10}	数据填充边距设置 （默认边距10像素）
{data-height=650}	设置组件的相对高度
{data-width=350}	设置组件的相对宽度
{data-icon="fa-list"}	增加字体或者图标作为菜单栏标志
{data-orientation=rows}	设置页面布局方向
{data-navmenu="Menu A"}	菜单栏设定
{data-commentary-width=400}	故事板组件的相对宽度

Yaml全局配置

例子：

---
title: "FinanceR"
output:
 flexdashboard::flex_dashboard:
 orientation: rows
 vertical_layout: scroll
---

配置项	描述
css	css文件路径 添加CSS皮肤
favicon	图标路径 添加favicon图标
logo	图片路径 导航栏左侧图标
navbar	形如 - {title: "A", href: "URL", align: left} 添加菜单栏
orientation	以 rows 或 columns 为布局方向
social	["facebook", "FinanceR", "github","linkedin", "weibo", 或者 "menu"] 连接到社交网站
source_code	是否显示源码
storyboard	(true / false) 是否添加故事版
theme	默认皮肤:default 也可以选择：cosmo,bootstrap,cerulean,journal,flatly,readable,spacelab,united,lumen,paper,sandstone,simplex,yeti
vertical_layout	是否使用自适应风格，自动填补或滚动元素大小

故事板：面向VC

利用故事版，可以循序渐进地讲解某个业务场景的生命周期。
下面是一个storyboard 在移动端和PC端的显示效果：

### 菜单栏名称 {.storyboard}
\```{r}
library(d3heatmap)
d3heatmap(mtcars, scale="column",
 colors="Blues")
\```

点石成金

首先，静态图例可以通过 htmlwiget 的valueBox等函数快速制图

### Downloads per sec (last 5 min)

\```{r}
htmlwiget::valueBox(
 value = rate,
 icon = "fa-area-chart",
 color = if (rate >= 3) "warning" else "primary"
 )
\```

然后，在yaml中声明 runtime: shiny 就可以开启动态图表模式，当然相应的图表应该在后面追加上 renderValueBox() 函数：

htmlwiget::valueBox(
 value = rate,
 icon = "fa-area-chart",
 color = if (rate >= 3) "warning" else "primary"
 )  %>% renderValueBox()

这样ValueBox就变成可以实时现实数据的仪表了（通过R驱动）。

总结

flexdashboard 意在快速制作dashboard，它制作dashboard的速度比shinydashboard还要来得快，然而flexdashboard框架的设计理念是运用在一些足够快速但是富有约束的场景，在产品变得复杂的情况下，整个源码又可以切换到 shinydashboard 之中来满足工程化的需求。可以说flexdashboard是在Rmarkdown、shiny、htmlwegit之上结出的果实。

在使用flexdashboard的过程中，目前，调整一些局部的细节变得相对困难，这里比较怀念zeppelin中可以通过直接选择column的宽度来调整排版（基于boostrap），有些地方图表和显示并不一定能满足最终客户的需求，不过我相信在和用户讨论需求的环节中，flexdashboard肯定会成为你趁手的武器。

目前，zeppelin中尚且不能完美支持DT::datatable、plotly::ggplotly等等方式的作图，也不支持shiny，相信在未来的不久zeppelin应该会和flexdashboard相互融合。

小技巧：flexdashboard 允许在多个 block 中并行运行多个 shiny server 实例，这意味着我们的代码复用更为方便。

参考资料

• flexdashboard 官网

• storyboard 经典案例

• formidable

• awesome-dashboard

• kibana

• kylin-mondrian-saiku

• pydashie

• Ask HN: Anything better than Tableau for data viz, dashboards?

• grafana

• 大数据分析平台搭建教程：基于Apache Zeppelin Notebook和R的交互式数据科学