leaderboard stats fixes.

style fixes first pass at barchart
ServiceStack · Apr 10, 2024 · 85a3f14 · 85a3f14
1 parent 11cc3b2
commit 85a3f14
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 34 deletions.
diff --git a/MyApp.ServiceInterface/LeaderboardServices.cs b/MyApp.ServiceInterface/LeaderboardServices.cs
@@ -56,27 +56,12 @@ private CalculateLeaderboardResponse CalculateLeaderboardResponse(List<StatTotal
             var res = new LeaderBoardWinRate
             {
                 Id = y.Key,
-                WinRate = CalculateWinRate(answers, y.Key)
+                WinRate = CalculateWinRate(answers, y.Key),
+                NumberOfQuestions = answers.Count(x => x.Id.Contains("-" + y.Key))
             };
             return res;
         }).ToList();
 
-        var modelScale = 1 / overallWinRates.Where(x => IsHuman(x.Id) == false)
-            .Sum(y => y.WinRate);
-        var humanScale = 1 / overallWinRates.Where(x => IsHuman(x.Id))
-            .Sum(y => y.WinRate);
-        var skipScale = double.IsInfinity(modelScale);
-        if (skipScale)
-        {
-            modelScale = 1;
-        }
-        var skipHumanScale = double.IsInfinity(humanScale);
-        if (skipHumanScale)
-        {
-            humanScale = 1;
-        }
-
-
         var leaderBoard = new CalculateLeaderboardResponse
         {
             MostLikedModels = statsByUser.Where(x => IsHuman(x.Id) == false)
@@ -100,13 +85,15 @@ private CalculateLeaderboardResponse CalculateLeaderboardResponse(List<StatTotal
                 .Select(x => new LeaderBoardWinRate
                 {
                     Id = x.Id,
-                    WinRate = x.WinRate * (skipHumanScale ? 1 : humanScale) * 100
+                    WinRate = x.WinRate * 100,
+                    NumberOfQuestions = x.NumberOfQuestions
                 }).ToList(),
             ModelWinRate = overallWinRates.Where(x => IsHuman(x.Id) == false)
                 .Select(x => new ModelWinRate
                 {
                     Id = x.Id,
-                    WinRate = x.WinRate * (skipScale ? 1 : modelScale) * 100
+                    WinRate = x.WinRate * 100,
+                    NumberOfQuestions = x.NumberOfQuestions
                 }).ToList(),
             ModelTotalScore = statsByUser.GroupBy(x => x.Id)
                 .Select(x => new ModelTotalScore
@@ -256,12 +243,16 @@ public class ModelWinRate
 {
     public string Id { get; set; }
     public double WinRate { get; set; }
+
+    public int NumberOfQuestions { get; set; }
 }
 
 public class LeaderBoardWinRate
 {
     public string Id { get; set; }
     public double WinRate { get; set; }
+
+    public int NumberOfQuestions { get; set; }
 }
 
 public class LeaderBoardWinRateByTag

diff --git a/MyApp/Components/Shared/LeaderboardView.razor b/MyApp/Components/Shared/LeaderboardView.razor
@@ -15,7 +15,7 @@
                 var avatarUrl = userName.GetAvatarUrl();
                 <div class="flex items-center">
                     <div class="mr-4 flex items-center justify-center w-12 h-8 text-black dark:text-white rounded-full text-2xl">@rankTotal .</div>
-                    <img src="@avatarUrl" alt="Avatar" class="w-24 h-24 mr-4"/>
+                    <img src="@avatarUrl" alt="Avatar" class="w-12 h-12 mr-4 space-y-6"/>
                     <div class="flex-1">
                         <h3 class="text-xl font-semibold">@displayName</h3>
                         <div class="text-md text-gray-600 dark:text-gray-400">@model.StartingUpVotes.ToHumanReadable() votes</div>
@@ -41,10 +41,10 @@
 
                 <div class="flex items-center">
                     <div class="mr-4 flex items-center justify-center w-12 h-8 text-black dark:text-white rounded-full text-2xl">@rankTotal .</div>
-                    <img src="@avatarUrl" alt="Avatar" class="w-24 h-24 mr-4"/>
+                    <img src="@avatarUrl" alt="Avatar" class="w-12 h-12 mr-4 space-y-6"/>
                     <div class="flex-1">
                         <h3 class="text-xl font-semibold">@displayName</h3>
-                        <div class="text-md text-gray-600 dark:text-gray-400">@(Math.Round(model.WinRate, 2)) %</div>
+                        <div class="text-md text-gray-600 dark:text-gray-400">@(Math.Round(model.WinRate, 2)) % (@model.NumberOfQuestions)</div>
                     </div>
                 </div>
 
@@ -62,13 +62,15 @@
 </div>
 
 <div data-module="mjs/leaderboard.mjs">
-    <chart-js id="winrate-chart" data-labels='[@string.Join(",", LeaderBoardData.ModelWinRate.Select(x => $"\"{AppConfig.GetApplicationUser(x.Id).DisplayName}\"") )]'
-              data-datasets='[{ "label": "Win Rate", "data": [@string.Join(",", LeaderBoardData.ModelWinRate.Select(x => Math.Round(x.WinRate, 2)))], "backgroundColor": "rgba(54, 162, 235, 0.2)", "borderColor": "rgba(54, 162, 235, 1)", "borderWidth": 1 }]'
+    <chart-js id="winrate-chart" data-labels='[@string.Join(",", GetWinRates().Select(x => $"\"{AppConfig.GetApplicationUser(x.Id).DisplayName}\"") )]'
+              data-datasets='[{ "label": "Win Rate", "data": [@string.Join(",", GetWinRates().Select(x => Math.Round(x.WinRate, 2)))], "borderWidth": 1, "modelNames": @GetWinRates().Select(x => x.Id).ToJson() }]'
               data-options='{ "scale": { "ticks": { "beginAtZero": true } }, "responsive": true, "maintainAspectRatio": false }' 
               data-type="pie"></chart-js>
 </div>
 
 @code {
     [Parameter]
     public CalculateLeaderboardResponse LeaderBoardData { get; set; }
+
+    private List<ModelWinRate> GetWinRates() => LeaderBoardData.ModelWinRate.OrderByDescending(x => x.WinRate).ToList();
 }
diff --git a/MyApp/wwwroot/mjs/leaderboard.mjs b/MyApp/wwwroot/mjs/leaderboard.mjs
@@ -5,26 +5,56 @@ import { mount, alreadyMounted, forceMount } from "app.mjs"
 import {GetMeta} from "./dtos.mjs";
 import Chart from "../posts/components/ChartJs.mjs";
 
-export default  {
+const modelColors = {
+    "gemma": "#1d4ed8",
+    "gemma-2b": "#60a5fa",
+    "mistral": "#b91c1c",
+    "gpt-4-turbo": "#047857",
+    "claude-3-opus": "#b45309",
+    "claude-3-haiku": "#44403c",
+    "claude-3-sonnet": "#78716c",
+}
+
+const modelAliases = {
+    "gemma": "Gemini",
+    "gemma-2b": "Gemini 2B",
+    "mistral": "Mistral",
+    "gpt-4-turbo": "GPT-4 Turbo",
+    "claude-3-opus": "Claude 3 Opus",
+    "claude-3-haiku": "Claude 3 Haiku",
+    "claude-3-sonnet": "Claude 3 Sonnet",
+}
+export default {
     async load() {
         const el = $1("#winrate-chart")
         if (!el) return
-        
+
         // Get data prop values from data attributes
-        const labelsArray = el.getAttribute("data-labels")
         const datasetsArray = el.getAttribute("data-datasets")
         const optionsObj = el.getAttribute("data-options")
-        
+
         // Get type prop value from data attribute
         const type = "bar"
-
-        console.log({labelsArray, datasetsArray, optionsObj, type})
-
+
         // Parse data attributes
-        const labels = JSON.parse(labelsArray)
         const datasets = JSON.parse(datasetsArray)
+        const modelNames = datasets[0].modelNames
+
+        // Create labels and data arrays based on the original order of modelNames
+        const labels = modelNames.map(modelName => modelAliases[modelName] || modelName);
+        const data = modelNames.map(modelName => datasets[0].data[modelNames.indexOf(modelName)]);
+
+        // Create the dataset object
+        const newDataset = {
+            label: "Win Rate %",
+            data: data,
+            backgroundColor: modelNames.map(modelName => modelColors[modelName] || "#000"),
+            borderColor: modelNames.map(modelName => modelColors[modelName] || "#000"),
+            borderWidth: 1
+        };
+
         const options = JSON.parse(optionsObj)
-        
-        mount(el, Chart, { type: type, data: {labels: labels, datasets: datasets}, options: options })
+
+        mount(el, Chart, { type: type, data: { labels: labels, datasets: [newDataset] }})
     }
 }