臺北城市儀表板開發指南 — 2. 建立組件

前文說明了如何建置環境，本篇將說明如何「不修改程式」，建立一個新的組件。

建立組件流程#

以下為建立組件的流程，要先構思組件

構想一個組件的主題，尋找相關的開放資料，整理資料
規劃圖表的呈現方式，如：折線圖、長條圖，可以選擇多種圖表，圖表種類見官方文件

再來就可以建立組件，建立過程目前無法在後台完成，需要操作資料庫

匯入開放資料到 data 資料庫
寫入組件參數到 manager 資料庫
到後台將組件加入儀表板

第一步、構思組件#

這裡提供一個範例，關於雙北的公有市場，想要分析雙北各區的公有市場數量，以行政區圖（DistrictChart）、橫向長條圖（BarChart）。

找到相關的開放資料：

將上面資料進行整理，列出相關欄位包含名稱、地址、市、區、經緯度，由於新北市資料沒有經緯度，使用地址透過 Google Maps 來取得經緯度。

第二步、匯入開放資料到 data 資料庫#

將上面整理好的資料匯入 data 資料庫，位於 dashboard.public ，資料表命目為 market，我這裡使用 Navicat 匯入工具，將 CSV 匯入到資料庫。

臺北城市儀表板對於資料庫的結構、設計、命名，沒有任何規範，將整理好的資料匯入即可。

第三步、寫入組件參數到 manager 資料庫#

manager 中的 dashboardmanager.pubic 資料庫有三個相關的資料表要寫入，：

1. components 表：組件的主表#

組件 ID (index)：組件唯一識別，下面的表都會用到
名稱 (name)：中文名稱

components table

components table

2. component_charts 表：組件的參數表#

組件 ID (index)
顏色 (color)：圖表用的顏色
圖表類型 (types)：詳見官方文件
單位 (unit)：資料的單位，如：條、輛

component_charts table

component_charts table

3. query_charts 表：圖表設定檔#

組件 ID (index)
文字描述 (short_desc, long_desc, use_case)
資料來源連結 (links)
資料樣式 (query_type)：包含二維資料、三維資料，詳見官方文件
SQL 語法 (query_chart)：從 data 資料庫讀取資料的 SQL 語法
城市(city)：taipei 為台北市資料，matrotaipei 為雙北資料

了解了上面表單資訊要來匯入資料，SQL 語法如下，query_charts 會需要新增兩筆，分別為雙北、台北，這裡使用二維資料。

1
-- 新增components
2
INSERT INTO "public"."components" (
3
  "index",
4
  "name"
5
) VALUES (
6
  'market_map',
7
  '公有市場地圖'
8
);
9

10
-- 新增component_charts
11
INSERT INTO "public"."component_charts" (
12
  "index",
13
  "color",
14
  "types",
15
  "unit"
16
) VALUES (
17
  'market_map',
18
  '{#24B0DD,#56B96D,#F8CF58,#F5AD4A,#E170A6,#ED6A45,#AF4137,#10294A}',
19
  '{DistrictChart,BarChart}',
20
  '個'
21
);
22

23
-- 新增query_charts：雙北
24
INSERT INTO "public"."query_charts" (
25
  "index",
26
  "time_from",
27
  "source",
28
  "short_desc",
29
  "long_desc",
30
  "use_case",
31
  "links",
32
  "contributors",
33
  "query_type",
34
  "query_chart",
35
  "city"
36
) VALUES (
37
  'market_map',
38
  'static',
39
  '主計處',
40
  '短說明',
41
  '長說明',
42
  '情境說明'
43
  '{https://data.taipei/dataset/detail?id=89bebb3a-990d-4070-bd67-631a575f6d4a,https://data.ntpc.gov.tw/datasets/785be91a-caaf-4e1c-91d6-f7d616d31a45}',
44
  '{doit,ntpc}',
45
  'two_d',
46
  'SELECT district AS x_axis, COUNT(*) AS data FROM public.market GROUP BY district;',
47
  'metrotaipei'
48
);
49

50
-- 新增query_charts：台北市
51
INSERT INTO "public"."query_charts" (
52
  "index",
53
  "time_from",
54
  "source",
55
  "short_desc",
56
  "long_desc",
57
  "use_case",
58
  "links",
59
  "contributors",
60
  "query_type",
61
  "query_chart",
62
  "city"
63
) VALUES (
64
  'market_map',
65
  'static',
66
  '主計處',
67
  '短說明',
68
  '長說明',
69
  '情境說明'
70
  '{https://data.taipei/dataset/detail?id=89bebb3a-990d-4070-bd67-631a575f6d4a,https://data.ntpc.gov.tw/datasets/785be91a-caaf-4e1c-91d6-f7d616d31a45}',
71
  '{doit,ntpc}',
72
  'two_d',
73
  'SELECT district AS x_axis, COUNT(*) AS data FROM public.market WHERE city = ''臺北市'' GROUP BY district;',
74
  'taipei');

第四步、到後台將組件加入儀表板#

到管理員後台「雙北儀表板示範」，新增一個公開儀表板，選擇我們建立好的組件

後台

回到儀表板就會看到建立好的儀表板，可以切換雙北、台北，並有說明文字