{% extends "admin/base_site_gridpivot.html" %}
{% load i18n %}

{% block extrahead %}{{block.super}}
{% if mode == "graph" and not args.0 %}<script type="text/javascript">
$(function(){ graph.header(); })
</script>{% endif %}
{% endblock %}

{% block contextmenus %}
{% include "resourcecontext.html" %}
{% include "locationcontext.html" %}
<div id="detailcontext" class="ContextMenu"><ul class="ui-menu ui-widget ui-widget-content ui-corner-all ui-state-default">
<li class="ui-menu-item"><a id="{{request.prefix}}/loadplan/{value}/?startdate__lt={enddate}&amp;enddate__gt={startdate}">{% trans 'Detail' %}</a></li>
<li class="ui-menu-item"><a id="{{request.prefix}}/resourcepegging/?theresource={value}&amp;startdate__lt={enddate}&amp;enddate__gt={startdate}">{% trans 'Pegging' %}</a></li>
</ul></div>{% endblock %}

{% block tools %}{% if args.0 %}
{% include "resourcetabs.html" %}
{% endif %}{{block.super}}
{% endblock %}

{% block before_table %}{% if args.0 %}
<div id="graph" style="clear: both; height: 400px; padding: 10px"></div>
{% endif %}{% endblock %}

{% block crosses %}
{% if args.0 %}$(function(){
  // Resize top graph
  var h = $(window).height();
  $("#graph").width($(window).width()-55).height(h>800 || h<480 ? 400 : h-380);
});{% endif %}

{% if args.0 or mode == "graph" %}
function drawGraphs(jsondata)
{
  {% if args.0 %}var margin = {top: 0, right: 100, bottom: 30, left: 50};
  {% else %}var margin = {top: 0, right: 0, bottom: 0, left: 50};
  {% endif %}var width = $({% if args.0 %}"#graph"{% else %}"#grid_graph"{% endif %}).width() - margin.left - margin.right;
  var height = {% if args.0 %}$("#graph").height(){% else %}80{% endif %} - margin.top - margin.bottom;

  // Define X-axis
  var domain_x = [];
  var bucketnamelength = 0;
  for (var i in timebuckets)
  {
    domain_x.push(timebuckets[i]['name']);
    bucketnamelength = Math.max(timebuckets[i]['name'].length, bucketnamelength);
  }
  var x = d3.scale.ordinal()
    .domain(domain_x)
    .rangeRoundBands([0, width], .1);
  var x_width = x.rangeBand();

  // Define Y-axis
  var y = d3.scale.linear().rangeRound([height, 0]);

  // Draw all graphs
  $("#grid"){% if not args.0 %}.find(".graph"){% endif %}.each(function(index)
  {
    // Create a new SVG element
    $({% if args.0 %}$("#graph").get(0){% else %}this{% endif %}).html("");
    var svg = d3.select({% if args.0 %}$("#graph").get(0){% else %}this{% endif %})
      .append("svg")
      .attr("class","graphcell")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // Build the data for d3
    var max_y = 0;
    var data = [];
    for (var bckt in timebuckets)
    {
      var tmp = jsondata['rows'][index][timebuckets[bckt]['name']];
      data.push({
        'resource': jsondata['rows'][index]['resource'],
        'bucket': bckt,
        'available': tmp[0],
        'unavailable': tmp[1],
        'setup': tmp[2],
        'load': tmp[3],
        'perc': tmp[4]
        });
      if (tmp[0] + tmp[1] > max_y) max_y = tmp[0] + tmp[1] ;
      if (tmp[1] + tmp[2] + tmp[3] > max_y) max_y = tmp[1] + tmp[2] + tmp[3] ;
    }

    // Update the scale of the Y-axis by looking for the max value
    y.domain([0,max_y]);

    // D3 visualization
    svg.selectAll("g")
      .data(data)
      .enter()
      .append("g")
      .attr("transform", function(d) { return "translate(" + x(timebuckets[d['bucket']]['name']) + ",0)"; })
      .on("click", function(d) {
          if (d3.event.defaultPrevented || d['load'] == 0) return;
          d3.select("#tooltip").style('display', 'none');
          contextMenu = $("#detailcontext");
          contextMenu.find('a').each( function() {
              $(this).attr(
                'href',
                $(this).attr('id')
                  .replace(/{value}/g, admin_escape(d['resource']))
                  .replace(/{enddate}/g, timebuckets[d['bucket']]['enddate'])
                  .replace(/{startdate}/g, timebuckets[d['bucket']]['startdate'])
                );
            });
          var coord = d3.mouse(document.body);
          contextMenu.css({
            left: coord[0],
            top: coord[1],
            display: 'block'
            });
          d3.event.stopPropagation();
        })
      .on("mouseenter", function(d) {
         graph.showTooltip(
           '<div style="text-align:center; font-weight:bold">'
           + timebuckets[d['bucket']]['name'] + "&nbsp;"
           + (Math.round(d['perc']*10)/10) + '%</div>'
           + '<table><tr><td>{{_('available')|capfirst}}</td><td style="text-align:center">'
           + (Math.round(d['available']*10)/10)
           + '</td></tr><tr><td>{{_('unavailable')|capfirst}}</td><td style="text-align:center">'
           + (Math.round(d['unavailable']*10)/10)
           + '</td></tr><tr><td>{{_('setup')|capfirst}}</td><td style="text-align:center">'
           + (Math.round(d['setup']*10)/10)
           + '</td></tr><tr><td>{{_('load')|capfirst}}</td><td style="text-align:center">'
           + (Math.round(d['load']*10)/10)
           + '</td></tr></table>'
           );
        })
      .on("mouseleave", graph.hideTooltip)
      .on("mousemove", graph.moveTooltip)
      .each(function(d) {
        var bucket = d3.select(this);
        var newtop = 0;
        var top = 0;
        var load = d['load'];
        var free = d['available'] - d['setup'] - load;
        var overload = 0;
        if (free < 0)
        {
          overload = -free;
          free = 0;
          load = d['available'] - d['setup'];
        }
        if (d['unavailable'] > 0)
        {
          newtop = top + d['unavailable'];
          bucket.append("rect")
            .attr("width", x_width)
            .attr("y", y(newtop))
            .attr("height", y(top) - y(newtop))
            .style("fill","#F6BD0F");
          top = newtop;
        }
        if (d['setup'] > 0)
        {
          newtop = top + d['setup'];
          bucket.append("rect")
            .attr("width", x_width)
            .attr("y", y(newtop))
            .attr("height", y(top) - y(newtop))
            .style("fill","#2B95EC");
          top = newtop;
        }
        if (load > 0)
        {
          newtop = top + load;
          bucket.append("rect")
            .attr("width", x_width)
            .attr("y", y(newtop))
            .attr("height", y(top) - y(newtop))
            .style("fill","#AFD8F8");
          top = newtop;
        }
        if (free > 0)
        {
          newtop = top + free;
          bucket.append("rect")
            .attr("width", x_width)
            .attr("y", y(newtop))
            .attr("height", y(top) - y(newtop))
            .style("fill","#8BBA00");
        }
        else if (overload > 0)
        {
          newtop = top + overload;
          bucket.append("rect")
            .attr("width", x_width)
            .attr("y", y(newtop))
            .attr("height", y(top) - y(newtop))
            .style("fill","#FF0000");
        }
      });

    // Display Y-Axis
    var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");
    {% if not args.0 %}
    svg.append("g")
      .attr("class", "miniaxis")
      .call(graph.miniAxis.bind(yAxis));
    {% else %}
    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

    // Display X-axis for a single resource
    var nth = Math.ceil(timebuckets.length / width * bucketnamelength * 10);
    var myticks = [];
    for (var i in timebuckets)
      if (i % nth == 0) myticks.push(timebuckets[i]['name']);
    var xAxis = d3.svg.axis()
      .scale(x)
      .tickValues(myticks)
      .orient("bottom");
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    // Display legend
    var legend = svg.append("g");
    var codes = [
      [1, "{{_('unavailable')|capfirst}}", "#F6BD0F"],
      [2, "{{_('setup')|capfirst}}", "#2B95EC"],
      [3, "{{_('load')|capfirst}}", "#AFD8F8"],
      [0, "{{_('free')|capfirst}}", "#8BBA00"],
      [0, "{{_('overload')|capfirst}}", "#FF0000"]
      ];
    for (var i in codes)
    {
      legend.append("rect")
        .attr("x", width + 82)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", codes[i][2])
        .attr("transform", "translate(0," + (i*20+10) + ")");
      legend.append("text")
        .attr("x", width + 76)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "end")
        .text(codes[i][1])
        .attr("transform", "translate(0," + (i*20+10) + ")");
    }{% endif %}
    });
}
{% endif %}
{% if args.0 or mode == "table" %}
function crosses (cellvalue, options, rowdata) {
  var result = cellvalue[0] + '<br/>' + cellvalue[1] + '<br/>' + cellvalue[2] + '<br/>';
  if (cellvalue[3] != 0.0)
    result += cellvalue[3] + "<span class='context cross fa fa-caret-right' role='detail'></span><br/>";
  else
    result += '0.0<br/>';
  if (cellvalue[4] > 95)
    result += '<span class="highutil">' + cellvalue[4] + '%</span>';
  else
    result += cellvalue[4] + '%';
  return result;
};
{% endif %}{% endblock %}

{% block extra_grid %}{% if args.0 or mode == "graph" %}loadComplete: drawGraphs,
{% endif %}{% endblock %}