如何將Django Admin製作成一個輕量級的儀錶控制界面

如何將Django Admin製作成一個輕量級的儀錶控制界面——在Djongo Admin界面中添加數據匯總圖表

（文中的所有代碼都可在該連接中找到：https://gist.github.com/hakib/ec462baef03a6146654e4c095142b5eb）

Django Admin是一款強大的應用數據管理工具。但是在它界面設計中並沒有加入數據匯總圖表。幸運地是，Django Admin的開發人員讓我們能夠輕鬆實現界面定製。

下圖便是最終實現後的界面效果：

Django Admin 儀錶界面效果

我要完成這項工作的原因

有很多的工具、應用程序和軟體包都能夠生成非常美觀的儀錶界面。但是我個人覺得，大多數時候我們所需要的只是一張簡單的匯總表和一些數據統計圖，除非你是要設計一個真實的儀錶盤。

其次，不需要任何依賴，這一點同樣很重要。

如果你只是想讓你的管理界面更加完善，那麼這個方法絕對值得考慮。

設置

我們將利用Sale類來創建一個模型。

為了充分發揮Django Admin的強大功能，我們會在內置的ModelAdmin類上構建儀錶界面。

我們需要創建一個模型來實現這個目的：

使用了代理的模型能夠擴展原始模型的功能，且無需在資料庫中創建真實的表。

現在我們有了模型，接下來要做的就是定義ModelAdmin類：

因為定義的類繼承自標準ModelAdmin類，所以我們可以利用它的所有屬性。在這個例子中，我添加了一個date_hierarchy參數，可以依照創建時間來區分數據。之後的數據統計圖中我們將會用到它。

為了使管理員界面保持其原有的樣式和風格，我們將擴展Django的change_list模板，並將我們自己編寫的內容添加到result_list塊中：

到目前為止，我們的界面效果如下圖所示：

簡單的Django Admin儀錶界面

添加匯總表

傳送到模板中的內容將由ModelAdmin類通過changelist_view函數來進行填充。

要想在模板中展示表格內容，我們就得在changelist_view函數中獲取數據，並將其添加到頁面當中：

下面我們來分解一下這個過程：

1、調用super函數來讓Django實現相應的功能（填充頭部信息，麵包屑導航，查詢集，過濾器等等）。

2、從頁面內容中提取創建好的查詢集。此時將會使用任意內聯過濾器或者用戶自己選定的日期層次結構進行過濾查詢。

3、如果無法從頁面中獲取到查詢集，則很有可能是因為查詢參數無效。在這種情況下，Django將會進行重定向，因此我們不需要去干涉和回應響應。

4、按照類別來匯總總銷售額，並返回一個列表變數（下一節中我們將用到字典metrics）。

現在我們已經有了數據，只需要將其呈現在模板中：

頁面的版面風格也是很重要的。為了獲得原生的Django外觀，我們需要按照Django的展現方式來呈現表格。

下圖便是目前的界面效果：

只有一張表格的Django Admin儀錶界面

一張匯總表並不需要太多的數據統計結果。我們可以使用metrics字典並且進行一些Django ORM運算來快速求得數據統計結果。

這是一個非常酷的技巧……

下面我們把數據統計結果添加到匯總表中：

匯總表格已經基本成形：

帶有匯總表格的Django Admin儀錶界面效果

添加過濾器

由於我們使用的是「常規的」ModelAdmin類，所以過濾器已經包含在內。我們在其中添加一個設備過濾器：

效果如下圖所示：

帶有過濾器的Django Admin儀錶界面效果

添加一張統計圖

如果沒有統計圖，整個儀錶界面就顯得不夠完善，因此我們將會添加一張條形圖來展現銷售額與時間之間的關係。

為了繪製統計圖，我們將會使用純HTML語句和一些很好用的帶有flexbox的在線CSS樣式表。為了讓數據能夠對應條形圖中長條的高度，這些數據將會按照時間順序組成百分比序列。

回到changelist_view文件中，添加如下代碼：

下面我們將條形圖添加到模板當中，並為其設置相應的樣式：

對於那些不熟悉flexbox的人來說，需要解釋一下上面這段CSS的內容，其含義是「從下往上畫，向左對齊，調整寬度為適應」。

現在的儀錶界面效果如下所示：

帶有基本的統計圖的Django Admin儀錶界面效果

效果看起來還不錯，但是……圖表中的每根長條只代表一天。如要我們嘗試只展示一天的數據將會發生什麼？如果是展示數年內的數據又會發生什麼？

數年內的每日數據條形圖

這樣的統計圖不僅可讀性差，而且存在危險。因為獲取如此多的數據將會淹沒伺服器，並且會產生一個非常大的HTML文件。

Django Admin有一個日期層次結構 - 讓我們看看能否根據所選的日期層次結構調整條形圖所顯示的時間範圍：

1. 如果用戶選擇顯示一天的數據，則每個長條表示一個小時的數據（最多24個長條）
2. 如果用戶選擇顯示一個月的數據，則每個長條表示一天的數據（最多31個長條）
3. 如果用戶選擇顯示一年的數據，則每個長條表示一周的數據（最多52個長條）
4. 選擇顯示多於上述三種情況之外的數據時，每個長條表示一個月的數據。

現在我們只需要對changelist_view函數進行一個很小的調整：

傳遞給Trunc函數的period值現在成為了函數參數。最終效果如下：

這是一個非常不錯的解決途徑……

英文原文：https://3perf.com/blog/link-rels/

譯者：張新英

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！