diff --git a/index.html b/index.html index b31e6a37905edd41ad64abdf26a71662803fa57e..45303fa77ecc0090b32d7863f6aa2c009e467ecb 100644 --- a/index.html +++ b/index.html @@ -33,10 +33,6 @@ <select id="color-by-setting" name="color-by-setting"> <option value="default" selected>---</option> - <option value="team">Team</option> - <option value="nation">Nation</option> - <option value="pos">Position</option> - <option value="league">Liga</option> </select> </div> <div class="group-by"> diff --git a/src/countries.ts b/src/countries.ts index 07ad61e1a3f091d18d31da1697b80a15ae975e07..9bf6c0770baf56589d629e0aa2625aaf19490c10 100644 --- a/src/countries.ts +++ b/src/countries.ts @@ -592,5 +592,9 @@ export const countries = [ { "code": "BFA", "name": "Burkina Faso", + }, + { + "code": "GAM", + "name": "Gambia", } ] \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 02e32ef097d6fbe7f1d66378cdc40d773eff7de0..e4e7c3f64de1a3e60963fa5cee4cbce85a1588f1 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,7 +4,7 @@ import BubbleChart, {BubbleChartConfigParam} from "@/charts/bubbleChart.ts"; import Search from "@/search.ts"; import {countries} from "@/countries.ts"; import {numericColumns, Player} from "@/player.ts"; -import {getPositionName, positions} from "@/positions.ts"; +import {getPositionName} from "@/positions.ts"; // const radarChartWrapper = document.querySelector('#radar-chart-wrapper') as HTMLDivElement; const bubbleChartWrapper = document.querySelector('#bubble-chart-wrapper') as HTMLDivElement; @@ -31,7 +31,12 @@ groupBySetting.oninput = (event) => { } const colorBySetting = document.querySelector('#color-by-setting') as HTMLInputElement - +for (const column of Object.keys(numericColumns)) { + const option = document.createElement('option') + option.value = column + option.text = numericColumns[column as keyof typeof numericColumns] + colorBySetting.appendChild(option) +} colorBySetting.oninput = (event) => { if (bubbleChart) { bubbleChart.updateVisConfig({colorAccessor: (d: any) => d[event.target?.value]} as BubbleChartConfigParam) @@ -78,6 +83,7 @@ dsv(';', 'data/output.csv').then(data => { zoomSlider.value = event.transform.k.toString() }, renderTooltip: (dataPoint: any, tooltip: d3.Selection<d3.BaseType, unknown, HTMLElement, any>) => { + const age = dataPoint['age'].split('-') tooltip.html(` <table> <tr><th>Name</th><td>${dataPoint['player']}</td></tr> @@ -85,6 +91,7 @@ dsv(';', 'data/output.csv').then(data => { <tr><th>Position</th><td>${dataPoint['pos']}</td></tr> <tr><th>Nationalität</th><td>${dataPoint['nation']}</td></tr> <tr><th>Team</th><td>${dataPoint['team']}</td></tr> + <tr><th>Alter</th><td>${age[0]}${age[1] ? ' - ' + age[1] + ' Tage' : ''}</td></tr> </table> `) } diff --git a/src/player.ts b/src/player.ts index 59142f3093a36af155257957448a3b252404eba8..51742764214f53fd9e599bf6ebc7f235ab26ca6d 100644 --- a/src/player.ts +++ b/src/player.ts @@ -1,109 +1,209 @@ -/* - -"league": "ARG-Primera-Division", - "season": "2324", - "team": "Arg Juniors", - "player": "Alan Rodríguez", - "nation": "", - "pos": "", - "age": "", - "born": "", - "Playing Time": "", - "Performance": "", - "Expected_0": "", - "Progression": "", - "Per 90 Minutes": "", - "Standard": "0", - "Expected_1": "-1.7", - "Total": "1355", - "Short": "84.1", - "Medium": "77.6", - "Long": "43.3", - "Ast": "0", - "xAG": "0.8", - "Expected": "", - "KP": "11", - "1/3": "27", - "PPA": "8", - "CrsPA": "2", - "PrgP": "44", - "SCA": "2.16", - "GCA": "0.23", - "Tackles": "25", - "Blocks": "7", - "Int": "11", - "Tkl+Int": "47", - "Clr": "7", - "Err": "0", - "Touches": "677", - "Penalty Kicks": - */ - -export type Player = { //create type based on comment above - "league": string, - "season": string, - "team": string, - "player": string, - "nation": string, - "pos": string, - "age": string, - "born": string, - "Playing Time": number, - "Performance": number, - "Expected_0": number, - "Progression": number, - "Per 90 Minutes": number, - "Standard": number, - "Expected_1": number, - "Total": number, - "Short": number, - "Medium": number, - "Long": number, - "Ast": number, - "xAG": number, - "Expected": number, - "KP": number, - "1/3": number, - "PPA": number, - "CrsPA": number, - "PrgP": number, - "SCA": number, - "GCA": number, - "Tackles": number, - "Blocks": number, - "Int": number, - "Tkl+Int": number, - "Clr": number, - "Err": number, - "Touches": number, - "Penalty Kicks": number, +export type Player = { + league: string, + season: string, + team: string, + player: string, + nation: string, + pos: string, + age: string, + born: string, + 'Playing Time _ MP': number, + 'Playing Time _ Starts': number, + 'Playing Time _ Min': number, + 'Playing Time _ 90s': number, + 'Performance _ Gls': number, + 'Performance _ Ast': number, + 'Performance _ G+A': number, + 'Performance _ G-PK': number, + 'Performance _ PK': number, + 'Performance _ PKatt': number, + 'Performance _ CrdY': number, + 'Performance _ CrdR': number, + 'Expected_0 _ xG': number, + 'Expected_0 _ npxG': number, + 'Expected_0 _ xAG': number, + 'Expected_0 _ npxG+xAG': number, + 'Progression _ PrgC': number, + 'Progression _ PrgP': number, + 'Progression _ PrgR': number, + 'Per 90 Minutes _ Gls': number, + 'Per 90 Minutes _ Ast': number, + 'Per 90 Minutes _ G+A': number, + 'Per 90 Minutes _ G-PK': number, + 'Per 90 Minutes _ G+A-PK': number, + 'Per 90 Minutes _ xG': number, + 'Per 90 Minutes _ xAG': number, + 'Per 90 Minutes _ xG+xAG': number, + 'Per 90 Minutes _ npxG': number, + 'Per 90 Minutes _ npxG+xAG': number, + 'Standard _ Gls': number, + 'Standard _ Sh': number, + 'Standard _ SoT': number, + 'Standard _ SoT%': number, + 'Standard _ Sh/90': number, + 'Standard _ SoT/90': number, + 'Standard _ G/Sh': number, + 'Standard _ G/SoT': number, + 'Standard _ Dist': number, + 'Standard _ FK': number, + 'Standard _ PK': number, + 'Standard _ PKatt': number, + 'Expected_1 _ xG': number, + 'Expected_1 _ npxG': number, + 'Expected_1 _ npxG/Sh': number, + 'Expected_1 _ G-xG': number, + 'Expected_1 _ np:G-xG': number, + 'Total _ Cmp': number, + 'Total _ Att': number, + 'Total _ Cmp%': number, + 'Total _ TotDist': number, + 'Total _ PrgDist': number, + 'Short _ Cmp': number, + 'Short _ Att': number, + 'Short _ Cmp%': number, + 'Medium _ Cmp': number, + 'Medium _ Att': number, + 'Medium _ Cmp%': number, + 'Long _ Cmp': number, + 'Long _ Att': number, + 'Long _ Cmp%': number, + 'Ast': number, + 'xAG': number, + 'Expected _ xA': number, + 'Expected _ A-xAG': number, + 'KP': number, + '1/3': number, + 'PPA': number, + 'CrsPA': number, + 'PrgP': number, + 'SCA _ SCA': number, + 'SCA _ SCA90': number, + 'GCA _ GCA': number, + 'GCA _ GCA90': number, + 'Tackles _ Tkl': number, + 'Tackles _ TklW': number, + 'Blocks _ Blocks': number, + 'Blocks _ Sh': number, + 'Blocks _ Pass': number, + 'Int': number, + 'Tkl+Int': number, + 'Clr': number, + 'Err': number, + 'Touches _ Touches': number, + 'Performance _ GA': number, + 'Performance _ GA90': number, + 'Performance _ SoTA': number, + 'Performance _ Saves': number, + 'Performance _ Save%': number, + 'Performance _ CS': number, + 'Performance _ CS%': number, + 'Penalty Kicks _ PKA': number, + 'Penalty Kicks _ PKsv': number, + 'Penalty Kicks _ PKm': number, + 'Penalty Kicks _ Save%': number, + 'Expected _ PSxG': number, + 'Expected _ PSxG/SoT': number, + 'Expected _ PSxG+/-': number, + 'Expected _ /90': number, } export const numericColumns = { - "Playing Time": "Spielzeit", - 'Progression': 'Progression', - 'Per 90 Minutes': 'Pro 90 Minuten', - 'Standard': 'Standard', - 'Expected_1': 'Erwartet', - 'Total': 'Gesamt', - 'Short': 'Kurze Pässe', - 'Medium': 'Mittellange Pässe', - 'Long': 'Lange Pässe', - 'Ast': 'Vorlagen', - 'xAG': 'erwartete Assists', - 'KP': 'KP', - '1/3': 'Pässe ins letzte Drittel', - 'PPA': 'PPA', - 'CrsPA': 'CrsPA', - 'PrgP': 'PrgP', - 'SCA': 'Schusserzeugende Aktionen', - 'GCA': 'Torerzeugende Aktionen', - 'Tackles': 'Tackles', - 'Blocks': 'Blocks', + 'Playing Time _ MP': 'Spiele', + 'Playing Time _ Starts': 'Startelf-Einsätze', + 'Playing Time _ Min': 'Minuten', + 'Playing Time _ 90s': '90 Minuten durchgespielt', + 'Performance _ Gls': 'Tore', + 'Performance _ Ast': 'Assists', + 'Performance _ G+A': 'Tore + Assists', + 'Performance _ G-PK': 'Tore (ohne Elfmeter)', + 'Performance _ PK': 'Elfmeter', + 'Performance _ PKatt': 'Elfmeter-Versuche', + 'Performance _ CrdY': 'Gelbe Karten', + 'Performance _ CrdR': 'Rote Karten', + 'Expected_0 _ xG': 'Erwartete Tore (xG)', + 'Expected_0 _ npxG': 'Erwartete Tore (npxG)', + 'Expected_0 _ xAG': 'Erwartete Assists (xAG)', + 'Expected_0 _ npxG+xAG': 'Erwartete Tore + Assists (npxG+xAG)', + 'Progression _ PrgC': 'Carries', + 'Progression _ PrgP': 'Progressive Pässe', + 'Progression _ PrgR': 'Progressive Läufe', + 'Per 90 Minutes _ Gls': 'Tore pro 90 Minuten', + 'Per 90 Minutes _ Ast': 'Assists pro 90 Minuten', + 'Per 90 Minutes _ G+A': 'Tore + Assists pro 90 Minuten', + 'Per 90 Minutes _ G-PK': 'Tore (ohne Elfmeter) pro 90 Minuten', + 'Per 90 Minutes _ G+A-PK': 'Tore + Assists (ohne Elfmeter) pro 90 Minuten', + 'Per 90 Minutes _ xG': 'Erwartete Tore (xG) pro 90 Minuten', + 'Per 90 Minutes _ xAG': 'Erwartete Assists (xAG) pro 90 Minuten', + 'Per 90 Minutes _ xG+xAG': 'Erwartete Tore + Assists (xG+xAG) pro 90 Minuten', + 'Per 90 Minutes _ npxG': 'Erwartete Tore (npxG) pro 90 Minuten', + 'Per 90 Minutes _ npxG+xAG': 'Erwartete Tore + Assists (npxG+xAG) pro 90 Minuten', + 'Standard _ Gls': 'Tore', + 'Standard _ Sh': 'Schüsse', + 'Standard _ SoT': 'Schüsse aufs Tor', + 'Standard _ SoT%': 'Schussgenauigkeit', + 'Standard _ Sh/90': 'Schüsse pro 90 Minuten', + 'Standard _ SoT/90': 'Schüsse aufs Tor pro 90 Minuten', + 'Standard _ G/Sh': 'Tore pro Schuss', + 'Standard _ G/SoT': 'Tore pro Schuss aufs Tor', + 'Standard _ Dist': 'Distanz', + 'Standard _ FK': 'Freistöße', + 'Standard _ PK': 'Elfmeter', + 'Standard _ PKatt': 'Elfmeter-Versuche', + 'Expected_1 _ xG': 'Erwartete Tore (xG)', + 'Expected_1 _ npxG': 'Erwartete Tore (npxG)', + 'Expected_1 _ npxG/Sh': 'Erwartete Tore (npxG) pro Schuss', + 'Expected_1 _ G-xG': 'Tore - Erwartete Tore (xG)', + 'Expected_1 _ np:G-xG': 'Tore - Erwartete Tore (npxG)', + 'Total _ Cmp': 'Pässe', + 'Total _ Att': 'Pässe versucht', + 'Total _ Cmp%': 'Passquote', + 'Total _ TotDist': 'Pass-Distanz', + 'Total _ PrgDist': 'Progressive Pass-Distanz', + 'Short _ Cmp': 'Kurze Pässe', + 'Short _ Att': 'Kurze Pässe versucht', + 'Short _ Cmp%': 'Kurze Passquote', + 'Medium _ Cmp': 'Mittlere Pässe', + 'Medium _ Att': 'Mittlere Pässe versucht', + 'Medium _ Cmp%': 'Mittlere Passquote', + 'Long _ Cmp': 'Lange Pässe', + 'Long _ Att': 'Lange Pässe versucht', + 'Long _ Cmp%': 'Lange Passquote', + 'Ast': 'Assists', + 'xAG': 'Erwartete Assists (xAG)', + 'Expected _ xA': 'Erwartete Assists (xA)', + 'Expected _ A-xAG': 'Erwartete Assists (xA) - Erwartete Assists (xAG)', + 'KP': 'Key Passes', + '1/3': 'Angriffsdrittel-Pässe', + 'PPA': 'Pässe, die zu einem Schuss führen', + 'CrsPA': 'Flanken, die zu einem Schuss führen', + 'PrgP': 'Progressive Pässe', + 'SCA _ SCA': 'Schussbeteiligungen', + 'SCA _ SCA90': 'Schussbeteiligungen pro 90 Minuten', + 'GCA _ GCA': 'Torbeteiligungen', + 'GCA _ GCA90': 'Torbeteiligungen pro 90 Minuten', + 'Tackles _ Tkl': 'Tackles', + 'Tackles _ TklW': 'Gewonnene Tackles', + 'Blocks _ Blocks': 'Blocks', + 'Blocks _ Sh': 'Blocks gegen Schüsse', + 'Blocks _ Pass': 'Blocks gegen Pässe', 'Int': 'Interceptions', 'Tkl+Int': 'Tackles + Interceptions', - 'Clr': 'Klärungen', - 'Err': 'defensive Fehler', - 'Touches': 'Ballberührungen', - 'Penalty Kicks': 'Elfmeter' + 'Clr': 'Klärungsversuche', + 'Err': 'Fehler', + 'Touches _ Touches': 'Ballberührungen', + 'Performance _ GA': 'Gegentore', + 'Performance _ GA90': 'Gegentore pro 90 Minuten', + 'Performance _ SoTA': 'Schüsse aufs Tor gegen', + 'Performance _ Saves': 'Paraden', + 'Performance _ Save%': 'Paradenquote', + 'Performance _ CS': 'Zu-Null-Spiele', + 'Performance _ CS%': 'Zu-Null-Quote', + 'Penalty Kicks _ PKA': 'Elfmeter-Angebot', + 'Penalty Kicks _ PKsv': 'Elfmeter gehalten', + 'Penalty Kicks _ PKm': 'Elfmeter verursacht', + 'Penalty Kicks _ Save%': 'Elfmeter-Paradenquote', + 'Expected _ PSxG': 'Erwartete Punkte (xG)', + 'Expected _ PSxG/SoT': 'Erwartete Punkte (xG) pro Schuss aufs Tor', + 'Expected _ PSxG+/-': 'Erwartete Punkte (xG) +/-', + 'Expected _ /90': 'Erwartete Punkte (xG) pro 90 Minuten', } diff --git a/src/styles/index.scss b/src/styles/index.scss index 864901110563ac45cb3ea8bbea5aabc520240d0a..c0c8f096912c9a993708d06c24b15d57ea110e97 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -142,6 +142,11 @@ select, input[type="text"] { @media (max-width: 1536px) { #app { flex-direction: column; + .left .bubble-chart-settings { + position: static; + width: fit-content; + margin: 0 0 0 auto; + } } }