From a80afc6d691c28a84b74276e88f17c5a389d9ca3 Mon Sep 17 00:00:00 2001 From: vhaudiquet Date: Fri, 6 Dec 2024 17:01:59 +0100 Subject: [PATCH] New tierlists :) --- frontend/components/tierlist/Chart.vue | 83 +++++++++++++++++++ .../{TierlistTier.vue => tierlist/Tier.vue} | 4 +- frontend/package-lock.json | 30 +++++++ frontend/package.json | 2 + frontend/pages/tierlist/[lane].vue | 47 +++++++---- 5 files changed, 146 insertions(+), 20 deletions(-) create mode 100644 frontend/components/tierlist/Chart.vue rename frontend/components/{TierlistTier.vue => tierlist/Tier.vue} (87%) diff --git a/frontend/components/tierlist/Chart.vue b/frontend/components/tierlist/Chart.vue new file mode 100644 index 0000000..200254b --- /dev/null +++ b/frontend/components/tierlist/Chart.vue @@ -0,0 +1,83 @@ + + + \ No newline at end of file diff --git a/frontend/components/TierlistTier.vue b/frontend/components/tierlist/Tier.vue similarity index 87% rename from frontend/components/TierlistTier.vue rename to frontend/components/tierlist/Tier.vue index 711408a..dfdc0e0 100644 --- a/frontend/components/TierlistTier.vue +++ b/frontend/components/tierlist/Tier.vue @@ -1,7 +1,7 @@ @@ -9,7 +9,7 @@ defineProps<{

{{ title }}

- +
diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 62d9367..ca018f0 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,10 +10,12 @@ "@nuxt/fonts": "^0.10.2", "@nuxt/image": "^1.8.1", "@nuxtjs/seo": "^2.0.2", + "chart.js": "^4.4.7", "mongodb": "^6.10.0", "nuxt": "^3.14.1592", "svg-dom-arrows": "^2.3.0", "vue": "latest", + "vue-chartjs": "^5.3.2", "vue-router": "latest" }, "devDependencies": { @@ -1095,6 +1097,12 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@kurkle/color": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz", + "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==", + "license": "MIT" + }, "node_modules/@kwsites/file-exists": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@kwsites/file-exists/-/file-exists-1.1.1.tgz", @@ -4367,6 +4375,18 @@ "integrity": "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==", "license": "MIT" }, + "node_modules/chart.js": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.7.tgz", + "integrity": "sha512-pwkcKfdzTMAU/+jNosKhNL2bHtJc/sSmYgVbuGTEDhzkrhmyihmP7vUc/5ZK9WopidMDHNe3Wm7jOd/WhuHWuw==", + "license": "MIT", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=8" + } + }, "node_modules/cheerio": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0.tgz", @@ -12002,6 +12022,16 @@ "ufo": "^1.5.4" } }, + "node_modules/vue-chartjs": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.2.tgz", + "integrity": "sha512-NrkbRRoYshbXbWqJkTN6InoDVwVb90C0R7eAVgMWcB9dPikbruaOoTFjFYHE/+tNPdIe6qdLCDjfjPHQ0fw4jw==", + "license": "MIT", + "peerDependencies": { + "chart.js": "^4.1.1", + "vue": "^3.0.0-0 || ^2.7.0" + } + }, "node_modules/vue-devtools-stub": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 590aee4..ecc7c5a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,10 +13,12 @@ "@nuxt/fonts": "^0.10.2", "@nuxt/image": "^1.8.1", "@nuxtjs/seo": "^2.0.2", + "chart.js": "^4.4.7", "mongodb": "^6.10.0", "nuxt": "^3.14.1592", "svg-dom-arrows": "^2.3.0", "vue": "latest", + "vue-chartjs": "^5.3.2", "vue-router": "latest" }, "devDependencies": { diff --git a/frontend/pages/tierlist/[lane].vue b/frontend/pages/tierlist/[lane].vue index 08850b4..e98833a 100644 --- a/frontend/pages/tierlist/[lane].vue +++ b/frontend/pages/tierlist/[lane].vue @@ -21,28 +21,37 @@ const champions = championsData.value.slice(1).filter((champion) => { acc || (current.data.toLowerCase() == lane.toLowerCase()), false) }) -function tierFromPickrate(pickrate: number, previousTier: number) { - return champions.filter((champion) => { - const championData : ChampionData | undefined = infoMap.get(champion.alias.toLowerCase()) - if(championData == undefined) return false; +const allChampions = champions.map((x) => { + const championData : ChampionData = infoMap.get(x.alias.toLowerCase())!! - let currentLane = championData.lanes[0] - for(let championLane of championData.lanes) { - if(championLane.data.toLowerCase() == lane.toLowerCase()) { - currentLane = championLane - break - } + let currentLane = championData.lanes[0] + for(let championLane of championData.lanes) { + if(championLane.data.toLowerCase() == lane.toLowerCase()) { + currentLane = championLane + break } + } - return currentLane.pickrate > pickrate && currentLane.pickrate < previousTier - }).sort((a, b) => infoMap.get(b.alias.toLowerCase())?.pickrate!! - infoMap.get(a.alias.toLowerCase())?.pickrate!!) + return {lane: currentLane, champion: x} +}).sort((a, b) => b.lane.pickrate - a.lane.pickrate) + +const p_min = Math.min(...allChampions.map((x) => x.lane.pickrate)) +const p_max = Math.max(...allChampions.map((x) => x.lane.pickrate)) + +allChampions.map((x) => (x as {lane: LaneData, champion: Champion, scaledPickrate: number}).scaledPickrate = (x.lane.pickrate - p_min)/(p_max - p_min)) +allChampions.sort((a, b) => b.lane.pickrate - a.lane.pickrate) +function tierFromScaledPickrate(min: number, max: number) { + return (allChampions as Array<{lane: LaneData, champion: Champion, scaledPickrate: number}>) + .filter(({scaledPickrate: scaledPickrate}) => { + return scaledPickrate > min && scaledPickrate <= max + }) } -const s_tier = tierFromPickrate(0.22, 1) -const a_tier = tierFromPickrate(0.15, 0.22) -const b_tier = tierFromPickrate(0.10, 0.15) -const c_tier = tierFromPickrate(0.05, 0.10) -const d_tier = tierFromPickrate(0, 0.05) +const s_tier = tierFromScaledPickrate(0.9, 1) +const a_tier = tierFromScaledPickrate(0.7, 0.9) +const b_tier = tierFromScaledPickrate(0.5, 0.7) +const c_tier = tierFromScaledPickrate(0.3, 0.5) +const d_tier = tierFromScaledPickrate(0.1, 0.3)