| <!DOCTYPE HTML> |
| <html lang="en"> |
| |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| <!-- Plotly.js --> |
| <script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script> |
| <title> James 3 progressing tasks </title> |
| </head> |
| |
| <body> |
| <div id="myDiv" style="width: 100%; height: 800px;"> |
| <!-- Plotly chart will be drawn inside this DIV --> |
| </div> |
| <script> |
| function createChart(x, y, text, title, height) { |
| if (!height) { |
| height = 210; |
| } else if (height && (height < 400)) { |
| height = 400; |
| } |
| |
| return { |
| data: [ |
| { |
| name: 'Completion', |
| type: 'bar', |
| x: x, |
| y: y, |
| orientation: 'h', |
| text: text, |
| hoverinfo: 'x + y + text' |
| }], |
| layout: { |
| hovermode: 'closest', |
| shapes: { |
| fillcolor: '#444' |
| }, |
| title: title, |
| height: height, |
| xaxis: { |
| title: 'Percent', |
| showgrid: false, |
| zeroline: false, |
| range: [0, 100] |
| }, |
| margin: { |
| l: 400 |
| } |
| } |
| }; |
| } |
| |
| function getTaskPercent(task) { |
| if (task.hasOwnProperty('completion')) { |
| return task.completion; |
| } |
| |
| if (task.hasOwnProperty('children') && task.children.length) { |
| var sum = 0; |
| task.children.forEach(function(subtask) { |
| if (subtask.hasOwnProperty('completion')) { |
| sum += subtask.completion; |
| } else if (subtask.hasOwnProperty('children')) { |
| sum += parseInt(getTaskPercent(subtask)); |
| } |
| }); |
| return (sum / task.children.length).toFixed(0); |
| } |
| |
| return 0; |
| } |
| |
| function createCharts(jsonData) { |
| var jsonData = jsonData |
| var charts = []; |
| var dataToScan = [jsonData]; |
| while (dataToScan.length) { |
| var data = dataToScan.pop(); |
| var x = []; |
| var y = []; |
| var text = []; |
| var title = data.name; |
| var height = 10; |
| |
| data.children.forEach(function(value) { |
| x.push(getTaskPercent(value)); |
| y.push(value.name); |
| text.push('Complexity: ' + value.complexity); |
| |
| height = height + 40; |
| |
| if (value.hasOwnProperty('children')) { |
| dataToScan.push(value); |
| } |
| }); |
| |
| x.unshift(getTaskPercent(data)); |
| y.unshift('Summarize'); |
| text.unshift(''); |
| |
| if (x.length) { |
| charts.push(createChart(x, y, text, title, height)); |
| } |
| } |
| |
| return charts; |
| } |
| |
| function drawCharts(jsonData) { |
| var charts = createCharts(jsonData); |
| |
| charts.forEach(function(chart, index) { |
| var parentDiv = document.createElement('div'); |
| parentDiv.id = chart.layout.title; |
| |
| var div = document.createElement('div'); |
| var divID = 'chart-' + index; |
| div.id = divID; |
| parentDiv.appendChild(div); |
| |
| document.getElementById('myDiv').appendChild(parentDiv); |
| |
| Plotly.newPlot(div.id, chart.data, chart.layout); |
| |
| div.on('plotly_click', function(data) { |
| var pts = ''; |
| for (var i = 0; i < data.points.length; i++) { |
| //pts = 'x = '+data.points[i].x +'\ny = '+ data.points[i].y + '\n\n'; |
| pts = data.points[i].y; |
| } |
| if (document.getElementById(pts)) { |
| window.location.href = '#' + pts; |
| } else { |
| window.location.href = '#' + jsonData.name + '(summarize)'; |
| } |
| }); |
| |
| |
| }); |
| } |
| |
| function getData(callback) { |
| var req = new XMLHttpRequest(); |
| req.addEventListener('load', function() { |
| callback(JSON.parse(this.responseText)) |
| }); |
| req.open('GET', 'progress.json'); |
| req.send(); |
| } |
| |
| getData(drawCharts); |
| </script> |
| </body> |
| |
| </html> |
