# 【軟工】Gantt Chart

## 原型

### Wireframe
* 
[time=Sat, Oct 26, 2019 1:09 AM]

### Mockup

### Prototype

## 資料格式相關

### ChartWrapper

* Google Chart提供的Class，算是DataTable的管理器。
* [ChartWrapper的API](https://developers.google.com/chart/interactive/docs/reference#chartwrapperobject)，內含屬性和提供的function，內容可能有點多，有需要再看。

//初始化的範例
wrapper = new google.visualization.ChartWrapper({
	    chartType: 'Gantt',
	    dataTable: [['Task ID', 'Task Name', 'Start Date','End Date', 'Duration','Percent Complete','Dependencies'],
	                ['Research', 'Find sources', new Date(2015, 0, 1),new Date(2015, 0, 5), daysToMilliseconds(4),  100,  null]],
	    options: {'height': '275'},
	    containerId: 'visualization'
	  	});

### DataTable

* 甘特圖的本體，Column應該是固定的，在初始化完之後就不用動了。
* 最常會用到的應該就使用`DataTable.addRow()`來新增任務。

| Colunms | Type | Meaning |
| -------- | -------- | -------- |
| Task ID | String | 任務ID，之後可以利用該屬性來找到該任務 |
|Task Name|String|任務名稱，會顯示在甘特圖的左邊|
|Start Date|Date|開始時間|
|End Date|Date|結束時間|
|Duration|int|持續時間，預設單位是ms，請善用`daysToMilliseconds()`自動換算成天|
|Percent Complete|int|完成比例，出來的甘特圖顏色會有所不同|
|Dependencies|String|需填入**Task ID**，表示該任務需要先完成的前置任務；若無可填null。|

* 目前任務需要的資料欄位是以上這些。

---

* 目前架構：
* 網頁開啟時，初始化wrapper物件(DataTable為空的→甘特圖上沒有資料)
* 要對DataTable進行動作時，先`data = wrapper.getDataTable();`，再對`data`動作。
* 要更新甘特圖時，需要`wrapper.draw(chart_div);`畫面上才會改變。
* 我在測試時幾乎把Add的功能寫好了，現在只要新增TextBox的東西並連結上去就好。

* 其中Start Date、End Date、Duration在用`addRow()`只需要提供兩項就好，剩下一項填null，google chart也會自己幫你算好。
* 然而在ChartWrapper 裡面儲存時好像都要填入，否則會出錯(不太確定是不是我其他語法有誤)。
* 已經有提供`DataTable.toJSON()`，可以直接將內容轉JSON，因此下載的部分不用自己轉格式。
* 上傳部分還需要研究，目前我沒看到set data from JSON的東西。

## 目前需實作

* 前端設計
* 新增、刪除、修改資料
* 以JSON格式上傳下載資料
* 卷軸拉動