Converting to tracking rankings by manager (nmelhado#185)

This PR holds several key changes
- Rankings are now tracked by manager (for all time records as well as in the manager page)
    - This increases the overall accuracy of the Records and Rankings page (as well as the manager pages)
- It now uses the league specific avatar (if one exists)
- The chart style has been updated to better accommodate more entries (horizontal bars instead of vertical)
- Waivers have received a face lift and now look much cleaner and better
- Commissioner badge added on the managers pages

Preview of changes below:

| Old | New |
|---|---|
| ![old waivers](https://user-images.githubusercontent.com/39418000/211601742-568d71ff-e3e1-4419-8c23-2aed436b46d7.png) | ![new waivers](https://user-images.githubusercontent.com/39418000/211601802-6ec40035-569b-4d58-902e-4fa4d936f6aa.png) |
| ![old waivers tr](https://user-images.githubusercontent.com/39418000/211602064-c2617271-12ba-40e9-acc5-ddfc53efb5ff.png) | ![new waivers tr](https://user-images.githubusercontent.com/39418000/211602119-cb56b85f-8f52-481e-86d2-9ee9722b6a2e.png) |
| ![old records single](https://user-images.githubusercontent.com/39418000/211602226-72b5d79c-a8c8-40ab-920b-62ff879846e9.png) | ![new records - single](https://user-images.githubusercontent.com/39418000/211602267-cbb9ac26-c7c1-4eb7-8306-2fcc0c4e4776.png) |
| ![old records vs](https://user-images.githubusercontent.com/39418000/211602352-814d3daa-a013-4548-bd00-b2fa99f7be89.png) | ![new records vs](https://user-images.githubusercontent.com/39418000/211602397-92b7275e-7ff9-4b05-b1fd-355f67c7bbb6.png) |
| ![old chart](https://user-images.githubusercontent.com/39418000/211602484-f59b219a-bda8-4901-8d4c-f3d320453b0e.png) | ![new chart](https://user-images.githubusercontent.com/39418000/211602542-17908108-f74a-4e32-a7f0-b1d9883a6056.png) |

__**Due to the enormity of this change, there may be bugs. I have done my best to check the edge conditions, but the scope of this is large enough that I may have missed some**__

Author: nmelhado

CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file.
 
+## [2.1.0] - 2023-01-10
+
+### Changed
+
+- Rankings are now organize by manager instead of team! [(issue #164)](https://github.com/nmelhado/league-page/issues/164)
+    - This means that if managers have changed throughout the years, you will now see accurate rankings for a given manager
+    - **To take full advantage of this you need to add managerIDs to the managers object in leagueInfo`src/lib/utils/leagueInfo.js`**
+        - More instructions in the updated [Training Wheels managers instructions](https://github.com/nmelhado/league-page/blob/master/TRAINING_WHEELS.md#2-add-managers)
+- Use league specific avatar if avilable [(issue #156)](https://github.com/nmelhado/league-page/issues/156)
+
+### Fixed
+
+- Standings order issue [(issue #179)](https://github.com/nmelhado/league-page/issues/179)
+    - The re-implememntation of how team and user data is rendered should have fixed this
+
 ## [2.0.2] - 2022-09-29
 
 ### Fixed

README.md

@@ -67,7 +67,7 @@ Generate a custom league page for your Sleeper fantasy football league in just a
 ![league ID instructions](https://storage.googleapis.com/nfl-player-data/league_id_instructions.png)
 - Write your homepage text (league intro/bio) `/src/lib/utils/leagueInfo.js` (lines 9-14)
 ![homepage text](https://storage.googleapis.com/nfl-player-data/homepage_text.png)
-- Next, fill out and uncomment (delete the `// ` at the beginning of each line) the managers' object (lines 27 - 92), also located in `/src/lib/utils/leagueInfo.js`, there should be one object for each manager (for assistance, consult the [Training Wheels guide](https://github.com/nmelhado/league-page/blob/master/TRAINING_WHEELS.md#ii-adding-managers-and-changing-the-homepage-text))
+- Next, fill out and uncomment (delete the `// ` at the beginning of each line) the managers' object (lines 27 - 92), also located in `/src/lib/utils/leagueInfo.js`, there should be one object for each manager. The structure may change in the future (it has already 😅). The source of truth is down at the bottom, lines 104-126 (for assistance, consult the [Training Wheels guide](https://github.com/nmelhado/league-page/blob/master/TRAINING_WHEELS.md#ii-adding-managers-and-changing-the-homepage-text)).
 ![manager object](https://storage.googleapis.com/nfl-player-data/managersObj.png)
 ![manager rendering](https://storage.googleapis.com/nfl-player-data/managerRendering.png)
 - Add corresponding images for managers to the `/static/managers/` directory and make the sure the name matches with what was provided above

TRAINING_WHEELS.md

@@ -117,15 +117,14 @@ Generate a custom league page for your Sleeper fantasy football league in just a
 <br />
 
 - Fill each one out as follows:
-    - `"roster" :` give the roster ID for this manager
-        - To find the roster ID for the manager, go back to your website and scroll down to the `Power Rankings` graph (or to any of the graphs in your records page)
-        > ![pRankings](https://storage.googleapis.com/nfl-player-data/pRankings.png)
-
-        <br />
-
-        - The roster ID is the order of the bar chart, the first bar is roster ID 1, the second is roster ID 2, etc.
+    - `"roster" :` **This has been deprecated! You can ignore this field as long as you provide a managerID**
+        - ~~To find the roster ID for the manager, go back to your website and scroll down to the `Power Rankings` graph (or to any of the graphs in your records page)~~ (Power Rankings are no longer in order)
+    - `"managerID" :` the user ID of the manager
+        - To find a manager's user ID, go to `https://api.sleeper.app/v1/league/<your_league_id/users` (for example: https://api.sleeper.app/v1/league/784583295500464128/users) and find the corresponding userID for each manager
+        - This feld was added in version 2.1.0, so you will have to add it manually. Remember when adding it, to place the id within quotes (i.e. `"managerID" : "12345678",`)
     - `"name" :` The name of this manager
-    - `"tookOver" :` If this manager took over an orphaned team in your league, give the year they took over. Otherwise set this to `null`
+    - `"tookOver" :` **This has been deprecated! You can ignore this field as long as you provide a managerID**
+        - If this manager took over an orphaned team in your league, give the year they took over. Otherwise set this to `null`
     - `"location" :` Where is this manager based out of (City, State, Country, whatever floats your boat)
     - `"bio" :` This manager's bio. If you don't have a bio yet, leave it as is and come back and edit this again when you have the bio.
     - `"photo" :` This manager's photo. To upload a photo:

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "league-page",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "homepage": "https://github.com/nmelhado/league-page",
   "repository": {
     "type": "git",

package.json

@@ -1,15 +1,9 @@
 <script>
-	import {cleanName, gotoManager} from '$lib/utils/helper';
-	export let podium, currentManagers;
+    import { gotoManager } from '$lib/utils/helper';
+	import { getAvatarFromTeamManagers, getNestedTeamNamesFromTeamManagers } from '$lib/utils/helperFunctions/universalFunctions';
+	export let podium, leagueTeamManagers;
 
 	const { year, champion, second, third, divisions, toilet } = podium;
-
-	const getNames = (name, rosterID) => {
-		if(cleanName(name) != cleanName(currentManagers[rosterID].name)) {
-			return `${name}<div class="curOwner">(${currentManagers[rosterID].name})</div>`;
-		}
-		return name;
-	}
 </script>
 
 <style>
@@ -340,15 +334,15 @@
 		<img src="./podium.png" class="podiumImage" alt="podium" />
 
 		<!-- champs -->
-		<img src="{champion.avatar}" class="first champ clickable" on:click={() => gotoManager(champion.rosterID)} alt="champion" />
+		<img src="{getAvatarFromTeamManagers(leagueTeamManagers, champion, year)}" class="first champ clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: champion})} alt="champion" />
 		<img src="./laurel.png" class="laurel" alt="laurel" />
-		<span class="label firstLabel clickable" on:click={() => gotoManager(champion.rosterID)}>{@html getNames(champion.name, champion.rosterID)}</span>
+		<span class="label firstLabel clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: champion})}>{@html getNestedTeamNamesFromTeamManagers(leagueTeamManagers, year, champion)}</span>
 
-		<img src="{second.avatar}" class="second champ clickable" on:click={() => gotoManager(second.rosterID)} alt="2nd" />
-		<span class="label secondLabel clickable" on:click={() => gotoManager(second.rosterID)}>{@html getNames(second.name, second.rosterID)}</span>
+		<img src="{getAvatarFromTeamManagers(leagueTeamManagers, second, year)}" class="second champ clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: second})} alt="2nd" />
+		<span class="label secondLabel clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: second})}>{@html getNestedTeamNamesFromTeamManagers(leagueTeamManagers, year, second)}</span>
 
-		<img src="{third.avatar}" class="third champ clickable" on:click={() => gotoManager(third.rosterID)} alt="3rd" />
-		<span class="label thirdLabel clickable" on:click={() => gotoManager(third.rosterID)}>{@html getNames(third.name, third.rosterID)}</span>
+		<img src="{getAvatarFromTeamManagers(leagueTeamManagers, third, year)}" class="third champ clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: third})} alt="3rd" />
+		<span class="label thirdLabel clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: third})}>{@html getNestedTeamNamesFromTeamManagers(leagueTeamManagers, year, third)}</span>
 	</div>
 	<div class="divisions">
 		{#each divisions as division}
@@ -360,10 +354,10 @@
 						<h6>Regular Season Champion</h6>
 					{/if}
 					<div class="leaderBlock">
-						<img src="{division.manager.avatar}" class="divisionLeader clickable" on:click={() => gotoManager(division.manager.rosterID)} alt="{division.name} champion" />
+						<img src="{getAvatarFromTeamManagers(leagueTeamManagers, division.rosterID, year)}" class="divisionLeader clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: division.rosterID})} alt="{division.name} champion" />
 						<img src="./medal.png" class="medal" alt="champion" />
 					</div>
-					<span class="genLabel clickable" on:click={() => gotoManager(division.manager.rosterID)}>{@html getNames(division.manager.name, division.manager.rosterID)}</span>
+					<span class="genLabel clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: division.rosterID})}>{@html getNestedTeamNamesFromTeamManagers(leagueTeamManagers, year, division.rosterID)}</span>
 				</div>
 			{/if}
 		{/each}
@@ -376,10 +370,10 @@
 			<img src="./toilet-banner.png" class="toilet-banner" alt="The Toilet Bowl" />
 
 			<div class="toiletBowl">
-				<img src="{toilet.avatar}" class="toiletWinner clickable" on:click={() => gotoManager(toilet.rosterID)} alt="toilet bowl winner" />
+				<img src="{getAvatarFromTeamManagers(leagueTeamManagers, toilet, year)}" class="toiletWinner clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: toilet})} alt="toilet bowl winner" />
 				<img src="./toilet-bowl-2.png" class="toilet" alt="toilet bowl" />
 			</div>
-			<span class="genLabel clickable" on:click={() => gotoManager(toilet.rosterID)}>{@html getNames(toilet.name, toilet.rosterID)}</span>
+			<span class="genLabel clickable" on:click={() => gotoManager({leagueTeamManagers, rosterID: toilet})}>{@html getNestedTeamNamesFromTeamManagers(leagueTeamManagers, year, toilet)}</span>
 		</div>
 	{/if}
 </div>

src/lib/Awards/Awards.svelte

@@ -0,0 +1,156 @@
+<script>
+	import { getAvatarFromTeamManagers, getTeamNameFromTeamManagers, gotoManager, round } from "./utils/helperFunctions/universalFunctions";
+
+
+    export let leagueTeamManagers, stat, label, xMin, xMax, secondStat, managerID, rosterID, color, year;
+
+    $: user = managerID ? leagueTeamManagers.users[managerID] : null;
+</script>
+
+<style>
+    :global(.opacity) {
+        opacity: 0.3;
+    }
+
+    .barParent {
+        position: relative;
+        margin-bottom: -10px;
+        height: 76px;
+    }
+
+    .managerName {
+        position: absolute;
+        top: 0;
+        left: 80px;
+    }
+
+	.teamAvatar {
+        position: absolute;
+        left: 20px;
+        top: 0;
+        bottom: 0;
+        height: 40px;
+        margin: auto;
+		border-radius: 50%;
+		border: 2px solid;
+        z-index: 14;
+        background-color: #fff;
+	}
+
+    .statBars {
+        display: flex;
+        margin: 0 auto;
+    }
+
+    .leftSpacer {
+        width: 40px;
+        height: 1px;
+        display: inline-block;
+    }
+
+    .rightSpacer {
+        width: 20px;
+        height: 1px;
+        display: inline-block;
+    }
+
+    .bars {
+        flex-grow: 2;
+        position: relative;
+    }
+
+    .bar {
+        height: 1.8em;
+        border-radius: 0 0.9em 0.9em 0;
+        z-index: 10;
+    }
+
+    .secondBar {
+        position: absolute;
+        top: 0;
+        z-index: 11;
+        left: 0;
+    }
+
+    .barLabel {
+        z-index: 12;
+        vertical-align: text-top;
+        margin-left: 40px;
+    }
+
+    .vCenter {
+        display: block;
+        height: 1.8em;
+        position: absolute;
+        width: 100%;
+        top: 0;
+        bottom: 0;
+        margin: auto 0;
+    }
+
+    .clickable {
+        cursor: pointer;
+    }
+
+    @media (max-width: 600px) {
+        .barParent {
+            /* margin-bottom: -10px; */
+            height: 57px;
+        }
+        .managerName {
+            left: 60px;
+            font-size: 0.8em;
+        }
+        .teamAvatar {
+            left: 10px;
+            height: 30px;
+        }
+        .barLabel {
+            margin-left: 30px;
+            vertical-align: middle;
+            font-size: 0.8em;
+        }
+        .leftSpacer {
+            width: 30px;
+        }
+        .rightSpacer {
+            width: 10px;
+        }
+        .bar {
+            height: 1.2em;
+            border-radius: 0 0.6em 0.6em 0;
+        }
+        .vCenter {
+            height: 1.2em;
+        }
+    }
+</style>
+
+<div class="barParent">
+    <img alt="team avatar" on:click={() => gotoManager({leagueTeamManagers, managerID, rosterID})} style="border-color: var({color});" class="teamAvatar clickable" src="{user ? `https://sleepercdn.com/avatars/thumbs/${user.avatar}` : getAvatarFromTeamManagers(leagueTeamManagers, rosterID, year)}" />
+    <span class="managerName clickable" on:click={() => gotoManager({leagueTeamManagers, managerID, rosterID})}>
+        {#if user}
+            {user.display_name}
+        {:else if rosterID}
+            {getTeamNameFromTeamManagers(leagueTeamManagers, rosterID, year)}
+        {/if}
+    </span>
+    <div class="vCenter">
+        <div class="statBars">
+            <div class="leftSpacer" />
+            <div class="bars">
+                <div class="bar{!secondStat  ? '' : ' opacity'}" style="background-color: var({color}); width: {(stat - xMin) / (xMax - xMin == 0 ? 1 : (xMax - xMin)) * 100}%;">
+                    {#if !secondStat}
+                        <span class="barLabel">{stat}{label}</span>
+                    {/if}
+                </div>
+                {#if secondStat}
+                    <div class="bar secondBar" style="background-color: var({color}); width: {(secondStat - xMin) / (xMax - xMin == 0 ? 1 : (xMax - xMin)) * 100}%;">
+                        <span class="barLabel">{secondStat}&nbsp;&nbsp;of&nbsp;&nbsp;{stat}&nbsp;&nbsp;({round(secondStat/stat*100)}%)</span>
+                    </div>
+                {/if}
+            </div>
+            <div class="rightSpacer" />
+        </div>
+    </div>
+</div>