Adds SAUCE, BRIQUETTE, and RIBS to the website (#39)

* Adds the old stats to the website, but not to the ranking page yet

* Adds stats to the ranking view and adds some filtering

* Updates data scripts to avoid hanging and adds filtering for stats on the ranking page

* Adds shorter default timeout to github action jobs

* Mobile optimization to the event ranking table

.github/workflows/update_data.yaml

@@ -46,6 +46,7 @@ jobs:
     name: Load Blue Banners
     needs: set_up_environment
     runs-on: ubuntu-latest
+    timeout-minutes: 30
     defaults:
       run:
         working-directory: ./util
@@ -74,6 +75,7 @@ jobs:
     name: Load Event Data
     needs: [set_up_environment, load_blue_banners]
     runs-on: ubuntu-latest
+    timeout-minutes: 30
     defaults:
       run:
         working-directory: ./util
@@ -102,6 +104,7 @@ jobs:
     name: Load Team Data
     needs: [set_up_environment, load_blue_banners]
     runs-on: ubuntu-latest
+    timeout-minutes: 30
     defaults:
       run:
         working-directory: ./util

src/components/EventDataRow.vue

@@ -9,8 +9,8 @@
         <td class="event-name-data">
             <a v-bind:href="eventLink">{{ year }} {{ name }}</a>
         </td>
-        <td v-for="stat in eventData">
-            {{ stat.value.toFixed(4) }}
+        <td v-for="stat in visibleData">
+            {{ valueDisplay(stat) }}
         </td>
     </tr>
 </template>
@@ -22,7 +22,8 @@ export default {
         name: null,
         year: null,
         eventId: null,
-        eventData: null
+        eventData: null,
+        columnData: null
     },
     computed: {
         rankNumberString() {
@@ -36,6 +37,26 @@ export default {
         },
         eventAvailable() {
             return this.eventId != null && this.eventData != null;
+        },
+        visibleData() {
+            // Default to showing all columns.
+            let data = this.eventData;
+
+            // If column data is provided, only show the visible columns based on name matching.
+            if (this.columnData) {
+                let cols = this.columnData.filter((col) => col.visible == true);
+                let colNames = cols.map(({ name }) => name);
+                data = this.eventData.filter((item) => colNames.includes(item.name));
+            }
+            return data;
+        }
+    },
+    methods: {
+        valueDisplay(stat) {
+            if (stat && stat.value) {
+                return stat.value.toFixed(4);
+            }
+            return "N/A";
         }
     }
 }

src/components/StatSummary.vue

@@ -16,7 +16,7 @@ ChartJS.register(ArcElement, Tooltip, Legend, Colors, Title)
                 {{ stat.name }}
             </div>
             <div class="stat-value">
-                {{ stat.value.toFixed(4) }}
+                {{ valueDisplay(stat) }}
             </div>
         </div>
     </div>
@@ -108,6 +108,12 @@ export default {
         }
     },
     methods: {
+        valueDisplay(stat) {
+            if (stat && stat.value) {
+                return stat.value.toFixed(4);
+            }
+            return "N/A";
+        },
         convertDictToSortedValueArray(dict) {
             var items = Object.keys(dict).map(function (key) {
                 return [key, dict[key]];
@@ -202,8 +208,8 @@ export default {
 }
 
 .stat-cell {
-    max-width: 250px;
-    min-width: 100px;
+    width: 250px;
+    min-width: 25%;
     margin: 0 auto;
 }
 

src/components/TableHeader.vue

@@ -4,7 +4,7 @@
 
 <template>
     <thead>
-        <th v-for="col, i in columnData" :class="headerClass(col, i)" @click="sortIfSortable(col, i)">
+        <th v-for="col, i in visibleColumns" :class="headerClass(col, i)" @click="sortIfSortable(col, i)">
             {{ col.name }}
         </th>
     </thead>
@@ -16,6 +16,12 @@ export default {
         columnData: null,
         sortedColumnIndex: -1
     },
+    computed: {
+        visibleColumns() {
+            let cols = this.columnData.filter(col => col.visible == true);
+            return cols;
+        }
+    },
     methods: {
         headerClass(col, idx) {
             if (Object.keys(col).includes('sortable')
@@ -38,6 +44,12 @@ export default {
 </script>
 
 <style scoped>
+table th {
+    position: sticky;
+    top: 0px;
+    background: var(--bbq-background-color);
+}
+
 .stat-row {
     display: flex;
     flex-direction: row;