MLS Standings & Roster Value Analysis

\n \n \n \n \n \n \n \n \n \n \n \n \n {teams.map((entry) => (\n \n \n \n \n \n \n \n \n ))}\n \n

onSort(\"overallRank\")} className=\"sortable\">\n Pts Rk{renderSortArrow(\"overallRank\")}\n	onSort(\"pointsPerMillion\")} className=\"sortable\">\n Val Rk{\" \"}\n \n ⓘ\n \n {renderSortArrow(\"pointsPerMillion\")}\n	Team	\n Roster Value{\" \"}\n \n ⓘ\n \n	\n Pts / Roster $1M{\" \"}\n \n ⓘ\n \n	Points
{entry.overallRank}	{entry.pp1mRank ?? \"N/A\"}	\n \n {entry.team.team_short_name \|\| entry.team.name}\n	{formatMarketValue(entry.marketValue)}	{formatPointsPerMillion(entry.pointsPerMillion)}	{entry.stats.points}

\n \n );\n}\n\n// --- ECharts Scatter Plot Component (DataZoom updated in previous response) ---\ninterface ValuePointsChartProps {\n teams: EnrichedTeamEntry[];\n}\n\nfunction ValuePointsChart({ teams }: ValuePointsChartProps) {\n const chartRef = useRef(null);\n const chartInstance = useRef(null);\n\n useEffect(() => {\n if (!chartRef.current) return;\n if (!chartInstance.current) {\n chartInstance.current = echarts.init(chartRef.current);\n }\n\n const chartData = teams\n .filter(\n (team) =>\n typeof team.marketValue === \"number\"\n && team.marketValue > 0\n && typeof team.stats.points === \"number\"\n && team.team.logo,\n )\n .map((team) => ({\n name: team.team.team_short_name || team.team.name,\n value: [team.marketValue, team.stats.points],\n symbol: `image://${team.team.logo}`,\n symbolSize: 25,\n marketValueFormatted: formatMarketValue(team.marketValue),\n }));\n\n const option: echarts.EChartsOption = {\n title: {\n text: \"Team Points vs. Roster Value (Transfermarkt)\",\n left: \"center\",\n },\n tooltip: {\n trigger: \"item\",\n formatter: (params: any) => {\n const data = params.data;\n return `${data.name}
Roster Value: ${data.marketValueFormatted}
Points: ${data.value[1]}`;\n },\n },\n grid: {\n left: \"5%\",\n right: \"7%\",\n bottom: \"10%\",\n containLabel: true,\n },\n xAxis: {\n type: \"value\",\n name: \"Roster Value (Transfermarkt)\",\n nameLocation: \"middle\",\n nameGap: 35,\n scale: true,\n axisLabel: {\n formatter: (value: number) => `$${(value / 1000000).toFixed(0)}M`,\n },\n splitLine: { show: false },\n },\n yAxis: {\n type: \"value\",\n name: \"Points\",\n nameLocation: \"middle\",\n nameGap: 35,\n scale: true,\n splitLine: { show: false },\n },\n series: [\n {\n name: \"Teams\",\n type: \"scatter\",\n data: chartData,\n emphasis: {\n focus: \"series\",\n scale: 1.2,\n },\n },\n ],\n dataZoom: [\n { type: \"inside\", xAxisIndex: 0, filterMode: \"none\" },\n { type: \"inside\", yAxisIndex: 0, filterMode: \"none\" },\n ],\n };\n\n chartInstance.current.setOption(option);\n\n const resizeChart = () => chartInstance.current?.resize();\n window.addEventListener(\"resize\", resizeChart);\n\n return () => {\n window.removeEventListener(\"resize\", resizeChart);\n chartInstance.current?.dispose();\n chartInstance.current = null;\n };\n }, [teams]);\n\n return (\n \n \n );\n}\n\n// --- App Component (unchanged) ---\nfunction App() {\n const [standings, setStandings] = useState([]);\n const [lastUpdated, setLastUpdated] = useState(\"\");\n const [clubValues, setClubValues] = useState<\n Record\n >({});\n const [isLoading, setIsLoading] = useState(true);\n const [errorMessage, setErrorMessage] = useState(null);\n\n const [sortCriteria, setSortCriteria] = useState(\n \"pointsPerMillion\",\n );\n const [sortDirection, setSortDirection] = useState(\"desc\");\n\n const handleSort = (criteria: SortCriteria) => {\n setSortCriteria((prevCriteria) => {\n setSortDirection((prevDirection) => {\n if (prevCriteria === criteria) {\n return prevDirection === \"asc\" ? \"desc\" : \"asc\";\n } else {\n return criteria === \"overallRank\" ? \"asc\" : \"desc\";\n }\n });\n return criteria;\n });\n };\n\n useEffect(() => {\n setIsLoading(true);\n setErrorMessage(null);\n fetch(\"/api/standings\")\n .then((response) => response.json())\n .then((data: Standings) => {\n if (\n data.standings\n && Array.isArray(data.standings)\n && data.standings.length > 0\n ) {\n const mergedStandings = mergeTeamIds(data.standings);\n setStandings(mergedStandings);\n setLastUpdated(new Date(data.timestamp).toLocaleString());\n } else {\n console.error(\n \"Fetched standings data is not in the expected format:\",\n data,\n );\n setStandings([]);\n setLastUpdated(\"Error fetching base standings\");\n setErrorMessage(\n \"Failed to load standings data. Invalid format received.\",\n );\n setIsLoading(false);\n }\n if (data.error) {\n console.warn(\n \"Server reported an error fetching standings:\",\n data.error,\n );\n setErrorMessage(data.error);\n }\n })\n .catch((error) => {\n console.error(\"Error fetching base standings:\", error);\n setLastUpdated(\"Error fetching base standings\");\n setErrorMessage(\n `Failed to load standings data: ${(error as Error).message}`,\n );\n setIsLoading(false);\n });\n }, []);\n\n useEffect(() => {\n if (standings.length === 0) return;\n\n setIsLoading(true);\n\n const fetchAllProfiles = async () => {\n const allEntries = standings.flatMap((conf) => conf.entries);\n const uniqueTmIds = [\n ...new Set(\n allEntries.map((entry) => entry.team.transfermarkt_id).filter(Boolean),\n ),\n ] as string[];\n\n const initialValues: Record = {};\n uniqueTmIds.forEach((tmId) => {\n initialValues[tmId] = undefined;\n });\n setClubValues((prev) => ({ ...prev, ...initialValues }));\n\n const profilePromises = uniqueTmIds.map((tmId) => fetchClubProfileFromApi(tmId));\n const results = await Promise.allSettled(profilePromises);\n\n const newClubValues: Record = {};\n results.forEach((result, index) => {\n const tmId = uniqueTmIds[index];\n if (tmId) {\n if (result.status === \"fulfilled\" && result.value) {\n newClubValues[tmId] = result.value.currentMarketValue ?? null;\n } else {\n if (result.status === \"rejected\") {\n console.error(\n `Failed to fetch profile for ID ${tmId}:`,\n result.reason,\n );\n }\n newClubValues[tmId] = null;\n }\n }\n });\n setClubValues((prev) => ({ ...prev, ...newClubValues }));\n setIsLoading(false);\n };\n\n fetchAllProfiles();\n }, [standings]);\n\n const enrichedAndSortedTeams = useMemo((): EnrichedTeamEntry[] => {\n if (standings.length === 0 || Object.keys(clubValues).length === 0)\n return [];\n\n const allTeamsFlat = standings.flatMap((conf) => conf.entries);\n\n const teamsWithOverallRank = [...allTeamsFlat]\n .sort((a, b) => b.stats.points - a.stats.points)\n .map((entry, index, arr) => {\n const rank = index > 0 && entry.stats.points === arr[index - 1].stats.points\n ? (arr[index - 1] as any).overallRank\n : index + 1;\n return {\n ...entry,\n overallRank: rank,\n teamId: entry.team.asa_id || entry.team.abbreviation,\n };\n }) as Array;\n\n const teamsWithMetrics = teamsWithOverallRank.map((entry) => {\n const tmId = entry.team.transfermarkt_id;\n const marketValue = tmId ? clubValues[tmId] : undefined;\n let pointsPerMillion: number | null = null;\n if (typeof marketValue === \"number\" && marketValue > 0) {\n pointsPerMillion = (entry.stats.points * 1_000_000) / marketValue;\n }\n return {\n ...entry,\n marketValue: marketValue,\n pointsPerMillion: pointsPerMillion,\n pp1mRank: null as number | null,\n };\n });\n\n const teamsSortedByValue = [...teamsWithMetrics]\n .filter(\n (team) =>\n typeof team.pointsPerMillion === \"number\"\n && Number.isFinite(team.pointsPerMillion),\n )\n .sort(\n (a, b) => (b.pointsPerMillion as number) - (a.pointsPerMillion as number),\n );\n\n const valueRankMap = new Map();\n teamsSortedByValue.forEach((team, index, arr) => {\n const rank = index > 0 && team.pointsPerMillion === arr[index - 1].pointsPerMillion\n ? valueRankMap.get(arr[index - 1].teamId) ?? index + 1\n : index + 1;\n valueRankMap.set(team.teamId, rank);\n });\n\n const teamsFullyEnriched: EnrichedTeamEntry[] = teamsWithMetrics.map(\n (team) => ({\n ...team,\n pp1mRank: valueRankMap.get(team.teamId) ?? null,\n }),\n );\n\n const sortedTeams = [...teamsFullyEnriched].sort((a, b) => {\n let compareResult = 0;\n if (sortCriteria === \"overallRank\") {\n compareResult = a.overallRank - b.overallRank;\n if (compareResult === 0)\n compareResult = b.stats.points - a.stats.points;\n } else if (sortCriteria === \"pointsPerMillion\") {\n const rankA = a.pp1mRank ?? Infinity;\n const rankB = b.pp1mRank ?? Infinity;\n compareResult = rankA - rankB;\n if (\n compareResult === 0\n && a.pointsPerMillion !== null\n && b.pointsPerMillion !== null\n ) {\n compareResult = b.pointsPerMillion - a.pointsPerMillion;\n }\n }\n return sortDirection === \"asc\" ? compareResult : -compareResult;\n });\n\n return sortedTeams;\n }, [standings, clubValues, sortCriteria, sortDirection]);\n\n if (isLoading && enrichedAndSortedTeams.length === 0) {\n return

Loading MLS Standings and Team Roster Values...

;\n }\n\n if (errorMessage && standings.length === 0) {\n return (\n

MLS Standings

Error loading standings: {errorMessage}

\n );\n }\n\n return (\n

MLS Standings & Value Analysis

Standings Last updated: {lastUpdated}

\n Roster values from Transfermarkt, updated periodically.\n

\n {errorMessage && !isLoading &&

Warning: {errorMessage}

}\n\n {enrichedAndSortedTeams.length > 0\n ? (\n <>\n \n \n \n )\n : (\n

\n {isLoading ? \"Calculating team metrics...\" : \"No standings data available.\"}\n

\n )}\n\n

\n \n View source:{\" \"}\n \n Val Town\n \n \n

\n );\n}\n\n// --- Client-side Mount (unchanged) ---\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\n// --- Server-side API Logic (unchanged) ---\nconst CLUB_PROFILE_CACHE_DURATION = 7 * 24 * 60 * 60 * 1000;\ninterface CachedClubProfile {\n timestamp: number;\n profile: ClubProfile | null;\n}\n\nasync function fetchAndCacheClubProfile_SERVER(\n transfermarktId: string,\n): Promise {\n const KEY = `transfermarkt_profile_${transfermarktId}`;\n let cachedData: CachedClubProfile | null = null;\n try {\n cachedData = (await blob.getJSON(KEY)) as CachedClubProfile;\n } catch (e) {\n if ((e as any).status !== 404) {\n console.error(`Error getting blob ${KEY}:`, e);\n }\n }\n const now = Date.now();\n const profileStaleTime = cachedData?.timestamp\n ? now - cachedData.timestamp\n : Infinity;\n if (cachedData?.profile && profileStaleTime < CLUB_PROFILE_CACHE_DURATION) {\n console.log(`Using cached profile for ${transfermarktId}`);\n return cachedData.profile;\n }\n if (cachedData?.profile === null && profileStaleTime < 1 * 60 * 60 * 1000) {\n console.log(`Using cached null profile for ${transfermarktId}`);\n return null;\n }\n console.log(`Workspaceing fresh profile for ${transfermarktId}`);\n const url = `https://transfermarkt-api.fly.dev/clubs/${transfermarktId}/profile`;\n const options = { method: \"GET\", headers: { accept: \"application/json\" } };\n try {\n const response = await fetch(url, options);\n let result: ClubProfile | null = null;\n let errorMsg: string | null = null;\n if (response.ok) {\n const rawResult = await response.json();\n if (rawResult && typeof rawResult.id === \"string\") {\n result = rawResult as ClubProfile;\n } else {\n errorMsg = `Invalid profile structure received for ${transfermarktId}`;\n }\n } else {\n errorMsg = `Club profile fetch failed for ${transfermarktId}: ${response.status} ${await response.text().catch(\n () => \"\"\n )}`;\n }\n if (errorMsg) {\n console.error(errorMsg);\n await blob.setJSON(KEY, { timestamp: now, profile: null });\n return null;\n }\n if (result) {\n if (result.currentMarketValue === undefined) {\n result.currentMarketValue = null;\n }\n await blob.setJSON(KEY, { timestamp: now, profile: result });\n return result;\n } else {\n await blob.setJSON(KEY, { timestamp: now, profile: null });\n return null;\n }\n } catch (error) {\n console.error(\n `Error during fetch/process profile for ${transfermarktId}:`,\n error,\n );\n await blob.setJSON(KEY, { timestamp: now, profile: null });\n return null;\n }\n}\n\nasync function fetchMLSStandings(): Promise {\n const KEY = \"MLSpointsPerMillion_mls_standings_v2\";\n let storedData: Standings | null = null;\n try {\n storedData = (await blob.getJSON(KEY)) as Standings;\n } catch (e) {\n if ((e as any).status !== 404) {\n console.error(`Error getting blob ${KEY}:`, e);\n }\n storedData = null;\n }\n const now = Date.now();\n const STANDINGS_CACHE_DURATION = 6 * 60 * 60 * 1000;\n if (\n !storedData\n || !storedData.timestamp\n || now - storedData.timestamp > STANDINGS_CACHE_DURATION\n ) {\n console.log(\"Fetching fresh MLS standings data...\");\n const url = \"https://major-league-soccer-standings.p.rapidapi.com/\";\n const apiKey = Deno.env.get(\"RAPIDAPI_KEY\")\n || \"641208f837msh480338fc38359a0p137904jsn60269935b0c9\";\n if (\n !Deno.env.get(\"RAPIDAPI_KEY\")\n && apiKey.startsWith(\"641208\")\n ) {\n console.warn(\"Using fallback RapidAPI key for standings.\");\n }\n const options = {\n method: \"GET\",\n headers: {\n \"X-RapidAPI-Key\": apiKey,\n \"X-RapidAPI-Host\": \"major-league-soccer-standings.p.rapidapi.com\",\n },\n };\n try {\n const response = await fetch(url, options);\n if (!response.ok) {\n throw new Error(\n `Standings API request failed: ${response.status} ${await response.text().catch(() => \"\")}`,\n );\n }\n const result = await response.json();\n if (\n !Array.isArray(result)\n || result.length === 0\n || !result[0].entries\n ) {\n throw new Error(\"Standings API response is not in the expected format.\");\n }\n storedData = { timestamp: now, standings: result };\n await blob.setJSON(KEY, storedData);\n console.log(\"Successfully fetched and cached new standings data.\");\n return storedData;\n } catch (error) {\n console.error(\"Error fetching or processing MLS standings:\", error);\n if (storedData) {\n console.warn(\"Returning stale standings data due to fetch error.\");\n return {\n ...storedData,\n error: `Failed to fetch fresh standings: ${(error as Error).message}. Displaying cached data.`,\n };\n } else {\n return {\n timestamp: now,\n standings: [],\n error: `Failed to fetch MLS standings: ${(error as Error).message}`,\n };\n }\n }\n } else {\n console.log(\"Using cached MLS standings data.\");\n return storedData;\n }\n}\n\n// --- Server Function (HTML Serving - Updated to remove bad comments) ---\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n const headers_json = {\n \"Content-Type\": \"application/json\",\n \"Cache-Control\": \"no-cache\",\n };\n\n // API endpoint for standings data\n if (url.pathname === \"/api/standings\") {\n const standingsData = await fetchMLSStandings();\n return new Response(JSON.stringify(standingsData), {\n headers: headers_json,\n status: 200,\n });\n }\n\n // API endpoint for club profile data\n const profileMatch = url.pathname.match(/^\\/api\\/clubProfile\\/(\\d+)$/);\n if (profileMatch) {\n const transfermarktId = profileMatch[1];\n if (!transfermarktId)\n return new Response(JSON.stringify({ error: \"Missing club ID\" }), {\n headers: headers_json,\n status: 400,\n });\n try {\n const profileData = await fetchAndCacheClubProfile_SERVER(transfermarktId);\n if (profileData)\n return new Response(JSON.stringify(profileData), {\n headers: headers_json,\n status: 200,\n }); else\n return new Response(\n JSON.stringify({ error: \"Profile not found or fetch failed\" }),\n { headers: headers_json, status: 404 },\n );\n } catch (error) {\n console.error(`Server error fetching profile ${transfermarktId}:`, error);\n return new Response(\n JSON.stringify({\n error: \"Internal server error processing profile request\",\n }),\n { headers: headers_json, status: 500 },\n );\n }\n }\n\n // Serve the HTML page for all other requests\n return new Response(\n `\n \n \n \n \n MLS Standings & Roster Value\n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html; charset=utf-8\",\n \"Cache-Control\": \"public, max-age=60\",\n },\n },\n );\n}\n\n// --- CSS (unchanged, contains standard CSS comments) ---\nconst css = `\n/* --- General Body and Page Layout --- */\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n line-height: 1.6;\n color: #333;\n max-width: 1000px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f9f9f9;\n}\n\n/* --- Table Styling --- */\ntable {\n width: 100%;\n border-collapse: collapse;\n margin-bottom: 20px;\n background-color: #fff;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n table-layout: fixed; /* Use fixed layout for consistent column widths */\n}\n\nth, td {\n padding: 10px 8px;\n text-align: left;\n border-bottom: 1px solid #ddd;\n word-wrap: break-word; /* Allow wrapping in cells */\n overflow: hidden; /* Hide overflow */\n text-overflow: ellipsis; /* Show ellipsis for overflow */\n white-space: nowrap; /* Prevent line breaks unless specified */\n}\n\n/* --- Table Header Styling --- */\nth {\n background-color: #f2f2f2;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 0.8em;\n color: #555;\n white-space: normal; /* Allow headers to wrap if needed */\n}\n\nth.sortable {\n cursor: pointer;\n user-select: none; /* Prevent text selection on click */\n}\n\nth.sortable:hover {\n background-color: #e8e8e8; /* Slight hover effect */\n}\n\n/* --- Info Icon Styling --- */\n.info-icon {\n cursor: help;\n font-size: 0.9em;\n color: #777;\n margin-left: 4px;\n border-bottom: 1px dotted #777;\n}\n\n/* --- Specific Column Widths & Alignment --- */\n/* Adjust widths as needed */\nth:nth-child(1), td:nth-child(1) { width: 8%; text-align: center; } /* Pts Rk */\nth:nth-child(2), td:nth-child(2) { width: 10%; text-align: center; } /* Val Rk */\nth:nth-child(3), td:nth-child(3) { width: 36%; white-space: normal; } /* Team (allow wrap) */\nth:nth-child(4), td:nth-child(4) { width: 15%; text-align: right; padding-right: 10px;} /* Roster Value */\nth:nth-child(5), td:nth-child(5) { width: 18%; text-align: right; padding-right: 10px;} /* Pts / Roster $1M */\nth:nth-child(6), td:nth-child(6) { width: 13%; text-align: center; } /* Points */\n\n\n/* --- Table Data Cell Styling --- */\ntd {\n font-size: 0.9em;\n}\n\ntd:nth-child(3) { /* Ensure Team name column allows wrapping */\n white-space: normal;\n}\n\n/* --- Table Row Hover Effect --- */\ntr:hover {\n background-color: #f5f5f5;\n}\n\n/* --- Team Logo Image Styling --- */\nimg {\n vertical-align: middle;\n margin-right: 8px;\n height: 18px;\n width: auto; /* Maintain aspect ratio */\n}\n\n/* --- Headings Styling --- */\nh1, h2, h3 {\n color: #2c3e50;\n padding-bottom: 5px;\n margin-top: 30px; /* Add space above headings */\n}\nh1 { font-size: 2em; border-bottom: 2px solid #eee;}\nh2 { font-size: 1.5em; border-bottom: 2px solid #eee;}\nh3 { font-size: 1.2em; margin-bottom: 10px; border-bottom: 1px solid #eee;}\n\n/* --- Paragraph and Link Styling --- */\np { margin-bottom: 15px; }\na { color: #3498db; text-decoration: none; }\na:hover { text-decoration: underline; }\nsmall { font-size: 0.8em; color: #777; }\n`;\n\nexport { client };","deleted","label",[99],"permalink","https://www.val.town/x/dcm31/MLSpointsPerMillion/code/main.tsx","extension","actionData","errors"]