[原]打造數據產品的快速原型：如何使用 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的交互式數據科學