## 環境架設

### 架設 grafana
在本機起一個環境：

docker run -p 3000:3000 -it grafana/grafana

> 預設帳號／密碼：
> - 帳號：`admin`
> - 密碼：`admin`

---
## 基本設定

### Data Source

#### 安裝 `infinity` Data Source Plugin
1. 先按底下的 `Find more data source plugins` 按鈕。
2. 搜尋 `infinity` 並安裝：
> 不確定團隊選用 infinity 的理由是什麼，猜測是因為：
> - 能整合的資料格式種類相對豐富。
> - 可以寫 transform script。

#### 加入 Data Source
（不是安裝完就沒事了。）

1. 設定 Data Source 的名稱
2. 設定 Auth（因為用的是 dummyjson 這邊先不設定）
3. 設定 Base URL
> 建議：
> - 將結尾的 / 去掉，留給 URI 當開頭。

#### 測試 Data Source（Explore）

### 安裝 Plotly Panel 外掛

#### 搜尋／安裝外掛的畫面
> Plotly Panel

---
## 實際使用：用 Plotly Panel 新增第一個 Chart

### 新增 Dashboard & Panel

#### 設定基本資訊
先設定 Panel Title。

#### 新增 Query

#### 切成 Table View 看回傳
因為預選的 Visualizations 是 Time Series，我們的 API 回傳格式不符要求，所以應該無法顯示 Chart 內容。

我們可以先切到 Table View，看 API 回傳。

### 套用 [Plotly Panel](https://grafana.com/grafana/plugins/ae3e-plotly-panel/?tab=overview) 的圖表

> Unlike the natel-plotly-panel, this plugin is **not limited to specific types of charts**. But, on the other hand, the user interface is really rough in order to let users to set all options available in Plotly.




#### 選用 chart（帶入對應的規格）
在[官方文件](https://plotly.com/javascript/)瀏覽並選用你想要套用的 Chart。
> 記得切到 javascript。

#### 設定 data
> 寫好 transform script 的時候可以把這一段拔掉。

[
  {
    "values": [
      19,
      26,
      55
    ],
    "labels": [
      "Residential",
      "Non-Residential",
      "Utility"
    ],
    "type": "pie"
  }
]

#### 設定 layout

{
  "margin": {
    "b": 0,
    "l": 0,
    "r": 0,
    "t": 0
  },
  "paper_bgcolor": "rgba(0,0,0,0)",
  "plot_bgcolor": "rgba(0,0,0,0)"
}

---
## 實際使用：串接自己的 Data Source

整理成以下要點：
- 每一道 Query 的結果都會被放到 data.series。

### 撰寫第一個 script

const seriesName = `購物車明細 I`
const filedName = `products`

const series = data.series.find((series) => series.name === seriesName)
if (!series) return {
  data: [],
  layout: {},
}
const field = series.fields.find((field) => field.name === filedName)
if (!field) return {
  data: [],
  layout: {},
}

const products = JSON.parse(field.values)


return {
  data: [
    {
      "values": products.map((product) => product.total),
      "labels": products.map((product) => product.title),
      "type": "pie"
    }
  ]
}

---