prototype fitness-progress chart

rowers/interactiveplots.py

@@ -628,7 +628,95 @@ def interactive_forcecurve(theworkouts,workstrokesonly=False):
 
     return [script,div,js_resources,css_resources]
 
-                       
+def fitnessmetric_chart(fitnessmetrics,user,workoutmode='rower'):
+
+    power4min = [int(m.PowerFourMin) for m in fitnessmetrics]
+    power2k = [int(m.PowerTwoK) for m in fitnessmetrics]
+    power1hr = [int(m.PowerOneHour) for m in fitnessmetrics]
+    dates = [m.date for m in fitnessmetrics]
+    mode = [m.workoutmode for m in fitnessmetrics]
+
+    df = pd.DataFrame(
+        {'power4min':power4min,
+         'power2k':power2k,
+         'power1hr':power1hr,
+         'date':dates,
+         'dates':dates,
+         'mode':mode
+         })
+
+
+    df = df[df['power2k']>0]
+    df = df[df['mode']==workoutmode]
+
+    groups = df.groupby(by='date').max()
+
+    power4min = groups['power4min']
+    date = groups['dates']
+    power2k = groups['power2k']
+    power1hr = groups['power1hr']
+
+    source = ColumnDataSource(
+        data = dict(
+            power4min = power4min,
+            power2k = power2k,
+            date = date,
+            power1hr = power1hr
+            )
+        )
+
+    TOOLS = 'save,pan,box_zoom,wheel_zoom,reset,tap,hover,resize,crosshair'
+
+    plot = Figure(tools=TOOLS,toolbar_location="above",
+                  toolbar_sticky=False,width=900,
+                  x_axis_type='datetime')
+
+#    plot.extra_y_ranges = {"watermark": watermarkrange}
+
+#    plot.image_url([watermarkurl],1.8*max(thesecs),watermarky,
+#                   watermarkw,watermarkh,
+#                   global_alpha=watermarkalpha,
+#                   w_units='screen',
+#                   h_units='screen',
+#                   anchor=watermarkanchor,
+#                   dilate=True,
+#                   y_range_name = "watermark",
+#                   )
+
+    plot.circle('date','power2k',source=source,fill_color='red',size=7,
+                legend='2k power')
+
+    plot.circle('date','power1hr',source=source,fill_color='blue',size=7,
+                legend='1 hr power')
+
+    plot.circle('date','power4min',source=source,fill_color='green',size=7,
+                legend='4 min power')
+
+    plot.xaxis.axis_label = 'Date'
+    plot.yaxis.axis_label = 'Power (W)'
+
+    plot.xaxis.formatter = DatetimeTickFormatter(
+        days=["%d %B %Y"],
+        months=["%d %B %Y"],
+        years=["%d %B %Y"],
+        )
+
+    plot.xaxis.major_label_orientation = pi/4
+
+    plot.y_range = Range1d(0,1.5*max(power4min))
+    plot.title.text = 'Fitness of '+user.first_name
+
+    hover = plot.select(dict(type=HoverTool))
+
+    hover.tooltips = OrderedDict([
+        ('Power 4 minutes','@power4min'),
+        ('Power 2000 m','@power2k'),
+        ('Power 1 hour','@power1hr'),
+    ])
+    
+    script,div = components(plot)
+
+    return [script,div]
     
 def interactive_histoall(theworkouts):
     TOOLS = 'save,pan,box_zoom,wheel_zoom,reset,tap,hover,resize,crosshair'

rowers/templates/fitnessmetric.html

@@ -0,0 +1,114 @@
+{% extends "base.html" %}
+{% load staticfiles %}
+{% load rowerfilters %}
+
+{% block title %}Rowsandall Fitness Progress {% 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>
+
+{{ chartscript |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, false, false);
+  };
+  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 id="title" class="grid_12 alpha">
+  <div class="grid_10 alpha">
+    {% if therower.user %}
+    <h3>{{ therower.user.first_name }} Fitness Progress</h3>
+    {% else %}
+    <h3>{{ user.first_name }} Fitness progress</h3>
+    {% endif %}
+  </div>
+  <div class="grid_2 omega">
+    {% if user.is_authenticated and user|is_manager %}
+    <div class="grid_2 alpha dropdown">
+      <button class="grid_2 alpha button green small dropbtn">
+        {{ therower.user.first_name }} {{ therower.user.last_name }}
+      </button>
+      <div class="dropdown-content">
+        {% for member in user|team_members %}
+        <a class="button green small"
+           href="/rowers/fitness-progress/rower/{{ member.id }}/{{ mode }}">{{ member.first_name }} {{ member.last_name }}</a>
+        {% endfor %}
+      </div>
+      {% else %}
+      &nbsp;
+    </div>
+    {% endif %}
+  </div>
+  
+  
+</div>
+
+<div id="graph" class="grid_12 alpha">
+  
+  {{ the_div|safe }}
+  
+</div>
+
+{% endblock %}

rowers/urls.py

@@ -173,6 +173,9 @@ urlpatterns = [
     url(r'^record-progress/(?P<id>.*)$',views.post_progress),
     url(r'^record-progress$',views.post_progress),
     url(r'^list-graphs/$',views.graphs_view),
+    url(r'^fitness-progress/$',views.fitnessmetric_view),
+    url(r'^fitness-progress/rower/(?P<id>\d+)$',views.fitnessmetric_view),
+    url(r'^fitness-progress/rower/(?P<id>\d+)/(?P<mode>\w+.*)$',views.fitnessmetric_view),
     url(r'^(?P<theuser>\d+)/ote-bests/(?P<startdatestring>\w+.*)/(?P<enddatestring>\w+.*)$',views.rankings_view),
     url(r'^(?P<theuser>\d+)/ote-bests/(?P<deltadays>\d+)$',views.rankings_view),
     url(r'^ote-bests/(?P<startdatestring>\w+.*)/(?P<enddatestring>\w+.*)$',views.rankings_view),

rowers/views.py

@@ -3062,6 +3062,30 @@ def cum_flex(request,theuser=0,
 		   })
 
 
+@user_passes_test(hasplannedsessions,login_url="/",redirect_field_name=None)
+def fitnessmetric_view(request,id=0,mode='rower'):
+    if id==0:
+        id = request.user.id
+
+    theuser = User.objects.get(id=id)
+    therower = Rower.objects.get(user=theuser)
+
+    fitnessmetrics = PowerTimeFitnessMetric.objects.filter(user=theuser)
+
+    script,thediv = fitnessmetric_chart(
+        fitnessmetrics,theuser,
+        workoutmode=mode
+    )
+
+    return render(request,'fitnessmetric.html',
+                  {
+                      'therower':therower,
+                      'chartscript':script,
+                      'the_div':thediv,
+                      'mode':mode,
+                      })
+    
+
 # Show the EMpower Oarlock generated Stroke Profile
 @user_passes_test(ispromember,login_url="/",redirect_field_name=None)
 def workout_forcecurve_view(request,id=0,workstrokesonly=False):