Updated ui with new graph

app.py

@@ -16,107 +16,113 @@ except:
 project = hopsworks.login()
 fs = project.get_feature_store()
 
-players = fs.get_feature_group("fpl_predictions")
+# players = fs.get_feature_group("fpl_predictions")
 
-player_df = players.read()
+# player_df = players.read()
 
-player_data = player_df.to_json(orient="records")
+# player_data = player_df.to_json(orient="records")
 
-players = json.loads(player_data)
+# players = json.loads(player_data)
 
-for player in players:
-    if player["predicted_score"] != None:
-        player["predicted_score"] = round(player["predicted_score"])
+# for player in players:
+#     if player["predicted_score"] != None:
+#         player["predicted_score"] = round(player["predicted_score"])
 
 # Mock data (replace with actual database query or file read)
 sample_players = [
     {
-        "firstname": "Harry",
-        "lastname": "Kane",
-        "club": "Tottenham",
-        "position": "ST",
-        "points": 100,
-        "5latestGws": [
-            {"gameweek": 21, "total_points": 10, "predicted_points": 8},
-            {"gameweek": 20, "total_points": 7, "predicted_points": 6},
-            {"gameweek": 19, "total_points": 13, "predicted_points": 10},
-            {"gameweek": 18, "total_points": 5, "predicted_points": 4},
-            {"gameweek": 17, "total_points": 11, "predicted_points": 9},
+        "first_name": "Harry",
+        "second_name": "Kane",
+        "position": "Midfielder",
+        "team": "Tottenham",
+        "total_points": 100,
+        "latest_predictions": [
+            {"gameweek": 21, "total_points": 18, "predicted_points": 15},
+            {"gameweek": 20, "total_points": 12, "predicted_points": 8},
+            {"gameweek": 19, "total_points": 9, "predicted_points": 5},
+            {"gameweek": 18, "total_points": 5, "predicted_points": 7},
+            {"gameweek": 17, "total_points": 11, "predicted_points": 7},
         ],
-        "nextGwPrediction": 7,
+        "predicted_score": 7,
     },
     {
-        "firstname": "Erling",
-        "lastname": "Haaland",
-        "club": "Man City",
-        "position": "ST",
-        "points": 120,
-        "5latestGws": [
-            {"gameweek": 21, "total_points": 15, "predicted_points": 12},
-            {"gameweek": 20, "total_points": 9, "predicted_points": 11},
-            {"gameweek": 19, "total_points": 8, "predicted_points": 10},
-            {"gameweek": 18, "total_points": 12, "predicted_points": 13},
-            {"gameweek": 17, "total_points": 14, "predicted_points": 13},
+        "first_name": "Harry2",
+        "second_name": "Kane2",
+        "position": "Midfielder",
+        "team": "Tottenham",
+        "total_points": 100,
+        "latest_predictions": [
+            {"gameweek": 21, "total_points": 10, "predicted_points": 8},
+            {"gameweek": 20, "total_points": 5, "predicted_points": 8},
+            {"gameweek": 19, "total_points": 13, "predicted_points": 15},
+            {"gameweek": 18, "total_points": 5, "predicted_points": 7},
+            {"gameweek": 17, "total_points": 14, "predicted_points": 18},
         ],
-        "nextGwPrediction": 8,
+        "predicted_score": 7,
     },
     {
-        "firstname": "Bukayo",
-        "lastname": "Saka",
-        "club": "Arsenal",
-        "position": "MID",
-        "points": 80,
-        "5latestGws": [
-            {"gameweek": 21, "total_points": 7, "predicted_points": 6},
-            {"gameweek": 20, "total_points": 6, "predicted_points": 7},
-            {"gameweek": 19, "total_points": 9, "predicted_points": 8},
-            {"gameweek": 18, "total_points": 10, "predicted_points": 9},
-            {"gameweek": 17, "total_points": 8, "predicted_points": 8},
+        "first_name": "Harry3",
+        "second_name": "Kane3",
+        "position": "Midfielder",
+        "team": "Tottenham",
+        "total_points": 100,
+        "latest_predictions": [
+            {"gameweek": 21, "total_points": 14, "predicted_points": 11},
+            {"gameweek": 20, "total_points": 8, "predicted_points": 4},
+            {"gameweek": 19, "total_points": 11, "predicted_points": 7},
+            {"gameweek": 18, "total_points": 6, "predicted_points": 8},
+            {"gameweek": 17, "total_points": 12, "predicted_points": 9},
         ],
-        "nextGwPrediction": 6,
+        "predicted_score": 7,
     },
     {
-        "firstname": "Marcus",
-        "lastname": "Rashford",
-        "club": "Man United",
-        "position": "MID",
-        "points": 90,
-        "5latestGws": [
-            {"gameweek": 21, "total_points": 12, "predicted_points": 10},
-            {"gameweek": 20, "total_points": 10, "predicted_points": 9},
-            {"gameweek": 19, "total_points": 11, "predicted_points": 10},
-            {"gameweek": 18, "total_points": 14, "predicted_points": 12},
-            {"gameweek": 17, "total_points": 13, "predicted_points": 11},
+        "first_name": "Harry4",
+        "second_name": "Kane4",
+        "position": "Midfielder",
+        "team": "Tottenham",
+        "total_points": 100,
+        "latest_predictions": [
+            {"gameweek": 21, "total_points": 10, "predicted_points": 8},
+            {"gameweek": 20, "total_points": 7, "predicted_points": 6},
+            {"gameweek": 19, "total_points": 13, "predicted_points": 10},
+            {"gameweek": 18, "total_points": 5, "predicted_points": 4},
+            {"gameweek": 17, "total_points": 11, "predicted_points": 9},
         ],
-        "nextGwPrediction": 9,
+        "predicted_score": 7,
     },
     {
-        "firstname": "Mohamed",
-        "lastname": "Salah",
-        "club": "Liverpool",
-        "position": "MID",
-        "points": 70,
-        "5latestGws": [
-            {"gameweek": 21, "total_points": 8, "predicted_points": 7},
-            {"gameweek": 20, "total_points": 6, "predicted_points": 8},
-            {"gameweek": 19, "total_points": 7, "predicted_points": 9},
-            {"gameweek": 18, "total_points": 11, "predicted_points": 10},
-            {"gameweek": 17, "total_points": 9, "predicted_points": 8},
+        "first_name": "Harry5",
+        "second_name": "Kane5",
+        "position": "Midfielder",
+        "team": "Tottenham",
+        "total_points": 100,
+        "latest_predictions": [
+            {"gameweek": 21, "total_points": 10, "predicted_points": 8},
+            {"gameweek": 20, "total_points": 7, "predicted_points": 6},
+            {"gameweek": 19, "total_points": 13, "predicted_points": 10},
+            {"gameweek": 18, "total_points": 5, "predicted_points": 4},
+            {"gameweek": 17, "total_points": 11, "predicted_points": 9},
         ],
-        "nextGwPrediction": 7,
+        "predicted_score": 7,
     },
 ]
 
+# Format the latest_predictions for each player
+for player in sample_players:
+    player["latest_predictions_str"] = ", ".join(
+        [f"GW{pred['gameweek']}: {pred['total_points']} pts (Pred: {pred['predicted_points']} pts)" for pred in player["latest_predictions"]]
+    )
+
 
 @app.route("/test")
 def test():
-    return players
+    return "test"
 
 
 @app.route("/")
 def index():
     """Render the main page."""
-    return render_template("players.html", players=players)
+    return render_template("players.html", players=sample_players, current_gameweek=20)
 
 
 @app.route("/api/players", methods=["POST", "GET"])

templates/players.html

@@ -3,24 +3,18 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>FPL Player Points</title>
+    <title>FPL Player Points for week {{ current_gameweek }}</title>
     <script src="https://unpkg.com/htmx.org"></script>
     <link rel="stylesheet" href="/static/styles.css" />
-    <!-- Include Bootstrap CSS -->
-    <link
-      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
-      rel="stylesheet"
-    />
-    <!-- Include DataTables CSS -->
-    <link
-      href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"
-      rel="stylesheet"
-    />
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
+    <link rel="stylesheet" href="https://cdn.datatables.net/2.2.0/css/dataTables.dataTables.css" />
+    <link rel="stylesheet" href="https://cdn.datatables.net/select/2.1.0/css/select.dataTables.css">
+    <link rel="stylesheet" href="https://code.highcharts.com/css/highcharts.css"/>
   </head>
   <body>
     <div class="container">
-      <h1 class="my-4">FPL Player Points</h1>
-
+      <h1 class="my-4" style="padding-bottom: 6%;">FPL Player Points</h1>
+      <h2 class="my-4">Gameweek {{ current_gameweek }}</h2>
       <!-- Player Table -->
       <table id="player-table" class="display compact">
         <thead class="thead-dark">
@@ -41,40 +35,122 @@
             <td>{{ player.team }}</td>
             <td>{{ player.total_points }}</td>
             <td>
-              <!-- <table class="inner-table">
-                <tr>
-                  <th>Gameweek</th>
-                  <th>Points</th>
-                  <th>Predicted Points</th>
-                </tr>
-                {% for gw in player['5latestGws'] %}
-                <tr>
-                  <td>{{ gw['gameweek'] }}</td>
-                  <td>{{ gw['total_points'] }}</td>
-                  <td>{{ gw['predicted_points'] }}</td>
-                </tr>
-                {% endfor %}
-              </table> -->
-            </td>
+              {% for prediction in player.latest_predictions %}
+              <div>Gameweek {{ prediction.gameweek }}: {{ prediction.total_points }} points (Predicted: {{ prediction.predicted_points }} points)</div>
+              {% endfor %}
+          </td>
             <td>{{ player.predicted_score }}</td>
           </tr>
           {% endfor %}
         </tbody>
       </table>
+      <canvas id="myChart"></canvas>
     </div>
 
     <!-- Include jQuery -->
-    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-    <!-- Include DataTables JS -->
-    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
-    <!-- Include Bootstrap JS and dependencies -->
+    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
+    <script src="https://cdn.datatables.net/2.2.0/js/dataTables.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.datatables.net/select/2.1.0/js/dataTables.select.js"></script>
+    <script src="https://cdn.datatables.net/select/2.1.0/js/select.dataTables.js"></script>
 
     <script>
-        $(document).ready(function() {
-            $('#player-table').DataTable();
-        });
-    </script>
+      $(document).ready(function() {
+          const table = new DataTable('#player-table');
+
+          // Function to generate random colors
+          function getRandomColor() {
+              const letters = '0123456789ABCDEF';
+              let color = '#';
+              for (let i = 0; i < 6; i++) {
+                  color += letters[Math.floor(Math.random() * 16)];
+              }
+              return color;
+          }
+
+          // Function to generate chart data for a single player
+          function generateChart(player) {
+              // Extract gameweeks and points data
+              const gameweeks = player.latest_predictions.map(prediction => prediction.gameweek);
+              const totalPointsData = player.latest_predictions.map(prediction => prediction.total_points);
+              const predictedPointsData = player.latest_predictions.map(prediction => prediction.predicted_points);
+
+              // Prepare datasets for the chart
+              const datasets = [
+                  {
+                      label: `${player.first_name} ${player.second_name} - Total Points`,
+                      data: totalPointsData,
+                      borderColor: getRandomColor(),
+                      backgroundColor: 'rgba(0, 123, 255, 0.3)', // Transparent fill color
+                      fill: '+1' // Fill the area between total and predicted points
+                  },
+                  {
+                      label: `${player.first_name} ${player.second_name} - Predicted Points`,
+                      data: predictedPointsData,
+                      borderColor: getRandomColor(),
+                      fill: false // No fill for predicted points line
+                  }
+              ];
+
+              return { labels: gameweeks, datasets: datasets };
+          }
+
+          // Function to render the chart
+          function renderChart(player) {
+              const chartData = generateChart(player);
+
+              // Destroy any existing chart before creating a new one
+              if (window.myChart) {
+                  if (window.myChart instanceof Chart) {
+                      window.myChart.destroy();
+                  }
+              }
+
+              // Create a new chart
+              const ctx = document.getElementById('myChart').getContext('2d');
+              window.myChart = new Chart(ctx, {
+                  type: 'line',
+                  data: {
+                      labels: chartData.labels,
+                      datasets: chartData.datasets
+                  },
+                  options: {
+                      scales: {
+                          y: {
+                              beginAtZero: true
+                          }
+                      }
+                  }
+              });
+          }
+
+          // Handle click event on the DataTable rows
+          $('#player-table tbody').on('click', 'tr', function() {
+              // Get the player's data from the DataTable
+              const rowData = table.row(this).data();
+
+              console.log('Row data:', rowData[0]);
+
+              // Assuming `playersData` contains all players' data
+              const selectedPlayer = playersData.find(player => (player.first_name + " " + player.second_name) === rowData[0]);
+
+              console.log('Selected player');
+              if (selectedPlayer) {
+                  console.log('Selected player:', selectedPlayer);
+                  renderChart(selectedPlayer);
+              }
+          });
+
+          // Players data injected from the backend
+          const playersData = JSON.parse('{{ players | tojson | safe }}');
+
+      });
+  </script>
+
+
+
+
   </body>
 </html>