@golstats/gsc-possession-heatmaps 1.1.0

package/src/components/gsc-possession-heatmaps.vue

@@ -0,0 +1,1194 @@
+<template>
+  <div
+    class="possession-heatmaps-container"
+    :class="[sizeClass, { 'content-fits': contentFits }]"
+    ref="containerRef"
+  >
+    <div class="heatmaps-box">
+      <!-- Título con línea separadora -->
+      <div class="heatmaps-header">
+        <h2 class="heatmaps-title">Heatmap</h2>
+        <div class="title-separator"></div>
+      </div>
+
+      <div class="heatmaps-wrapper">
+        <!-- Flecha izquierda (visible cuando no caben todas las canchas) -->
+        <button
+          v-if="showArrows"
+          class="carousel-arrow carousel-arrow-left"
+          @click="scrollLeft"
+          :disabled="currentIndex <= 0"
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M15 18L9 12L15 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+
+        <!-- Contenedor de canchas -->
+        <div class="fields-container" ref="fieldsContainer">
+        <div
+          v-for="(heatmap, index) in heatmaps"
+          :key="index"
+          class="field-item"
+        >
+          <h3 class="field-title">{{ heatmap.title }}</h3>
+          <div class="field-with-arrow">
+            <div class="field-wrapper">
+            <svg
+              class="field-svg"
+              width="222"
+              height="291"
+              viewBox="0 0 177 253"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M0 0H177V253H0V0Z" fill="#1D2A35" />
+              <rect x="42.606" y="0.5" width="91.7885" height="35.2369" stroke="white" />
+              <rect x="63.6587" y="0.5" width="49.6828" height="19.4244" stroke="white" />
+              <path
+                d="M107.947 35.5781C103.301 40.4025 96.2172 43.4844 88.2819 43.4844C80.3467 43.4844 73.2633 40.4025 68.6167 35.5781"
+                stroke="white"
+              />
+              <ellipse cx="88.5002" cy="26.0249" rx="1.1696" ry="0.98828" fill="white" />
+              <rect
+                x="0.5"
+                y="-0.5"
+                width="91.7885"
+                height="35.2369"
+                transform="matrix(1 6.77658e-09 -8.01991e-09 -1 42.106 252)"
+                stroke="white"
+              />
+              <rect
+                x="0.5"
+                y="-0.5"
+                width="49.6828"
+                height="19.4244"
+                transform="matrix(1 6.77658e-09 -8.01991e-09 -1 63.1587 252)"
+                stroke="white"
+              />
+              <path
+                d="M107.947 217.422C103.301 212.597 96.2172 209.516 88.2819 209.516C80.3467 209.516 73.2633 212.597 68.6167 217.422"
+                stroke="white"
+              />
+              <ellipse
+                cx="1.1696"
+                cy="0.98828"
+                rx="1.1696"
+                ry="0.98828"
+                transform="matrix(1 0 0 -1 87.3306 227.963)"
+                fill="white"
+              />
+              <rect
+                x="0.5"
+                y="-0.5"
+                width="47"
+                height="47"
+                rx="23.5"
+                transform="matrix(1 0 0 -1 65 149.709)"
+                stroke="white"
+              />
+              <rect
+                width="3.11894"
+                height="2.63541"
+                rx="1.31771"
+                transform="matrix(1 0 0 -1 86.9404 127.817)"
+                fill="white"
+              />
+              <rect x="0.5" y="0.5" width="176" height="252" stroke="white" />
+              <path d="M1 126.5H176.051" stroke="white" />
+            </svg>
+            <!-- Overlay para heatmap (Plotly) -->
+            <div class="heatmaps-overlay">
+              <div
+                :ref="(el) => { if (el) heatmapRefs[index] = el }"
+                class="heatmap-plot"
+              ></div>
+            </div>
+            <!-- Loading indicator -->
+            <div v-if="(isLoading || (props.type === 'team' && !heatmapsLoaded))" class="loading-overlay">
+              <div class="loading-spinner"></div>
+            </div>
+          </div>
+            <!-- Flecha hacia arriba (dirección del juego) -->
+            <div class="field-direction-arrow">
+              <svg width="20" height="220" viewBox="0 0 20 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M10 204V16M10 16L4 24M10 16L16 24" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+
+        <!-- Flecha derecha (visible cuando no caben todas las canchas) -->
+        <button
+          v-if="showArrows"
+          class="carousel-arrow carousel-arrow-right"
+          @click="scrollRight"
+          :disabled="isMobile ? currentIndex >= heatmaps.length - 1 : currentIndex >= heatmaps.length - 2"
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M9 18L15 12L9 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
+import Plotly from 'plotly.js-dist-min'
+
+const props = defineProps({
+  /** 'player' | 'team' */
+  type: {
+    type: String,
+    required: true,
+    validator: (value) => ['player', 'team'].includes(value)
+  },
+  /** Objeto de filtros */
+  filters: {
+    type: Object,
+    default: () => ({})
+  },
+  /** ID del equipo (numérico) */
+  team: {
+    type: Number,
+    default: undefined
+  },
+  /** ID del jugador (numérico) */
+  player: {
+    type: Number,
+    default: undefined
+  },
+  /** Temporada */
+  season: {
+    type: [Number, String],
+    default: undefined
+  },
+  /** Array de game IDs para filtrar los datos */
+  games: {
+    type: Array,
+    default: () => []
+  },
+  /** Array de match_result para filtrar los datos */
+  results: {
+    type: Array,
+    default: () => []
+  },
+  /** Array de section para filtrar los datos */
+  sections: {
+    type: Array,
+    default: () => []
+  },
+  /** Array de playing_as para filtrar los datos */
+  playingas: {
+    type: Array,
+    default: () => []
+  },
+  /** Token de autenticación para las peticiones */
+  token: {
+    type: String,
+    default: undefined
+  },
+  /** Proveedor de datos: 1/0/null = GolStats (URLs originales), 2+ = proveedor externo */
+  provider: {
+    type: Number,
+    default: 1
+  },
+  /** Usar entorno de desarrollo de APIs externas (solo aplica cuando provider >= 2) */
+  isDevApis: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const containerRef = ref(null)
+const fieldsContainer = ref(null)
+const heatmapRefs = ref([])
+const currentIndex = ref(0)
+const isMobile = ref(false)
+const isTablet = ref(false)
+const showArrows = ref(false)
+const contentFits = ref(false)
+const sizeClass = ref('size-desktop')
+const isLoading = ref(false)
+const heatmapsLoaded = ref(false)
+const originalFormattedData = ref([]) // Guardar datos originales para re-filtrar
+let resizeObserver = null
+
+const heatmaps = ref([
+  { title: 'Pases acertados' },
+  { title: 'Pases no acertados' },
+  { title: 'Balones recuperados' },
+  { title: 'Balones perdidos' }
+])
+
+// Función para filtrar y renderizar los heatmaps
+const filterAndRenderHeatmaps = async () => {
+  if (originalFormattedData.value.length === 0) {
+    return // No hay datos para filtrar
+  }
+  
+  // Filtrar por games, results y team_id si se proporcionan
+  let filteredData = originalFormattedData.value
+  if (props.type === 'player') {
+    console.log('Datos iniciales antes de filtros:', filteredData.length)
+  }
+  
+  if (props.games && props.games.length > 0) {
+    filteredData = filteredData.filter(p => props.games.includes(p.game_id))
+    if (props.type === 'player') {
+      console.log('Después de filtrar por games:', filteredData.length, 'games:', props.games)
+    }
+  }
+  if (props.results && props.results.length > 0) {
+    filteredData = filteredData.filter(p => props.results.includes(p.match_result))
+    if (props.type === 'player') {
+      console.log('Después de filtrar por results:', filteredData.length, 'results:', props.results)
+    }
+  }
+  if (props.team !== undefined && props.team !== null && props.type !== 'player') {
+    filteredData = filteredData.filter(p => p.team_id === props.team)
+  }
+  if (props.sections && props.sections.length > 0) {
+    filteredData = filteredData.filter(p => props.sections.includes(p.section))
+    if (props.type === 'player') {
+      console.log('Después de filtrar por sections:', filteredData.length, 'sections:', props.sections)
+    }
+  }
+  if (props.playingas && props.playingas.length > 0) {
+    filteredData = filteredData.filter(p => props.playingas.includes(p.playing_as))
+    if (props.type === 'player') {
+      console.log('Después de filtrar por playingas:', filteredData.length, 'playingas:', props.playingas)
+    }
+  }
+  
+  // Mostrar datos filtrados solo para jugador
+  if (props.type === 'player') {
+    console.log('Datos filtrados de jugador:', filteredData)
+  }
+  
+  // Si no hay datos después del filtrado, limpiar todos los heatmaps
+  if (filteredData.length === 0) {
+    await nextTick()
+    heatmapRefs.value.forEach(ref => {
+      if (ref) {
+        Plotly.purge(ref)
+      }
+    })
+    return
+  }
+  
+  // Generar datos del heatmap para cada cancha
+  await nextTick()
+  
+  // Pases acertados → ID's 2 y 20 → Coordenada 3
+  if (heatmapRefs.value[0]) {
+    const heatmapData = generateHeatmapDataFromFormatted(filteredData, [2, 20], 3)
+    renderHeatmap(heatmapRefs.value[0], heatmapData)
+  }
+  
+  // Pases no acertados → ID's 3 y 21 → Coordenada 3
+  if (heatmapRefs.value[1]) {
+    const heatmapData = generateHeatmapDataFromFormatted(filteredData, [3, 21], 3)
+    renderHeatmap(heatmapRefs.value[1], heatmapData)
+  }
+  
+  // Balones recuperados → ID's 483 y 484 (team) o 485-492 (player) → Coordenada 1
+  if (heatmapRefs.value[2]) {
+    const balonesRecuperadosCategories = props.type === 'player' 
+      ? [485, 486, 487, 488, 489, 490, 491, 492]
+      : [483, 484]
+    const heatmapData = generateHeatmapDataFromFormatted(filteredData, balonesRecuperadosCategories, 1)
+    renderHeatmap(heatmapRefs.value[2], heatmapData)
+  }
+  
+  // Balones perdidos → ID's 494 y 495 → Coordenada 3
+  if (heatmapRefs.value[3]) {
+    const heatmapData = generateHeatmapDataFromFormatted(filteredData, [494, 495], 3)
+    renderHeatmap(heatmapRefs.value[3], heatmapData)
+  }
+}
+
+// Construye la URL según el proveedor:
+// provider 1, 0 o null → URL original (GolStats)
+// provider 2 o mayor  → https://apis.golstats.com/{provider}/{path}   (isDevApis false)
+//                     → https://dev-apis.golstats.com/{provider}/{path} (isDevApis true)
+// En ambos casos elimina el segmento /prod o /qa del path original.
+const buildUrl = (originalUrl) => {
+  const provider = props.provider
+  if (!provider || provider === 1) return originalUrl
+  const withoutProtocol = originalUrl.replace('https://', '')
+  const slashIndex = withoutProtocol.indexOf('/')
+  let path = withoutProtocol.slice(slashIndex)
+  path = path.replace(/^\/(prod|qa)\//, '/')
+  const base = props.isDevApis
+    ? `https://dev-apis.golstats.com/${provider}`
+    : `https://apis.golstats.com/${provider}`
+  return `${base}${path}`
+}
+
+// Método que se ejecuta cuando type es 'team'
+const handleTeamType = async () => {
+  if (!props.season || !props.team) {
+    console.warn('Season y team son requeridos para hacer la petición')
+    return
+  }
+  
+  isLoading.value = true
+  heatmapsLoaded.value = false
+  
+  try {
+    const headers = {}
+   
+    
+    const response = await fetch(
+      buildUrl(`https://golstats-microservices.s3-us-west-2.amazonaws.com/statsTeamBySeason-${props.season}-${props.team}.json`),
+      {
+        headers
+      }
+    )
+    const data = await response.json()
+    
+    // Procesar data.posession (o data.possession)
+    if (data.data?.posession || data.data?.possession) {
+      const possessionData = data.data.posession || data.data.possession
+      const formattedData = possessionData.map((p) => ({
+        play_id: p[0],
+        game_id: p[1],
+        team_id: p[2],
+        player_id: p[3],
+        moment_of_play: p[4],
+        category_id: p[5],
+        category_type: p[6],
+        matchlapse: p[7],
+        section: p[8],
+        match_result: p[9],
+        playing_as: p[10],
+        total: p[11],
+        coordinate1_x: p[12],
+        coordinate1_y: p[13],
+        coordinate2_x: p[14],
+        coordinate2_y: p[15],
+        coordinate3_x: p[16],
+        coordinate3_y: p[17],
+        probability_1: p[18],
+        probability_2: p[19],
+        date_time_utc: p[20]
+      }))
+      
+      // Obtener game_id únicos
+      const uniqueGameIds = [...new Set(formattedData.map(p => p.game_id))]
+      
+      // Guardar datos originales para poder re-filtrar cuando cambie games
+      originalFormattedData.value = formattedData
+      
+      // Filtrar y renderizar heatmaps
+      await filterAndRenderHeatmaps()
+      
+      heatmapsLoaded.value = true
+    }
+  } catch (error) {
+    console.error('Error al obtener los datos del equipo:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Método que se ejecuta cuando type es 'player'
+const handlePlayerType = async () => {
+  if (!props.season || !props.player) {
+    console.warn('Season y player son requeridos para hacer la petición')
+    return
+  }
+  
+  isLoading.value = true
+  heatmapsLoaded.value = false
+  
+  try {
+    const headers = {}
+    if (props.token) {
+      headers['Authorization'] = `${props.token}`
+    }
+    
+    const response = await fetch(
+      buildUrl(`https://fn0z0dd0u3.execute-api.us-west-2.amazonaws.com/prod/statsPlayerBySeason/${props.season}/${props.player}`),
+      {
+        headers
+      }
+    )
+    const data = await response.json()
+    console.log('Data completa del jugador:', data)
+    console.log('Data.data:', data.data)
+    
+    // Procesar data.posession (o data.possession)
+    // Para jugador, los índices son diferentes: play_id[0], game_id[1], player_id[2], etc.
+    if (data.data?.posession || data.data?.posession) {
+      const possessionData = data.data.posession || data.data.possession
+      console.log('Possession data raw:', possessionData)
+      console.log('Primer registro raw:', possessionData[0])
+      console.log('Cantidad de registros:', possessionData.length)
+      
+      const formattedData = possessionData.map((p) => ({
+        play_id: p[0],
+        game_id: p[1],
+        player_id: p[2],
+        moment_of_play: p[3],
+        category_id: p[4],
+        category_type: p[5],
+        matchlapse: p[6],
+        section: p[7],
+        match_result: p[8],
+        playing_as: p[9],
+        total: p[10],
+        coordinate1_x: p[11],
+        coordinate1_y: p[12],
+        coordinate2_x: p[13],
+        coordinate2_y: p[14],
+        coordinate3_x: p[15],
+        coordinate3_y: p[16],
+        probability_1: p[17],
+        probability_2: p[18],
+        section_id: p[19],
+        team_id: p[20],
+        next_player: p[21],
+        start_time: p[22],
+        end_time: p[23]
+      }))
+      
+      console.log('Datos formateados:', formattedData)
+      console.log('Primer registro formateado:', formattedData[0])
+      
+      // Obtener game_id únicos
+      const uniqueGameIds = [...new Set(formattedData.map(p => p.game_id))]
+      console.log('Game IDs únicos:', uniqueGameIds)
+      
+      // Guardar datos originales para poder re-filtrar cuando cambie games
+      originalFormattedData.value = formattedData
+      console.log('Datos guardados en originalFormattedData:', originalFormattedData.value.length)
+      
+      // Filtrar y renderizar heatmaps
+      await filterAndRenderHeatmaps()
+      
+      heatmapsLoaded.value = true
+    } else {
+      console.log('No se encontró data.data.posession o data.data.possession')
+    }
+  } catch (error) {
+    console.error('Error al obtener los datos del jugador:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Watch para observar cambios en type, season, team y player
+watch([() => props.type, () => props.season, () => props.team, () => props.player], (newValues) => {
+  const [newType, newSeason, newTeam, newPlayer] = newValues || []
+  if (props.type === 'team') {
+    handleTeamType()
+  } else if (props.type === 'player') {
+    handlePlayerType()
+  }
+}, { immediate: true })
+
+// Watch para observar cambios en games y re-filtrar los datos
+watch(() => props.games, (newGames, oldGames) => {
+  if ((props.type === 'team' || props.type === 'player') && originalFormattedData.value.length > 0) {
+    filterAndRenderHeatmaps()
+  }
+}, { deep: true })
+
+// Watch para observar cambios en results y re-filtrar los datos
+watch(() => props.results, (newResults, oldResults) => {
+  if ((props.type === 'team' || props.type === 'player') && originalFormattedData.value.length > 0) {
+    filterAndRenderHeatmaps()
+  }
+}, { deep: true })
+
+// Watch para observar cambios en team y re-filtrar los datos
+watch(() => props.team, (newTeam, oldTeam) => {
+  // Solo re-filtrar si ya tenemos datos cargados (no hacer nueva petición)
+  if ((props.type === 'team' || props.type === 'player') && originalFormattedData.value.length > 0 && newTeam !== oldTeam) {
+    filterAndRenderHeatmaps()
+  }
+})
+
+// Watch para observar cambios en sections y re-filtrar los datos
+watch(() => props.sections, (newSections, oldSections) => {
+  if ((props.type === 'team' || props.type === 'player') && originalFormattedData.value.length > 0) {
+    filterAndRenderHeatmaps()
+  }
+}, { deep: true })
+
+// Watch para observar cambios en playingas y re-filtrar los datos
+watch(() => props.playingas, (newPlayingas, oldPlayingas) => {
+  if ((props.type === 'team' || props.type === 'player') && originalFormattedData.value.length > 0) {
+    filterAndRenderHeatmaps()
+  }
+}, { deep: true })
+
+// Watch para observar cambios en player y re-filtrar los datos
+watch(() => props.player, (newPlayer, oldPlayer) => {
+  // Solo re-filtrar si ya tenemos datos cargados (no hacer nueva petición)
+  if ((props.type === 'team' || props.type === 'player') && originalFormattedData.value.length > 0 && newPlayer !== oldPlayer) {
+    filterAndRenderHeatmaps()
+  }
+})
+
+const checkContainerSize = async () => {
+  if (containerRef.value) {
+    const containerWidth = containerRef.value.offsetWidth
+    
+    isMobile.value = containerWidth < 600
+    isTablet.value = containerWidth >= 600 && containerWidth < 768
+    
+    // Clase según tamaño del contenedor (sin media queries)
+    if (containerWidth >= 768) {
+      sizeClass.value = 'size-desktop'
+    } else if (containerWidth >= 600) {
+      sizeClass.value = 'size-tablet'
+    } else {
+      sizeClass.value = 'size-mobile'
+    }
+    
+    // Verificar si las canchas caben usando nextTick para asegurar que el DOM esté actualizado
+    await nextTick()
+    if (fieldsContainer.value) {
+      const fieldsScrollWidth = fieldsContainer.value.scrollWidth
+      const fieldsClientWidth = fieldsContainer.value.clientWidth
+      
+      // Mostrar flechas si el contenido no cabe (scrollWidth > clientWidth + margen de 2px) o si estamos en modo móvil/tablet
+      const needsScroll = isMobile.value || isTablet.value || fieldsScrollWidth > fieldsClientWidth + 2
+      showArrows.value = needsScroll
+      contentFits.value = !needsScroll
+    } else {
+      contentFits.value = false
+    }
+  }
+}
+
+const scrollLeft = () => {
+  if (currentIndex.value > 0) {
+    currentIndex.value = isMobile.value 
+      ? currentIndex.value - 1 
+      : Math.max(0, currentIndex.value - 2)
+    scrollToIndex()
+  }
+}
+
+const scrollRight = () => {
+  const maxIndex = isMobile.value 
+    ? heatmaps.value.length - 1 
+    : heatmaps.value.length - 2
+  if (currentIndex.value < maxIndex) {
+    currentIndex.value = isMobile.value 
+      ? currentIndex.value + 1 
+      : currentIndex.value + 2
+    scrollToIndex()
+  }
+}
+
+const scrollToIndex = () => {
+  if (fieldsContainer.value) {
+    const fieldItem = fieldsContainer.value.children[currentIndex.value]
+    if (fieldItem) {
+      fieldItem.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: isTablet.value ? 'start' : 'center'
+      })
+    }
+  }
+}
+
+// Generar datos de ejemplo para el heatmap (grid 18x26 aprox. campo 177x253)
+function generateHeatmapData() {
+  const rows = 18
+  const cols = 26
+  const z = []
+  for (let i = 0; i < rows; i++) {
+    const row = []
+    for (let j = 0; j < cols; j++) {
+      row.push(Math.random() * 100)
+    }
+    z.push(row)
+  }
+  return z
+}
+
+// Convertir coordenadas a grid del heatmap con sombra más amplia
+function coordinatesToHeatmapGrid(coordinates, rows = 18, cols = 26) {
+  const grid = Array(rows).fill(0).map(() => Array(cols).fill(0))
+  
+  // Radio de sombra más amplio (afecta más celdas alrededor de cada punto)
+  const shadowRadius = 5 // Aumentado para sombra mucho más amplia
+  
+  coordinates.forEach(({ x, y }) => {
+    // Las coordenadas están normalizadas (0-1), convertir a índices del grid
+    const colIndex = Math.floor(x * cols)
+    const rowIndex = Math.floor((1 - y) * rows) // Invertir Y porque el origen está abajo
+    
+    // Aplicar sombra amplia: afectar celdas alrededor del punto
+    for (let dy = -shadowRadius; dy <= shadowRadius; dy++) {
+      for (let dx = -shadowRadius; dx <= shadowRadius; dx++) {
+        const newRowIndex = rowIndex + dy
+        const newColIndex = colIndex + dx
+        
+        // Calcular peso basado en distancia (más cerca = más peso)
+        const distance = Math.sqrt(dx * dx + dy * dy)
+        const weight = distance <= shadowRadius ? (shadowRadius + 1 - distance) / (shadowRadius + 1) : 0
+        
+        if (newRowIndex >= 0 && newRowIndex < rows && newColIndex >= 0 && newColIndex < cols) {
+          grid[newRowIndex][newColIndex] += weight
+        }
+      }
+    }
+  })
+  
+  return grid
+}
+
+// Generar datos del heatmap desde datos formateados según la categoría
+function generateHeatmapDataFromFormatted(formattedData, categoryIds, coordinateType) {
+  // Filtrar por category_id
+  const filtered = formattedData.filter(p => categoryIds.includes(p.category_id))
+  
+  // Si no hay datos filtrados, retornar null
+  if (filtered.length === 0) {
+    return null
+  }
+  
+  // Extraer coordenadas según el tipo de los datos formateados
+  // Ajustar Y según la categoría: subir hacia arriba normalmente, bajar para Balones recuperados, subir más para Balones perdidos
+  const isBalonesRecuperados = categoryIds.includes(483) || categoryIds.includes(484) || 
+    categoryIds.includes(485) || categoryIds.includes(486) || categoryIds.includes(487) || 
+    categoryIds.includes(488) || categoryIds.includes(489) || categoryIds.includes(490) || 
+    categoryIds.includes(491) || categoryIds.includes(492)
+  const isBalonesPerdidos = categoryIds.includes(494) || categoryIds.includes(495)
+  const isPasesAcertados = categoryIds.includes(2) || categoryIds.includes(20)
+  const yOffsetUp = 0.05 // Offset para mover coordenadas hacia arriba (normal)
+  const yOffsetUpMore = 0.16 // Offset adicional para Balones perdidos (subir más)
+  const yOffsetUpPasesAcertados = 0.03 // Offset adicional para Pases acertados (subir más)
+  const yOffsetDown = 0.05 // Offset para mover coordenadas hacia abajo (Balones recuperados)
+  
+  const originalCoordinates = filtered.map(p => {
+    let x, y
+    if (coordinateType === 1) {
+      x = p.coordinate1_x
+      if (isBalonesRecuperados) {
+        y = Math.min(1, p.coordinate1_y + yOffsetDown) // Aumentar Y para mover hacia abajo
+      } else if (isBalonesPerdidos) {
+        y = Math.max(0, p.coordinate1_y - yOffsetUpMore) // Reducir Y más para mover hacia arriba
+      } else if (isPasesAcertados) {
+        y = Math.max(0, p.coordinate1_y - yOffsetUpPasesAcertados) // Reducir Y más para Pases acertados
+      } else {
+        y = Math.max(0, p.coordinate1_y - yOffsetUp) // Reducir Y para mover hacia arriba
+      }
+    } else if (coordinateType === 2) {
+      x = p.coordinate2_x
+      if (isBalonesRecuperados) {
+        y = Math.min(1, p.coordinate2_y + yOffsetDown) // Aumentar Y para mover hacia abajo
+      } else if (isBalonesPerdidos) {
+        y = Math.max(0, p.coordinate2_y - yOffsetUpMore) // Reducir Y más para mover hacia arriba
+      } else if (isPasesAcertados) {
+        y = Math.max(0, p.coordinate2_y - yOffsetUpPasesAcertados) // Reducir Y más para Pases acertados
+      } else {
+        y = Math.max(0, p.coordinate2_y - yOffsetUp) // Reducir Y para mover hacia arriba
+      }
+    } else { // coordinateType === 3
+      x = p.coordinate3_x
+      if (isBalonesRecuperados) {
+        y = Math.min(1, p.coordinate3_y + yOffsetDown) // Aumentar Y para mover hacia abajo
+      } else if (isBalonesPerdidos) {
+        y = Math.max(0, p.coordinate3_y - yOffsetUpMore) // Reducir Y más para mover hacia arriba
+      } else if (isPasesAcertados) {
+        y = Math.max(0, p.coordinate3_y - yOffsetUpPasesAcertados) // Reducir Y más para Pases acertados
+      } else {
+        y = Math.max(0, p.coordinate3_y - yOffsetUp) // Reducir Y para mover hacia arriba
+      }
+    }
+    return [x, y] // Retornar como array [x, y] para compatibilidad
+  }).filter(c => c[0] != null && c[1] != null && !isNaN(c[0]) && !isNaN(c[1]))
+  
+  // Agregar puntos dummy cerca de los puntos reales para mejorar la visibilidad del heatmap
+  const coordinates = []
+  const radius = 0.000// Radio aumentado mucho más para sombra muy amplia
+  const dummyPointsPerRealPoint = 0 // Número de puntos dummy aumentado significativamente
+  
+  originalCoordinates.forEach(([x, y]) => {
+    // Agregar el punto real
+    coordinates.push([x, y])
+    
+    // Agregar puntos dummy alrededor del punto real en círculo (primer anillo)
+    for (let i = 0; i < dummyPointsPerRealPoint; i++) {
+      const angle = (Math.PI * 2 * i) / dummyPointsPerRealPoint
+      const offsetX = Math.cos(angle) * radius
+      const offsetY = Math.sin(angle) * radius
+      
+      // Asegurar que los puntos dummy estén dentro del rango [0, 1]
+      const dummyX = Math.max(0, Math.min(1, x + offsetX))
+      const dummyY = Math.max(0, Math.min(1, y + offsetY))
+      
+      coordinates.push([dummyX, dummyY])
+    }
+    
+  
+    
+
+  })
+  
+  // Convertir a formato {x, y} para coordinatesToHeatmapGrid
+  const coordinatesObj = coordinates.map(c => ({ x: c[0], y: c[1] }))
+  
+  // Convertir a grid
+  const grid = coordinatesToHeatmapGrid(coordinatesObj)
+  
+  // Normalizar valores para el heatmap (0-100)
+  const maxValue = Math.max(...grid.flat(), 1)
+  return grid.map(row => row.map(val => (val / maxValue) * 100))
+}
+
+function renderHeatmap(container, heatmapData) {
+  if (!container) return
+  
+  // Si es tipo 'team' o 'player', solo renderizar si hay datos reales
+  if (props.type === 'team' || props.type === 'player') {
+    if (!heatmapData) {
+      // Limpiar el heatmap si no hay datos
+      Plotly.purge(container)
+      return
+    }
+    // Verificar si todos los valores son 0 o muy pequeños (datos vacíos)
+    const allValues = heatmapData.flat()
+    const maxValue = Math.max(...allValues)
+    if (maxValue === 0 || maxValue < 0.01) {
+      // Limpiar el heatmap si no hay datos significativos
+      Plotly.purge(container)
+      return
+    }
+  }
+  
+  const z = heatmapData || generateHeatmapData()
+  const trace = {
+    z,
+    type: 'heatmap',
+    connectgaps: true,
+    opacity: 1,
+    colorscale: [
+    [0, 'rgba(20, 50, 30, 0.07)'], // Fondo transparente
+      [0.05, 'rgba(20, 50, 30, 0.10)'], // Verde muy oscuro
+      [0.10, 'rgba(30, 70, 40, 0.20)'], // Verde oscuro
+      [0.15, 'rgba(40, 90, 50, 0.30)'], // Verde medio-oscuro
+      [0.20, 'rgba(50, 110, 60, 0.31)'], // Verde medio-oscuro claro
+      [0.25, 'rgba(60, 130, 70, 0.35)'], // Verde medio
+      [0.30, 'rgba(70, 150, 80, 0.45)'], // Verde medio-claro
+      [0.35, 'rgba(80, 170, 90, 0.50)'], // Verde claro-oscuro
+      [0.40, 'rgba(90, 190, 100, 0.55)'], // Verde claro
+      [0.45, 'rgba(100, 210, 110, 0.60)'], // Verde claro brillante
+      [0.50, 'rgba(120, 220, 100, 0.65)'], // Verde-amarillo claro
+      [0.55, 'rgba(150, 230, 90, 0.67)'], // Verde-amarillo
+      [0.60, 'rgba(180, 225, 85, 0.70)'], // Amarillo-verde
+      [0.65, 'rgba(210, 220, 80, 0.73)'], // Amarillo claro
+      [0.70, 'rgba(240, 215, 75, 0.75)'], // Amarillo
+      [0.75, 'rgba(255, 200, 70, 0.77)'], // Amarillo-naranja muy claro
+      [0.80, 'rgba(255, 185, 65, 0.80)'], // Amarillo-naranja claro
+      [0.85, 'rgba(255, 170, 60, 0.83)'], // Amarillo-naranja
+      [0.88, 'rgba(255, 150, 55, 0.85)'], // Naranja claro
+      [0.90, 'rgba(255, 140, 50, 0.87)'], // Naranja medio-claro
+      [0.92, 'rgba(255, 130, 45, 0.89)'], // Naranja medio
+      [0.94, 'rgba(255, 120, 40, 0.91)'], // Naranja medio-intenso
+      [0.96, 'rgba(255, 110, 38, 0.91)'], // Naranja intenso
+      [0.98, 'rgba(255, 95, 35, 0.92)'], // Naranja muy intenso
+      [1, 'rgba(255, 80, 30, 0.97)'] // Naranja máxim
+    ],
+    showscale: false,
+    autoscale: false,
+    zsmooth: 'best',
+    showgrid: false,
+    showline: false
+  }
+  const layout = {
+    margin: { t: 0, r: 0, b: 0, l: 5 },
+    paper_bgcolor: 'rgba(0,0,0,0)',
+    plot_bgcolor: 'rgba(0,0,0,0)',
+    xaxis: { visible: false },
+    yaxis: { visible: false },
+    autosize: true
+  }
+  const config = { 
+    responsive: true, 
+    displayModeBar: false,
+    hovermode: false, // Desactivar hover
+    staticPlot: true // Desactivar interacciones incluyendo click
+  }
+  
+  // Si ya existe un plot, actualizarlo; si no, crear uno nuevo
+  if (container.data && container.data.length > 0) {
+    Plotly.update(container, { z: [z] }, layout, config)
+  } else {
+    Plotly.newPlot(container, [trace], layout, config)
+  }
+}
+
+onMounted(async () => {
+  // Esperar un momento para que el DOM se renderice completamente
+  await nextTick()
+  setTimeout(async () => {
+    await checkContainerSize()
+  }, 100)
+
+  // Renderizar heatmaps de Plotly en cada cancha solo si no es tipo 'team' o 'player'
+  // Si es tipo 'team' o 'player', los heatmaps se renderizarán cuando se carguen los datos reales
+  if (props.type !== 'team' && props.type !== 'player') {
+    await nextTick()
+    setTimeout(() => {
+      heatmapRefs.value.forEach((el) => renderHeatmap(el))
+    }, 150)
+  } else {
+    // Si es tipo 'team' o 'player', establecer loading desde el inicio
+    isLoading.value = true
+  }
+  
+  // Usar ResizeObserver para detectar cambios en el tamaño del contenedor padre
+  if (containerRef.value && window.ResizeObserver) {
+    resizeObserver = new ResizeObserver(() => {
+      checkContainerSize()
+    })
+    resizeObserver.observe(containerRef.value)
+    
+    // También observar el contenedor de campos para detectar cambios en su tamaño
+    await nextTick()
+    if (fieldsContainer.value) {
+      resizeObserver.observe(fieldsContainer.value)
+    }
+  } else {
+    // Fallback para navegadores que no soportan ResizeObserver
+    window.addEventListener('resize', checkContainerSize)
+  }
+})
+
+onUnmounted(() => {
+  heatmapRefs.value.forEach((el) => {
+    if (el && typeof Plotly.purge === 'function') {
+      Plotly.purge(el)
+    }
+  })
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+  } else {
+    window.removeEventListener('resize', checkContainerSize)
+  }
+})
+</script>
+
+<style>
+@import '/css/fonts.css';
+</style>
+
+<style scoped>
+.possession-heatmaps-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.heatmaps-box {
+  width: 100%;
+  height: 100%;
+ 
+  padding: 10px 40px 30px 30px;
+  
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  border-radius: 9px;
+  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.25);
+  background-color: rgba(38, 50, 60, 0.4);
+  
+}
+
+
+
+.heatmaps-title {
+  font-family: Poppins-Medium;
+  font-size: 16px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.25;
+  letter-spacing: normal;
+  text-align: center;
+  color: #fff;
+}
+
+.title-separator {
+  width: 100%;
+  height: 0;
+  border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
+}
+
+.heatmaps-wrapper {
+  position: relative;
+  width: 100%;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  min-height: 0;
+}
+
+.fields-container {
+  display: flex;
+  gap: 30px;
+  padding-left: 5px;
+  padding-right: 5px;
+  width: 100%;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scroll-snap-type: x mandatory;
+}
+
+.possession-heatmaps-container.size-tablet .fields-container,
+.possession-heatmaps-container.size-mobile .fields-container {
+  gap: 15px;
+}
+
+.fields-container::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+.field-item {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  scroll-snap-align: center;
+  min-width: 200px;
+}
+
+.field-title {
+  font-family: 'Poppins-Medium', sans-serif;
+  font-size: 14px !important;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  letter-spacing: 0.3px;
+  text-align: center;
+  margin-right: 26px;
+  color: rgba(255, 255, 255, 0.7);
+  text-align: center;
+  white-space: nowrap;
+}
+
+.field-with-arrow {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.field-wrapper {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+}
+
+.field-direction-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: white;
+}
+
+.field-svg {
+  display: block;
+  width: 222px;
+  height: 291px;
+  max-width: 222px;
+}
+
+.heatmaps-overlay {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  right: 2px;
+  bottom: 2px;
+  width: calc(100% - 4px);
+  height: calc(100% - 4px);
+  pointer-events: none;
+}
+
+.heatmap-plot {
+  width: 95%;
+  height: 100%;
+  min-height: 1px;
+  margin-left: 3px;
+  box-sizing: border-box;
+  margin-top: -1px;
+}
+
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(29, 42, 53, 0.95);
+  z-index: 100;
+  pointer-events: none;
+}
+
+.loading-spinner {
+  width: 50px;
+  height: 50px;
+  border: 5px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.carousel-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 10;
+  transition: all 0.3s ease;
+}
+
+
+.carousel-arrow:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.carousel-arrow-left {
+  left: 0px;
+}
+
+.carousel-arrow-right {
+  right: 0px;
+}
+
+/* Desktop (≥768px): mostrar todas las canchas horizontalmente solo cuando caben */
+.possession-heatmaps-container.size-desktop.content-fits .fields-container {
+  overflow-x: visible;
+  scroll-snap-type: none;
+  justify-content: center;
+}
+
+.possession-heatmaps-container.size-desktop .field-item {
+  min-width: auto;
+  flex: 1;
+  max-width: 222px;
+}
+
+/* Cuando no caben en desktop, permitir scroll (no aplicar content-fits) */
+.possession-heatmaps-container.size-desktop:not(.content-fits) .fields-container {
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+}
+
+.possession-heatmaps-container.size-desktop .field-svg {
+  width: 222px;
+  height: 291px;
+  max-width: 222px;
+}
+
+.possession-heatmaps-container.size-desktop .field-title {
+  font-size: 18px;
+}
+
+/* Tablet (600px - 767px): 2 canchas visibles */
+.possession-heatmaps-container.size-tablet .heatmaps-box {
+  padding: 20px 15px;
+}
+
+.possession-heatmaps-container.size-tablet .heatmaps-title {
+  font-size: 20px;
+}
+
+.possession-heatmaps-container.size-tablet .fields-container {
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  scroll-padding: 0 50%;
+}
+
+.possession-heatmaps-container.size-tablet .field-item {
+  min-width: calc(50% - 7.5px);
+  width: calc(50% - 7.5px);
+  flex: 0 0 calc(50% - 7.5px);
+  scroll-snap-align: start;
+}
+
+.possession-heatmaps-container.size-tablet .field-svg {
+  width: 222px;
+  height: 291px;
+  max-width: 100%;
+  height: auto;
+}
+
+.possession-heatmaps-container.size-tablet .carousel-arrow {
+  display: flex;
+}
+
+/* Móvil (<600px): 1 cancha visible */
+.possession-heatmaps-container.size-mobile .heatmaps-box {
+  padding: 20px 15px;
+}
+
+.possession-heatmaps-container.size-mobile .heatmaps-title {
+  font-size: 18px;
+}
+
+.possession-heatmaps-container.size-mobile .fields-container {
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+}
+
+.possession-heatmaps-container.size-mobile .field-item {
+  min-width: 100%;
+  width: 100%;
+  flex: 0 0 100%;
+  scroll-snap-align: center;
+}
+
+.possession-heatmaps-container.size-mobile .field-svg {
+  width: 222px;
+  height: 291px;
+  max-width: 100%;
+  height: auto;
+}
+
+.possession-heatmaps-container.size-mobile .carousel-arrow {
+  display: flex;
+}
+</style>