\n handleDown(!down, index)}\n value={String(st_Down[index])}\n checked={down}\n size=\"small\"\n disabled={!cf_DownEnabledRV}\n />\n
\n ))}\n Own
\n Opp
\n \n \n \n \n Redzone\n \n \n
\n \n handleQuarter(!item, index)}\n value={String(st_Quarter[index])}\n checked={item}\n size=\"small\"\n disabled={!cf_QuarterEnabledRV}\n />\n
\n ))}\n \n \n handlePlayType(!st_PlayType[index], index)\n }\n value={String(st_PlayType[index])}\n checked={st_PlayType[index]}\n size=\"small\"\n disabled={!cf_PlayTypeEnabledRV}\n data-testid={`normal-play-types-${item}`}\n />\n
\n ))}\n ‹
\n ›
\n \n ›
\n \n ›
\n \n \n \n handleQBPocketLocation(\n !st_QBPocketLocation[index],\n index\n )\n }\n value={String(st_QBPocketLocation[index])}\n checked={st_QBPocketLocation[index]}\n size=\"small\"\n disabled={!cf_QBPocketLocationEnabledRV}\n />\n
\n ))}\n ‹
\n ›
\n \n \n \n {offensivePackages.map((col, index) => (\n \n {col.map((item) => (\n \n handlePackages(item.value, true)}\n checked={getCheckedState(\n offensePackages,\n item.value\n )}\n size=\"small\"\n disabled={!cf_PackagesEnabledRV}\n />\n \n ))}\n
\n ))}\n \n \n Offense
\n\n \n {defensivePackages.map((col, index) => (\n \n {col.map((item) => (\n \n handlePackages(item.value)}\n checked={getCheckedState(\n defensePackages,\n item.value\n )}\n size=\"small\"\n disabled={!cf_PackagesEnabledRV}\n />\n \n ))}\n
\n ))}\n \n \n Defense
\n\n \n handleAllPackages(true)}\n variant=\"secondary\"\n isDisabled={!cf_PackagesEnabledRV}\n >\n Select All\n \n handleAllPackages(false)}\n variant=\"secondary\"\n isDisabled={!cf_PackagesEnabledRV}\n >\n Deselect All\n \n \n
\n Offense
\n\n\n setHover(true)}\n onMouseLeave={() => setHover(false)}\n >\n
\n\n \n TE\n
\n \n handlePositionSliders(sliderValues, setTE)\n }\n onAfterChange={handleAfterChange}\n pearling\n minDistance={0}\n min={0}\n max={5}\n withTracks\n step={1}\n name=\"sliderTE\"\n />\n
\n \n
\n 0
\n 1
\n 2
\n 3
\n 4
\n 5
\n \n OL\n
\n \n handlePositionSliders(sliderValues, setOL)\n }\n onAfterChange={handleAfterChange}\n pearling\n minDistance={0}\n min={5}\n max={10}\n withTracks\n step={1}\n name=\"sliderOL\"\n />\n
\n \n \n \n
\n 5
\n 6
\n 7
\n 8
\n 9
\n 10
\n \n setHover(true)}\n onMouseLeave={() => setHover(false)}\n >\n
\n \n WR\n
\n \n handlePositionSliders(sliderValues, setWR)\n }\n onAfterChange={handleAfterChange}\n pearling\n minDistance={0}\n min={0}\n max={5}\n withTracks\n step={1}\n name=\"sliderWR\"\n />\n
\n \n
\n 0
\n 1
\n 2
\n 3
\n 4
\n 5
\n \n RB\n
\n \n handlePositionSliders(sliderValues, setRB)\n }\n onAfterChange={handleAfterChange}\n pearling\n minDistance={0}\n min={0}\n max={5}\n withTracks\n step={1}\n name=\"sliderRB\"\n />\n
\n \n\n \n
\n 0
\n 1
\n 2
\n 3
\n 4
\n 5
\n \n QB\n
\n \n handlePositionSliders(sliderValues, setQB)\n }\n onAfterChange={handleAfterChange}\n pearling\n minDistance={0}\n min={0}\n max={2}\n withTracks\n step={1}\n name=\"sliderQB\"\n />\n
\n \n \n \n
\n 0
\n 1
\n 2
\n Defense
\n\n setHover(true)}\n onMouseLeave={() => setHover(false)}\n >\n
\n \n DL\n
\n \n handlePositionSliders(sliderValues, setDL)\n }\n onAfterChange={handleAfterChange}\n pearling\n minDistance={0}\n min={0}\n max={6}\n withTracks\n step={1}\n name=\"sliderDL\"\n />\n
\n \n
\n 0
\n 1
\n 2
\n 3
\n 4
\n 5
\n 6
\n \n LB\n
\n \n handlePositionSliders(sliderValues, setLB)\n }\n onAfterChange={handleAfterChange}\n pearling\n minDistance={0}\n min={0}\n max={6}\n withTracks\n step={1}\n name=\"sliderLB\"\n />\n
\n \n \n
\n 0
\n 1
\n 2
\n 3
\n 4
\n 5
\n 6
\n \n DB\n
\n \n handlePositionSliders(sliderValues, setDB)\n }\n onAfterChange={handleAfterChange}\n pearling\n minDistance={0}\n min={0}\n max={8}\n withTracks\n step={1}\n name=\"sliderDB\"\n />\n
\n \n \n \n \n
\n 0
\n 1
\n 2
\n 3
\n 4
\n 5
\n 6
\n 7
\n 8
\n \n \n \n \n \n handleAll(true)}\n variant=\"secondary\"\n isDisabled={!cf_FormationsEnabledRV}\n >\n Select All\n \n handleAll(false)}\n variant=\"secondary\"\n isDisabled={!cf_FormationsEnabledRV}\n >\n Deselect All\n \n \n \n
\n Offense
\n\n {offenseCol1.map((item, index) => (\n
\n \n \n handleFormationsOffense(\n !st_FormationsOffense[index],\n index\n )\n }\n checked={st_FormationsOffense[index]}\n size=\"small\"\n disabled={!cf_FormationsEnabledRV}\n data-testid={`offense-formations-${index}`}\n />\n
\n ))}\n \n {offenseCol2.map((item, index) => (\n
\n \n \n handleFormationsOffense(\n !st_FormationsOffense[index + 4],\n index + 4\n )\n }\n checked={st_FormationsOffense[index + 4]}\n size=\"small\"\n disabled={!cf_FormationsEnabledRV}\n data-testid={`offense-formations-${index + 4}`}\n />\n
\n ))}\n \n {offenseCol3.map((item, index) => (\n
\n \n \n handleFormationsOffense(\n !st_FormationsOffense[index + 8],\n index + 8\n )\n }\n checked={st_FormationsOffense[index + 8]}\n size=\"small\"\n disabled={!cf_FormationsEnabledRV}\n data-testid={`offense-formations-${index + 8}`}\n />\n
\n ))}\n \n {offenseCol4.map((item, index) => (\n
\n \n \n handleFormationsOffense(\n !st_FormationsOffense[index + 12],\n index + 12\n )\n }\n checked={st_FormationsOffense[index + 12]}\n size=\"small\"\n disabled={!cf_FormationsEnabledRV}\n data-testid={`offense-formations-${index + 12}`}\n />\n
\n ))}\n \n {offenseCol5.map((item, index) => (\n
\n \n \n handleFormationsOffense(\n !st_FormationsOffense[index + 15],\n index + 15\n )\n }\n checked={st_FormationsOffense[index + 15]}\n size=\"small\"\n disabled={!cf_FormationsEnabledRV}\n data-testid={`offense-formations-${index + 15}`}\n />\n
\n ))}\n \n {offenseCol6.map((item, index) => (\n
\n \n \n handleFormationsOffense(\n !st_FormationsOffense[index + 17],\n index + 17\n )\n }\n checked={st_FormationsOffense[index + 17]}\n size=\"small\"\n disabled={!cf_FormationsEnabledRV}\n data-testid={`offense-formations-${index + 17}`}\n />\n
\n ))}\n \n \n \n handleEnabledToggle(\n !cf_gamesEnabled,\n cf_GameIdsEnabled,\n 'gameIds',\n {\n enabled: !cf_gamesEnabled,\n }\n )\n }\n checked={cf_gamesEnabled}\n size=\"small\"\n />\n \n
\n \n {gamesData &&\n gamesEntries.map(([phase, games], index) => (\n \n \n {games.map((game) => {\n const { homeTeam, awayTeam } = game;\n const formattedDate = new Date(\n game.date\n ).toLocaleString('en-us', {\n timeZone: 'UTC',\n day: 'numeric',\n month: 'short',\n });\n // figure out which team is the selected team and which is the opponent\n const isHomeTeam = homeTeam.id === teamId;\n const selectedTeam = isHomeTeam ? homeTeam : awayTeam;\n const opponentTeam = isHomeTeam ? awayTeam : homeTeam;\n\n // use the data to assemble the checkbox label\n const label = (\n \n {game.roundShortName}\n \n {`${selectedTeam.shortName} ${\n isHomeTeam ? 'vs' : '@'\n } ${opponentTeam.shortName}`}\n \n {formattedDate}\n \n );\n\n return (\n \n handleToggleGame(game.id)}\n checked={gameIds.includes(game.id)}\n size=\"small\"\n disabled={!cf_gamesEnabled}\n />\n \n );\n })}\n \n \n \n handleSelectAll(games)}\n variant=\"secondary\"\n isDisabled={!cf_gamesEnabled}\n >\n Select All\n \n handleDeselectAll(games)}\n variant=\"secondary\"\n isDisabled={!cf_gamesEnabled}\n >\n Deselect All\n \n \n \n {gamesEntries.length !== index + 1 &&
}\n \n ))}\n
\n \n {phase}\n
\n}\n
\n \n {`${result.name} (${result.mostCommonPosition.code}) - ${result.team.shortName}`}\n \n
\n ))}\n \n// sidebar width defaults to 200px\nexport const SidebarRightLayout = styled.div`\n display: flex;\n flex-wrap: wrap;\n gap: ${({ $gap }) => $gap || '1rem'};\n width: 100%;\n padding: ${({ $padding }) => $padding || '0 0.5rem'};\n\n > :last-child {\n flex-basis: ${({ $sidebarWidth }) => $sidebarWidth || '200px'};\n transition: ${`flex-basis 500ms ${slideAnimationStyle}`};\n flex-grow: ${({ $closed }) => $closed || 1};\n }\n\n > :first-child {\n flex-basis: 0;\n flex-grow: 999;\n min-inline-size: ${({ $inlineSize }) => $inlineSize || '60%'};\n }\n`;\nSidebarRightLayout.displayName = 'SidebarRightLayout';\n\n/*\nThis is removing the standard padding from Main in the layout so the grid component page can be used instead\nOnce the grid is implemented universally it can be dropped\n */\nexport const BasicPageNoPadding = styled.div`\n position: absolute;\n top: ${({ $top }) => $top || '98px'}; /* visible height of the top bar */\n left: 0;\n ${({ theme }) => theme.mqFrom('md')} {\n left: ${({ $left }) =>\n $left || `${SIDEBAR_WIDTH}`}; /* visible width of the sidebar */\n }\n margin: 0;\n padding: 0;\n width: 100%;\n ${({ theme }) => theme.mqFrom('md')} {\n width: calc(100% - ${SIDEBAR_WIDTH});\n }\n`;\nBasicPageNoPadding.displayName = 'BasicPageNoPadding';\n\n/*\nDiv holding the Grid used to override default margin-top so layout is correct\n */\nexport const KitbagPageGridHolder = styled.div`\n padding: 0;\n margin: 0;\n width: 100%;\n\n /*the component */\n & > div:first-child {\n margin-top: 0;\n margin-bottom: ${({ theme }) => `${theme.sizing.regular}`};\n }\n`;\nKitbagPageGridHolder.displayName = 'KitbagPageGridHolder';\n","import { gql } from '@apollo/client';\n\nexport const GET_NAVIGATION = gql`\n query GetNavigationData($teamId: Int, $competitionId: Int!, $seasonId: Int!) {\n selectedCompetitionId @client @export(as: \"competitionId\")\n selectedSeasonId @client @export(as: \"seasonId\")\n selectedTeamId @client @export(as: \"teamId\")\n\n navigationData(\n competitionId: $competitionId\n seasonId: $seasonId\n teamId: $teamId\n ) {\n players {\n id\n name\n gamesRostered\n mostCommonNumber\n mostCommonPosition {\n id\n code\n name\n generalPosition\n }\n }\n competitions {\n id\n name\n level\n }\n seasons {\n id\n name\n }\n teams {\n id\n name\n shortName\n colorPrimary\n colorSecondary\n colorTertiary\n gameCount\n }\n }\n }\n`;\n","export const isFalsyParam = (param) =>\n param === 'null' || param === 'undefined' || param === 'NaN';\n","export const sideNavItems = [\n {\n id: 'player',\n name: 'Player',\n icon: 'PlayerFootball',\n position: 'top',\n sections: ['player'],\n links: [\n {\n name: 'Overview',\n href: '/player/overview/:leagues/:seasons/:teams/:players',\n id: 'player/overview',\n },\n {\n name: 'Pass Placement',\n href: '/player/placement/:leagues/:seasons/:teams/:players',\n id: 'player/placement',\n },\n {\n name: 'Passing Chart',\n href: '/player/passing/:leagues/:seasons/:teams/:players',\n id: 'player/passing',\n },\n {\n name: 'Snap Distribution',\n href: '/player/snap/:leagues/:seasons/:teams/:players',\n id: 'player/snap',\n },\n {\n name: 'Radar',\n href: '/player/radar/:leagues/:seasons/:teams/:players',\n id: 'player/radar',\n },\n {\n name: 'Routes Run',\n href: '/player/route/:leagues/:seasons/:teams/:players',\n id: 'player/route',\n },\n {\n name: 'Comparison',\n href: '/player/comparison/:leagues/:seasons/:teams/:players',\n id: 'player/comparison',\n },\n ],\n },\n {\n id: 'team',\n name: 'Team',\n icon: 'TeamFootball',\n position: 'top',\n sections: ['team'],\n links: [\n {\n name: 'Overview',\n href: '/team/overview/:leagues/:seasons/:teams',\n id: 'team/overview',\n },\n {\n name: 'Box Score',\n href: '/team/box/:leagues/:seasons/:teams',\n id: 'team/box',\n },\n {\n name: 'Passing Chart',\n href: '/team/passing/:leagues/:seasons/:teams',\n id: 'team/passing',\n },\n {\n name: 'Line Pressures',\n href: '/team/linePressure/:leagues/:seasons/:teams',\n id: 'team/linePressure',\n },\n {\n name: 'Run Tendencies',\n href: '/team/runTendencies/:leagues/:seasons/:teams',\n id: 'team/runTendencies',\n },\n {\n name: 'Tackling Map',\n href: '/team/tackles/:leagues/:seasons/:teams',\n id: 'team/tackles',\n },\n {\n name: 'Havoc Events',\n href: '/team/havocSummary/:leagues/:seasons/:teams',\n id: 'team/havocSummary',\n },\n {\n name: 'Depth Chart',\n href: '/team/depth/:leagues/:seasons/:teams',\n id: 'team/depth',\n },\n {\n name: 'Formation Summary',\n href: '/team/summary/:leagues/:seasons/:teams',\n id: 'team/summary',\n },\n {\n name: 'Defensive Scheme',\n href: '/team/defensiveScheme/:leagues/:seasons/:teams',\n id: 'team/defensiveScheme',\n },\n {\n name: 'Formation Detail',\n href: '/team/detail/:leagues/:seasons/:teams',\n id: 'team/detail',\n userGroup: 'statsbomb',\n wip: true,\n },\n {\n name: 'Player +/-',\n href: '/team/impact/:leagues/:seasons/:teams',\n id: 'team/impact',\n userGroup: 'statsbomb',\n wip: true,\n },\n {\n name: 'Radar',\n href: '/team/radar/:leagues/:seasons/:teams',\n id: 'team/radar',\n },\n {\n name: 'Schedule',\n href: '/team/schedule/:leagues/:seasons/:teams',\n id: 'team/schedule',\n },\n ],\n },\n {\n id: 'playfinder',\n name: 'Play Finder',\n icon: 'IqTactics',\n position: 'top',\n sections: ['playfinder'],\n links: [\n {\n name: 'Play Finder',\n href: '/playfinder/wizard',\n id: 'playfinder/wizard',\n },\n ],\n },\n {\n id: 'league',\n name: 'League',\n icon: 'League',\n position: 'top',\n sections: ['league'],\n links: [\n {\n name: 'Player Stats',\n href: '/league/stats/players/:leagues/:seasons',\n id: 'league/stats/players',\n },\n {\n name: 'Team Stats',\n href: '/league/stats/teams/:leagues/:seasons',\n id: 'league/stats/teams',\n },\n ],\n },\n {\n id: 'game',\n name: 'Game',\n icon: 'MatchFootball',\n position: 'top',\n sections: ['game'],\n links: [\n {\n name: 'Play Animation',\n href: '/game/animation/:leagues/:seasons/:teams/:games/:drives/:plays',\n id: 'game/animation',\n },\n {\n name: 'Snap Formations',\n href: '/game/formations/:leagues/:seasons/:teams/:games/:drives',\n id: 'game/formations',\n },\n {\n name: 'Play Event Tiles',\n href: '/game/event/:leagues/:seasons/:teams/:games/:drives/:plays',\n id: 'game/event',\n },\n {\n name: 'Play By Play Feed',\n href: '/game/byplay/:leagues/:seasons/:teams/:games',\n id: 'game/byplay',\n },\n ],\n },\n {\n id: 'scout',\n name: 'Scout',\n icon: 'IqScout',\n position: 'top',\n sections: ['scout'],\n links: [\n {\n name: 'Player Scout',\n href: '/scout/wizard/:leagues/:seasons',\n id: 'scout/players',\n },\n ],\n },\n];\n\nexport const sideNavFooterItems = [\n {\n id: 'playlists',\n name: 'My Playlists',\n icon: 'Playlist',\n component: 'a',\n componentProps: { href: '/playlists' },\n },\n {\n id: 'admin',\n name: 'Admin',\n icon: 'Profile',\n position: 'bottom',\n sections: ['admin'],\n links: [\n {\n name: 'Admin',\n href: '/admin',\n id: 'admin',\n },\n {\n name: 'API / Data dictionary',\n href: '/data-access',\n id: 'data-access',\n },\n {\n name: 'Logout',\n href: '/',\n },\n ],\n },\n {\n id: 'assist',\n name: 'Assist',\n icon: 'Support',\n position: 'bottom',\n sections: ['assist'],\n links: [\n {\n name: 'Assist',\n href: 'https://statsbombhelp-amf.zendesk.com/hc/en-gb/',\n id: 'assist',\n },\n {\n name: 'Release Notes',\n href: 'https://statsbombhelp-amf.zendesk.com/hc/en-gb/categories/13962054083474-Release-Notes',\n id: 'release-notes',\n },\n {\n name: 'Feedback',\n // eslint-disable-next-line no-script-url, max-len\n href: 'javascript: zE(\"webWidget\", \"open\"); zE(\"webWidget\", \"updateSettings\", { webWidget: { contactForm: { suppress: false }}}); zE(\"webWidget:on\", \"close\", function() { zE(\"webWidget\", \"updateSettings\", { webWidget: { contactForm: { suppress: true }}}) });',\n id: 'feedback',\n },\n ],\n },\n];\nexport const isSectionSelected = (sectionPath, section) => {\n if (section?.sections) {\n return section.sections.some((path) => path === sectionPath.split('/')[0]);\n }\n return section.id === sectionPath.split('/')[0];\n};\n\nexport const isPageSelected = (location = '', pageId) =>\n (pageId === 'admin' && !location) || location.includes(pageId);\n","import React from 'react';\nimport ParsedLink from '../ParsedLink/ParsedLink';\n\nconst LogoLink = ({ id, logo, alt }) => (\n \n 
\n \n);\n\nexport default LogoLink;\n","import React from 'react';\nimport { Badge } from '@statsbomb/kitbag-components';\nimport PropTypes from 'prop-types';\nimport { StyledBadge } from './SideNav.styles';\n\nconst BadgeLabel = ({ condition, text }) =>\n condition ? (\n \n {text} \n \n ) : (\n <>\n );\n\nBadgeLabel.propTypes = {\n condition: PropTypes.bool.isRequired,\n text: PropTypes.string.isRequired,\n};\n\nexport default BadgeLabel;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Menu, MenuItem, MenuItemText } from '@statsbomb/kitbag-components';\nimport { useKitbagAuth } from '@statsbomb/kitbag-auth';\nimport ParsedLink from '../ParsedLink/ParsedLink';\nimport BadgeLabel from './BadgeLabel';\nimport { isPageSelected } from './SideNav.config';\n\nconst SubMenu = ({ menuItems, currentLocation, isMobile }) => {\n const { user, logout } = useKitbagAuth();\n const LogOut = () => {\n sessionStorage.removeItem('uiStateLocal');\n logout();\n };\n\n // showMenuItem checks if the user is in the correct userGroup to see the menu item\n const showMenuItem = (menuItem) =>\n (menuItem.userGroup &&\n menuItem.userGroup === user['https://statsbomb.com/accountID']) ||\n !menuItem.userGroup;\n\n return (\n \n );\n};\n\nSubMenu.propTypes = {\n menuItems: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string.isRequired,\n href: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n userGroup: PropTypes.string,\n inBeta: PropTypes.bool,\n })\n ).isRequired,\n currentLocation: PropTypes.string.isRequired,\n isMobile: PropTypes.bool.isRequired,\n};\n\nexport default SubMenu;\n","import {\n SideNavigationMenuList,\n SideNavigationMenuItem,\n} from '@statsbomb/kitbag-components';\nimport React from 'react';\nimport { useKitbagAuth } from '@statsbomb/kitbag-auth';\nimport PropTypes from 'prop-types';\nimport SubMenu from './SubMenu';\nimport { useReactiveState } from '../../utils/hooks/useReactiveState';\nimport {\n mf_Teams,\n mf_Leagues,\n mf_Seasons,\n mf_Games,\n mf_Players,\n pf_Drive,\n pf_TeamPlay,\n} from '../../apollo';\nimport { replaceHrefTokens } from '../../utils/helpers/general';\nimport { authorizedNavConfig, getComponentProps } from './SideNav.helpers';\nimport { isSectionSelected } from './SideNav.config';\nimport isUrl from '../../utils/helpers/isUrl';\n\nconst SideNavMenuList = ({\n menuListItems,\n isMobile,\n currentLocation,\n isOpen,\n selectedSubmenu,\n setSelectedSubmenu,\n}) => {\n const { user } = useKitbagAuth();\n const handleMenuClick = (event, menuItemId, hasLinks, href) => {\n if (isMobile && hasLinks) {\n // Prevent default routing behavior\n event.preventDefault();\n // Handle submenu opening/closing logic\n if (selectedSubmenu === menuItemId) {\n setSelectedSubmenu(null);\n } else {\n setSelectedSubmenu(menuItemId);\n }\n } else if (isUrl(href)) {\n setSelectedSubmenu(null);\n } else {\n setSelectedSubmenu(menuItemId);\n }\n };\n\n const [leagueId] = useReactiveState(mf_Leagues);\n const [seasonId] = useReactiveState(mf_Seasons);\n const [teamId] = useReactiveState(mf_Teams);\n const [playerId] = useReactiveState(mf_Players);\n const [gameId] = useReactiveState(mf_Games);\n const [driveId] = useReactiveState(pf_Drive);\n const [playId] = useReactiveState(pf_TeamPlay);\n\n const urlParams = {\n leagues: leagueId,\n seasons: seasonId,\n teams: teamId,\n players: playerId,\n games: gameId,\n drives: driveId,\n plays: playId,\n };\n\n const menuItems = authorizedNavConfig({ items: menuListItems, user });\n return (\n \n {menuItems?.map((menuItem) => {\n const validHref = menuItem.links\n ? replaceHrefTokens(menuItem.links[0].href, urlParams)\n : replaceHrefTokens(menuItem.componentProps.href, urlParams);\n const { component, componentProps } = getComponentProps(\n validHref,\n handleMenuClick,\n menuItem.id,\n !!menuItem.links\n );\n\n return (\n \n );\n};\nSideNavMenuList.propTypes = {\n menuListItems: PropTypes.arrayOf(PropTypes.object).isRequired,\n isMobile: PropTypes.bool.isRequired,\n currentLocation: PropTypes.string.isRequired,\n isOpen: PropTypes.bool.isRequired,\n selectedSubmenu: PropTypes.string,\n setSelectedSubmenu: PropTypes.func.isRequired,\n};\n\nSideNavMenuList.defaultProps = {\n selectedSubmenu: null,\n};\n\nexport default SideNavMenuList;\n","import { Link } from 'react-router-dom';\nimport isUrl from '../../utils/helpers/isUrl';\n\nexport const authorizedNavConfig = ({ user, items = [] }) =>\n items.filter(\n (section) =>\n !section.userGroup ||\n section.userGroup === user['https://statsbomb.com/accountID']\n );\n\nexport const checkIsExternalLink = (urlString) => {\n const isScript = urlString.substring(0, 10) === 'javascript';\n return isUrl(urlString) || isScript;\n};\n\nexport const getComponentProps = (\n validHref,\n handleMenuClick,\n menuItemId,\n hasLinks\n) => {\n const isExternal = checkIsExternalLink(validHref);\n const hrefTarget = isExternal ? '_blank' : '';\n const component = isExternal ? 'a' : Link;\n\n const componentProps = {\n [isExternal ? 'href' : 'to']: validHref,\n onClick: (event) => handleMenuClick(event, menuItemId, hasLinks, validHref),\n target: hrefTarget,\n rel: 'no-referrer',\n };\n\n return { component, componentProps };\n};\n","import {\n SideNavigation,\n SideNavigationFooter,\n SideNavigationHeader,\n} from '@statsbomb/kitbag-components';\nimport React, { useState, useEffect } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { capitalizeFirstLetter } from '../../utils/helpers/general';\nimport { sideNavFooterItems, sideNavItems } from './SideNav.config';\nimport { StyledSideNavigation } from './SideNav.styles';\nimport LogoLink from '../Logo/Logo';\nimport SideNavMenuList from './SideNavMenuList';\nimport LogoIcon from '../../assets/logos/logoIcon.svg';\nimport LogoText from '../../assets/logos/logoText.svg';\n\nconst SideNav = () => {\n const location = useLocation();\n const [isOpen, setIsOpen] = useState(false);\n const [width, setWidth] = useState(window.innerWidth);\n const [selectedSubmenu, setSelectedSubmenu] = useState(null);\n const [selectedSubmenuFooter, setSelectedSubmenuFooter] = useState(null);\n\n const isMobile = width <= 767;\n const currentLocation = location.pathname.slice(1);\n\n const handleWindowSizeChange = () => {\n setWidth(window.innerWidth);\n };\n const formattedCurrentLocation = currentLocation\n .split('/')[0]\n .split('-')\n .map((word) => capitalizeFirstLetter(word))\n .join(' ');\n\n useEffect(() => {\n window.addEventListener('resize', handleWindowSizeChange);\n return () => {\n window.removeEventListener('resize', handleWindowSizeChange);\n };\n }, []);\n return (\n \n \n \n \n Unable to Load Content \n \n Try refreshing the page. If the problem persists,{' '}\n \n contact support\n \n .\n \n \n \n );\n};\n\nexport default ErrorPage;\n","import { Outlet, useLocation, useNavigate, useParams } from 'react-router-dom';\nimport React, { useEffect, useLayoutEffect, useState } from 'react';\nimport { useQuery, useReactiveVar } from '@apollo/client';\nimport { ErrorBoundary } from 'react-error-boundary';\nimport { getSnowplowTracker } from '@hudl/analytics';\nimport uiStructure from '../../apollo/uiStructure';\nimport ContextFilters from '../ContextFilters/ContextFilters';\nimport Header from '../Header/Header';\nimport {\n ui_isDark,\n mf_Leagues,\n mf_Games,\n mf_Seasons,\n mf_Teams,\n pf_Drive,\n pf_TeamPlay,\n pf_TeamPlayEvent,\n mf_Players,\n mf_LeagueLevel,\n cf_GameIds,\n mf_TeamDetails,\n mf_PlayerDetails,\n mf_GameDetails,\n mf_AllSeasons,\n} from '../../apollo';\nimport { StyledLayout, Main } from './Layout.styles';\nimport { GET_NAVIGATION } from '../Header/getNavigationData';\nimport { ERROR_CODES } from '../../utils/errorCodes/errorCodes';\nimport { replaceTokens } from '../../utils/helpers/general';\nimport { isFalsyParam } from './Layout.helper';\nimport { GET_GAMES } from '../Header/getGames';\nimport { pitchCompetitionLevel } from '../../utils/helpers/field.constants';\nimport SideNav from '../SideNavigation';\nimport ErrorPage from '../ErrorPage/ErrorPage';\n\n/* \nWe don't have fully automated tests for this component, but we can test it manually.\nTest Notes:\n - Change the league, this will invalidate the team and player. \n - Check on any given page that the charts reflect this change. NCAA Division III is troublesome.\n - Change the season, it should maintain the team\n - Check initial load, open a new tab and paste in the URL (with an empty URL) \n -- account defaults i.e. Baltimore should load\n - Check configured a URL, open a new tab and paste in the URL (http://localhost:3000/1446/1034/1001437) - the league/season/team should load\n - Make a change that will lead to a null in any of the given league/season/team\n - Where league is set make sure league level is set correctly.\n -- All non-NFL leagues are \"NCAA\" in terms of hash / pitch markings \n ~ values from the API of \"NCAA_DIVISION_II\" are not supported/useful so ignore that\n -- live: go to a pitch vis (snap distro, animation for example). Change comp -> pitch doesn't change.\n -- here: same thing the pitch should redraw hashes appropriately.\n\n -Play Animation\n select different drives and plays\n copy the URL and paste into a new browser window\n hard refresh the current page\n Test Drives play changes in conjunction with:\n Snap Formations\n Play Events\n -Goto the homepage, hard refresh (to reset all internal vars) and navigate to Play Animation\n*/\nconst Layout = () => {\n const navigate = useNavigate();\n const {\n seasons: seasonsParam,\n leagues: leaguesParam,\n teams: teamsParam,\n players: playersParam,\n games: gamesParam,\n } = useParams();\n const ui_isDarkRV = useReactiveVar(ui_isDark);\n const [pageInfo, setPageInfo] = useState();\n\n const location = useLocation();\n // trim leading slash\n let currentLocation = location.pathname.slice(1);\n // trim trailing slash if present\n currentLocation = currentLocation.endsWith('/')\n ? currentLocation.slice(0, -1)\n : currentLocation;\n\n // navigation query to populate: league / season / team / player data\n const {\n data: seasonLeagueTeamPlayersData,\n loading: isLoading,\n error: hasError,\n } = useQuery(GET_NAVIGATION);\n if (hasError) {\n console.error(ERROR_CODES.GET_NAVIGATION_DATA, hasError);\n }\n // navigation data\n const { seasons, teams, players } =\n seasonLeagueTeamPlayersData?.navigationData || {};\n\n // games\n const {\n data: gamesData,\n loading: isLoadingGamesData,\n error: gamesError,\n } = useQuery(GET_GAMES);\n if (gamesError) {\n console.error(ERROR_CODES.GET_GAMES, gamesError);\n }\n\n let snowplowTracker;\n\n useLayoutEffect(() => {\n uiStructure.pages.forEach((page) => {\n page.path.forEach((url) => {\n if (new RegExp(url, 'g').test(currentLocation)) {\n if (page !== pageInfo) {\n setPageInfo(page);\n }\n }\n });\n });\n try {\n snowplowTracker = getSnowplowTracker('hudlIQ');\n } catch (error) {\n // eslint-disable-next-line no-console\n console.warn('Error getting Snowplow tracker. Error: ', error);\n }\n\n snowplowTracker?.trackPageViewEvent(location.pathname);\n snowplowTracker?.trackPagePings(1, 4);\n }, [location]);\n\n const useFilter = pageInfo?.contextFilters;\n\n // give precedence to url params so they persist on refresh and url sharing\n useEffect(() => {\n if (leaguesParam && !isFalsyParam(leaguesParam)) {\n const leagueId = parseInt(leaguesParam, 10);\n\n mf_Leagues(leagueId);\n mf_LeagueLevel(pitchCompetitionLevel(leagueId));\n }\n if (seasonsParam && !isFalsyParam(seasonsParam)) {\n mf_Seasons(parseInt(seasonsParam, 10));\n }\n if (teamsParam && !isFalsyParam(teamsParam)) {\n mf_Teams(parseInt(teamsParam, 10));\n }\n if (playersParam && !isFalsyParam(playersParam)) {\n mf_Players(parseInt(playersParam, 10));\n }\n if (gamesParam && !isFalsyParam(gamesParam)) {\n mf_Games(parseInt(gamesParam, 10));\n }\n }, [leaguesParam, seasonsParam, teamsParam, playersParam, gamesParam]);\n\n const handleChange = (selectedOption, filter) => {\n const { value } = selectedOption;\n\n if (filter === 'leagues') {\n mf_Leagues(value);\n // assume change in league and team will invalidate team, player, and games\n mf_Teams(null);\n mf_Players(null);\n mf_Games(null);\n mf_GameDetails(null);\n mf_LeagueLevel(pitchCompetitionLevel(value));\n cf_GameIds([]);\n } else if (filter === 'seasons') {\n pf_TeamPlay(null);\n pf_Drive(null);\n mf_Seasons(value);\n mf_Games(null);\n mf_GameDetails(null);\n // nice UX to keep the team selected\n // ...but the first player may change\n mf_Players(null);\n cf_GameIds([]);\n } else if (filter === 'teams') {\n pf_TeamPlay(null);\n pf_Drive(null);\n mf_Teams(value);\n mf_Players(null);\n mf_TeamDetails(teams?.find((t) => t?.id === value));\n mf_Games(null);\n mf_GameDetails(null);\n cf_GameIds([]);\n } else if (filter === 'players') {\n mf_Players(value);\n mf_PlayerDetails(players?.find((p) => p?.id === value));\n } else if (filter === 'games') {\n pf_TeamPlay(null);\n pf_Drive(null);\n pf_TeamPlayEvent(null);\n mf_Games(value);\n mf_GameDetails(\n gamesData?.games?.edges.find((game) => game.node.id === value)?.node\n );\n }\n\n const instantRV = {\n leagues: mf_Leagues(),\n players: mf_Players(),\n seasons: mf_Seasons(),\n teams: mf_Teams(),\n games: mf_Games(),\n drives: pf_Drive(),\n plays: pf_TeamPlay(),\n };\n\n if (pageInfo) {\n navigate(\n `${replaceTokens(window.location.pathname, pageInfo, instantRV)}${\n window.location.search\n }`,\n { replace: false }\n );\n }\n };\n\n if (seasonLeagueTeamPlayersData) {\n if ((isFalsyParam(teamsParam) || teamsParam === '0') && teams.length > 0) {\n // data present but not in list, select the first\n mf_Teams(teams[0]?.id || 0);\n mf_TeamDetails(teams[0] || 0);\n\n const instantRV = {\n leagues: mf_Leagues(),\n players: mf_Players(),\n seasons: mf_Seasons(),\n teams: teams[0]?.id || 0,\n games: mf_Games(),\n drives: pf_Drive(),\n plays: pf_TeamPlay(),\n };\n\n navigate(\n `${replaceTokens(window.location.pathname, pageInfo, instantRV)}${\n window.location.search\n }`,\n { replace: false }\n );\n } else {\n mf_TeamDetails(teams?.find((t) => t?.id === mf_Teams()));\n }\n\n if (players && isFalsyParam(playersParam)) {\n // data present but not in list, select the first\n mf_Players(players[0]?.id || 0);\n mf_PlayerDetails(players[0] || 0);\n\n const instantRV = {\n leagues: mf_Leagues(),\n players: players[0]?.id || 0,\n seasons: mf_Seasons(),\n teams: mf_Teams(),\n games: mf_Games(),\n drives: pf_Drive(),\n plays: pf_TeamPlay(),\n };\n\n navigate(\n `${replaceTokens(window.location.pathname, pageInfo, instantRV)}${\n window.location.search\n }`,\n { replace: false }\n );\n } else {\n mf_PlayerDetails(players?.find((p) => p?.id === mf_Players()));\n }\n\n // add params to URL if empty\n if (currentLocation.length < 1) {\n const instantRV = {\n leagues: mf_Leagues(),\n players: mf_Players(),\n seasons: mf_Seasons(),\n teams: mf_Teams(),\n games: mf_Games(),\n drives: pf_Drive(),\n plays: pf_TeamPlay(),\n };\n\n navigate(\n `${replaceTokens(window.location.pathname, pageInfo, instantRV)}${\n window.location.search\n }`,\n { replace: false }\n );\n }\n\n if (gamesData) {\n if (isFalsyParam(gamesParam) || !gamesParam) {\n const firstGame = gamesData?.games?.edges[0]?.node;\n mf_Games(firstGame?.id);\n mf_GameDetails(\n gamesData?.games?.edges.find((game) => game.node.id === firstGame?.id)\n ?.node\n );\n } else {\n mf_GameDetails(\n gamesData?.games?.edges.find((game) => game.node.id === mf_Games())\n ?.node\n );\n }\n }\n mf_AllSeasons(seasons);\n }\n\n // TODO: remove this useEffect once we removed all style references to .dark class\n useEffect(() => {\n document.body.className = ui_isDarkRV ? 'dark' : '';\n }, []);\n\n return (\n \n \n );\n};\n\nexport default Layout;\n","import { styled } from 'styled-components';\n\nexport const StyledReleaseNotes = styled.div`\n padding-left: 0.5rem;\n position: relative;\n width: 100%;\n color: ${({ theme }) => theme.colours.ink.primary.main};\n\n &::after {\n content: '';\n position: absolute;\n background-color: ${({ theme }) => theme.colours.layering[3].main};\n border-radius: 50%;\n width: 2rem;\n height: 2rem;\n left: 15.1rem;\n top: 8rem;\n }\n\n &::before {\n content: '';\n position: absolute;\n background-color: ${({ theme }) => theme.colours.layering[3].main};\n height: calc(100% - 140px);\n width: 2px;\n left: 16rem;\n top: 10rem;\n z-index: 1;\n }\n\n h1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n font-weight: 600;\n }\n\n h2,\n h3 {\n margin-bottom: 0.8rem;\n ${({ theme }) => theme.typography.headingLarge}\n }\n\n > div {\n padding: 1rem 4rem;\n\n > section {\n display: grid;\n grid-template-columns: 100px auto;\n gap: 3.6rem;\n margin-top: 1rem;\n }\n\n section > h2 {\n grid-row-start: 1;\n grid-row-end: 4;\n }\n\n > section:first-of-type {\n margin-top: 6rem;\n }\n }\n\n > div:last-child {\n margin-bottom: 1rem;\n }\n\n ul {\n list-style: disc outside;\n\n li {\n margin-left: 2.5rem;\n position: relative;\n white-space: pre-wrap;\n font-size: 1.4rem;\n }\n }\n`;\n","import { styled } from 'styled-components';\n\nexport const StyledTile = styled.div`\n width: ${({ $width }) => $width || '100%'};\n max-width: ${({ $maxWidth }) => $maxWidth || '100%'};\n min-height: ${({ $minHeight }) => $minHeight || 'auto'};\n margin: ${({ $margin }) => $margin || '0 0 1.25rem 0'};\n padding: ${({ $padding }) => $padding || '0'};\n color: ${({ theme }) => theme.colours.ink.primary.main};\n background-color: ${({ theme }) => theme.colours.canvas.tertiary.main};\n border: ${({ $border, theme }) =>\n `${$border} solid ${theme.colours.canvas.primary.main}` || '0'};\n opacity: ${({ $opacity }) => $opacity};\n /* transition: opacity 0.3s ease;\n will-change: opacity;\n backface-visibility: hidden; */\n\n &.full {\n min-height: calc(100vh - 80px);\n }\n`;\nStyledTile.displayName = 'StyledTile';\n\nexport const StyledTileHeader = styled.div`\n position: relative;\n padding: ${({ $isSlim }) => ($isSlim ? '0.5rem' : '1rem')};\n padding-bottom: ${({ $noBottomPadding }) => $noBottomPadding && 0};\n min-height: 40px;\n margin-bottom: 0;\n box-shadow: none;\n background-color: ${({ theme }) => theme.colours.canvas.tertiary.main};\n position: relative;\n border-bottom: ${({ $border, theme }) =>\n `${$border} solid ${theme.colours.canvas.secondary.main}` || '0'};\n font-size: 0.875rem;\n\n h1,\n h2,\n h3 {\n ${({ theme }) => theme.typography.headingMedium}\n margin: 0;\n }\n\n h2 {\n font-size: ${({ $isSlim }) => $isSlim && '0.833125rem'};\n }\n\n h3 {\n line-height: 1.6;\n }\n\n .buttons {\n display: flex;\n position: absolute;\n top: ${({ $isSlim }) => ($isSlim ? '0.5rem' : '1rem')};\n right: ${({ $isSlim }) => ($isSlim ? '0.5rem' : '1rem')};\n gap: 0.5rem;\n height: 24px;\n\n .ui.button.clear {\n border: 0;\n\n .icon {\n font-size: 1.25rem;\n }\n }\n\n .ui.dropdown {\n svg {\n fill: ${({ theme }) => theme.colours.canvas.primary.ink} !important;\n }\n }\n\n .svg-fill,\n svg {\n fill: inherit;\n }\n }\n`;\nStyledTileHeader.displayName = 'StyledTileHeader';\n\nexport const StyledTileBody = styled.div`\n position: relative;\n padding: ${({ $padding }) => $padding || '1rem'};\n margin: ${({ $margin }) => $margin || '0'};\n display: flex;\n flex-direction: column;\n background-color: ${({ theme }) => theme.colours.canvas.tertiary.main};\n gap: ${({ $gap }) => $gap || '1rem'};\n min-height: ${({ $minHeight }) => $minHeight || 'auto'};\n max-height: ${({ $maxHeight }) => $maxHeight || 'auto'};\n overflow-y: ${({ $overflowY }) => $overflowY || 'visible'};\n font-size: 0.8125rem;\n\n &.row {\n flex-direction: row;\n\n .ui.labeled.icon.button,\n .ui.labeled.icon.buttons .button {\n padding-left: 3.4em !important;\n padding-right: 1em !important;\n }\n }\n\n table {\n td {\n white-space: break-spaces;\n line-height: normal;\n font-size: 0.75rem;\n }\n }\n\n .text-left {\n text-align: left;\n }\n\n .text-right {\n text-align: right;\n }\n\n ::-webkit-scrollbar-corner {\n background: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background: ${({ theme }) => theme.colours.layering[0].main} !important;\n }\n\n .ui {\n &.small.text.loader {\n padding: 0 0 0 1.75rem;\n line-height: 1.7;\n width: 1rem;\n height: 1rem;\n z-index: 50;\n\n &:before,\n &:after {\n left: 0.625rem;\n top: 0.1875rem;\n }\n }\n }\n`;\nStyledTileBody.displayName = 'StyledTileBody';\n\nexport const StyledTileAccordionHeader = styled.div`\n box-shadow: none;\n margin: 0;\n font-size: 0.90625rem;\n padding: 1rem;\n color: ${({ theme }) => theme.colours.ink.primary.main};\n background-color: ${({ theme }) => theme.colours.canvas.secondary.main};\n\n &:hover {\n background-color: ${({ theme }) => theme.colours.canvas.secondary.strong};\n }\n\n + div {\n box-shadow: none;\n background: ${({ theme }) => theme.colours.canvas.tertiary.main};\n }\n`;\nStyledTileAccordionHeader.displayName = 'StyledTileAccordionHeader';\n\nexport const StyledTileAccordionBody = styled.div`\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n box-shadow: none;\n margin: 0;\n font-size: 0.90625rem;\n padding: ${({ $padding }) => $padding || '1rem'};\n border-bottom: 0;\n background-color: ${({ theme }) => theme.colours.canvas.tertiary.main};\n color: ${({ theme }) => theme.colours.ink.primary.main};\n\n .table {\n tr {\n td {\n font-size: 0.75rem;\n }\n }\n }\n`;\nStyledTileAccordionBody.displayName = 'StyledTileAccordionBody';\n","import React, { forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport {\n StyledTile,\n StyledTileBody,\n StyledTileHeader,\n StyledTileAccordionHeader,\n StyledTileAccordionBody,\n} from './Tile.styles';\n\nconst Tile = forwardRef(\n (\n {\n children,\n full,\n widthLimit,\n dataTestId,\n margin,\n border,\n padding,\n maxHeight,\n minHeight,\n className,\n opacity,\n width,\n },\n ref\n ) => (\n \n {children}\n \n )\n);\n\nTile.propTypes = {\n children: PropTypes.node.isRequired,\n full: PropTypes.bool,\n widthLimit: PropTypes.string,\n dataTestId: PropTypes.string,\n margin: PropTypes.string,\n border: PropTypes.string,\n padding: PropTypes.string,\n maxHeight: PropTypes.string,\n minHeight: PropTypes.string,\n className: PropTypes.string,\n opacity: PropTypes.number,\n width: PropTypes.string,\n};\n\nTile.defaultProps = {\n full: false, // Probably needs renaming\n widthLimit: '',\n dataTestId: '',\n margin: '',\n border: '',\n padding: '',\n maxHeight: '',\n minHeight: '',\n className: '',\n opacity: 1,\n width: '',\n};\n\nTile.Header = StyledTileHeader;\nTile.Body = StyledTileBody;\nTile.AccordionHeader = StyledTileAccordionHeader;\nTile.AccordionBody = StyledTileAccordionBody;\n\nexport default Tile;\n","/* eslint-disable react/no-array-index-key */\nimport React from 'react';\nimport { getFormattedMarkdown } from './ReleaseNotes.helper';\nimport { releaseNotesText } from './ReleaseNotes.text';\nimport { StyledReleaseNotes } from './ReleaseNotes.styles';\nimport Tile from '../../components/Tile/Tile';\n\n/**\n * ReleaseNotes\n * Release notes page - takes a stringified markdown file and styles it.\n */\nconst ReleaseNotes = () => {\n const formattedMarkdownArray = getFormattedMarkdown(releaseNotesText);\n\n const h2Elements = formattedMarkdownArray.filter(\n ({ component }) => component === 'h2'\n );\n\n return (\n \n \n {h2Elements.map((h2Element, h2Index) => {\n const h3Elements = formattedMarkdownArray.filter(\n ({ component, parent }) =>\n component === 'h3' && parent === h2Element.id\n );\n\n return (\n \n \n \n );\n })}\n \n );\n })}\n \n \n );\n};\n\nexport default ReleaseNotes;\n","/*\n * This is to get the line endings that a file / string is using.\n * Since our PR build uses linux, the RELEASE_NOTES.md file uses LF endings\n * whereas windows local build uses CRLF. To be able get the release notes helper code\n * working both locally for a windows user and working on the PR build we need to do\n * two separate ways of handling the markdown, one for handling using CRLF and one using LF.\n */\nexport const getLineEndings = (string) => {\n if (!string) return 'NONE';\n\n const cr = string.split('\\r').length;\n const lf = string.split('\\n').length;\n const crlf = string.split('\\r\\n').length;\n\n if (cr + lf === 0) {\n return 'NONE';\n }\n\n if (crlf === cr && crlf === lf) {\n return 'CRLF';\n }\n\n if (cr > lf) {\n return 'CR';\n }\n\n return 'LF';\n};\n\n// Uses a different way of filtering based on the LineEnding\n// in the file as windows and unix need to be handled differently\nexport const getMarkdownLines = ({ lineEnding, markdown }) => {\n const filterByLineLength = (singleLineOfMarkdownText) =>\n singleLineOfMarkdownText.length > 0;\n\n const markdownFilterMap = {\n LF: markdown.split('\\n').filter(filterByLineLength),\n CRLF: markdown\n .split('\\r')\n .map((line) => line.replace('\\n', ''))\n .filter(filterByLineLength),\n };\n\n // Default to unix rendering\n return markdownFilterMap[lineEnding]\n ? markdownFilterMap[lineEnding]\n : markdownFilterMap.LF;\n};\n\nexport const getFormattedMarkdown = (markdown) => {\n const lineEnding = getLineEndings(markdown);\n const markdownLines = getMarkdownLines({ lineEnding, markdown });\n\n let sectionId = 0;\n let listId = 0;\n\n return markdownLines.map((textString) => {\n const textSubstring = textString.substring(0, 3);\n // handle headings\n if (textSubstring === '## ') {\n // get the date and format it to the user's locale\n const date = textString.substring(3);\n\n // month -1 because months are 0 indexed\n const localDate = new Date(date).toLocaleDateString('en-US');\n\n sectionId += 1;\n return {\n component: 'h2',\n text: localDate,\n id: `h2-${sectionId}`,\n };\n }\n\n // Handle sub headings (added, changed etc.)\n if (textSubstring === '###') {\n listId += 1;\n return {\n component: 'h3',\n text: textString.substring(4),\n parent: `h2-${sectionId}`,\n id: `h3-${listId}`,\n };\n }\n\n // Assume everything else is a list item\n return {\n component: 'li',\n text: textString.trim().replace('- ', ''),\n parent: `h3-${listId}`,\n };\n });\n};\n","/* eslint-disable max-len */\nexport const releaseNotesText = `\n## 2024-01-05\n\n### Changed\n- Season dropdown defaults to 2023/2024 season\n\n## 2024-01-04\n\n### Added\n- Team overview is now set as the homepage\n\n### Fixed\n- Dual slider on Player Scout fixed\n- First time log in bug fixed\n- Team pass chart toggle to passes against fixed\n\n## 2023-12-22\n\n### Added\n- New coverage stats added to the Team Stats page on the Defense > Passing tabs:\n- Man Coverage % (Team Stats > Defense > Passing)\n- New coverage stats added to the Team Stats page on the Defense tab:\n- Team Blitz %\n- Pass Play Blitz %\n- Our defensive front identification added to Team Stats on the Defense > Play tabs:\n- Over %\n- Under %\n- Heads %\n- Split %\n- Pinch %\n- Bear %\n- Tite %\n- Okie %\n- Stack %\n- Other %\n- Team and LB/DB Radars have been updated to include the new Blitz % stat\n\n## 2023-12-14\n\n### Added\n- Player comparison widget to OL player overview\n- Player scout metrics added the ability to edit values directly\n\n### Fixed\n- Player scout play filter shifting columns\n- Player scout tabs overflowing container\n- Player scout all caps removed, and long town cropping adjusted\n- Player scout metrics slider for lower numbers being better fixed\n- Player scout table dimensions adjusted to better fit screen\n- Player comparison alignment filter\n\n## 2023-12-07\n\n### Changed\n- Select all added to position filtering on Player Scout and Stats pages\n\n### Fixed\n- Cowboys team colors on Team Radar\n\n## 2023-12-06\n\n### Added\n- The play comparison tool is now available as its own page as well as on each player overview page. The tool helps you find the five players whose outputs most closely match your target. Filters within the tool can be adjusted to alter results based on your preferred weighting of a player's trait or performance metrics.\n\n## 2023-11-30\n\n### Added\n- Player Scout is now available on the left side navigation, and allows you to select the metrics you care about to filter for players\n\n## 2023-11-15\n\n### Added\n- On the Pass Chart you can now draw a box to select multiple plays and see a column on the stats table for the statistics for those selected plays vs all plays.\n\n## 2023-11-04\n\n### Fixed\n- Bug causing the pass chart filters to work incorrectly has been fixed. The pass outcome filter (Complete, Touchdown etc.) has been moved into the display settings panel\n\n## 2023-10-19\n\n### Fixed\n- Fixed bug causing zero to display a blank on the team schedule\n\n## 2023-10-18\n\n### Fixed\n- Fixed bug causing dropdowns to get cutoff by the container they were in\n\n## 2023-10-10\n\n### Added\n- Routes Run visualization added to WR and TE overview pages\n\n## 2023-09-28\n\n### Added\n- Route tree visualization is now available for each player\n- Team Overview page available for every team\n- Team schedule now available for every team\n- Additions to the player metadata database including fields for: height, weight, class, home town, high school, schools offered\n\n### Changed\n- Usage % added to Fullbacks and Slot Receivers on the Depth Chart alignment mode\n- Updated home and away team display on the Play by Play page and added team colors\n- Plays added as a fixed column to the team stats table on the Player Overview page\n- Snap Distribution supports correct vertical orientation for defensive players\n\n### Fixed\n- Fixed bug causing 0 scores to not display on the team schedule\n- Fixed bug causing video to disappear when chart set to 52% width of screen\n- Fixed Search bar bug causing incorrect link to player overview page\n\n## 2023-08-31\n\n### Added\n- Team radars are now available covering Offense and Defensive units\n\n### Changed\n- Team stats have been updated to include all the metrics created for Player Stats plus additional EPA stats\n- 2 decimal place formatting for EPA\n\n### Fixed\n- Season dropdown for NFL ordering bug fixed\n\n## 2023-08-24\n\n### Added\n- Our new Run Tendencies page allows users to analyze point of attack and strengths and weaknesses of a teams running game\n- Our newly created EPA metric has been added across the site including on Player Stats and Player Radars \n- Our new Formation Summary page allows users to analyze the formations used by a specific team and how successful they were\n- Season added to radar export\n\n## 2023-08-03\n\n### Added\n- Player overview pages have been added for the following positions: RB, TE, OL, DL, LB, DB, K, P, LS\n- The percentage of each type of route run by a receiver is now available on Player Stats under the Receiving > Routes tabs\n- Jersey Number and Play Count have been added as permanent columns to player stats \n\n### Changed\n- Pass 1-on-1% and Run 1-on-1% are now the main metrics for OL and DL trait radars for blocking type\n- QB and WR Player overview's now include dual radars\n\n## 2023-07-19\n\n### Changed\n- The Tackle Map visualization now defaults to Play Locations instead of Heatmap\n\n### Fixed\n- The bug causing users to lose connection to the database and needing to log out, refresh, and log back in has been resolved\n- The bug causing the page to crash when selecting Red Zone from the Field Position context filter has been resolved\n\n## 2023-07-06\n\n### Added\n- The HAVOC chart is now available for users to view a teams ability to generate: pressures, run disruptions, sacks, and tackles for loss\n\n### Changed\n- Updated personnel packages available for offense and defense in the personnel context filter\n\n## 2023-06-21\n\n### Added\n- The Depth Chart feature gives insight to who played for a team, and what personnel groups the team utilized\n- The trait radar highlights how a player was used, and when combined with the performance radar gives a more holistic view of a player\n\n### Changed\n- The API access page is now driven by entitlements\n- Users with accounts that have API access can generate a new key\n- Users with accounts that do not have API access will have the generate key section disabled with a message to contact their StatsBomb representative to learn more\n\n### Fixed\n- The bug from periods and apostrophes in player names preventing export has been resolved\n\n## 2023-06-07\n\n### Changed\n- The following improvements were made to the Tackle Map \n- Heatmap view\n- Area distribution chart of first contact, yards after contact, and total yards distribution chart\n- League average line added to distribution chart\n- Keys were added\n- Advanced export options were added\n- Filtering is now available by position and specific player\n- Filtering available for play type including: Run, Pass, Sack, All Run & Pass\n- Filtering available for tackle type including: tackle attempt, first tackle attempt, successful tackle, solo tackle\n- Clicking a tackle dot brings up information on the play and links to Play Animation\n- Play success coloring\n- New tackle metrics added to the table \n\n## 2023-05-24\n\n### Changed\n- Context filters now auto enable when a user makes selections\n- Updated ordering of player stats\n- Updated ordering of tabs on player stats\n- Context filters now reset on user logout or browser close\n- Player stats can now be filtered by team using the dropdown in the display options\n- Context filter queries have been refactored and updated to use newest filters\n\n### Fixed\n- The issue of the page scrollbar being visible even if there was no scroll option has been resolved\n- Maryland team color on radars has been updated\n- Texas A&M team color on radars has been updated\n\n## 2023-05-10\n\n### Changed\n- Advanced export options now available on the Play Animation page\n- The line of scrimmage and first down markers color design has been altered to be less intrusive on the visualization\n\n### Fixed\n- The scroll bug on the Player Overview page stats table has been resolved\n\n## 2023-05-03\n\n### Changed\n- Advanced export options now available on the Snap Formation and Pass Placement pages \n\n### Fixed\n- Bug causing site crash on the tackle map for San Francisco 49ers resolved\n\n## 2023-04-26\n\n### Added\n- The first version of Statsbomb special teams data covering field goals, extra points, punts, and kickoffs is now available on the Player Stats page under the Special Teams tab\n- Completion Percentage Over Expected (CPOE) and Catch Rate Over Expected (CROE) metrics are now available for QB and WR on the Player Radars and Player Stats pages\n\n### Changed\n- Advanced export options now available for the Snap Distribution chart\n\n## 2023-04-12\n\n### Added\n- Radars are now available for Linebackers and Defensive Backs\n- Tackling map visualization beta has been released and can be found under the Team navigation group\n\n### Changed\n- Player stats has a new table design with updated column sorting\n\n## 2023-03-29\n\n### Changed\n- QB Time To Throw filter now uses 0.1 second increments and the higher bound has been changed to 5\n- Advanced download now available for Pass Chart with options for logo, dark or light palette, and file format\n- The toggle to change the visualizations on player overview is now a dropdown which can have multiple options\n\n## 2023-03-20\n\n### Added\n- The number of games available to view for a team is displayed in the team dropdown\n- Snap formation allows a user to select all drives for each team\n\n### Changed\n- Play by play feed now uses end of drive score\n- Player stats table defaults to 100 rows\n- Player stats table column headers are fixed during scroll\n- Player stats export downloads all rows\n\n### Fixed\n- Play animation changing drive site crash bug\n- League/season dropdown selection not cascading down to other dropdown\n\n## 2023-03-06\n\n### Added\n- QB Drop depth filter under Play > QB Drop Depth\n- QB Time to throw filter under Play > QB Time to Throw\n- QB Pocket Location filter under Play > QB Pocket Location\n- Position icons for the roster position filter on the Player Stats page\n- Individual game filter\n- Team names displayed in the title above tiles on Snap Formation page\n\n### Changed\n- Fixed column headers on the Player Stats page\n- 100 rows by default on the Player Stats page\n- Default Jersey numbers toggle to on for Snap Formations and Play Event Tiles pages\n- Game short name implemented for the game dropdown\n\n### Fixed\n- Games not chronological on player overview bug fixed\n- Philadelphia Eagles team color bug on radar\n\n## 2023-02-17\n\n### Added\n- Player overview stats table shows stats by game and season\n- Player overview stats table toggle between rate and total stats modes\n\n### Fixed\n- Play animation smoothing\n- Depth of target filter bug\n\n## 2023-02-02\n\n### Added\n- New blue color theme implemented\n- Search available on all pages for Players\n- Pressures allowed chart is now available for end users\n- Team colors available on radar page\n- Legends available for radar page\n\n### Fixed\n- Player Stats navigation bug\n- Download on Pressures chart title bug\n\n## 2023-01-30\n\n### Changed\n- Player stats default to rate mode\n\n### Fixed\n- Sorting on a column on the Player Stats page no longer resets the horizontal scroll\n\n## 2023-01-23\n\n### Added\n\n- Link from a players name on the Player Stats page to their Overview page\n- Team name and group by team options on Player Stats page\n\n### Changed\n- Default to vertical orientation on Snap Distribution page\n\n### Fixed\n\n- Rename incompletions toggle label on Pass Placement page\n- Pass placement chart layout bug fix\n- Remove redundant links on left hand navigation\n- Scrolling for left and right columns on Snap Formation page\n\n## 2023-01-06\n\n### Added\n\n- Player Stats page with breakdowns for rate/total modes, breakdowns for down/quarter/team/alignment, filters for the Transfer Portal, minimum snaps, and roster position\n- New Player overview page for QB and WR positions with additional charts\n\n### Fixed\n\n- Some scaling and axis issues with the radars have been addressed\n\n## 2022-12-19\n\n### Added\n- Player Radar radars available for OL and DL\n\n## 2022-12-16\n\n### Added\n\n- Season dropdown defaulted to current season\n\n## 2022-12-08\n\n### Added\n\n- Player Radar page with radars available for QB, RB, and WR\n\n## 2022-11-21\n\n### Added\n\n- Save query string to the URL for the pass chart\n- The event list now has an accordion and the ability to see the list of events on screen next to the play animation\n\n### Fixed\n\n- Bug on the link between a route path on snap distribution and the individual play animation fixed\n\n## 2022-10-28\n\n### Added\n\n- Show all on Snap Formation\n- Play animation event list re-design\n\n### Fixed\n\n- Play animation bugs\n- Updated Play Success definition\n- Dropdown styling on dark theme\n\n## 2022-10-12\n\n### Added\n\n- QB charts updated on the Player Overview page\n- The game dropdown will now be sorted by date with most recent game at the top and oldest game at the bottom\n- Success Rate (%) was added to the Pass Chart table\n- Pass placement toggle added to view from Passer or Target perspective\n\n## 2022-10-04\n\n### Added\n\n- Play animation updates including: real time animation, smoother player routes, timeline below the animation\n- Snap distribution now allows a region of the field to be selected to show the routes a player ran from that location\n- Display settings are now saved to the URL so a shared link will include them\n- New Data Access page gives API keys and a data dictionary to allow direct API access\n- Download now available on the Player Overview page\n\n### Fixed\n\n- A bug causing a crash on play animation was fixed\n\n## 2022-09-14\n\n### Added\n\n- The Play by Play feature lists each drive of the game which can be expanded to show each play that makes up the drive\n- The data points available in the feature are: Drive/Play Number, Clock, Team on Offense, Drive/Play Result, Notes, and Score\n- Each play links to the play animation for the corresponding play using the >> button\n- Release notes are now available and accessed via the main navigation\n\n## 2022-09-06\n\n### Added\n\n- Depth of target slider added to Play filter\n- Team stats added under League > Team Stats\n- Player number added to player dropdown\n\n### Fixed\n\n- URL parsing\n- Optional defense/offense team IDs\n\n## 2022-08-30\n\n### Added\n\n- Formation filter added for basic offensive formations\n- Single number selection available on the Positions tab of the Personnel filter\n\n### Fixed\n\n- Selecting Play Animation from the menu when already there causes a crash fix\n- Deep linking to some formations returns 404 not found\n- Clear button CSS\n- Dark theme new color\n- Show pass when receiver missing\n\n## 2022-08-09\n\n### Added\n\n- Key added to Pass Chart with option to toggle on/off\n- Metric tables added alongside Pass Chart\n- The ability to click on an individual dot on the pass chart and see information on a specific pass, as well as a link to the Play Animation fo rthat pass\n- Toggle for displaying the ball on Event Tiles and Snap Formation\n- New zoom options for on Event Tiles and Snap Formation: Offensive Line, Field Width, Players Midpoint, Ball Location, Line of Scrimmage\n- Position width and depth measurements added when selecting a specific frame from Event Tile\n\n### Fixed\n\n- Bug that caused event tiles to crash site fixed\n\n## 2022-08-08\n\n### Added\n\n- Web app connected to production API\n- Component Library integration\n\n### Fixed\n\n- Minor bug when downloading snap distribution when using focus level filter fixed\n\n## 2022-08-05\n\n### Added\n\n- Personnel packages for offense and defense added as a tab to Personnel filter\n- Specific position ranges selection available as a tab under Personnel filter\n\n## 2022-07-21\n\n### Added\n\n- Play animation oriented vertically by default\n- New Play Animation zoom options: Full field, Play long, Play short, Line battle\n\n## 2022-07-12\n\n### Added\n\n- Pass chart available at a team level under Team > Pass Chart\n- Filter pass chart by QB and intended receiver at team level\n- Toggle added for viewing pass chart from receiver perspective\n- New color options for pass chart: Under/Overthrows, Pass Velocity, Play Success, Color by passer, Color by targeted receiver\n- Dark/Light theme available for all charts\n\n### Fixed\n\n- The team name listed for the player selected is now correctly displaying\n\n## 2022-06-17\n\n### Added\n\n- Deep linking saves page information in the URL allowing sharing of URLs and linking between visualizations\n- Snap distribution available for defensive players\n\n### Fixed\n\n- The page was failing if there was a missing ID, this issue is now resolved with a message saying no data available\n- Selecting a play event while one is selected no longer exits the page\n\n## 2022-06-06\n\n### Added\n\n- Download available for all visualizations in JPG and PNG file formats\n\n## 2022-05-23\n\n### Added\n\n- Play type filter added with selections: Pass, Run, QB Kneel, QB Spike\n- Yards Gained slider added to Play filter\n\n## 2022-05-04\n\n### Added\n\n- Pass placement chart available under Player > Pass Placement\n- Pass chart available under Player > Pass Chart\n- Snap Distribution chart available under Player > Snap Distribution\n- Boxscore available under Team > Boxscore\n- Play Animation available under Game > Play Animation\n- Snap Formation available under Game > Snap Formation\n- Play Event Tiles available under Game > Event Tiles\n- Filters for League, Season, Team, Player added\n- Filters for Down and Distance, Field Position, and Time\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Outlet } from 'react-router-dom';\nimport { BasicPageNoPadding } from '../../components/Layout/Layout.styles';\n\nconst Player = ({ top }) => (\n \n \n);\n\nPlayer.propTypes = {\n top: PropTypes.string,\n};\n\nPlayer.defaultProps = {\n top: '9.8rem',\n};\nexport default Player;\n","// sourced from: https://www.pluralsight.com/guides/using-d3.js-inside-a-react-app\n\nimport React, { useEffect } from 'react';\nimport { select } from 'd3';\n\nexport const useD3 = (renderChartFn, dependencies) => {\n const ref = React.useRef();\n\n useEffect(() => {\n renderChartFn(select(ref.current));\n return () => {};\n }, dependencies);\n return ref;\n};\n","import {\n COMPETITION_LEVEL,\n FIELD_MEASURES,\n getHashYFromCompLevel,\n FIELD_NUMBERS_FONT,\n} from './field.constants';\nimport { isEven } from './general';\n\nconst drawPost = function (\n svgG,\n { pxPerYard, visPalette, goalPostStrokeWidthPx, competitionLevel },\n drawHomePosts\n) {\n const goalPostWidth =\n competitionLevel === COMPETITION_LEVEL.HIGH_SCHOOL\n ? FIELD_MEASURES.GOAL_POST_WIDTH_HS\n : FIELD_MEASURES.GOAL_POST_WIDTH;\n\n const goalPostY = (FIELD_MEASURES.Y_YARDS - goalPostWidth) / 2; // 60ft = 20yds in NFL\n\n const goalPostDepth = drawHomePosts ? -0.5 * pxPerYard : 0.5 * pxPerYard;\n const goalPostM = drawHomePosts\n ? 2 * goalPostDepth\n : FIELD_MEASURES.X_YARDS * pxPerYard + 2 * goalPostDepth;\n\n svgG\n .append('svg:path')\n .attr(\n 'd',\n `M${goalPostM},${goalPostY * pxPerYard}` +\n ` l${-1 * goalPostDepth},0` +\n ` l0,${goalPostWidth * pxPerYard}` +\n ` l${goalPostDepth},0` +\n ` M${goalPostM - goalPostDepth},${\n (goalPostY + goalPostWidth / 2) * pxPerYard\n }` +\n ` l${-1 * goalPostDepth},0`\n )\n .attr('stroke', visPalette.border)\n .attr('fill', 'none')\n .attr('stroke-width', goalPostStrokeWidthPx);\n};\n\n/* Draw Goal Post Symbols just outside the field boundaries\nnote: High School Goal Posts are a different size\n*/\nconst addPosts = function (svgG, fieldSettings) {\n svgG.call(drawPost, fieldSettings, true).call(drawPost, fieldSettings, false);\n};\n\n/* Draw Oscillating 10yds zones\nZones have a hard border every 10yds and soft one every 5 yards\nDefault height is field, but can be overridden for relative-y fields\nDefault zones is 12 (including end zones), but can be overriden\n*/\nconst addOddEvenZones = function (\n svgG,\n { pxPerYard, visPalette },\n fieldHeightYds = FIELD_MEASURES.Y_YARDS,\n tenZonesToDraw = 12,\n isFlipped = false\n) {\n const tenZoneIndexes = [...Array(tenZonesToDraw).keys()];\n const fiveZoneIndexes = [...Array(tenZonesToDraw * 2).keys()];\n const tenYardsPx = 10 * pxPerYard;\n const defaultZoneColor = isFlipped\n ? visPalette.zones.alternate\n : visPalette.zones.default;\n const alternateZoneColor = isFlipped\n ? visPalette.zones.default\n : visPalette.zones.alternate;\n\n const tensArea = svgG.append('g').attr('id', 'ten-yd-cells');\n tensArea\n .selectAll('rect')\n .data(tenZoneIndexes)\n .enter()\n .append('rect')\n .attr('fill', (d) => (isEven(d) ? alternateZoneColor : defaultZoneColor))\n .attr('x', (d) => d * tenYardsPx)\n .attr('y', 0)\n .attr('height', fieldHeightYds * pxPerYard)\n .attr('width', tenYardsPx);\n tensArea\n .append('g')\n .attr('id', 'ten-yd-cell-markings')\n .selectAll('line')\n .data(fiveZoneIndexes)\n .enter()\n .append('line')\n .attr('stroke', visPalette.guides)\n .attr('stroke-width', '1px')\n .attr('stroke-dasharray', `${pxPerYard / 3} ${pxPerYard / 3}`)\n .attr('x1', (d) => d * 5 * pxPerYard)\n .attr('x2', (d) => d * 5 * pxPerYard)\n .attr('y1', 0)\n .attr('y2', fieldHeightYds * pxPerYard);\n};\n\n/* Draw a row of vertical dashes on the field\nThese are the hash marks, and edge markings\nFunction expects to be called from a G at the level of the bottom of the hashes\n (the official field sizes are for the distance field edge to inner point\n , and the dashes are drawn out from this point)\n*/\nconst drawHashMarkRow = function (\n svgG,\n { visPalette, strokeWidthPx, pxPerYard },\n hashesToDraw\n) {\n const hashesIndexes = [...Array(hashesToDraw).keys()];\n svgG\n .selectAll('line')\n .data(hashesIndexes)\n .enter()\n .append('line')\n .attr('stroke', visPalette.guides)\n .attr('stroke-width', strokeWidthPx)\n .attr('x1', (d) => d * pxPerYard)\n .attr('x2', (d) => d * pxPerYard)\n .attr('y1', 0)\n .attr('y2', -1 * FIELD_MEASURES.HASH_MARK_WIDTH * pxPerYard);\n};\n\n/* Draw a row of horizontal dashes on the field\nThese are used in combination with the hash marks (not edges)\nFunction expects to be called from the same G as the hashes it is topping\n*/\nconst drawHashMarkToppersRow = function (\n svgG,\n { visPalette, strokeWidthPx, pxPerYard },\n drawAboveHashes, // i.e. at a lower y value / nearer left field edge\n hashTopsToDraw\n) {\n const oneNineteen = [...Array(hashTopsToDraw).keys()];\n oneNineteen.shift();\n const topperSpacingYards = 5;\n const topperWidthYds = 1;\n const topperY = drawAboveHashes\n ? -1 * FIELD_MEASURES.HASH_MARK_WIDTH * pxPerYard\n : 0;\n\n svgG\n .selectAll('path')\n .data(oneNineteen)\n .enter()\n .append('svg:path')\n .attr('stroke', visPalette.guides)\n .attr('stroke-width', strokeWidthPx)\n .attr('fill', 'none')\n .attr(\n 'd',\n (d) =>\n `M${d * topperSpacingYards * pxPerYard},${topperY} l-${\n (topperWidthYds / 2) * pxPerYard\n },0 l${topperWidthYds * pxPerYard},0`\n );\n};\n\n/* Draw the hash marks on the field\nThese repeat every 1yd down the x-axis of the field\nThey are the middle markings that change with competition level\nhorizontal dashes occur every 5 yards at the point innermost to the field center\n*/\nconst addCompetitionHashMarks = function (\n svgG,\n fieldSettings,\n hashesToDraw = 120\n) {\n const hashY = getHashYFromCompLevel(fieldSettings.competitionLevel);\n const hashY2 =\n FIELD_MEASURES.Y_YARDS - hashY + FIELD_MEASURES.HASH_MARK_WIDTH;\n const hashTopsToDraw = hashesToDraw / 5; // drawn every 5 yards\n\n svgG\n .append('g')\n .attr('id', 'hash-marks-upper')\n .attr('transform', `translate(${0},${hashY * fieldSettings.pxPerYard})`)\n .call(drawHashMarkRow, fieldSettings, hashesToDraw)\n .call(drawHashMarkToppersRow, fieldSettings, false, hashTopsToDraw);\n\n svgG\n .append('g')\n .attr('id', 'hash-marks-lower')\n .attr('transform', `translate(${0},${hashY2 * fieldSettings.pxPerYard})`)\n .call(drawHashMarkRow, fieldSettings, hashesToDraw)\n .call(drawHashMarkToppersRow, fieldSettings, true, hashTopsToDraw);\n};\n\n/* Draw the dashes (look like hash marks) on the field at the field edges */\nconst addFieldEdgeMarks = function (\n svgG,\n fieldSettings,\n hashesToDraw = 120,\n fieldHeightYds = FIELD_MEASURES.Y_YARDS\n) {\n svgG\n .append('g')\n .attr('id', 'hash-marks-top')\n .attr(\n 'transform',\n `translate(${0},${\n (FIELD_MEASURES.HASH_MARK_EDGE_SPACE + FIELD_MEASURES.HASH_MARK_WIDTH) *\n fieldSettings.pxPerYard\n })`\n )\n .call(drawHashMarkRow, fieldSettings, hashesToDraw);\n\n svgG\n .append('g')\n .attr('id', 'hash-marks-bottom')\n .attr(\n 'transform',\n `translate(${0},${\n (fieldHeightYds - FIELD_MEASURES.HASH_MARK_EDGE_SPACE) *\n fieldSettings.pxPerYard\n })`\n )\n .call(drawHashMarkRow, fieldSettings, hashesToDraw);\n};\n\n/* Adds End Zones\nThis should be called after odd/even zones (it sits on top of them) \nUses line not stroke to separate from main pitch without adding a full border\n*/\nconst addEndZones = function (\n svgG,\n { pxPerYard, strokeWidthPx, colorEndZoneHome, colorEndZoneAway, visPalette }\n) {\n svgG\n .append('rect')\n .attr('id', 'end-zone-left')\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', FIELD_MEASURES.END_ZONE_WIDTH * pxPerYard)\n .attr('height', FIELD_MEASURES.Y_YARDS * pxPerYard)\n .attr('fill', colorEndZoneHome || visPalette.zones.important)\n .attr('stroke', 'none');\n svgG\n .append('line')\n .attr('id', 'goal-line-left')\n .attr('x1', FIELD_MEASURES.END_ZONE_WIDTH * pxPerYard)\n .attr('x2', FIELD_MEASURES.END_ZONE_WIDTH * pxPerYard)\n .attr('y1', 0)\n .attr('y2', FIELD_MEASURES.Y_YARDS * pxPerYard)\n .attr('stroke', visPalette.border)\n .attr('stroke-width', strokeWidthPx);\n\n svgG\n .append('rect')\n .attr('id', 'end-zone-right')\n .attr(\n 'x',\n (FIELD_MEASURES.X_YARDS - FIELD_MEASURES.END_ZONE_WIDTH) * pxPerYard\n )\n .attr('y', 0)\n .attr('width', FIELD_MEASURES.END_ZONE_WIDTH * pxPerYard)\n .attr('height', FIELD_MEASURES.Y_YARDS * pxPerYard)\n .attr('fill', colorEndZoneAway || visPalette.zones.important)\n .attr('stroke', 'none');\n svgG\n .append('line')\n .attr('id', 'goal-line-right')\n .attr(\n 'x1',\n (FIELD_MEASURES.X_YARDS - FIELD_MEASURES.END_ZONE_WIDTH) * pxPerYard\n )\n .attr(\n 'x2',\n (FIELD_MEASURES.X_YARDS - FIELD_MEASURES.END_ZONE_WIDTH) * pxPerYard\n )\n .attr('y1', 0)\n .attr('y2', FIELD_MEASURES.Y_YARDS * pxPerYard)\n .attr('stroke', visPalette.border)\n .attr('stroke-width', strokeWidthPx);\n};\n\n/* Add the final border around the whole field */\nconst addFieldBorder = function (\n svgG,\n { pxPerYard, visPalette, strokeWidthPx },\n heightYds = FIELD_MEASURES.Y_YARDS,\n widthYds = FIELD_MEASURES.X_YARDS\n) {\n svgG\n .append('rect')\n .attr('id', 'field-border')\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', widthYds * pxPerYard)\n .attr('height', heightYds * pxPerYard)\n .attr('fill', 'transparent')\n .attr('stroke', visPalette.border)\n .attr('stroke-width', strokeWidthPx);\n};\n\n/* \nField Numbers are of fixed size:\n 6' tall, 2' wide, 1' either side from the yardline they're denoting)\n |\n ________ | ________\n | | | | |\n | | | | | 6'\n | | | | |\n ________ | ________\n |\n 4' 1'\n\nTheir location is also fixed, but like hashes, varyies with competition level\n The field is often divided based on the \"top of the numbers\" for analysis\n (the edge of the numbers nearest the center of the field)\nOrientation of the numbers is thus fixed as \"horizontal\"\n Real fields always rotate so the text baseline is the field edge\n a legibility option is available here, but only makes sesne for a horizontal field\n*/\n\nconst drawFieldNumbers = function (\n svg,\n { pxPerYard, visPalette },\n flipNumber = false,\n drawBoundingBox = false\n) {\n const zeroEight = [...Array(9).keys()];\n const tenYards = 10;\n const firstNumbersMidpoint =\n (FIELD_MEASURES.END_ZONE_WIDTH + tenYards) * pxPerYard;\n\n const numbersZone = svg\n .append('g')\n .attr('id', 'ten-yd-numbers')\n .attr('transform', `translate(${firstNumbersMidpoint},0)`);\n\n /* Can be turned on to draw a bounding box around each number (more clearly define heights)\n dev note: Use to check sizing if changing font\n */\n if (drawBoundingBox) {\n const addFieldNumberBoundingBox = function (fieldBoxesG) {\n const tenZoneIndexes = [...Array(9).keys()];\n const tenYardsPx = 10 * pxPerYard;\n fieldBoxesG\n .selectAll('rect')\n .data(tenZoneIndexes)\n .enter()\n .append('rect')\n .attr('fill', 'transparent')\n .attr('stroke', visPalette.guides)\n .attr('stroke-width', 1)\n .attr('stroke-dasharray', '1 1')\n .attr('x', (d) => d * tenYardsPx)\n .attr('y', 0)\n .attr('height', FIELD_MEASURES.FIELD_NUMBERS_HEIGHT * pxPerYard)\n .attr('width', FIELD_MEASURES.FIELD_NUMBERS_WIDTH * pxPerYard);\n };\n\n const fieldNumbersLeftBoxes = numbersZone\n .append('g')\n .attr('id', 'field-numbers-left-boxes')\n .attr(\n 'transform',\n `translate(${\n -1 *\n (FIELD_MEASURES.FIELD_NUMBERS_WIDTH +\n FIELD_MEASURES.FIELD_NUMBERS_WIDTH_SPACING) *\n pxPerYard\n },0)`\n );\n\n fieldNumbersLeftBoxes.call(addFieldNumberBoundingBox);\n\n const fieldNumbersRightBoxes = numbersZone\n .append('g')\n .attr('id', 'field-numbers-right-boxes')\n .attr(\n 'transform',\n `translate(${FIELD_MEASURES.FIELD_NUMBERS_WIDTH_SPACING * pxPerYard},0)`\n );\n fieldNumbersRightBoxes.call(addFieldNumberBoundingBox);\n }\n\n const numberHeight = FIELD_MEASURES.FIELD_NUMBERS_HEIGHT * pxPerYard;\n const numbersFontHeight = numberHeight * FIELD_NUMBERS_FONT.fieldNumberScaler;\n const yShift = flipNumber\n ? 0\n : FIELD_MEASURES.FIELD_NUMBERS_HEIGHT * pxPerYard;\n const numberRotation = flipNumber ? 180 : 0;\n /* For accurate placement, and control of rotation, easiest to split the numbers \n i.e. instead of adding \"20\" add \"2\" and \"0\" independently */\n const fieldNumbersNonZero = numbersZone\n .append('g')\n .attr('id', 'field-numbers-non-zero')\n .attr(\n 'transform',\n `translate(${\n -1 *\n (FIELD_MEASURES.FIELD_NUMBERS_WIDTH / 2 +\n FIELD_MEASURES.FIELD_NUMBERS_WIDTH_SPACING) *\n pxPerYard\n },${yShift})`\n );\n const fieldNumbersZeroes = numbersZone\n .append('g')\n .attr('id', 'field-numbers-zeroes')\n .attr(\n 'transform',\n `translate(${\n (FIELD_MEASURES.FIELD_NUMBERS_WIDTH / 2 +\n FIELD_MEASURES.FIELD_NUMBERS_WIDTH_SPACING) *\n pxPerYard\n },${yShift})`\n );\n\n const drawNumbers = function (fieldNumbersG, isZeroes) {\n fieldNumbersG\n .selectAll('text')\n .data(zeroEight)\n .enter()\n .append('text')\n .attr('fill', visPalette.guides)\n .attr('x', 0)\n .attr('y', 0)\n .attr(\n 'transform',\n (d) =>\n `translate(${\n d * tenYards * pxPerYard\n },0) rotate(${numberRotation},0,0)`\n )\n .attr('font-size', `${numbersFontHeight}px`)\n .attr('font-family', FIELD_NUMBERS_FONT.fontFamily)\n .attr('font-weight', FIELD_NUMBERS_FONT.fontWeight)\n .attr('text-anchor', 'middle')\n .text((d) => {\n if (isZeroes !== flipNumber) {\n return 0;\n }\n if (d <= 4) {\n return d + 1;\n }\n return 9 - d;\n });\n };\n\n fieldNumbersNonZero.call(drawNumbers, false);\n fieldNumbersZeroes.call(drawNumbers, true);\n\n /* Add directional arrows when not the 50 line (i.e. 10 yards to what)\n */\n const arrowTransform = function (n) {\n const arrowLeftRight = n <= 4 ? -1 : 1;\n const arrowShiftX =\n (FIELD_MEASURES.FIELD_NUMBERS_WIDTH +\n FIELD_MEASURES.FIELD_NUMBERS_WIDTH_SPACING +\n FIELD_MEASURES.FIELD_NUMBERS_ARROW_SPACING_X) *\n arrowLeftRight;\n const arrowShiftY = flipNumber\n ? FIELD_MEASURES.FIELD_NUMBERS_HEIGHT -\n FIELD_MEASURES.FIELD_NUMBERS_ARROW_SPACING_Y -\n FIELD_MEASURES.FIELD_NUMBERS_ARROW_Y\n : FIELD_MEASURES.FIELD_NUMBERS_ARROW_SPACING_Y;\n return `translate(${(n * tenYards + arrowShiftX) * pxPerYard},${\n arrowShiftY * pxPerYard\n })`;\n };\n const arrowShape = function (n) {\n let arrowD = '';\n if (n < 4) {\n arrowD = `M0 0 l-${FIELD_MEASURES.FIELD_NUMBERS_ARROW_X * pxPerYard} ${\n (FIELD_MEASURES.FIELD_NUMBERS_ARROW_Y / 2) * pxPerYard\n } l${FIELD_MEASURES.FIELD_NUMBERS_ARROW_X * pxPerYard} ${\n (FIELD_MEASURES.FIELD_NUMBERS_ARROW_Y / 2) * pxPerYard\n } z`;\n } else if (n > 4) {\n arrowD = `M0 0 l${FIELD_MEASURES.FIELD_NUMBERS_ARROW_X * pxPerYard} ${\n (FIELD_MEASURES.FIELD_NUMBERS_ARROW_Y / 2) * pxPerYard\n } l-${FIELD_MEASURES.FIELD_NUMBERS_ARROW_X * pxPerYard} ${\n (FIELD_MEASURES.FIELD_NUMBERS_ARROW_Y / 2) * pxPerYard\n } z`;\n }\n return arrowD;\n };\n\n numbersZone\n .selectAll('path')\n .data(zeroEight)\n .enter()\n .append('svg:path')\n .attr('d', (d) => arrowShape(d))\n .attr('fill', visPalette.guides)\n .attr('transform', (d) => arrowTransform(d));\n};\n\nconst addFieldNumbers = function (svgG, fieldSettings) {\n const numberEdgeDistance =\n fieldSettings.competitionLevel === COMPETITION_LEVEL.NFL\n ? FIELD_MEASURES.FIELD_NUMBERS_EDGE_NFL * fieldSettings.pxPerYard\n : FIELD_MEASURES.FIELD_NUMBERS_EDGE_NCAA * fieldSettings.pxPerYard;\n\n const topNumbersG = svgG\n .append('g')\n .attr('id', 'top-numbers')\n .attr('transform', `translate(0,${numberEdgeDistance})`);\n drawFieldNumbers(\n topNumbersG,\n fieldSettings,\n !fieldSettings.fieldNumbersToFieldRight\n );\n\n const bottomNumbersG = svgG\n .append('g')\n .attr('id', 'bottom-numbers')\n .attr(\n 'transform',\n `translate(0,${\n (FIELD_MEASURES.Y_YARDS - FIELD_MEASURES.FIELD_NUMBERS_HEIGHT) *\n fieldSettings.pxPerYard -\n numberEdgeDistance\n })`\n );\n drawFieldNumbers(bottomNumbersG, fieldSettings);\n};\n\nexport {\n addPosts,\n addOddEvenZones,\n addCompetitionHashMarks,\n addFieldEdgeMarks,\n addEndZones,\n addFieldBorder,\n addFieldNumbers,\n};\n","/* AMERICAN FOOTBALL VARIANT FIELD CONSTANTS\nUnlike the normal field, the variants are designed to show only a part of the field, \n or to distort it (primarily in terms of the Y axis) to visualise events in a relative manner,\n rather than absolutely on the field. \n\nValues in this file denote how these variant fields are sized\n*/\n\nconst LOS_FIELD_DRAWING_DEFAULTS = {\n X_YARDS: 80,\n LOS_X: 20,\n Y_BORDERS: 0,\n AXIS_SPACE: 2, // Yards\n};\n\nconst RELATIVE_Y_FIELD_MEASURES = {\n Y_YARDS: 70,\n Y_TENYARD_DISPLACEMENTS: [-30, -20, -10, 0, 10, 20, 30],\n};\n\nexport { LOS_FIELD_DRAWING_DEFAULTS, RELATIVE_Y_FIELD_MEASURES };\n","export const DEFAULT_FONT = 'Inter, sans-serif';\n\n/* Font setups for different parts of visualisations */\nconst KITBAG_TYPOGRAPHY = {\n HEADING_LARGE: { SIZE: 18, WEIGHT: 700, LINE_HEIGHT: 26 },\n HEADING_REGULAR: { SIZE: 16, WEIGHT: 600, LINE_HEIGHT: 24 },\n HEADING_MEDIUM: { SIZE: 14, WEIGHT: 600, LINE_HEIGHT: 20 },\n HEADING_SMALL: { SIZE: 12, WEIGHT: 600, LINE_HEIGHT: 18 },\n BODY_REGULAR: { SIZE: 14, WEIGHT: 400, LINE_HEIGHT: 20 },\n BODY_MEDIUM: { SIZE: 12, WEIGHT: 400, LINE_HEIGHT: 18 },\n BODY_SMALL: { SIZE: 10, WEIGHT: 400, LINE_HEIGHT: 16 },\n};\nexport const DEFAULT_FONT_SIZE = KITBAG_TYPOGRAPHY.BODY_MEDIUM.SIZE; // 12px\n/* \nDocumentation about usage can be found here:\nhttps://www.notion.so/statsbomb/Visualisation-Text-Font-900e907001a949468a59b1e85aea0b1e \n*/\nexport const VISUALISATION_FONT_SETUPS = {\n /* Generic Vis Parts */\n AXES_VALUES: KITBAG_TYPOGRAPHY.BODY_MEDIUM,\n AXES_VALUES_SMALL: KITBAG_TYPOGRAPHY.BODY_SMALL,\n AXES_LABELS: KITBAG_TYPOGRAPHY.BODY_REGULAR,\n DATUM_LABEL: KITBAG_TYPOGRAPHY.BODY_SMALL,\n ICON_LABEL: { SIZE: 8, WEIGHT: 600, LINE_HEIGHT: 12 },\n AREA_TITLE: KITBAG_TYPOGRAPHY.HEADING_SMALL,\n INFO_LABEL: KITBAG_TYPOGRAPHY.BODY_MEDIUM,\n INFO_LABEL_SMALL: KITBAG_TYPOGRAPHY.BODY_SMALL,\n /* snap formations ~ field width segments get shrunk to tiles, so have to proportionally scale up */\n TILE_HEADER: { SIZE: 18, WEIGHT: 400, LINE_HEIGHT: 26 },\n TILE_SUBHEADER: { SIZE: 17, WEIGHT: 400, LINE_HEIGHT: 26 },\n TILE_INFO: { SIZE: 16, WEIGHT: 400, LINE_HEIGHT: 24 },\n /* Header Section (Export) */\n HEADER_TITLE: KITBAG_TYPOGRAPHY.HEADING_LARGE,\n HEADER_SUB_TITLE: KITBAG_TYPOGRAPHY.HEADING_REGULAR,\n HEADER_SUB_SUB_TITLE: KITBAG_TYPOGRAPHY.HEADING_MEDIUM,\n /* Header Section (Export) ~ secondary header */\n HEADER_INFO: KITBAG_TYPOGRAPHY.HEADING_SMALL,\n HEADER_LABEL: KITBAG_TYPOGRAPHY.BODY_MEDIUM,\n /* Key / Legend */\n KEY_TITLE: KITBAG_TYPOGRAPHY.HEADING_MEDIUM, // rarely needed\n KEY_SECTION_HEADER: KITBAG_TYPOGRAPHY.HEADING_SMALL, // parts of keys/legends\n KEY_LABEL: KITBAG_TYPOGRAPHY.BODY_MEDIUM, // normal key labels\n KEY_LABEL_SMALL: KITBAG_TYPOGRAPHY.BODY_SMALL, // additional key information\n};\n\n/*\nThe declared font size (e.g. 10px) generates text where any given character takes up only a proportion of that value\n i.e. because if \"o\" sits on the line \"p\" drops a tail under and \"b\" extends one above. \n The amount of a declared font size that Inter takes up for an uppercase letter/number is 0.73\nhttps://www.notion.so/statsbomb/Line-Height-an-SVG-problem-9b93b97afc1747df84f7730218df9669\n*/\nexport const DEFAULT_FONT_TEXT_PROPORTION = 0.73;\n","import {\n ROTATIONS,\n FIELD_Y_YARDS_RELATIVEY,\n FIELD_Y_YARDS,\n} from '../constants/charting';\nimport { DEFAULT_FONT, VISUALISATION_FONT_SETUPS } from '../constants/visText';\nimport { COMPETITION_LEVEL, FIELD_MEASURES } from './field.constants';\nimport { RELATIVE_Y_FIELD_MEASURES } from './fieldVariants.constants';\n\nconst losDashArray = function ({ pxPerYard }) {\n return `${pxPerYard / 3} ${pxPerYard / 3}`;\n};\n\nconst drawLOS = function (svg, fieldSettings, heightYds) {\n svg\n .append('g')\n .append('line')\n .attr('x1', fieldSettings.LOS_X * fieldSettings.pxPerYard)\n .attr('x2', fieldSettings.LOS_X * fieldSettings.pxPerYard)\n .attr('y1', 0)\n .attr('y2', heightYds * fieldSettings.pxPerYard)\n .attr(\n 'stroke',\n fieldSettings.visPalette.commonComponents.lineOfScrimmage.stroke\n )\n .attr(\n 'stroke-width',\n fieldSettings.visPalette.commonComponents.lineOfScrimmage.strokeWidth\n )\n .attr(\n 'stroke-opacity',\n fieldSettings.visPalette.commonComponents.lineOfScrimmage.strokeOpacity\n )\n .attr(\n 'stroke-dasharray',\n fieldSettings.visPalette.commonComponents.lineOfScrimmage.strokeDashArray\n );\n};\n\nconst drawHorizontalGuide = function (\n svgG,\n fieldSettings,\n widthPx,\n yPx,\n isCenterLine = false\n) {\n if (isCenterLine) {\n svgG\n .append('g')\n .append('line')\n .attr('x1', 0)\n .attr('x2', widthPx)\n .attr('y1', yPx)\n .attr('y2', yPx)\n .attr(\n 'stroke',\n fieldSettings.visPalette.commonComponents.lineOfScrimmage.stroke\n )\n .attr('stroke-width', fieldSettings.strokeWidthPx)\n .attr('stroke-dasharray', losDashArray(fieldSettings));\n } else {\n /* Like the hash marks, one dash every yard, but half the height (not real hash marks) */\n const half_hash_dash_array = `${fieldSettings.strokeWidthPx} ${\n fieldSettings.pxPerYard - fieldSettings.strokeWidthPx\n }`;\n svgG\n .append('g')\n .append('line')\n .attr('x1', -fieldSettings.strokeWidthPx / 2) // offset so dashes match the field markings\n .attr('x2', widthPx)\n .attr('y1', yPx)\n .attr('y2', yPx)\n .attr('stroke', fieldSettings.visPalette.guides)\n .attr(\n 'stroke-width',\n (FIELD_MEASURES.HASH_MARK_WIDTH / 2) * fieldSettings.pxPerYard\n )\n .attr('stroke-dasharray', half_hash_dash_array);\n }\n};\n\nconst addHorizontalGuides = function (svgG, fieldSettings, widthPx) {\n // eslint-disable-next-line array-callback-return\n RELATIVE_Y_FIELD_MEASURES.Y_TENYARD_DISPLACEMENTS.map((n) => {\n const lineY = (FIELD_Y_YARDS_RELATIVEY / 2 + n) * fieldSettings.pxPerYard;\n svgG.call(drawHorizontalGuide, fieldSettings, widthPx, lineY, n === 0);\n });\n};\n\nconst addNumberTopGuides = function (svgG, fieldSettings, widthPx) {\n const numberTopY =\n fieldSettings.competitionLevel === COMPETITION_LEVEL.NFL\n ? FIELD_MEASURES.FIELD_NUMBERS_EDGE_NFL +\n FIELD_MEASURES.FIELD_NUMBERS_HEIGHT\n : FIELD_MEASURES.FIELD_NUMBERS_EDGE_NCAA +\n FIELD_MEASURES.FIELD_NUMBERS_HEIGHT;\n\n svgG.call(\n drawHorizontalGuide,\n fieldSettings,\n widthPx,\n numberTopY * fieldSettings.pxPerYard\n );\n svgG.call(\n drawHorizontalGuide,\n fieldSettings,\n widthPx,\n (FIELD_Y_YARDS - numberTopY) * fieldSettings.pxPerYard\n );\n};\n\nconst yardbreakToLOSNumber = function (d, losTenYardIndex) {\n if (d === losTenYardIndex) {\n return 'LoS';\n }\n return (d - losTenYardIndex) * 10;\n};\n\nconst drawEdgeNumbersHorizontal = function (\n svg,\n fieldSettings,\n numbersToDraw,\n leftFieldEdge, // i.e. is it the edge of the field where y=0\n rotationOption,\n losTenYardIndex\n) {\n const zeroEight = [...Array(numbersToDraw).keys()];\n const numbersYardsSeperated = 10;\n\n const numbersZone = svg.append('g').attr('id', 'ten-yd-numbers-edge');\n\n let rotateValue = 0;\n let textShiftY = leftFieldEdge\n ? -0.5 * fieldSettings.pxPerYard\n : 1.4 * fieldSettings.pxPerYard;\n let textAnchor = 'middle';\n let textShiftX = 0;\n if (rotationOption === ROTATIONS.VERTICAL_UP) {\n rotateValue = 90;\n textShiftY = leftFieldEdge\n ? -0.2 * fieldSettings.pxPerYard\n : 0.2 * fieldSettings.pxPerYard;\n textAnchor = leftFieldEdge ? 'end' : 'start';\n textShiftX = -0.3 * VISUALISATION_FONT_SETUPS.AXES_VALUES.SIZE;\n }\n if (rotationOption === ROTATIONS.VERTICAL_DOWN) {\n rotateValue = -90;\n textShiftY = leftFieldEdge\n ? -0.2 * fieldSettings.pxPerYard\n : 0.2 * fieldSettings.pxPerYard;\n textAnchor = leftFieldEdge ? 'start' : 'end';\n textShiftX = 0.3 * VISUALISATION_FONT_SETUPS.AXES_VALUES.SIZE;\n }\n\n numbersZone\n .selectAll('text')\n .data(zeroEight)\n .enter()\n .append('text')\n .attr('fill', fieldSettings.visPalette.text.label)\n .attr('x', 0)\n .attr('y', 0)\n .attr(\n 'transform',\n (d) =>\n `translate(${\n (d + 1) * numbersYardsSeperated * fieldSettings.pxPerYard + textShiftX\n },${textShiftY}) rotate(${rotateValue})`\n )\n .attr('font-size', `${VISUALISATION_FONT_SETUPS.AXES_VALUES.SIZE}px`)\n .attr('font-weight', VISUALISATION_FONT_SETUPS.AXES_VALUES.WEIGHT)\n .attr('font-family', DEFAULT_FONT)\n .attr('text-anchor', textAnchor)\n .text((d) => yardbreakToLOSNumber(d, losTenYardIndex));\n};\n\nconst addEdgeNumbersHorizontal = function (\n svgG,\n fieldSettings,\n heightYds,\n numbersToDraw = 9,\n rotationOption,\n losTenYardIndex = 1\n) {\n svgG.append('g').attr('id', 'top-numbers-edge');\n drawEdgeNumbersHorizontal(\n svgG.select('#top-numbers-edge'),\n fieldSettings,\n numbersToDraw,\n true,\n rotationOption,\n losTenYardIndex\n );\n svgG\n .append('g')\n .attr('id', 'bottom-numbers-edge')\n .attr('transform', `translate(0,${heightYds * fieldSettings.pxPerYard})`);\n drawEdgeNumbersHorizontal(\n svgG.select('#bottom-numbers-edge'),\n fieldSettings,\n numbersToDraw,\n false,\n rotationOption,\n losTenYardIndex\n );\n};\n\nconst addEdgeNumbersVertical = function (svgG, fieldSettings) {\n let rotateValue = 0;\n let textShiftX = -0.2 * fieldSettings.pxPerYard;\n let textAnchor = 'end';\n let textShiftY = VISUALISATION_FONT_SETUPS.AXES_VALUES.SIZE / 2;\n if (\n fieldSettings.orientation === ROTATIONS.VERTICAL_UP ||\n fieldSettings.orientation === ROTATIONS.VERTICAL_DOWN\n ) {\n rotateValue =\n fieldSettings.orientation === ROTATIONS.VERTICAL_UP ? 90 : -90;\n textShiftY = 0;\n textAnchor = 'middle';\n textShiftX =\n fieldSettings.orientation === ROTATIONS.VERTICAL_UP\n ? -1.2 * VISUALISATION_FONT_SETUPS.AXES_VALUES.SIZE\n : -0.5 * VISUALISATION_FONT_SETUPS.AXES_VALUES.SIZE;\n }\n\n // eslint-disable-next-line array-callback-return\n RELATIVE_Y_FIELD_MEASURES.Y_TENYARD_DISPLACEMENTS.map((n) => {\n const lineY = (FIELD_Y_YARDS_RELATIVEY / 2 + n) * fieldSettings.pxPerYard;\n const dyMarking = svgG\n .append('g')\n .attr('id', 'hash-marks-middle')\n .attr('transform', `translate(${0},${lineY})`);\n\n dyMarking\n .append('text')\n .attr('fill', fieldSettings.visPalette.text.label)\n .attr('x', 0)\n .attr('y', 0)\n .attr(\n 'transform',\n `translate(${textShiftX},${textShiftY}) rotate(${rotateValue})`\n )\n .attr('font-size', `${VISUALISATION_FONT_SETUPS.AXES_VALUES.SIZE}px`)\n .attr('font-weight', VISUALISATION_FONT_SETUPS.AXES_VALUES.WEIGHT)\n .attr('font-family', DEFAULT_FONT)\n .attr('text-anchor', textAnchor)\n .text(n);\n });\n};\n\nexport {\n drawLOS,\n addEdgeNumbersHorizontal,\n addEdgeNumbersVertical,\n addHorizontalGuides,\n addNumberTopGuides,\n};\n","import {\n DEFAULT_FIELD_DRAWING_SETTINGS,\n FIELD_MEASURES,\n} from './field.constants';\nimport {\n addOddEvenZones,\n addFieldBorder,\n addCompetitionHashMarks,\n addFieldEdgeMarks,\n} from './field.drawing';\nimport {\n LOS_FIELD_DRAWING_DEFAULTS,\n RELATIVE_Y_FIELD_MEASURES,\n} from './fieldVariants.constants';\nimport {\n drawLOS,\n addEdgeNumbersHorizontal,\n addEdgeNumbersVertical,\n addHorizontalGuides,\n} from './fieldVariants.drawing';\n\nconst addLoSField = function (svg, fieldSettingOverrides = {}) {\n /* Make sure we have all the field settings for drawing functions */\n const fieldSettings = {\n ...DEFAULT_FIELD_DRAWING_SETTINGS,\n ...LOS_FIELD_DRAWING_DEFAULTS,\n ...fieldSettingOverrides,\n };\n\n /* create a G element for the field aspects to all sit in \n id for finding in browser when needed, and class if overriding styles via css\n */\n const fieldArea = svg\n .append('g')\n .attr('id', 'field-area')\n .attr('class', 'amf-field');\n\n const borderedFieldHeightYds =\n fieldSettings.Y_BORDERS * 2 + FIELD_MEASURES.Y_YARDS;\n\n /* Draw the oscillating 10yd zones */\n const tenYards = 10;\n const tenYdZones = fieldSettings.X_YARDS / tenYards;\n fieldArea.call(\n addOddEvenZones,\n fieldSettings,\n borderedFieldHeightYds,\n tenYdZones\n );\n\n /* Add a layer adjusted by border padding so can show Out of Bounds */\n const borderAdjusted = fieldArea\n .append('g')\n .attr('id', 'border-shift')\n .attr(\n 'transform',\n `translate(0,${fieldSettings.Y_BORDERS * fieldSettings.pxPerYard})`\n );\n\n /* Add regular field hashes */\n borderAdjusted.call(\n addCompetitionHashMarks,\n fieldSettings,\n fieldSettings.X_YARDS\n );\n borderAdjusted.call(addFieldEdgeMarks, fieldSettings, fieldSettings.X_YARDS);\n\n /* Draw the border for the field if there are borders\n Full outline (including y-borders occurs below)\n */\n if (fieldSettings.Y_BORDERS > 0) {\n borderAdjusted.call(\n addFieldBorder,\n fieldSettings,\n FIELD_MEASURES.Y_YARDS,\n fieldSettings.X_YARDS\n );\n }\n /* Draw the Line of Scrimmage (extends into border) */\n fieldArea.call(drawLOS, fieldSettings, borderedFieldHeightYds);\n /* Draw the overall border (including padding zones) */\n fieldArea.call(\n addFieldBorder,\n fieldSettings,\n borderedFieldHeightYds,\n fieldSettings.X_YARDS\n );\n\n /* Add edge numbers for x-yardlines relative to LoS */\n const losTenYardIndex = fieldSettings.LOS_X / tenYards - 1;\n fieldArea.call(\n addEdgeNumbersHorizontal,\n fieldSettings,\n borderedFieldHeightYds,\n tenYdZones - 1, // don't label the edge of the vis\n fieldSettings.orientation,\n losTenYardIndex\n );\n};\n\nconst addLoSFieldYRelative = function (svg, fieldSettingOverrides = {}) {\n /* Make sure we have all the field settings for drawing functions */\n const fieldSettings = {\n ...DEFAULT_FIELD_DRAWING_SETTINGS,\n ...LOS_FIELD_DRAWING_DEFAULTS,\n ...fieldSettingOverrides,\n };\n\n /* create a G element for the field aspects to all sit in \n id for finding in browser when needed, and class if overriding styles via css\n */\n const fieldArea = svg\n .append('g')\n .attr('id', 'field-area')\n .attr('class', 'amf-field');\n\n const fieldWidth = fieldSettings.X_YARDS * fieldSettings.pxPerYard;\n const tenYards = 10;\n const tenYdZones = fieldSettings.X_YARDS / tenYards;\n fieldArea.call(\n addOddEvenZones,\n fieldSettings,\n RELATIVE_Y_FIELD_MEASURES.Y_YARDS,\n tenYdZones\n );\n\n /* Add only the edge hashes (comp level ones make no sense relative to Y) */\n fieldArea.call(\n addFieldEdgeMarks,\n fieldSettings,\n fieldSettings.X_YARDS,\n RELATIVE_Y_FIELD_MEASURES.Y_YARDS\n );\n\n /* Add markings for LoS */\n fieldArea.call(drawLOS, fieldSettings, RELATIVE_Y_FIELD_MEASURES.Y_YARDS);\n\n /* Add Los relevant x-yd numbers\n Always orientate for the viewer\n */\n const losTenYardIndex = fieldSettings.LOS_X / tenYards - 1; // 0 based indexes\n fieldArea.call(\n addEdgeNumbersHorizontal,\n fieldSettings,\n RELATIVE_Y_FIELD_MEASURES.Y_YARDS,\n tenYdZones - 1, // don't label the edge of the vis\n fieldSettings.orientation,\n losTenYardIndex\n );\n\n if (!fieldSettingOverrides?.hideYGuides) {\n /* Add relevant to center y markings\n Always orientate for the viewer\n */\n fieldArea.call(addEdgeNumbersVertical, fieldSettings);\n /* Add markings for dY levels (ten yards) matching axis numbers */\n fieldArea.call(addHorizontalGuides, fieldSettings, fieldWidth);\n }\n\n /* Lastly (on top) Draw the overall border */\n fieldArea.call(\n addFieldBorder,\n fieldSettings,\n RELATIVE_Y_FIELD_MEASURES.Y_YARDS,\n fieldSettings.X_YARDS\n );\n};\n\nexport { addLoSField, addLoSFieldYRelative };\n","import { styled } from 'styled-components';\n\nexport const PassEndsChartSVG = styled.svg`\n ${({ $displayHeatMap }) =>\n $displayHeatMap &&\n `\n #ten-yd-cells {\n rect {\n display: none;\n }\n\n line {\n display: none;\n }\n }\n `}\n\n .dot {\n &:hover {\n cursor: pointer;\n }\n }\n`;\n","export const SVG_CLASS_NAMES = {\n IN_MARGINS: 'within-margins',\n IN_AXES_PADDING: 'within-axes-padding',\n DATA_LAYER: 'data-layer',\n FIELD: 'field',\n CLICKABLE_FIELD: 'clickable-field',\n ONFIELD: 'onfield',\n UNDERFIELD: 'underfield',\n PLAYER_DOTS: 'player-dots',\n BACKGROUND_RECT: 'backing-rect',\n};\nexport const COLORING_OPTION_PASS_SUCCESS = {\n label: 'Complete and Incomplete Passes',\n value: 'success',\n};\nexport const COLORING_OPTION_UNDERTHOW_OVERTHROW = {\n label: 'Underthrow and Overthrow',\n value: 'under_over',\n};\nexport const COLORING_OPTION_PASS_VELOCITY = {\n label: 'Pass Velocity',\n value: 'velocity',\n};\nexport const COLORING_OPTION_NONE = {\n label: 'None',\n value: 'plain',\n};\nexport const COLORING_OPTION_PLAY_SUCCESS = {\n label: 'Play Success',\n value: 'play_success',\n};\nexport const COLORING_OPTION_MONOCHROME = 'monochrome';\n\nexport const COLORING_OPTIONS = [\n COLORING_OPTION_PASS_SUCCESS,\n COLORING_OPTION_UNDERTHOW_OVERTHROW,\n COLORING_OPTION_PASS_VELOCITY,\n COLORING_OPTION_NONE,\n COLORING_OPTION_PLAY_SUCCESS,\n];\n\nexport const COLORING_OPTION_BY_PLAYER = {\n label: 'Passer',\n value: 'passer',\n};\nexport const COLORING_OPTION_BY_TARGET = {\n label: 'Target',\n value: 'target',\n};\nexport const COLORING_OPTIONS_TEAM = COLORING_OPTIONS.concat([\n COLORING_OPTION_BY_PLAYER,\n COLORING_OPTION_BY_TARGET,\n]);\n\nexport const INFO_DISPLAY_VIS = {\n label: 'Display with Visualisation',\n value: 'vis',\n};\nexport const INFO_DISPLAY_TABLE = {\n label: 'Display In Tables',\n value: 'tables',\n};\nexport const INFO_DISPLAY_NONE = {\n label: 'Hide',\n value: 'hide',\n};\n\nexport const INFO_DISPLAY_OPTIONS = [\n INFO_DISPLAY_VIS,\n INFO_DISPLAY_TABLE,\n INFO_DISPLAY_NONE,\n];\n\nexport const GRAPH_OPTION_HEATMAP = 'heatmap';\nexport const GRAPH_OPTION_PASS_PATHS = 'pass_paths';\nexport const GRAPH_OPTION_END_LOCATIONS = 'default';\n\nexport const GRAPH_OPTIONS = [\n {\n label: 'End Locations',\n value: GRAPH_OPTION_END_LOCATIONS,\n variant: 'Position',\n },\n {\n label: 'Heatmap',\n value: GRAPH_OPTION_HEATMAP,\n variant: 'HeatmapFlame',\n },\n {\n label: 'Pass Paths',\n value: GRAPH_OPTION_PASS_PATHS,\n variant: 'PassPath',\n },\n];\n\nexport const AXES_PADDING_SIZE = 25; // px is big enough for \"LoS\" or any suitable number in axes font/size\n","import { sortBy } from 'lodash';\nimport { API_ALIGNMENT_POSITION_KEYS } from '../../../utils/constants/api';\nimport { ALIGNMENT_POSITIONS } from '../../../utils/constants/positions';\n\nexport const FIELD_X_YARDS_PASSING_PRE_LOS = 20;\nconst FIELD_X_YARDS_PASSING_POST_LOS = 60;\nexport const FIELD_X_YARDS_PASSING_FRAME =\n FIELD_X_YARDS_PASSING_PRE_LOS + FIELD_X_YARDS_PASSING_POST_LOS;\n\n/**\n * @param {Number} total\n * @param {Object} row\n * @param {Boolean} row.success //or equivalent property check\n * @return {Number}\n */\nexport const countSuccessful = (total, { success }) =>\n success ? total + 1 : total;\n\nconst countTouchdowns = (total, { passTouchdown }) =>\n passTouchdown ? total + 1 : total;\nconst countIncomplete = (total, { success }) => (success ? total : total + 1);\nconst countInterceptions = (total, { catchInterception }) =>\n catchInterception ? total + 1 : total;\nconst countOuts = (total, { isOut }) => (isOut ? total + 1 : total);\nconst countUnderthrows = (total, { passUnderthrow }) =>\n passUnderthrow ? total + 1 : total;\nconst countDefenderTouchedFails = (total, { defenderTouched, success }) =>\n defenderTouched && !success ? total + 1 : total;\nconst countOverthrows = (total, { passOverthrow }) =>\n passOverthrow ? total + 1 : total;\nconst countThrowaways = (total, { passThrowaway }) =>\n passThrowaway ? total + 1 : total;\n\nexport const PASS_OUTCOME_UNSELECTED = {\n value: '',\n label: 'All Passes',\n order: 0,\n isChild: false,\n};\nexport const PASS_OUTCOME_TYPES = {\n COMPLETE: {\n value: 'COMPLETE',\n label: 'Complete Passes',\n order: 1,\n isChild: false,\n filter: (event) => event.success,\n counter: countSuccessful,\n },\n TOUCHDOWN: {\n value: 'TOUCHDOWN',\n label: 'Touchdowns',\n order: 2,\n isChild: true,\n filter: (event) => event.passTouchdown,\n counter: countTouchdowns,\n },\n INCOMPLETE: {\n value: 'INCOMPLETE',\n label: 'Incomplete Passes',\n order: 10,\n isChild: false,\n filter: (event) => !event.success,\n counter: countIncomplete,\n },\n INTERCEPTION: {\n value: 'INTERCEPTION',\n label: 'Interceptions',\n order: 11,\n isChild: true,\n filter: (event) => event.catchInterception,\n counter: countInterceptions,\n },\n OUT_OF_BOUNDS: {\n value: 'OUT_OF_BOUNDS',\n label: 'Out of bounds',\n order: 12,\n isChild: true,\n filter: (event) => event.isOut,\n counter: countOuts,\n },\n THROWAWAY: {\n value: 'THROWAWAY',\n label: 'Throwaways',\n order: 13,\n isChild: true,\n filter: (event) => event.passThrowaway,\n counter: countThrowaways,\n },\n DEFENDER_TOUCHED: {\n value: 'DEFENDER_TOUCHED',\n label: 'Defender Touched',\n order: 14,\n isChild: true,\n filter: (event) => event.defenderTouched,\n counter: countDefenderTouchedFails,\n },\n UNDERTHROW: {\n value: 'UNDERTHROW',\n label: 'Underthrows',\n order: 15,\n isChild: true,\n filter: (event) => event.passUnderthrow,\n counter: countUnderthrows,\n },\n OVERTHROW: {\n value: 'OVERTHROW',\n label: 'Overthrows',\n order: 16,\n isChild: true,\n filter: (event) => event.passOverthrow,\n counter: countOverthrows,\n },\n};\nexport const PASS_OUTCOMES = Object.values(PASS_OUTCOME_TYPES);\nexport const PASS_OUTCOME_OPTIONS = sortBy(\n PASS_OUTCOMES.concat(PASS_OUTCOME_UNSELECTED),\n 'order'\n);\n\nexport const TARGET_ANY_ALIGNMENT = 'ANY';\nexport const TARGET_ALIGNMENT_OPTIONS = [\n {\n value: TARGET_ANY_ALIGNMENT,\n label: 'Any',\n },\n {\n value: API_ALIGNMENT_POSITION_KEYS.WIDE_RECEIVER,\n label: ALIGNMENT_POSITIONS[API_ALIGNMENT_POSITION_KEYS.WIDE_RECEIVER].name,\n },\n {\n value: API_ALIGNMENT_POSITION_KEYS.SLOT_RECEIVER,\n label: ALIGNMENT_POSITIONS[API_ALIGNMENT_POSITION_KEYS.SLOT_RECEIVER].name,\n },\n {\n value: API_ALIGNMENT_POSITION_KEYS.TIGHT_END,\n label: ALIGNMENT_POSITIONS[API_ALIGNMENT_POSITION_KEYS.TIGHT_END].name,\n },\n {\n value: API_ALIGNMENT_POSITION_KEYS.RUNNING_BACK,\n label: ALIGNMENT_POSITIONS[API_ALIGNMENT_POSITION_KEYS.RUNNING_BACK].name,\n },\n];\n","import { min } from 'lodash';\n\n// get rect dimensions depending on the direction the user is dragging the mouse\nexport const getRectDimensions = (startX, startY, endX, endY) => {\n const rectX = min([startX, endX]);\n const rectWidth = Math.abs(startX - endX);\n const rectY = min([startY, endY]);\n const rectHeight = Math.abs(startY - endY);\n // return dimensions [x, y, width, height]\n return { rectX, rectY, rectWidth, rectHeight };\n};\n","import { interpolatePlasma, interpolateMagma, scaleLinear } from 'd3';\nimport { clamp, sortBy } from 'lodash';\nimport { getPalette } from '../visualisations/visPalettes';\n\n/** ************************\n * COLOR SCALES USAGE\n * Color scales are used when a continual value needs a corresponding color from a scale\n *\n * There are 3 Color Scales currently for usage in AMF IQ:\n *\n * value scale - for areas/objects/text colored on a scale valued bad->good\n * heatmap scale - for tiles/areas colored in a gradiated way\n * intensity scale - for objects/text colored on a scale, but not valued bad->good\n * - i.e. pass length isn't good/bad, but variable\n *\n * read more on scale definitions:\n * https://www.notion.so/statsbomb/Visualisation-Colour-Palettes-bd089e6840324e3290b3fa7a5765f334\n * ************************\n * */\n\n/**\n * Converts a fractional value to a colour\n * Used for heatmaps / solid gradient objects displaying the colouring\n * Crops the full range to the lighter 90% to work on dark backgrounds\n * @param {number} value\n */\nconst csHeatmap = function (value, darkMode = true) {\n const v = clamp(value, 0, 1);\n const visPalette = getPalette(darkMode);\n /* Want the array [0, 0.05, 0.1, 0.15 ... 0.95, 1], 21 values total */\n const domainSteps = [...Array(21).keys()].map((m) => m / 20);\n\n /* \n The heatmap scales use a portion of the magma scale, then extended into the palette background\n \n Light mode uses the lighter 80% of the magma scale, dark mode the lighter 90%\n \n Light mode: The [top of magma scale]->[white] should correspond to the bottom 15% of the heatmap scale\n Dark mode: The [bottom of magma scale]->[off-black] should correspond to the bottom 5% of the heatmap scale\n \n This makes the gradient of the combined bar approximately linear in speed of color change\n\n /*\n Thus we need to: \n transpose Magma values used (0.1->1 or 0.2->1) onto the relevant range (0.05 -> 1 or 0.15->1)\n add a linear gradient from background for values 0->domainMin\n */\n const domainMin = darkMode ? 0.05 : 0.15; // how much of the resultant domain should be gradient from white\n const magmaIgnoring = darkMode ? 0.1 : 0.2; // ignoring the darkest 20%\n const magmaUsing = 1 - magmaIgnoring;\n const magmaDomain = domainSteps.filter((f) => f >= domainMin); // of the final scale, the parts coming from magma\n const l = magmaDomain.length - 1;\n\n /* Final output domain is the palette background at 0 + filtered domain */\n const heatmapDomain = [0].concat(magmaDomain);\n let rangeColors;\n if (darkMode) {\n /* Get the colors from sample section, re-spread to target range */\n const magmaRangeIndexes = [...Array(magmaDomain.length).keys()].map(\n (m) => (m / l) * magmaUsing + magmaIgnoring\n );\n const magmaRange = magmaRangeIndexes.map(interpolateMagma);\n rangeColors = [visPalette.background.main].concat(magmaRange);\n } else {\n /* For light mode need to flip direction of magma\n then re-scale (i.e. spread what was 80% of the scale to fit the 85% it's now representing) */\n const magmaRangeIndexes = [...Array(magmaDomain.length).keys()].map(\n (m) => ((l - m) / l) * magmaUsing + magmaIgnoring\n );\n const magmaRange = magmaRangeIndexes.map(interpolateMagma);\n rangeColors = [visPalette.background.main].concat(magmaRange);\n }\n const adjustedHeatmapScale = scaleLinear()\n .domain(heatmapDomain)\n .range(rangeColors);\n\n return adjustedHeatmapScale(v);\n};\n\n/**\n * Converts a fractional value to a colour\n * Used for discreet objects (circles/hexes/lines/text etc.)\n * The variable should not be valued ~ (i.e. one colour is not inherently \"good\" or \"bad\")\n * Crops the top 10% as the palest yellows don't work on pale backgrounds\n * @param {number} value\n */\nconst csIntensity = function (value) {\n const v = clamp(value, 0, 1);\n const FRACTION_TO_CROP = 0.1;\n const FRACTION_REMAINING = 1 - FRACTION_TO_CROP;\n return interpolatePlasma(v * FRACTION_REMAINING);\n};\n\nconst INTENSITY_SCALE_BLUE_ENDS = [\n { percentile: 0, color: '#002d82' }, // deep blue\n { percentile: 1, color: '#8cd2e5' }, // pale blue\n];\n/**\n * Converts a fractional value to a colour\n * Used for cells in tables (assumes table cell background to match theme background)\n * The variable should not be valued ~ (i.e. one colour is not inherently \"good\" or \"bad\")\n * Designed to be sat in a table along with csValue (poseidon) scale\n * @param {number} value\n */\nexport const csIntensityBlue = function (value, darkMode = true) {\n const v = clamp(value, 0, 1);\n const midpoint = {\n percentile: 0.5,\n color: getPalette(darkMode).background.main,\n };\n const mergedScaleColors = sortBy(\n INTENSITY_SCALE_BLUE_ENDS.concat(midpoint),\n 'percentile'\n );\n const domain = mergedScaleColors.map((colorStop) => colorStop.percentile);\n const range = mergedScaleColors.map((colorStop) => colorStop.color);\n const getIntensityColour = scaleLinear().domain(domain).range(range);\n return getIntensityColour(v);\n};\n\n// Valued Continuous Scale for AMF:\n// https://www.notion.so/statsbomb/Poseidon-Scale-ab01c26cfac84ca3b6237cdf12211cd3\n// values are named p0 -> p100 (i.e. percentile)\nconst VALUED_CONTINUOUS_SCALE_COLORS_DARK = [\n { percentile: 0, color: '#94009f' },\n { percentile: 0.5, color: '#6385b3' },\n { percentile: 1, color: '#82ffc3' },\n];\nconst VALUED_CONTINUOUS_SCALE_COLORS_LIGHT = [\n { percentile: 0, color: '#5f0065' },\n { percentile: 0.5, color: '#6383b2' },\n { percentile: 1, color: '#75f5b7' },\n];\n/**\n * Converts a fractional value to a colour as part of the value Statsbomb Spectrum\n * Used for discreet objects (circles/hexes/lines etc.) being coloured to denote a continual variable\n * The variable should be valued: the nearer the fraction is to 1 the better\n * @param {number} value\n */\nconst csValue = function (value, darkMode = true) {\n const v = clamp(value, 0, 1);\n const scaleSource = darkMode\n ? VALUED_CONTINUOUS_SCALE_COLORS_DARK\n : VALUED_CONTINUOUS_SCALE_COLORS_LIGHT;\n const domain = scaleSource.map((colorStop) => colorStop.percentile);\n const range = scaleSource.map((colorStop) => colorStop.color);\n const getVColour = scaleLinear().domain(domain).range(range);\n return getVColour(v);\n};\n\n/**\n * Converts a fractional value to a colour\n * Used for blocks of color (bars, or heatmap sections)\n * The values should be divergent from a central value, i.e.\n * 0 is far from the average (negatively)\n * 0.5 the average value\n * 1 is far from the average (positively)\n * https://www.notion.so/statsbomb/The-Vs-Grey-Scale-6112e773c6824f379add5e3797eba9be\n * @param {number} value\n */\nconst csDivergent = function (value, darkMode = true) {\n const v = clamp(value, 0, 1);\n const domainVCC = [\n 0, 0.1, 0.2, 0.3, 0.4, 0.45, 0.5, 0.55, 0.6, 0.7, 0.8, 0.9, 1,\n ];\n /* Note the blues change but the reds don't */\n const rangeVCC = darkMode\n ? [\n '#1E298B',\n '#444d9c',\n '#636baa',\n '#8288b7',\n '#a1a5c5',\n '#bfc2d2',\n '#dedfe0',\n '#f2baad',\n '#f7a18e',\n '#f17b67',\n '#e84335',\n '#e11f19',\n '#b40b0e',\n ]\n : [\n '#171832',\n '#323a60',\n '#45537f',\n '#7183a3',\n '#b5c6d5',\n '#d3dee4',\n '#dedfe0',\n '#f2baad',\n '#f7a18e',\n '#f17b67',\n '#e84335',\n '#e11f19',\n '#b40b0e',\n ];\n const getVColour = scaleLinear().domain(domainVCC).range(rangeVCC);\n return getVColour(v);\n};\n\nexport { csHeatmap, csIntensity, csValue, csDivergent };\n","export const PLAY_OUTCOMES = {\n TOUCHDOWN: 'Touchdown',\n EXPLOSIVE: 'Explosive',\n SUCCESS: 'Success',\n FAIL: 'Fail',\n TURNOVER: 'Turnover',\n OTHER: 'Other',\n};\n\n/* \nExplosive and Chunk should come directly as API attributes where possible\nDefinitions: https://www.notion.so/statsbomb/Chunks-and-Explosive-225625da7683455db07f0df327e500b7\n*/\nexport const isChunk = (yardsNet, yardLine) => yardsNet >= 15 && yardLine <= 85;\n\n/* This function expects a play object as is found within the API in most endpoints */\nexport const getPlayOutcome = (apiPlay) => {\n if (apiPlay?.touchdownWon) {\n return PLAY_OUTCOMES.TOUCHDOWN;\n }\n if (apiPlay?.explosive) {\n return PLAY_OUTCOMES.EXPLOSIVE;\n }\n if (apiPlay?.success) {\n return PLAY_OUTCOMES.SUCCESS;\n }\n if (apiPlay?.turnoverType) {\n return PLAY_OUTCOMES.TURNOVER;\n }\n if (apiPlay?.downNegated) {\n return PLAY_OUTCOMES.OTHER;\n }\n return PLAY_OUTCOMES.FAIL;\n};\n\nconst PLAY_OUTCOME_COLORS = {\n [PLAY_OUTCOMES.TOUCHDOWN]: (visPalette) =>\n visPalette.successFail.superSuccess.main,\n [PLAY_OUTCOMES.EXPLOSIVE]: (visPalette) =>\n visPalette.successFail.success.main,\n [PLAY_OUTCOMES.SUCCESS]: (visPalette) => visPalette.successFail.success2.main,\n [PLAY_OUTCOMES.FAIL]: (visPalette) => visPalette.successFail.fail.main,\n [PLAY_OUTCOMES.TURNOVER]: (visPalette) =>\n visPalette.successFail.superFail.main,\n [PLAY_OUTCOMES.OTHER]: (visPalette) => visPalette.successFail.neutral.main,\n};\n\nexport const playOutcomeColor = (outcome, visPalette) => {\n const colorFunction = PLAY_OUTCOME_COLORS[outcome];\n return colorFunction(visPalette);\n};\n\nexport const keyColorDots = (visPalette) =>\n Object.keys(PLAY_OUTCOMES).map((outcomeKey) => {\n const value = PLAY_OUTCOMES[outcomeKey];\n return {\n name: value,\n color: playOutcomeColor(value, visPalette),\n };\n });\n","import { clamp, maxBy } from 'lodash';\nimport { contourDensity, geoPath } from 'd3';\nimport { csHeatmap, csIntensity } from '../../utils/helpers/colorScales';\nimport { playOutcomeColor } from '../../utils/visualisations/playSuccess';\nimport {\n COLORING_OPTION_UNDERTHOW_OVERTHROW,\n COLORING_OPTION_PASS_VELOCITY,\n COLORING_OPTION_NONE,\n COLORING_OPTION_MONOCHROME,\n COLORING_OPTION_BY_PLAYER,\n COLORING_OPTION_BY_TARGET,\n COLORING_OPTION_PLAY_SUCCESS,\n SVG_CLASS_NAMES,\n} from './PassingChart.constants';\nimport { FIELD_Y_YARDS_RELATIVEY } from '../../utils/constants/charting';\n\n/**\n * @param {Object} row\n * @param {Boolean} row.success\n * @param {Boolean} row.catchInterception\n * @param {Boolean} row.passUnderthrow\n * @param {Boolean} row.passOverthrow\n * @param {Number} row.passVelocity\n * @param {String} coloringOption //COLORING_OPTIONS.value\n * @return {string}\n */\nexport const applyColour = (\n {\n success,\n catchInterception,\n passUnderthrow,\n passOverthrow,\n passVelocity,\n passTouchdown,\n passerColor,\n targetColor,\n id,\n playOutcome,\n },\n coloringOption,\n visPalette,\n selectedEventId\n) => {\n if (selectedEventId && id === selectedEventId) {\n return visPalette.selectedObject;\n }\n\n if (coloringOption === COLORING_OPTION_UNDERTHOW_OVERTHROW.value) {\n switch (true) {\n case passOverthrow:\n return visPalette.successFail.fail.main;\n case passUnderthrow:\n return visPalette.successFail.fail2.main;\n default:\n return visPalette.successFail.neutral.main;\n }\n } else if (coloringOption === COLORING_OPTION_PASS_VELOCITY.value) {\n const minPassVelocity = 10; // yds per second ~ 20 miles per hour\n const maxPassVelocity = 30; // yds per second ~ 60 miles per hour\n const clampedVelocity = clamp(\n passVelocity,\n minPassVelocity,\n maxPassVelocity\n );\n const relativeVelocity =\n (clampedVelocity - minPassVelocity) / (maxPassVelocity - minPassVelocity);\n return csIntensity(relativeVelocity);\n } else if (coloringOption === COLORING_OPTION_NONE.value) {\n return visPalette.objects.n1.main;\n } else if (coloringOption === COLORING_OPTION_MONOCHROME) {\n return visPalette.objects.neutral.main;\n } else if (coloringOption === COLORING_OPTION_BY_PLAYER.value) {\n return passerColor;\n } else if (coloringOption === COLORING_OPTION_BY_TARGET.value) {\n return targetColor;\n } else if (coloringOption === COLORING_OPTION_PLAY_SUCCESS.value) {\n return playOutcomeColor(playOutcome, visPalette);\n } else {\n // event success (pass complete/incomplete)\n switch (true) {\n case passTouchdown:\n return visPalette.successFail.superSuccess.main;\n case success:\n return visPalette.successFail.success.main;\n case catchInterception:\n return visPalette.successFail.superFail.main;\n default:\n return visPalette.successFail.fail.main;\n }\n }\n};\n\n/** Puts the basic groups in place once only so children can modfiy without being wiped/rebuilt */\nexport const addSVGStructure = (\n svg,\n visPalette,\n marginTransform,\n axesPaddingTransform,\n rotationTransform,\n cropName\n) => {\n // reset svg\n svg.selectAll('*').remove();\n\n // BACKING RECT FOR THE SVG\n svg\n .append('rect')\n .attr('class', SVG_CLASS_NAMES.BACKGROUND_RECT)\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', '100%')\n .attr('height', '100%')\n .attr('fill', visPalette?.background.main);\n\n const inMarginsG = svg\n .append('g')\n .attr('class', SVG_CLASS_NAMES.IN_MARGINS)\n .attr('transform', marginTransform);\n const inPaddingG = inMarginsG\n .append('g')\n .attr('class', SVG_CLASS_NAMES.IN_AXES_PADDING)\n .attr('transform', axesPaddingTransform);\n\n inPaddingG\n .append('g')\n .attr('class', SVG_CLASS_NAMES.UNDERFIELD)\n .attr('clip-path', `url(#${cropName})`)\n .attr('transform', rotationTransform);\n inPaddingG\n .append('g')\n .attr('class', SVG_CLASS_NAMES.FIELD)\n .attr('transform', rotationTransform);\n const onFieldG = inPaddingG\n .append('g')\n .attr('class', SVG_CLASS_NAMES.ONFIELD)\n .attr('transform', rotationTransform);\n\n const dataLayer = onFieldG\n .append('g')\n .attr('class', SVG_CLASS_NAMES.DATA_LAYER)\n .attr('clip-path', `url(#${cropName})`);\n dataLayer.append('g').attr('class', SVG_CLASS_NAMES.CLICKABLE_FIELD);\n dataLayer.append('g').attr('class', SVG_CLASS_NAMES.PLAYER_DOTS);\n};\n\n/** Updates structure for rotation or aspect change */\nexport const updateSVGStructure = (\n svg,\n axesPaddingTransform,\n rotationTransform,\n losTransform\n) => {\n // top level areas ~ find and amend transforms\n svg\n .select(`.${SVG_CLASS_NAMES.IN_AXES_PADDING}`)\n .attr('transform', axesPaddingTransform);\n svg\n .select(`.${SVG_CLASS_NAMES.UNDERFIELD}`)\n .attr('transform', rotationTransform);\n svg\n .select(`.${SVG_CLASS_NAMES.ONFIELD}`)\n .attr('transform', rotationTransform);\n\n // ADD THE FIELD\n svg.select(`.${SVG_CLASS_NAMES.FIELD}`).selectAll('g').remove();\n svg.select(`.${SVG_CLASS_NAMES.FIELD}`).attr('transform', rotationTransform);\n\n svg\n .select(`.${SVG_CLASS_NAMES.CLICKABLE_FIELD}`)\n .attr('transform', losTransform);\n};\n\n/** Draw the heatmap layer */\nexport const renderHeatmap = ({\n svg,\n heatmapArea,\n losAdjust,\n displayYPassRelative,\n data,\n selectedPlays,\n heatmapCropName,\n isDark,\n}) => {\n const { width, height, borderShift } = heatmapArea;\n\n // compute the density data\n const densityData = contourDensity()\n .x(({ lineOfScrimmageEndX }) => lineOfScrimmageEndX + losAdjust)\n .y(({ endY, passDeltaY }) =>\n displayYPassRelative ? passDeltaY + height / 2 : endY\n )\n .size([width, height])\n .bandwidth(20)(data);\n const maxDensity = (maxBy(densityData, 'value') || {}).value;\n\n const heatmapZone = svg.select(`.${SVG_CLASS_NAMES.UNDERFIELD}`).append('g');\n\n const topHeatmap = heatmapZone\n .append('g')\n .attr(\n 'clip-path',\n selectedPlays.current.length > 0 ? `url(#${heatmapCropName})` : null\n );\n\n topHeatmap.lower().attr('transform', `translate(0,${borderShift})`);\n\n topHeatmap\n .selectAll('path')\n .data(densityData)\n .enter()\n .append('path')\n .attr('d', geoPath())\n .attr('opacity', 1)\n .attr('fill', ({ value }) => csHeatmap(value / maxDensity, isDark)); // magma colors\n\n if (selectedPlays.current.length > 0) {\n const bottomHeatmap = heatmapZone.append('g').attr('opacity', 0.4);\n\n bottomHeatmap\n .append('g')\n .append('rect')\n .attr('fill', csHeatmap(0, isDark)) // passing chart bg color\n .attr('x', 0)\n .attr('y', -borderShift)\n .attr('width', width)\n .attr('height', height);\n\n bottomHeatmap.lower().attr('transform', `translate(0,${borderShift})`);\n\n bottomHeatmap\n .selectAll('path')\n .data(densityData)\n .enter()\n .append('path')\n .attr('d', geoPath())\n .attr('fill', ({ value }) => csHeatmap(value / maxDensity, isDark)); // magma colors\n }\n};\n\nexport const drawPassPaths = ({\n eventsG,\n displayYPassRelative,\n data,\n overrides,\n coloringOption,\n visPalette,\n}) => {\n eventsG\n .selectAll('line')\n .data(data, ({ id }) => id)\n .enter()\n .append('line')\n .attr('x1', ({ lineOfScrimmageX }) => lineOfScrimmageX)\n .attr('x2', ({ lineOfScrimmageEndX }) => lineOfScrimmageEndX)\n .attr('y1', ({ y }) =>\n displayYPassRelative\n ? (FIELD_Y_YARDS_RELATIVEY / 2) * overrides.pxPerYard\n : y\n )\n .attr('y2', ({ endY, passDeltaY }) =>\n displayYPassRelative\n ? passDeltaY + (FIELD_Y_YARDS_RELATIVEY / 2) * overrides.pxPerYard\n : endY\n )\n .attr('opacity', 0.6)\n .attr('stroke-width', 1)\n .attr('stroke', (r) => applyColour(r, coloringOption, visPalette));\n\n if (!displayYPassRelative) {\n eventsG\n .selectAll('g')\n .data(data, ({ id }) => id)\n .enter()\n .append('g')\n .attr(\n 'transform',\n (a) =>\n `translate(${a.lineOfScrimmageX},${a.y}) rotate(${a.theta},0,0) scale(0.25,0.25)`\n )\n .append('svg:path')\n .attr('fill', (r) => applyColour(r, coloringOption, visPalette))\n .attr('d', 'M-9 -10 l18 9 l-18 9 l4 -9 z')\n .attr('stroke', 'none');\n }\n};\n\nexport const drawPassDots = ({\n eventsG,\n displayYPassRelative,\n data,\n overrides,\n dotColorOption,\n visPalette,\n radius,\n}) =>\n eventsG\n .selectAll('circle')\n .data(data, ({ id }) => id)\n .enter()\n .append('circle')\n .attr('cx', ({ lineOfScrimmageEndX }) => lineOfScrimmageEndX)\n .attr('cy', ({ passDeltaY, endY }) =>\n displayYPassRelative\n ? passDeltaY + (FIELD_Y_YARDS_RELATIVEY / 2) * overrides.pxPerYard\n : endY\n )\n .attr('r', radius)\n .attr('fill', (r) =>\n r.isOut ? 'transparent' : applyColour(r, dotColorOption, visPalette)\n )\n .attr('stroke', (r) => applyColour(r, dotColorOption, visPalette))\n .attr('stroke-width', 1);\n","import React, { useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { select, pointers } from 'd3';\nimport { useTheme } from 'styled-components';\nimport { isEmpty, max, min } from 'lodash';\nimport { getEnrichedTheme } from '../../utils/visualisations/visPalettes';\nimport { useD3 } from '../../utils/hooks/useD3';\nimport {\n addLoSField,\n addLoSFieldYRelative,\n} from '../../utils/helpers/fieldVariants';\nimport {\n FIELD_BORDER_PADDING,\n FIELD_X_YARDS,\n FIELD_Y_YARDS,\n FIELD_Y_YARDS_RELATIVEY,\n LOS_FIELD_LOS_X,\n COMPETITION_LEVEL,\n ROTATIONS,\n} from '../../utils/constants/charting';\nimport { PassEndsChartSVG } from './PassingChart.styles';\nimport {\n SVG_CLASS_NAMES,\n COLORING_OPTION_PASS_SUCCESS,\n COLORING_OPTION_MONOCHROME,\n} from './PassingChart.constants';\nimport { DEFAULT_FIELD_DRAWING_SETTINGS } from '../../utils/helpers/field.constants';\nimport {\n FIELD_X_YARDS_PASSING_FRAME,\n FIELD_X_YARDS_PASSING_PRE_LOS,\n} from '../../pages/player/PlayerPassing/PlayerPassing.constants';\nimport { getRectDimensions } from '../DragSelect/DragSelect.dataManipulation';\nimport {\n addSVGStructure,\n drawPassDots,\n drawPassPaths,\n renderHeatmap,\n updateSVGStructure,\n} from './PassingChart.drawing';\nimport {\n paddingAndRotation,\n partitionData,\n} from './PassingChart.dataManipulation';\n\nconst PassingChart = ({\n data,\n loading,\n handleSelectedEvent,\n handleDragSelection,\n selectedEventId,\n selectedPlays: selectedPlaysProp,\n displayHeatMap,\n displayPassPaths,\n displayYPassRelative,\n coloringOption,\n competitionLevel,\n orientation,\n fieldLengthOverride,\n marginOverride,\n isInteractive,\n redrawSelection,\n idSuffix,\n}) => {\n /** Basic properties/settings */\n const kbTheme = useTheme();\n const theme = getEnrichedTheme(kbTheme);\n const visPalette = theme?.colours?.visualisations;\n const horizontal = orientation === ROTATIONS.HORIZONTAL;\n const { pxPerYard } = DEFAULT_FIELD_DRAWING_SETTINGS;\n const fieldSizeY = displayYPassRelative\n ? FIELD_Y_YARDS_RELATIVEY * pxPerYard\n : (FIELD_Y_YARDS + FIELD_BORDER_PADDING * 2) * pxPerYard;\n const fieldLengthYds = fieldLengthOverride || {\n X_YARDS: FIELD_X_YARDS_PASSING_FRAME,\n LOS_X: FIELD_X_YARDS_PASSING_PRE_LOS,\n };\n const overrides = {\n ...DEFAULT_FIELD_DRAWING_SETTINGS,\n visPalette,\n orientation,\n horizontal: true,\n competitionLevel,\n Y_BORDERS: 3 + 1 / 3,\n ...fieldLengthYds,\n };\n const LOS_ADJUST = LOS_FIELD_LOS_X * pxPerYard;\n\n /* Get the selected event if there is one */\n const selectedEvent =\n selectedEventId && !isEmpty(data)\n ? data.find((evt) => evt.id === selectedEventId)\n : null;\n\n /**\n * Define the pitch dimensions according to mode and orientation\n * Generate all relative transforms and size info\n */\n const margin = {\n bottom: 8,\n left: 8,\n right: 8,\n top: 8,\n ...marginOverride,\n };\n const cropName = `active-field-area-${idSuffix}`;\n const heatmapCropName = `heatmap-selection-${idSuffix}`;\n\n const fieldSizeX = fieldLengthYds.X_YARDS * pxPerYard;\n const svgFieldContainer = {\n x: horizontal ? fieldSizeX : fieldSizeY,\n y: horizontal ? fieldSizeY : fieldSizeX,\n };\n\n const { axesPadding, fieldRotation } = paddingAndRotation(\n orientation,\n displayYPassRelative,\n fieldSizeX,\n fieldSizeY\n );\n svgFieldContainer.x += axesPadding.left + axesPadding.right;\n svgFieldContainer.y += axesPadding.top + axesPadding.bottom;\n const marginTransform = `translate(${margin.left},${margin.top})`;\n // eslint-disable-next-line max-len\n const rotationTransform = `rotate(${fieldRotation.angle},${fieldRotation.rotationPoint},${fieldRotation.rotationPoint})`;\n const axesPaddingTransform = `translate(${axesPadding.left},${axesPadding.top})`;\n const losTransform = `translate(${LOS_ADJUST},${\n displayYPassRelative ? 0 : FIELD_BORDER_PADDING * pxPerYard\n })`;\n\n const viewBox = `0 0 ${margin.left + svgFieldContainer.x + margin.right} ${\n margin.top + svgFieldContainer.y + margin.bottom\n }`;\n\n const heatmapArea = {\n width: FIELD_X_YARDS * pxPerYard,\n height: displayYPassRelative\n ? FIELD_Y_YARDS_RELATIVEY * pxPerYard\n : (FIELD_BORDER_PADDING * 2 + FIELD_Y_YARDS) * pxPerYard,\n borderShift: displayYPassRelative ? 0 : FIELD_BORDER_PADDING * pxPerYard,\n };\n\n /**\n * DRAG-ABLE SELECT STUFF\n * Feels like all of this should probably be some kind of component that exposes the\n * functions for reset/complete/update Marquee -> next progress\n */\n const marqueeId = 'passing-chart-selection-marquee';\n const interacting = useRef(false);\n const originX = useRef(0);\n const originY = useRef(0);\n const passedX = useRef(0);\n const passedY = useRef(0);\n const savedX = useRef(0);\n const savedY = useRef(0);\n const savedWidth = useRef(0);\n const savedHeight = useRef(0);\n // multi select, selected plays\n const selectedPlays = useRef([]);\n\n const resetMarquee = (svg) => {\n savedWidth.current = 0;\n savedHeight.current = 0;\n savedX.current = 0;\n savedY.current = 0;\n svg\n .select(`#${marqueeId}`)\n .attr('x', savedX.current)\n .attr('y', savedY.current)\n .attr('width', savedWidth.current)\n .attr('height', savedHeight.current);\n };\n\n const updateMarquee = (svg, mouseEvent) => {\n const p = pointers(mouseEvent);\n const [currentX, currentY] = p[0];\n passedX.current = currentX;\n passedY.current = currentY;\n\n if (interacting.current) {\n const { rectX, rectY, rectWidth, rectHeight } = getRectDimensions(\n originX.current,\n originY.current,\n passedX.current,\n passedY.current\n );\n savedWidth.current = rectWidth;\n savedHeight.current = rectHeight;\n savedX.current = rectX;\n savedY.current = rectY;\n svg\n .select(`#${marqueeId}`)\n .attr('fill', theme.colours.interface.main)\n .attr('stroke', theme.colours.interface.main)\n .attr('stroke-dasharray', 'none')\n .attr('x', rectX)\n .attr('y', rectY)\n .attr('width', rectWidth)\n .attr('height', rectHeight);\n } else {\n originX.current = passedX.current;\n originY.current = passedY.current;\n }\n };\n\n const completeMarquee = (svg) => {\n interacting.current = false;\n svg\n .select(`#${marqueeId}`)\n .attr('fill-opacity', 0.5)\n .attr('stroke-dasharray', 3);\n\n const minX = min([originX.current, passedX.current]);\n const maxX = max([originX.current, passedX.current]);\n const minY = min([originY.current, passedY.current]);\n const maxY = max([originY.current, passedY.current]);\n\n /** The coordinates above are relative to the frame (regardless of orientation)\n * i.e. due to the pitch transforms, 0,0 for the drag-effects frame of reference is\n * either x=LoS,y=fieldTopBoundary or x=LoS,y=topOfFrame (no boundary)\n * the coordinates of events in the first mode match (are relative to the same origin)\n * but are transformed in relative-y mode, so the same transform is used in the filter\n *\n * Possible improvement: do the coordinate transform logic first to all data, then all\n * drawing functions (+ this) can use a single coordinate system...\n */\n if (displayYPassRelative) {\n const selectedRelativeYPlays = data.filter((d) => {\n const eventX = d.lineOfScrimmageEndX;\n const eventY = d.passDeltaY + (FIELD_Y_YARDS_RELATIVEY / 2) * pxPerYard;\n return (\n eventX >= minX && eventX <= maxX && eventY >= minY && eventY <= maxY\n );\n });\n selectedPlays.current = selectedRelativeYPlays;\n handleDragSelection(selectedPlays.current);\n } else {\n const pitchYPlays = data.filter((d) => {\n const eventX = d.lineOfScrimmageEndX;\n const eventY = d.endY;\n return (\n eventX >= minX && eventX <= maxX && eventY >= minY && eventY <= maxY\n );\n });\n selectedPlays.current = pitchYPlays;\n handleDragSelection(selectedPlays.current);\n }\n };\n\n /** *******************************\n * RENDER THE CHART\n */\n\n /** Setup the shell */\n const ref = useD3((svg) => {\n // reset svg\n svg.selectAll('*').remove();\n addSVGStructure(\n svg,\n visPalette,\n marginTransform,\n axesPaddingTransform,\n rotationTransform,\n cropName\n );\n }, []);\n\n /** Tweak colors based on palette */\n useEffect(() => {\n const svg = select(ref.current);\n svg\n .select(`.${SVG_CLASS_NAMES.BACKGROUND_RECT}`)\n .attr('fill', visPalette?.background.main);\n\n svg.select(`.${SVG_CLASS_NAMES.FIELD}`).selectAll('g').remove();\n if (displayYPassRelative) {\n svg\n .select(`.${SVG_CLASS_NAMES.FIELD}`)\n .call(addLoSFieldYRelative, overrides);\n } else {\n svg.select(`.${SVG_CLASS_NAMES.FIELD}`).call(addLoSField, overrides);\n }\n }, [theme.isDark]);\n\n /* Update clip paths and field properties */\n useEffect(\n () => {\n const svg = select(ref.current);\n svg.selectAll('defs').remove();\n const svgDefs = svg.append('defs');\n const clippy = svgDefs.append('clipPath').attr('id', cropName);\n const heatmapClip = svgDefs\n .append('clipPath')\n .attr('id', heatmapCropName);\n clippy\n .append('rect')\n .attr('x', 0)\n .attr('y', 0.5)\n .attr('width', fieldSizeX - 1)\n .attr('height', fieldSizeY - 1);\n heatmapClip\n .append('rect')\n .attr('x', savedX.current)\n .attr('y', savedY.current)\n .attr('width', savedWidth.current)\n .attr('height', savedHeight.current)\n .attr(\n 'transform',\n `translate(${LOS_ADJUST},${\n displayYPassRelative ? 0 : FIELD_BORDER_PADDING * pxPerYard - 32\n })`\n );\n\n /* update any positions if relevant */\n updateSVGStructure(\n svg,\n axesPaddingTransform,\n rotationTransform,\n losTransform\n );\n if (displayYPassRelative) {\n svg\n .select(`.${SVG_CLASS_NAMES.FIELD}`)\n .call(addLoSFieldYRelative, overrides);\n } else {\n svg.select(`.${SVG_CLASS_NAMES.FIELD}`).call(addLoSField, overrides);\n }\n },\n /* has to rely on data else it doesn't draw the heatmap crop correctly */\n [fieldLengthOverride, displayYPassRelative, data, orientation]\n );\n\n useEffect(() => {\n if (!isEmpty(data)) {\n const svg = select(ref.current);\n\n /* \n Reset the chart \n TODO: add these groups earlier in tree. Instead of wiping can then make them data responsive (animatable)\n */\n const playerDotsZone = svg.select(`.${SVG_CLASS_NAMES.PLAYER_DOTS}`);\n playerDotsZone.selectAll('g').remove();\n const markerZone = playerDotsZone\n .append('g')\n .attr('transform', losTransform);\n const lineOfScrimmageZoneUnselected = playerDotsZone\n .append('g')\n .attr('transform', losTransform)\n .attr('opacity', displayHeatMap ? 0 : 0.2); // hide or fade\n const lineOfScrimmageZone = playerDotsZone\n .append('g')\n .attr('transform', losTransform);\n\n // wipe any existing heatmap\n svg.select(`.${SVG_CLASS_NAMES.UNDERFIELD}`).selectAll('*').remove();\n if (displayHeatMap) {\n renderHeatmap({\n svg,\n heatmapArea,\n losAdjust: LOS_ADJUST,\n displayYPassRelative,\n data,\n selectedPlays,\n heatmapCropName,\n isDark: theme.isDark,\n });\n }\n /** override dot color in heatmap mode */\n const dotColorOption = displayHeatMap\n ? COLORING_OPTION_MONOCHROME\n : coloringOption;\n\n /** Partition the data if there are selected events */\n const { focusData, backgroundData } = partitionData(\n data,\n selectedPlaysProp,\n selectedEventId,\n displayHeatMap\n );\n\n const passDots = drawPassDots({\n eventsG: lineOfScrimmageZone,\n displayYPassRelative,\n data: focusData,\n overrides,\n dotColorOption,\n visPalette,\n radius: displayHeatMap ? 2 : 3,\n });\n const backgroundPassDots = drawPassDots({\n eventsG: lineOfScrimmageZoneUnselected,\n displayYPassRelative,\n data: backgroundData,\n overrides,\n dotColorOption,\n visPalette,\n radius: displayHeatMap ? 2 : 3,\n });\n /** No dot interaction in heatmap mode */\n if (!displayHeatMap && isInteractive) {\n passDots\n .attr('class', isInteractive ? 'dot' : '')\n .on('click', (_, datum) => {\n handleSelectedEvent(datum.id);\n resetMarquee(svg);\n })\n .on('mouseup', () => {\n if (interacting.current) {\n completeMarquee(svg);\n }\n });\n backgroundPassDots\n .attr('class', isInteractive ? 'dot' : '')\n .on('click', (_, datum) => {\n handleSelectedEvent(datum.id);\n resetMarquee(svg);\n })\n .on('mouseup', () => {\n if (interacting.current) {\n completeMarquee(svg);\n }\n });\n }\n\n if (displayPassPaths && !displayHeatMap) {\n drawPassPaths({\n eventsG: lineOfScrimmageZone,\n displayYPassRelative,\n data: focusData,\n overrides,\n coloringOption,\n visPalette,\n });\n drawPassPaths({\n eventsG: lineOfScrimmageZoneUnselected,\n displayYPassRelative,\n data: backgroundData,\n overrides,\n coloringOption,\n visPalette,\n });\n }\n\n if (selectedEvent) {\n markerZone\n .append('circle')\n .attr('cx', selectedEvent?.lineOfScrimmageEndX)\n .attr(\n 'cy',\n displayYPassRelative\n ? selectedEvent?.passDeltaY +\n (FIELD_Y_YARDS_RELATIVEY / 2) * overrides.pxPerYard\n : selectedEvent?.endY\n )\n .attr('r', 8)\n .attr('fill', 'transparent')\n .attr('stroke', visPalette.selectedObject)\n .attr('stroke-width', 2);\n }\n\n const clickableFieldZone = svg.select(\n `.${SVG_CLASS_NAMES.CLICKABLE_FIELD}`\n );\n clickableFieldZone.selectAll('*').remove();\n // add a rect under the dots you can click to remove selection\n clickableFieldZone.append('rect').attr('id', marqueeId);\n svg\n .select(`#${marqueeId}`)\n .attr('fill-opacity', 0.4)\n .attr('fill', 'transparent')\n .attr('stroke', visPalette.contrast)\n .attr('stroke-dasharray', '5 6')\n .attr('stroke-width', 2)\n .attr('x', redrawSelection ? savedX.current : 0)\n .attr('y', redrawSelection ? savedY.current : 0)\n .attr('width', redrawSelection ? savedWidth.current : 0)\n .attr('height', redrawSelection ? savedHeight.current : 0);\n\n clickableFieldZone\n .append('rect')\n .attr('x', -LOS_FIELD_LOS_X * pxPerYard)\n .attr('y', displayYPassRelative ? 0 : -FIELD_BORDER_PADDING * pxPerYard)\n .attr('width', FIELD_X_YARDS * pxPerYard)\n .attr(\n 'height',\n displayYPassRelative\n ? FIELD_Y_YARDS_RELATIVEY * pxPerYard\n : (FIELD_BORDER_PADDING * 2 + FIELD_Y_YARDS) * pxPerYard\n )\n .attr('fill', 'transparent')\n .attr('stroke', 'none')\n .attr('class', isInteractive ? 'drawable' : '')\n .on('click', () => {\n if (isInteractive && !interacting.current) {\n handleSelectedEvent(null);\n }\n })\n .on('mousedown', () => {\n // allow drag if chart is interactive\n if (isInteractive) {\n interacting.current = true;\n handleSelectedEvent(null);\n resetMarquee(svg);\n }\n })\n .on('mousemove', (mouseEvent) => {\n updateMarquee(svg, mouseEvent);\n })\n .on('mouseup', (e) => {\n e.stopPropagation();\n completeMarquee(svg);\n });\n }\n }, [\n data,\n displayHeatMap,\n displayPassPaths,\n displayYPassRelative,\n coloringOption,\n loading,\n orientation,\n theme.isDark,\n selectedEventId,\n ]);\n\n useEffect(() => {\n selectedPlays.current = selectedPlaysProp;\n }, [selectedPlaysProp]);\n\n return (\n \n \n \n \n);\n\nGoTo.propTypes = {\n // url of the redirect destination\n href: PropTypes.string,\n // name of the destination page\n linkName: PropTypes.string,\n // icon size options: regular, small, tiny\n iconSize: PropTypes.string,\n // is the button disabled?\n disabled: PropTypes.bool,\n // emulate the ghost colour style\n ghost: PropTypes.bool,\n};\n\nGoTo.defaultProps = {\n href: '/',\n linkName: 'New Page',\n iconSize: 'small',\n disabled: false,\n ghost: false,\n};\n\nexport default GoTo;\n","import { styled } from 'styled-components';\n\nexport const SummaryTile = styled.div`\n display: flex;\n flex-direction: column;\n background-color: ${({ theme }) => theme.colours.canvas.tertiary.main};\n height: ${({ $height }) => $height || '100%'};\n overflow: hidden;\n position: relative;\n margin: ${({ $margin }) => $margin || '0'};\n`;\nSummaryTile.displayName = 'SummaryTile';\n\nexport const SummaryTileBody = styled.div`\n position: relative;\n background-color: ${({ theme }) => theme.colours.canvas.tertiary.main};\n padding: ${({ $padding }) =>\n // this is absolute madness it doesn't work, too much time wasted\n // returns 'undefinedrem' FYI: have tried every other combination\n // using a
instead\n // console.log('Padding prop:', $padding);\n `${$padding}rem` || '0'};\n margin: ${({ $margin }) => $margin || '1rem'};\n min-height: ${({ $minHeight }) => $minHeight || '25rem'};\n max-height: ${({ $maxHeight }) => $maxHeight || 'initial'};\n flex-grow: 1;\n transition: all 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);\n overflow-y: ${({ $overflowY }) => $overflowY || 'auto'};\n overflow-x: hidden;\n z-index: 2;\n`;\nSummaryTileBody.displayName = 'SummaryTileBody';\n\n// Summary Tile Header and Footers support the following layout options:\n// 1. \n// 2. \n// 3. \n// in all instances the last should align the content to the right\n// elements (buttons or drops etc.) will be spaced and aligned\nexport const SummaryTileHeader = styled.div`\n display: flex;\n padding: ${({ $padding }) => $padding || '0 1rem'};\n height: ${({ $height }) => $height || '3.25rem'};\n border-bottom: ${({ theme, $borderWidth }) =>\n `${$borderWidth || 1}px solid ${theme.colours.canvas.secondary.main}`};\n ${({ theme }) => theme.typography.headingRegular}\n align-items: center;\n z-index: 3;\n\n > div {\n flex: 1;\n line-height: 1;\n display: inline-flex;\n gap: 0.5rem;\n }\n\n > div:last-child {\n justify-content: end;\n\n button {\n z-index: 10;\n }\n }\n\n // extra spacing if element placed next to title\n h3 + div {\n margin-left: 0.5rem;\n }\n`;\nSummaryTileHeader.displayName = 'SummaryTileHeader';\n\nexport const SummaryTileHeaderSub = styled.span`\n color: ${({ theme }) => theme.colours.graphics.primary.main};\n margin-left: 0.1875rem;\n`;\n\n// element spacing\nconst EL_SPACING = '0.7rem';\n\nexport const SummaryTileFooter = styled.div`\n display: flex;\n padding: 0 1rem;\n justify-content: flex-end;\n height: 36px;\n position: absolute;\n bottom: 0;\n width: 100%;\n align-items: center;\n z-index: 3;\n\n button {\n height: 22px;\n }\n\n // temp for inline svg\n svg {\n fill: ${({ theme }) => theme.colours.graphics.primary.main};\n }\n // end temp\n\n .ui {\n &.small.text.loader {\n background-color: ${({ theme }) => theme.colours.canvas.tertiary.main};\n padding: 0.35rem 0 0 1.75rem;\n line-height: 1.7;\n width: 1rem;\n height: 1rem;\n z-index: 50;\n font-size: 0.78125rem;\n\n &:before,\n &:after {\n left: 0.875rem;\n top: 0.5rem;\n }\n }\n }\n`;\nSummaryTileFooter.displayName = 'SummaryTileFooter';\n\n// layout containers\nexport const SummaryTileCol = styled.div`\n flex: 1;\n color: ${({ theme }) => theme.colours.graphics.primary.main};\n text-align: left;\n\n > * {\n margin-right: ${EL_SPACING};\n margin-left: 0;\n vertical-align: middle;\n }\n\n // furthest right col is right aligned\n &:last-child {\n text-align: right;\n\n > * {\n margin-left: ${EL_SPACING};\n margin-right: ${({ $marginRight }) => $marginRight};\n flex-flow: row-reverse;\n }\n }\n`;\nSummaryTileCol.displayName = 'SummaryTileCol';\n\nexport const SummaryError = styled.span`\n position: absolute;\n color: ${({ theme }) => theme.colours.messaging.error.main};\n background-color: ${({ theme }) => theme.colours.canvas.tertiary.main};\n line-height: 1.5;\n\n svg {\n fill: ${({ theme }) => theme.colours.messaging.error.main} !important;\n float: left;\n margin-right: 0.3125rem;\n margin-top: 0.125rem;\n }\n`;\nSummaryError.displayName = 'Summary Error';\n\nexport const TileDimmer = styled.div`\n position: absolute;\n top: 0;\n width: calc(100% - 11px);\n height: 100%;\n left: 5px;\n background-color: ${({ theme }) =>\n theme.applyOpacity(\n theme.colours.canvas.secondary.weak,\n 'overlay'\n )} !important;\n opacity: ${({ $fadeIn }) => ($fadeIn ? 0 : 1)};\n transition: opacity 0.4s ease-in;\n align-items: center;\n justify-content: center;\n display: flex;\n z-index: 1;\n\n div {\n position: absolute;\n top: calc(50% - 35px);\n left: calc(50% - 35px);\n }\n`;\nTileDimmer.displayName = 'Tile Dimmer';\n","/* eslint-disable prettier/prettier */\nexport const defaultContextFilters = {\n downs: true,\n noDowns: true,\n yardsToGoMin: true,\n yardsToGoMax: true,\n fieldPositionMin: true,\n fieldPositionMax: true,\n quarters: true,\n clockMin: true,\n clockMax: true,\n yardsGainedMin: true,\n yardsGainedMax: true,\n playTypes: true,\n passAirYardsMin: true,\n passAirYardsMax: true,\n qbDropDepthMin: true,\n qbDropDepthMax: true,\n qbTimeToThrowMin: true,\n qbTimeToThrowMax: true,\n qbPassLocation: true,\n personnel: true,\n formation: true,\n gameIds: true,\n};\n\nexport const getContextQueryVariables = (overrides) => {\n const contextFilters = {\n ...defaultContextFilters,\n ...overrides,\n };\n\n return `\n ${contextFilters.downs ? '$downs: [Int!]' : ''}\n ${contextFilters.noDowns ? '$noDowns: Boolean' : ''}\n ${contextFilters.yardsToGoMin ? '$yardsToGoMin: Float' : ''}\n ${contextFilters.yardsToGoMax ? '$yardsToGoMax: Float' : ''}\n ${contextFilters.fieldPositionMin ? '$fieldPositionMin: Float' : ''}\n ${contextFilters.fieldPositionMax ? '$fieldPositionMax: Float' : ''}\n ${contextFilters.quarters ? '$quarters: [Int!]' : ''}\n ${contextFilters.clockMin ? '$clockMin: Int' : ''}\n ${contextFilters.clockMax ? '$clockMax: Int' : ''}\n ${contextFilters.yardsGainedMin ? '$yardsGainedMin: Float' : ''}\n ${contextFilters.yardsGainedMax ? '$yardsGainedMax: Float' : ''}\n ${contextFilters.playTypes ? '$playTypes: [PlayType!]' : ''}\n ${contextFilters.passAirYardsMin ? '$passAirYardsMin: Float' : ''}\n ${contextFilters.passAirYardsMax ? '$passAirYardsMax: Float' : ''}\n ${contextFilters.qbDropDepthMin ? '$qbDropDepthMin: Float' : ''}\n ${contextFilters.qbDropDepthMax ? '$qbDropDepthMax: Float' : ''}\n ${contextFilters.qbTimeToThrowMin ? '$qbTimeToThrowMin: Float' : ''}\n ${contextFilters.qbTimeToThrowMax ? '$qbTimeToThrowMax: Float' : ''}\n ${contextFilters.qbPassLocation ? '$qbPassLocation: [PocketRelativeLocation!]' : ''}\n ${contextFilters.personnel ? '$personnel: PersonnelFilter' : ''}\n ${contextFilters.formation ? '$formation: FormationFilter' : ''}\n ${contextFilters.gameIds ? '$gameIds: [Int!]' : ''}\n `;\n};\n\nexport const getContextFilterClientExports = (overrides) => {\n const contextFilters = {\n ...defaultContextFilters,\n ...overrides,\n };\n\n return `\n ${contextFilters.downs ? 'contextFilterDowns @client @export(as: \"downs\")' : ''}\n ${contextFilters.noDowns ? 'contextFilterNoDowns @client @export(as: \"noDowns\")' : ''}\n ${contextFilters.yardsToGoMin ? 'contextFilterYardsToGoMin @client @export(as: \"yardsToGoMin\")' : ''}\n ${contextFilters.yardsToGoMax ? 'contextFilterYardsToGoMax @client @export(as: \"yardsToGoMax\")' : ''}\n ${contextFilters.fieldPositionMin ? 'contextFilterFieldPositionMin @client @export(as: \"fieldPositionMin\")' : ''}\n ${contextFilters.fieldPositionMax ? 'contextFilterFieldPositionMax @client @export(as: \"fieldPositionMax\")' : ''}\n ${contextFilters.quarters ? 'contextFilterQuarter @client @export(as: \"quarters\")' : ''}\n ${contextFilters.clockMin ? 'contextFilterClockMin @client @export(as: \"clockMin\")' : ''}\n ${contextFilters.clockMax ? 'contextFilterClockMax @client @export(as: \"clockMax\")' : ''}\n ${contextFilters.yardsGainedMin ? 'contextFilterYardsGainedMin @client @export(as: \"yardsGainedMin\")' : ''}\n ${contextFilters.yardsGainedMax ? 'contextFilterYardsGainedMax @client @export(as: \"yardsGainedMax\")' : ''}\n ${contextFilters.playTypes ? 'contextFilterPlayType @client @export(as: \"playTypes\")' : ''}\n ${contextFilters.passAirYardsMin ? 'contextFilterPassAirYardsMin @client @export(as: \"passAirYardsMin\")' : ''}\n ${contextFilters.passAirYardsMax ? 'contextFilterPassAirYardsMax @client @export(as: \"passAirYardsMax\")' : ''}\n ${contextFilters.qbDropDepthMin ? 'contextFilterQBDropDepthMin @client @export(as: \"qbDropDepthMin\")' : ''}\n ${contextFilters.qbDropDepthMax ? 'contextFilterQBDropDepthMax @client @export(as: \"qbDropDepthMax\")' : ''}\n ${contextFilters.qbTimeToThrowMin ? 'contextFilterQBTimeToThrowMin @client @export(as: \"qbTimeToThrowMin\")' : ''}\n ${contextFilters.qbTimeToThrowMax ? 'contextFilterQBTimeToThrowMax @client @export(as: \"qbTimeToThrowMax\")' : ''}\n ${contextFilters.qbPassLocation ? 'contextFilterQBPocketLocation @client @export(as: \"qbPassLocation\")' : ''}\n ${contextFilters.personnel ? 'contextFilterPersonnel @client @export(as: \"personnel\")' : ''}\n ${contextFilters.formation ? 'contextFilterFormations @client @export(as: \"formation\")' : ''}\n ${contextFilters.gameIds ? 'contextFilterGameIds @client @export(as: \"gameIds\")' : '' }\n `;\n};\n\nexport const getContextFiltersQueryArguments = (overrides) => {\n const contextFilters = {\n ...defaultContextFilters,\n ...overrides,\n };\n\n return `\n ${contextFilters.downs ? 'downs: $downs' : ''}\n ${contextFilters.noDowns ? 'noDowns: $noDowns' : ''}\n ${contextFilters.yardsToGoMin ? 'yardsToGoMin: $yardsToGoMin' : ''}\n ${contextFilters.yardsToGoMax ? 'yardsToGoMax: $yardsToGoMax' : ''}\n ${contextFilters.fieldPositionMin ? 'fieldPositionMin: $fieldPositionMin' : ''}\n ${contextFilters.fieldPositionMax ? 'fieldPositionMax: $fieldPositionMax' : ''}\n ${contextFilters.quarters ? 'quarters: $quarters' : ''}\n ${contextFilters.clockMin ? 'clockMin: $clockMin' : ''}\n ${contextFilters.clockMax ? 'clockMax: $clockMax' : ''}\n ${contextFilters.yardsGainedMin ? 'yardsGainedMin: $yardsGainedMin' : ''}\n ${contextFilters.yardsGainedMax ? 'yardsGainedMax: $yardsGainedMax' : ''}\n ${contextFilters.playTypes ? 'playTypes: $playTypes' : ''}\n ${contextFilters.passAirYardsMin ? 'passAirYardsMin: $passAirYardsMin' : ''}\n ${contextFilters.passAirYardsMax ? 'passAirYardsMax: $passAirYardsMax' : ''}\n ${contextFilters.qbDropDepthMin ? 'qbDropDepthMin: $qbDropDepthMin' : ''}\n ${contextFilters.qbDropDepthMax ? 'qbDropDepthMax: $qbDropDepthMax' : ''}\n ${contextFilters.qbTimeToThrowMin ? 'qbTimeToThrowMin: $qbTimeToThrowMin' : ''}\n ${contextFilters.qbTimeToThrowMax ? 'qbTimeToThrowMax: $qbTimeToThrowMax' : ''}\n ${contextFilters.qbPassLocation ? 'qbPassLocation: $qbPassLocation' : ''}\n ${contextFilters.personnel ? 'personnel: $personnel' : ''}\n ${contextFilters.formation ? 'formation: $formation' : ''}\n ${contextFilters.gameIds ? 'gameIds: $gameIds' : ''}\n `;\n};\n","import { gql } from '@apollo/client';\nimport {\n getContextQueryVariables,\n getContextFilterClientExports,\n getContextFiltersQueryArguments,\n} from '../../../utils/helpers/contextFilters';\n\nexport const GET_PASS_EVENTS = gql`\n query GetPassEvents(\n $teamId: Int!\n $competitionId: Int!\n $seasonId: Int!\n $playerId: Int!\n ${getContextQueryVariables()}\n ) {\n selectedCompetitionId @client @export(as: \"competitionId\")\n selectedPlayerId @client @export(as: \"playerId\")\n selectedSeasonId @client @export(as: \"seasonId\")\n selectedTeamId @client @export(as: \"teamId\")\n ${getContextFilterClientExports()}\n\n passEvents(\n first: 1000\n eventFilters: { playerIds: [$playerId] }\n playFilters: {\n competitionId: $competitionId\n seasonId: $seasonId\n teamIds: [$teamId]\n ${getContextFiltersQueryArguments()}\n }\n ) {\n totalCount\n edges {\n node {\n id\n team {\n name\n }\n player {\n id\n name\n teamPosition {\n code\n }\n jerseyNumber\n }\n receiverPlayer {\n id\n name\n teamPosition {\n generalPosition\n }\n jerseyNumber\n }\n x\n y\n endX\n endY\n duration\n success\n passPlacementX\n passPlacementY\n points\n passAirYards\n receiverAlignmentPosition\n types\n play {\n yardLine\n success\n touchdownWon\n yardsNet\n turnoverType\n downNegated\n id\n name\n drive {\n id\n name\n }\n explosive\n }\n game {\n id\n name\n }\n passOutcome {\n oppositionCatchTypes\n oppositionCatchSuccess\n }\n passUnderthrow\n passOverthrow\n passTouchdown\n passOutOfBounds\n passYardsGained\n yardsAfterCatch\n passThrowaway\n }\n }\n }\n }\n`;\n","import { gql } from '@apollo/client';\nimport {\n getContextQueryVariables,\n getContextFilterClientExports,\n getContextFiltersQueryArguments,\n} from '../../../utils/helpers/contextFilters';\n\nexport const GET_CATCH_EVENTS = gql`\n query GetCatchEvents(\n $teamId: Int!\n $competitionId: Int!\n $seasonId: Int!\n $playerId: Int!\n ${getContextQueryVariables()}\n ) {\n selectedCompetitionId @client @export(as: \"competitionId\")\n selectedPlayerId @client @export(as: \"playerId\")\n selectedSeasonId @client @export(as: \"seasonId\")\n selectedTeamId @client @export(as: \"teamId\")\n ${getContextFilterClientExports()}\n\n passEvents(\n first: 1000\n eventFilters: { receiverPlayerIds: [$playerId] }\n playFilters: {\n competitionId: $competitionId\n seasonId: $seasonId\n teamIds: [$teamId]\n ${getContextFiltersQueryArguments()}\n }\n ) {\n totalCount\n edges {\n node {\n id\n team {\n name\n }\n player {\n id\n name\n teamPosition {\n code\n }\n jerseyNumber\n }\n receiverPlayer {\n id\n name\n teamPosition {\n generalPosition\n }\n jerseyNumber\n }\n x\n y\n endX\n endY\n duration\n success\n passPlacementX\n passPlacementY\n points\n passAirYards\n receiverAlignmentPosition\n types\n play {\n yardLine\n success\n touchdownWon\n yardsNet\n turnoverType\n downNegated\n id\n name\n drive {\n id\n name\n }\n explosive\n }\n game {\n id\n name\n }\n passOutcome {\n oppositionCatchTypes\n oppositionCatchSuccess\n }\n passUnderthrow\n passOverthrow\n passTouchdown\n passOutOfBounds\n passYardsGained\n yardsAfterCatch\n passThrowaway\n }\n }\n }\n }\n`;\n","import {\n concat,\n drop,\n find,\n reverse,\n sortBy,\n sumBy,\n take,\n uniqBy,\n} from 'lodash';\nimport PropTypes from 'prop-types';\nimport {\n API_EVENT_TYPE_DEFENDER_TOUCHED,\n API_PASS_PLAY_TURNOVER_TYPES,\n} from '../../../utils/constants/api';\nimport { getPlayOutcome } from '../../../utils/visualisations/playSuccess';\nimport {\n COLORING_OPTION_BY_PLAYER,\n COLORING_OPTION_BY_TARGET,\n} from '../../../visualisations/PassingChart/PassingChart.constants';\nimport {\n PASS_OUTCOME_TYPES,\n TARGET_ANY_ALIGNMENT,\n} from './PlayerPassing.constants';\n\nconst INTERCEPTION_TYPE = 'INTERCEPTION';\nconst PASSERS_TO_COLOR = 4;\nconst TARGETS_TO_COLOR = 7; // This + 1 for \"Other\" (8) cannot be more than the colours in the object palette\n\nconst toChartSpace = (row, pxPerYard) => ({\n ...row,\n // TODO: probably want to get this from the DB eventually.\n distance: Math.hypot(row.endX - row.x, row.endY - row.y),\n yardsGained: row.passYardsGained || 0,\n isOut: row.passOutOfBounds,\n passVelocity:\n row.duration && row.duration > 0\n ? Math.hypot(row.endX - row.x, row.endY - row.y) / row.duration\n : 0,\n endX: row.endX * pxPerYard,\n endY: row.endY * pxPerYard,\n lineOfScrimmage: row.play.yardLine * pxPerYard,\n lineOfScrimmageEndX: (row.endX - row.play.yardLine) * pxPerYard,\n lineOfScrimmageEndY: (row.endY - row.play.yardLine) * pxPerYard,\n lineOfScrimmageX: (row.x - row.play.yardLine) * pxPerYard,\n lineOfScrimmageY: (row.y - row.play.yardLine) * pxPerYard,\n passDeltaX: (row.endX - row.x) * pxPerYard,\n passDeltaY: (row.endY - row.y) * pxPerYard,\n x: row.x * pxPerYard,\n y: row.y * pxPerYard,\n theta: (Math.atan2(row.endY - row.y, row.endX - row.x) * 180) / Math.PI,\n catchInterception:\n row.passOutcome?.oppositionCatchTypes?.includes(INTERCEPTION_TYPE) &&\n row.passOutcome?.oppositionCatchSuccess === true,\n playExplosive: row?.play?.explosive,\n playTurnover:\n row.play.turnoverType &&\n API_PASS_PLAY_TURNOVER_TYPES.includes(row.play.turnoverType),\n defenderTouched: row.types.includes(API_EVENT_TYPE_DEFENDER_TOUCHED),\n playOutcome: getPlayOutcome(row.play),\n});\n\nconst sumPasses = (total, { passes }) => total + passes;\n\nconst OTHER_PASSER = {\n playerId: -1,\n playerName: 'Not Identified',\n passes: 0,\n};\n\nconst PASSER_SHAPE = PropTypes.shape({\n playerId: PropTypes.number,\n playerName: PropTypes.string,\n passes: PropTypes.number,\n});\n\nconst getPassers = function (formattedData) {\n const passesWithPassers = formattedData.filter(\n (f) => f.player && f.player.id\n );\n const unidentifiedPassCount = formattedData.length - passesWithPassers.length;\n const passers = uniqBy(passesWithPassers, (m) => m.player.id);\n const passerCounts = passers.map((m) => {\n const tot = passesWithPassers.filter(\n (p) => p.player.id === m.player.id\n ).length;\n const passerObj = {\n playerId: parseInt(m.player.id, 10),\n playerName: m.player.name,\n passes: tot,\n };\n return passerObj;\n });\n let rankedPassers = reverse(sortBy(passerCounts, 'passes'));\n if (unidentifiedPassCount > 0) {\n const otherPasserObj = { ...OTHER_PASSER, passes: unidentifiedPassCount };\n rankedPassers = concat(rankedPassers, [otherPasserObj]); // add other last to put at bottom of list\n }\n return rankedPassers;\n};\n\nconst colorPassers = function (rankedPassers, visPalette) {\n const realPasses = rankedPassers.filter(\n (f) => f.playerId !== OTHER_PASSER.playerId\n );\n const topX = take(realPasses, PASSERS_TO_COLOR);\n const rankedOtherPasser = find(\n rankedPassers,\n (m) => m.playerId === OTHER_PASSER.playerId\n );\n if (realPasses.length > PASSERS_TO_COLOR || rankedOtherPasser) {\n // add an \"other\" object for the rest\n const others = drop(realPasses, PASSERS_TO_COLOR);\n const otherPasserObj = rankedOtherPasser || OTHER_PASSER;\n const coloredOther = {\n ...otherPasserObj,\n playerName: 'Other',\n passes: otherPasserObj.passes + others.reduce(sumPasses, 0),\n };\n topX.push(coloredOther);\n }\n const rankedTopPassers = topX.map((m, i) => {\n const val = { ...m, rank: i, color: visPalette.objects[`n${i + 1}`].main };\n return val;\n });\n return rankedTopPassers;\n};\n\nconst addPasserColour = function (chartData, passers) {\n const coloredData = chartData.map((m) => {\n const matchingPassers = passers.filter(\n (p) => p.playerId === parseInt(m?.player?.id, 10)\n );\n const passerColor =\n matchingPassers?.length > 0\n ? matchingPassers[0].color\n : passers[passers.length - 1].color;\n const coloredDatum = { ...m, passerColor };\n return coloredDatum;\n });\n return coloredData;\n};\n\nconst getTargets = function (formattedData) {\n const passesWithTargets = formattedData.filter(\n (f) => f.receiverPlayer && f.receiverPlayer.id\n );\n const unidentifiedPassCount = formattedData.length - passesWithTargets.length;\n const targets = uniqBy(passesWithTargets, (m) => m.receiverPlayer.id);\n const targetCounts = targets.map((m) => {\n const tot = passesWithTargets.filter(\n (p) => p.receiverPlayer.id === m.receiverPlayer.id\n ).length;\n const passerObj = {\n playerId: parseInt(m.receiverPlayer.id, 10),\n playerName: m.receiverPlayer.name,\n passes: tot,\n };\n return passerObj;\n });\n let rankedTargets = reverse(sortBy(targetCounts, 'passes'));\n if (unidentifiedPassCount > 0) {\n const otherPasserObj = { ...OTHER_PASSER, passes: unidentifiedPassCount };\n rankedTargets = concat(rankedTargets, [otherPasserObj]); // add other last to put at bottom of list\n }\n return rankedTargets;\n};\n\nconst colorTargets = function (rankedTargets, visPalette) {\n const realPasses = rankedTargets.filter(\n (f) => f.playerId !== OTHER_PASSER.playerId\n );\n const topX = take(rankedTargets, TARGETS_TO_COLOR);\n const rankedOtherTarget = find(\n rankedTargets,\n (m) => m.playerId === OTHER_PASSER.playerId\n );\n if (rankedTargets.length > TARGETS_TO_COLOR || rankedOtherTarget > 0) {\n // add an \"other\" object for the rest\n const others = drop(realPasses, TARGETS_TO_COLOR);\n const otherPasserObj = rankedOtherTarget || OTHER_PASSER;\n const coloredOther = {\n ...otherPasserObj,\n playerName: 'Other',\n passes: otherPasserObj.passes + others.reduce(sumPasses, 0),\n };\n topX.push(coloredOther);\n }\n const rankedTopTargets = topX.map((m, i) => {\n const val = { ...m, rank: i, color: visPalette.objects[`n${i + 1}`].main };\n return val;\n });\n return rankedTopTargets;\n};\n\nconst addTargetColour = function (chartData, passers) {\n const coloredData = chartData.map((m) => {\n const matchingPassers = passers.filter(\n (p) => p.playerId === parseInt(m?.receiverPlayer?.id, 10)\n );\n const targetColor =\n matchingPassers?.length > 0\n ? matchingPassers[0].color\n : passers[passers.length - 1].color;\n const coloredDatum = { ...m, targetColor };\n return coloredDatum;\n });\n return coloredData;\n};\n\n// value is int because react complains about nulls in dropdowns\nconst DEFAULT_PLAYER_SELECTION = { label: 'Any', value: 0 };\n\n// filter targets/receivers based on player ids\nconst getTargetsFilter = (evt, playerIds) => {\n if (!playerIds || playerIds.length === 0) {\n return false;\n }\n return (\n playerIds.includes(evt?.receiverPlayer?.id) ||\n (playerIds.includes(OTHER_PASSER.playerId) && !evt?.receiverPlayer)\n );\n};\n\n// filter passers based on player ids\nconst getPassersFilter = (evt, playerIds) => {\n if (!playerIds || playerIds.length === 0) {\n return false;\n }\n return (\n playerIds.includes(evt?.player?.id) ||\n (playerIds.includes(OTHER_PASSER.playerId) && !evt?.player)\n );\n};\n\n// filter games based on pass outcomes\nconst getPassOutcomeFilter = (evt, passOutcomeKey) => {\n const passOutcome = PASS_OUTCOME_TYPES[passOutcomeKey];\n if (!passOutcome) {\n return true;\n }\n return passOutcome.filter(evt);\n};\n\n// filter based on target alignment position\nconst getTargetAlignmentFilter = (evt, targetAlignment) => {\n if (\n targetAlignment === TARGET_ANY_ALIGNMENT ||\n targetAlignment === evt?.receiverAlignmentPosition\n ) {\n return true;\n }\n return false;\n};\n\n// get total count of checked items\nconst getCountTotal = (data) =>\n sumBy(\n data.filter((e) => e.checked),\n 'value'\n );\n\n/* When coloring based on a player, add color value to data */\nexport const addColorToPlayer = (\n passData,\n coloringOption,\n passers,\n targets,\n visPalette\n) => {\n if (coloringOption === COLORING_OPTION_BY_PLAYER.value) {\n const coloredPlayers = colorPassers(passers, visPalette);\n const chartData = addPasserColour(passData, coloredPlayers);\n return chartData;\n }\n if (coloringOption === COLORING_OPTION_BY_TARGET.value) {\n const coloredPlayers = colorTargets(targets, visPalette);\n const chartData = addTargetColour(passData, coloredPlayers);\n return chartData;\n }\n return passData;\n};\n\nexport {\n toChartSpace,\n getPassers,\n colorPassers,\n addPasserColour,\n getTargets,\n getPassOutcomeFilter,\n getTargetAlignmentFilter,\n getTargetsFilter,\n getPassersFilter,\n getCountTotal,\n colorTargets,\n addTargetColour,\n PASSER_SHAPE,\n DEFAULT_PLAYER_SELECTION,\n};\n","import qs from 'query-string';\n\nconst setQueryStringWithoutPageReload = (qsValue) => {\n const newUrl = `${window.location.protocol}//${window.location.host}${window.location.pathname}${qsValue}`;\n window.history.pushState({ path: newUrl }, '', newUrl);\n};\n\nexport const getQueryStringValue = (\n key,\n queryString = window.location.search\n) => {\n const values = qs.parse(queryString);\n return values[key];\n};\n\nexport const setQueryStringValue = (\n key,\n value,\n queryString = window.location.search\n) => {\n const values = qs.parse(queryString);\n const newQsValue = qs.stringify({\n ...values,\n [key]: value,\n });\n setQueryStringWithoutPageReload(`?${newQsValue}`);\n};\n","// checks whether a given value is numeric (i.e '35.2' => true)\nexport const isNumericString = (value) => {\n // number are always considered numeric\n if (typeof value === 'number') {\n return true;\n }\n\n // if it's not a string, it can't be numeric\n if (typeof value !== 'string') {\n return false;\n }\n\n // the second condition covers empty strings and white space (i.e '' and ' ')\n return !Number.isNaN(Number(value)) && !Number.isNaN(parseFloat(value));\n};\n\n// make filenames safe for sensitive OSs\n// removing periods and apostrophes\nexport const escapeDownloadString = (str) =>\n str ? str.replace(/\\.|'|\"/g, '') : '';\n\nexport const formatPackageLabel = (value) =>\n value.replace('P', '').replaceAll('_', '-');\n","import { useState, useCallback } from 'react';\nimport { getQueryStringValue, setQueryStringValue } from '../queryString';\nimport { isNumericString } from '../helpers/strings';\n\nfunction useQueryString(key, initialValue) {\n const [value, setValue] = useState(getQueryStringValue(key) || initialValue);\n const onSetValue = useCallback(\n (newValue) => {\n setValue(newValue);\n setQueryStringValue(key, newValue);\n },\n [key]\n );\n\n const parsedValue =\n value === 'false' || value === 'true' || isNumericString(value)\n ? JSON.parse(value)\n : value;\n\n return [parsedValue, onSetValue];\n}\n\nexport default useQueryString;\n","import { styled } from 'styled-components';\n\nexport const OverviewTileMessage = styled.div`\n padding: 1.25rem;\n color: ${({ theme }) => theme.colours.ink.primary.main};\n`;\n\nexport const TileContentVerticallyCentered = styled.div`\n height: 100%;\n\n .chartWrapper {\n svg {\n margin: 0;\n position: absolute;\n top: 50%;\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n width: 100%;\n }\n }\n`;\nTileContentVerticallyCentered.displayName = 'TileContentVerticallyCentered';\n\nexport const HalfSizeIcon = styled.span`\n svg {\n transform: scale(0.6);\n }\n`;\nHalfSizeIcon.displayName = 'HalfSizeIcon';\n\nexport const PlayerTacklingTileContainer = styled.div`\n height: 100%;\n\n .chartWrapper {\n min-height: auto;\n .show {\n display: block;\n }\n .hide {\n display: none;\n }\n svg {\n max-width: ${({ $maxWidth }) => $maxWidth || '550px'};\n margin: 0 auto;\n margin-bottom: ${({ $marginBottom }) => $marginBottom || '0'};\n }\n .dist {\n display: none;\n\n &.show {\n display: block;\n }\n\n svg {\n max-width: initial;\n max-height: 640px;\n margin-bottom: 0;\n }\n }\n }\n`;\nPlayerTacklingTileContainer.displayName = 'PlayerTacklingTileContainer';\n\nexport const PlayerSnapTileContainer = styled.div`\n height: 100%;\n\n svg {\n max-width: 570px;\n margin: 0 auto;\n }\n`;\nPlayerSnapTileContainer.displayName = 'PlayerSnapTileContainer';\n\nexport const PlayerPassEndsTileContainer = styled.div`\n height: 100%;\n\n .chartWrapper {\n svg {\n max-width: ${({ $maxWidth }) => $maxWidth || '570px'};\n margin: 0 auto;\n }\n }\n`;\nPlayerPassEndsTileContainer.displayName = 'PlayerPassEndsTileContainer';\n\nexport const PlayerHavocTileContainer = styled.div`\n .chartWrapper {\n // havoc chart\n svg:first-child {\n margin: 0 auto;\n }\n // chart key\n svg {\n margin: 0 25px;\n }\n }\n`;\nPlayerHavocTileContainer.displayName = 'PlayerHavocTileContainer';\n\nexport const RouteTreeTileWrapper = styled.div`\n svg {\n max-height: 535px;\n padding: 1rem 7%;\n }\n\n div + div {\n svg {\n max-height: 60px;\n padding: 0 7%;\n }\n }\n`;\nRouteTreeTileWrapper.displayName = 'RouteTreeTileWrapper';\n\nexport const PlayerComparisonTileWrapper = styled.div`\n a {\n color: ${({ theme }) => theme.colours.ink.primary.main};\n text-decoration: underline;\n }\n\n a:hover {\n color: ${({ theme }) => theme.colours.ink.highlight.main};\n }\n\n .comparisonInfo {\n ${({ theme }) => theme.typography.headingMedium};\n margin-bottom: 0.5rem;\n }\n\n .infoFooter {\n ${({ theme }) => theme.typography.headingSmall};\n margin-left: 0 !important;\n }\n`;\nPlayerComparisonTileWrapper.displayName = 'PlayerComparisonTileWrapper';\n","/* eslint-disable react/jsx-props-no-spreading */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { components } from 'react-select';\nimport { Icon } from '@statsbomb/kitbag-components';\nimport { dropdownOptionPropType } from './DropdownFilter.propTypes';\nimport { StyledOption } from './DropdownFilter.styles';\nimport { HalfSizeIcon } from '../../pages/player/PlayerOverview/PlayerOverview.styles';\n\nexport const Option = ({ children, data, ...rest }) => (\n\n \n {children}\n {data.secondaryLabel && (\n {data.secondaryLabel}\n )}\n \n \n);\n\nOption.propTypes = {\n // the label and value of the option\n data: dropdownOptionPropType.isRequired,\n // the contents of the option\n children: PropTypes.node.isRequired,\n};\n\nexport const OptionWithIcon = ({ data, ...rest }) => (\n \n \n {data.iconHalfSize ? (\n \n \n ) : (\n
\n \n);\n\nOptionWithIcon.propTypes = {\n // the label and value of the option\n data: dropdownOptionPropType.isRequired,\n // the contents of the option\n children: PropTypes.node.isRequired,\n};\n\nexport const SingleValueWithIcon = ({ data, ...rest }) => (\n \n {useFilter && \n \n \n \n
\n Release Notes
\n{h2Element.text}
\n {h3Elements.map((h3Element, h3Index) => {\n const filteredListElements = formattedMarkdownArray.filter(\n ({ component, parent }) =>\n component === 'li' && parent === h3Element.id\n );\n return (\n{h3Element.text}
\n- \n {filteredListElements.map(\n (filteredListElement, liIndex) => (\n
- \n {filteredListElement.text}\n \n )\n )}\n
instead\n // console.log('Padding prop:', $padding);\n `${$padding}rem` || '0'};\n margin: ${({ $margin }) => $margin || '1rem'};\n min-height: ${({ $minHeight }) => $minHeight || '25rem'};\n max-height: ${({ $maxHeight }) => $maxHeight || 'initial'};\n flex-grow: 1;\n transition: all 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);\n overflow-y: ${({ $overflowY }) => $overflowY || 'auto'};\n overflow-x: hidden;\n z-index: 2;\n`;\nSummaryTileBody.displayName = 'SummaryTileBody';\n\n// Summary Tile Header and Footers support the following layout options:\n// 1. \n// 2. \n// 3. \n// in all instances the last should align the content to the right\n// elements (buttons or drops etc.) will be spaced and aligned\nexport const SummaryTileHeader = styled.div`\n display: flex;\n padding: ${({ $padding }) => $padding || '0 1rem'};\n height: ${({ $height }) => $height || '3.25rem'};\n border-bottom: ${({ theme, $borderWidth }) =>\n `${$borderWidth || 1}px solid ${theme.colours.canvas.secondary.main}`};\n ${({ theme }) => theme.typography.headingRegular}\n align-items: center;\n z-index: 3;\n\n > div {\n flex: 1;\n line-height: 1;\n display: inline-flex;\n gap: 0.5rem;\n }\n\n > div:last-child {\n justify-content: end;\n\n button {\n z-index: 10;\n }\n }\n\n // extra spacing if element placed next to title\n h3 + div {\n margin-left: 0.5rem;\n }\n`;\nSummaryTileHeader.displayName = 'SummaryTileHeader';\n\nexport const SummaryTileHeaderSub = styled.span`\n color: ${({ theme }) => theme.colours.graphics.primary.main};\n margin-left: 0.1875rem;\n`;\n\n// element spacing\nconst EL_SPACING = '0.7rem';\n\nexport const SummaryTileFooter = styled.div`\n display: flex;\n padding: 0 1rem;\n justify-content: flex-end;\n height: 36px;\n position: absolute;\n bottom: 0;\n width: 100%;\n align-items: center;\n z-index: 3;\n\n button {\n height: 22px;\n }\n\n // temp for inline svg\n svg {\n fill: ${({ theme }) => theme.colours.graphics.primary.main};\n }\n // end temp\n\n .ui {\n &.small.text.loader {\n background-color: ${({ theme }) => theme.colours.canvas.tertiary.main};\n padding: 0.35rem 0 0 1.75rem;\n line-height: 1.7;\n width: 1rem;\n height: 1rem;\n z-index: 50;\n font-size: 0.78125rem;\n\n &:before,\n &:after {\n left: 0.875rem;\n top: 0.5rem;\n }\n }\n }\n`;\nSummaryTileFooter.displayName = 'SummaryTileFooter';\n\n// layout containers\nexport const SummaryTileCol = styled.div`\n flex: 1;\n color: ${({ theme }) => theme.colours.graphics.primary.main};\n text-align: left;\n\n > * {\n margin-right: ${EL_SPACING};\n margin-left: 0;\n vertical-align: middle;\n }\n\n // furthest right col is right aligned\n &:last-child {\n text-align: right;\n\n > * {\n margin-left: ${EL_SPACING};\n margin-right: ${({ $marginRight }) => $marginRight};\n flex-flow: row-reverse;\n }\n }\n`;\nSummaryTileCol.displayName = 'SummaryTileCol';\n\nexport const SummaryError = styled.span`\n position: absolute;\n color: ${({ theme }) => theme.colours.messaging.error.main};\n background-color: ${({ theme }) => theme.colours.canvas.tertiary.main};\n line-height: 1.5;\n\n svg {\n fill: ${({ theme }) => theme.colours.messaging.error.main} !important;\n float: left;\n margin-right: 0.3125rem;\n margin-top: 0.125rem;\n }\n`;\nSummaryError.displayName = 'Summary Error';\n\nexport const TileDimmer = styled.div`\n position: absolute;\n top: 0;\n width: calc(100% - 11px);\n height: 100%;\n left: 5px;\n background-color: ${({ theme }) =>\n theme.applyOpacity(\n theme.colours.canvas.secondary.weak,\n 'overlay'\n )} !important;\n opacity: ${({ $fadeIn }) => ($fadeIn ? 0 : 1)};\n transition: opacity 0.4s ease-in;\n align-items: center;\n justify-content: center;\n display: flex;\n z-index: 1;\n\n div {\n position: absolute;\n top: calc(50% - 35px);\n left: calc(50% - 35px);\n }\n`;\nTileDimmer.displayName = 'Tile Dimmer';\n","/* eslint-disable prettier/prettier */\nexport const defaultContextFilters = {\n downs: true,\n noDowns: true,\n yardsToGoMin: true,\n yardsToGoMax: true,\n fieldPositionMin: true,\n fieldPositionMax: true,\n quarters: true,\n clockMin: true,\n clockMax: true,\n yardsGainedMin: true,\n yardsGainedMax: true,\n playTypes: true,\n passAirYardsMin: true,\n passAirYardsMax: true,\n qbDropDepthMin: true,\n qbDropDepthMax: true,\n qbTimeToThrowMin: true,\n qbTimeToThrowMax: true,\n qbPassLocation: true,\n personnel: true,\n formation: true,\n gameIds: true,\n};\n\nexport const getContextQueryVariables = (overrides) => {\n const contextFilters = {\n ...defaultContextFilters,\n ...overrides,\n };\n\n return `\n ${contextFilters.downs ? '$downs: [Int!]' : ''}\n ${contextFilters.noDowns ? '$noDowns: Boolean' : ''}\n ${contextFilters.yardsToGoMin ? '$yardsToGoMin: Float' : ''}\n ${contextFilters.yardsToGoMax ? '$yardsToGoMax: Float' : ''}\n ${contextFilters.fieldPositionMin ? '$fieldPositionMin: Float' : ''}\n ${contextFilters.fieldPositionMax ? '$fieldPositionMax: Float' : ''}\n ${contextFilters.quarters ? '$quarters: [Int!]' : ''}\n ${contextFilters.clockMin ? '$clockMin: Int' : ''}\n ${contextFilters.clockMax ? '$clockMax: Int' : ''}\n ${contextFilters.yardsGainedMin ? '$yardsGainedMin: Float' : ''}\n ${contextFilters.yardsGainedMax ? '$yardsGainedMax: Float' : ''}\n ${contextFilters.playTypes ? '$playTypes: [PlayType!]' : ''}\n ${contextFilters.passAirYardsMin ? '$passAirYardsMin: Float' : ''}\n ${contextFilters.passAirYardsMax ? '$passAirYardsMax: Float' : ''}\n ${contextFilters.qbDropDepthMin ? '$qbDropDepthMin: Float' : ''}\n ${contextFilters.qbDropDepthMax ? '$qbDropDepthMax: Float' : ''}\n ${contextFilters.qbTimeToThrowMin ? '$qbTimeToThrowMin: Float' : ''}\n ${contextFilters.qbTimeToThrowMax ? '$qbTimeToThrowMax: Float' : ''}\n ${contextFilters.qbPassLocation ? '$qbPassLocation: [PocketRelativeLocation!]' : ''}\n ${contextFilters.personnel ? '$personnel: PersonnelFilter' : ''}\n ${contextFilters.formation ? '$formation: FormationFilter' : ''}\n ${contextFilters.gameIds ? '$gameIds: [Int!]' : ''}\n `;\n};\n\nexport const getContextFilterClientExports = (overrides) => {\n const contextFilters = {\n ...defaultContextFilters,\n ...overrides,\n };\n\n return `\n ${contextFilters.downs ? 'contextFilterDowns @client @export(as: \"downs\")' : ''}\n ${contextFilters.noDowns ? 'contextFilterNoDowns @client @export(as: \"noDowns\")' : ''}\n ${contextFilters.yardsToGoMin ? 'contextFilterYardsToGoMin @client @export(as: \"yardsToGoMin\")' : ''}\n ${contextFilters.yardsToGoMax ? 'contextFilterYardsToGoMax @client @export(as: \"yardsToGoMax\")' : ''}\n ${contextFilters.fieldPositionMin ? 'contextFilterFieldPositionMin @client @export(as: \"fieldPositionMin\")' : ''}\n ${contextFilters.fieldPositionMax ? 'contextFilterFieldPositionMax @client @export(as: \"fieldPositionMax\")' : ''}\n ${contextFilters.quarters ? 'contextFilterQuarter @client @export(as: \"quarters\")' : ''}\n ${contextFilters.clockMin ? 'contextFilterClockMin @client @export(as: \"clockMin\")' : ''}\n ${contextFilters.clockMax ? 'contextFilterClockMax @client @export(as: \"clockMax\")' : ''}\n ${contextFilters.yardsGainedMin ? 'contextFilterYardsGainedMin @client @export(as: \"yardsGainedMin\")' : ''}\n ${contextFilters.yardsGainedMax ? 'contextFilterYardsGainedMax @client @export(as: \"yardsGainedMax\")' : ''}\n ${contextFilters.playTypes ? 'contextFilterPlayType @client @export(as: \"playTypes\")' : ''}\n ${contextFilters.passAirYardsMin ? 'contextFilterPassAirYardsMin @client @export(as: \"passAirYardsMin\")' : ''}\n ${contextFilters.passAirYardsMax ? 'contextFilterPassAirYardsMax @client @export(as: \"passAirYardsMax\")' : ''}\n ${contextFilters.qbDropDepthMin ? 'contextFilterQBDropDepthMin @client @export(as: \"qbDropDepthMin\")' : ''}\n ${contextFilters.qbDropDepthMax ? 'contextFilterQBDropDepthMax @client @export(as: \"qbDropDepthMax\")' : ''}\n ${contextFilters.qbTimeToThrowMin ? 'contextFilterQBTimeToThrowMin @client @export(as: \"qbTimeToThrowMin\")' : ''}\n ${contextFilters.qbTimeToThrowMax ? 'contextFilterQBTimeToThrowMax @client @export(as: \"qbTimeToThrowMax\")' : ''}\n ${contextFilters.qbPassLocation ? 'contextFilterQBPocketLocation @client @export(as: \"qbPassLocation\")' : ''}\n ${contextFilters.personnel ? 'contextFilterPersonnel @client @export(as: \"personnel\")' : ''}\n ${contextFilters.formation ? 'contextFilterFormations @client @export(as: \"formation\")' : ''}\n ${contextFilters.gameIds ? 'contextFilterGameIds @client @export(as: \"gameIds\")' : '' }\n `;\n};\n\nexport const getContextFiltersQueryArguments = (overrides) => {\n const contextFilters = {\n ...defaultContextFilters,\n ...overrides,\n };\n\n return `\n ${contextFilters.downs ? 'downs: $downs' : ''}\n ${contextFilters.noDowns ? 'noDowns: $noDowns' : ''}\n ${contextFilters.yardsToGoMin ? 'yardsToGoMin: $yardsToGoMin' : ''}\n ${contextFilters.yardsToGoMax ? 'yardsToGoMax: $yardsToGoMax' : ''}\n ${contextFilters.fieldPositionMin ? 'fieldPositionMin: $fieldPositionMin' : ''}\n ${contextFilters.fieldPositionMax ? 'fieldPositionMax: $fieldPositionMax' : ''}\n ${contextFilters.quarters ? 'quarters: $quarters' : ''}\n ${contextFilters.clockMin ? 'clockMin: $clockMin' : ''}\n ${contextFilters.clockMax ? 'clockMax: $clockMax' : ''}\n ${contextFilters.yardsGainedMin ? 'yardsGainedMin: $yardsGainedMin' : ''}\n ${contextFilters.yardsGainedMax ? 'yardsGainedMax: $yardsGainedMax' : ''}\n ${contextFilters.playTypes ? 'playTypes: $playTypes' : ''}\n ${contextFilters.passAirYardsMin ? 'passAirYardsMin: $passAirYardsMin' : ''}\n ${contextFilters.passAirYardsMax ? 'passAirYardsMax: $passAirYardsMax' : ''}\n ${contextFilters.qbDropDepthMin ? 'qbDropDepthMin: $qbDropDepthMin' : ''}\n ${contextFilters.qbDropDepthMax ? 'qbDropDepthMax: $qbDropDepthMax' : ''}\n ${contextFilters.qbTimeToThrowMin ? 'qbTimeToThrowMin: $qbTimeToThrowMin' : ''}\n ${contextFilters.qbTimeToThrowMax ? 'qbTimeToThrowMax: $qbTimeToThrowMax' : ''}\n ${contextFilters.qbPassLocation ? 'qbPassLocation: $qbPassLocation' : ''}\n ${contextFilters.personnel ? 'personnel: $personnel' : ''}\n ${contextFilters.formation ? 'formation: $formation' : ''}\n ${contextFilters.gameIds ? 'gameIds: $gameIds' : ''}\n `;\n};\n","import { gql } from '@apollo/client';\nimport {\n getContextQueryVariables,\n getContextFilterClientExports,\n getContextFiltersQueryArguments,\n} from '../../../utils/helpers/contextFilters';\n\nexport const GET_PASS_EVENTS = gql`\n query GetPassEvents(\n $teamId: Int!\n $competitionId: Int!\n $seasonId: Int!\n $playerId: Int!\n ${getContextQueryVariables()}\n ) {\n selectedCompetitionId @client @export(as: \"competitionId\")\n selectedPlayerId @client @export(as: \"playerId\")\n selectedSeasonId @client @export(as: \"seasonId\")\n selectedTeamId @client @export(as: \"teamId\")\n ${getContextFilterClientExports()}\n\n passEvents(\n first: 1000\n eventFilters: { playerIds: [$playerId] }\n playFilters: {\n competitionId: $competitionId\n seasonId: $seasonId\n teamIds: [$teamId]\n ${getContextFiltersQueryArguments()}\n }\n ) {\n totalCount\n edges {\n node {\n id\n team {\n name\n }\n player {\n id\n name\n teamPosition {\n code\n }\n jerseyNumber\n }\n receiverPlayer {\n id\n name\n teamPosition {\n generalPosition\n }\n jerseyNumber\n }\n x\n y\n endX\n endY\n duration\n success\n passPlacementX\n passPlacementY\n points\n passAirYards\n receiverAlignmentPosition\n types\n play {\n yardLine\n success\n touchdownWon\n yardsNet\n turnoverType\n downNegated\n id\n name\n drive {\n id\n name\n }\n explosive\n }\n game {\n id\n name\n }\n passOutcome {\n oppositionCatchTypes\n oppositionCatchSuccess\n }\n passUnderthrow\n passOverthrow\n passTouchdown\n passOutOfBounds\n passYardsGained\n yardsAfterCatch\n passThrowaway\n }\n }\n }\n }\n`;\n","import { gql } from '@apollo/client';\nimport {\n getContextQueryVariables,\n getContextFilterClientExports,\n getContextFiltersQueryArguments,\n} from '../../../utils/helpers/contextFilters';\n\nexport const GET_CATCH_EVENTS = gql`\n query GetCatchEvents(\n $teamId: Int!\n $competitionId: Int!\n $seasonId: Int!\n $playerId: Int!\n ${getContextQueryVariables()}\n ) {\n selectedCompetitionId @client @export(as: \"competitionId\")\n selectedPlayerId @client @export(as: \"playerId\")\n selectedSeasonId @client @export(as: \"seasonId\")\n selectedTeamId @client @export(as: \"teamId\")\n ${getContextFilterClientExports()}\n\n passEvents(\n first: 1000\n eventFilters: { receiverPlayerIds: [$playerId] }\n playFilters: {\n competitionId: $competitionId\n seasonId: $seasonId\n teamIds: [$teamId]\n ${getContextFiltersQueryArguments()}\n }\n ) {\n totalCount\n edges {\n node {\n id\n team {\n name\n }\n player {\n id\n name\n teamPosition {\n code\n }\n jerseyNumber\n }\n receiverPlayer {\n id\n name\n teamPosition {\n generalPosition\n }\n jerseyNumber\n }\n x\n y\n endX\n endY\n duration\n success\n passPlacementX\n passPlacementY\n points\n passAirYards\n receiverAlignmentPosition\n types\n play {\n yardLine\n success\n touchdownWon\n yardsNet\n turnoverType\n downNegated\n id\n name\n drive {\n id\n name\n }\n explosive\n }\n game {\n id\n name\n }\n passOutcome {\n oppositionCatchTypes\n oppositionCatchSuccess\n }\n passUnderthrow\n passOverthrow\n passTouchdown\n passOutOfBounds\n passYardsGained\n yardsAfterCatch\n passThrowaway\n }\n }\n }\n }\n`;\n","import {\n concat,\n drop,\n find,\n reverse,\n sortBy,\n sumBy,\n take,\n uniqBy,\n} from 'lodash';\nimport PropTypes from 'prop-types';\nimport {\n API_EVENT_TYPE_DEFENDER_TOUCHED,\n API_PASS_PLAY_TURNOVER_TYPES,\n} from '../../../utils/constants/api';\nimport { getPlayOutcome } from '../../../utils/visualisations/playSuccess';\nimport {\n COLORING_OPTION_BY_PLAYER,\n COLORING_OPTION_BY_TARGET,\n} from '../../../visualisations/PassingChart/PassingChart.constants';\nimport {\n PASS_OUTCOME_TYPES,\n TARGET_ANY_ALIGNMENT,\n} from './PlayerPassing.constants';\n\nconst INTERCEPTION_TYPE = 'INTERCEPTION';\nconst PASSERS_TO_COLOR = 4;\nconst TARGETS_TO_COLOR = 7; // This + 1 for \"Other\" (8) cannot be more than the colours in the object palette\n\nconst toChartSpace = (row, pxPerYard) => ({\n ...row,\n // TODO: probably want to get this from the DB eventually.\n distance: Math.hypot(row.endX - row.x, row.endY - row.y),\n yardsGained: row.passYardsGained || 0,\n isOut: row.passOutOfBounds,\n passVelocity:\n row.duration && row.duration > 0\n ? Math.hypot(row.endX - row.x, row.endY - row.y) / row.duration\n : 0,\n endX: row.endX * pxPerYard,\n endY: row.endY * pxPerYard,\n lineOfScrimmage: row.play.yardLine * pxPerYard,\n lineOfScrimmageEndX: (row.endX - row.play.yardLine) * pxPerYard,\n lineOfScrimmageEndY: (row.endY - row.play.yardLine) * pxPerYard,\n lineOfScrimmageX: (row.x - row.play.yardLine) * pxPerYard,\n lineOfScrimmageY: (row.y - row.play.yardLine) * pxPerYard,\n passDeltaX: (row.endX - row.x) * pxPerYard,\n passDeltaY: (row.endY - row.y) * pxPerYard,\n x: row.x * pxPerYard,\n y: row.y * pxPerYard,\n theta: (Math.atan2(row.endY - row.y, row.endX - row.x) * 180) / Math.PI,\n catchInterception:\n row.passOutcome?.oppositionCatchTypes?.includes(INTERCEPTION_TYPE) &&\n row.passOutcome?.oppositionCatchSuccess === true,\n playExplosive: row?.play?.explosive,\n playTurnover:\n row.play.turnoverType &&\n API_PASS_PLAY_TURNOVER_TYPES.includes(row.play.turnoverType),\n defenderTouched: row.types.includes(API_EVENT_TYPE_DEFENDER_TOUCHED),\n playOutcome: getPlayOutcome(row.play),\n});\n\nconst sumPasses = (total, { passes }) => total + passes;\n\nconst OTHER_PASSER = {\n playerId: -1,\n playerName: 'Not Identified',\n passes: 0,\n};\n\nconst PASSER_SHAPE = PropTypes.shape({\n playerId: PropTypes.number,\n playerName: PropTypes.string,\n passes: PropTypes.number,\n});\n\nconst getPassers = function (formattedData) {\n const passesWithPassers = formattedData.filter(\n (f) => f.player && f.player.id\n );\n const unidentifiedPassCount = formattedData.length - passesWithPassers.length;\n const passers = uniqBy(passesWithPassers, (m) => m.player.id);\n const passerCounts = passers.map((m) => {\n const tot = passesWithPassers.filter(\n (p) => p.player.id === m.player.id\n ).length;\n const passerObj = {\n playerId: parseInt(m.player.id, 10),\n playerName: m.player.name,\n passes: tot,\n };\n return passerObj;\n });\n let rankedPassers = reverse(sortBy(passerCounts, 'passes'));\n if (unidentifiedPassCount > 0) {\n const otherPasserObj = { ...OTHER_PASSER, passes: unidentifiedPassCount };\n rankedPassers = concat(rankedPassers, [otherPasserObj]); // add other last to put at bottom of list\n }\n return rankedPassers;\n};\n\nconst colorPassers = function (rankedPassers, visPalette) {\n const realPasses = rankedPassers.filter(\n (f) => f.playerId !== OTHER_PASSER.playerId\n );\n const topX = take(realPasses, PASSERS_TO_COLOR);\n const rankedOtherPasser = find(\n rankedPassers,\n (m) => m.playerId === OTHER_PASSER.playerId\n );\n if (realPasses.length > PASSERS_TO_COLOR || rankedOtherPasser) {\n // add an \"other\" object for the rest\n const others = drop(realPasses, PASSERS_TO_COLOR);\n const otherPasserObj = rankedOtherPasser || OTHER_PASSER;\n const coloredOther = {\n ...otherPasserObj,\n playerName: 'Other',\n passes: otherPasserObj.passes + others.reduce(sumPasses, 0),\n };\n topX.push(coloredOther);\n }\n const rankedTopPassers = topX.map((m, i) => {\n const val = { ...m, rank: i, color: visPalette.objects[`n${i + 1}`].main };\n return val;\n });\n return rankedTopPassers;\n};\n\nconst addPasserColour = function (chartData, passers) {\n const coloredData = chartData.map((m) => {\n const matchingPassers = passers.filter(\n (p) => p.playerId === parseInt(m?.player?.id, 10)\n );\n const passerColor =\n matchingPassers?.length > 0\n ? matchingPassers[0].color\n : passers[passers.length - 1].color;\n const coloredDatum = { ...m, passerColor };\n return coloredDatum;\n });\n return coloredData;\n};\n\nconst getTargets = function (formattedData) {\n const passesWithTargets = formattedData.filter(\n (f) => f.receiverPlayer && f.receiverPlayer.id\n );\n const unidentifiedPassCount = formattedData.length - passesWithTargets.length;\n const targets = uniqBy(passesWithTargets, (m) => m.receiverPlayer.id);\n const targetCounts = targets.map((m) => {\n const tot = passesWithTargets.filter(\n (p) => p.receiverPlayer.id === m.receiverPlayer.id\n ).length;\n const passerObj = {\n playerId: parseInt(m.receiverPlayer.id, 10),\n playerName: m.receiverPlayer.name,\n passes: tot,\n };\n return passerObj;\n });\n let rankedTargets = reverse(sortBy(targetCounts, 'passes'));\n if (unidentifiedPassCount > 0) {\n const otherPasserObj = { ...OTHER_PASSER, passes: unidentifiedPassCount };\n rankedTargets = concat(rankedTargets, [otherPasserObj]); // add other last to put at bottom of list\n }\n return rankedTargets;\n};\n\nconst colorTargets = function (rankedTargets, visPalette) {\n const realPasses = rankedTargets.filter(\n (f) => f.playerId !== OTHER_PASSER.playerId\n );\n const topX = take(rankedTargets, TARGETS_TO_COLOR);\n const rankedOtherTarget = find(\n rankedTargets,\n (m) => m.playerId === OTHER_PASSER.playerId\n );\n if (rankedTargets.length > TARGETS_TO_COLOR || rankedOtherTarget > 0) {\n // add an \"other\" object for the rest\n const others = drop(realPasses, TARGETS_TO_COLOR);\n const otherPasserObj = rankedOtherTarget || OTHER_PASSER;\n const coloredOther = {\n ...otherPasserObj,\n playerName: 'Other',\n passes: otherPasserObj.passes + others.reduce(sumPasses, 0),\n };\n topX.push(coloredOther);\n }\n const rankedTopTargets = topX.map((m, i) => {\n const val = { ...m, rank: i, color: visPalette.objects[`n${i + 1}`].main };\n return val;\n });\n return rankedTopTargets;\n};\n\nconst addTargetColour = function (chartData, passers) {\n const coloredData = chartData.map((m) => {\n const matchingPassers = passers.filter(\n (p) => p.playerId === parseInt(m?.receiverPlayer?.id, 10)\n );\n const targetColor =\n matchingPassers?.length > 0\n ? matchingPassers[0].color\n : passers[passers.length - 1].color;\n const coloredDatum = { ...m, targetColor };\n return coloredDatum;\n });\n return coloredData;\n};\n\n// value is int because react complains about nulls in dropdowns\nconst DEFAULT_PLAYER_SELECTION = { label: 'Any', value: 0 };\n\n// filter targets/receivers based on player ids\nconst getTargetsFilter = (evt, playerIds) => {\n if (!playerIds || playerIds.length === 0) {\n return false;\n }\n return (\n playerIds.includes(evt?.receiverPlayer?.id) ||\n (playerIds.includes(OTHER_PASSER.playerId) && !evt?.receiverPlayer)\n );\n};\n\n// filter passers based on player ids\nconst getPassersFilter = (evt, playerIds) => {\n if (!playerIds || playerIds.length === 0) {\n return false;\n }\n return (\n playerIds.includes(evt?.player?.id) ||\n (playerIds.includes(OTHER_PASSER.playerId) && !evt?.player)\n );\n};\n\n// filter games based on pass outcomes\nconst getPassOutcomeFilter = (evt, passOutcomeKey) => {\n const passOutcome = PASS_OUTCOME_TYPES[passOutcomeKey];\n if (!passOutcome) {\n return true;\n }\n return passOutcome.filter(evt);\n};\n\n// filter based on target alignment position\nconst getTargetAlignmentFilter = (evt, targetAlignment) => {\n if (\n targetAlignment === TARGET_ANY_ALIGNMENT ||\n targetAlignment === evt?.receiverAlignmentPosition\n ) {\n return true;\n }\n return false;\n};\n\n// get total count of checked items\nconst getCountTotal = (data) =>\n sumBy(\n data.filter((e) => e.checked),\n 'value'\n );\n\n/* When coloring based on a player, add color value to data */\nexport const addColorToPlayer = (\n passData,\n coloringOption,\n passers,\n targets,\n visPalette\n) => {\n if (coloringOption === COLORING_OPTION_BY_PLAYER.value) {\n const coloredPlayers = colorPassers(passers, visPalette);\n const chartData = addPasserColour(passData, coloredPlayers);\n return chartData;\n }\n if (coloringOption === COLORING_OPTION_BY_TARGET.value) {\n const coloredPlayers = colorTargets(targets, visPalette);\n const chartData = addTargetColour(passData, coloredPlayers);\n return chartData;\n }\n return passData;\n};\n\nexport {\n toChartSpace,\n getPassers,\n colorPassers,\n addPasserColour,\n getTargets,\n getPassOutcomeFilter,\n getTargetAlignmentFilter,\n getTargetsFilter,\n getPassersFilter,\n getCountTotal,\n colorTargets,\n addTargetColour,\n PASSER_SHAPE,\n DEFAULT_PLAYER_SELECTION,\n};\n","import qs from 'query-string';\n\nconst setQueryStringWithoutPageReload = (qsValue) => {\n const newUrl = `${window.location.protocol}//${window.location.host}${window.location.pathname}${qsValue}`;\n window.history.pushState({ path: newUrl }, '', newUrl);\n};\n\nexport const getQueryStringValue = (\n key,\n queryString = window.location.search\n) => {\n const values = qs.parse(queryString);\n return values[key];\n};\n\nexport const setQueryStringValue = (\n key,\n value,\n queryString = window.location.search\n) => {\n const values = qs.parse(queryString);\n const newQsValue = qs.stringify({\n ...values,\n [key]: value,\n });\n setQueryStringWithoutPageReload(`?${newQsValue}`);\n};\n","// checks whether a given value is numeric (i.e '35.2' => true)\nexport const isNumericString = (value) => {\n // number are always considered numeric\n if (typeof value === 'number') {\n return true;\n }\n\n // if it's not a string, it can't be numeric\n if (typeof value !== 'string') {\n return false;\n }\n\n // the second condition covers empty strings and white space (i.e '' and ' ')\n return !Number.isNaN(Number(value)) && !Number.isNaN(parseFloat(value));\n};\n\n// make filenames safe for sensitive OSs\n// removing periods and apostrophes\nexport const escapeDownloadString = (str) =>\n str ? str.replace(/\\.|'|\"/g, '') : '';\n\nexport const formatPackageLabel = (value) =>\n value.replace('P', '').replaceAll('_', '-');\n","import { useState, useCallback } from 'react';\nimport { getQueryStringValue, setQueryStringValue } from '../queryString';\nimport { isNumericString } from '../helpers/strings';\n\nfunction useQueryString(key, initialValue) {\n const [value, setValue] = useState(getQueryStringValue(key) || initialValue);\n const onSetValue = useCallback(\n (newValue) => {\n setValue(newValue);\n setQueryStringValue(key, newValue);\n },\n [key]\n );\n\n const parsedValue =\n value === 'false' || value === 'true' || isNumericString(value)\n ? JSON.parse(value)\n : value;\n\n return [parsedValue, onSetValue];\n}\n\nexport default useQueryString;\n","import { styled } from 'styled-components';\n\nexport const OverviewTileMessage = styled.div`\n padding: 1.25rem;\n color: ${({ theme }) => theme.colours.ink.primary.main};\n`;\n\nexport const TileContentVerticallyCentered = styled.div`\n height: 100%;\n\n .chartWrapper {\n svg {\n margin: 0;\n position: absolute;\n top: 50%;\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n width: 100%;\n }\n }\n`;\nTileContentVerticallyCentered.displayName = 'TileContentVerticallyCentered';\n\nexport const HalfSizeIcon = styled.span`\n svg {\n transform: scale(0.6);\n }\n`;\nHalfSizeIcon.displayName = 'HalfSizeIcon';\n\nexport const PlayerTacklingTileContainer = styled.div`\n height: 100%;\n\n .chartWrapper {\n min-height: auto;\n .show {\n display: block;\n }\n .hide {\n display: none;\n }\n svg {\n max-width: ${({ $maxWidth }) => $maxWidth || '550px'};\n margin: 0 auto;\n margin-bottom: ${({ $marginBottom }) => $marginBottom || '0'};\n }\n .dist {\n display: none;\n\n &.show {\n display: block;\n }\n\n svg {\n max-width: initial;\n max-height: 640px;\n margin-bottom: 0;\n }\n }\n }\n`;\nPlayerTacklingTileContainer.displayName = 'PlayerTacklingTileContainer';\n\nexport const PlayerSnapTileContainer = styled.div`\n height: 100%;\n\n svg {\n max-width: 570px;\n margin: 0 auto;\n }\n`;\nPlayerSnapTileContainer.displayName = 'PlayerSnapTileContainer';\n\nexport const PlayerPassEndsTileContainer = styled.div`\n height: 100%;\n\n .chartWrapper {\n svg {\n max-width: ${({ $maxWidth }) => $maxWidth || '570px'};\n margin: 0 auto;\n }\n }\n`;\nPlayerPassEndsTileContainer.displayName = 'PlayerPassEndsTileContainer';\n\nexport const PlayerHavocTileContainer = styled.div`\n .chartWrapper {\n // havoc chart\n svg:first-child {\n margin: 0 auto;\n }\n // chart key\n svg {\n margin: 0 25px;\n }\n }\n`;\nPlayerHavocTileContainer.displayName = 'PlayerHavocTileContainer';\n\nexport const RouteTreeTileWrapper = styled.div`\n svg {\n max-height: 535px;\n padding: 1rem 7%;\n }\n\n div + div {\n svg {\n max-height: 60px;\n padding: 0 7%;\n }\n }\n`;\nRouteTreeTileWrapper.displayName = 'RouteTreeTileWrapper';\n\nexport const PlayerComparisonTileWrapper = styled.div`\n a {\n color: ${({ theme }) => theme.colours.ink.primary.main};\n text-decoration: underline;\n }\n\n a:hover {\n color: ${({ theme }) => theme.colours.ink.highlight.main};\n }\n\n .comparisonInfo {\n ${({ theme }) => theme.typography.headingMedium};\n margin-bottom: 0.5rem;\n }\n\n .infoFooter {\n ${({ theme }) => theme.typography.headingSmall};\n margin-left: 0 !important;\n }\n`;\nPlayerComparisonTileWrapper.displayName = 'PlayerComparisonTileWrapper';\n","/* eslint-disable react/jsx-props-no-spreading */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { components } from 'react-select';\nimport { Icon } from '@statsbomb/kitbag-components';\nimport { dropdownOptionPropType } from './DropdownFilter.propTypes';\nimport { StyledOption } from './DropdownFilter.styles';\nimport { HalfSizeIcon } from '../../pages/player/PlayerOverview/PlayerOverview.styles';\n\nexport const Option = ({ children, data, ...rest }) => (\n
\n
\n Passing Chart
\n\n {!hasError && !isLoading && formattedData?.length !== 0 && (\n \n \n setGraphOption(selectedOption.value)\n }\n options={GRAPH_OPTIONS}\n value={GRAPH_OPTIONS.find((item) => item.value === graphOption)}\n labelPosition=\"none\"\n label=\"Passing chart display options\"\n variant=\"tertiary\"\n size=\"small\"\n />\n \n )}\n
\n No Data available
\n\n
\n \n \n
\n Pass Placement
\n\n {!loading && !error && data?.passEvents?.edges?.length !== 0 && (\n \n \n setScaleIndex(selectedScale.DEFAULT_PLUS_MINUS_X_INDEX)\n }\n variant=\"secondary\"\n icon=\"ResetZoom\"\n size=\"small\"\n title=\"reset zoom\"\n />\n \n )}\n {!loading && !error && data?.passEvents?.edges?.length !== 0 && (\n \n setShowBallSize(item.value === 0)}\n options={PASS_PLACEMENT_BALL_DISPLAY_OPTIONS}\n value={\n PASS_PLACEMENT_BALL_DISPLAY_OPTIONS[showBallSize ? 0 : 1]\n }\n labelPosition=\"none\"\n label=\"Pass placement ball display\"\n variant=\"tertiary\"\n size=\"small\"\n />\n \n )}\n
\n No Data available
\n\n
\n \n
\n Snap Distribution
\n\n
\n No Data available
\n\n
\n Radars
\n\n {!isLoading && !isError && (\n \n setShowLeagueAverage(item.value === 1)}\n options={PLAYER_RADAR_CHART_OPTIONS}\n value={PLAYER_RADAR_CHART_OPTIONS[showLeagueAverage ? 1 : 0]}\n labelPosition=\"none\"\n label=\"Player radar display options\"\n variant=\"tertiary\"\n size=\"small\"\n />\n \n )}\n
\n \n {isError && !isLoading && !statsLoadingLA && (\n \n \n )}\n \n \n
\n \n
\n Trait
\n\n
\n Performance
\n\n {header.buttons.map((buttonDefinition) => (\n buttonDefinition.clickHandler(header.id)}\n />\n ))}\n
\n {value}
\n{value}
\n\n \n \n
\n );\n }\n if (!results?.length) {\n return Loading...
\nNo Results Found
;\n }\n\n return null;\n };\n\n const panes = tableTabsConfig.map((tab) => ({\n render: () => (\n\n
\n )}\n {!hideParentTabs && (\n \n
\n Stats
\n\n {playerStatsData && !isLoading && playerName && (\n \n setAggMode(item.value)}\n options={STATS_AGGREGATION_MODE_OPTIONS}\n value={\n STATS_AGGREGATION_MODE_OPTIONS[\n aggMode === API_PLAYER_AGGREGATE_MODES.TOTAL ? 1 : 0\n ]\n }\n label=\"Stats aggregation mode\"\n labelPosition=\"none\"\n variant=\"tertiary\"\n size=\"small\"\n />\n \n )}\n
\n No Data Available.
\n\n
\n Tackling
\n\n {!hasError && !isLoading && filteredData?.length !== 0 && (\n \n \n setFieldMode(selectedOption.value)\n }\n options={TACKLING_TILE_DISPLAY_MODES}\n value={TACKLING_TILE_DISPLAY_MODES.find(\n (f) => f.value === fieldMode\n )}\n labelPosition=\"none\"\n label=\"Tackling chart display options\"\n variant=\"tertiary\"\n size=\"small\"\n />\n \n )}\n
\n No Data available
\n\n
\n \n {}}\n displayKey\n distroAreaColorMode={TACKLE_LOCATION_DISTRO_COLOR_WINNER.value}\n ballCarriers={ballCarriers}\n tacklers={tacklers}\n fieldMode={fieldMode}\n fieldFocusOrigin={false}\n showHeatmapDots={false}\n showFirstTackleTails\n selectedTacklerId={playerId}\n showDistribution={false}\n isInteractive={false}\n />\n
\n \n {}}\n displayKey\n distroAreaColorMode={TACKLE_LOCATION_DISTRO_COLOR_WINNER.value}\n ballCarriers={ballCarriers}\n tacklers={tacklers}\n fieldMode={fieldMode}\n fieldFocusOrigin={false}\n showHeatmapDots={false}\n showFirstTackleTails\n selectedTacklerId={playerId}\n showDistribution\n isInteractive={false}\n />\n
\n \n
\n Havoc
\n\n {!hasError && !isLoading && havocData?.length !== 0 && (\n \n \n setColorMode(selectedOption.value)\n }\n options={HAVOC_TILE_COLOR_MODES}\n value={HAVOC_TILE_COLOR_MODES.find(\n (f) => f.value === colorMode\n )}\n labelPosition=\"none\"\n label=\"Havoc chart display mode\"\n variant=\"tertiary\"\n size=\"small\"\n />\n \n )}\n
\n No Data available
\n\n {!hasError && !isLoading && havocData?.length !== 0 && (\n <>\n {}}\n isInteractive={false}\n />\n
\n \n
\n Routes Run
\n\n
\n No Data available
\n\n
\n )}\n {showRoutes && branchConfig && fruitConfig && (\n \n
\n )}\n \n
\n Player Comparison
\n\n
\n No comparison data available
\n\n {rootPage && (\n \n \n {rootPage} \n \n / \n {activePage} \n \n )}\n
\n {showPlayerName ||\n showTeamName ||\n (customTitle?.length > 0 && (\n \n
\n ))}\n {children && \n {showPlayerName && playerNameAndPosition}\n {showTeamName && teamName}\n {customTitle && customTitle}\n
\n{children}
}\n {`Alignment Position${\n alignmentSnaps?.length > 1 ? 's' : ''\n }`}
\n- \n {alignmentSnaps &&\n alignmentSnaps.map((snap) => (\n
Height
\nWeight
\nCollege class
\nHome town
\nHome state
\nHigh school
\nRecruiting class
\nRecruiting 247 ranking
\nRecruiting composite ranking
\nRecruiting re-ranking
\n{`College${offered?.length > 1 ? 's' : ''} Offered`}
\n\n {offered?.length > 0 && (\n{offer}
\n ))}\n target={\n{`Alignment Position${\n alignmentSnaps?.length > 1 ? 's' : ''\n }`}
\n- \n {alignmentSnaps &&\n alignmentSnaps?.map((snap) => (\n
Height
\nWeight
\nHome town
\nHome state
\nHigh School
\n{`College${attended?.length > 1 ? 's' : ''}`}
\n- \n {attended &&\n attended.map((atten) =>
- {atten} )}\n {attended?.length === 0 && TABLE_NULL}\n
\n
\n Player Information
\n\n setDisplaySummaryOpen(!displaySummaryOpen)}\n variant=\"secondary\"\n shape=\"pill\"\n size=\"small\"\n icon={displaySummaryOpen ? 'ChevronUp' : 'ChevronDown'}\n isDisabled={isLoading}\n title=\"ChevronUp\"\n />\n
\n No Data available
\nError loading data
\n\n {title} \n {info1} \n
\n \n {secondaryTitle} \n {info2} \n
\n {`Image width: ${width.toFixed()}`}
\n \n \n \n \n \n {error && !loading && (\n \n \n )}\n {data?.passEvents?.edges?.length === 0 && !loading && (\n \n \n )}\n \n \n \n \n
\n \n \n \n \n
\n \n
\n \n No Data available
\n\n \n \n setShowPasses(!showPasses)}\n checked={showPasses}\n />\n \n setColorMode(selectedOption.value)\n }\n value={PASS_PLACEMENT_COLOR_OPTIONS.find(\n (item) => item.value === colorMode\n )}\n isSearchable={false}\n />\n item.value === aspectRatio\n )}\n isSearchable={false}\n />\n \n \n
\n \n \n {tileTitle}\n
\n\n {!error && !loading && data && (\n
\n \n )}\n \n
\n )}\n {linkHref && (\n \n {header && (\n \n \n {bodyContent}\n \n
\n );\n};\n\nAccordionTile.propTypes = {\n id: PropTypes.string,\n header: PropTypes.node,\n body: PropTypes.node,\n // is the accordion expanded by default?\n isExpandedDefault: PropTypes.bool,\n // do we mount/load the content of the accordion once expanded or not?\n isMount: PropTypes.bool,\n saveState: PropTypes.bool,\n};\n\nAccordionTile.defaultProps = {\n id: 'accordion',\n header: null,\n body: <>,\n isExpandedDefault: false,\n isMount: false,\n saveState: false,\n};\n\nexport default AccordionTile;\n","// user groups from\n// https://admin.statsbomb.com/\nconst USER_GROUP = {\n STATSBOMB: 'statsbomb',\n};\n\nconst USER_ROLES = {\n VIDEO_CUSTOMER: 'Video Customer',\n};\n\nconst VIDEO_JWT_CLAIMS = 'https://video.statsbomb.com/jwt/claims';\n\nexport { USER_GROUP, USER_ROLES, VIDEO_JWT_CLAIMS };\n","import { styled } from 'styled-components';\n\nexport const EmbeddedVideo = styled.div`\n height: 449px;\n\n iframe {\n height: 100%;\n width: 100%;\n }\n`;\nEmbeddedVideo.displayName = 'EmbeddedVideo';\n\nexport const BasicTableWrapper = styled.div`\n table {\n padding: 0.0625rem 0 0.125rem 0;\n }\n`;\nBasicTableWrapper.displayName = 'BasicTableWrapper';\n\nexport const PlaylistContainer = styled.div`\n width: 100%;\n border-top: ${({ theme }) =>\n `0.5rem solid ${theme.colours.canvas.primary.main}`};\n`;\n\nexport const StatsBlock = styled.div`\n display: flex;\n gap: 0.5rem;\n font-size: 0.8125rem;\n padding: 1rem;\n min-height: 7.3125rem;\n flex-direction: column;\n\n @media (min-width: 1440px) {\n flex-direction: row;\n }\n @media (max-width: 1028px) {\n flex-direction: row;\n }\n\n a {\n color: ${({ theme }) => theme.colours.ink.primary.main};\n text-decoration: underline;\n }\n\n a:hover {\n color: ${({ theme }) => theme.colours.ink.highlight.main};\n }\n`;\n\nexport const StatsBlockLeftColumn = styled.div`\n display: flex;\n gap: 3.2rem;\n flex-direction: row;\n`;\n\nexport const StatsBlockRightColumn = styled.div`\n @media (min-width: 1440px) {\n border-left: ${({ theme }) =>\n `1px solid ${theme.colours.canvas.primary.main}`};\n padding-left: 1rem;\n margin-left: 1rem;\n }\n @media (max-width: 1028px) {\n border-left: ${({ theme }) =>\n `1px solid ${theme.colours.canvas.primary.main}`};\n padding-left: 1rem;\n margin-left: 1rem;\n }\n border-left: ${({ theme }) =>\n `1px solid ${theme.colours.canvas.primary.main}`};\n padding-left: 1rem;\n margin-left: 1rem;\n`;\n\nexport const StatsBlockItemHeader = styled.div`\n color: ${({ theme }) =>\n theme.applyOpacity(theme.colours.ink.primary.main, 'secondary')};\n font-size: 0.625rem;\n padding-bottom: 0.5rem;\n`;\n\nexport const StatsBlockItem = styled.div`\n color: ${({ theme }) =>\n theme.applyOpacity(theme.colours.ink.primary.main, 'secondary')};\n font-size: 0.75rem;\n`;\n\nexport const OutcomeRoundel = styled.div`\n position: relative;\n padding-left: 1rem;\n\n &::before {\n position: absolute;\n left: 0;\n top: 0.125rem;\n content: '';\n border: ${({ theme, $color }) =>\n `${$color ? '5px' : '0px'} solid ${\n $color || theme.colours.ink.primary.main\n }`};\n border-radius: 50%;\n }\n`;\n\nexport const StatsPlayersWrapper = styled.div`\n display: flex;\n gap: 1rem;\n width: max-content;\n`;\n\nexport const VideoStyleWrapper = styled.div`\n aside {\n // sticky header for playlist\n ol {\n overflow: auto;\n max-height: 17.5rem;\n }\n }\n`;\n","/* eslint-disable react/forbid-prop-types */\nimport React, { useEffect } from 'react';\nimport { ButtonIcon } from '@statsbomb/kitbag-components';\nimport PropTypes from 'prop-types';\nimport { useKitbagAuth } from '@statsbomb/kitbag-auth';\nimport {\n Playlist,\n VideoKeyBoardShortcutProvider,\n VideoPlay,\n usePlaylistCurrentlySelected,\n} from '@statsbomb/video-client-js';\nimport Tile from '../Tile/Tile';\nimport {\n USER_GROUP,\n USER_ROLES,\n VIDEO_JWT_CLAIMS,\n} from '../../utils/constants/auth';\nimport useQueryString from '../../utils/hooks/useQueryString';\nimport DownloadCSVButton from '../buttons/DownloadCSV';\nimport GoTo from '../buttons/GoTo';\nimport {\n StatsBlockItem,\n PlaylistContainer,\n VideoStyleWrapper,\n} from './VideoTile.styles';\n\nconst VideoTile = ({\n children,\n data,\n title,\n subTitle,\n gotoLink,\n isGotoDisabled,\n handlePlaylistChange,\n handleClose,\n downloadData,\n downloadHeaders,\n dataTransformFunction,\n}) => {\n const { user } = useKitbagAuth();\n const [showClipInfo, setShowClipInfo] = useQueryString('clipInfo', true);\n const [showVideo, setShowVideo] = useQueryString('video', true);\n const [currentlyPlayingPlay] = usePlaylistCurrentlySelected();\n\n const isAuthorised =\n user['https://statsbomb.com/accountID'] === USER_GROUP.STATSBOMB ||\n user[VIDEO_JWT_CLAIMS]?.roles.includes(USER_ROLES.VIDEO_CUSTOMER);\n\n const currentEventData = data?.find(\n (i) => i?.play?.id === currentlyPlayingPlay?.id\n );\n\n if (currentEventData === null) {\n handleClose();\n }\n\n useEffect(() => {\n handlePlaylistChange(currentlyPlayingPlay);\n }, [currentlyPlayingPlay]);\n\n // focus on video for keyboard\n useEffect(() => {\n const observerCallback = (mutationsList) => {\n mutationsList.forEach((mutation) => {\n if (mutation.type === 'childList') {\n Array.from(mutation.addedNodes).some((node) => {\n if (node.tagName && node.tagName.toLowerCase() === 'video') {\n node.focus(); // Add focus to the video element\n return true; // Exit loop early if a video element is found\n }\n return false;\n });\n }\n });\n };\n\n const observer = new MutationObserver(observerCallback);\n observer.observe(document.body, { childList: true, subtree: true });\n\n return () => {\n observer.disconnect();\n };\n }, []);\n\n const currentEventFromPlaylist = dataTransformFunction(currentEventData);\n const videoTitle = currentEventFromPlaylist?.title;\n const videoSubTitle = currentEventFromPlaylist?.game;\n\n return (\n \n
\n {title || videoTitle}
\n\n {subTitle || videoSubTitle} \n
\n \n {data && children && (\n setShowClipInfo(!showClipInfo)}\n icon=\"Faq\"\n size=\"small\"\n variant=\"secondary\"\n off={!showClipInfo}\n title={showClipInfo ? 'Hide Event Info' : 'Show Event Info'}\n />\n )}\n {isAuthorised && data && (\n setShowVideo(!showVideo)}\n icon=\"Video\"\n size=\"small\"\n variant=\"secondary\"\n off={!showVideo}\n title={showVideo ? 'Hide Video Panel' : 'Show Video Panel'}\n />\n )}\n {downloadData && downloadHeaders && (\n
\n \n
\n \n \n {outcome?.value && (\n <>\n Outcome \n \n {outcome?.value}\n \n \n )}\n
\n \n Passer \n \n {passer?.value}\n \n
\n )}\n\n {target?.value && (\n \n Target \n \n {target?.value}\n \n
\n )}\n \n {tileTitle}\n
\n\n {!error && !loading && data && fileName && (\n
\n \n
\n )}\n {linkHref && (\n \n {breadcrumb}\n \n \n \n \n \n \n {hasError && !isLoading && chartData?.length === 0 && (\n \n \n )}\n {isLoading && (\n \n \n \n )}\n e?.play?.id)}\n selectedEventId={selectedEventId}\n displayHeatMap={graphOption === GRAPH_OPTION_HEATMAP}\n displayPassPaths={\n graphOption === GRAPH_OPTION_PASS_PATHS\n }\n displayYPassRelative={displayYPassRelative}\n coloringOption={coloringOption}\n competitionLevel={competitionLevel}\n orientation={selectedRotation}\n marginOverride={{\n top: 0,\n left: 0,\n right: 8,\n bottom: 8,\n }}\n redrawSelection={isDragActive}\n idSuffix=\"main\"\n />\n {displayKey && (\n \n
\n )}\n \n {isDragActive && selectedEvents.length > 1 && (\n \n Clear Selection\n \n )}\n {\n if (selectedEvents.length === 0) {\n videoActive.current = true;\n }\n setVideoOpen(true);\n }}\n numberOfPlays={\n selectedEvents.length > 0\n ? selectedEvents.length\n : chartData?.length\n }\n isDisabled={\n chartData?.length === 0 || isLoading || isVideoVisible\n }\n variant={isDragActive ? 'primary' : 'secondary'}\n />\n\n \n
\n No Data available
\n\n \n {!hasError && !isLoading && (\n <>\n {isVideoVisible && (\n <>\n \n \n Player Selection\n \n }\n body={\n \n \n }\n isExpandedDefault\n saveState\n />\n \n )}\n \n )}\n \n
\n \n \n \n \n \n Settings\n \n }\n body={\n \n \n {dataFilters}\n \n \n \n \n {\n setGraphOption(selectedOption.value);\n clearSelectionCloseVideo();\n }}\n value={GRAPH_OPTIONS.find(\n (item) => item.value === graphOption\n )}\n isSearchable={false}\n menuPosition=\"static\"\n />\n \n \n {\n setColoringOption(selectedOption.value);\n clearSelectionCloseVideo();\n }}\n value={COLORING_OPTIONS_TEAM.find(\n (item) => item.value === coloringOption\n )}\n isSearchable={false}\n menuPosition=\"static\"\n />\n \n \n \n setSelectedRotation(selectedOption.value)\n }\n value={ROTATION_OPTIONS.find(\n (f) => f.value === selectedRotation\n )}\n isSearchable={false}\n menuPosition=\"static\"\n />\n \n \n {\n const newValue =\n keyFilter === selectedOption.value\n ? ''\n : selectedOption.value;\n setKeyFilter(newValue);\n clearSelectionCloseVideo();\n }}\n value={PASS_OUTCOME_OPTIONS.find(\n (item) => item.value === keyFilter\n )}\n isSearchable={false}\n menuPosition=\"static\"\n />\n \n \n {\n setTargetAlignment(selectedOption.value);\n }}\n value={TARGET_ALIGNMENT_OPTIONS.find(\n (item) => item.value === targetAlignment\n )}\n isSearchable={false}\n menuPosition=\"static\"\n />\n \n \n }\n isExpandedDefault\n saveState\n />\n
\n\n \n {title && \n {catsToChip.map((category) => (\n categoryChipClicked(category.key)}\n disabled={isDisabled}\n />\n ))}\n {posToChip.map((position) => (\n positionChipClicked(position.apiCode)}\n disabled={isDisabled}\n />\n ))}\n \n
\n );\n};\n\nPositionChips.propTypes = {\n // position definitions: an array of either Roster positions or alignment positions\n // these should have been supplemented with label and tooltip for chip displaying\n // they also need to have an isSelected boolean corresponding to the selectedPositions state object\n // for which setSelectedPositions applies\n positionDefinitions: PropTypes.arrayOf(\n PropTypes.shape({\n apiCode: PropTypes.oneOf(ALL_POSITION_CODES),\n positionCategory: PropTypes.oneOf(Object.keys(POSITION_CATEGORIES)),\n label: PropTypes.string,\n tooltip: PropTypes.string,\n isSelected: PropTypes.bool,\n })\n ).isRequired,\n // clicking the more button opens the accompanying modal\n openModal: PropTypes.func.isRequired,\n // callback function when a position chip is clicked\n setSelectedPositions: PropTypes.func.isRequired,\n // optional section title\n title: PropTypes.string,\n};\n\nPositionChips.defaultProps = {\n title: null,\n};\n\nexport default PositionChips;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ConfirmationDialog, ButtonCheck } from '@statsbomb/kitbag-components';\nimport { isEmpty, uniq } from 'lodash';\nimport {\n PositionGroup,\n PositionCategory,\n PositionModalContent,\n PositionModalBigWrapper,\n} from './PositionFilter.styles';\nimport PositionIcon from '../PositionIcon/PositionIcon';\nimport { POSITION_ICON_SIZES } from '../PositionIcon/PositionIcon.constants';\nimport { ALL_POSITION_CODES } from './PositionFilter.constants';\nimport { POSITION_CATEGORIES } from '../../utils/constants/positions';\n\nconst PositionModal = ({\n isOpen,\n positionDefinitions,\n setDialogPositions,\n onConfirm,\n asColumn,\n isRosterPositions,\n}) => {\n const resetPositions = () => {\n const selectedPositions = positionDefinitions\n .filter((p) => p.isSelected)\n .map((p) => p.apiCode);\n setDialogPositions(selectedPositions);\n };\n\n const dialogPositions = positionDefinitions\n .filter((p) => p.isSelectedDialog)\n .map((p) => p.apiCode);\n // disable the confirm button if nothing is selected\n const isDisabled = isEmpty(dialogPositions);\n\n const onCategoryClick = (categoryKey, isChecked) => {\n const catPositions = positionDefinitions\n .filter((p) => p.positionCategory === categoryKey)\n .map((p) => p.apiCode);\n if (isChecked) {\n const newSelection = uniq(dialogPositions.concat(catPositions));\n setDialogPositions(newSelection);\n } else {\n const updatedSelection = dialogPositions.filter(\n (d) => !catPositions.includes(d)\n );\n setDialogPositions(updatedSelection);\n }\n };\n\n const onPositionClick = (positionApiCode, isChecked) => {\n if (isChecked) {\n const newSelection = dialogPositions.concat(positionApiCode);\n setDialogPositions(newSelection);\n } else {\n const updatedSelection = dialogPositions.filter(\n (d) => d !== positionApiCode\n );\n setDialogPositions(updatedSelection);\n }\n };\n\n const positionCategories = Object.values(POSITION_CATEGORIES).map((cat) => {\n const catPositions = positionDefinitions.filter(\n (p) => p.positionCategory === cat.key\n );\n const allSelected = catPositions.every((p) => p.isSelectedDialog);\n const someSelected = catPositions.some((p) => p.isSelectedDialog);\n return { ...cat, positions: catPositions, allSelected, someSelected };\n });\n\n const allPositionsSelected = positionDefinitions.every(\n (p) => p.isSelectedDialog\n );\n const somePositionsSelected = positionDefinitions.some(\n (p) => p.isSelectedDialog\n );\n\n const onAllNoneClick = () => {\n if (allPositionsSelected) {\n setDialogPositions([]);\n } else {\n const updatedSelection = positionDefinitions.map((p) => p.apiCode);\n setDialogPositions(updatedSelection);\n }\n };\n\n const getPositionIcon = (position) => {\n if (isRosterPositions) {\n return (\n {title}
}\n\n The template controls which metrics are displayed on the radar spokes.\n
\n\n To only show data when a player lined up at a certain position, use the\n ‘By Alignment’ filter and select a position.\n
\n \n );\n const templateLabel = (\n <>\n Template\n\n \n \n \n \n \n \n \n \n \n
\n );\n};\n\nexport default PlayerRadar;\n","import { gql } from '@apollo/client';\nimport {\n getContextQueryVariables,\n getContextFilterClientExports,\n getContextFiltersQueryArguments,\n} from '../../../utils/helpers/contextFilters';\n\nexport const GET_PLAYER_PATHS = gql`\n query GetPlayerPaths(\n $teamId: Int!\n $competitionId: Int!\n $seasonId: Int!\n $playerId: Int!\n ${getContextQueryVariables()}\n ) {\n selectedTeamId @client @export(as: \"teamId\")\n selectedCompetitionId @client @export(as: \"competitionId\")\n selectedSeasonId @client @export(as: \"seasonId\")\n selectedPlayerId @client @export(as: \"playerId\")\n ${getContextFilterClientExports()}\n\n playerPlays(\n first: 1000\n playerIds: [$playerId]\n filters: {\n seasonId: $seasonId\n competitionId: $competitionId\n teamIds: [$teamId]\n ${getContextFiltersQueryArguments()}\n }\n ) {\n totalCount\n edges {\n node {\n play {\n id\n }\n player {\n id\n name\n }\n team {\n name\n }\n movementPath {\n x\n y\n }\n game {\n id\n }\n routeRun\n target\n }\n }\n }\n }\n`;\n","const ROUTES_Y_MODES = {\n FIELD: 'field',\n SNAP: 'snap',\n ORIGIN: 'path orgin',\n};\nconst ROUTES_Y_OPTIONS = [\n { value: ROUTES_Y_MODES.FIELD, label: 'Position on Field' },\n { value: ROUTES_Y_MODES.SNAP, label: 'Relative to Snap' },\n { value: ROUTES_Y_MODES.ORIGIN, label: 'Relative to Origin' },\n];\n\n// pushes info back from pathing into the snap array, for summary tables\nconst addRouteInfo = function (snapDatum, pathsData, selectedYMode) {\n const playerPlayDatum = pathsData.find(\n (m) => m.play?.id === snapDatum.play.id,\n selectedYMode\n );\n if (playerPlayDatum) {\n const routeOrigin = playerPlayDatum.movementPath[0];\n const routeEnd =\n playerPlayDatum.movementPath[playerPlayDatum.movementPath.length - 1];\n const snapOrigin = { x: snapDatum.x, y: snapDatum.y };\n\n let dx = 0;\n let dy = 0;\n if (selectedYMode === ROUTES_Y_MODES.ORIGIN) {\n dx = -routeOrigin.x;\n dy = -routeOrigin.y;\n }\n if (selectedYMode === ROUTES_Y_MODES.SNAP) {\n dx = -snapOrigin.x;\n dy = -snapOrigin.y;\n }\n if (selectedYMode === ROUTES_Y_MODES.FIELD) {\n dx = -snapOrigin.x;\n }\n const path = playerPlayDatum.movementPath.map((m) => ({\n x: m.x + dx,\n y: m.y + dy,\n }));\n\n const modifiedDatum = {\n ...snapDatum,\n routeRun: playerPlayDatum?.routeRun,\n target: playerPlayDatum?.target,\n path,\n dxRoute: routeEnd.x - routeOrigin.x,\n dyRoute: routeEnd.y - routeOrigin.y,\n dyRouteAbs: Math.abs(routeEnd.y - routeOrigin.y),\n snapPathX: snapDatum?.freezeFrames[0].x,\n snapPathY: snapDatum?.freezeFrames[0].y,\n };\n return modifiedDatum;\n }\n const modifiedDatum = {\n ...snapDatum,\n path: null,\n };\n return modifiedDatum;\n};\n\nexport { ROUTES_Y_OPTIONS, ROUTES_Y_MODES, addRouteInfo };\n","import { join } from 'lodash';\nimport { colorDot } from './SnapDistribution.drawing';\n\nconst getSVGPath = function (pathArray, fieldSettings) {\n const pathOrigin = pathArray[0];\n const pathAfter = pathArray.slice(1);\n const pathString = `M${pathOrigin.x * fieldSettings.pxPerYard} ${\n pathOrigin.y * fieldSettings.pxPerYard\n } `;\n const pathElements = pathAfter.map(\n (m) => `L${m.x * fieldSettings.pxPerYard} ${m.y * fieldSettings.pxPerYard}`\n );\n const fullPath = pathString + join(pathElements, ' ');\n\n return fullPath;\n};\n\nconst addPaths = function (\n svgG,\n pathsData,\n overrides,\n colorMode,\n visPalette,\n selectedPlay,\n setSelectedPlay\n) {\n const safePaths =\n pathsData && pathsData.filter((p) => p.path && p.path.length > 0);\n svgG\n .selectAll('path')\n .data(safePaths)\n .enter()\n .append('svg:path')\n .attr('d', (d) => getSVGPath(d.path, overrides))\n .attr('id', (d) => d.play.id)\n .attr('fill', 'transparent')\n .attr('stroke', (d) =>\n colorDot(d, colorMode, visPalette, d.play.id === selectedPlay)\n )\n .attr('class', 'route-path')\n .attr('stroke-width', '1px')\n .attr('opacity', 0.6)\n .on('click', (_, d) => setSelectedPlay(d.play.id));\n};\n\nconst getSVGDot = function (pathArray, fieldSettings, isX) {\n const pathOrigin = pathArray[0];\n return isX\n ? pathOrigin.x * fieldSettings.pxPerYard\n : pathOrigin.y * fieldSettings.pxPerYard;\n};\n\nconst addOriginDots = function (\n svgG,\n pathsData,\n overrides,\n colorMode,\n visPalette\n) {\n svgG\n .selectAll('circle')\n .data(pathsData)\n .enter()\n .append('circle')\n .attr('cx', (d) => getSVGDot(d.path, overrides, true))\n .attr('cy', (d) => getSVGDot(d.path, overrides, false))\n .attr('r', 3)\n .attr('fill', 'transparent')\n .attr('fill', (d) => colorDot(d, colorMode, visPalette))\n .attr('stroke', 'none');\n};\n\nexport { addPaths, addOriginDots };\n","import { styled } from 'styled-components';\n\nexport const StyledRoutesChart = styled.svg`\n width: 100%;\n\n .route-path:hover {\n stroke: ${({ theme, $isInteractive }) =>\n $isInteractive && theme.colours.interface.main};\n }\n`;\n","import PropTypes from 'prop-types';\nimport React, { useEffect } from 'react';\nimport { useReactiveVar } from '@apollo/client';\nimport { useTheme } from 'styled-components';\nimport {\n defaultFieldSettings,\n FIELD_Y_YARDS,\n FIELD_Y_YARDS_RELATIVEY,\n ROTATIONS,\n} from '../../../utils/constants/charting';\nimport { useD3 } from '../../../utils/hooks/useD3';\nimport { ROUTES_Y_MODES } from './PlayerRoutesSummary.dataManipulation';\nimport { addOriginDots, addPaths } from './PlayerRoutesChart.drawing';\nimport { mf_LeagueLevel } from '../../../apollo';\nimport { rotateScaleZoom } from '../../../utils/visualisations/rotateScaleZoom';\nimport {\n addLoSField,\n addLoSFieldYRelative,\n} from '../../../utils/helpers/fieldVariants';\nimport { drawPlayerHeatmap } from './SnapDistribution.drawing';\nimport { getHeatmapData } from './PlayerSnap.dataManipulation';\nimport { StyledRoutesChart } from './PlayerRoutesChart.styles';\nimport Dimmer from '../../../components/Dimmer/Dimmer';\nimport { DOT_COLOR_MODE } from './SnapDistributionChart.constants';\nimport BannerError from '../../../components/Banners/Banner.Error';\nimport { getEnrichedTheme } from '../../../utils/visualisations/visPalettes';\nimport LoaderLabelled from '../../../components/LoaderLabelled/LoaderLabelled';\n\nconst PlayerRoutesChart = ({\n id,\n data,\n isError,\n isLoading,\n orientation,\n yMode,\n showPaths,\n showDots,\n showHeatmap,\n dotColorMode,\n pathColorMode,\n selectedPlay,\n setSelectedPlay,\n isInteractive,\n marginOverride,\n}) => {\n let svg;\n const kbTheme = useTheme();\n const theme = getEnrichedTheme(kbTheme);\n const competitionLevel = useReactiveVar(mf_LeagueLevel);\n const visPalette = theme.colours.visualisations;\n\n const visibleFieldX = 70; // yds, 20 pre LoS and 50 post LoS\n const heatmapX = 1; // heatmap bar should display 1 yd wide\n const heatmapXOffset = 0.5; // yds from visible field boundary\n const visibleHeatmapX = showHeatmap ? heatmapX + heatmapXOffset : 0;\n const visibleFieldY =\n yMode === ROUTES_Y_MODES.FIELD ? FIELD_Y_YARDS : FIELD_Y_YARDS_RELATIVEY;\n const margin = {\n top: 25,\n right: 25,\n bottom: 25,\n left: 25,\n ...marginOverride,\n };\n const overrides = {\n ...defaultFieldSettings,\n visPalette,\n numbersOrientateWithField: false,\n showFieldNumbers: false,\n showEdgeNumbers: true,\n colorEndZoneHome: 'transparent',\n colorEndZoneAway: 'transparent',\n showGoalPosts: false,\n competitionLevel,\n horizontal: true,\n orientation,\n X_YARDS: visibleFieldX,\n LOS_X: 20,\n };\n const viewPortX =\n orientation === ROTATIONS.HORIZONTAL\n ? visibleFieldX + visibleHeatmapX\n : visibleFieldY;\n const viewPortY =\n orientation === ROTATIONS.HORIZONTAL\n ? visibleFieldY\n : visibleFieldX + visibleHeatmapX;\n const viewboxWidth =\n viewPortX * overrides.pxPerYard + margin.left + margin.right;\n\n const viewboxHeight =\n viewPortY * overrides.pxPerYard + margin.top + margin.bottom;\n const viewbox = `0 0 ${viewboxWidth} ${viewboxHeight}`;\n\n // this level declares anything static\n const ref = useD3((s) => {\n svg = s;\n });\n\n useEffect(() => {\n svg.attr('viewBox', viewbox);\n svg.selectAll('g').remove();\n svg.selectAll('rect').remove();\n\n const gBase = svg\n .append('g')\n .attr('id', `${id}-within-the-margins`)\n .attr('transform', `translate(${margin.left} ${margin.top})`);\n\n const rszG = rotateScaleZoom({\n baseG: gBase,\n idPrefix: id,\n viewPortWidth: viewPortX * overrides.pxPerYard,\n viewPortHeight: viewPortY * overrides.pxPerYard,\n cropToViewport: false,\n orientation,\n fieldWidth: visibleFieldX * overrides.pxPerYard,\n fieldHeight: visibleFieldY * overrides.pxPerYard,\n targetFieldX: (visibleFieldX * overrides.pxPerYard) / 2,\n targetFieldY: (visibleFieldY * overrides.pxPerYard) / 2,\n scaleFactor: 1,\n bindEdges: false,\n fieldBoundary: 0,\n addZoom: false,\n zoomableGId: `${id}-zoomable-g`,\n resetButtonId: null,\n });\n\n // ADD BASE LAYER FOR HEATMAP\n const heatmapG = rszG.append('g').attr('id', `${id}-heatmap-layer`);\n\n // ADD THE FIELD\n const fieldG = rszG\n .append('g')\n .attr('id', `${id}-field-layer`)\n .attr(\n 'transform',\n `translate(${visibleHeatmapX * overrides.pxPerYard} 0)`\n );\n if (yMode === ROUTES_Y_MODES.FIELD) {\n fieldG.call(addLoSField, overrides);\n } else {\n fieldG.call(addLoSFieldYRelative, overrides);\n }\n\n // ROUTES LAYER\n const yShift =\n yMode === ROUTES_Y_MODES.ORIGIN || yMode === ROUTES_Y_MODES.SNAP\n ? (visibleFieldY / 2) * overrides.pxPerYard\n : 0;\n const xShift = overrides.LOS_X * overrides.pxPerYard;\n const routesG = fieldG\n .append('g')\n .attr('id', `${id}-routes-G`)\n .attr('transform', `translate(${xShift},${yShift})`);\n if (data) {\n if (showDots) {\n routesG.call(addOriginDots, data, overrides, dotColorMode, visPalette);\n }\n if (showPaths) {\n routesG.call(\n addPaths,\n data,\n overrides,\n pathColorMode,\n visPalette,\n selectedPlay,\n setSelectedPlay\n );\n }\n\n if (showHeatmap) {\n const showDy =\n yMode === ROUTES_Y_MODES.ORIGIN || yMode === ROUTES_Y_MODES.SNAP;\n const heatmapData = getHeatmapData(data, showDy);\n drawPlayerHeatmap(\n heatmapG,\n heatmapData,\n showDy,\n 'routes-heatmap-zone',\n overrides,\n '', // TODO\n 0,\n visPalette,\n id,\n theme.isDark\n );\n }\n }\n }, [data, orientation, yMode, visPalette, showHeatmap, theme.isDark]);\n\n return (\n <>\n {!isLoading && isError && (\n \n \n \n \n <>\n {!isError && !isLoading && (\n setDisplayKey(!displayKey)}\n />\n )}\n \n \n {showTrait && templateConfigTrait && (\n \n \n \n \n \n \n {isError && !isLoading && (\n \n {templateConfigTrait && !isError && showTrait && (\n \n \n
\n \n \n \n \n )}\n {showTable && (\n <>\n
\n
\n \n )}\n \n
\n )}\n {templateConfigPerf && !isError && showPerf && (\n {`${selectedTemplateName} / Trait`}
\n\n
\n \n )}\n
\n \n \n \n \n )}\n {showTable && perfTableData && (\n \n \n
\n )}\n \n {`${selectedTemplateName} / Performance`}
\n\n \n {!isError && (\n \n {\n setShowNoTemplateError(false);\n setSelectedTemplateName(selectedOption.value);\n }}\n value={templateOptions.find(\n (opt) => opt.value === selectedTemplateName\n )}\n isSearchable={false}\n isLoading={!templateOptions || isLoading}\n menuPosition=\"static\"\n />\n setShowTrait(!showTrait)}\n checked={showTrait}\n disabled={!showPerf || isStatsLoading}\n />\n setShowPerf(!showPerf)}\n checked={showPerf}\n disabled={!showTrait || isStatsLoading}\n />\n \n }\n isExpandedDefault\n isMount\n />\n )}\n\n Filters\n }\n body={\n \n <>\n Settings\n }\n body={\n \n setShowTable(!showTable)}\n checked={showTable}\n />\n {isStatsLoadingLA ? (\n \n \n ) : (\n \n setShowLeagueAverage(!showLeagueAverage)\n }\n checked={showLeagueAverage}\n />\n )}\n setUseTeamColors(!useTeamColors)}\n checked={useTeamColors}\n />\n \n }\n isExpandedDefault\n isMount\n />\n \n
\n \n \n \n setAllPlays(true)}\n shape=\"pill\"\n variant={allPlays ? 'primary' : 'ghost'}\n disabled={isLoading}\n >\n All Plays\n \n setAllPlays(false)}\n shape=\"pill\"\n variant={!allPlays ? 'primary' : 'ghost'}\n disabled={isLoading}\n >\n By Alignment\n \n \n
\n\n {!allPlays && (\n No Data available
\nSelected Path
\n\n
\n \n \n \n \n \n {error && !loading && (\n \n \n )}\n {mergedData?.length === 0 && (\n setSelectedZones(null)}>\n \n )}\n\n \n setDisplayKey(!displayKey)}\n />\n \n
\n No Data available
\n\n \n \n Snap Distribution Settings\n \n }\n body={\n \n setPositionX(!st_PositionX)}\n checked={st_PositionX}\n />\n \n setSnapDirection(selectedOption.value)\n }\n value={ROTATION_OPTIONS.find(\n (f) => f.value === snapDirection\n )}\n isSearchable={false}\n />\n \n setColorMode(selectedOption.value)\n }\n value={DOT_COLOR_MODES.find(\n (f) => f.value === st_ColorMode\n )}\n isSearchable={false}\n />\n \n setHeatmapColorMode(selectedOption.value)\n }\n value={HEATMAP_COLOR_MODES.find(\n (f) => f.value === st_HeatmapColorMode\n )}\n isSearchable={false}\n />\n \n }\n isExpandedDefault\n saveState\n />\n\n {routeControls}\n\n {selectedEventObj && (\n
\n \n \n \n No data available for selected team
\n )}\n\n
\n \n {tileTitle}\n
\n\n {!error && !loading && data && (\n
\n \n )}\n \n
\n )}\n {linkHref && (\n \n \n \n \n \n {hasError && !isLoading && (\n \n {teamData && (\n <>\n \n \n setSelectedLT(selectedOption.value)\n }\n value={\n leftTacklesList.filter(\n (f) => f.value === selectedLT\n )[0]\n }\n />\n \n \n \n setSelectedLG(selectedOption.value)\n }\n value={\n leftGuardsList.filter(\n (f) => f.value === selectedLG\n )[0]\n }\n />\n \n \n \n setSelectedC(selectedOption.value)\n }\n value={\n centersList.filter(\n (f) => f.value === selectedC\n )[0]\n }\n />\n \n \n \n setSelectedRG(selectedOption.value)\n }\n value={\n rightGuardsList.filter(\n (f) => f.value === selectedRG\n )[0]\n }\n />\n \n \n \n setSelectedRT(selectedOption.value)\n }\n value={\n rightTacklesList.filter(\n (f) => f.value === selectedRT\n )[0]\n }\n />\n \n \n )}\n \n\n \n {isLoading && (\n \n \n )}\n \n \n \n \n {displayKey && (\n \n \n \n \n\n \n \n \n \n \n \n
\n \n
\n {`Summary of ${totalsOLFiltered?.plays} snaps`}
\n\n setDisplayKey(!displayKey)}\n />\n \n
\n \n \n {videoOpen && (\n vis.key === selectedBarKey)\n ?.position ||\n OLP_VIS_GAPS.find((vis) => vis.key === selectedBarKey)\n ?.gap\n } Pressures`}\n subTitle={`${selectedPlays.length} Plays`}\n data={formatPressuresVideoData(selectedPlays, visPalette)}\n handleClose={() => {\n setVideoOpen(false);\n setSelectedBarKey(null);\n }}\n />\n )}\n {!videoOpen && (\n Settings\n }\n body={\n \n \n setShowGapPressures(selectedOption.value)\n }\n value={\n PG_MODES.filter(\n (f) => f.value === showGapPressures\n )[0]\n }\n />\n \n setColorMode(selectedOption.value)\n }\n value={\n COLOR_MODES.filter((f) => f.value === colorMode)[0]\n }\n />\n setShowRawDots(!showRawDots)}\n checked={showRawDots}\n />\n \n }\n isExpandedDefault\n isMount\n />\n )}\n \n
\n \n {jerseyNumber}
\n {name}
\n {link && (\n \n {snapCount} plays
\n {(snapRate * 100).toFixed()}%
\n \n
\n \n
\n {handleClick && (\n \n \n
\n
\n \n );\n};\n\nDepthChartTable.propTypes = {\n // the data rows for the table\n data: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string,\n checked: PropTypes.bool,\n snapCount: PropTypes.number,\n snapRate: PropTypes.string,\n usageRate: PropTypes.string,\n link: PropTypes.string,\n opacity: PropTypes.number,\n })\n ),\n // function that is called when the redirect icon is clicked\n handleClick: PropTypes.func,\n // API value for the position the table is displaying (i.e. 'QUARTERBACK')\n positionApiKey: PropTypes.string.isRequired,\n // which icon to render in the header of the table\n headerIcon: PropTypes.string,\n // the formation role of position displayed in the table\n formationRole: PropTypes.string,\n // how many tables are rendered in the depth chart - used for styling purposes\n numberOfTables: PropTypes.number,\n // whether the table's rows are selectable\n selectableRows: PropTypes.bool,\n // callback function for selectable rows\n onChangeRow: PropTypes.func,\n // callback function for selectable header row\n onChangeHeader: PropTypes.func,\n // do we want a sticky header? if sticky, the table will scroll\n isHeadSticky: PropTypes.bool,\n};\n\nDepthChartTable.defaultProps = {\n data: [],\n handleClick: null,\n headerIcon: 'Radar',\n formationRole: '',\n numberOfTables: null,\n selectableRows: false,\n onChangeRow: undefined,\n onChangeHeader: undefined,\n isHeadSticky: true,\n};\n\nexport default DepthChartTable;\n","import { gql } from '@apollo/client';\nimport {\n getContextQueryVariables,\n getContextFilterClientExports,\n getContextFiltersQueryArguments,\n} from '../../../utils/helpers/contextFilters';\nimport { QUERY_CONTEXT } from './TeamDepthChart.constants';\n\nexport const GET_DEPTH_CHART_PLAYERS = gql`\n query GetDepthChart(\n $teamId: Int!\n $competitionId: Int!\n $seasonId: Int!\n $offense: Boolean!\n $groupByAlignment: Boolean!\n $personnel: PersonnelFilter\n ${getContextQueryVariables(QUERY_CONTEXT)}\n ) {\n selectedCompetitionId @client @export(as: \"competitionId\")\n selectedSeasonId @client @export(as: \"seasonId\")\n selectedTeamId @client @export(as: \"teamId\")\n ${getContextFilterClientExports(QUERY_CONTEXT)}\n\n depthChart(\n teamId: $teamId\n offense: $offense\n groupByAlignment: $groupByAlignment\n playFilters: {\n competitionId: $competitionId\n seasonId: $seasonId\n personnel: $personnel\n ${getContextFiltersQueryArguments(QUERY_CONTEXT)}\n }\n ) {\n players {\n player {\n id\n name\n }\n rosterPosition\n alignmentPosition\n snapCount\n snapRate\n usageRate\n lateDownsRate\n jerseyNumber\n }\n }\n }\n`;\n","import { useParams } from 'react-router-dom';\nimport { groupBy as _groupBy, orderBy } from 'lodash';\nimport { useQuery } from '@apollo/client';\nimport { SORT_DIRECTIONS } from '../../../utils/constants/sortDirections';\nimport { GET_DEPTH_CHART_PLAYERS } from './getDepthChartPlayers';\nimport {\n ALL_PACKAGES_OPTION,\n ALL_POSITIONS_MAP,\n OFFENSIVE_LINEMAN_POSITIONS,\n} from './TeamDepthChart.constants';\nimport { API_ROSTER_POSITION_KEYS } from '../../../utils/constants/api';\nimport { getDepthChartTeam } from './getDepthChartTeam';\nimport { getRadarPlayersStats } from './getRadarPlayersStats';\nimport { useGetTemplateDefinitions } from '../../player/PlayerRadar/PlayerRadar.hooks';\nimport { formatTemplateStatsAsRadarAxes } from '../../player/PlayerRadar/PlayerRadar.dataManipulation';\n\n// A hook to get all the depth chart team related data.\n// We don't want the team data to change when the user selects a package which\n// is why we need a separate query for the packages data and team snaps\nexport const useDepthChartTeam = (offense, teamType) => {\n // the team data query is slightly different between offense and defense personnel\n const GET_DEPTH_CHART_TEAM = getDepthChartTeam(teamType);\n\n const { data, loading, error } = useQuery(GET_DEPTH_CHART_TEAM, {\n variables: {\n offense,\n },\n });\n\n if (loading) {\n return { depthChartTeamLoading: true };\n }\n\n if (error) {\n return { depthChartTeamLoading: false, depthChartTeamError: error };\n }\n\n return { depthChartTeamLoading: false, depthChartTeamData: data.depthChart };\n};\n\nconst getPersonnel = (selectedPackage, offense) => {\n if (selectedPackage === ALL_PACKAGES_OPTION.value) {\n return null;\n }\n return {\n offensePackage: offense ? [selectedPackage] : null,\n defensePackage: offense ? null : [selectedPackage],\n };\n};\n\n// hook to get all the depth chart players related data and format it.\n// We need 2 queries because SMEs want some alignment positions to appear in roster mode\nexport const useDepthChartPlayers = (\n offense,\n groupByAlignment,\n selectedPackage\n) => {\n const { leagues, seasons, teams } = useParams();\n // get the tables priority order based on the combination of selected team and position types\n const personnel = getPersonnel(selectedPackage, offense);\n\n const {\n data: alignmentPositionsData,\n error: alignmentPositionsError,\n loading: alignmentPositionsLoading,\n } = useQuery(GET_DEPTH_CHART_PLAYERS, {\n variables: {\n offense,\n groupByAlignment: true,\n personnel,\n },\n notifyOnNetworkStatusChange: true,\n });\n\n const {\n data: rosterPositionsData,\n error: rosterPositionsError,\n loading: rosterPositionsLoading,\n } = useQuery(GET_DEPTH_CHART_PLAYERS, {\n // we don't need the roster query if we group by alignment\n skip: groupByAlignment,\n variables: {\n offense,\n groupByAlignment: false,\n personnel,\n },\n notifyOnNetworkStatusChange: true,\n });\n\n const alignmentData = alignmentPositionsData?.depthChart?.players || [];\n const rosterData = rosterPositionsData?.depthChart?.players || [];\n // when in roster mode, we only want to add the offensive lineman alignment positions\n const filteredAlignmentData = groupByAlignment\n ? alignmentData\n : alignmentData.filter((player) =>\n OFFENSIVE_LINEMAN_POSITIONS.includes(player.alignmentPosition)\n );\n // filter out offensive lineman because we specifically display them broken down by alignment\n const filteredRosterData = rosterData.filter(\n (player) =>\n player.rosterPosition !== API_ROSTER_POSITION_KEYS.OFFENSIVE_LINEMAN\n );\n const combinedData = [...filteredAlignmentData, ...filteredRosterData];\n // when in roster mode, we need to make sure all of our players have a rosterPosition value\n const formattedData = groupByAlignment\n ? combinedData\n : combinedData.map((player) => ({\n ...player,\n rosterPosition: player.rosterPosition || player.alignmentPosition,\n }));\n\n // filter out incomplete player results and group the rest by the appropriate position type\n const groupBy = groupByAlignment ? 'alignmentPosition' : 'rosterPosition';\n const sanitizedData = formattedData.filter((player) => player[groupBy]);\n const groupedData = _groupBy(sanitizedData, groupBy);\n\n const tablesData = Object.entries(groupedData).map(([group, players]) => {\n // order the results in each table\n const sortedData = orderBy(\n players,\n ['snapCount'],\n [SORT_DIRECTIONS.DESCENDING]\n );\n\n return {\n position: group,\n order: ALL_POSITIONS_MAP[group].displayOrder,\n data: sortedData.map((player) => ({\n id: player.player.id,\n name: `${player.jerseyNumber} - ${player.player.name}`,\n snapCount: player.snapCount,\n snapRate: (player?.snapRate * 100).toFixed(1),\n usageRate: (player?.usageRate * 100)?.toFixed(1),\n lateDownsRate: (player?.lateDownsRate * 100)?.toFixed(1),\n opacity: player.snapRate,\n link: `/player/overview/${leagues}/${seasons}/${teams}/${player.player.id}`,\n })),\n };\n });\n\n const error = alignmentPositionsError || rosterPositionsError;\n\n if (alignmentPositionsLoading || rosterPositionsLoading) {\n return { loading: true };\n }\n\n if (error) {\n return { loading: false, error };\n }\n\n return { loading: false, data: tablesData };\n};\n\nexport const useDepthChartRadars = (templatePosition, playerIds) => {\n const {\n templates,\n loading: templatesLoading,\n error: templatesError,\n } = useGetTemplateDefinitions();\n\n const selectedTemplate = templates?.find(\n (t) =>\n t.defaultFor.includes(templatePosition) ||\n t.specificPositions.includes(templatePosition)\n );\n const templateStatsNames = selectedTemplate?.stats.map((m) => m.name) || [];\n\n const templateConfig = formatTemplateStatsAsRadarAxes(\n selectedTemplate?.stats\n );\n\n const GET_RADAR_PLAYER_STATS = getRadarPlayersStats(templateStatsNames);\n const {\n data: playerStats,\n loading: playerStatsLoading,\n error: playerStatsError,\n } = useQuery(GET_RADAR_PLAYER_STATS, {\n skip: !templatePosition || !playerIds.length || !templateStatsNames.length,\n variables: {\n playerIds,\n },\n });\n\n const radarsLoading = templatesLoading || playerStatsLoading;\n const radarsError = templatesError || playerStatsError;\n const radarsData = playerStats?.playerStats.items || [];\n\n if (radarsLoading) {\n return { radarsLoading: true };\n }\n\n if (radarsError) {\n return { radarsLoading: false, radarsError };\n }\n\n return { radarsLoading: false, radarsData, templateConfig };\n};\n","import { styled } from 'styled-components';\n\nexport const StyledPersonnelDistributionBar = styled.div`\n display: flex;\n gap: 0.8rem;\n align-items: center;\n\n .label {\n width: 4.1rem;\n text-align: right;\n color: ${({ theme }) => theme.colours.ink.primary.main};\n ${({ theme }) => theme.typography.headingMedium};\n }\n\n .bar {\n flex: 1;\n\n ${({ theme, $indicator }) =>\n $indicator &&\n `\n > div {\n > div:first-of-type {\n div { \n &::after {\n content: '';\n position: absolute;\n top: 4px;\n right: -10px;\n border-top: 12px solid transparent;\n border-bottom: 12px solid transparent;\n border-left: 8px solid ${theme.colours.visualisations.dataObjects.default.n1.main};\n }\n }\n }\n }\n `}\n }\n\n .stats {\n display: flex;\n flex-direction: column;\n align-items: end;\n width: 8rem;\n\n .plays {\n ${({ theme }) => theme.typography.headingSmall};\n }\n\n .league-average {\n color: ${({ theme }) =>\n theme.applyOpacity(theme.colours.ink.primary.main, 'secondary')};\n ${({ theme }) => theme.typography.bodySmall};\n }\n }\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { PercentageBar } from '@statsbomb/kitbag-components';\nimport { useTheme } from 'styled-components';\nimport { StyledPersonnelDistributionBar } from './PersonnelDistributionBar.styles';\n\nconst PersonnelDistributionBar = ({\n snapCount,\n snapRate,\n leagueAverage,\n label,\n visibleMax,\n}) => {\n const theme = useTheme();\n\n // the values that drive the width of the bar and the position of the notch\n // Math.min to ensure we don't pass values over 100.\n const teamValue = (snapRate / visibleMax) * 100;\n const adjustedTeamValue = Math.min(teamValue, 100);\n const adjustedLeagueValue = Math.min((leagueAverage / visibleMax) * 100, 100);\n\n // the values to display\n const formattedTeamValue = (snapRate * 100).toFixed(1);\n const formattedLeagueValue = (leagueAverage * 100).toFixed(1);\n\n return (\n {label}
\n \n
\n \n
\n {`${formattedTeamValue}% [${snapCount}]`}
\n {formattedLeagueValue}%
\n \n \n \n \n \n \n \n \n {tablesFeedback && (\n \n {tablesFeedback}\n \n )}\n {!isPageLoading &&\n orderedTables.map((table) => (\n \n handleClick(table.position, table.data)\n }\n />\n ))}\n \n \n
\n \n \n \n download depth chart tables\n \n \n
\n \n\n \n \n handleOffense(true)}\n variant={offense ? 'primary' : 'ghost'}\n >\n Offense\n \n handleOffense(false)}\n variant={offense ? 'ghost' : 'primary'}\n >\n Defense\n \n \n \n handleAlignment(false)}\n variant={groupByAlignment ? 'ghost' : 'primary'}\n >\n Roster\n \n handleAlignment(true)}\n variant={groupByAlignment ? 'primary' : 'ghost'}\n >\n Alignment\n \n \n \n Only players with 10 or more plays will be\n shown in the depth chart below.\n \n }\n delay={200}\n isCondensed\n >\n
\n \n
\n \n Minimum 10 plays
\n\n \n \n \n \n \n \n download personnel distribution\n \n \n \n \n \n \n {personnelFeedback && (\n \n {personnelFeedback}\n \n )}\n \n \n \n \n \n
\n \n Personnel Distribution
\n\n
\n \n
\n Play % [Plays]
\n \n \n
\n League average
\n {label}
\n {`Show ${\n isFullyOpen ? 'top' : 'all'\n } ${expandButtonSuffix}`}
\n \n {isExpanded ? 'Show top 10 formations' : 'Show all formations'}\n
\n \n
\n );\n};\n\nexport default FormationSummaryTableKey;\n","import React, { useState } from 'react';\nimport { groupBy, orderBy, sumBy } from 'lodash';\nimport { useReactiveVar } from '@apollo/client';\nimport {\n Button,\n ButtonIcon,\n ButtonGroup,\n Grid,\n} from '@statsbomb/kitbag-components';\nimport { CSVLink } from 'react-csv';\nimport Dimmer from '../../../components/Dimmer/Dimmer';\nimport { mf_TeamDetails, mf_Teams } from '../../../apollo';\nimport Tile from '../../../components/Tile/Tile';\nimport ExportModal from '../../../components/ExportModal/ExportModal';\nimport {\n FormationSummaryPage,\n FormationSummaryPageHeader,\n FormationSummaryMainContent,\n FormationSummarySectionHeader,\n Controls,\n FormationSummaryChartContainer,\n} from './TeamFormationSummary.styles';\nimport AccordionTable from '../../../components/Tables/AccordionTable/AccordionTable';\nimport { SORT_DIRECTIONS } from '../../../utils/constants/sortDirections';\nimport FormationSummaryChart from '../../../visualisations/FormationSummaryChart/FormationSummaryChart';\nimport { useExportSeasonInfo } from '../../../utils/hooks/useExportSeasonInfo';\nimport FormationSummaryFormationTable from './FormationSummaryFormationTable';\nimport {\n getStatHeaders,\n orderStats,\n} from '../../../utils/helpers/stats.dataManipulation';\nimport {\n getFormationSummaryCsvData,\n getRowsToRender,\n} from './TeamFormationSummary.dataManipulation';\nimport {\n useTableDataByFormation,\n useTableDataByPersonnel,\n useBarChartDataByFormation,\n useBarChartDataByPersonnel,\n} from './TeamFormationSummary.hooks';\nimport useQueryString from '../../../utils/hooks/useQueryString';\nimport { useFormationSummaryStats } from './useFormationSummaryStats';\nimport { useTeamStatDefinitions } from './useTeamStatDefinitions';\nimport FormationSummaryChartKey from '../../../visualisations/FormationSummaryChart/FormationSummaryChartKey';\nimport { useTeamStatDistributions } from '../../../utils/hooks/useTeamStatDistributions';\nimport {\n PLAY_COUNT,\n FORMATION_SUMMARY_STICKY_COLUMNS,\n FORMATION_SUMMARY_STAT_DISTRIBUTION,\n} from './TeamFormationSummary.constants';\nimport FormationSummaryTableKey from './FormationSummaryTableKey';\nimport { KitbagPageGridHolder } from '../../../components/Layout/Layout.styles';\nimport LoaderLabelled from '../../../components/LoaderLabelled/LoaderLabelled';\n\nconst { ASCENDING, DESCENDING } = SORT_DIRECTIONS;\n\nconst TeamFormationSummary = () => {\n const teamId = useReactiveVar(mf_Teams);\n const teamDetails = useReactiveVar(mf_TeamDetails);\n const [isTeamMode, setIsTeamMode] = useQueryString('teamMode', true);\n const [isPersonnelMode, setIsPersonnelMode] = useQueryString(\n 'personnelMode',\n false\n );\n const [sortBy, setSortBy] = useQueryString('sortBy', PLAY_COUNT);\n const [sortDirection, setSortDirection] = useQueryString(\n 'sortDirection',\n DESCENDING\n );\n const [displayChartKey, setDisplayChartKey] = useQueryString(\n 'chartKey',\n true\n );\n const [displayTableKey, setDisplayTableKey] = useQueryString(\n 'tableKey',\n true\n );\n const [visibleStats, setVisibleStats] = useState({ 0: 'partial' });\n const [isExpanded, setIsExpanded] = useState(false);\n const { competitionSeason, seasonName } = useExportSeasonInfo({\n asObject: true,\n });\n\n const {\n data: statDistributions,\n loading: statDistributionsLoading,\n error: statDistributionsError,\n } = useTeamStatDistributions(FORMATION_SUMMARY_STAT_DISTRIBUTION);\n\n const {\n data: statDefinitions,\n loading: statDefinitionsLoading,\n error: statDefinitionsError,\n } = useTeamStatDefinitions(isPersonnelMode);\n\n const {\n data: teamStatsByFormation,\n loading: teamStatsByFormationLoading,\n error: teamStatsByFormationError,\n } = useFormationSummaryStats(\n teamId,\n ['FORMATION'],\n statDistributions,\n isTeamMode,\n isPersonnelMode\n );\n\n const {\n data: teamStatsByPersonnel,\n loading: teamStatsByPersonnelLoading,\n error: teamStatsByPersonnelError,\n } = useFormationSummaryStats(\n teamId,\n ['OFFENSE_PERSONNEL'],\n statDistributions,\n isTeamMode,\n !isPersonnelMode\n );\n\n const {\n data: teamStatsByFormationPersonnel,\n loading: teamStatsByFormationPersonnelLoading,\n error: teamStatsByFormationPersonnelError,\n } = useFormationSummaryStats(\n teamId,\n ['FORMATION', 'OFFENSE_PERSONNEL'],\n statDistributions,\n isTeamMode,\n !isPersonnelMode\n );\n\n const headers = getStatHeaders(statDefinitions);\n const headerIds = headers.map((h) => h.id);\n\n // Chart data by personnel\n const groupedTeamStatsByPersonnel = groupBy(\n teamStatsByFormationPersonnel,\n 'offensePersonnel'\n );\n\n const orderedChartDataByPersonnel = orderBy(\n Object.values(groupedTeamStatsByPersonnel).map((group) =>\n orderBy(group, [sortBy], [sortDirection])\n ),\n [(d) => sumBy(d, PLAY_COUNT)],\n [SORT_DIRECTIONS.DESCENDING]\n );\n\n const chartDataByPersonnel = useBarChartDataByPersonnel(\n orderedChartDataByPersonnel,\n teamStatsByPersonnel,\n isTeamMode,\n visibleStats\n );\n\n // Chart data by formation\n const orderedChartDataByFormation = orderBy(\n teamStatsByFormation,\n [sortBy],\n [sortDirection]\n );\n\n const filteredChartDataByFormation = isExpanded\n ? orderedChartDataByFormation\n : orderedChartDataByFormation.slice(0, 10);\n\n const chartDataByFormation = useBarChartDataByFormation(\n filteredChartDataByFormation,\n isTeamMode\n );\n\n const barChartData = isPersonnelMode\n ? chartDataByPersonnel\n : chartDataByFormation;\n\n // table data grouped by personnel\n const formattedTableDataByPersonnel = useTableDataByPersonnel(\n teamStatsByFormationPersonnel,\n teamStatsByPersonnel,\n statDistributions,\n statDefinitions,\n isTeamMode,\n sortBy,\n sortDirection,\n headerIds\n );\n\n const sortedTableDataByPersonnel = orderBy(\n formattedTableDataByPersonnel,\n [(d) => d.rows[0].playCount?.value],\n [DESCENDING]\n );\n\n // filter rows to display depending on visibility status\n const filteredTableDataByPersonnel = sortedTableDataByPersonnel.map(\n (table, index) => ({\n ...table,\n rows: getRowsToRender(table.rows, visibleStats[index]),\n expandButtonCondition: table.rows.length > 7,\n })\n );\n\n // table data grouped by formation\n const formattedTableDataByFormation = useTableDataByFormation(\n teamStatsByFormation,\n statDistributions,\n statDefinitions,\n isTeamMode,\n headerIds\n );\n\n const sortedTableDataByFormation = orderBy(\n formattedTableDataByFormation,\n [(row) => row[sortBy]?.title],\n [sortDirection]\n );\n\n const orderedTableDataByFormation = orderStats(\n sortedTableDataByFormation,\n headerIds\n );\n\n const handleSort = (headerId) => {\n if (sortBy === headerId) {\n setSortDirection(sortDirection === ASCENDING ? DESCENDING : ASCENDING);\n } else {\n setSortDirection(DESCENDING);\n setSortBy(headerId);\n }\n };\n\n const handleDataVisibility = (index, status) =>\n setVisibleStats({\n ...visibleStats,\n [index]: status,\n });\n\n const loading =\n statDefinitionsLoading ||\n statDistributionsLoading ||\n teamStatsByFormationLoading ||\n teamStatsByPersonnelLoading ||\n teamStatsByFormationPersonnelLoading;\n\n const error =\n statDistributionsError ||\n statDefinitionsError ||\n teamStatsByFormationError ||\n teamStatsByPersonnelError ||\n teamStatsByFormationPersonnelError;\n\n const getFeedback = () => {\n if (loading) {\n return {teamDetails?.name}
\n \n \n setIsTeamMode(true)}\n size=\"small\"\n >\n Team\n \n setIsTeamMode(false)}\n size=\"small\"\n >\n vs. League Avg\n \n \n \n \n setIsPersonnelMode(true)}\n size=\"small\"\n >\n Personnel\n \n setIsPersonnelMode(false)}\n size=\"small\"\n >\n Formation\n \n \n
\n Stats
\n Grouping
\n {`Frequency and Success : ${stats}`}
\n Key Metrics
\n \n {}}\n placeholder=\"Search players\"\n size=\"small\"\n />\n
\n \n \n {\n setMinimumSnaps(val);\n }}\n onChangeComplete={(e, val) => {\n setMinPlays(val);\n }}\n variant=\"greater-than\"\n />\n
\n \n {}}\n placeholder=\"Search teams\"\n size=\"small\"\n />\n
\n \n \n {\n setMinimumTeamPlays(val);\n setTimeout(() => {\n setMinPlays(val);\n }, 200);\n }}\n isPushable\n variant=\"greater-than\"\n version={2}\n />\n
\n No Data available
\n\n \n
\n )}\n\n \n \n {!playEventsError && animationEvents?.length > 0 && (\n \n \n )}\n \n
\n \n No Data available
\n\n handleSetAllMeasures(FORMATION_MEASURES)}\n >\n All Measures\n \n handleSetAllMeasures(FORMATION_MEASURES_OFF)}\n >\n No Measures\n \n
\n \n \n \n \n \n \n \n {isChartReady && (\n \n \n )}\n {isLoading && (\n \n \n )}\n \n \n \n {validSelectedEvent(formattedData, selectedEvent) && (\n \n \n \n \n \n \n \n {isChartReady && (\n \n \n )}\n {isLoading && (\n \n \n )}\n \n \n \n \n )}\n
\n \n \n {isChartReady && (\n
\n \n {visTitle}
\nNo Data available for this query.
\n\n If you are expecting data you may need to adjust the\n filters.\n
\n\n \n {isChartReady && (\n
\n \n \n {`${selectedEventName(\n formattedData,\n selectedEvent\n )} - Detailed\n Measures`}\n
\n\n No Data available for this query. If you are\n expecting data you may need to adjust the filters.\n
\nData Dictionary
\nAPI Key
\n \n{message}
}\n\n {newApiKey?.api_key && (\n \n {newApiKey?.api_key}\n \n )}\n \n {alert}\n \n
\n \n This might affect other users in your organization.\n \n
Safe Palette
\n\n
\n \n
\n {tileTitle}
\n \n )}\n {!error && !loading && bodyData && (\n\n
\n )}\n \n \n \n \n \n \n {tacklingLoading && (\n \n \n )}\n {filteredData && tackleAttemptLeagueAverage && (\n \n \n {loading && (\n \n \n )}\n {!loading && relevantPlayersTable}\n
\n \n setDisplayKey(!displayKey)}\n />\n \n
\n \n\n {getPageTitle()}
\n\n \n \n Offense or Defense\n \n }\n body={\n \n {\n if (showDefensive) {\n setSelectedRotation(ROTATIONS.VERTICAL_UP);\n } else {\n setSelectedRotation(ROTATIONS.VERTICAL_DOWN);\n if (\n colorMode ===\n TACKLE_LOCATION_COLOR_MODE_BALL_CARRIER.value\n ) {\n setColorMode(TACKLE_LOCATION_COLOR_MODE_DX.value);\n }\n }\n setSelectedPlayerId(0);\n setSelectedTacklerPosition(TACKLE_POSITION_ANY.value);\n setShowDefensive(!showDefensive);\n }}\n checked={showDefensive}\n />\n {\n setPlayType(selectedOption.value);\n setSelectedPlayerId(0);\n setSelectedTacklerPosition(TACKLE_POSITION_ANY.value);\n }}\n value={TACKLING_PLAY_TYPES.find(\n (f) => f.value === playType\n )}\n />\n {\n if (selectedOption.value !== 0) {\n // reset tackle result if player selected\n setTackleResult(TACKLE_RESULT_ALL.value);\n }\n setSelectedPlayerId(\n parseInt(selectedOption.value, 10)\n );\n }}\n value={playerOptions.find(\n (f) => f.value === selectedPlayerId\n )}\n />\n {showDefensive && (\n {\n if (\n selectedOption.value !== TACKLE_POSITION_ANY.value\n ) {\n // reset tackle result if player selected\n setTackleResult(TACKLE_RESULT_ALL.value);\n }\n setSelectedTacklerPosition(selectedOption.value);\n }}\n value={tacklePositions.find(\n (f) => f.value === selectedTacklerPosition\n )}\n />\n )}\n {/* {\n setTackleResult(selectedOption.value);\n }}\n value={TACKLE_RESULT_OPTIONS.find(\n (f) => f.value === tackleResult\n )}\n isDisabled={\n selectedTacklerId !== 0 ||\n selectedTacklerPosition !== TACKLE_POSITION_ANY.value\n }\n /> */}\n {showDefensive && (\n \n setTacklerMode(selectedOption.value)\n }\n value={TACKLING_TACKLER_MODES.find(\n (f) => f.value === tacklerMode\n )}\n isDisabled={\n selectedPlayerId === 0 &&\n selectedTacklerPosition ===\n TACKLE_POSITION_ANY.value\n }\n />\n )}\n \n }\n />\n \n Distribution Display\n \n }\n body={\n \n \n setDistroAreaColorMode(selectedOption.value)\n }\n value={TACKLE_LOCATION_DISTRO_COLOR_MODES.find(\n (f) => f.value === distroAreaColorMode\n )}\n />\n \n }\n />\n Field Display\n }\n body={\n \n \n setCoordinateMode(selectedOption.value)\n }\n value={TACKLING_COORDINATE_MODES.find(\n (f) => f.value === coordinateMode\n )}\n />\n \n setFieldMode(selectedOption.value)\n }\n value={TACKLING_FIELD_DISPLAY_MODES.find(\n (f) => f.value === fieldMode\n )}\n />\n {fieldMode !== TACKLING_FIELD_DISPLAY_PATHS.value && (\n \n setFieldFocusOrigin(!fieldFocusOrigin)\n }\n checked={fieldFocusOrigin}\n />\n )}\n {fieldMode === TACKLING_FIELD_DISPLAY_HEATMAP.value && (\n setShowHeatmapDots(!showHeatmapDots)}\n checked={showHeatmapDots}\n />\n )}\n {fieldMode ===\n TACKLING_FIELD_DISPLAY_PLAY_LOCATIONS.value &&\n !fieldFocusOrigin && (\n \n setShowFirstTackleTails(!showFirstTackleTails)\n }\n checked={showFirstTackleTails}\n />\n )}\n {(fieldMode ===\n TACKLING_FIELD_DISPLAY_PLAY_LOCATIONS.value ||\n (fieldMode === TACKLING_FIELD_DISPLAY_HEATMAP.value &&\n showHeatmapDots)) && (\n setScaleR(!scaleR)}\n checked={scaleR}\n />\n )}\n {fieldMode ===\n TACKLING_FIELD_DISPLAY_PLAY_LOCATIONS.value && (\n \n setColorMode(selectedOption.value)\n }\n value={tackleColorModes.find(\n (f) => f.value === colorMode\n )}\n />\n )}\n \n }\n />\n\n \n Field Orientation and Size\n \n }\n body={\n \n \n setSelectedRotation(selectedOption.value)\n }\n value={verticalRotations.find(\n (f) => f.value === selectedRotation\n )}\n />\n \n setDisplayXFocusedField(!displayXFocusedField)\n }\n checked={displayXFocusedField}\n />\n \n }\n />\n\n {selectedPlayTable}\n \n
\n \n \n \n \n \n \n \n setOffense(true)}\n variant={offense ? 'primary' : 'ghost'}\n >\n Offense\n \n setOffense(false)}\n variant={offense ? 'ghost' : 'primary'}\n >\n Defense\n \n \n \n {Object.values(PLUS_MINUS_CATEGORIES).map((c) => (\n setCategory(c)}\n variant={category === c ? 'primary' : 'ghost'}\n >\n {PLUS_MINUS_CATEGORY_NAMES[c]}\n \n ))}\n \n \n \n \n
\n \n \n \n download player +/- table\n \n \n
\n \n \n \n Display Options \n \n setOnOffDifference(!onOffDifference)}\n />\n setColorMinMax(!colorMinMax)}\n />\n \n \n
\n \n \n
\n \n \n \n \n \n \n \n \n
\n );\n};\n\nexport default RunTendencies;\n","import {\n getContextQueryVariables,\n getContextFilterClientExports,\n getContextFiltersQueryArguments,\n} from '../../../utils/helpers/contextFilters';\n\nexport const getTeamRadarStatsQuery = (selectedStatNames, isOffense) => {\n const joinedStatNames =\n (selectedStatNames && selectedStatNames.join('\\n')) || '';\n const gqlString = `\n query getTeamStatsForRadar(\n $competitionId: Int!\n $seasonId: Int!\n $teamId: Int!\n ${getContextQueryVariables()}\n ) {\n selectedCompetitionId @client @export(as: \"competitionId\")\n selectedSeasonId @client @export(as: \"seasonId\")\n selectedTeamId @client @export(as: \"teamId\")\n ${getContextFilterClientExports()}\n teamStats(\n filters: { \n competitionId: $competitionId\n seasonId: $seasonId\n offenseTeamIds: [${isOffense ? '$teamId' : ''}]\n defenseTeamIds: [${!isOffense ? '$teamId' : ''}]\n ${getContextFiltersQueryArguments()}\n }\n ) {\n items { \n groups {\n key\n value\n }\n playCount\n ${joinedStatNames}\n }\n }\n }\n`;\n return gqlString;\n};\n\nexport const getTeamRadarStatsLeagueAverageQuery = (selectedStatNames) => {\n const joinedStatNames =\n (selectedStatNames && selectedStatNames.join(',')) || '';\n const gqlString = `\n query getTeamStatsForRadar(\n $competitionId: Int!\n $seasonId: Int!\n $teamId: Int!\n ${getContextQueryVariables()}\n ) {\n selectedCompetitionId @client @export(as: \"competitionId\")\n selectedSeasonId @client @export(as: \"seasonId\")\n selectedTeamId @client @export(as: \"teamId\")\n ${getContextFilterClientExports()}\n teamStats(\n filters: { \n competitionId: $competitionId\n seasonId: $seasonId\n ${getContextFiltersQueryArguments()}\n }\n ) {\n items { \n groups {\n key\n value\n }\n playCount\n ${joinedStatNames}\n }\n }\n }\n`;\n return gqlString;\n};\n","import { gql } from '@apollo/client';\n\nexport const GET_TEAM_RADAR_TEMPLATES = gql`\n query GetTeamRadarTemplates($competitionId: Int!) {\n selectedCompetitionId @client @export(as: \"competitionId\")\n\n teamRadarTemplates(competitionId: $competitionId) {\n name\n defaultFor\n stats {\n name\n axisMin\n axisMax\n }\n secondaryStats {\n name\n axisMin\n axisMax\n }\n }\n }\n`;\n","import { useQuery } from '@apollo/client';\nimport { GET_TEAM_RADAR_TEMPLATES } from '../TeamOverview/getTeamRadarTemplates';\nimport { ERROR_CODES } from '../../../utils/errorCodes/errorCodes';\nimport { GET_TEAM_STAT_DEFINITIONS } from '../../../utils/hooks/apiQueries/teamStats/getTeamStatDefinitions';\n\nconst useGetTemplateDefinitionsTeam = () => {\n const {\n data: templates,\n loading: tLoading,\n error: tError,\n } = useQuery(GET_TEAM_RADAR_TEMPLATES, {\n context: {\n headers: {\n 'Accept-Version': 'v2023q2',\n },\n },\n });\n const {\n data: statDefinitions,\n loading: sdLoading,\n error: sdError,\n } = useQuery(GET_TEAM_STAT_DEFINITIONS, {\n context: {\n headers: {\n 'Accept-Version': 'v2023q2',\n },\n },\n });\n\n const loading = tLoading || sdLoading;\n const error = tError || sdError;\n if (loading) {\n return { loading };\n }\n if (error) {\n console.error(ERROR_CODES.USE_GET_TEMPLATE_DEFINITIONS_TEAM, error);\n return { error, loading: false };\n }\n\n const getStatDef = (statName, statData) => {\n const statDef = statData?.find((d) => statName === d.name) || {};\n return statDef;\n };\n\n const niceTemplates = templates?.teamRadarTemplates?.map((t) => {\n const niceTemplateStats = t?.stats?.map((s) => {\n const statDef = getStatDef(s.name, statDefinitions?.teamStatDefinitions);\n return { ...s, ...statDef };\n });\n\n return {\n ...t,\n stats: niceTemplateStats,\n };\n });\n\n return { loading, error, templates: niceTemplates };\n};\n\nexport { useGetTemplateDefinitionsTeam };\n","export const TEAM_RADAR_CHART_OPTIONS = [\n {\n label: 'Team Radar',\n value: 0,\n variant: 'Profile',\n },\n {\n label: 'League Avg. Comparison',\n value: 1,\n variant: 'Players',\n },\n];\n","import React from 'react';\nimport { Dropdown, Icon } from '@statsbomb/kitbag-components';\nimport { useQuery, useReactiveVar, gql, useLazyQuery } from '@apollo/client';\nimport {\n SummaryTile,\n SummaryTileBody,\n SummaryTileCol,\n SummaryTileFooter,\n SummaryTileHeader,\n SummaryError,\n TileDimmer,\n} from '../../../components/Tile/TileSummary.styles';\nimport RadarChart from '../../../visualisations/RadarChart/RadarChart';\nimport { mf_TeamDetails } from '../../../apollo';\nimport { formatTemplateStatsAsRadarAxes } from '../../player/PlayerRadar/PlayerRadar.dataManipulation';\nimport useQueryString from '../../../utils/hooks/useQueryString';\nimport { ERROR_CODES } from '../../../utils/errorCodes/errorCodes';\nimport {\n OptionWithIcon,\n SingleValueWithIcon,\n} from '../../../components/DropdownFilter/DropdownFilter.components';\nimport { RadarTileContainer } from '../../player/PlayerOverview/PlayerRadar.Tile.styles';\nimport {\n getTeamRadarStatsQuery,\n getTeamRadarStatsLeagueAverageQuery,\n} from './getTeamRadarStats';\nimport { useGetTemplateDefinitionsTeam } from '../TeamRadar/TeamRadar.hooks';\nimport { TEAM_RADAR_CHART_OPTIONS } from './TeamRadar.Tile.constants';\nimport GoTo from '../../../components/buttons/GoTo';\nimport { DropdownWrapper } from '../../../components/DropdownFilter/Dropdown.styles';\nimport LoaderInline from '../../../components/LoaderInline/LoaderInline';\nimport BannerError from '../../../components/Banners/Banner.Error';\n\nconst TeamRadarTile = function () {\n const mf_TeamDetailsRV = useReactiveVar(mf_TeamDetails);\n const [showLeagueAverage, setShowLeagueAverage] = useQueryString(\n 'avg',\n false\n );\n\n const teamColors = {\n primary: mf_TeamDetailsRV?.colorPrimary,\n secondary: mf_TeamDetailsRV?.colorSecondary,\n tertiary: mf_TeamDetailsRV?.colorTertiary,\n };\n\n const {\n templates,\n loading: isConfigLoading,\n error: configError,\n } = useGetTemplateDefinitionsTeam();\n\n const selectedTemplate = templates?.find((t) => t.name === 'Offense');\n const selectedTemplateDefense = templates?.find((t) => t.name === 'Defense');\n const templateNames = selectedTemplate?.stats?.map((m) => m.name);\n const templateNamesDefense = selectedTemplateDefense?.stats?.map(\n (m) => m.name\n );\n const templateNamesLA = selectedTemplate?.stats\n ?.concat(selectedTemplateDefense?.stats)\n ?.map((m) => m.name);\n\n const teamOffenseStatsGQLString = getTeamRadarStatsQuery(templateNames, true);\n const teamDefenseStatsGQLString = getTeamRadarStatsQuery(\n templateNamesDefense,\n false\n );\n const teamStatsLAGQLString =\n getTeamRadarStatsLeagueAverageQuery(templateNamesLA);\n\n const [\n getDefense,\n {\n data: dataDefenseStats,\n loading: isDefeneStatsLoading,\n error: defenseStatsError,\n },\n ] = useLazyQuery(gql(teamDefenseStatsGQLString), {\n context: {\n headers: {\n 'Accept-Version': 'v2023q2',\n },\n },\n });\n if (defenseStatsError) {\n console.error(ERROR_CODES.GET_TEAM_RADAR_DEFENSE_STATS, defenseStatsError);\n }\n\n const {\n data: dataOffenseStats,\n loading: isOffenseStatsLoading,\n error: offenseStatsError,\n } = useQuery(gql(teamOffenseStatsGQLString), {\n context: {\n headers: {\n 'Accept-Version': 'v2023q2',\n },\n },\n onCompleted: (drivesData) => {\n if (drivesData?.teamStats?.items.length > 0) {\n getDefense();\n }\n },\n });\n if (offenseStatsError) {\n console.error(ERROR_CODES.GET_TEAM_RADAR_OFFENSE_STATS, offenseStatsError);\n }\n\n const isError = !!offenseStatsError || !!configError || !!defenseStatsError;\n const isLoading = isConfigLoading || isOffenseStatsLoading;\n\n const {\n data: dataStatsLA,\n loading: statsLoadingLA,\n error: statsLAError,\n } = useQuery(gql(teamStatsLAGQLString), {\n context: {\n headers: {\n 'Accept-Version': 'v2023q2',\n },\n },\n });\n if (statsLAError) {\n console.error(ERROR_CODES.GET_RADAR_STATS_LA, statsLAError);\n }\n\n const loadingMsg = () => {\n if (isConfigLoading) {\n return 'Loading Templates';\n }\n\n if (isOffenseStatsLoading) {\n return 'Loading Team Offense Stats ';\n }\n\n if (isDefeneStatsLoading) {\n return 'Loading Team Defense Stats';\n }\n\n if (statsLoadingLA) {\n return 'Loading League Average Data';\n }\n\n return '';\n };\n\n const radarLAComparison =\n showLeagueAverage && dataStatsLA?.teamStats?.items[0];\n const templateConfigOffense = formatTemplateStatsAsRadarAxes(\n templates && templates[0]?.stats\n );\n const templateConfigDefense = formatTemplateStatsAsRadarAxes(\n templates && templates[1]?.stats\n );\n\n return (\n \n \n \n \n \n {isError && (\n \n \n
\n \n
\n {playsTitle}
\n\n setDisplayTable(!displayTable)}\n />\n setDisplayKey(!displayKey)}\n />\n \n {selectedPlayerDetails?.length > 0 && (\n \n {gapChartTitle}\n \n \n {poaChartTitle}\n \n
\n \n {isLoading && (\n \n \n )}\n \n \n {gapChartTitle}\n \n \n {\n onBubbleClick(datum);\n }}\n selectedBubble={\n selectedPlays?.isBubble\n ? selectedPlays?.id\n : null\n }\n />\n {displayKey && (\n \n \n \n {poaChartTitle}\n \n \n \n
\n )}\n {displayTable && (\n <>\n \n
\n \n )}\n \n \n {videoOpen && (\n {\n setSelectedPlays(null);\n setVideoOpen(false);\n }}\n />\n )}\n\n {!videoOpen && (\n <>\n \n Run Gap Settings\n \n }\n body={\n \n \n setBubbleYAxis(selectedOption.value)\n }\n value={RUN_TENDENCY_AXES_OPTIONS.find(\n (f) => f.value === bubbleYAxis\n )}\n />\n \n setBubbleRAxis(selectedOption.value)\n }\n value={RUN_TENDENCY_AXES_OPTIONS.find(\n (f) => f.value === bubbleRAxis\n )}\n />\n \n setBubbleColoring(selectedOption.value)\n }\n value={RUN_TENDENCY_AXES_OPTIONS.find(\n (f) => f.value === bubbleColoring\n )}\n />\n \n }\n />\n\n \n Point of Attack Settings\n \n }\n isExpandedDefault\n isMount\n body={\n \n \n setDistroYAxis(selectedOption.value)\n }\n value={RUN_TENDENCY_AXES_OPTIONS.find(\n (f) => f.value === distroYAxis\n )}\n />\n \n setDistroColoring(selectedOption.value)\n }\n value={RUN_TENDENCY_AXES_OPTIONS.find(\n (f) => f.value === distroColoring\n )}\n />\n \n }\n />\n \n )}\n \n
\n \n \n
\n Radars
\n\n {!isLoading && !isError && (\n \n setShowLeagueAverage(item.value === 1)}\n options={TEAM_RADAR_CHART_OPTIONS}\n value={TEAM_RADAR_CHART_OPTIONS[showLeagueAverage ? 1 : 0]}\n labelPosition=\"none\"\n label=\"Team radar display options\"\n variant=\"tertiary\"\n size=\"small\"\n />\n \n )}\n
\n \n \n \n
\n \n
\n Offense
\n\n
\n Defense
\n\n
\n Schedule
\n\n
\n No Data Available.
\nFormation
\n\n setDisplayChartKey(!displayChartKey)}\n off={!displayChartKey}\n title={`${displayChartKey ? 'hide' : 'display'} chart key`}\n >\n {`${displayChartKey ? 'hide' : 'display'} chart key`}\n \n
\n \n
\n )}\n {!isLoading && displayChartKey && (\n \n
\n )}\n {isLoading && (\n Depth Chart
\n\n
\n Passing Chart
\n\n \n \n setGraphOption(selectedOption.value)\n }\n options={GRAPH_OPTIONS}\n value={GRAPH_OPTIONS.find((item) => item.value === graphOption)}\n labelPosition=\"none\"\n label=\"Passing chart display options\"\n variant=\"tertiary\"\n size=\"small\"\n />\n \n setDisplayChartKey(!displayChartKey)}\n off={!displayChartKey || graphOption === 'heatmap'}\n title={`${displayChartKey ? 'hide' : 'display'} chart key`}\n >\n {`${displayChartKey ? 'hide' : 'display'} chart key`}\n \n
\n No Data available
\n\n
\n {isLoading && (\n Run Tendencies
\n\n\n \n \n setShowRunGaps(selectedOption.value)\n }\n options={RUN_TENDENCIES_TILE_OPTIONS}\n value={RUN_TENDENCIES_TILE_OPTIONS.find(\n (item) => item.value === showRunGaps\n )}\n labelPosition=\"none\"\n label=\"Passing chart display options\"\n variant=\"tertiary\"\n size=\"small\"\n />\n \n setDisplayChartKey(!displayChartKey)}\n off={!displayChartKey}\n title={`${displayChartKey ? 'hide' : 'display'} chart key`}\n >\n {`${displayChartKey ? 'hide' : 'display'} chart key`}\n \n
\n \n
\n {isLoading && (\n \n
\n \n
\n {displayChartKey && (\n \n
\n )}\n \n
\n \n
\n Line Pressure
\n\n \n setShowTables(selectedOption.value)}\n options={LINE_PRESSURE_TILE_OPTIONS}\n value={LINE_PRESSURE_TILE_OPTIONS.find(\n (item) => item.value === showTables\n )}\n labelPosition=\"none\"\n label=\"Passing chart display options\"\n variant=\"tertiary\"\n size=\"small\"\n />\n \n setDisplayChartKey(!displayChartKey)}\n off={!displayChartKey}\n title={`${displayChartKey ? 'hide' : 'display'} chart key`}\n >\n {`${displayChartKey ? 'hide' : 'display'} chart key`}\n \n
\n \n
\n {isLoading && (\n \n \n \n \n \n
\n \n \n \n \n \n
\n {displayChartKey && !showTables && (\n Tackle Map
\n\n \n \n setShowDistribution(selectedOption.value)\n }\n options={TACKLING_TILE_OPTIONS}\n value={TACKLING_TILE_OPTIONS.find(\n (item) => item.value === showDistribution\n )}\n labelPosition=\"none\"\n label=\"Passing chart display options\"\n variant=\"tertiary\"\n size=\"small\"\n />\n \n setDisplayChartKey(!displayChartKey)}\n off={!displayChartKey}\n title={`${displayChartKey ? 'hide' : 'display'} chart key`}\n >\n {`${displayChartKey ? 'hide' : 'display'} chart key`}\n \n
\n \n \n \n \n
\n \n \n \n
\n \n {isLoading && (\n Havoc Chart
\n\n \n setTileMode(selectedOption.value)}\n options={HAVOC_TILE_OPTIONS}\n value={HAVOC_TILE_OPTIONS.find((item) => item.value === tileMode)}\n labelPosition=\"none\"\n label=\"Passing chart display options\"\n variant=\"tertiary\"\n size=\"small\"\n />\n \n setDisplayChartKey(!displayChartKey)}\n off={!displayChartKey}\n title={`${displayChartKey ? 'hide' : 'display'} chart key`}\n >\n {`${displayChartKey ? 'hide' : 'display'} chart key`}\n \n
\n \n \n
\n {`Havoc ${\n tileMode === 'gap' ? 'Gap' : 'Position'\n } Events`}
\n\n
\n )}\n \n {isLoading && (\n Defensive Scheme
\n\n \n \n setDefensiveSchemeType(selectedOption.value)\n }\n options={DEFENSIVE_SCHEME_TILE_OPTIONS}\n value={DEFENSIVE_SCHEME_TILE_OPTIONS.find(\n (item) => item.value === defensiveSchemeType\n )}\n labelPosition=\"none\"\n label=\"Defensive scheme display options\"\n variant=\"tertiary\"\n size=\"small\"\n />\n \n
\n \n {activeTabIndex === 0 && (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )}\n {activeTabIndex === 1 && (\n \n \n \n \n \n \n \n \n \n \n \n \n )}\n
\n \n \n \n \n <>\n {!isError && !isLoading && (\n setDisplayKey(!displayKey)}\n />\n )}\n \n \n {showOffense && templateConfigOffense && (\n \n \n \n \n \n \n {isError && !isLoading && (\n \n {templateConfigOffense && !isError && showOffense && (\n \n \n
\n \n \n \n \n )}\n {showTable && offenseTableData && (\n <>\n \n
\n )}\n {templateConfigDefense && !isError && showDefense && (\n Offense
\n\n \n \n \n \n )}\n {showTable && defenseTableData && (\n \n \n
\n )}\n \n Defense
\n\n \n {!isError && (\n \n setShowOffense(!showOffense)}\n checked={showOffense}\n disabled={!showDefense || isLoading}\n />\n setShowDefense(!showDefense)}\n checked={showDefense}\n disabled={!showOffense || isLoading}\n />\n \n }\n isExpandedDefault\n isMount\n />\n )}\n\n Settings\n }\n body={\n \n setShowTable(!showTable)}\n checked={showTable}\n />\n {isStatsLALoading ? (\n \n \n ) : (\n \n setShowLeagueAverage(!showLeagueAverage)\n }\n checked={showLeagueAverage}\n />\n )}\n setUseTeamColors(!useTeamColors)}\n checked={useTeamColors}\n />\n \n }\n isExpandedDefault\n isMount\n />\n \n
\n \n {title}
\n \n\n \n \n \n \n {index !== sections.length - 1 &&
}\n
\n ))}\n \n {section.position && (\n
\n \n {section.title}
\n\n {section.options.map((option) => (\n {}}\n disabled={option.isDisabled}\n />\n ))}\n
\n }\n
Key Metrics
\n \n
\n {selectedFormationUsage?.label || ''}
\n\n \n setIsTeamMode(true)}\n size=\"small\"\n >\n Team\n \n setIsTeamMode(false)}\n size=\"small\"\n >\n vs. League Avg\n \n \n \n setIsTraitsFilterOpen(true)}\n size=\"small\"\n >\n Traits\n \n setIsPlayersFilterOpen(true)}\n size=\"small\"\n >\n Players\n \n
\n Stats
\n Filters
\n Formation Evaluation Tool
\n \n \n \n \n \n \n {isError && !loading && (\n \n \n )}\n {showRoutes && (\n \n \n {branchConfig && fruitConfig && displayKey && (\n \n \n \n {loadingDefs && (\n \n \n )}\n {!loadingDefs && tableRoutes?.length > 0 && (\n \n \n \n )}\n \n \n \n \n
\n\n \n \n \n \n \n \n \n \n setDisplayKey(!displayKey)}\n />\n \n {showRoutes && (\n
\n \n {`${routeTotals.totalRoutes} Routes Run ` +\n `(${routeTotals.totalPlays} pass plays, ${routeTotals.totalTargets} targets)`}\n
\n\n \n {videoOpen && (\n \n Route Tree Settings\n \n }\n body={\n \n {!alignmentOptionsHasError && (\n \n setAlignmentPosition(selectedOption.value)\n }\n value={alignmentOptionsData?.find(\n (f) => f.value === alignmentPosition\n )}\n isLoading={loadingAlignmentOptions}\n />\n )}\n\n {filterMetrics?.length > 0 && (\n <>\n \n setTreeBranchAxis(selectedOption.value)\n }\n value={filterMetrics.find(\n (f) => f.value === treeBranchAxis\n )}\n />\n {\n setBranchRescaled(!branchRescaled);\n }}\n checked={branchRescaled}\n />\n \n setTreeFruitColorAxis(selectedOption.value)\n }\n value={filterMetrics.find(\n (f) => f.value === treeFruitColorAxis\n )}\n />\n {\n setFruitRescaled(!fruitRescaled);\n }}\n checked={fruitRescaled}\n />\n \n )}\n {/* This will come back in but temporarily cut for release */}\n {/* \n setFieldOrientation(selectedOption.value)\n }\n value={ROTATION_OPTIONS.find(\n (f) => f.value === fieldOrientation\n )}\n /> */}\n \n }\n />\n \n )}\n \n
\n \n \n \n \n \n );\n};\n\nexport default PlayerRoute;\n","export const scheduleHeaders = [\n {\n key: 'week',\n label: 'Week',\n description: 'Week the game was played',\n },\n {\n key: 'date',\n label: 'Date',\n description: 'Date the game was played',\n },\n {\n key: 'kickoff',\n label: 'Time',\n description: 'Time the game was played',\n },\n {\n key: 'conference',\n label: 'Conf',\n description: 'Conference the team is in',\n },\n {\n key: 'result',\n label: 'Result',\n description: 'Result of the game',\n },\n {\n key: 'isAway',\n label: '',\n description: '',\n },\n {\n key: 'opponent',\n label: 'Opponent',\n description: 'Game opponent',\n },\n {\n key: 'score',\n label: 'Score',\n description: 'Score',\n },\n {\n key: 'offensiveEpaPerDrive',\n label: 'Off EPA/Drive',\n description: 'Offensive (Expected Points Added) per drive',\n },\n {\n key: 'defensiveEpaPerDrive',\n label: 'Def EPA/Drive',\n description: 'Defensive (Expected Points Added) per drive',\n },\n {\n key: 'link',\n label: ' ',\n description: 'Link to Play-by-Play',\n },\n];\n","import React from 'react';\nimport { Grid, Toggle } from '@statsbomb/kitbag-components';\nimport { useTheme } from 'styled-components';\nimport { useQuery, useReactiveVar } from '@apollo/client';\nimport { sortBy } from 'lodash';\nimport Tile from '../../../components/Tile/Tile';\nimport AccordionTile from '../../../components/Accordion/AccordionTile';\nimport {\n FixedAside,\n KitbagPageGridHolder,\n SidebarRightLayout,\n} from '../../../components/Layout/Layout.styles';\nimport BasicTable from '../../../components/Table/BasicTable';\nimport { mf_Leagues, mf_Seasons, mf_Teams } from '../../../apollo';\nimport useQueryString from '../../../utils/hooks/useQueryString';\nimport { scheduleHeaders } from './TeamSchedule.constants';\nimport { getResult, parseScheduleScore } from './TeamSchedule.helpers';\nimport Dimmer from '../../../components/Dimmer/Dimmer';\nimport GoTo from '../../../components/buttons/GoTo';\nimport { GET_TEAM_SCHEDULE } from './getTeamSchedule';\n\nimport { API_STAT_UNITS } from '../../../utils/constants/api';\nimport { ScheduleTable } from './TeamSchedule.styles';\nimport { ERROR_CODES } from '../../../utils/errorCodes/errorCodes';\nimport { formatValue } from '../../../utils/helpers/stats.dataManipulation';\nimport PageHeader from '../../../components/PageHeader/PageHeader';\nimport BannerError from '../../../components/Banners/Banner.Error';\nimport LoaderLabelled from '../../../components/LoaderLabelled/LoaderLabelled';\n\nconst TeamSchedule = () => {\n const mf_TeamsRV = useReactiveVar(mf_Teams);\n const mf_SeasonsRV = useReactiveVar(mf_Seasons);\n const mf_LeaguesRV = useReactiveVar(mf_Leagues);\n const theme = useTheme();\n const visPalette = theme.colours.visualisations;\n const [hideFutureGames, setHideFutureGames] = useQueryString('future', false);\n const [hideCollected, setHideCollected] = useQueryString('collected', false);\n\n const {\n data: teamScheduleData,\n loading: isLoading,\n error: hasError,\n } = useQuery(GET_TEAM_SCHEDULE);\n if (hasError) {\n console.error(ERROR_CODES.GET_TEAM_SCHEDULE, hasError);\n }\n\n const parsedSchedule = teamScheduleData?.teamSchedule?.map((week) => {\n const isHomeTeam = week.game.homeTeam?.id === mf_TeamsRV;\n\n return {\n date: week.game.date,\n week: week.game.roundShortName,\n kickoff: week.game.kickoff?.slice(0, -3), // trim seconds\n conference:\n week.game.homeTeam.conferenceShortName ===\n week.game.awayTeam.conferenceShortName\n ? 'conf'\n : 'non-conf',\n result: getResult(\n week.game.homeTeam?.id,\n mf_TeamsRV,\n week.game.homeScore,\n week.game.awayScore,\n week.gameAvailable,\n visPalette\n ),\n isAway: isHomeTeam ? 'vs' : '@',\n opponent: isHomeTeam\n ? week.game.awayTeam?.name\n : week.game.homeTeam?.name,\n score: isHomeTeam\n ? parseScheduleScore(week.game.homeScore, week.game.awayScore)\n : parseScheduleScore(week.game.awayScore, week.game.homeScore),\n offensiveEpaPerDrive: formatValue(\n isHomeTeam ? week.homeEpaPerDrive : week.awayEpaPerDrive,\n API_STAT_UNITS.EPA\n ),\n defensiveEpaPerDrive: formatValue(\n isHomeTeam ? week.awayEpaPerDrive : week.homeEpaPerDrive,\n API_STAT_UNITS.EPA\n ),\n disabled: !week.gameAvailable,\n link: week.gameAvailable && (\n \n
\n ),\n };\n });\n\n let sortedSchedule = sortBy(parsedSchedule, 'date');\n if (hideFutureGames) {\n const today = new Date().toISOString().split('T')[0];\n sortedSchedule = sortedSchedule.filter((week) => week.date <= today);\n }\n if (hideCollected) {\n sortedSchedule = sortedSchedule.filter((week) => week.disabled === false);\n }\n\n return (\n \n \n \n {hasError && !isLoading && (\n \n \n )}\n {sortedSchedule?.length === 0 && !isLoading && !hasError && (\n \n \n )}\n {!hasError && !isLoading && parsedSchedule && (\n \n \n )}\n \n \n
\n No Data available
\n\n \n Settings}\n body={\n \n setHideFutureGames(!hideFutureGames)}\n />\n setHideCollected(!hideCollected)}\n />\n \n }\n isExpandedDefault\n isMount\n />\n \n
\n \n \n This page is under construction.\n
\n \n \n setTypedValue(e.target.value)}\n placeholder={formattedValue}\n size=\"small\"\n />\n onCancel()}\n variant=\"ghost\"\n shape=\"pill\"\n size=\"small\"\n icon=\"Close\"\n title=\"Cancel\"\n />\n \n
\n {stringFormatter(displayMax)}\n {metric.abbreviation}
\n\n setTemplateName(t.target.value)}\n placeholder=\"scout template name\"\n size=\"small\"\n />\n
\n {!validTemplateName && Height
\nWeight
\nHigh schools
\nCollege teams offering
\nCollege attended
\n{sliderName}
\nHome Town
\n\n \n setSelectionState(toggleValues.null)}\n variant={selectionState === toggleValues.null ? 'primary' : 'ghost'}\n shape=\"pill\"\n size=\"small\"\n >\n {nullLabel}\n \n setSelectionState(toggleValues.true)}\n variant={selectionState === toggleValues.true ? 'primary' : 'ghost'}\n shape=\"pill\"\n size=\"small\"\n >\n {trueLabel}\n \n setSelectionState(toggleValues.false)}\n variant={selectionState === toggleValues.false ? 'primary' : 'ghost'}\n shape=\"pill\"\n size=\"small\"\n >\n {falseLabel}\n \n \n
\n );\n};\n\nTriButtonToggle.propTypes = {\n selectionState: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n setSelectionState: PropTypes.func.isRequired,\n labels: PropTypes.shape({\n true: PropTypes.string,\n false: PropTypes.string,\n null: PropTypes.string,\n }),\n values: PropTypes.shape({\n null: PropTypes.string,\n true: PropTypes.string,\n false: PropTypes.string,\n }),\n};\n\nTriButtonToggle.defaultProps = {\n selectionState: null,\n labels: null,\n values: null,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { SCOUT_BIOMETRIC_FILTERS } from '../../ScoutResults.constants';\nimport { biometricProp } from '../../../Scout.proptypes';\nimport { TriButtonToggle } from '../../../../../components/buttons/TriButtonToggle/TriButtonToggle';\n\nconst TransferPortalTriToggle = ({\n selectedBiometrics,\n setSelectedBiometrics,\n}) => {\n const portalFilter = selectedBiometrics.find(\n (b) => b.key === SCOUT_BIOMETRIC_FILTERS.ncaaTransferPortal.key\n );\n const inPortal = portalFilter?.key ? portalFilter.value : null;\n\n const setPortal = (portalState) => {\n const otherBiometrics = selectedBiometrics.filter(\n (b) => b.key !== SCOUT_BIOMETRIC_FILTERS.ncaaTransferPortal.key\n );\n if (portalState === null) {\n setSelectedBiometrics(otherBiometrics);\n } else {\n const newPortalFilter = {\n key: SCOUT_BIOMETRIC_FILTERS.ncaaTransferPortal.key,\n value: portalState,\n };\n setSelectedBiometrics(otherBiometrics.concat(newPortalFilter));\n }\n };\n\n return (\n {playsMetric.abbreviation}
\n\n \n \n
\n\n \n \n \n
\n\n {title}
}\n {message &&{message}
}\n\n handleResult(result.id)}\n >\n {`${result.name} (${result.mostCommonPosition.code}) - ${result.team.shortName}`}\n \n
\n ))}\n \n \n \n Player \n \n \n \n \n \n {isInteractive ? (\n
\n \n {isInteractive ? (\n
\n \n \n \n \n
\n \n {isInteractive ? (\n \n {playerDetails?.name}\n \n ) : (\n playerDetails?.name\n )}\n
\n \n {isInteractive ? (\n \n {teamDetails?.name}\n \n ) : (\n teamDetails?.name\n )}\n
\n \n
\n \n );\n};\n\nPlayerComparisonTileHeader.propTypes = {\n generalData: PropTypes.shape({\n plays: PropTypes.number,\n similarity: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n }),\n playerComparisonData: PropTypes.oneOfType([\n playerComparisonPropTypes,\n PropTypes.array,\n ]),\n playerDetails: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n }),\n teamDetails: teamDetailsPropTypes,\n scrollingHeaderRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.instanceOf(Element) }),\n ]),\n // overall comparison mode\n comparisonMode: PropTypes.oneOf([COMPARE_SELECTED, COMPARE_SIMILAR]),\n // event handlers for comparison tiles\n handleAdd: PropTypes.func,\n handleClose: PropTypes.func,\n handleResult: PropTypes.func,\n // optional scrolling and links (useful to turn off for export)\n isInteractive: PropTypes.bool,\n // the tile states, apart from data\n comparativeTileState: PropTypes.arrayOf(\n PropTypes.oneOf([\n COMPARE_TILE_ADD,\n COMPARE_TILE_EMPTY,\n COMPARE_TILE_HIDDEN,\n COMPARE_TILE_DATA,\n COMPARE_TILE_ERROR,\n ])\n ),\n // link players to comparison page\n playerLinkComparison: PropTypes.bool,\n displayMode: PropTypes.oneOf([\n RADAR_DISPLAY_MODE.TRAIT,\n RADAR_DISPLAY_MODE.PERFORMANCE,\n RADAR_DISPLAY_MODE.BOTH,\n ]),\n // minimum number of plays to compare\n minPlays: PropTypes.number,\n // radar weight\n radarWeight: PropTypes.oneOf(\n COMPARISON_WEIGHT_OPTIONS.map((val) => val.value)\n ).isRequired,\n // ensure data is ready before rendering\n renderData: PropTypes.bool,\n // parent data for current player IDs\n comparisonPlayerIds: PropTypes.arrayOf(PropTypes.number),\n};\n\nPlayerComparisonTileHeader.defaultProps = {\n generalData: {},\n playerComparisonData: {},\n playerDetails: {},\n teamDetails: {},\n scrollingHeaderRef: null,\n comparisonMode: COMPARE_SIMILAR,\n handleAdd: () => {},\n handleClose: () => {},\n handleResult: () => {},\n isInteractive: true,\n comparativeTileState: [],\n playerLinkComparison: true,\n displayMode: RADAR_DISPLAY_MODE.BOTH,\n minPlays: COMPARISON_DEFAULT_MIN_PLAYS,\n renderData: false,\n comparisonPlayerIds: [],\n};\n\nexport default PlayerComparisonTileHeader;\n","import React, { useEffect, useState, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useReactiveVar } from '@apollo/client';\nimport {\n PlayerComparisonTableHeader,\n PlayerComparisonTitleColumn,\n PlayerComparisonRadarHeader,\n PlayerComparisonIndicatorWrapper,\n PlayerComparisonScrollArea,\n} from './PlayerComparison.styles';\nimport {\n COMPARISON_TABLE_COLS,\n COMPARISON_WEIGHT_OPTIONS,\n COMPARISON_NUMBER_OF_TILES,\n COMPARE_SIMILAR,\n COMPARE_TILE_DATA,\n COMPARE_SELECTED,\n COMPARE_TILE_ADD,\n COMPARE_TILE_EMPTY,\n RADAR_DISPLAY_MODE,\n COMPARISON_DEFAULT_MIN_PLAYS,\n COMPARE_TILE_ERROR,\n COMPARE_TILE_DEFAULT_STATE,\n COMPARISON_TABS_HEIGHT,\n} from './PlayerComparison.constants';\nimport PlayerComparisonTile from './PlayerComparisonTile';\nimport BasicTable from '../../../components/Table/BasicTable';\nimport { getRadarComparisonData } from './PlayerComparison.dataManipulation';\nimport { RatioIndicator } from './RatioIndicator/RatioIndicator';\nimport Dimmer from '../../../components/Dimmer/Dimmer';\nimport BannerError from '../../../components/Banners/Banner.Error';\nimport BannerInfo from '../../../components/Banners/Banner.Info';\nimport PlayerComparisonTileHeader from './PlayerComparisonTileHeader';\nimport {\n fixArrayLength,\n getComparativeTileState,\n} from './PlayerComparison.helpers';\nimport { mf_TeamDetails } from '../../../apollo';\nimport { radarTemplatePropTypes } from '../../../visualisations/RadarChart/RadarChart.PropTypes';\nimport { playerDetailsPropTypes } from '../../../apollo/index.data.propTypes';\nimport { playerComparisonPropTypes } from './getPlayerComparison.PropTypes';\n\nconst PlayerComparisonArea = ({\n playerDetails,\n comparisonData,\n templateConfigPerf,\n templateConfigTrait,\n radarWeight,\n hasError,\n isLoading,\n comparisonMode,\n displayMode,\n idSuffix,\n isInteractive,\n ratioLabelSuffix,\n comparisonPlayerIds,\n setComparisonPlayerIds,\n playerLinkComparison,\n minPlays,\n renderData,\n}) => {\n // player details\n const playerName = playerDetails?.name;\n // team details\n const teamDetails = useReactiveVar(mf_TeamDetails);\n // display mode\n const { TRAIT, PERFORMANCE, BOTH } = RADAR_DISPLAY_MODE;\n const showTrait = displayMode === TRAIT || displayMode === BOTH;\n const showPerformance = displayMode === PERFORMANCE || displayMode === BOTH;\n // the state of the tiles in comparison mode\n const [comparativeTileState, setComparativeTileState] = useState(\n COMPARE_TILE_DEFAULT_STATE\n );\n // the display layer of comparisons\n const [displayTilesCollection, setDisplayTilesCollection] = useState(\n comparisonData?.playerComparison?.comparativePlayers || [0, 0, 0, 0, 0]\n );\n\n // sticky header scrolling\n const scrollingContent = useRef(null);\n const scrollingHeader = useRef(null);\n const handleScroll = (scrollTarget) => {\n requestAnimationFrame(() => {\n scrollingHeader.current.style.transform = `translateX(-${scrollTarget.target.scrollLeft}px)`;\n });\n };\n useEffect(() => {\n const scrollingDiv = scrollingContent.current;\n if (isInteractive) {\n scrollingDiv.addEventListener('scroll', handleScroll);\n }\n return () => {\n if (isInteractive) {\n scrollingDiv.removeEventListener('scroll', handleScroll);\n }\n };\n }, []);\n\n useEffect(() => {\n if (renderData) {\n if (comparisonMode === COMPARE_SELECTED) {\n if (comparativeTileState[0] === COMPARE_TILE_ADD && isInteractive) {\n // its a first load so ignore the data\n // !isInteractive is for exports\n } else {\n // load data, use empty array if data unavailable\n const comparativePlayersData = comparisonData?.playerComparison\n ?.comparativePlayers || [0, 0, 0, 0, 0];\n\n // preserve order added in the UI\n const sortedObjectsArray = [...comparativePlayersData].sort(\n (a, b) =>\n comparisonPlayerIds.indexOf(a.playerId) -\n comparisonPlayerIds.indexOf(b.playerId)\n );\n // if there are less than 5 (COMPARISON_NUMBER_OF_TILES) players, fill the data array with empty tiles\n if (\n comparativePlayersData.length <= COMPARISON_NUMBER_OF_TILES &&\n isInteractive\n ) {\n setDisplayTilesCollection(\n fixArrayLength(\n [...sortedObjectsArray],\n COMPARISON_NUMBER_OF_TILES\n )\n );\n } else {\n setDisplayTilesCollection(sortedObjectsArray);\n }\n // set display state, else fallback to default\n const comparativePlayersState =\n comparisonData?.playerComparison?.comparativePlayers?.map(\n (player) => {\n if (player?.playerId && player?.hasError) {\n return COMPARE_TILE_ERROR;\n }\n if (player?.playerId) {\n return COMPARE_TILE_DATA;\n }\n return COMPARE_TILE_EMPTY;\n }\n ) || COMPARE_TILE_DEFAULT_STATE;\n\n // ensure the first tile after the last data tile is an add tile\n const newArray = fixArrayLength(\n [...comparativePlayersState],\n COMPARISON_NUMBER_OF_TILES\n );\n if (comparativePlayersState.length <= COMPARISON_NUMBER_OF_TILES) {\n newArray[comparativePlayersState.length] = COMPARE_TILE_ADD;\n }\n setComparativeTileState(newArray);\n }\n } else {\n setDisplayTilesCollection(\n comparisonData?.playerComparison?.comparativePlayers || [\n COMPARE_TILE_DATA,\n COMPARE_TILE_DATA,\n COMPARE_TILE_DATA,\n COMPARE_TILE_DATA,\n COMPARE_TILE_DATA,\n ]\n );\n }\n }\n }, [comparisonData, renderData]);\n\n const onAdd = (index) => {\n const newArray = [...comparativeTileState];\n // don't allow adding if the previous tile is empty\n if (\n (index > 0 && newArray[index - 1] !== COMPARE_TILE_EMPTY) ||\n index === 0\n ) {\n newArray[index] = COMPARE_TILE_EMPTY;\n newArray[index + 1] = COMPARE_TILE_ADD;\n }\n setComparativeTileState(newArray);\n };\n\n const onClose = (index) => {\n // update state\n const newArray = [...comparativeTileState];\n newArray.splice(index, 1);\n setComparativeTileState(\n fixArrayLength(newArray, COMPARISON_NUMBER_OF_TILES)\n );\n // update IDs for query\n const copyPlayerIdsArray = [...comparisonPlayerIds];\n copyPlayerIdsArray.splice(index, 1);\n setComparisonPlayerIds(copyPlayerIdsArray);\n };\n\n // result handler from LocalSearch\n const onResult = (resultPlayerId, index) => {\n const copyPlayerIdsArray = [...comparisonPlayerIds];\n copyPlayerIdsArray[index] = resultPlayerId;\n setComparisonPlayerIds(copyPlayerIdsArray);\n };\n\n return (\n <>\n \n {renderData &&\n playerComparisonData?.map((player, index) => {\n const tileState = getComparativeTileState(\n comparisonMode,\n playerComparisonData,\n comparativeTileState,\n index\n );\n const noData =\n tileState === COMPARE_TILE_ADD ||\n tileState === COMPARE_TILE_EMPTY;\n const showData = !noData;\n return (\n \n \n \n {isInteractive ? (\n
\n \n {isInteractive ? (\n
\n {comparisonMode === COMPARE_SELECTED && isInteractive && (\n handleClose(index, tileState)}\n size=\"tiny\"\n variant=\"secondary\"\n icon=\"Close\"\n title=\"Remove player from comparison\"\n />\n )}\n \n\n \n handleAdd(index)}\n size=\"small\"\n icon=\"PlusAdd\"\n title=\"Add player to comparison\"\n />\n \n\n \n onResult(result, index)}\n filterResultIds={[\n playerDetails?.id,\n ...comparisonPlayerIds,\n ]}\n />\n handleClose(index, tileState)}\n size=\"tiny\"\n variant=\"secondary\"\n icon=\"Close\"\n title=\"Remove player comparison tile\"\n />\n \n\n \n \n
\n \n {isInteractive ? (\n \n {player?.playerName}\n \n ) : (\n player?.playerName\n )}\n
\n \n {isInteractive ? (\n \n {player?.teamName}\n \n ) : (\n player?.teamName\n )}\n
\n {comparisonMode === COMPARE_SELECTED && isInteractive && (\n \n Player unavailable for this comparison.}\n target={
\n \n \n \n\n
\n \n \n \n Performance\n val.value === radarWeight\n ).performance\n }\n labelSuffix={ratioLabelSuffix}\n />\n \n \n Radar \n ({\n statValue: perf.name,\n }))}\n headers={COMPARISON_TABLE_COLS}\n showHeader={false}\n bodytdHeight=\"2rem\"\n />\n
\n \n \n \n Trait\n val.value === radarWeight\n ).trait\n }\n labelSuffix={ratioLabelSuffix}\n />\n \n \n Radar \n ({\n statValue: trait.name,\n }))}\n headers={COMPARISON_TABLE_COLS}\n showHeader={false}\n bodytdHeight=\"2rem\"\n />\n
\n \n The template controls which metrics are displayed on the radar spokes.\n
\n\n To only show data when a player lined up at a certain position, use the\n ‘By Alignment’ filter and select a position.\n
\n \n );\n const templateLabel = (\n <>\n Template\n\n \n \n \n \n
\n \n \n {\n setComparisonMode(COMPARE_SIMILAR);\n setRenderData(false);\n }}\n active={comparisonMode === COMPARE_SIMILAR}\n />\n {\n setComparisonMode(COMPARE_SELECTED);\n setRenderData(false);\n }}\n active={comparisonMode === COMPARE_SELECTED}\n />\n \n \n {comparisonData &&\n comparisonMode === COMPARE_SIMILAR &&\n numberOfMatchesInfo(\n comparisonData?.playerComparison?.totalComparisons\n )}\n \n {activeSelection && (\n \n
\n\n \n setComparisonPlayerIds([0])}\n variant=\"secondary\"\n size=\"small\"\n title=\"Clear Selection\"\n >\n Clear All\n \n
\n )}\n \n \n {\n setSelectedTemplateOption(selectedOption?.value);\n }}\n value={templateOptions?.find(\n (opt) => opt.value === selectedTemplateOption\n )}\n isSearchable={false}\n isLoading={isLoading}\n isDisabled={!templateOptions}\n menuPosition=\"static\"\n />\n \n setPlayerLinkComparison(!playerLinkComparison)}\n checked={playerLinkComparison}\n label={`Link players to ${\n playerLinkComparison ? 'Comparison' : 'Overview'\n }`}\n />\n {isNcaa && (\n \n setOnlyTransferPortal(!onlyTransferPortal)}\n checked={onlyTransferPortal}\n label=\"NCAA Transfer Portal\"\n />\n )}\n \n }\n isExpandedDefault\n isMount\n />\n\n Filters}\n body={\n \n <>\n \n setMinPlays(val)}\n reverse\n />\n \n\n \n }\n isExpandedDefault\n isMount\n />\n
\n \n \n Display mode\n \n \n setDisplayMode(TRAIT)}\n shape=\"pill\"\n variant={displayMode === TRAIT ? 'primary' : 'ghost'}\n disabled={isLoading}\n >\n Trait\n \n setDisplayMode(PERFORMANCE)}\n shape=\"pill\"\n variant={\n displayMode === PERFORMANCE ? 'primary' : 'ghost'\n }\n disabled={isLoading}\n >\n Performance\n \n setDisplayMode(BOTH)}\n shape=\"pill\"\n variant={displayMode === BOTH ? 'primary' : 'ghost'}\n disabled={isLoading}\n >\n Both\n \n \n
\n \n \n setAllPlays(true)}\n shape=\"pill\"\n variant={allPlays ? 'primary' : 'ghost'}\n disabled={isLoading}\n >\n All Plays\n \n setAllPlays(false)}\n shape=\"pill\"\n variant={!allPlays ? 'primary' : 'ghost'}\n disabled={isLoading}\n >\n By Alignment\n \n \n
\n\n {!allPlays && (\n \n \n Radar Weight (Trait/Performance)\n \n \n {COMPARISON_WEIGHT_OPTIONS.map((weight, i) => (\n {\n setRadarWeight(i);\n setRenderData(false);\n }}\n shape=\"pill\"\n variant={i === radarWeight ? 'primary' : 'ghost'}\n disabled={isLoading}\n >\n {weight.label}\n \n ))}\n \n
\n \n No user logged in.
}\n {user && (\n <>\n\n \n
\n Name: {user.name}\n
\n\n Email: {user.email}\n
\n \n )}\nUI Theme
\n\n
\n {section.section}
\n- \n {section.pages.map(\n (page) =>\n (!page.wip ||\n user['https://statsbomb.com/accountID'] ===\n USER_GROUP.STATSBOMB) && (\n
- \n
\n {page.label}\n {page.wip && \nWIP }\n {page.beta &&BETA }\n \n )\n )}\n
{children}
\n Play Finder
\nSelect your initial search parameters and filters.
\n \n\n
\n {widgetArgs.min}
\n to
\n {widgetArgs.max}
\n \n f === option) || false}\n onChange={() => handleCallback(filterId, [option])}\n />\n
\n ))}\n \n handleCallback(filterId, option)}\n />\n
\n ))}\n \n ;\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport WizardAccordion from '../../PlayFinderWizard/WizardAccordion/WizardAccordion';\nimport { getPlayFiltersWidget } from './PlayFinderWidgets';\nimport { PLAY_FINDER_WIDGET_TYPES } from '../../../../utils/constants/api';\n\nconst WizardAccordionWrapper = ({ widgetProps, title }) => (\n
\n
\n {title}
\n\n \n
\n \n
\n Add/Remove Filter
\n\n
\n \n
\n \n {filterTree?.map((filter, i) => (\n setSelectedParentIndex(i)}\n >\n {filter.label}\n \n ))}\n
\n \n
\n {filterTree[selectedParentIndex]?.label}
\n {filterTree[selectedParentIndex]?.children?.map((child) => {\n const options = child.children\n .filter(\n (filter) =>\n !PLAY_FINDER_WIDGET_BLACKLIST.includes(\n filter.filterId\n )\n )\n .map((filter) => (\n{options.length > 0 && child.label}
\n {options}\n \n );\n })}\n\n \n {children}\n \n )}\n
\n);\nPlayFinderPopup.propTypes = {\n trigger: PropTypes.node.isRequired,\n children: PropTypes.node.isRequired,\n isOpen: PropTypes.bool,\n top: PropTypes.number,\n offset: PropTypes.number,\n};\n\nPlayFinderPopup.defaultProps = {\n isOpen: false,\n top: 0,\n offset: 170,\n};\n\nexport default PlayFinderPopup;\n","import React, {\n forwardRef,\n useImperativeHandle,\n useState,\n useRef,\n useEffect,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Button,\n ButtonIcon,\n Dropdown,\n Icon,\n} from '@statsbomb/kitbag-components';\nimport classNames from 'classnames';\nimport { useNavigate, useParams } from 'react-router-dom';\nimport {\n FilterFooter,\n FilterLayout,\n FilterSelectedContent,\n} from './PlayFinderFilters.style';\nimport {\n SummaryTile,\n SummaryTileBody,\n SummaryTileHeader,\n} from '../../../components/Tile/TileSummary.styles';\n\nimport PlayFinderFiltersConfig from '../PlayFinderFiltersConfig/PlayFinderFiltersConfig';\nimport { getWidgetValue } from '../PlayFinderFiltersConfig/PlayFinderFiltersConfig.dataManipulation';\nimport Dimmer from '../../../components/Dimmer/Dimmer';\nimport PlayFinderPopup from './PlayFinderPopup/PlayFinderPopup';\nimport {\n findFilterById,\n findSelectedFilters,\n flattenFilterTree,\n mergeFilterTrees,\n removeFilterById,\n updateFilterById,\n} from './PlayFinderFilters.dataManipulation';\nimport { FilterTileFooter } from './PlayFinderPopup/PlayFinderPopup.styles';\nimport { usePlayFinderFilterTreeContext } from '../PlayFinderFilterTree/usePlayFinderFilterTreeContext';\nimport { STATSBOMB_PRESET_FILTERS } from './PlayFinderFilters.constants';\nimport { replaceHrefTokens } from '../../../utils/helpers/general';\nimport PlayFinderFiltersWrapper from '../PlayFinderFiltersConfig/PlayFinderWidgets/PlayFinderFiltersWrapper';\nimport { SIDEBAR_WIDTH } from '../../../components/SideNavigation/SideNav.styles';\n\n// PlayFinder Filters:\n// The root page component that holds the selected filter tree\n// Allows adjustment of selected filters via Popup\nconst PlayFinderFilters = forwardRef(\n ({ handleFilterUpdate, selectedFilters, children }, ref) => {\n const [filterOpen, setFilterOpen] = useState(\n sessionStorage.getItem('playFinderFilterOpen') || false\n );\n const filtersConfigRef = useRef();\n // Filter Popup\n const [popupOpen, setPopupOpen] = useState(false);\n const [popupFilter, setPopupFilter] = useState({});\n const popupRef = useRef([]);\n const [popupPositions, setPopupPositions] = useState([]);\n const [popupYPosition, setYPosition] = useState(0);\n const numberOfFilters = flattenFilterTree(selectedFilters).length;\n\n // Preset filters\n const {\n leagues: leagueParam,\n seasons: seasonParam,\n teams: teamParam,\n offense: offenseParam,\n preset: presetParam,\n } = useParams();\n const navigate = useNavigate();\n const [presetFilter] = useState(presetParam || null);\n\n const { data: playFinderFilters, loading: isLoading } =\n usePlayFinderFilterTreeContext();\n\n // handle panel open/close\n const toggleFilterOpen = () => {\n setFilterOpen(!filterOpen);\n sessionStorage.setItem('playFinderFilterOpen', !filterOpen);\n };\n useImperativeHandle(ref, () => ({\n filterOpen,\n toggle() {\n toggleFilterOpen();\n },\n }));\n\n useEffect(() => {\n // once rendered, get the y position of each filter in the popup\n const yPositions = popupRef.current\n .map((div) => div?.offsetTop)\n .slice(-numberOfFilters);\n setPopupPositions(yPositions);\n }, [selectedFilters]);\n\n const getPopupPosition = (label) =>\n // get the y position of the filter in the popup by array index\n popupPositions[\n popupRef.current\n .filter((item) => item !== null)\n .slice(-numberOfFilters)\n .findIndex((el) => el.id === label)\n ];\n\n // remove filter from the within the popup\n const handleRemoveFilter = (filter) => {\n setPopupOpen(false);\n // update the side panel and result query\n handleFilterUpdate(removeFilterById(selectedFilters, filter.filterId));\n };\n\n // handle filter update from popup\n const handleUpdateFilter = (filterId, option) => {\n const updatedFilter = updateFilterById(selectedFilters, filterId, option);\n // update the popup\n setPopupFilter(findFilterById(updatedFilter, filterId));\n // update the side panel and result query\n handleFilterUpdate(updatedFilter);\n };\n\n // add filters from FilterConfig\n const handleAddFilter = (filterTree) => {\n // close the filter config\n filtersConfigRef.current.toggle();\n\n // separate selected filters\n const filterTreeSelected = findSelectedFilters(filterTree);\n\n // merge selected filters with existing filters\n const updatedFilterTree =\n selectedFilters.length === 0\n ? filterTreeSelected\n : mergeFilterTrees(selectedFilters, filterTreeSelected);\n\n // update the side panel and result query\n handleFilterUpdate(updatedFilterTree);\n };\n\n // preset filter dropdown\n const handlePresetFilter = (selectedOption) => {\n // update the URL\n navigate(\n `/${replaceHrefTokens(\n 'playfinder/results/:leagues/:seasons/:teams/:offense/:preset',\n {\n leagues: leagueParam,\n seasons: seasonParam,\n teams: teamParam,\n offense: offenseParam,\n preset: selectedOption.value,\n }\n )}`,\n { replace: false }\n );\n };\n\n // Tree of filters with selected attribute\n // eslint-disable-next-line react/prop-types\n const FormattedFilters = ({ data }) => {\n const renderFilter = (items, level) =>\n items?.map((item, index) => (\n {trigger}
\n {isOpen && (\n {item.label}
}\n {level === 2 &&{item.label}
}\n {level === 3 && (\n\n {\n setYPosition(getPopupPosition(item.label));\n setPopupOpen(!popupOpen);\n setPopupFilter(item);\n }}\n ref={(el) => {\n popupRef.current.push(el);\n }}\n >\n {item.abbrev}\n \n {typeof item.widgetArgs.selected !== 'undefined' &&\n getWidgetValue(\n item.units,\n item.widgetType,\n item.widgetArgs,\n ''\n )}\n \n \n setPopupOpen(false)}\n >\n Done\n \n \n \n \n
\n )}\n {item.children && renderFilter(item.children, level + 1)}\n \n ));\n\n return <>{renderFilter(data, 1)};\n };\n\n return (\n <>\n \n \n \n \n \n {\n navigate(\n `/${replaceHrefTokens(\n 'playfinder/results/:leagues/:seasons/:teams/:offense',\n {\n leagues: leagueParam,\n seasons: seasonParam,\n teams: teamParam,\n offense: offenseParam,\n }\n )}`,\n { replace: false }\n );\n }}\n >\n Clear\n \n \n \n \n \n \n \n \n filtersConfigRef.current.toggle()}\n >\n \n \n \n
\n \n
\n Filter
\n\n
\n \n {popupOpen && (\n setPopupOpen(false)} />\n )}\n {children}\n
\n {item.label}
}\n {level === 2 &&{item.label}
}\n {level === 3 && !excludeColumns.includes(item.columnId) && (\n\n handleColumnCheck(item)}\n />\n
\n )}\n {item.children && renderFilter(item.children, level + 1)}\n \n ));\n\n return <>{renderFilter(data, 1)};\n };\n\n return (\n <>\n \n
\n \n \n {playFinderFilterTree && (\n
\n\n \n
\n \n
\n \n \n
\n Selected Columns
\n\n \n \n {(dropProvided) => (\n \n {sortedColumns.map((column, index) => (\n \n {(dragProvided) => (\n \n \n {\n setSortedColumns(\n sortedColumns.filter(\n (item) => item.key !== column.key\n )\n );\n\n setFilterTree(\n updateFilterById(\n filterTree,\n column.filterId,\n false\n )\n );\n }}\n />\n \n )}\n \n )}\n \n ))}\n {dropProvided.placeholder}\n
\n )}\n \n \n {label}
\n{displayValue}
\n \n
\n {`Summary of ${playsCount} snap${\n playsCount !== 1 ? 's' : ''\n }`}
\n\n onDisplaySummaryOpen(!displaySummaryOpen)}\n variant=\"secondary\"\n shape=\"pill\"\n size=\"small\"\n icon={displaySummaryOpen ? 'ChevronUp' : 'ChevronDown'}\n isDisabled={isLoading}\n title=\"ChevronUp\"\n />\n
\n \n \n \n {aggregateData\n .filter((data) => !Array.isArray(data.distribution))\n .map((stat) => (\n
\n Performance
\n\n \n {\n setSelectedDistribution(selectedOption.value);\n }}\n value={distributionAggregateDataTitles.find(\n (item) => item.value === selectedDistribution\n )}\n isSearchable={false}\n size=\"small\"\n />\n \n
\n Distribution
\n\n \n \n \n \n \n \n \n \n \n {isLoading && !hasError && (\n \n \n )}\n {!isLoading && hasError && (\n \n \n \n \n )}\n \n setPlaysPerPage(item.value)}\n options={PLAY_FINDER_PAGESIZE_OPTIONS}\n value={PLAY_FINDER_PAGESIZE_OPTIONS.find(\n (op) => op.value === playsPerPage\n )}\n labelPosition=\"left\"\n label=\"Per page\"\n variant=\"tertiary\"\n size=\"small\"\n />\n \n setActivePage(pageSelected)\n }\n itemsPerPage={playsPerPage}\n dataLength={playsCount}\n hasEdgePageButtons\n />\n \n \n \n \n
\n\n \n {\n filtersRef.current.toggle();\n if (videoOpen) {\n setVideoOpen(false);\n }\n }}\n size=\"small\"\n title=\"Add plays to playlist\"\n variant={\n selectedFiltersCount > 0 ? 'primary' : 'secondary'\n }\n isDisabled={isLoading || hasError}\n >\n \n
\n Plays
\n\n {\n if (selectedEvents.length === 0) {\n videoActive.current = true;\n }\n setVideoOpen(true);\n if (filtersRef.current.filterOpen) {\n filtersRef.current.toggle();\n }\n }}\n numberOfPlays={selectedEvents.length}\n isDisabled={\n selectedEvents.length === 0 ||\n isLoading ||\n isVideoVisible\n }\n variant={areEventsSelected ? 'primary' : 'secondary'}\n />\n \n setTableData({ data: tableData.data, columns })\n }\n />\n
\n \n {isVideoVisible && playFinderResultData && (\n \n \n )}\n
\n \n Summary
\n\n {havocSummarySelected && (\n \n Clear selection\n \n )}\n setDisplaySummaryOpen(!displaySummaryOpen)}\n variant=\"secondary\"\n shape=\"pill\"\n size=\"small\"\n icon={displaySummaryOpen ? 'ChevronUp' : 'ChevronDown'}\n title=\"ChevronUp\"\n />\n
\n \n \n \n {playsTotals?.map((stat) => (\n
\n Plays
\n\n \n \n {havocTotals?.map((stat) => (\n
\n Havoc Totals
\n\n \n \n {havocSummaryTotals?.map((stat) => (\n
\n Selection Totals
\n{tileTitle}
\n\n {isFunction(handleVisTableSwitch) && (\n
\n \n Havoc Plays Summary\n
\n\n setDisplayKey(!displayKey)}\n />\n
\n \n League average data is loading...\n
\n )}\n {displayKey && (\n {tileTitle}
\n\n {isFunction(handleVisTableSwitch) && (\n setDisplayKey(!displayKey)}\n />\n \n
\n \n \n
\n \n Post Snap \n {`${data?.postSnapSeconds?.toFixed(2) || ''}s`}\n
\n {data?.snapGapName && (\n \n Snap Gap \n {`${data?.snapGapName || ''}`}\n
\n )}\n \n Snap Defender \n \n {data?.defenderName}\n \n
\n \n \n \n
\n \n Exploited Gap \n {data?.eventGapName ? `${data?.eventGapName}` : '-'}\n
\n\n \n Yards to LoS \n {`${data?.xLoS?.toFixed(1) || '-'}`}\n
\n \n Target \n {data?.targetName}\n
\n \n \n \n Havoc Detail \n {`${data?.playerName} ${data?.havocType?.toLowerCase()} ${\n data?.targetName\n }`}\n
\n \n \n setDisplayTable(!displayTable)\n }\n colorMode={summaryColorMode}\n havocSummaryMode={percentageMode}\n selectedGaps={selectedGaps}\n setSelectedGaps={gapBarsGapsSelected}\n selectedDefenderZones={selectedDefenderZones}\n setSelectedDefenderZones={defenderZoneBubbleSelected}\n isLoadingLA={isLoadingLAGap || isLoadingLAZone}\n gapAverages={gapAverages}\n zoneAverages={zoneAverages}\n />\n )}\n {displayTable && (\n \n setDisplayTable(!displayTable)\n }\n isPlaysMode\n />\n )}\n\n {!displayTableEvents && (\n \n setDisplayTableEvents(!displayTableEvents)\n }\n nowPlayingPlayUUID={nowPlayingPlayUUID}\n />\n )}\n {displayTableEvents && (\n \n setDisplayTableEvents(!displayTableEvents)\n }\n />\n )}\n
\n \n {!showVideoPlayer && (\n <>\n
\n \n \n \n onPlaylistClick(title, playsVideo)}\n numberOfPlays={plays.length}\n isDisabled={plays.length === 0 || isLoading || isVideoVisible}\n variant={plays && plays.length > 0 ? 'primary' : 'secondary'}\n tooltip=\"Select plays from the table below\"\n />\n h.label)}\n fileName={fileName}\n data-testid={`${title.replace(/ /g, '')}CSVButton`}\n isDisabled={isLoading || hasError}\n />\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n Stats\n \n \n setLeagueAvg(false)}\n size=\"small\"\n >\n Team\n \n setLeagueAvg(true)}\n size=\"small\"\n >\n vs. League Avg\n \n \n
\n \n \n {isVideoVisible && data && (\n \n \n )}\n
\n \n \n {playDriveIndex}\n {getDownName(playDatum.down)}\n {getToGoName(playDatum.yardsToGo)}\n \n {getYardlineName(playDatum.yardLine)}\n \n {API_PLAY_TYPES[playDatum.type]}\n {yardsWonText}\n \n {playOutcome && (\n <>\n
\n \n {eventNotes}\n
\n\n \n {playDatum.videoTimestamp}\n\n {packageCollectedPlay && (\n {\n if (playDatum.id !== selectedPlay?.id) {\n setSelectedPlay({\n id: playDatum.id,\n info: { ...playDatum, eventNotes },\n });\n }\n }}\n />\n )}\n
\n \n );\n};\n\nfunction PlayByPlayAccordianTileBody({ playsData, visPalette }) {\n if (!playsData) {\n return <>;\n }\n\n return (\n \n Play\n Down\n Yards to go\n Yardline of the snap\n Play type\n Yards gained/lost\n Play outcome\n Penalty information\n
\n There was an error loading the data
;\n }\n if (!playsData || playsData?.length === 0) {\n returnNo Data available
;\n }\n return null;\n };\n\n return (\n feedbackContent() && (\n\n {feedbackContent()} \n
\n )\n );\n};\n\nPlayByPlayAccordionFeedback.propTypes = {\n isLoading: PropTypes.bool.isRequired,\n hasError: PropTypes.bool.isRequired,\n playsData: PropTypes.arrayOf(\n PropTypes.shape({\n game: PropTypes.shape({\n awayTeam: PropTypes.shape({ name: PropTypes.string }),\n homeTeam: PropTypes.shape({ name: PropTypes.string }),\n }),\n })\n ),\n};\n\nPlayByPlayAccordionFeedback.defaultProps = {\n playsData: undefined,\n};\n\nexport default PlayByPlayAccordionFeedback;\n","import { styled } from 'styled-components';\n\nexport const ChevronWrapper = styled.div`\n svg {\n transition: transform 0.3s ease-in-out;\n ${({ $isOpen }) => $isOpen && `transform: rotate(180deg)`};\n }\n`;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { ButtonIcon, Icon, Table } from '@statsbomb/kitbag-components';\nimport { millisecondsToTime } from '../../../../utils/helpers/time';\nimport { getYardlineName, getYardsWon } from '../../../../utils/helpers/play';\nimport { PLAY_BY_TABLE_HEADERS_PROP_TYPE } from '../PlayByPlay.constants';\nimport { useSelectedPlay } from '../SelectedPlayContext';\nimport { ChevronWrapper } from './PlayByPlayAccordionHeader.styles';\n\nconst PlayByPlayAccordionHeader = ({\n drive,\n tableHeaders,\n isHomeTeam,\n selectedTeamName,\n selectedTeamColor,\n opponentTeamColor,\n}) => {\n const { setSelectedPlay } = useSelectedPlay();\n const [isOpen, setIsOpen] = useState(false);\n\n const obj = {\n drive: drive?.gameIndex,\n teamOnOffense: drive?.team?.name,\n clock: `Q${drive?.startQuarter} ${millisecondsToTime(\n drive?.quarterClockRemaining\n )}`,\n plays: drive.playCount,\n driveResult: drive?.name?.split('→ ')[1] || '',\n startingFieldPosition: `${getYardlineName(drive?.startingYards)}`,\n yardsGained: getYardsWon(drive?.yardsNet),\n selectedTeamScore: isHomeTeam ? drive?.homeScore : drive?.awayScore,\n opponentTeamScore: isHomeTeam ? drive?.awayScore : drive?.homeScore,\n controls: '',\n };\n\n // check content for exceptional cases\n const checkContent = (header, content) => {\n if (header.key === 'teamOnOffense') {\n return (\n \n \n \n {gameDate}\n \n \n \n \n \n \n \n \n \n
\n Play by Play Feed
\n\n {selectedPlay?.id?.length > 0 && (\n
\n \n \n
\n )}\n