From 00f7a5a3ef07ee139ac08601ce0b9edd62402d8a Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Wed, 11 Dec 2019 15:17:20 +0100
Subject: [PATCH] stroke angle chart prototype

---
 rowers/metrics.py                    |  2 +-
 rowers/templates/embedded_video.html | 11 +++++
 static/js/videogauges.js             | 72 ++++++++++++++++++++++++----
 3 files changed, 75 insertions(+), 10 deletions(-)

diff --git a/rowers/metrics.py b/rowers/metrics.py
index 242cfe56..fbcee514 100644
--- a/rowers/metrics.py
+++ b/rowers/metrics.py
@@ -258,7 +258,7 @@ rowingmetrics = (
         'ax_min': 0,
         'ax_max': 30,
         'default': 0,
-        'sigfigs': 0,
+        'sigfigs': 1,
         'mode':'water',
         'type': 'pro',
         'group': 'stroke'}),
diff --git a/rowers/templates/embedded_video.html b/rowers/templates/embedded_video.html
index f4dae1e7..4327f266 100644
--- a/rowers/templates/embedded_video.html
+++ b/rowers/templates/embedded_video.html
@@ -394,8 +394,14 @@ function copyText() {
         <div id="athlete_hr"></div>
       </li>
       {% endif %}
+      {% if 'stroke' in metricsgroups %}
+      <li class="grid_2" style="height:500px">
+        <div style="width:100%;height:70%;" id="stroke_angles"></div>
+      </li>
+      {% endif %}
       </ul>
     </li>
+
     <li class="grid_2">
       {% if analysis and user.is_authenticated and user == analysis.workout.user.user %}
       <p>
@@ -411,6 +417,7 @@ function copyText() {
     $(document).ready( function() {
       $(window).load(function() {
         // initialize data fields
+        console.log('initializing first value of data');
         {% for id, metric in metrics.items %}
         {{ id }}_now = {{ id }}_values[0];
         document.getElementById("{{ id }}").innerHTML = {{ id }}_now;
@@ -466,6 +473,10 @@ function copyText() {
       hr_now = hr_values[0];
       set_athlete();
       {% endif %}
+      {% if 'stroke' in metricsgroups %}
+      anglesoptions.PieStartAngle = 90+catch_now;
+      set_stroke();
+      {% endif %}
 
       // cookie reader
       function createCookie(name,value,days) {
diff --git a/static/js/videogauges.js b/static/js/videogauges.js
index 31da7567..42ac8ff9 100644
--- a/static/js/videogauges.js
+++ b/static/js/videogauges.js
@@ -1,10 +1,9 @@
-google.charts.load('current', {'packages':['gauge']});
+google.charts.load('current', {'packages':['gauge','corechart']});
 google.charts.setOnLoadCallback(drawSPMChart);
 google.charts.setOnLoadCallback(drawSpeedChart);
 google.charts.setOnLoadCallback(drawPowerChart);
 google.charts.setOnLoadCallback(drawHRChart);
-
-console.log('initializing data');
+google.charts.setOnLoadCallback(drawStrokeAngleChart);
 
 var spmdata = [
   ['Label', 'Value'],
@@ -26,6 +25,33 @@ var hrdata = [
   ['HR',110],
 ]
 
+var angledata = [
+  ['Angle', 'deg'],
+  ['slip',    10 ],
+  ['load',      50],
+  ['unload',  50],
+  ['wash', 10],
+  ['recovery',240 ]
+]
+
+var anglesoptions = {
+  title: 'Stroke Angles',
+  legend: 'none',
+  pieHole: 0.5,
+  chartArea: { width: "100%" },
+  pieStartAngle: 35,
+  pieSliceText: 'value',
+  pieSliceTextStyle: {color:'black',fontSize:12},
+  slices: {
+    0: { color: 'lightblue' },
+    1: { color: 'lightgreen' },
+    2: { color: 'yellow'},
+    3: { color: 'orange'},
+    4: { color: 'transparent', textStyle: {color:'transparent'}}
+  }
+};
+
+
 var hroptions = {
   min: 100, max: 200,
   width: 400, height: 120,
@@ -73,6 +99,7 @@ var spmchart = null;
 var speedchart = null;
 var powerchart = null;
 var datapower = null;
+var dataangles = null;
 
 // SPM chart
 function drawSPMChart() {
@@ -116,16 +143,28 @@ function drawPowerChart() {
 
 }
 
-// Power chart
+// HR chart
 function drawHRChart() {
   datahr = new google.visualization.arrayToDataTable(hrdata);
   try {
-  hrchart = new google.visualization.Gauge(document.getElementById('athlete_hr'));
-  hrchart.draw(datahr,hroptions);
-} catch(err) {
-  console.log('no hr div');
+    hrchart = new google.visualization.Gauge(document.getElementById('athlete_hr'));
+    hrchart.draw(datahr,hroptions);
+  } catch(err) {
+    console.log('no hr div');
+  }
+
 }
 
+// Stroke angle chart
+function drawStrokeAngleChart() {
+  dataangles = new google.visualization.arrayToDataTable(angledata);
+  try {
+    angleschart = new google.visualization.PieChart(document.getElementById('stroke_angles'));
+    angleschart.draw(dataangles,anglesoptions);
+  } catch(err) {
+    console.log('no angles div');
+  }
+
 }
 
 function set_basic() {
@@ -144,7 +183,22 @@ function set_athlete() {
 }
 
 function set_stroke() {
-
+  var piestartangle = 90+catch_now;
+  var load = Math.max(-catch_now-slip_now+peakforceangle_now);
+  var unload = Math.max(finish_now-wash_now-peakforceangle_now) ;
+  var recovery = Math.max(360+catch_now-finish_now);
+  // console.log('load ',load,'; unload ',unload,'; recovery ',recovery,'; pie start angle ',piestartangle);
+  dataangles.setCell(0,1,slip_now);
+  dataangles.setCell(1,1,load);
+  dataangles.setCell(2,1,unload);
+  dataangles.setCell(3,1,wash_now);
+  dataangles.setCell(4,1,recovery);
+  anglesoptions.pieStartAngle = piestartangle;
+  try {
+    angleschart.draw(dataangles,anglesoptions);
+  } catch(err) {
+    console.log('failed: ',err);
+  }
 }
 
 function set_forcepower() {