the rest

freezingsaddles · Jan 19, 2025 · 312fdc1 · 312fdc1
1 parent 2fab40b
commit 312fdc1
Show file tree

Hide file tree

Showing 12 changed files with 146 additions and 1,294 deletions.
diff --git a/freezing/web/static/css/styles.css b/freezing/web/static/css/styles.css
@@ -11,7 +11,7 @@ div.row > div > div.row, .big-bottom {
     margin-bottom: 15px;
 }
 
-iframe, .g-chart svg {
+iframe {
     border-radius: var(--bs-border-radius);
 }
 

diff --git a/freezing/web/templates/base.html b/freezing/web/templates/base.html
@@ -64,7 +64,6 @@
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
               rel="stylesheet">
-        <script src="https://www.gstatic.com/charts/loader.js"></script>
         {% block head %}
         {% endblock %}
     </head>

diff --git a/freezing/web/templates/explore/indiv_elev_dist.html b/freezing/web/templates/explore/indiv_elev_dist.html
@@ -1,51 +1,81 @@
 {% extends "base.html" %}
-{% block head %}
-    <script type="text/javascript">
-	  google.charts.load("visualization", "1", {packages:["corechart"]});
-	  google.charts.setOnLoadCallback(drawChart);
-
-	  // Callback that creates and populates a data table,
-	  // instantiates the pie chart, passes in the data and
-	  // draws it.
-
-	  function drawChart() {
-
-		  $.ajax({
-			  url: "/chartdata/indiv_elev_dist",
-			  dataType: "json"
-		  }).done(function(jsonData) {
-
-			  // Create our data table out of JSON data loaded from server.
-			  var data = new google.visualization.DataTable(jsonData);
-
-			  // Instantiate and draw our chart, passing in some options.
-			  var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
-              var width = $('#chart_div').width();
-			  var options = {
-				  title: 'Correlation between distance, elevation, and average speed.',
-				  hAxis: {title: 'Distance'},
-				  vAxis: {title: 'Elevation'},
-				  height: 800,
-				  width: width,
-				  legend: {position: 'none'},
-				  bubble: {textStyle: {fontSize: 11}},
-				  chartArea: {left: 125, top: 50, width: width - 175, height: 700},
-			  };
-
-
-			  chart.draw(data, options);
-		  });
-	  }
-
-    </script>
+{% block foot %}
+<link rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.css"
+      integrity="sha384-ztqQYuF0ztQOO26+6hbRTtSQ6HGLosUJRQI9kx0L9OpJiESTtsiriiQNqwBIBl9a"
+      crossorigin="anonymous">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.8.0/d3.min.js"
+        integrity="sha384-Nth41CoN2s0hj2li43h7cs5a1J0zroMLa7ugSGFSdWJMF1OuKrJwZaritPHBnk3E"
+        crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"
+        integrity="sha384-xOzJ6ocROuPNeY/PUgXyXgiPyvvePCiWVkKXro4Lb1gWoGJOtrJw+zrpf3NBx1B5"
+        crossorigin="anonymous"></script>
+<script type="text/javascript">
+  var pattern = ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5'];
+  $(() => {
+    $.ajax({
+      url: "/chartdata/indiv_elev_dist",
+      dataType: "json"
+    }).done(function (jsonData) {
+      c3.generate({
+        bindto: '#chart_div',
+        data: {
+          type: 'scatter',
+          x: 'distance',
+          y: 'elevation',
+          columns: [
+            ['distance', ...jsonData.distances],
+            ['elevation', ...jsonData.elevations],
+          ],
+          color: (a, {index}) => pattern[index % pattern.length],
+        },
+        axis: {
+          x: {
+            label: 'Miles',
+            tick: {
+              fit: false,
+              format: d => d.toLocaleString(),
+            },
+          },
+          y: {
+            label: 'Feet',
+            padding: 20,
+            tick: {
+              format: d => d.toLocaleString(),
+            }
+          }
+        },
+        point: {
+          r: ({index}) => jsonData.speeds[index],
+        },
+        tooltip: {
+          contents: function ([{index}]) {
+            return "<table class='" + this.CLASS.tooltip + "'>" +
+              "<tr><th colspan='2'>" + jsonData.labels[index] + "</th></tr>" +
+              "<tr><td class='name'>distance</td><td class='value'>" + Math.round(jsonData.distances[index]).toLocaleString() + " mi</td></tr>" +
+              "<tr><td class='name'>elevation</td><td class='value'>" + Math.round(jsonData.elevations[index]).toLocaleString() + " feet</td></tr>" +
+              "<tr><td class='name'>speed</td><td class='value'>" + +jsonData.speeds[index]?.toFixed(1) + "mph</td></tr>" +
+              "</table>";
+          }
+        },
+        legend: {
+          show: false
+        }
+      });
+    });
+  });
+</script>
 {% endblock %}
 {% block content %}
     <h1>
         Individual Distance, Elevation, Speed
     </h1>
+    <div class="text-center mt-3">
+        <strong>Correlation between distance, elevation and average speed</strong>
+    </div>
     <!--Div that will hold our leaderboard chart-->
-    <div id="chart_div" class="g-chart">
+    <div id="chart_div" style="width:100%; aspect-ratio: 1.333">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><style>.spinner_zWVm{animation:spinner_5QiW 1.2s linear infinite,spinner_PnZo 1.2s linear infinite}.spinner_gfyD{animation:spinner_5QiW 1.2s linear infinite,spinner_4j7o 1.2s linear infinite;animation-delay:.1s}.spinner_T5JJ{animation:spinner_5QiW 1.2s linear infinite,spinner_fLK4 1.2s linear infinite;animation-delay:.1s}.spinner_E3Wz{animation:spinner_5QiW 1.2s linear infinite,spinner_tDji 1.2s linear infinite;animation-delay:.2s}.spinner_g2vs{animation:spinner_5QiW 1.2s linear infinite,spinner_CMiT 1.2s linear infinite;animation-delay:.2s}.spinner_ctYB{animation:spinner_5QiW 1.2s linear infinite,spinner_cHKR 1.2s linear infinite;animation-delay:.2s}.spinner_BDNj{animation:spinner_5QiW 1.2s linear infinite,spinner_Re6e 1.2s linear infinite;animation-delay:.3s}.spinner_rCw3{animation:spinner_5QiW 1.2s linear infinite,spinner_EJmJ 1.2s linear infinite;animation-delay:.3s}.spinner_Rszm{animation:spinner_5QiW 1.2s linear infinite,spinner_YJOP 1.2s linear infinite;animation-delay:.4s}@keyframes spinner_5QiW{0%,50%{width:7.33px;height:7.33px}25%{width:1.33px;height:1.33px}}@keyframes spinner_PnZo{0%,50%{x:1px;y:1px}25%{x:4px;y:4px}}@keyframes spinner_4j7o{0%,50%{x:8.33px;y:1px}25%{x:11.33px;y:4px}}@keyframes spinner_fLK4{0%,50%{x:1px;y:8.33px}25%{x:4px;y:11.33px}}@keyframes spinner_tDji{0%,50%{x:15.66px;y:1px}25%{x:18.66px;y:4px}}@keyframes spinner_CMiT{0%,50%{x:8.33px;y:8.33px}25%{x:11.33px;y:11.33px}}@keyframes spinner_cHKR{0%,50%{x:1px;y:15.66px}25%{x:4px;y:18.66px}}@keyframes spinner_Re6e{0%,50%{x:15.66px;y:8.33px}25%{x:18.66px;y:11.33px}}@keyframes spinner_EJmJ{0%,50%{x:8.33px;y:15.66px}25%{x:11.33px;y:18.66px}}@keyframes spinner_YJOP{0%,50%{x:15.66px;y:15.66px}25%{x:18.66px;y:18.66px}}</style><rect class="spinner_zWVm" x="1" y="1" width="7.33" height="7.33"/><rect class="spinner_gfyD" x="8.33" y="1" width="7.33" height="7.33"/><rect class="spinner_T5JJ" x="1" y="8.33" width="7.33" height="7.33"/><rect class="spinner_E3Wz" x="15.66" y="1" width="7.33" height="7.33"/><rect class="spinner_g2vs" x="8.33" y="8.33" width="7.33" height="7.33"/><rect class="spinner_ctYB" x="1" y="15.66" width="7.33" height="7.33"/><rect class="spinner_BDNj" x="15.66" y="8.33" width="7.33" height="7.33"/><rect class="spinner_rCw3" x="8.33" y="15.66" width="7.33" height="7.33"/><rect class="spinner_Rszm" x="15.66" y="15.66" width="7.33" height="7.33"/></svg>
-        &nbsp;Loading correlation chart...
+        &nbsp;Loading chart data...
     </div>
 {% endblock %}
diff --git a/freezing/web/templates/explore/team_cumul.html b/freezing/web/templates/explore/team_cumul.html
@@ -30,12 +30,15 @@
                   type: 'timeseries',
                 },
                 y: {
-                  label: 'points'
+                  label: 'points',
+                  tick: {
+                    format: d => d.toLocaleString()
+                  }
                 }
               },
               tooltip: {
                 format: {
-                  value: (value) => Math.round(value) + " pts",
+                  value: (value) => Math.round(value).toLocaleString() + "&nbsp;pts",
                 }
               }
             });
@@ -59,12 +62,15 @@
                   type: 'timeseries',
                 },
                 y: {
-                  label: 'miles'
+                  label: 'miles',
+                  tick: {
+                    format: d => d.toLocaleString()
+                  }
                 }
               },
               tooltip: {
                 format: {
-                  value: (value) => Math.round(value) + " mi",
+                  value: (value) => Math.round(value).toLocaleString() + "&nbsp;mi",
                 }
               }
             });

diff --git a/freezing/web/templates/explore/team_weekly_points.html b/freezing/web/templates/explore/team_weekly_points.html
@@ -33,6 +33,11 @@
                 tick: {
                   format: d => "Week " + d,
                 }
+              },
+              y: {
+                tick: {
+                  format: d => d.toLocaleString()
+                }
               }
             },
             bar: {
@@ -42,7 +47,7 @@
             },
             tooltip: {
               format: {
-                value: (value) => Math.round(value),
+                value: (value) => Math.round(value).toLocaleString(),
               }
             },
             legend: {

diff --git a/freezing/web/templates/leaderboard/indiv.html b/freezing/web/templates/leaderboard/indiv.html
@@ -36,7 +36,7 @@
                   ],
                 type: 'bar',
                 labels: {
-                  format: (value) => Math.round(value)
+                  format: (value) => Math.round(value).toLocaleString()
                 },
                 hide: ['rank']
               },
@@ -49,13 +49,19 @@
                     multiline: true,
                     multilineMax: 1,
                   }
+                },
+                y: {
+                  label: 'Points',
+                  tick: {
+                    format: d => d.toLocaleString()
+                  }
                 }
               },
               tooltip: {
                 grouped: true,
                 format: {
                   title: (i) => '#' + jsonData.ranks[i] + ': ' + jsonData.labels[i],
-                  value: (value) => Math.round(value),
+                  value: (value) => Math.round(value).toLocaleString(),
                 }
               },
               legend: {

diff --git a/freezing/web/templates/leaderboard/indiv_various.html b/freezing/web/templates/leaderboard/indiv_various.html
@@ -38,7 +38,7 @@
                   ],
                 type: 'bar',
                 labels: {
-                  format: (value) => +value.toFixed(jsonData.precision ?? 0)
+                  format: (value) => (+value.toFixed(jsonData.precision ?? 0)).toLocaleString()
                 },
               },
               axis: {
@@ -52,15 +52,18 @@
                   }
                 },
                 y: {
-                  label: jsonData.unit
+                  label: jsonData.unit,
+                  tick: {
+                    format: d => d.toLocaleString()
+                  }
                 }
               },
               tooltip: {
                 grouped: true,
                 format: {
                   title: (i) => '#' + jsonData.ranks[i] + ': ' + jsonData.labels[i],
                   value: (value, ratio, id, index) =>
-                    jsonData.tooltips ? jsonData.tooltips[index] : +value.toFixed(jsonData.precision ?? 0) + jsonData.suffix
+                    jsonData.tooltips ? jsonData.tooltips[index] : (+value.toFixed(jsonData.precision ?? 0)).toLocaleString() + jsonData.suffix
                 },
               },
               legend: {

diff --git a/freezing/web/templates/leaderboard/team.html b/freezing/web/templates/leaderboard/team.html
@@ -17,7 +17,7 @@
 	          dataType:"json",
           }).done(function(jsonData) {
             $('#chart_team_leaderboard').height(jsonData.labels.length * 23 + 35)
-            var chart = c3.generate({
+            c3.generate({
               bindto: '#chart_team_leaderboard',
               bar: {
                 width: 21,
@@ -36,7 +36,7 @@
                   ],
                 type: 'bar',
                 labels: {
-                  format: (value) => Math.round(value)
+                  format: (value) => Math.round(value).toLocaleString()
                 },
                 hide: ['rank']
               },
@@ -49,13 +49,19 @@
                     multiline: true,
                     multilineMax: 1,
                   }
+                },
+                y: {
+                  label: 'Points',
+                  tick: {
+                    format: d => d.toLocaleString()
+                  }
                 }
               },
               tooltip: {
                 grouped: true,
                 format: {
                   title: (i) => '#' + jsonData.ranks[i] + ': ' + jsonData.labels[i],
-                  value: (value) => Math.round(value)
+                  value: (value) => Math.round(value).toLocaleString()
                 },
               },
               legend: {

diff --git a/freezing/web/templates/leaderboard/team_various.html b/freezing/web/templates/leaderboard/team_various.html
@@ -38,7 +38,7 @@
                   ],
                 type: 'bar',
                 labels: {
-                  format: (value) => +value.toFixed(jsonData.precision ?? 0)
+                  format: (value) => (+value.toFixed(jsonData.precision ?? 0)).toLocaleString()
                 },
               },
               axis: {
@@ -52,7 +52,10 @@
                   }
                 },
                 y: {
-                  label: jsonData.unit
+                  label: jsonData.unit,
+                  tick: {
+                    format: d => d.toLocaleString()
+                  }
                 }
               },
               tooltip: {

diff --git a/freezing/web/templates/user/rides.html b/freezing/web/templates/user/rides.html
@@ -51,11 +51,16 @@
                   tick: {
                     format: "%m/%d",
                   }
+                },
+                y: {
+                  tick: {
+                    format: d => d.toLocaleString()
+                  }
                 }
               },
               tooltip: {
                 format: {
-                  value: (value) => Math.round(value),
+                  value: (value) => Math.round(value).toLocaleString(),
                 }
               },
               legend: {
@@ -88,11 +93,16 @@
                   tick: {
                     format: d => "Week " + d,
                   }
+                },
+                y: {
+                  tick: {
+                    format: d => d.toLocaleString()
+                  }
                 }
               },
               tooltip: {
                 format: {
-                  value: (value) => Math.round(value),
+                  value: (value) => Math.round(value).toLocaleString(),
                 }
               },
               legend: {