{% extends "base.html" %}

{% block headtitle %}Human Resources Dashboard{% endblock %}

{% block breadcrumbs %}
<li><a href="/">Home</a></li>
<li><a href="/hr/">Human Resources</a></li>
{% endblock %}

{% block main_content %}
<div class="page-header">
  <h1>Human Resources Dashboard</h1>
</div>
<div class="row-fluid">
  <div class="span6" id="distibution_chart"></div>
  <div class="span6" id="positions_chart"></div>
</div>
<div class="row-fluid">
	<div class="span6" id="playtimes_chart"></div>
	<div class="span6" id="online_chart"></div>	
</div>
<dl>
  <dt><a href="/hr/players/">Registered Players</a></dt>
    <dd>{{playerCount}}</dd>
  <dt>Average number of accounts by player</dt>
    <dd>{{accountsByPlayer|floatformat:2}} account / player</dd>
  <dt>Average number of characters by player</dt>
    <dd>{{chraractersByPlayer|floatformat:2}} character / player</dd>
  <dt><a href="/hr/members/unassociated/">Unassociated Characters</a></dt>
    <dd>{{unassociatedCharacters}} / {{memberCount}}</dd>
</dl>
{% endblock %}

{% block javascripts %}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
DISTRIBUTION = {{ distribution|safe }};
POSITIONS = {{ positions|safe }};
DIRECTOR_ACCESS_LVL = {{ directorAccessLvl }};
DAILYPLAYTIMES = {{ dailyplaytimes|safe }};
ONLINE = {{ online_member_count|safe }};
</script>
{% endblock %}

{% block post_javascripts %}
<script type="text/javascript">
google.load('visualization', '1', {
    packages:['corechart']
});

function extractColors() {
    var colors = new Array(DISTRIBUTION.length);
    for (var i=0 ; i < DISTRIBUTION.length ; i++) {
        var color = getCssBgColor('.row-' + DISTRIBUTION[i].color);
        if (color.lastIndexOf('#', 0) === 0) {
            color = color.substr(1);
        }
        colors[i] = color;
    }
    return colors;
}

function extractData() {
    var data = new Array(DISTRIBUTION.length);
    var legend = '';
    var members = 0;
    for (var i=0 ; i < DISTRIBUTION.length ; i++) {
        if (DISTRIBUTION[i].threshold == 0) {
            legend = 'No Roles';
        } else if (DISTRIBUTION[i].threshold == DIRECTOR_ACCESS_LVL) {
            legend = 'Directors';
        } else {
            legend = 'level < ' + DISTRIBUTION[i].threshold;
        }
        data[i] = [legend, DISTRIBUTION[i].members];
    }
    return data;
}

function drawAccessLvls() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Access Level');
    data.addColumn('number', 'Members');
    data.addRows(extractData());
    
    var options = {
      width: 450, 
      height: 350,
      //colors: extractColors(),
      title: 'Security access level distribution'
    };
    
    var chart = new google.visualization.PieChart(document.getElementById('distibution_chart'));
    chart.draw(data, options);
}

function drawPositions() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Position');
    data.addColumn('number', 'Members');
    data.addRows([
      ['Hi-Sec',   POSITIONS['hisec']],
      ['Low-Sec',  POSITIONS['lowsec']],
      ['Null-Sec', POSITIONS['nullsec']]
    ]);
    
    var options = {
      width: 450, 
      height: 350,
      //colors: ['60FC60', 'FCAF3B', 'FD5353'],
      title: 'Position of members'
    };
    
    var chart = new google.visualization.PieChart(document.getElementById('positions_chart'));
    chart.draw(data, options);
}

function getPlaytimeData(){
	var array = new Array(DAILYPLAYTIMES.length);
    for (var i=0 ; i < DAILYPLAYTIMES.length ; i++) {
        datum = DAILYPLAYTIMES[i];
        array[i] = [datum['date'], datum['time']];
    }
    return array;
}

function drawPlaytimes(){
	var data = new google.visualization.DataTable();
    data.addColumn('string', 'Day');
    data.addColumn('number', 'Total Avg.');
    data.addRows(getPlaytimeData());
    
    var options = {
      width: 350, 
      height: 350,
      //colors: ['60FC60', 'FCAF3B', 'FD5353'],
      title: 'Avg. Playtime',
      vAxis: {title: 'Hours'},
      hAxis: {title: 'Last 30 Days', direction: -1}
    };
    
    var chart = new google.visualization.AreaChart(document.getElementById('playtimes_chart'));
    chart.draw(data, options);
}

function getOnlineData(){
	var array = new Array(ONLINE.length);
    for (var i=0 ; i < ONLINE.length ; i++) {
        datum = ONLINE[i];
        array[i] = [datum['date'],datum['online']];
    }
    return array;
}

function drawOnline(){
	var data = new google.visualization.DataTable();
    data.addColumn('string', 'Day');
    data.addColumn('number', 'Online');
    data.addRows(getOnlineData());
    
    var options = {
      width: 350, 
      height: 350,
      //colors: ['60FC60', 'FCAF3B', 'FD5353'],
      title: 'Online Players',
      vAxis: {title: 'Players'},
      hAxis: {title: 'Last 30 Days', direction: -1}
    };
    
    var chart = new google.visualization.ColumnChart(document.getElementById('online_chart'));
    chart.draw(data, options);
}

google.setOnLoadCallback(drawAccessLvls);
google.setOnLoadCallback(drawPositions);
google.setOnLoadCallback(drawPlaytimes);
google.setOnLoadCallback(drawOnline);

</script>
{% endblock %}