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

3

概述

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

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

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

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

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

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

clipboard.png

制作工艺

让我们来看看这样一个 MVC 工作流(Model + Visz + Controller):

clipboard.png

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

clipboard.png

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

clipboard.png

什么是 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")
\```

clipboard.png

clipboard.png

点石成金

首先,静态图例可以通过 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是在Rmarkdownshinyhtmlwegit之上结出的果实。

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

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

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

参考资料


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...