Spaces:

RRC-ARG
/

scouting

Sleeping

App Files Files Community

matias-cataife commited on May 28

Commit

05f1fb3

verified ·

1 Parent(s): 00dbec9

browse MV db: static/index.html

Browse files

Files changed (1) hide show

static/index.html +38 -285

static/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Scouting · Racing Santander</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/static/styles.css">
@@ -11,8 +11,8 @@
 <body>
 <header class="header">
-  <h1>Scouting <em>Racing Santander</em></h1>
-  <span class="subtitle">Cargando&hellip;</span>
   <span class="api-meta" id="apiMeta"></span>
 </header>
@@ -25,9 +25,7 @@
     <div class="filter-label">Liga</div>
     <div class="ms" id="leagueMs">
       <button type="button" class="ms-button" id="leagueMsBtn" aria-haspopup="listbox" aria-expanded="false">
-        <span class="ms-label" id="leagueMsLabel">Todas las ligas</span>
-        <span class="ms-count" id="leagueMsCount">0</span>
-        <span class="ms-caret">&#9662;</span>
       </button>
       <div class="ms-panel" role="listbox" aria-multiselectable="true">
         <div class="ms-panel-search">
@@ -49,57 +47,46 @@
     <div class="filter-label">Edad</div>
     <div class="filter-range">
       <input type="number" class="filter-input" id="ageMin" placeholder="Min" min="14" max="45">
-      <span class="filter-separator">&mdash;</span>
-      <input type="number" class="filter-input" id="ageMax" placeholder="Max" min="14" max="45" value="25">
     </div>
   </div>
   <div class="filter-group">
-    <div class="filter-label">Pasaporte UE</div>
-    <select class="filter-select" id="euFilter">
-      <option value="all">Todos</option>
-      <option value="eu">Solo UE</option>
-      <option value="non-eu">Solo no UE</option>
-    </select>
   </div>
   <div class="filter-group">
-    <div class="filter-label">Contrato</div>
-    <select class="filter-select" id="contractFilter">
-      <option value="all">Todos</option>
-      <option value="libre">Libre (&le;6m)</option>
-      <option value="urgente">Urgente (&le;12m)</option>
     </select>
   </div>
   <div class="filter-group">
-    <div class="filter-label">Valor de mercado (€M)</div>
     <div class="filter-range">
-      <input type="number" class="filter-input" id="mvMin" placeholder="Min" min="0" max="500" step="0.5" value="0">
-      <span class="filter-separator">&mdash;</span>
-      <input type="number" class="filter-input" id="mvMax" placeholder="Max" min="0" max="500" step="0.5" value="15">
     </div>
   </div>
   <div class="filter-group">
-    <div class="filter-label">Pie</div>
-    <select class="filter-select" id="footFilter">
-      <option value="all">Todos</option>
-      <option value="right">Derecho</option>
-      <option value="left">Zurdo</option>
-      <option value="both">Ambidiestro</option>
-    </select>
   </div>
   <div class="filter-group">
-    <label class="filter-checkbox">
-      <input type="checkbox" id="tmDataFilter">
-      <span>Solo con datos TM</span>
-    </label>
   </div>
   <div class="filter-count" id="filterCount"></div>
 </div>
-<nav class="tab-nav">
-  <button class="tab-btn active" data-tab="table" id="tabBtnTable">Tabla <span class="tab-badge" id="tabBadgeTable">0</span></button>
-  <button class="tab-btn" data-tab="pitch" id="tabBtnPitch">Mejor 11</button>
-</nav>
 <section class="view active" id="view-table">
   <div class="table-view">
     <div class="table-toolbar">
@@ -107,85 +94,7 @@
         <input type="text" id="tableSearch" placeholder="Buscar jugador, equipo o liga&hellip;" autocomplete="off">
       </div>
       <div class="table-meta">
-        <strong id="tableShownCount">0</strong> de <strong id="tableTotalCount">0</strong> jugadores
-      </div>
-      <button type="button" id="openPondModalBtn" class="pond-open-btn" title="Ajustar ponderaciones">Ponderaciones</button>
-      <button type="button" id="openScoreDocsBtn" class="pond-open-btn" title="Cómo se calcula el Score">¿Cómo se calcula?</button>
-    </div>
-    <div class="pond-modal" id="scoreDocsModal" aria-hidden="true">
-      <div class="pond-modal-backdrop" id="scoreDocsBackdrop"></div>
-      <div class="pond-modal-card" role="dialog" aria-labelledby="scoreDocsTitle" style="width:min(720px,94vw);">
-        <div class="pond-modal-header">
-          <h3 id="scoreDocsTitle">📖 Cómo se calcula el Score</h3>
-          <button type="button" class="pond-modal-close" id="scoreDocsClose" aria-label="Cerrar">&times;</button>
-        </div>
-        <div class="pond-modal-body score-docs-body">
-<h3>Score final (Scouting Score)</h3>
-<p>El <strong>Scouting Score</strong> es una combinación lineal de dos componentes:</p>
-<pre><code>scouting_score = w_perf · performance_score + w_perfil · profile_score</code></pre>
-<p>Por defecto <code>w_perf = 0.6</code> y <code>w_perfil = 0.4</code>. Ambos pesos se ajustan desde el modal <em>Ponderaciones</em>.</p>
-<h3>1. Performance Score (rendimiento)</h3>
-<p>Mide qué tan bien rinde el jugador en métricas <strong>respecto de su posición y temporada</strong>. Se calcula en tres pasos:</p>
-<ol>
-  <li><strong>Percentiles por (posición, temporada):</strong> cada métrica se transforma en un percentil [0,1] dentro del grupo de jugadores de la misma <code>mapped_position</code> y la misma <code>Temporada</code>. Las métricas marcadas como <em>invertidas</em> (donde menos es mejor) se calculan como <code>1 − percentil</code>.</li>
-  <li><strong>Score por bloque:</strong> cada bloque (p. ej. <em>Pase</em>, <em>Defensa</em>, <em>Finalización</em>) es un promedio ponderado de los percentiles de sus métricas, usando los pesos definidos en <code>PESOS_POR_VARIABLE.xlsx</code>:
-    <pre><code>block_score = Σ(percentil_metric · weight) / Σ(weight)</code></pre>
-  </li>
-  <li><strong>Performance Score:</strong> promedio simple de los <em>block_scores</em> del jugador, escalado por los pesos del modal <em>Ponderaciones → Bloques</em>.</li>
-</ol>
-<p>Resultado: un valor en [0,1] donde 1 = top de la posición.</p>
-<h3>2. Profile Score (perfil)</h3>
-<p>Mide qué tan atractivo es el <strong>perfil contextual</strong> del jugador (edad, ficha, liga, valor de mercado). Se calcula como promedio ponderado de hasta 4 factores:</p>
-<table>
-  <thead><tr><th>Factor</th><th>Cómo se calcula</th><th>Peso default</th></tr></thead>
-  <tbody>
-    <tr>
-      <td><strong>Edad</strong></td>
-      <td><code>&lt; 23 → 1.0</code> · <code>23–25 → 0.5</code> · <code>&gt; 25 → 0.0</code></td>
-      <td>0.35</td>
-    </tr>
-    <tr>
-      <td><strong>Pasaporte UE</strong></td>
-      <td><code>UE → 1.0</code> · <code>no UE → 0.0</code></td>
-      <td>0.25</td>
-    </tr>
-    <tr>
-      <td><strong>Liga (tier)</strong></td>
-      <td>Tabla fija <code>LEAGUE_TIERS</code> en <code>scouting_score.py</code> (top-5 europeas y Argentina/Brasil = 1.0; tiers más bajos hasta 0.3).</td>
-      <td>0.20</td>
-    </tr>
-    <tr>
-      <td><strong>Valor de mercado</strong></td>
-      <td><code>&lt; €3M → 1.0</code> · <code>€3–5M → 0.5</code> · <code>&gt; €5M → excluido</code> del promedio</td>
-      <td>0.20</td>
-    </tr>
-  </tbody>
-</table>
-<pre><code>profile_score = Σ(factor_i · w_i) / Σ(w_i)</code></pre>
-<p>Si la edad o el valor de mercado faltan (sin datos TM), ese factor no entra en el promedio y los pesos se renormalizan automáticamente.</p>
-<h3>3. Filtros previos al cálculo</h3>
-<p>Antes de calcular percentiles, el dataset se filtra por: <em>temporadas activas, ligas seleccionadas, edad mínima/máxima, mínimo de minutos (450 por defecto), pie, valor de mercado tope, contrato</em>. Cambios en estos filtros disparan un recálculo del lado del servidor.</p>
-<h3>4. Ponderaciones personalizadas</h3>
-<p>El modal <em>Ponderaciones</em> permite modificar:</p>
-<ul>
-  <li><strong>Rendimiento ↔ Perfil</strong>: el reparto entre los dos componentes principales.</li>
-  <li><strong>Factores de perfil</strong>: cuánto pesa cada uno de Edad, UE, Liga, Valor.</li>
-  <li><strong>Bloques de rendimiento</strong>: cuánto pesa cada bloque dentro del Performance Score (recalculado en cliente sin volver a pedir al server).</li>
-</ul>
-<p>Los cambios sólo se aplican al apretar <strong>Calcular</strong>.</p>
-<h3>Resumen visual</h3>
-<pre><code>scouting_score
- ├── performance_score  (60% default)
- │     └── promedio de block_scores (con pesos del modal)
- │            └── promedio ponderado de percentiles por (posición, temporada)
- └── profile_score      (40% default)
-       └── Σ(factor · peso) / Σ(peso) sobre {edad, UE, liga, valor}</code></pre>
-        </div>
       </div>
     </div>
     <div class="data-table-wrap">
@@ -193,18 +102,16 @@
         <table class="data-table" id="dataTable">
           <thead>
             <tr>
-              <th data-key="j" class="sortable">Jugador <span class="sort-arrow"></span></th>
-              <th data-key="p" class="sortable">Pos <span class="sort-arrow"></span></th>
-              <th data-key="t" class="sortable">Temp. <span class="sort-arrow"></span></th>
               <th data-key="age" class="sortable num">Edad <span class="sort-arrow"></span></th>
-              <th data-key="nat" class="sortable">Nacionalidad <span class="sort-arrow"></span></th>
-              <th data-key="foot" class="sortable">Pie <span class="sort-arrow"></span></th>
-              <th data-key="mv_n" class="sortable num">Valor <span class="sort-arrow"></span></th>
-              <th data-key="ct" class="sortable">Contrato <span class="sort-arrow"></span></th>
-              <th data-key="min" class="sortable num">Min <span class="sort-arrow"></span></th>
-              <th data-key="ps" class="sortable num">Rendimiento <span class="sort-arrow"></span></th>
-              <th data-key="pf" class="sortable num">Perfil <span class="sort-arrow"></span></th>
-              <th data-key="ss" class="sorted desc num">Score <span class="sort-arrow">&darr;</span></th>
             </tr>
           </thead>
           <tbody id="dataTableBody"></tbody>
@@ -223,160 +130,6 @@
   <div class="table-drawer-body" id="tableDrawerBody"></div>
 </aside>
-<section class="view" id="view-pitch">
-<div class="main">
-  <div class="pond-sidebar" id="pondSidebar">
-    <div class="pond-sidebar-title">Ponderaciones</div>
-    <div class="pond-section">
-      <div class="pond-section-title">Pesos generales</div>
-      <div class="pond-rows">
-        <div class="pond-row">
-          <span class="pond-row-label">Rendimiento</span>
-          <input type="range" class="pond-slider" id="pondPerf" min="0" max="100" value="70">
-          <span class="pond-val" id="pondPerfVal">70</span>
-        </div>
-        <div class="pond-row">
-          <span class="pond-row-label">Perfil</span>
-          <input type="range" class="pond-slider" id="pondProf" min="0" max="100" value="30">
-          <span class="pond-val" id="pondProfVal">30</span>
-        </div>
-      </div>
-    </div>
-    <div class="pond-section">
-      <div class="pond-section-title">Perfil &mdash; Factores</div>
-      <div class="pond-rows">
-        <div class="pond-row">
-          <span class="pond-row-label">Edad</span>
-          <input type="range" class="pond-slider pond-profile" data-key="age" min="0" max="100" value="35">
-          <span class="pond-val">35</span>
-        </div>
-        <div class="pond-row">
-          <span class="pond-row-label">Pasaporte UE</span>
-          <input type="range" class="pond-slider pond-profile" data-key="eu" min="0" max="100" value="0">
-          <span class="pond-val">0</span>
-        </div>
-        <div class="pond-row">
-          <span class="pond-row-label">Liga</span>
-          <input type="range" class="pond-slider pond-profile" data-key="league" min="0" max="100" value="0">
-          <span class="pond-val">0</span>
-        </div>
-        <div class="pond-row">
-          <span class="pond-row-label">Valor</span>
-          <input type="range" class="pond-slider pond-profile" data-key="market" min="0" max="100" value="20">
-          <span class="pond-val">20</span>
-        </div>
-      </div>
-    </div>
-    <div class="pond-section">
-      <div class="pond-section-title">Rendimiento &mdash; Bloques</div>
-      <div class="pond-blocks-wrap">
-        <div class="pond-blocks-grid" id="pondBlocksGrid">
-          <!-- Block sliders injected by JS -->
-        </div>
-      </div>
-    </div>
-    <button class="pond-reset" id="pondReset">Restaurar valores</button>
-  </div>
-  <div class="pitch-container" id="pitchContainer">
-    <div class="pitch" id="pitch">
-      <div class="pitch-lines">
-        <div class="outline"></div>
-        <div class="halfway"></div>
-        <div class="center-circle"></div>
-        <div class="center-dot"></div>
-        <div class="pen-area-top"></div>
-        <div class="pen-area-bottom"></div>
-        <div class="goal-area-top"></div>
-        <div class="goal-area-bottom"></div>
-        <div class="arc-top"></div>
-        <div class="arc-bottom"></div>
-        <div class="corner-tl"></div>
-        <div class="corner-tr"></div>
-        <div class="corner-bl"></div>
-        <div class="corner-br"></div>
-      </div>
-      <!-- Markers injected by JS -->
-    </div>
-  </div>
-  <div class="panel" id="panel">
-    <div class="panel-inner">
-      <div class="panel-header">
-        <h2 id="panelTitle"></h2>
-        <button class="panel-close" id="panelClose">&times;</button>
-      </div>
-      <div class="panel-body">
-        <div class="panel-list" id="panelList"></div>
-        <div class="panel-detail" id="panelDetail">
-          <div class="panel-detail-empty">Seleccionar un jugador de la lista</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-</section>
-<div class="pond-modal" id="pondModal" aria-hidden="true">
-  <div class="pond-modal-backdrop" id="pondModalBackdrop"></div>
-  <div class="pond-modal-card" role="dialog" aria-labelledby="pondModalTitle">
-    <div class="pond-modal-header">
-      <h3 id="pondModalTitle">Ponderaciones</h3>
-      <button type="button" class="pond-modal-close" id="pondModalClose" aria-label="Cerrar">&times;</button>
-    </div>
-    <div class="pond-modal-body">
-      <div class="pond-section">
-        <div class="pond-section-title">Pesos generales</div>
-        <div class="pond-rows">
-          <div class="pond-row">
-            <span class="pond-row-label">Rendimiento</span>
-            <input type="range" class="pond-slider" id="modalPondPerf" min="0" max="100" value="70">
-            <span class="pond-val" id="modalPondPerfVal">70</span>
-          </div>
-          <div class="pond-row">
-            <span class="pond-row-label">Perfil</span>
-            <input type="range" class="pond-slider" id="modalPondProf" min="0" max="100" value="30">
-            <span class="pond-val" id="modalPondProfVal">30</span>
-          </div>
-        </div>
-      </div>
-      <div class="pond-section">
-        <div class="pond-section-title">Perfil &mdash; Factores</div>
-        <div class="pond-rows">
-          <div class="pond-row">
-            <span class="pond-row-label">Edad</span>
-            <input type="range" class="pond-slider modal-pond-profile" data-key="age" min="0" max="100" value="35">
-            <span class="pond-val">35</span>
-          </div>
-          <div class="pond-row">
-            <span class="pond-row-label">Pasaporte UE</span>
-            <input type="range" class="pond-slider modal-pond-profile" data-key="eu" min="0" max="100" value="0">
-            <span class="pond-val">0</span>
-          </div>
-          <div class="pond-row">
-            <span class="pond-row-label">Liga</span>
-            <input type="range" class="pond-slider modal-pond-profile" data-key="league" min="0" max="100" value="0">
-            <span class="pond-val">0</span>
-          </div>
-          <div class="pond-row">
-            <span class="pond-row-label">Valor</span>
-            <input type="range" class="pond-slider modal-pond-profile" data-key="market" min="0" max="100" value="20">
-            <span class="pond-val">20</span>
-          </div>
-        </div>
-      </div>
-      <div class="pond-section">
-        <div class="pond-section-title">Rendimiento &mdash; Bloques</div>
-        <div class="pond-blocks-wrap">
-          <div class="pond-blocks-grid" id="modalPondBlocksGrid"></div>
-        </div>
-      </div>
-    </div>
-    <div class="pond-modal-footer">
-      <button type="button" class="pond-reset" id="modalPondReset">Restaurar</button>
-      <button type="button" class="pond-apply" id="modalPondApply">Calcular</button>
-    </div>
-  </div>
-</div>
-<script src="/static/app.js" defer></script>
 </body>
-</html>

 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Base de datos · Racing Santander</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/static/styles.css">
 <body>
 <header class="header">
+  <h1>Base de datos <em>Racing Santander</em></h1>
+  <span class="subtitle">Stats Opta · valores Transfermarkt por temporada</span>
   <span class="api-meta" id="apiMeta"></span>
 </header>
     <div class="filter-label">Liga</div>
     <div class="ms" id="leagueMs">
       <button type="button" class="ms-button" id="leagueMsBtn" aria-haspopup="listbox" aria-expanded="false">
+        <span id="leagueMsLabel">Todas</span><span class="ms-count" id="leagueMsCount"></span>
       </button>
       <div class="ms-panel" role="listbox" aria-multiselectable="true">
         <div class="ms-panel-search">
     <div class="filter-label">Edad</div>
     <div class="filter-range">
       <input type="number" class="filter-input" id="ageMin" placeholder="Min" min="14" max="45">
+      <span>–</span>
+      <input type="number" class="filter-input" id="ageMax" placeholder="Max" min="14" max="45">
     </div>
   </div>
   <div class="filter-group">
+    <div class="filter-label">Nacionalidad</div>
+    <input type="text" class="filter-input" id="natFilter" placeholder="ej. Argentina" autocomplete="off" style="width:120px;">
   </div>
   <div class="filter-group">
+    <div class="filter-label">Pie</div>
+    <select class="filter-select" id="footFilter">
+      <option value="">Cualquiera</option>
+      <option value="right">Derecho</option>
+      <option value="left">Izquierdo</option>
+      <option value="both">Ambos</option>
     </select>
   </div>
   <div class="filter-group">
+    <div class="filter-label">Valor fin temp. (€M)</div>
     <div class="filter-range">
+      <input type="number" class="filter-input" id="mvMin" placeholder="Min" min="0" max="500" step="0.5">
+      <span>–</span>
+      <input type="number" class="filter-input" id="mvMax" placeholder="Max" min="0" max="500" step="0.5">
     </div>
   </div>
   <div class="filter-group">
+    <div class="filter-label">Min. minutos</div>
+    <input type="number" class="filter-input" id="minMinutes" placeholder="0" min="0" step="90" style="width:80px;">
   </div>
   <div class="filter-group">
+    <div class="filter-label">Fiabilidad match</div>
+    <select class="filter-select" id="confFilter">
+      <option value="">Todas</option>
+      <option value="high">Alta (verificada)</option>
+      <option value="low">Baja (sin verificar)</option>
+    </select>
   </div>
   <div class="filter-count" id="filterCount"></div>
 </div>
 <section class="view active" id="view-table">
   <div class="table-view">
     <div class="table-toolbar">
         <input type="text" id="tableSearch" placeholder="Buscar jugador, equipo o liga&hellip;" autocomplete="off">
       </div>
       <div class="table-meta">
+        <span id="tableShownCount">0</span> / <span id="tableTotalCount">0</span> filas
       </div>
     </div>
     <div class="data-table-wrap">
         <table class="data-table" id="dataTable">
           <thead>
             <tr>
+              <th data-key="Jugador" class="sortable">Jugador <span class="sort-arrow"></span></th>
+              <th data-key="Posicion" class="sortable">Pos <span class="sort-arrow"></span></th>
+              <th data-key="Temporada" class="sortable">Temp. <span class="sort-arrow"></span></th>
               <th data-key="age" class="sortable num">Edad <span class="sort-arrow"></span></th>
+              <th data-key="nationality" class="sortable">Nacionalidad <span class="sort-arrow"></span></th>
+              <th data-key="Competencia" class="sortable">Liga <span class="sort-arrow"></span></th>
+              <th data-key="Minutos totales" class="sortable num">Min <span class="sort-arrow"></span></th>
+              <th data-key="mv_eos" class="sorted desc num">Valor fin temp. <span class="sort-arrow">&darr;</span></th>
+              <th data-key="mv_eos_prev" class="sortable num">Valor temp-1 <span class="sort-arrow"></span></th>
+              <th>Fuente</th>
             </tr>
           </thead>
           <tbody id="dataTableBody"></tbody>
   <div class="table-drawer-body" id="tableDrawerBody"></div>
 </aside>
+<script src="/static/app.js"></script>
 </body>
+</html>