diff --git a/app/templates/header.html b/app/templates/header.html index ce97e1674846ee29384ecd5dc28dc884056da24e..7e5c04ee060f29387c08d1af8a1422cd0c37744b 100644 --- a/app/templates/header.html +++ b/app/templates/header.html @@ -4,7 +4,7 @@ <header id="header"> <nav class="navbar fixed-top navbar-expand-md navbar-dark bg-black shadow-sm"> <div class="container"> - <a class="navbar-brand logo" href="/">hello</a> + <a class="navbar-brand logo" href="/">demo</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> diff --git a/app/templates/player.html b/app/templates/player.html index 0a80e4687710daa668e06b25e9a51fb740f03dc1..ca58d771c405c1430fef1e0769f0f2e7f49a02bc 100644 --- a/app/templates/player.html +++ b/app/templates/player.html @@ -27,6 +27,12 @@ <h1 class="display-4">{{ player.name }}</h1> <span> Team: <a href="/team/{{ player.team }}">{{ player.team }}</a> + <br> + <br> + Date of birth: {{ player.dob }} + <br> + <br> + Player with {{ player.team }} since {{ player.date_signed_up }} </span> </div> <div class="col my-auto text-center"> @@ -77,7 +83,7 @@ </div> </div> </nav> - <div class="container" style="padding-top: 60px;"> + <div class="container" style="padding-top: 50px;"> <div class="wrapper" id="container-summary"> <div class="row"> <div class="col-md-2 flex"> @@ -100,34 +106,15 @@ </div> <div class="col"> <div> - <!-- Python dict of transfer_value_last_5 - Transfer value base: {{ transfer_value_last_5["fg0"] }} - <br> - Transfer value 1 ({{ player.fg1 }}): {{ transfer_value_last_5["fg1"] }} - <br> - Transfer value 2 ({{ player.fg2 }}): {{ transfer_value_last_5["fg2"] }} - <br> - Transfer value 3 ({{ player.fg3 }}): {{ transfer_value_last_5["fg3"] }} - <br> - Transfer value 4 ({{ player.fg4 }}): {{ transfer_value_last_5["fg4"] }} - <br> - Transfer value 5 ({{ player.fg5 }}): {{ transfer_value_last_5["fg5"] }} - <br> --> - <canvas id="transfer_val_5"></canvas> </div> </div> </div> </div> <div class="wrapper" id="container-game-history"> - <div class="row"> - <div class="col"> - <h2>Game history</h2> - </div> - </div> - <div class="row"> - <div class="col"> - <canvas id="myChart" width="400" height="400"></canvas> + <div class="row" style="height: 200px;"> + <div class="col flex"> + <canvas id="myChart2"></canvas> </div> </div> </div> @@ -155,6 +142,7 @@ </div> </div> </div> + </div> </main> <div id="footer"></div> @@ -229,14 +217,13 @@ const ctx = document.getElementById('transfer_val_5'); - const labels = ['Base', 'Game 1', 'Game 2', 'Game 3', 'Game 4', 'Game 5'] + const labels = ['FG0', 'Game 1', 'Game 2', 'Game 3', 'Game 4', 'Game 5'] const data = { labels: labels, datasets: [{ - label: 'Transfer value vs Win %', + label: 'Transfer value', data: ["{{ transfer_value_last_5["fg0"] }}", "{{ transfer_value_last_5["fg1"] }}", "{{ transfer_value_last_5["fg2"] }}", "{{ transfer_value_last_5["fg3"] }}", "{{ transfer_value_last_5["fg4"] }}", "{{ transfer_value_last_5["fg5"] }}"], - backgroundColor: 'rgba(255, 99, 132, 0.2)', - fill: true, + fill: false, borderColor: 'rgb(75, 192, 192)', tension: 0.1 }] @@ -250,6 +237,17 @@ options: { responsive: true, maintainAspectRatio: false, + scales: { + y: { + ticks: { + // Include a dollar sign in the ticks + callback: function (value, index, ticks) { + return '£' + Chart.Ticks.formatters.numeric.apply(this, [value, index, ticks]); + } + } + } + + } } }; // end config @@ -262,6 +260,41 @@ $("#up-green").show() $("#red-down").hide() } + + // Line chart for Win percentage over last 5 games using Chart.js + const ctx2 = document.getElementById('myChart2'); + const data2 = { + labels: labels, + datasets: [{ + label: 'Win percentage', + data: ["{{ win_percentage_last_5["fg0"] }}", "{{ win_percentage_last_5["fg1"] }}", "{{ win_percentage_last_5["fg2"] }}", "{{ win_percentage_last_5["fg3"] }}", "{{ win_percentage_last_5["fg4"] }}", "{{ win_percentage_last_5["fg5"] }}"], + fill: false, + borderColor: 'rgb(75, 192, 192)', + tension: 0.1 + }] + }; + + const config2 = { + type: 'line', + data: data2, + // Set sizing to fit parent div + options: { + responsive: true, + maintainAspectRatio: false, + scales: { + y: { + ticks: { + // Include a sign in the ticks + callback: function (value, index, ticks) { + return value + '%'; + } + }, + } + } + } + }; // end config + + const myChart2 = new Chart(ctx2, config2); </script> </body> diff --git a/data/teams.py b/data/teams.py index 25b3ac402e77f24aee02e5673c4780431b1797e6..f88762155dc81b5a105d8a8805fe4e8baa12fcff 100644 --- a/data/teams.py +++ b/data/teams.py @@ -6,6 +6,11 @@ from .processing import ( filter_players, filter_teams, ) +from .player import ( + calculate_win_percentage_overall, + calculate_win_percentage_last_5, + calculate_win_percentage_base, +) def team_player_list(team_name) -> list: @@ -28,3 +33,46 @@ def team_player_list(team_name) -> list: team_players.append(player) return team_players + + +def team_win_percentage_base(team_name) -> float: + players = team_player_list(team_name) + + # Calculate the win percentage for each player + win_percentage = [] + for player in players: + win_percentage.append(calculate_win_percentage_base(player)) + + # Calculate the average win percentage for the team + return int(round(sum(win_percentage) / len(win_percentage), 2) * 100) + + +def team_win_percentage_last_5(team_name) -> list[float]: + players = team_player_list(team_name) + + # Calculate the win percentage for each player + wp_fg0 = [] + wp_fg1 = [] + wp_fg2 = [] + wp_fg3 = [] + wp_fg4 = [] + wp_fg5 = [] + + for player in players: + results_dict = calculate_win_percentage_last_5(player) + wp_fg0.append(results_dict["fg0"]) + wp_fg1.append(results_dict["fg1"]) + wp_fg2.append(results_dict["fg2"]) + wp_fg3.append(results_dict["fg3"]) + wp_fg4.append(results_dict["fg4"]) + wp_fg5.append(results_dict["fg5"]) + + # Calculate the average win percentage for the team + return { + "fg0": int(round(sum(wp_fg0) / len(wp_fg0), 2) * 100), + "fg1": int(round(sum(wp_fg1) / len(wp_fg1), 2) * 100), + "fg2": int(round(sum(wp_fg2) / len(wp_fg2), 2) * 100), + "fg3": int(round(sum(wp_fg3) / len(wp_fg3), 2) * 100), + "fg4": int(round(sum(wp_fg4) / len(wp_fg4), 2) * 100), + "fg5": int(round(sum(wp_fg5) / len(wp_fg5), 2) * 100), + }