任性分析師 GT

2021年10月23日4 分鐘

Python Dash 實踐（上）——草圖設計與CSS｜教學

更新日期：4月 18

Dash 是什麼？

Dash 是以 Plotly.js 與 React.js 與 Flask 為基礎建構的套件，是一種低程式碼框架（low-code framework）的套件。不僅支援 Python，也支援 R、Julia 等語言。

官網介紹：https://dash.plotly.com/introduction

Dash 的功用？

主要是用來建置 data apps，利於呈現資料視覺化，Dashboard。Dash 提供的除了支援 Plotly 的豐富圖表之外，也有 Dropdown（下拉式選單）、按鈕以及其他網頁介面功能可使用。

Dash 官方範例

Dash Gallery 網址：https://dash.gallery/Portal/

前情提要

這次的開發原因滿特別的，因為我們公司本來就有自己的後台。報表與 Dashboard 儀表板相關的內容都主要建置在後台當中。然而，因為財務內容希望獨立不經由後台開發工程師，故由 Data Team 設計與開發。

所以才有了這個專案！

這系列文章將會以分析師視角稍微敘述身為前後端小白的我怎麼完成這項專案。大致包含以下內容：

  1. 頁面規劃

  2. CSS 選用

  3. Callback 設計

  4. 開發過程遇到的問題

本篇會先涵蓋上半部分：「頁面規劃」與「CSS 選用」。關於 Callback （含完整程式碼）與實際開發細節可參考文章下篇：Python Dash 實踐（下）—— Callback與實際案例

頁面規劃

👉 點這裡到 Demo 網站（帳號 & 密碼均為 test）

主要分成三大區塊

👉 點這裡到 Demo 網站（帳號 & 密碼均為 test）

1. 最上方 - 篩選器區塊

主要用來控制最下方財報輸出的資料範圍：

  • 下拉式選單（單選）：客戶類別

  • 日期選單：日期範圍

設定好篩選器之後，點選提交按鈕（submit）就能呈現對應資料於 <最下方 - 財務報表區塊>。

2. 中間層 - 客戶收費設定（可收合表格）

中間的第一個表格用來做客戶資料編輯，主要是提供財務部門記錄客戶的結算貨幣（Contract Currency）、匯率（FX）、抽成（Fee structure）等資訊，這些資料都將用來計算最下方財務報表。

因客戶收費細節基本上不常做調整，除非有更新合約或是其他特殊情況。因此為避免佔用太多空間，此區塊可透過按鈕（open collapse）收合。

此外，該表格可透過表格下方輸出（Export）按鈕，將表格存成 Excel 檔案下載在本機。

3. 最下方 - 財務報表（表格）

最終結果呈現的地方。

除了提供不同客戶的營收（Revenue），也會使用到 <中間層 - 客戶收費設定> 裡面的欄位來做運算（例如：將營收單位從 GBP 轉換成 Contract Currency、提供扣除 Extra cost 之後的實際營收）

此區塊不開放使用者編輯。與中間層的表格相同，可透過表格下方輸出（Export）按鈕，將表格存成 Excel 檔案下載在本機。

CSS 選用

CSS 資源

身爲前端小白，對 CSS 起初是一竅不空。看了 Dash Gallery Github 之後才稍微理解使用原理。

Dash Gallery Github：https://github.com/plotly/dash-sample-apps/tree/main/apps

另，不會寫 CSS 也不用擔心！由於 Dash 本身也提供滿多範例是直接使用 Bootstrap 套件作為 CSS 樣式模板，所以也滿建議大家可以直接套用（如下程式碼）

import dash
 import dash_bootstrap_components as dbc
 
 app = dash.Dash(__name__,
  external_stylesheets=[dbc.themes.MINTY]
  )

Bootstrap 提供的 CSS 樣式十分多元，可參考這裡

或者，如果發現裡面有些樣式不如自己預期，也可以像我一樣直接下載 CSS 檔案並做局部客製化調整，可以透過底下的 Github 找到這些樣式的 CSS 原始碼：

Dash Bootstrap CSS Github：https://github.com/tcbegley/dash-bootstrap-css

自訂 CSS 內容並套用樣式

Python Dash 程式碼裡面的 ClassName 對應的都是 CSS 檔裡面的設定。 舉例來說，底下 python 程式碼中的 className = 'page' ，就會套用 CSS 檔案裡面的 .page 區塊

# python
 
 html.Div(className = 'page', ...)

/*# CSS page style */
 
 .page {
  width: auto;
  min-height: 297mm;
  padding: 10mm;
  margin: 3mm auto;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  }

這次專案我微調的 CSS 內容：

  1. h1 - h6 標題樣式調整

  2. family-font（字型） 統一使用 Arial

  3. 增加針對 dash datatable 的格式調整：增加輸出檔案按鈕（Export）格式與位置、重新設定表格內字型

    因為 Bootstap 針對 Dash Data Table 字型的 CSS 設定我真的找不到 😓 所以只好直接去從 Gallery 裡面翻 CSS；輸出按鈕（export）則是參考了網友們提供的方案再進行微調

/*# font in data tables */
 
 .dash-spreadsheet-container .dash-spreadsheet-inner th, td{
  font-family: var(--bs-font-sans-serif)
 }
 
 /*# export button style */
 
 .export {
  color:#fff;background-color:#0d6efd;
  border-color:#0d6efd;
  display: inline-block;
  font-weight:400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border:1px solid transparent;
  padding:.575rem.75rem;
  font-size:1rem;
  line-height:1.5;
  border-radius:.25rem;
  position:absolute;
  bottom:-70px;
  margin-bottom:1.0rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}

這篇文章就先分享到這，下篇文章會提供完整程式碼，並著重描述 Callback 設計以及我在專案中遇到的問題以及解法，可點此進入：Python Dash 實踐（下）—— Callback與實際案例

希望這系列對大家有所幫助 😊

最後，如果覺得想繼續關注我的文章，歡迎留下你的 Email，或在「與我聯繫」留下你想對我說的話～

    17