From 292495e5eab3700024a59ccc0bf246cd0e2c685a Mon Sep 17 00:00:00 2001 From: merlin Date: Sat, 18 Jan 2025 17:54:26 -0500 Subject: [PATCH] Fix embarrassing spinner --- .../templates/explore/indiv_elev_dist.html | 17 ++--- .../templates/explore/riders_by_lowtemp.html | 13 +++- .../web/templates/explore/team_cumul.html | 27 ++++++-- .../templates/explore/team_weekly_points.html | 16 +++-- freezing/web/templates/leaderboard/indiv.html | 15 ++-- freezing/web/templates/leaderboard/team.html | 15 ++-- freezing/web/templates/user/rides.html | 69 +++++++++++-------- freezing/web/views/chartdata.py | 7 +- 8 files changed, 113 insertions(+), 66 deletions(-) diff --git a/freezing/web/templates/explore/indiv_elev_dist.html b/freezing/web/templates/explore/indiv_elev_dist.html index 83648086..e56530c6 100644 --- a/freezing/web/templates/explore/indiv_elev_dist.html +++ b/freezing/web/templates/explore/indiv_elev_dist.html @@ -20,20 +20,16 @@ // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.BubbleChart(document.getElementById('chart_div')); - /* - var options = {'title':'Team Cumulative Points', - 'width':1000, - 'height':800}; - */ + var width = $('#chart_div').width(); var options = { title: 'Correlation between distance, elevation, and average speed.', hAxis: {title: 'Distance'}, vAxis: {title: 'Elevation'}, height: 800, - width: 1200, + width: width, legend: {position: 'none'}, bubble: {textStyle: {fontSize: 11}}, - chartArea: {left: 200, top: 50, width: 1000, height: 700}, + chartArea: {left: 125, top: 50, width: width - 175, height: 700}, }; @@ -47,12 +43,9 @@

Individual Distance, Elevation, Speed

-

- Note, riders that are tracking rides manually in Strava will be misrepresented here as having 0 elevation. -

-
- +
+  Loading correlation chart...
{% endblock %} diff --git a/freezing/web/templates/explore/riders_by_lowtemp.html b/freezing/web/templates/explore/riders_by_lowtemp.html index afd2d3c4..e132c5cd 100644 --- a/freezing/web/templates/explore/riders_by_lowtemp.html +++ b/freezing/web/templates/explore/riders_by_lowtemp.html @@ -24,10 +24,11 @@ // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.ComboChart(document.getElementById('chart')); + var width = $('#chart').width(); var options = { title: 'Riders by Avg Low Temp', - width: 1000, + width: width, height: 800, vAxis: {title: "Num Participating Riders / Avg Low Temps (F)"}, hAxis: {title: "Date"}, @@ -48,6 +49,14 @@

Relationship between number of participating riders and the average low daily temperatures.

-
+
+ + + +  Loading chart data...
{% endblock %} diff --git a/freezing/web/templates/explore/team_cumul.html b/freezing/web/templates/explore/team_cumul.html index 184dc9f3..6b64b780 100644 --- a/freezing/web/templates/explore/team_cumul.html +++ b/freezing/web/templates/explore/team_cumul.html @@ -24,10 +24,11 @@ // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.LineChart(document.getElementById('chart_team_cumul_points')); + var width = $('#chart_team_cumul_points').width(); var options = { 'title': 'Team Cumulative Points', - 'width': 1000, + 'width': width, 'height': 600, 'chartArea': { 'width': '60%', 'height': '80%'} }; @@ -48,10 +49,11 @@ // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.LineChart(document.getElementById('chart_team_cumul_mileage')); + var width = $('#chart_team_cumul_mileage').width(); var options = { 'title': 'Team Cumulative Mileage', - 'width': 1000, + 'width': width, 'height': 600, 'chartArea': { 'width': '60%', 'height': '80%'} }; @@ -67,12 +69,25 @@

Team Cumulative

-
- +
+ + +  Loading team cumulative points...
-
- +
+
+ + +  Loading team cumulative mileage...
{% endblock %} diff --git a/freezing/web/templates/explore/team_weekly_points.html b/freezing/web/templates/explore/team_weekly_points.html index f44774d3..6b01dabb 100644 --- a/freezing/web/templates/explore/team_weekly_points.html +++ b/freezing/web/templates/explore/team_weekly_points.html @@ -32,15 +32,15 @@ // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.ColumnChart(document.getElementById('chart_team_weekly_points')); + var width = $('#chart_team_weekly_points').width(); var options = { 'title': 'Team Weekly Points', - 'width': 1200, + 'width': width, 'height': 800, - 'hAxis': {title: "Week No."}, 'vAxis': {title: "Points"}, legend: {position: 'none'}, - chartArea: {left: 200, top: 50, width: 1000, height: 700} + chartArea: {left: 150, top: 50, width: width - 200, height: 700} }; @@ -56,8 +56,14 @@

Team Weekly Points

-
- +
+ + +  Loading weekly points...
{% endblock %} diff --git a/freezing/web/templates/leaderboard/indiv.html b/freezing/web/templates/leaderboard/indiv.html index 8c5e0378..f1ee9d8e 100644 --- a/freezing/web/templates/leaderboard/indiv.html +++ b/freezing/web/templates/leaderboard/indiv.html @@ -21,14 +21,15 @@ // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.BarChart(document.getElementById('chart_indiv_leaderboard')); + var width = $('#chart_indiv_leaderboard').width(); var rows = jsonData.rows.length; var options = { 'title':'Individual Points', - 'width':1000, - 'height':100 + rows * 24, + 'width':width, + 'height':120 + rows * 24, 'legend': {'position': 'none'}, - 'chartArea': {'left':200,'top':70,'width': 550,'height': rows * 24}, + 'chartArea': {'left':width / 4,'top':70,'width': width * 3 / 4 - 50,'height': rows * 24}, 'hAxis': {'minValue': 0, 'textStyle': {'fontSize': 16}}, 'vAxis': {'textStyle': {'fontSize': 16}} }; @@ -47,7 +48,13 @@

- + + +  Loading individual leaderboard...
{% endblock %} diff --git a/freezing/web/templates/leaderboard/team.html b/freezing/web/templates/leaderboard/team.html index 9b251760..7641261f 100644 --- a/freezing/web/templates/leaderboard/team.html +++ b/freezing/web/templates/leaderboard/team.html @@ -23,14 +23,15 @@ // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.BarChart(document.getElementById('chart_team_leaderboard')); + var width = $('#chart_team_leaderboard').width(); var rows = jsonData.rows.length; var options = { 'title': 'Team Points', - 'width': 1000, - 'height': 100 + rows * 24, + 'width': width, + 'height': 120 + rows * 24, 'legend': {'position': 'none'}, - 'chartArea': {'left': 300, 'top': 70, 'width': 550, 'height': rows * 24}, + 'chartArea': {'left': width / 4, 'top': 70, 'width': width * 3 / 4 - 50, 'height': rows * 24}, 'hAxis': {'minValue': 0, 'textStyle': {'fontSize': 16}}, 'vAxis': {'textStyle': {'fontSize': 16}}, }; @@ -49,7 +50,13 @@

- + + +  Loading team leaderboard...
{% endblock %} diff --git a/freezing/web/templates/user/rides.html b/freezing/web/templates/user/rides.html index fc3bd56f..e6bc373f 100644 --- a/freezing/web/templates/user/rides.html +++ b/freezing/web/templates/user/rides.html @@ -20,20 +20,12 @@ // Load the Visualization API and the corechart package. google.load('visualization', '1.0', {'packages':['corechart']}); - // Set a callback to run when the Google Visualization API is loaded. - google.setOnLoadCallback(drawDailyPointsChart); - google.setOnLoadCallback(drawWeeklyPointsChart); - - // Callback that creates and populates a data table, - // instantiates the pie chart, passes in the data and - // draws it. - function drawDailyPointsChart() { $.ajax({ url: "/chartdata/user_daily_points/{{ session.get('athlete_id') }}", dataType: "json" }).done(function(jsonData) { - drawPointsChart(jsonData, 'chart_user_daily_points', 'Daily Points', 'Day No.'); + drawPointsChart(jsonData, 'chart_user_daily_points', 'Daily Points'); }); } @@ -42,27 +34,26 @@ url: "/chartdata/user_weekly_points/{{ session.get('athlete_id') }}", dataType: "json" }).done(function(jsonData) { - drawPointsChart(jsonData, 'chart_user_weekly_points', 'Weekly Points', 'Week No.'); + drawPointsChart(jsonData, 'chart_user_weekly_points', 'Weekly Points'); }); } - function drawPointsChart(jsonData, element, title, hAxisTitle) { + function drawPointsChart(jsonData, element, title) { // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(jsonData); - console.log(data); - // Instantiate and draw our chart, passing in some options. + var width = $('#' + element).width(); + var height = 320; var chart = new google.visualization.ColumnChart(document.getElementById(element)); var options = { 'title': title, - 'width': 1000, - 'height': 250, - 'hAxis': {title: hAxisTitle}, + 'width': width, + 'height': height, 'vAxis': {title: "Points"}, legend: {position: 'none'}, - chartArea: {left: 75, top: 50} + chartArea: {left: 75, width: width - 100, top: 50, height: height - 110} }; chart.draw(data, options); } @@ -95,16 +86,18 @@

data-bs-toggle="tab">My Ride Map @@ -115,18 +108,28 @@

-
-
- +
+
+ + +  Loading daily points...
-
-
-
- -  Loading weekly points... -
+
+
+ + + +  Loading weekly points...
@@ -277,6 +280,12 @@

$('#map-link').one('click', () => { create_ride_map('map', '/api/my/trackmap.json', 'red', true); }); + $('#daily-link').one('click', () => { + drawDailyPointsChart(); + }); + $('#weekly-link').one('click', () => { + drawWeeklyPointsChart(); + }); }); {% endblock %} diff --git a/freezing/web/views/chartdata.py b/freezing/web/views/chartdata.py index 423c3ece..7c737c83 100644 --- a/freezing/web/views/chartdata.py +++ b/freezing/web/views/chartdata.py @@ -614,12 +614,14 @@ def indiv_after_sunset(): def competition_start(): start_date = config.START_DATE - return start_date.replace(tzinfo=None) + return start_date.replace( + hour=12, tzinfo=None + ) # mid-day to avoid the tyranny of timezones def now_or_competition_end(): end_date = config.END_DATE - return min(datetime.now(), end_date.replace(tzinfo=None)) + return min(datetime.now(), end_date.replace(hour=12, tzinfo=None)) @blueprint.route("/user_daily_points/") @@ -654,7 +656,6 @@ def user_daily_points(athlete_id): .timetuple() .tm_yday ) - # these are 1-based, whereas mysql uses 0-based cells = [ { "v": "{0}".format(dt.strftime("%b %d")),