cal/sba-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add checkbox to invert sort of leaderboards

Browse Source
This commit is contained in:
Peter 2024-01-24 12:09:14 -05:00
parent 8225fb7615
commit 8a56977446
1 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/views/LeaderboardView.vue
View File

@ -5,11 +5,13 @@
<h1 id="season-heading">Season {{ seasonNumber }} Leaders</h1> <h1 id="season-heading">Season {{ seasonNumber }} Leaders</h1>
<h2 id="week-num">Week {{ weekNumber }}</h2> <h2 id="week-num">Week {{ weekNumber }}</h2>
<h2 id="stat-heading">{{ statType }} Leaderboards - Min {{ statMinimum }}</h2> <h2 id="stat-heading">{{ statType }} Leaderboards - Min {{ statMinimum }}</h2>
<!-- <label for="seasonNumber">Select Season</label> --> </div>
</div>
<div class="row">
<div class="col-sm-12">
<select name="seasonNumber" id="seasonNumber" v-model="seasonNumber"> <select name="seasonNumber" id="seasonNumber" v-model="seasonNumber">
<option v-for="season in seasonNumbers" :key="season" :value="season">Season {{ season }}</option> <option v-for="season in seasonNumbers" :key="season" :value="season">Season {{ season }}</option>
</select> </select>
<!-- TODO ADD SORT FOR ASC/DESC -->
<select name="statType" id="statType" v-model="statType"> <select name="statType" id="statType" v-model="statType">
<option key="Batting" value="Batting">Batting</option> <option key="Batting" value="Batting">Batting</option>
<option key="Pitching" value="Pitching">Pitching</option> <option key="Pitching" value="Pitching">Pitching</option>
@ -20,6 +22,8 @@
<option key="Starters" value="Starters">Starters Only</option> <option key="Starters" value="Starters">Starters Only</option>
<option key="Relievers" value="Relievers">Relievers Only</option> <option key="Relievers" value="Relievers">Relievers Only</option>
</select> </select>
<input type="checkbox" id="invertSort" style="margin-left: 3px" v-model="invertSort" />
<label for="invertSort" style="font-size: 1rem; vertical-align: -1px; margin: 0; padding: 0;">Invert Sort</label>
</div> </div>
</div> </div>
<div class="row" id="stat-listing"> <div class="row" id="stat-listing">
@ -119,6 +123,7 @@ export default {
seasonNumber: CURRENT_SEASON, seasonNumber: CURRENT_SEASON,
statType: 'Batting' as 'Batting' | 'Pitching' | 'Fielding', statType: 'Batting' as 'Batting' | 'Pitching' | 'Fielding',
pitchingType: 'All' as 'All' | 'Starters' | 'Relievers', pitchingType: 'All' as 'All' | 'Starters' | 'Relievers',
invertSort: false as boolean,
weekNumber: undefined! as number weekNumber: undefined! as number
} }
}, },
@ -278,8 +283,8 @@ export default {
// concat an empty array so that the existing array is not sorted as a side effect // concat an empty array so that the existing array is not sorted as a side effect
const statBase: BattingStat[] = paExemptStat.includes(stat) ? this.allPlayersBattingStats.concat([]) : this.qualifyingBattingStats.concat([]) const statBase: BattingStat[] = paExemptStat.includes(stat) ? this.allPlayersBattingStats.concat([]) : this.qualifyingBattingStats.concat([])
// concat an empty array so that the existing array is not sorted as a side effect const sortMultiplier = this.invertSort ? -1 : 1
return statBase.sort((a, b) => (b[stat] as number) - (a[stat] as number)).slice(0, 10) return statBase.sort((a, b) => sortMultiplier * ((b[stat] as number) - (a[stat] as number))).slice(0, 10)
}, },
getTop10PitchingStatByCategory(stat: keyof PitchingStat): PitchingStat[] { getTop10PitchingStatByCategory(stat: keyof PitchingStat): PitchingStat[] {
// qualifying IP exempt stats // qualifying IP exempt stats
@ -297,7 +302,7 @@ export default {
) )
const reverseSortStats = ['era', 'whip', 'bbPer9'] const reverseSortStats = ['era', 'whip', 'bbPer9']
const sortMultiplier = reverseSortStats.includes(stat) ? -1 : 1 const sortMultiplier = (reverseSortStats.includes(stat) ? -1 : 1) * (this.invertSort ? -1 : 1)
return filteredStatBase.sort((a, b) => sortMultiplier * ((b[stat] as number) - (a[stat] as number))).slice(0, 10) return filteredStatBase.sort((a, b) => sortMultiplier * ((b[stat] as number) - (a[stat] as number))).slice(0, 10)
}, },
@ -322,14 +327,16 @@ export default {
// 'xCheckCountLeftField' | 'xCheckCountCenterField' | 'xCheckCountRightField' // 'xCheckCountLeftField' | 'xCheckCountCenterField' | 'xCheckCountRightField'
const xCheckCountProperty = `xCheckCount${position[1]}` as keyof FlatFieldingStat const xCheckCountProperty = `xCheckCount${position[1]}` as keyof FlatFieldingStat
const sortMultiplier = this.invertSort ? -1 : 1
return this.allPlayersFieldingStats.concat([]) return this.allPlayersFieldingStats.concat([])
.filter(stat => (stat[xCheckCountProperty] as number) >= Math.floor(xCheckCountPerWeek * this.weekNumberForCalcs)) .filter(stat => (stat[xCheckCountProperty] as number) >= Math.floor(xCheckCountPerWeek * this.weekNumberForCalcs))
.sort((a, b) => ((b[stat] as number) - (a[stat] as number))).slice(0, 10) .sort((a, b) => sortMultiplier * ((b[stat] as number) - (a[stat] as number))).slice(0, 10)
} }
// non-wF% stats currently won't have any qualifying minimum // non-wF% stats currently won't have any qualifying minimum
const sortMultiplier = this.invertSort ? -1 : 1
return this.allPlayersFieldingStats.concat([]) return this.allPlayersFieldingStats.concat([])
.sort((a, b) => ((b[stat] as number) - (a[stat] as number))) .sort((a, b) => sortMultiplier * ((b[stat] as number) - (a[stat] as number)))
.slice(0, 10) .slice(0, 10)
}, },
formatNumericalStat(stat: BattingStat | PitchingStat | FlatFieldingStat, property: keyof BattingStat | keyof PitchingStat | keyof FlatFieldingStat, precision: number): number | string { formatNumericalStat(stat: BattingStat | PitchingStat | FlatFieldingStat, property: keyof BattingStat | keyof PitchingStat | keyof FlatFieldingStat, precision: number): number | string {
@ -459,4 +466,13 @@ export default {
} }
} }
} }
</script> </script>
<style>
/* align checkbox better */
input[type=checkbox] {
vertical-align: -2px;
margin: 0;
padding: 0;
}
</style>