<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>{{title}}</title>
		<meta name="viewport" content="width=device-width">

		<link rel="stylesheet" href="../node_modules/xcharts/build/xcharts.min.css">
		<link rel="stylesheet" href="/static/default.css">
		<link href="/static/bootstrap.min.css" rel="stylesheet">

		<style>
	      body {
	        padding-top: 60px;
	      }
	    </style>

		<script src="/static/d3.v3.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script src="../node_modules/xcharts/build/xcharts.min.js"></script>
		<script src="/static/bootstrap.min.js"></script>
	</head>
	<body>

	<!--[if lt IE 7]>
        <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
    <![endif]-->

    {{>menu.template}}

    <div class="container">
	    <div class="alert alert-info">
	  		<strong>What's on this page?</strong> You are currently viewing statistics of sprint <strong>{{sprint}}</strong>.
		</div>

	<h4>Burndown chart</h4>
	<figure style="width: 900px; height: 250px;" id="burndownChart"></figure>
	<ul>
		<li>green: done estimate</li>
		<li>blue: ideal estimate</li>
	</ul>

	<h4>Done estimate vs. effort (daily)</h4>
	<figure style="width: 900px; height: 250px;" id="effortChart"></figure>
	<ul>
		<li>green: done estimate</li>
		<li>blue: done effort</li>
	</ul>

	<h4>Done estimate vs. effort (total)</h4>
	<figure style="width: 900px; height: 250px;" id="totalEffortChart"></figure>
	<ul>
		<li>green: done estimate </li>
		<li>blue: done effort (total)</li>
	</ul>

	<h4>Statistics</h4>
	<p>
		Total estimate: {{statisticsSummary.totalEstimate}}<br/>
		Open estimate: {{statisticsSummary.openEstimate}}<br/>
		Total effort: {{statisticsSummary.effort}}
	</p>

	<h4>Unfinished items</h4>
	<ul>
		{{#unfinishedItems}}
		<li><a href="{{url}}" title="{{name}}">{{name}}</a></li>
		{{/unfinishedItems}}
	</ul>

	<script>
	      var data = {
		  "xScale": "ordinal",
		  "yScale": "linear",
		  "type": "line-dotted",
		  "main": [
		    {
		      "className": ".main.l1",
		      "data": [
		        {{#burndown.data1}}
		        	{ "x": {{x}}, "y": {{y}} },
    			{{/burndown.data1}}
              ]
		    },
		    {
	            "className": ".main.l2",
	            "data": [
				  {{#burndown.data2}}
		        	{ "x": {{x}}, "y": {{y}} },
	    		  {{/burndown.data2}}
	            ]
		      }
          ],
		  "comp": []
	      };

	  var tt = document.createElement('div'),
	  leftOffset = -(~~$('html').css('padding-left').replace('px', '') + ~~$('body').css('margin-left').replace('px', '')),
	  topOffset = -32;
	  tt.className = 'ex-tooltip';
	  document.body.appendChild(tt);

	  var opts = {
		  "dataFormatX": function (x) { return x; },
		  "tickFormatX": function (x) { return x; },
		  "xMin": 0,
		  "yMin": 0,
		  "mouseover": function (d, i) {
		    var pos = $(this).offset();
		    $(tt).text(d.x + ': ' + d.y)
		      .css({top: topOffset + pos.top, left: pos.left + leftOffset, position: 'absolute'})
		      .show();
		  },
		  "mouseout": function (x) {
		    $(tt).hide();
		  }
		};

      var myChart = new xChart("bar", data, "#burndownChart", opts);
      </script>

	  <script>
	      var data = {
		  "xScale": "ordinal",
		  "yScale": "linear",
		  "type": "line-dotted",
		  "main": [
		    {
	           "className": ".main.l2",
	           "type": "line-dotted",
	           "data":
	           	[
		           	{{#effortDaily.data2}}
			        	{ "x": {{x}}, "y": {{y}} },
	    			{{/effortDaily.data2}}
		          ]
			},
		    {
		      "className": ".main.l1",
		      "data": [
		      	{{#effortDaily.data1}}
		        	{ "x": {{x}}, "y": {{y}} },
    			{{/effortDaily.data1}}
		          ]
		    }
    	  ],
		  "comp": []
			};
      var myChart = new xChart("bar", data, "#effortChart", opts);
      </script>

      <script>
	      var data = {
		  "xScale": "ordinal",
		  "yScale": "linear",
		  "type": "line-dotted",
		  "main": [
		    {
	           "className": ".main.l1",
	           "data": [
	           	{{#effortTotal.data2}}
		        	{ "x": {{x}}, "y": {{y}} },
    			{{/effortTotal.data2}}
	          ]
		    },
		    {
		      "className": ".main.l2",
		      "data": [
		      	{{#effortTotal.data1}}
		        	{ "x": {{x}}, "y": {{y}} },
    			{{/effortTotal.data1}}
		          ]
		    }
    	  ],
		  "comp": []

	};
      var myChart = new xChart("bar", data, "#totalEffortChart", opts);
      </script>

      <div class="alert alert-success">
	  	<strong>Last generation</strong>: {{generationTime}}
	  </div>

      <hr>

  	{{>footer.template}}
  </div>

	</body>
</html>