測試平臺-flask_admin+mongodb+pyechart 實現堆疊和翻頁

池小波發表於2020-06-17

該文原創為新潮質量保障技術團隊中的 “上進的中年軟體測試從業者”，用於技術交流分享

拖延症患者還是拖到最後時刻來寫這一期的內容。本來這次要寫上一篇的續集或者各種架構圖的畫法（手有餘糧，心裡不慌），思來想去還是把最容易忘的點寫一下，以便加深印象。廢話不多述，直接上乾貨。

開篇

圖表的作用非常直接，直觀、易讀、一目瞭然。通過圖表我能知道最近的版本迭代情況，通過圖表我能知道最近的人力分佈情況。同時持久化的資料，能讓圖表講故事，告訴我們正在發生什麼，以及即將會發生什麼。

近些年大資料很火，大資料的背後是有資料模型和演算法作為支撐，讓資料成為反哺業務的價值體現。那對於業務或者決策層來說，他們看到的還是各種會講故事的圖表。

背景

在日常的工作開展中，不管是專案付出、團隊貢獻、執行質量、績效考核，最離不開的就是冰冷的資料。所以要想做到一定程度的公正、公平和公開，需要一定的規範來約束工作行為，做到工作留痕。很多小夥伴工作中不善於總結、歸檔資料，要寫年終總結或者述職報告的時候發現沒什麼可寫的，而有另外一小部分小夥伴卻恰恰相反，能夠讓自己的報告充實且豐富。

在移動網際網路行業，不同職級的所承載的能力和期望值是不一樣的。

以上是我對各職級所應該具備能力的一個籠統的歸納。結合自身資料和行業標準，或許這些能夠告訴我們接下來應該怎麼做。

調研

之前有介紹過測試平臺的報表系統測試平臺之報表系統，裡面有介紹為什麼選擇pyechart作為技術選型來實現報表。除了開源和較多的社群外，跨語言也是它的一大特色，所以很可能用flask_admin+pyechart實現過程遇到的問題，會在stack Overflow上面看到js+echart的解決方案。

實現過程

我們這次要介紹的是資料堆疊和多標籤翻頁功能。

資料堆疊

顧名思義就是要有一個資料累加的效果，以便能夠通過一張圖就能看到過程資料和彙總資料。

那麼首先我們就要獲取過程資料，熟悉我們測試平臺的小夥伴都知道我們用的是MongoDB作為主要的資料庫儲存，MongoEngine作為資料的持久化中介軟體。

聚合工具

熟悉MySQL語句的小夥伴知道根據條件彙總資料我們可以採用group by；對於MongoDB來說，資料聚合函式aggregate提供了豐富的資料整合場景：

- 如MySQL的欄位擷取，資料轉換。

- 如MySQL的返回資料限制limit。

- 如MySQL的order by排序功能。

具體請參照：https://docs.mongodb.com/manual/aggregation/

生成pipeline

有了具體的辦法之後，就可以生成aggregate需要的pipeline來獲取自己想要的資料了，如：

[{'$project': {'updated': {'$substr': ['$updated', 0, 7]}, 'project': 1}}, {'$match': {'updated': {'$gte': '2019-06'}}, {'$group': {'_id': {'project': '$project', 'updated': '$updated'}, 'count': {'$sum': 1}}}, {'$limit': 1000}]
生成聚合資料

IssuesForm.objects( updated__gte=(datetime.datetime.now() - datetime.timedelta(days=365)).strftime("%Y-%m"), status=u"關閉").aggregate(*pipeline, batchSize=1000)

batchSize的作用

由於資料量比較大，在執行的過程中發現程式執行和Navicat客戶端執行的效果不一樣，程式會有資料少的情況，查了pipeline、objects的過濾條件、程式碼邏輯。最後還是通過debug發現每次返回的資料都是100條，然後一路追蹤原始碼：queryset->aggregate->pymongo.collection.aggregate找到了可以修改預設拉取資料的引數batchSize。

堆疊資料的渲染

echart圖表生成過程就不過贅述了，可以參照之前寫的文章學習。這裡只講堆疊過程的實現：

add_yaxis(series_name=series["series_name"], yaxis_data=series["yaxis_data"], color=Faker.rand_color(), is_selected=is_selected, stack="same stack name“)
Y軸的資料可以新增很多次，只需要把stack命名為相同的名稱就可以實現堆疊的效果，如下圖：