Added winrate over time to single boardgame pages

static/javascript/boardgame.js

@@ -1,5 +1,7 @@
 document.body.onload=loadGame()
 
+const important_player_name_colors = {'Yarne':'black', 'Lore':'green', 'Lucas':'brown','Louize':'blue','Ruben':'purple', 'Ina':'orange', 'Matthias':'yellow','Kelly':'darkorange','Keanu':'darkblue'}
+
 async function create_info_block(block_title, block_value){
 
     var title = document.createElement('h2')
@@ -56,36 +58,9 @@ async function create_game_block(requested_game){
     $('#boardgame_link').attr('href', 'https://boardgamegeek.com/boardgame/' + requested_game.id)
 }
 
-async function loadGame() {
+async function create_playercount_vote_chart(requested_game){
-    let params = new URLSearchParams(document.location.search);
-    let boardgame_id = params.get("id");
-
-    var loadGameURL = api_url + '/boardgame?id=' + boardgame_id
-    var requested_game = await makeRequest(loadGameURL)
-    
-    create_game_block(requested_game)
-
-    create_info_block('Spelers', requested_game.min_players != requested_game.max_players ? `${requested_game.min_players} - ${requested_game.max_players}` : requested_game.min_players)
-
-    create_info_meter('Moeilijkheid', 1, 5, requested_game.weight)
-
-    create_info_block(requested_game.designers.length > 1 ? 'Designers' : 'Designer', requested_game.designers.map(designer => designer.name).join(' - '))
-
-    create_info_block(requested_game.artists.length > 1 ? 'Artiesten' : 'Artiest', requested_game.artists.map(artist => artist.name).join(' - '))
-
-    if (requested_game.owned_info != null){
-        let acquisition_date = new Date(requested_game.owned_info.acquisition_date)
-
-        const date_formatter = new Intl.DateTimeFormat('nl-BE', { dateStyle: 'short' });
-        acquisition_date = date_formatter.format(acquisition_date)
-
-        create_info_block('Datum gekocht', acquisition_date)
-    }
-
-    create_info_block('Aantal keer gespeeld', requested_game.plays.length)
 
     const playercount_votes_chart = $('#playercount_votes_chart')
-
     const playercountVotes = requested_game.playercount_votes
 
     const labels = playercountVotes.map(vote => vote.playercount);
@@ -140,5 +115,95 @@ async function loadGame() {
     };
 
     new Chart(playercount_votes_chart, config);
+}
+
+async function create_player_winrate_chart(requested_game){
+    const playercount_votes_chart = $('#player_winrate_chart')
+    const playercountVotes = requested_game.playercount_votes
+
+    // const labels = playercountVotes.map(vote => vote.playercount);
+    // const bestData = playercountVotes.map(vote => vote.best);
+    // const recommendedData = playercountVotes.map(vote => vote.recommended);
+    // const notRecommendedData = playercountVotes.map(vote => vote.not_recommended);
+
+    const data_url = api_url + `/statistics/winrate_over_time?day_step=30&boardgame_id=${requested_game.id}`
+    const data_request = await makeRequest(data_url)
+
+    let datasets = []
+
+    for (const [playername, color] of Object.entries(important_player_name_colors)){
+
+        let dataset = {
+              label: playername,
+              data: Object.values(data_request[playername].result),
+              borderColor: color
+            }
+          
+          datasets.push(dataset)
+    }
+
+
+    const labels = Object.keys(data_request[Object.keys(data_request)[0]].result)
+
+    const data = {
+        labels: labels,
+        datasets: datasets
+    };
+
+    const config = {
+        type: 'line',
+        data: data,
+        options: {
+            scales: {
+              y: {
+                beginAtZero: true,
+                offset: true,
+                ticks:{
+                    format:{
+                        style: 'percent'
+                    }
+                }
+              },
+              x: {
+                offset: true
+              },
+            }
+          },
+    };
+
+    new Chart(playercount_votes_chart, config);
+}
+
+async function loadGame() {
+    let params = new URLSearchParams(document.location.search);
+    let boardgame_id = params.get("id");
+
+    var loadGameURL = api_url + '/boardgame?id=' + boardgame_id
+    var requested_game = await makeRequest(loadGameURL)
+    
+    create_game_block(requested_game)
+
+    create_info_block('Spelers', requested_game.min_players != requested_game.max_players ? `${requested_game.min_players} - ${requested_game.max_players}` : requested_game.min_players)
+
+    create_info_meter('Moeilijkheid', 1, 5, requested_game.weight)
+
+    create_info_block(requested_game.designers.length > 1 ? 'Designers' : 'Designer', requested_game.designers.map(designer => designer.name).join(' - '))
+
+    create_info_block(requested_game.artists.length > 1 ? 'Artiesten' : 'Artiest', requested_game.artists.map(artist => artist.name).join(' - '))
+
+    if (requested_game.owned_info != null){
+        let acquisition_date = new Date(requested_game.owned_info.acquisition_date)
+
+        const date_formatter = new Intl.DateTimeFormat('nl-BE', { dateStyle: 'short' });
+        acquisition_date = date_formatter.format(acquisition_date)
+
+        create_info_block('Datum gekocht', acquisition_date)
+    }
+
+    create_info_block('Aantal keer gespeeld', requested_game.plays.length)
+
+    create_playercount_vote_chart(requested_game)
+
+    create_player_winrate_chart(requested_game)
 
 }

templates/boardgame.jinja

@@ -16,8 +16,9 @@
         <div class="col-sm-3" id="info_block">
             <h1>Info</h1>
         </div>
-        <div class="col-sm-3">
+        <div class="col-sm-6">
             <canvas id="playercount_votes_chart"></canvas>
+            <canvas id="player_winrate_chart"></canvas>
         </div>
     </div>