mason/breeders_toolbox/progress.mas

   1
   2 <%args>
   3
   4 </%args>
   5
   6 <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
   7 <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
   8 <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
   9
  10 <& /page/page_title.mas, title => "Breeding Progress" &>
  11
  12 <& /util/import_javascript.mas, classes => [ 'CXGN.BreedersToolbox.HTMLSelect' ] &>
  13
  14   <table class="table">
  15     <tr>
  16       <th width="100">Select Trait</th>
  17
  18     </tr>
  19
  20     <tr>
  21       <td>
  22         <div id="trait_selector_div">[loading...]</div>
  23       </td>
  24
  25
  26     </tr>
  27   </table>
  28
  29   <button class="btn" id="display_stats_button">Show Stats</button>
  30
  31   <table id="progress_stats_datatable">
  32   </table>
  33   <br />
  34   <button class="btn" id="display_graph_button">Show Graph</button>
  35   <div id="trait_averages_bargraph"></div>
  36   <script>
  37 jQuery(window).ready(function () {
  38     get_select_box('traits', 'trait_selector_div', { 'name': 'trait_progress', 'id': 'trait_progress_select', 'empty': 1 });
  39
  40 });
  41
  42
  43 jQuery('#display_stats_button').click(function () {
  44     var trait_id = jQuery('#trait_progress_select').val();
  45     jQuery('#progress_stats_datatable').DataTable({
  46         ajax: '/ajax/progress?trait_id=' + trait_id,
  47         destroy: true,
  48         columns: [
  49             { "title": "year" },
  50             { "title": "average" },
  51             { "title": "std dev" },
  52             { "title": "observations [count]" }
  53         ]
  54     });
  55 });
  56
  57 jQuery('#display_graph_button').click(function () {
  58     //alert('success!');
  59     var trait_id = jQuery('#trait_progress_select').val();
  60     jQuery.ajax({
  61         url: '/ajax/progress?trait_id=' + trait_id,
  62         success: function (r) {
  63             var years = [];
  64             var averages = [];
  65             var errorUp = [];
  66             var errorDown = [];
  67             for (var i = 0; i < r.data.length; i++) {
  68                 years.push(r.data[i][0]);
  69                 averages.push(r.data[i][1]);
  70                 errorUp.push(r.data[i][1] / 1.0 + r.data[i][2] / 1.0); // im aware
  71                 errorDown.push(r.data[i][1] / 1.0 - r.data[i][2] / 1.0);
  72             }
  73             var graphData = [];
  74             for (var i = 0; i < r.data.length; i++) {
  75                 graphData.push({ "Year": years[i], "Average": averages[i], "mean + stddev": errorUp[i], "mean - stddev": errorDown[i] })
  76             }
  77             var v = {
  78                 "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  79                 "width": 600,
  80                 "height": 600,
  81                 "padding": 5,
  82                 "data": {
  83                     "values": graphData
  84                 },
  85                 "encoding": {
  86                     "x": {
  87                         //"bin": true,
  88                         "field": "Year",
  89                         "type": "ordinal",
  90                         "axis": { "labelAngle": 0 },
  91                     },
  92                 },
  93                 "layer": [
  94                     {
  95                         "mark": {
  96                             "type": "bar",
  97                             "fill": "#4C78A8",
  98                             "stroke": "black",
  99                         },
 100                         "encoding": {
 101                             "y": {
 102                                 "field": "Average",
 103                                 "type": "quantitative",
 104                             },
 105                         },
 106                     },
 107                     {
 108                         "mark": { "type": "errorband" },
 109                         "encoding": {
 110                             "y": {
 111                                 "field": "mean + stddev",
 112                                 "type": "quantitative",
 113                                 "scale": { "zero": false },
 114                                 "title": "Average"
 115                             },
 116                             "y2": { "field": "mean - stddev" },
 117                             "color": {"value": "navy"}
 118                         },
 119                     },
 120
 121                 ]
 122             }
 123             vegaEmbed("#trait_averages_bargraph", v);
 124         },
 125
 126         error: function (e) {
 127             alert('cannot show graph');
 128
 129         }
 130     });
 131 });
 132   </script>