show separate beta stats in mod compatibility list

2 files changed, 31 insertions, 11 deletions

diff --git a/src/SMAPI.Web/Views/Mods/Index.cshtml b/src/SMAPI.Web/Views/Mods/Index.cshtml
index 5df49afb..8a764803 100644
--- a/src/SMAPI.Web/Views/Mods/Index.cshtml
+++ b/src/SMAPI.Web/Views/Mods/Index.cshtml
@@ -16,7 +16,7 @@
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/tablesorter@2.31.3" crossorigin="anonymous"></script>
-    <script src="~/Content/js/mods.js?r=20200218"></script>
+    <script src="~/Content/js/mods.js?r=20210929"></script>
     <script>
         $(function() {
             var data = @this.ForJson(Model.Mods ?? new ModModel[0]);
@@ -65,9 +65,15 @@ else
             </div>
         </div>
         <div id="mod-count" v-show="showAdvanced">
-            <div v-if="visibleStats.total > 0">
-                {{visibleStats.total}} mods shown ({{Math.round((visibleStats.compatible + visibleStats.workaround) / visibleStats.total * 100)}}% compatible or have a workaround, {{Math.round((visibleStats.soon + visibleStats.broken) / visibleStats.total * 100)}}% broken, {{Math.round(visibleStats.abandoned / visibleStats.total * 100)}}% obsolete).
+            <div v-if="visibleMainStats.total > 0">
+                {{visibleMainStats.total}} mods shown ({{visibleMainStats.percentCompatible}}% compatible or have a workaround, {{visibleMainStats.percentBroken}}% broken, {{visibleMainStats.percentObsolete}}% obsolete).
             </div>
+            @if (hasBeta)
+            {
+                <div v-if="visibleBetaStats.total > 0">
+                    <strong>@betaLabel</strong>: {{visibleBetaStats.total}} mods shown ({{visibleBetaStats.percentCompatible}}% compatible or have a workaround, {{visibleBetaStats.percentBroken}}% broken, {{visibleBetaStats.percentObsolete}}% obsolete).
+                </div>
+            }
             <span v-else>No matching mods found.</span>
         </div>
         <table class="wikitable" id="mod-list">
diff --git a/src/SMAPI.Web/wwwroot/Content/js/mods.js b/src/SMAPI.Web/wwwroot/Content/js/mods.js
index ac2754a4..945f93ef 100644
--- a/src/SMAPI.Web/wwwroot/Content/js/mods.js
+++ b/src/SMAPI.Web/wwwroot/Content/js/mods.js
@@ -9,12 +9,16 @@ smapi.modList = function (mods, enableBeta) {
         soon: 0,
         broken: 0,
         abandoned: 0,
-        invalid: 0
+        invalid: 0,
+        percentCompatible: 0,
+        percentBroken: 0,
+        percentObsolete: 0
     };
     var data = {
         mods: mods,
         showAdvanced: false,
-        visibleStats: $.extend({}, defaultStats),
+        visibleMainStats: $.extend({}, defaultStats),
+        visibleBetaStats: $.extend({}, defaultStats),
         filters: {
             source: {
                 value: {
@@ -124,7 +128,8 @@ smapi.modList = function (mods, enableBeta) {
                 var words = data.search.toLowerCase().split(" ");
 
                 // apply criteria
-                var stats = data.visibleStats = $.extend({}, defaultStats);
+                var mainStats = data.visibleMainStats = $.extend({}, defaultStats);
+                var betaStats = data.visibleBetaStats = $.extend({}, defaultStats);
                 for (var i = 0; i < data.mods.length; i++) {
                     var mod = data.mods[i];
                     mod.Visible = true;
@@ -132,10 +137,20 @@ smapi.modList = function (mods, enableBeta) {
                     // check filters
                     mod.Visible = this.matchesFilters(mod, words);
                     if (mod.Visible) {
-                        stats.total++;
-                        stats[this.getCompatibilityGroup(mod)]++;
+                        mainStats.total++;
+                        betaStats.total++;
+
+                        mainStats[this.getCompatibilityGroup(mod.Compatibility.Status)]++;
+                        betaStats[this.getCompatibilityGroup(mod.LatestCompatibility.Status)]++;
                     }
                 }
+
+                // add aggregate stats
+                for (let stats of [mainStats, betaStats]) {
+                    stats.percentCompatible = Math.round((stats.compatible + stats.workaround) / stats.total * 100);
+                    stats.percentBroken = Math.round((stats.soon + stats.broken) / stats.total * 100);
+                    stats.percentObsolete = Math.round(stats.abandoned / stats.total * 100);
+                }
             },
 
             /**
@@ -220,11 +235,10 @@ smapi.modList = function (mods, enableBeta) {
 
             /**
              * Get a mod's compatibility group for mod metrics.
-             * @param {object} mod The mod to check.
+             * @param {string} mod The mod status for which to get the group.
              * @returns {string} The compatibility group (one of 'compatible', 'workaround', 'soon', 'broken', 'abandoned', or 'invalid').
              */
-            getCompatibilityGroup: function (mod) {
-                var status = mod.LatestCompatibility.Status;
+            getCompatibilityGroup: function (status) {
                 switch (status) {
                     // obsolete
                     case "abandoned":