rowsandall/rowers/templates/cumstats.html

{% extends "base.html" %}
{% load staticfiles %}
{% load rowerfilters %}

{% block title %}Workout Statistics{% endblock %}

{% block content %}

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
  $(function() {
  
  // Get the form fields and hidden div
  var checkbox = $("#id_water");
  var hidden = $("#id_waterboattype");

  
  // Hide the fields.
  // Use JS to do this in case the user doesn't have JS 
  // enabled.

  hidden.hide();

  
  // Setup an event listener for when the state of the 
  // checkbox changes.
  checkbox.change(function() {
    // Check to see if the checkbox is checked.
    // If it is, show the fields and populate the input.
    // If not, hide the fields.
    if (checkbox.is(':checked')) {
  // Show the hidden fields.
  hidden.show();
  } else {
  // Make sure that the hidden fields are indeed
  // hidden.
  hidden.hide();
      
      // You may also want to clear the value of the 
      // hidden fields here. Just in case somebody 
      // shows the fields, enters data to them and then 
      // unticks the checkbox.
      //
      // This would do the job:
      //
      // $("#hidden_field").val("");
    }
  });
});
</script>

<script type="text/javascript" src="/static/js/bokeh-0.12.3.min.js"></script>

<script async="true" type="text/javascript">
  Bokeh.set_log_level("info");
</script>

{{ plotscript |safe }}

<script>
    // Set things up to resize the plot on a window resize. You can play with
    // the arguments of resize_width_height() to change the plot's behavior.
    var plot_resize_setup = function () {
        var plotid = Object.keys(Bokeh.index)[0]; // assume we have just one plot
        var plot = Bokeh.index[plotid];
        var plotresizer = function() {
            // arguments: use width, use height, maintain aspect ratio
            plot.resize_width_height(true, true, true);
        };
        window.addEventListener('resize', plotresizer);
        plotresizer();
    };
    window.addEventListener('load', plot_resize_setup);
    </script>
    <style>
    /* Need this to get the page in "desktop mode"; not having an infinite height.*/
    html, body {height: 100%; margin:5px;}
    </style>


<div class="grid_12 alpha">
  <div class="grid_4 alpha">
    {% if theuser %}
    <h3>{{ theuser.first_name }}'s Workout Statistics</h3>
    {% else %}
    <h3>{{ user.first_name }}'s Workout Statistics</h3>
    {% endif %}
  </div>
  <div class="grid_2 suffix_6 omega">
    {% if user.is_authenticated and user|is_manager %}
    <div class="grid_2 alpha dropdown">
      <button class="grid_2 alpha button green small dropbtn">
        Change Rower
      </button>
      <div class="dropdown-content">
        {% for member in user|team_members %}
        <a class="button green small" href="/rowers/{{ member.id }}/cumstats/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}/p/{{ plotfield }}">{{ member.first_name }} {{ member.last_name }}</a>
        {% endfor %}
    </div>
    {% else %}
    &nbsp;
    {% endif %}
  </div>
</div>
<div class="grid_12 alpha">
  <div id="summary" class="grid_6 alpha">
  <p>Summary for {{ theuser.first_name }} {{ theuser.last_name }}
    between {{ startdate|date }} and {{ enddate|date }}</p>

  <p>Direct link for other Pro users:
    <a href="/rowers/{{ id }}/cumstats/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}/p/{{ plotfield }}">https://rowsandall.com/rowers/{{ id }}/cumstats/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}/p/{{ plotfield }}</a>
  </p>

  <form enctype="multipart/form-data" action="{{ formloc }}" method="post">
    {% csrf_token %}
    <div class="grid_2 alpha">
    <table>
      {{ optionsform.as_table }}
    </table>
    </div>
    <div class="grid_2 suffix_2 omega">
      <input type="hidden" name="options" value="options">
      <input class="grid_1 alpha button green small" value="Submit" type="Submit">
    </div>
  </form>

</div>
<div id="form" class="grid_6 omega">
  <p>Use this form to select a different date range:</p>
  <p>
    Select start and end date for a date range:
    <div class="grid_4 alpha">
      
      <form enctype="multipart/form-data" action="" method="post">
        
        <table>
          {{ form.as_table }}
        </table>
        {% csrf_token %}
    </div>
    <div class="grid_2 omega">
      <input name='daterange' class="button green" type="submit" value="Submit">	</form>
    </div>
    <div class="grid_4 alpha">
      <form enctype="multipart/form-data" action="" method="post">
	Or use the last {{ deltaform }} days.
    </div>
    <div class="grid_2 omega">
      {% csrf_token %}
      <input name='datedelta' class="button green" type="submit" value="Submit">
    </form>
    </div>
</div>
</div>
<div class="grid_12 alpha">
<div class="grid_4 alpha">
{% if stats %}
{% for key, value in stats.items %}
<h2>{{ value.verbosename }}</h2>
<div class="grid_1">
  <p>
    <a class="button blue small" href="/rowers/{{ id }}/cumstats/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}/p/{{ key }}">Plot</a>
    </p>
  </div>

  <table width="100%" class="listtable">
    <thead>
      <tr>
        <th>Metric</th>
        <th>Value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Mean</td><td>{{ value.mean|floatformat:-2 }}</td>
      </tr><tr>
        <td>Minimum</td><td>{{ value.min|floatformat:-2 }}</td>
      </tr><tr>
        <td>25&#37;</td><td>{{ value.firstq|floatformat:-2 }}</td>
      </tr><tr>
        <td>Median</td><td>{{ value.median|floatformat:-2 }}</td>
      </tr><tr>
        <td>75&#37;</td><td>{{ value.thirdq|floatformat:-2 }}</td>
      </tr><tr>
        <td>Maximum</td><td>{{ value.max|floatformat:-2 }}</td>
      </tr><tr>
        <td>Standard Deviation</td><td>{{ value.std|floatformat:-2 }}</td>
      </tr>
    </tbody>
  </table>  
{% endfor %}
{% endif %}
</div>
<div class="grid_8 omega">
  {% if cordict %}
  <div class="grid_8">
  <h2> Correlation Matrix</h2>
  <p>This matrix indicates a positive (+) or negative (-) correlation between two parameters. The Spearman correlation coefficient has values between +1 and -1. Positive correlation between two metrics means that if one metric increases, the other value is also likely to increase. Negative is the opposite. The further from zero, the higher the likelyhood.
  </p>
  <table width="90%" class="cortable">
    <thead>
      <tr>
        <th>&nbsp;</th>
        {% for key,value in cordict.items %}
        <th class="rotate"><div><span>{{ key }}</span></div></th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for key, thedict in cordict.items %}
      <tr>
        <th> {{ key }}</th>
        {% for key2,value in thedict.items %}
        <td>
          {% if value > 0.5 %}
          <div class="poscor">{{ value|floatformat:-1 }}</div>
          {% elif value > 0.1 %}
          <div class="weakposcor">{{ value|floatformat:-1 }}</div>
          {% elif value < -0.5 %}
                          <div class="negcor">{{ value|floatformat:-1 }}</div>
          {% elif value < -0.1 %}
          <div class="weaknegcor">{{ value|floatformat:-1 }}</div>
                          {% else %}
                          &nbsp;
                          {% endif %}
        </td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>  
  <div class="grid_8">
  
  {% endif %}

  <div class="grid_8">
    {{ plotdiv|safe }}
  </div>
  </div>
</div>
{% endblock %}