# <center><i class="fa fa-edit"></i> Dashboard with Dispenser Database Cont. </center>
###### tags: `Internship`
:::info
**Goal:**
- [x] Test the Drop Down Menu Feature
- [x] Table with Hot, Cold, Warm 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)
:::
## Test the Drop Down Menu Feature
### Query

db.raw_data.aggregate([
  {"$match": {"Timming_ISO":{ "$gte" : "$from", "$lt": "$to" } }},
  {"$project": {"ts": "$Timming_ISO", "value": "$WaterVolume"}}
]);

### Visualization

1. Change Dropdown Title
2. Add Item List to add new item to the drop down menu
3. Can redirect to a dashboard using url

:::danger
The dropdown menu feature seems to be adding each individual drop down manually. Need to figure out a way for this to be directly imported from the database (maybe through MongoDB query)
:::

### General Settings

1. Change name of graph
2. **Make sure to hit save**

### Final Product


Redirects after selecting it from dropdown menu:


## Table with Hot, Cold, Warm Water for Xinxing08
### Query

db.raw_data.aggregate([
  {"$match": {"Timming_ISO":{ "$gte" : "$from", "$lt": "$to" } }},
  {"$project": {"ts": "$Timming_ISO", "value": "$WaterTemp"}}
]);

### Visualization
1. Add new rule
1. Apply to columns named Value
1. Change column header name to Water Volume
1. Add a threshold of 35,40
- This tells us which water temperatures are above, in, or below this range (or the range for warm) by color
1. Change color mode to Cell


### General Settings

### Final Product