<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %> - Dashboard</title>

    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="public/vendor/AdminLTE/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <!-- <link rel="stylesheet" href="public/vendor/AdminLTE/skins/_all-skins.min.css"> -->

    <% include templates/styletemplate.ejs %>
    <% include templates/scripttemplate.ejs %>
    <style>
    	body{
	    	background-color: #ecf0f5;
	    }
	    section.content{
			margin-top: 6rem;
		}
    </style>

    <!-- Custom Style for D3.js diagrams -->
    <style>
      /*Bar chart styles*/
  		.bar {
  		  fill: steelblue;
  		}

  		.bar:hover {
  		  fill: #f39c12;
  		}

  		.axis {
  		  font: 10px sans-serif;
  		}

  		.axis path,
  		.axis line {
  		  fill: none;
  		  stroke: #000;
  		  shape-rendering: crispEdges;
  		}

  		.x.axis path {
  		  display: none;
  		}

      /*Pie chart styles*/
      .arc text {
        font: 10px sans-serif;
        text-anchor: middle;
      }

      .arc path {
        stroke: #fff;
      }

      .slice path:hover{
        fill: #FFA500;
      }

	  </style>


</head>
<body>
<% include templates/header.ejs %>

<section class="content">
          <!-- Info boxes -->
          <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-12">
              <div class="info-box">
                <span class="info-box-icon bg-aqua"><i class="ion ion-filing"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">Tasks</span>
                  <span class="info-box-number"><%= resultSetTasks%></span>
                </div><!-- /.info-box-content -->
              </div><!-- /.info-box -->
            </div><!-- /.col -->
            <div class="col-md-3 col-sm-6 col-xs-12">
              <div class="info-box">
                <span class="info-box-icon bg-red"><i class="ion ion-ios-people"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">CoDr Users</span>
                  <span class="info-box-number"><%= resultSetSiteUsers%></span>
                </div><!-- /.info-box-content -->
              </div><!-- /.info-box -->
            </div><!-- /.col -->

            <!-- fix for small devices only -->
            <div class="clearfix visible-sm-block"></div>

            <div class="col-md-3 col-sm-6 col-xs-12">
              <div class="info-box">
                <span class="info-box-icon bg-green"><i class="ion ion-bookmark"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">Tasks solved</span>
                  <span class="info-box-number"><%= resultSetSolvedTasks %></span>
                </div><!-- /.info-box-content -->
              </div><!-- /.info-box -->
            </div><!-- /.col -->
            <div class="col-md-3 col-sm-6 col-xs-12">
              <div class="info-box">
                <span class="info-box-icon bg-yellow"><i class="ion ion-ios-people-outline"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">FreeCodeCamp Users</span>
                  <span class="info-box-number"><%= resultSetUsers %></span>
                </div><!-- /.info-box-content -->
              </div><!-- /.info-box -->
            </div><!-- /.col -->
          </div><!-- /.row -->

          <div class="row">
            <div class="col-md-8">
              <div class="box">
                <div class="box-header with-border">
                  <h3 class="box-title">Solved tasks on month</h3>
                  <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <div class="btn-group">
                      <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i></button>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div><!-- /.box-header -->
                <div class="box-body">
                  <div class="row">
                    <div class="col-md-8">
                      <div id="d3Barchart" class="chart">
                        <!-- 
                        <canvas id="salesChart" style="height: 180px;"></canvas> -->
                      </div><!-- /.chart-responsive -->
                    </div><!-- /.col -->
                    <div class="col-md-4" id="append-months">
                      <p class="text-center">
                        <strong>Month / #solvedTasks</strong>
                      </p>
                      <div class="progress-group">
                        <span class="progress-text">Jan</span>
                        <span class="progress-number"><b>160</b></span>
                      </div><!-- /.progress-group -->
                    </div>
                  </div><!-- /.row -->
                </div><!-- ./box-body -->
              </div><!-- /.box -->
            </div><!-- /.col -->

            <div class="col-md-4">
              <div class="box box-default">
                <div class="box-header with-border">
                  <h3 class="box-title">Task completion for given task</h3>
                  <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div><!-- /.box-header -->
                <div class="box-body">
                  <div class="row">
                    <div class="col-md-12" style="margin-left: 20%;">
                      <div class="chart-responsive">
                        <div id="d3Piechart" class="chart"></div>
                        <!-- <canvas id="pieChart" height="150"></canvas> -->
                      </div><!-- ./chart-responsive -->
                    </div><!-- /.col -->
                  </div><!-- /.row -->
                </div><!-- /.box-body -->
                <div class="box-footer no-padding">
                  <ul class="nav nav-pills nav-stacked">
                    <li><a href="#">Task Completed<span class="pull-right text-green"></i> <%= resultTaskCompletionRate %>%</span></a></li> 
                    <li><a href="#">Task Completed<span class="pull-right text-red"></i> <%= Math.round((100-resultTaskCompletionRate)*100)/100 %>%</span></a></li> 
                  </ul>
                </div><!-- /.footer -->
              </div><!-- /.box -->
            </div>
            
          </div><!-- /.row -->

          <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-12">
              <div class="info-box">
                <span class="info-box-icon bg-olive"><i class="ion ion-ios-gear-outline"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">Settings</span>
                  <a href="/settings"><span class="info-box-number">Change your settings</span></a>
                </div><!-- /.info-box-content -->
              </div><!-- /.info-box -->
            </div><!-- /.col -->
            <div class="col-md-3 col-sm-6 col-xs-12">
              <div class="info-box">
                <span class="info-box-icon bg-orange"><i class="ion ion-search"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">Datafiltering</span>
                  <a href="/datafiltering"><span class="info-box-number">Search the DB</span></a>
                </div><!-- /.info-box-content -->
              </div><!-- /.info-box -->
            </div><!-- /.col -->

            <!-- fix for small devices only -->
            <div class="clearfix visible-sm-block"></div>

            <div class="col-md-3 col-sm-6 col-xs-12">
              <div class="info-box">
                <span class="info-box-icon bg-purple"><i class="fa fa-code"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">Check REST API</span>
                  <a href="/help/rest"><span class="info-box-number">Check documentation</span></a>
                </div><!-- /.info-box-content -->
              </div><!-- /.info-box -->
            </div><!-- /.col -->
            <div class="col-md-3 col-sm-6 col-xs-12">
              <div class="info-box">
                <span class="info-box-icon bg-maroon"><i class="ion ion-email"></i></span>
                <div class="info-box-content">
                  <span class="info-box-text">Contact</span>
                  <a href="/#contact"><span class="info-box-number">Send it here</span></a>
                </div><!-- /.info-box-content -->
              </div><!-- /.info-box -->
            </div><!-- /.col -->
          </div>
      </section>


    <!-- D3.js -->
	<script src="public/javascripts/d3.v3.min.js"></script>
  <!-- <script src="/public/vendor/d3/d3.min.js"></script> -->

  <!-- Bar chart -->
	<script>
		var margin = {top: 20, right: 20, bottom: 30, left: 40},
		    width = 500 - margin.left - margin.right,
		    height = .7 * width;

		var x = d3.scale.ordinal()
		    .rangeRoundBands([0, width], .1);

		var y = d3.scale.linear()
		    .range([height, 0]);

		var xAxis = d3.svg.axis()
		    .scale(x)
		    .orient("bottom");

		var yAxis = d3.svg.axis()
		    .scale(y)
  		    .orient("right");

		var svg = d3.select("#d3Barchart").append("svg")
		    .attr("width", width + margin.left + margin.right)
		    .attr("height", height + margin.top + margin.bottom)
		  .append("g")
		    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

		d3.tsv("/public/data-barchart.tsv", type, function(error, data) {
		  if (error) throw error;

      console.log("each tick", data[0]["taskCount"], data[0]["taskCount"]);
      for(var i=0; i<data.length; i++){
        $("#append-months").append('<div class="progress-group"><span class="progress-text">' + data[i]["month"] + '</span><span class="progress-number"><b>' + data[i]["taskCount"] + '</b></span></div>');
      }

		  x.domain(data.map(function(d) { return d.month; }));
		  y.domain([0, d3.max(data, function(d) { return d.taskCount; })]);

		  svg.append("g")
		      .attr("class", "x axis")
		      .attr("transform", "translate(0," + height + ")")
		      .call(xAxis);

		  svg.append("g")
		      .attr("class", "y axis")
		      .call(yAxis)
		    .append("text")
		      .attr("transform", "rotate(-90)")
		      .attr("y", 6)
		      .attr("dy", ".71em")
		      .style("text-anchor", "end")
		      .text("Count");

		  svg.selectAll(".bar")
		      .data(data)
		    .enter().append("rect")
		      .attr("class", "bar")
		      .attr("x", function(d) { return x(d.month); })
		      .attr("width", x.rangeBand())
		      .attr("y", function(d) { return y(d.taskCount); })
		      .attr("height", function(d) { return height - y(d.taskCount); });
		});

		function type(d) {
		  d.taskCount = +d.taskCount;
		  return d;
		}

	</script>

  <!-- Pie chart -->
  <script>

    var w = 200;
    var h = 200;
    var r = h/2;
    var color = d3.scale.category20c();


    var taskCompletionPercent = <%= resultTaskCompletionRate %>;
    var taskInvert = 100 - taskCompletionPercent;

    var data = [{"label":"%Completed", "value":taskCompletionPercent}, 
                  {"label":"%Not completed", "value":taskInvert}];


    var vis = d3.select('#d3Piechart').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")");
    var pie = d3.layout.pie().value(function(d){return d.value;});

    // declare an arc generator function
    var arc = d3.svg.arc().outerRadius(r);

    // select paths, use arc generator to draw
    var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
    arcs.append("svg:path")
        .attr("fill", function(d, i){
            return color(i);
        })
        .attr("d", function (d) {
            // log the result of the arc generator to show how cool it is :)
            //console.log(arc(d));
            return arc(d);
        });

    // add the text
    arcs.append("svg:text").attr("transform", function(d){
        d.innerRadius = 0;
        d.outerRadius = r;
      return "translate(" + arc.centroid(d) + ")";}).attr("text-anchor", "middle").text( function(d, i) {
      return data[i].label;}
      );
    </script>

<script>
  ((window.gitter = {}).chat = {}).options = {
    room: 'FreeCodeCamp/FreeCodeCamp'
  };
</script>
<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>

<script>
  document.addEventListener('gitter-sidecar-instance-started', function(e) {
  var chat = e.detail.chat;
  chat.options.targetElement.forEach(function(targetElement) {
    var actionBarElement = targetElement.querySelector('.gitter-chat-embed-action-bar');
    actionBarElement.insertAdjacentHTML('afterbegin', '<div class="chat-embed-title">' + chat.options.room + '</div>');
  });
});
</script>


<!-- AdminLTE App -->
  <script src="/public/vendor/AdminLTE/app.min.js"></script>
    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
  <script src="/public/vendor/AdminLTE/pages/dashboard2.js"></script>
    <!-- AdminLTE for demo purposes -->
  <script src="/public/vendor/AdminLTE/demo.js"></script>

</body>
</html>	