{% extends "admin/base_site_gridpivot.html" %} {% load i18n %} {% block extrahead %}{{block.super}} {% if mode == "graph" and not args.0 %}{% endif %} {% endblock %} {% block tools %}{% if args.0 %}{% tabs "input.operation" %}{% endif %}{{block.super}}{% endblock %} {% block before_table %}{% if args.0 %}
{% endif %}{% endblock %} {% block crosses %} {% if args.0 %}$(function(){ // Resize top graph var h = $(window).height(); $("#graph").width($(window).width()-60).height(h>800 || h<480 ? 400 : h-420); });{% endif %} {% if args.0 or mode == "graph" %} function drawGraphs(jsondata) { {% if args.0 %}$("#grid").setGridHeight('100%');{% endif %} {% 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({ 'operation': jsondata['rows'][index]['operation'], 'bucket': bckt, 'locked_start': tmp[0], 'total_start': tmp[1], 'locked_end': tmp[2], 'total_end': tmp[3] }); if (tmp[1] > max_y) max_y = tmp[1] ; if (tmp[3] > max_y) max_y = 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['total_start'] == 0) return; d3.select("#tooltip").style('display', 'none'); contextMenu = $("#detail1context"); contextMenu.find('a').each( function() { $(this).attr( 'href', $(this).attr('id') .replace(/{value}/g, admin_escape(d['operation'])) .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( '
' + timebuckets[d['bucket']]['name'] + '
' + '
{{_('locked starts')|capfirst}}' + (Math.round(d['locked_start']*10)/10) + '
{{_('total starts')|capfirst}}' + (Math.round(d['total_start']*10)/10) + '
{{_('locked ends')|capfirst}}' + (Math.round(d['locked_end']*10)/10) + '
{{_('total ends')|capfirst}}' + (Math.round(d['total_end']*10)/10) + '
' ); }) .on("mouseleave", graph.hideTooltip) .on("mousemove", graph.moveTooltip) .each(function(d) { var bucket = d3.select(this); var top = y(0); if (d['locked_start'] > 0) { top = y(d['locked_start']); bucket.append("rect") .attr("width", x_width/2) .attr("x", x_width/2) .attr("y", top) .attr("height", y(0) - top) .style("fill","#113C5E") .on("click", function(d) { if (d3.event.defaultPrevented || d['total_start'] == 0) return; d3.select("#tooltip").style('display', 'none'); contextMenu = $("#detail1context"); contextMenu.find('a').each( function() { $(this).attr( 'href', $(this).attr('id') .replace(/{value}/g, admin_escape(d['operation'])) .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(); }); } if (d['total_start'] > d['locked_start']) { var newtop = y(d['total_start']); bucket.append("rect") .attr("width", x_width/2) .attr("x", x_width/2) .attr("y", newtop) .attr("height", top - newtop) .style("fill","#2B95EC") .on("click", function(d) { if (d3.event.defaultPrevented || d['total_start'] == 0) return; d3.select("#tooltip").style('display', 'none'); contextMenu = $("#detail1context"); contextMenu.find('a').each( function() { $(this).attr( 'href', $(this).attr('id') .replace(/{value}/g, admin_escape(d['operation'])) .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(); }); } top = y(0); if (d['locked_end'] > 0) { top = y(d['locked_end']); bucket.append("rect") .attr("width", x_width/2) .attr("y", top) .attr("height", y(0) - top) .style("fill","#7B5E08") .on("click", function(d) { if (d3.event.defaultPrevented || d['total_end'] == 0) return; d3.select("#tooltip").style('display', 'none'); contextMenu = $("#detail3context"); contextMenu.find('a').each( function() { $(this).attr( 'href', $(this).attr('id') .replace(/{value}/g, admin_escape(d['operation'])) .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(); }); } if (d['total_end'] > d['locked_end']) { var newtop = y(d['total_end']); bucket.append("rect") .attr("width", x_width/2) .attr("y", newtop) .attr("height", top - newtop) .style("fill","#F6BD0F") .on("click", function(d) { if (d3.event.defaultPrevented || d['total_end'] == 0) return; d3.select("#tooltip").style('display', 'none'); contextMenu = $("#detail3context"); contextMenu.find('a').each( function() { $(this).attr( 'href', $(this).attr('id') .replace(/{value}/g, admin_escape(d['operation'])) .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(); }); } }); // 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 operation 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, "{{_('locked starts')|capfirst}}", "#113C5E"], [2, "{{_('new starts')|capfirst}}", "#2B95EC"], [3, "{{_('locked ends')|capfirst}}", "#7B5E08"], [4, "{{_('new ends')|capfirst}}", "#F6BD0F"], ]; 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 = ''; if (cellvalue[0] != 0.0) result += cellvalue[0] + ' 
'; else result += '0.0
'; if (cellvalue[1] != 0.0) result += cellvalue[1] + ' 
'; else result += '0.0
'; if (cellvalue[2] != 0.0) result += cellvalue[2] + ' 
'; else result += '0.0
'; if (cellvalue[3] != 0.0) result += cellvalue[3] + ' 
'; else result += '0.0
'; return result; }; {% endif %}{% endblock %} {% block extra_grid %}{% if args.0 or mode == "graph" %}loadComplete: drawGraphs, {% endif %}{% endblock %}