精讀《前端與 BI》

時間 2019-11-07

標籤精讀前端與 BI 欄目大數據简体版

原文原文鏈接

簡介

商業智能（Business Intelligence）簡稱 BI，即經過數據挖掘與分析找到商業洞察，助力商業成功。前端

一個完整的 BI 鏈路包含數據採集、數據清洗、數據挖掘、數據展示，其本質是對數據進行多維分析。前端的主要工做在數據展示環節，因爲展現方式繁多、分析模型複雜且數據量大，前端環節的複雜度很高。mysql

在 BI 作前端很是有挑戰，開發者須要充分理解數據概念，而自己複雜度較高的可視化建站也只是 BI 的基礎能力，想要建設 BI 的上層能力，好比探索式分析和數據洞察，都須要在先後端引入更復雜的計算模型。react

本文做爲一個引子，簡單介紹筆者作 BI 的經驗，後面若是有機會再寫一個系列文章對細節進行闡述。git

精讀

國內目前處於 BI 1.0 階段，也就是報表階段，所以筆者將闡述這個階段 BI 的核心開發概念。github

BI 2.0 探索式分析階段是國內數據分析最前沿領域，這部分等開發完成後再分享。

BI 1.0 階段的核心概念包括 數據集、渲染引擎、數據模型、可視化 這四個技術模塊。web

數據集

數據集即數據的集合，在 BI 領域更多指一種標準化的數據結構。算法

任何數據均可以封裝成數據集，好比 txt 文本、excel、mysql 數據庫等等。sql

數據集的基本形態是二維表格，列頭表示字段，每一行就是一份數據，數據展現就是經過對這些數據字段進行多維度分析。typescript

數據集導入

通常來講數據集導入有兩種方式，分別是本地文件上傳與數據庫連接。本地文件上傳又分爲多種文件類型處理，好比對 excel 的解析，可能還包括數據清洗；數據庫連接分析可視化導入與 SQL 輸入。數據庫

可視化導入須要提早對數據庫進行結構分析，繪製出表結構與字段結構，不用理解 SQL 也能夠進行可視化操做。

SQL 輸入能夠利用 monaco-editor 等 web 代碼編輯器做爲輸入框，最好能結合智能提示提升 sql 編寫效率。sql 智能提示能夠參考往期精讀精讀《手寫 SQL 編譯器 - 智能提示》。

數據集建模

數據集建模通常包含 維度度量建模、字段配置、層系建模。

維度度量建模須要智能分析出字段屬於維度仍是度量，通常會結合字段實際的值或者字段名來智能判斷字段類型，若是數據庫信息中已存儲了字段類型，就能夠 100% 準確歸類。

字段配置即對字段進行增刪或修改，還能夠新增聚合字段或對比字段。

聚合字段是指將一個字段表達式封裝爲一個新字段，這裏也會用到一個簡單的 sql 編輯器，只須要支持四則運算、字段提示、以及一些基本函數的組合便可。

對比字段是指新增的字段是基於已有字段在某個時間週期內的對比，好比對 UV 字段的年同比就能夠封裝爲一個對比字段。對比字段在前端技術上沒有什麼難度，僅需理解概念便可。

渲染引擎

渲染引擎包括了對報表進行編輯與渲染的引擎，理論上能夠合二爲一。

渲染引擎的重要模塊包括：畫布拖拽、組件編輯、事件中心。

畫布拖拽其實包含了組件自定義開發流程，到 CDN 發佈、CDN 加載、組件拖拽、畫布排版等一系列技術點，每一個點展開都有寫不完的細節，但好在這套功能屬於通用建站基礎功能點，本文就再也不贅述。

組件編輯中，基本屬性的編輯與屬於通用建站領域的表單模型範疇，通常經過 UISchema 來描述通用表單，這塊也再也不贅述。組件編輯的另外一部分就是數據編輯，這部分在後面數據模型章節裏詳細講。

事件中心是渲染引擎部分，此功能在編輯狀態須要禁用。這個功能能夠實現圖表聯動、上卷下鑽等數據能力。一個通用事件中心通常包括 事件觸發 與 事件響應 兩部分，基本結構以下：

interface Event {
  trigger:
    | {
        type: 'callback';
        callbackName: string;
      }
    | {
        type: 'listener';
        eventName: string;
      }
    | {
        type: 'system';
        name: string;
      };

  action:
    | {
        type: 'dispatch';
        eventName: string;
      }
    | {
        type: 'jumpUrl';
        url: string;
      }
}

trigger 即事件觸發，包括基本的系統事件 system，好比定時器或者初始化自動觸發；組件的回調 callback 好比當按鈕被點擊時；事件監聽 listener 好比另外一個事件被觸發時，這個事件可能來自於 action。

action 即事件響應，包括基本的事件觸發 dispatch，能夠觸發其餘事件，能夠構成一個事件鏈路；其餘的 action 就是數據相關，能夠用來作條件聯動、字段聯動、數據集聯動等等，由於實現各異這裏不作介紹。

事件機制還須要支持值傳遞，即事件觸發源的值能夠傳遞到事件響應方。值傳遞能夠在觸發源內部進行，好比當觸發源是回調函數時，函數參數就天然做爲值傳遞過去，觸發源經過 ...args 方式接收。

數據鑽取

配置了層系的字段均可以進行數據鑽取。層系能夠在數據集配置，也能夠在報表編輯頁配置，能夠理解爲一個順序有關的文件夾，將文件夾做爲字段使用時，默認生效的是第一個子元素，以後能夠按照順序分別進行下鑽。

好比「地區」層系包含了國家、省、市、區，那麼就能夠按照這個層級進行數據上卷下鑽。

若是一個字段是層系字段，圖表須要有對應的操做區域進行上卷下鑽，數據編輯區域也能夠進行一樣操做。數據鑽取的計算過程不在圖表內部處理，而是觸發一個狀態後，由渲染引擎將這個層系字段實例狀態改成下鑽到第 N 層，而且每下鑽一次就多拿到一列的數據，由圖表組件進行下鑽展現。

通常來講下鑽後數據還是全量的，有時候爲了不數據量過大，好比在柱狀圖點擊某個柱子進行下鑽，只想看這個柱子下鑽後的數據：好比 201七、201八、2019 年三年的數據，下鑽到月後數據量是 3 x 12 = 36 條，但若是僅在 2019 年進行下鑽，只想看 2019 年的 12 條數據，能夠轉化爲下鑽 + 篩選條件的模式：全局下鑽展開後 36 條，在 2019 年上點擊下鑽後，增長一個篩選條件（年 = 2019），這樣就達到了效果，整個流程對圖表組件是無感知的。

數據模型

與通用表單模型 UISchema 相對應，數據模型筆者稱之爲 CubeSchema，由於 BI 領域對數據的多維處理模型成爲 Cube 立方體，數據配置即表示如何對這個立方體進行查詢，所以其配置表單成爲 CubeSchema。

不論是探索式分析仍是 BI 1.0 的報表階段，數據模型的基本概念是通用的（探索式分析固定了行列，且增長了標記）：將字段放置到不一樣的區域，這些區域的劃分方式能夠按照功能：橫軸、縱軸；按照概念：維度、度量；按照探索分析思路：固化爲行、列等等。

這塊可能涉及到的技術點有：拖拽、批量選擇+拖拽、雙擊後按照維度度量自動添加、圖表切換後區域字段自動遷移、對字段拖拽的系列配置：限制數量、限制類型、限制數據集、是否重複等等。

拖拽能夠用 react-beautiful-dnd 等庫，與渲染引擎拖拽方案基本相似，遇到有層系的數據集還需支持嵌套層級的拖拽。

圖表切換後字段遷移，能夠將每一個拖拽區域設置若干類型：

{
  "dataType": ["dimension"]
}

這樣在切換後，維度類型的字段能夠自動遷移到維度類型區域，若是對應區域字段數量達到了 limit 限制，就繼續填充到下一個區域，直到字段用盡或區域填充完爲止。

若是在探索式分析場景裏，須要提早對字段進行維度度量建模，在切換時按照圖表狀況進行相應的處理。好比折線圖切換到表格的狀況：折線圖是自然一個維度（主軸） + N 個度量的場景，表格是自然兩個維度（行、列）+ 1 個度量的場景（也能夠支持多個，對單元格進行再切分便可），那麼從折線圖切換到表格時，度量就會落到標記的文本區域；若是從擁有行和列的表格切換到柱狀圖（之因此沒法切換到折線圖，是由於表格的度量值通常是離散的，而折線圖度量值通常是連續的），表格的行與列的字段會落到柱狀圖的維度軸，表現效果是對維度軸進行下鑽。