itneractive plot v1

rowers/interactiveplots.py

@@ -2089,10 +2089,6 @@ def course_map(course):
     return script, div
 
 
-
-
-
-
 def leaflet_chart(lat, lon, name="", raceresult=0):
     try:
         if lat.empty or lon.empty:  # pragma: no cover
@@ -3558,110 +3554,23 @@ def interactive_chart(id=0, promember=0, intervaldata={}):
     except KeyError:  # pragma: no cover
         datadf['pace'] = 0
 
-    source = ColumnDataSource(
-        datadf
-    )
+    data_dict = datadf.to_dict("records")
 
-    plot = figure(x_axis_type="datetime", y_axis_type="datetime",
-                  width=400,
-                  height=400,
-                  toolbar_sticky=False,
-                  tools=TOOLS)
+    metrics_list = [{'name': name, 'rowingmetrics':d } for name, d in metrics.rowingmetrics]
+    
+    chart_data = {
+        'title': row.name,
+        'x': "time",
+        'y1': "pace",
+        'y2': "spm",
+        'data': data_dict,
+        'metrics': metrics_list,
+    }
 
-    # add watermark
-    watermarkurl = "/static/img/logo7.png"
-    watermarkrange = Range1d(start=0, end=1)
-    watermarkalpha = 0.6
-    watermarkw = 184
-    watermarkh = 35
-    plot.extra_y_ranges = {"watermark": watermarkrange}
-    plot.extra_x_ranges = {"watermark": watermarkrange}
+    script, div = get_chart("/interactive", chart_data)
 
-    plot.image_url([watermarkurl], 0.01, 0.99,
-                   0.5*watermarkw, 0.5*watermarkh,
-                   global_alpha=watermarkalpha,
-                   w_units='screen',
-                   h_units='screen',
-                   anchor='top_left',
-                   dilate=True,
-                   x_range_name="watermark",
-                   y_range_name="watermark",
-                   )
+    return script, div
 
-    plot.line('time', 'pace', source=source, legend_label="Pace", name="pace")
-
-    try:
-        plot.title.text = row.name
-    except ValueError: # pragma: no cover
-        plot.title.text = ""
-    plot.title.text_font_size = "1.0em"
-    #plot.sizing_mode = 'stretch_both'
-    plot.xaxis.axis_label = "Time"
-    plot.yaxis.axis_label = "Pace (/500m)"
-    plot.xaxis[0].formatter = DatetimeTickFormatter(
-        hours=["%H"],
-        minutes=["%M"],
-        seconds=["%S"],
-        days=["0"],
-        months=[""],
-        years=[""]
-    )
-    plot.yaxis[0].formatter = DatetimeTickFormatter(
-        seconds=["%S"],
-        minutes=["%M"]
-    )
-    ymax = 90.
-    ymin = 150.
-
-    if row.workouttype == 'water':
-        ymax = 90.
-        ymin = 210.
-
-    plot.y_range = Range1d(1.e3*ymin, 1.e3*ymax)
-
-    plot.extra_y_ranges["spmax"] = Range1d(start=10, end=45)
-    plot.line('time', 'spm', source=source, color="red",
-              y_range_name="spmax", legend_label="Stroke Rate", name="spm")
-    plot.add_layout(LinearAxis(y_range_name="spmax",
-                    axis_label="SPM"), 'right')
-
-    plot.legend.location = "bottom_right"
-
-    # add shaded bar chart areas
-    if intervaldata != {}:
-        intervaldf = pd.DataFrame(intervaldata)
-        intervaldf['itime'] = intervaldf['itime']*1.e3
-        intervaldf['time'] = intervaldf['itime'].cumsum()
-        intervaldf['time'] = intervaldf['time'].shift(1)
-        intervaldf.loc[0, 'time'] = 0
-        intervaldf['time_r'] = intervaldf['time'] + intervaldf['itime']
-        intervaldf['value'] = 100
-        mask = intervaldf['itype'] == 3
-        intervaldf.loc[mask, 'value'] = 0
-        intervaldf['bottom'] = 10
-
-        intervalsource = ColumnDataSource(
-            intervaldf
-        )
-
-        plot.quad(left='time', top='value', bottom='bottom',
-                  right='time_r', source=intervalsource, color='mediumvioletred',
-                  y_range_name='spmax', fill_alpha=0.2, line_alpha=0.2)
-
-    hover = plot.select(dict(type=HoverTool))
-
-    hover.tooltips = OrderedDict([
-        ('Time', '@ftime'),
-        ('Pace', '@fpace'),
-        ('HR', '@hr{int}'),
-        ('SPM', '@spm{1.1}'),
-    ])
-
-    hover.mode = 'mouse'
-    # hover.name = ["spm", "pace"]
-    script, div = components(plot)
-
-    return [script, div]
 
 
 def interactive_chart_video(videodata):
@@ -3948,12 +3857,12 @@ def interactive_flexchart_stacked(id, r, xparam='time',
 
 
     if rowdata.empty:
-        return "", "No valid data", '', '', comment
+        return "", "No valid data"
 
     try:
         tseconds = rowdata.loc[:, 'time']
     except KeyError:  # pragma: no cover
-        return '', 'No time data - cannot make flex plot', '', '', comment
+        return '', 'No time data - cannot make flex plot'
 
     try:
         rowdata['x1'] = rowdata.loc[:, xparam]

rowers/templates/instroke_interactive.html

@@ -122,9 +122,6 @@ $( function() {
 <div id="id_script">
   {{ the_script |safe }}
 </div>
-<div id="ds">
-  {{ ds |safe }}
-</div>
 
 <h1>In Stroke Metrics</h1>
 <ul class="main-content">
@@ -172,10 +169,16 @@ $( function() {
       {{ the_div|safe }}
     </div>
   </li>
-  <li class="grid_4">
+  <li class="grid_2">
     <div id="dd" class="flexplot">
+      <script src="https://d3js.org/d3.v6.js"></script>
       {{ dd|safe }}
+
     </div>
+    <div id="ds">
+      {{ ds |safe }}
+      </div>
+
   </li>
 </ul>
 

rowers/templates/workout_view.html

@@ -104,59 +104,53 @@
         </td>
       </tr>
       {% endif %}
-			{% for course in courses %}
-			<tr>
-				<th>
-					Timed Course:
-				</th>
-				<td>
-					<a href="/rowers/courses/{{ course.id }}"/>{{ course }}</a>
-				</td>
-			</tr>
-			{% endfor %}
-    </table>
-  </li>
-  <li class="grid_2">
-    <h1>Workout Summary</h1>
-
-    <p>
-      <pre>
-        {{ summary }}
-      </pre>
-    </p>
-  </li>
-  {% if mapdiv %}
-  <li class="grid_2">
-    <div class="mapdiv">
-
+      {% for course in courses %}
+      <tr>
+	<th>
+	  Timed Course:
+	</th>
+	<td>
+	  <a href="/rowers/courses/{{ course.id }}"/>{{ course }}</a>
+</td>
+</tr>
+{% endfor %}
+</table>
+</li>
+<li class="grid_2">
+  <h1>Workout Summary</h1>
+  
+  <p>
+    <pre>
+      {{ summary }}
+    </pre>
+  </p>
+</li>
+{% if mapdiv %}
+<li class="grid_2">
+  <div class="mapdiv">
+    
     {{ mapdiv|safe }}
-
+    
     <script>
       {{ mapscript|safe }}
     </script>
-    </div>
-  </li>
-  {% endif %}
-  <li class="grid_2">
-    <script src="https://cdn.pydata.org/bokeh/release/bokeh-3.1.1.min.js"></script>
-    <script async="true" type="text/javascript">
-      Bokeh.set_log_level("info");
-    </script>
-
-    {{ interactiveplot |safe }}
-
-    {{ the_div|safe }}
-
-  </li>
-  {% for graph in graphs %}
-  <li>
-    <a href="/rowers/graph/{{ graph.id }}/">
+  </div>
+</li>
+{% endif %}
+<li class="grid_2">
+  <script src="https://d3js.org/d3.v6.js"></script>
+  {{ the_div|safe }}
+  {{ interactiveplot |safe }}  
+</li>
+{% for graph in graphs %}
+<li>
+  <a href="/rowers/graph/{{ graph.id }}/">
     <img src="/{{ graph.filename }}"
 	 onerror="this.src='/static/img/rowingtimer.gif'"
 	 alt="{{ graph.filename }}" width="120" height="100">
-    </a>
+  </a>
   </li>
-  {% endfor %}
+{% endfor %}
 </ul>
 
 {% endblock %}