|
122 | 122 |
|
123 | 123 | <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> |
124 | 124 | <script type="text/javascript"> |
125 | | - google.charts.load('current', {'packages':['gantt']}); |
| 125 | + google.charts.load("current", {packages:["timeline"]}); |
126 | 126 | google.charts.setOnLoadCallback(drawChart); |
127 | | - |
128 | 127 | function drawChart() { |
129 | | - let data = new google.visualization.DataTable(); |
130 | | - data.addColumn('string', 'Task ID'); |
131 | | - data.addColumn('string', 'Task Name'); |
132 | | - data.addColumn('string', 'Resource'); |
133 | | - data.addColumn('date', 'Start Date'); |
134 | | - data.addColumn('date', 'End Date'); |
135 | | - data.addColumn('number', 'Duration'); |
136 | | - data.addColumn('number', 'Percent Complete'); |
137 | | - data.addColumn('string', 'Dependencies'); |
| 128 | + if(project_end == null){ |
| 129 | + let projectGantt = document.getElementById('ganttContainer'); |
| 130 | + projectGantt.classList.add('hidden'); |
| 131 | + return; |
| 132 | + } |
| 133 | + var container = document.getElementById('ganttChart'); |
| 134 | + var chart = new google.visualization.Timeline(container); |
| 135 | + var data = new google.visualization.DataTable(); |
| 136 | + data.addColumn({ type: 'string', id: 'Term' }); |
| 137 | + data.addColumn({ type: 'string', id: 'Name' }); |
| 138 | + data.addColumn({ type: 'date', id: 'Start' }); |
| 139 | + data.addColumn({ type: 'date', id: 'End' }); |
138 | 140 |
|
139 | 141 | data.addRows([ |
140 | | - [project_name, project_name, project_name, |
141 | | - new Date(project_start), new Date(project_end), project_value, 100, null], |
| 142 | + [project_name, project_name, |
| 143 | + new Date(project_start), new Date(project_end)], |
142 | 144 | ]); |
| 145 | + let colorArray = ["#386671",]; |
143 | 146 |
|
144 | 147 | for(let i=0; i<activity_num; i++) { |
145 | 148 | let activityKey = document.getElementById("activityKey"+i).value; |
|
149 | 152 | let activityDays = document.getElementById("manDays"+i).value * 8; |
150 | 153 | let activityTotHoursCompiled = document.getElementById("TotHoursCompiled"+activityKey).value; |
151 | 154 | let activityPercentage = Math.round(100 * (activityTotHoursCompiled / activityDays)); |
| 155 | + let colorActivityBar = "#59a5b7" |
| 156 | + if(activityPercentage > 100) |
| 157 | + colorActivityBar = "#9b2222" |
| 158 | + else if(activityPercentage === 100) |
| 159 | + colorActivityBar = "#32c574" |
| 160 | + else if(activityPercentage === 0) |
| 161 | + colorActivityBar = "#8AB4B1" |
| 162 | + colorArray.push(colorActivityBar) |
152 | 163 | if(activityDateEnd === "") |
153 | 164 | activityDateEnd = project_end; |
154 | 165 | data.addRows([ |
155 | | - [activityKey, activityKey, activityType, |
156 | | - new Date(activityDateStart), new Date(activityDateEnd), activityDays, activityPercentage, null], |
157 | | - ]); |
| 166 | + [activityKey, "" + Math.round(activityTotHoursCompiled/8) + "/" + activityDays/8 + "gg (" + activityPercentage + "%)", |
| 167 | + new Date(activityDateStart), new Date(activityDateEnd)], |
| 168 | + ]); |
158 | 169 | } |
159 | | - let options = { |
160 | | - gantt: { |
161 | | - trackHeight: 20, |
162 | | - barHeight: 15 |
163 | | - } |
| 170 | + console.log(colorArray); |
| 171 | + var options = { |
| 172 | + rowLabelStyle: { |
| 173 | + fontSize: 10, |
| 174 | + }, |
| 175 | + backgroundColor: "#f1f7f8", |
| 176 | + colors: colorArray, |
| 177 | + height: (1+activity_num)*50, |
| 178 | + timeline: { showRowLabels: true, |
| 179 | + barLabelStyle: { |
| 180 | + fontSize: 10 |
| 181 | + }, |
| 182 | + }, |
| 183 | + |
164 | 184 | }; |
165 | | - var chart = new google.visualization.Gantt(document.getElementById('chart_div')); |
| 185 | + |
166 | 186 | chart.draw(data, options); |
167 | 187 | } |
| 188 | + window.addEventListener('resize', function(event) { |
| 189 | + drawChart(); |
| 190 | + }, true); |
168 | 191 | </script> |
169 | 192 |
|
170 | 193 |
|
| 194 | + |
171 | 195 | <section class=""> |
172 | 196 | <div class="container mt-6"> |
173 | 197 | <div class="columns"> |
|
336 | 360 | <span class="icon has-text-primary is-pulled-right mr-1" |
337 | 361 | data-tooltip="Order"> |
338 | 362 | <i class="fas fa-sort fa-lg table-button is-clickable" |
339 | | - th:onclick="'sortTable(\'activityKey\',columnList);'"></i> |
| 363 | + th:onclick="'sortTable(\'activityKey\',columnList), drawChart();'"></i> |
340 | 364 | </span> |
341 | 365 | </th> |
342 | 366 | <th class="activityTypeCol has-text-primary-dark table-header pl-2">Type |
343 | 367 | <span class="icon has-text-primary is-pulled-right mr-1" |
344 | 368 | data-tooltip="Order"> |
345 | 369 | <i class="fas fa-sort fa-lg table-button is-clickable" |
346 | | - th:onclick="'sortTable(\'activityType\',columnList);'"></i> |
| 370 | + th:onclick="'sortTable(\'activityType\',columnList), drawChart();'"></i> |
347 | 371 | </span> |
348 | 372 | </th> |
349 | 373 | <th class="dateCol has-text-primary-dark table-header pl-2">Start Date |
350 | 374 | <span class="icon has-text-primary is-pulled-right mr-1" |
351 | 375 | data-tooltip="Order"> |
352 | 376 | <i class="fas fa-sort fa-lg table-button is-clickable" |
353 | | - th:onclick="'sortTable(\'dateStart\',columnList);'"></i> |
| 377 | + th:onclick="'sortTable(\'dateStart\',columnList), drawChart();'"></i> |
354 | 378 | </span> |
355 | 379 | </th> |
356 | 380 | <th class="dateCol has-text-primary-dark table-header pl-2">End Date |
357 | 381 | <span class="icon has-text-primary is-pulled-right mr-1" |
358 | 382 | data-tooltip="Order"> |
359 | 383 | <i class="fas fa-sort fa-lg table-button is-clickable" |
360 | | - th:onclick="'sortTable(\'dateEnd\',columnList);'"></i> |
| 384 | + th:onclick="'sortTable(\'dateEnd\',columnList), drawChart();'"></i> |
361 | 385 | </span> |
362 | 386 | </th> |
363 | 387 | <th class="chargedCol has-text-primary-dark table-header pl-2">Charged |
364 | 388 | <span class="icon has-text-primary is-pulled-right mr-1" |
365 | 389 | data-tooltip="Order"> |
366 | 390 | <i class="fas fa-sort fa-lg table-button is-clickable" |
367 | | - th:onclick="'sortTable(\'charged\',columnList);'"></i> |
| 391 | + th:onclick="'sortTable(\'charged\',columnList), drawChart();'"></i> |
368 | 392 | </span> |
369 | 393 | </th> |
370 | 394 | <th class="manDaysCol has-text-primary-dark table-header pl-2">Days |
371 | 395 | <span class="icon has-text-primary is-pulled-right mr-1" |
372 | 396 | data-tooltip="Order"> |
373 | 397 | <i class="fas fa-sort fa-lg table-button is-clickable" |
374 | | - th:onclick="'sortTable(\'manDays\',columnList);'"></i> |
| 398 | + th:onclick="'sortTable(\'manDays\',columnList), drawChart();'"></i> |
375 | 399 | </span> |
376 | 400 | </th> |
377 | 401 | <th></th> |
|
490 | 514 | </div> |
491 | 515 | </div> |
492 | 516 | </div> |
493 | | - <p class="subtitle has-text-weight-bold has-text-centered has-text-primary-dark has-text-weight-semibold m-auto mt-5 mb-3">Project summary</p> |
494 | | - <div class="columns is-centered"> |
495 | | - <div class="column is-flexible"> |
496 | | - <div id="chart_div"></div> |
| 517 | + <div id="ganttContainer" class="mt-2" style="font-weight: bold;"> |
| 518 | + <p class="subtitle has-text-weight-bold has-text-centered has-text-primary-dark has-text-weight-semibold m-auto mt-5 mb-3">Project summary</p> |
| 519 | + <div class="columns is-centered"> |
| 520 | + <div class="column"> |
| 521 | + <div id="ganttChart" class="mt-3"></div> |
| 522 | + </div> |
497 | 523 | </div> |
498 | 524 | </div> |
499 | 525 | </div> |
|
0 commit comments