mason/breeders_toolbox/db_stats.mas

   1
   2 <%args>
   3 $breeding_programs
   4 </%args>
   5
   6 <& /util/import_javascript.mas, classes => [ 'd3.d3v4Min.js', 'd3pie_min.js' ] &>
   7
   8 <& /page/page_title.mas, title => 'Database Stats' &>
   9
  10 <&| /page/info_section.mas, title => "Data categories" &>
  11
  12 <table><tr><td>
  13
  14 <span id="trial_types_div"></span>
  15
  16 </td><td>
  17
  18 <span id="trials_by_breeding_programs_div"></span>
  19
  20 </td></tr>
  21 <tr><td>
  22
  23 <span id="traits_div"></span>
  24
  25 </td><td>
  26
  27 <span id="stocks_div"></span>
  28
  29 </td></tr>
  30 </table>
  31
  32
  33
  34 </&>
  35
  36 <&| /page/info_section.mas, title => "Activity - past 52 weeks" &>
  37
  38   <svg class="bargraph" width="800" height="200"></svg>
  39
  40 </&>
  41
  42 <&| /page/info_section.mas, title => "Breeding Program Summaries", collapsible=>1 &>
  43
  44 %  foreach (@$breeding_programs){
  45
  46     <div class="well">
  47
  48         <h3>Breeding Program: <% $_->[1] %></h3>
  49
  50         <&| /page/info_section.mas, title => "Trials" , collapsible=>1 &>
  51             <& /breeders_toolbox/program/trials.mas, program_id => $_->[0] &>
  52         </&>
  53
  54         <&| /page/info_section.mas, title => "Traits" , collapsible=>1 &>
  55             <& /breeders_toolbox/program/traits.mas, program_id => $_->[0], collapse_phenotypes_section => 0  &>
  56         </&>
  57
  58     </div>
  59
  60 %  }
  61
  62 </&>
  63
  64 <script>
  65   jQuery.ajax({
  66     url: '/ajax/dbstats/trial_types',
  67     error: function(response) { alert('An error occurred' + JSON.stringify(response));  },
  68     success: function(response)  {
  69   //alert('success' + JSON.stringify(response));
  70       var types_pie = new d3pie('trial_types_div', response);
  71
  72     }
  73   });
  74
  75   jQuery.ajax({
  76     url: '/ajax/dbstats/trials_by_breeding_program',
  77     error: function(response) { alert('An error occurred' + JSON.stringify(response));  },
  78     success: function(response)  {
  79       //alert('success' + JSON.stringify(response));
  80       var types_pie = new d3pie('trials_by_breeding_programs_div', response);
  81     }
  82   });
  83
  84   jQuery.ajax({
  85     url: '/ajax/dbstats/traits',
  86     error: function(response) { alert('An error occurred' + JSON.stringify(response));  },
  87     success: function(response)  {
  88       //alert('success' + JSON.stringify(response));
  89       var types_pie = new d3pie('traits_div', response);
  90     }
  91   });
  92
  93   jQuery.ajax({
  94     url: '/ajax/dbstats/stocks',
  95     error: function(response) { alert('An error occurred' + JSON.stringify(response));  },
  96     success: function(response)  {
  97       var types_pie = new d3pie('stocks_div', response);
  98     }
  99   });
 100
 101
 102
 103 jQuery.ajax( {
 104   url : '/ajax/dbstats/activity',
 105   error: function(r) { alert('An error occurred.'); },
 106   success:  function(d) {
 107      d.frequency = +d.frequency;
 108      bargraph(d);
 109   }
 110   });
 111
 112 function bargraph(data) {
 113     var svg = d3.select(".bargraph"),
 114     margin = {top: 20, right: 20, bottom: 30, left: 40},
 115     width = +svg.attr("width") - margin.left - margin.right,
 116     height = +svg.attr("height") - margin.top - margin.bottom;
 117
 118     var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
 119         y = d3.scaleLinear().rangeRound([height, 0]);
 120
 121     var g = svg.append("g")
 122       .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 123
 124     x.domain(data.map(function(d) { return d.letter; }));
 125
 126     y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
 127
 128     g.append("g")
 129       .attr("class", "axis axis--x")
 130       .attr("transform", "translate(0," + height + ")")
 131       .call(d3.axisBottom(x));
 132
 133     g.append("g")
 134       .attr("class", "axis axis--y")
 135       .call(d3.axisLeft(y).ticks(10, ""))
 136       .append("text")
 137       .attr("transform", "rotate(-90)")
 138       .attr("y", 6)
 139       .attr("dy", "0.71em")
 140       .attr("text-anchor", "end")
 141       .text("Frequency");
 142
 143   g.selectAll(".bar")
 144     .data(data)
 145     .enter().append("rect")
 146       .attr("class", "bar")
 147       .attr("x", function(d) { return x(d.letter); })
 148       .attr("y", function(d) { return y(d.frequency); })
 149       .attr("width", x.bandwidth())
 150       .attr("height", function(d) { return height - y(d.frequency); })
 151       .attr("fill", "#AAAAEE");
 152   }
 153
 154 </script>