---
# System prepended metadata

title: <center><i class="fa fa-edit"></i> Dashboard </center>
tags: [Internship]

---

# <center><i class="fa fa-edit"></i> Dashboard </center>
###### tags: `Internship`
:::info
**Goal:**
- [x] 新增/設定好Dashboard要用到的Data Source
- [x] 設定好Advanced Datatable: Data History
- [x] 設定好Singlestat: Cold Temp/ Warm Temp/ Hot Temp
- [ ] 設定好Graph: Temp History
- [ ] 設定好Grouped Bar Chart Panel: Water Usage History
- [ ] 設定好Pie Chart: Percentage of water


**Resources:**
[Dashboard access mongoDB from NTUST](https://hackmd.io/@eric248550/BkZpSMjc9)
[2021 物聯網平台實習 (ET2702301)](https://hackmd.io/1vqhIDkqQKqF907HpneANw?view)
[Management Portal](https://portal-mp-ensaas.education.wise-paas.com/console)
[Dashboard Home](https://dashboard-ruiguang-ews.education.wise-paas.com/?orgId=1)
[在Dashboard完成視覺化的設置](https://hackmd.io/@RenJhang/HJ_ruIxVF)
:::

## 新增/設定好Dashboard要用到的Data Source

![](https://i.imgur.com/dtZQ72p.png)

## 設定好Advanced Datatable: Data History
![](https://i.imgur.com/zRpwZqc.png)
![](https://i.imgur.com/enblhQb.png)
![](https://i.imgur.com/bswjK7c.png)

### 然後訂好Visualization
![](https://i.imgur.com/xSnxo4Y.png)


### 訂好General，取好該圖表的標題名稱
![](https://i.imgur.com/vLsleSO.png)

### 回到Dashboard主頁，調整此圖表的位置與大小
![](https://i.imgur.com/lWWHkFL.png)

### 如果想新增下一個圖表
![](https://i.imgur.com/jI82f9Y.png)
![](https://i.imgur.com/g2nVuW9.png)

## 設定好Singlestat: Cold Temp/ Warm Temp/ Hot Temp
### 設定好Query 
由於Singlestat只會顯示一個欄位的值，因此這裡Query只需要設這一個就好
![](https://i.imgur.com/IG6Eptl.png)

### 外觀等細節設定
![](https://i.imgur.com/s7uOpps.png)

![](https://i.imgur.com/tUh3Lwb.png)

![](https://i.imgur.com/yafSLjh.png)
