此小節的範例與練習於 Lab 的 07 - Text、08 - GeoMap 與 09 - Canvas, Panel Plugins Dashboard 中，可參考最下方 Lab 章節說明啟動。

Text

除了視覺化的圖表外，有時候需要額外的文字來描述數據或操作步驟，Text 在這時候非常有用。Text 提供 Markdown、HTML 和 Code 三種類型可選，可以滿足各種需求。

Markdown

Markdown 是 John Gruber 與知名工程師 Aaron Swartz 於 2004 年發明的一種標記語言。John Gruber 當時經營 Blog，對於撰寫大量 HTML 程式碼感到厭煩，為此設計了易讀易寫的 Markdown。經過 20 年發展，Markdown 現已成為應用最廣泛的文件格式之一，許多工具支援以 Markdown 編寫，或匯出成 Markdown 格式便於跨平台使用。

如果只是想呈現基礎文字、連結、圖片、表格等，建議使用 Markdown。可以參考 https://commonmark.org/help/ 或 https://markdown.tw/。表格部分可使用 Table Generator 生成。

# Heading 1

## Heading 2

Link: [Grafana Zero to Hero](https://github.com/blueswen/grafana-zero-to-hero)

Image: ![image alt](/public/img/fav32.png)

Table:

| Group | Installed | Online | Users |
|---|---|---|---|
| Loki | 55 | 33 | 80 |
| Grafana | 79 | 70 | 122 |
| Tempo | 30 | 25 | 45 |
| Mimir | 62 | 55 | 100 |

HTML

若 Markdown 的樣式無法滿足需求，也可以使用 HTML 進行更多自訂樣式的內容呈現。

若要在 HTML 中執行 JavaScript，只有在自己維運的 Grafana 中才能啟用 disable_sanitize_html 設定。這樣，Text 面板內的 HTML 才能包含 javascript tag 並執行腳本。需要注意的是，啟用 JavaScript 會帶來 XSS 風險，需特別留意安全問題。

想若要在 HTML 中執行 JavaScript，只有在自己維運的 Grafana 中才能啟用 disable_sanitize_html 設定，啟用後 Text 內的 HTML 的 javascript tag 才會被執行。需要注意的是，啟用 JavaScript 會帶來 XSS 風險，需特別留意安全問題。

Iframe 是過去網頁中常用的標籤，可以嵌入其他網頁內容。必須要啟用 allow_embedding 設定 iframe tag 才會被正常解析，但要注要如果 Grafana 是使用 HTTPS，則嵌入的網頁也必須是 HTTPS，否則會被瀏覽器擋下。

以上提到的兩個設定都是在 Grafana Service 的 grafana.ini 設定檔中，設定檔的內容與位置設定方式如下：

# etc/grafana/grafana.ini
[panels]
disable_sanitize_html = true

[security]
allow_embedding = true

# docker-compose.yml
services:
  grafana:
    image: grafana/grafana:11.2.0
    volumes:
      - ./etc/grafana/grafana.ini:/etc/grafana/grafana.ini

Code

Text 的 Code 支援多種不同語言，包括 plaintext、html、json、yaml、typescript 等。它還能 Highlight 語法、顯示行數，並提供小地圖，讓使用者更容易理解程式碼內容。

GeoMap

GeoMap 可呈現世界地圖，並在地圖上標記圖示或圖片，適合有地理資訊的數據可視化。

地圖資料電子化已經十分成熟，這類系統通常稱為地理資訊系統 Geographic Information System（GIS），其基礎概念是透過 Layer（圖層）堆疊呈現不同資訊的整體效果。

Layer 拆解與堆疊示意圖，圖片來源：What is a layer?

Base Layer

地圖的 Base Layer 是堆疊其他各種資訊的基礎。Grafana 提供了四種 Base Layer：

1. CARTO basemap：預設的 Base Layer，包含國名、地名、路名、邊界等，圖資來源為 CARTO。
2. Open Street Map：OpenStreetMap 是開源的世界地圖，使用體感與 Google Map 相似，只需要標注來源為 OpenStreetMap 即可自由使用，所以可以在地圖右下角看到有個驚嘆號 Button 顯示圖資來源。
3. ArcGIS MapServer：ArcGIS 是 ESRI 全球最大地理資訊系統供應商的一系列工具的合稱，透過 MapServer 提供許多不同面向的地圖資源。在 Grafana 中提供的選項有 World Street Map 街道地圖、World Imagery 衛星地圖、Topographic 地形圖等。
4. XYZ Tile：XYZ Tile 是網路地圖的常用格式，許多地圖服務都支援 XYZ Tile，使用者可以匯入自訂地圖。

Map Layers

選擇 Base Layer 後，可以在其上加上其他 Layer，且每種 Layer 都可以有獨立的設定。可選的 Layer 包括：

Markers：根據座標標記圖示，支援自訂 SVG 圖案，並可根據數據欄位變化圖示大小與顏色。
Heatmap：根據數據生成熱力圖，顯示熱區，並可根據數值變化顏色。
GeoJSON：常用地理資訊交換格式，支援匯入自訂資料。
Night / Day Layer：顯示日夜狀態。
Route：Beta 功能，根據資料繪製路線。
Photos：Beta 功能，顯示資料中的圖片。
Network：Beta 功能，繪製如 Node Graph 的有向圖。

1. Markers：根據資料於指定座標標記圖示，圖示樣式可以選用內建的圓形、方形等圖案或是透過 URL 使用自訂的 SVG，大小和顏色也可以根據指定的欄位數值變化
2. Heatmap：與 Markers 類似，但是呈現的效果為 Heatmap 熱力圖，於指定的座標顯示熱區，顏色可以根據指定的欄位數值變化。
3. GeoJSON：常用的一種地理資訊交換格式，預設有提供一些範例展示，能夠透過 URL 匯入自訂的資料，例如 g0v 的 twgeojson 提供的台灣鄉鎮、投票區等地理資訊。
4. Night / Day Layer：在地圖上顯示日夜狀態的曲線。
5. Route：Beta 中功能，根據資料順序繪製連線，可以達到路線圖的效果。
6. Photos：Beta 中功能，與 Markers 類似，但會根據資料中的 URL 或影像的 Base64 encode string 顯示圖片。
7. Network：Beta 中功能，可以在地圖上繪製如 Node Graph 的有向圖。
8. 其他前面提到的四種 Base Layer 也可以用在 Map Layer 中。

其他設定

1. 位置的表示方法有三種
   1. Coords：經緯度。
   2. Geohash：將經緯度轉換成較短字串的一種編碼方式，還能夠有精度劃分的功能，較長的字串表示較小的區域，例如 wsqqqm0 可以代表台北 101 的座標，換算可以使用 https://www.movable-type.co.uk/scripts/geohash.html。
   3. Lookup：查找對應的清單取得經緯度，預設提供 Countries 國家清單、USA Sates 美國 55 州清單、Airports 機場清單，另外也可以指定 URL 透過網路取得自訂清單。
2. Initial view 起始位置
   1. Fit data，自動調整地圖大小讓所有資料都能顯示
   2. 指定經緯度與縮放比例
   3. 各大洲的中心點
   4. 直接使用在 Panel 編輯頁中的經緯度與縮放比例
3. Tooltip：Hover 圖示後顯示資料的完整資訊。

Canvas

Canvas 提供靈活的畫布功能，支援繪製各種圖形、顯示指標數值等，讓 Dashboard 呈現更具 Infographic 風格。官方的範例有像是網路流量圖、電力圖、風力發電視覺化等。

圖片來源：Panel Tests - Canvas Examples

在 Canvas 中可以任意添加 Element，目前提供比較泛用的有：

1. 圖形：雲、橢圓形、矩形、平行四邊形、三角形等
2. Metrics Value：顯示資料值
3. Text：顯示固定文字
4. Button：點擊後可以送出 HTTP Request，支援 GET、POST、PUT 與 body、header、query 參數設定
5. ICON：SVG 圖片，可以使用預設的圖示或透過 URL 取得自訂的圖示
6. Server：支援多種不同 Server 圖示，包括單台伺服器、堆疊式伺服器、DB、終端伺服器，適合用來繪製網路架構圖，Server 的狀態顏色與訊號燈還可以透過資料值指定

Canvas 雖然有許多 Element 可以讀取資料，但是目前只支援讀取一筆資料並指定要使用的欄位。所以如果需要顯示多筆資料，必須要把資料整理成一筆再顯示。

除了圖形外也可以繪製 Element 間的連線表達之間的關係，線條的格式選擇虛線或點之後還能啟用 Animate 動畫效果達到有資料在流動的感覺。

Hover Element 邊緣時會顯示小點，可以將按住連到另一個 Element 建立連線

編輯完的 Canvas 如果要鎖定不要再被編輯，要在設定裡面關閉 Inline editing，否則預設是在 Dashboard 中的瀏覽狀態也可以編輯移動 Element。

Panel Plugins

除了內建的 Visualization 外，也可以在官網的 Panel Plugins 查詢有哪些別人分享的 Visualization 或 Panel 小工具可以使用。例如 Clock、Treemap、Timepicker Buttons Panel。

Clock：顯示多個時區的當下時間

Treemap：以 TreeMap 顯示數據，資料格式跟 Bar Chart 一樣

Timepicker Buttons Panel：透過資料建立快速選擇時間的按鈕，點擊後會自動套用至 Dashboard 的時間範圍

這些已經上架在官網的 Plugins 可以直接在 Administration 的 Plugins 頁籤中找到並安裝。

Plugin 頁面中有安裝按鈕，安裝後會在 Panel 中找到新的 Visualization

Lab

範例程式碼：https://github.com/blueswen/grafana-zero-to-hero/tree/main/03-dashboard

此 Lab 會建立

1. cAdvisor：收集 Container 資料
2. Node Exporter：收集運行的機器（Node）的資料
3. Prometheus：採集 Application、cAdvisor、Node Exporter 的 Metrics
4. Grafana：
   1. 操作各種預先建立的 Visualization 示範與練習 Dashboard
   2. 查詢與顯示 Prometheus 採集到的 Metrics

Quick Start

1. 啟動所有服務

   docker-compose up -d
   

2. 檢視服務

   1. Grafana: http://localhost:3000，登入帳號密碼為 admin/admin
      1. 點擊左上 Menu > Dashboards > Provision Dashboards 即可選擇預先建立的 Dashboard

3. 關閉所有服務

   docker-compose down
   

小結

至此，我們介紹了多種 Visualization。透過視覺化工具，我們能夠更輕鬆地發現數據中的趨勢、關聯或異常。除此之外，還探索了不同的資料視覺化類型及輔助 Dashboard 的 Plugin。這些內容是我認為最常見且實用的工具與設定，如果想要了解更多，可以參考官方文件的 Visualization 章節。

參考資料

1. Grafana Documentation: Visualization
2. The History of Markdown: A Prelude to the No-Code Movement