<!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>