1<!DOCTYPE html> 2<html lang="en_US"> 3 4<head> 5 <title>FPL Optimized - Season Highlights</title> 6 <meta charset="UTF-8" /> 7 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> 8 <meta http-equiv="Pragma" content="no-cache"> 9 <meta http-equiv="Expires" content="0"> 10 <meta name="description" content="Optimized squads for Fantasy Premier League -- everyday!" /> 11 <meta name="keywords" 12 content="fantasy, football, soccer, premier league, mathematics, optimization, analytics, sports" /> 13 <meta name="author" content="Sertalp B. Cay ([email protected])" /> 14 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 15 <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 16 integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> 17
17<script src="https://fastly.jsdelivr.net/npm/@fortawesome/[email protected]/js/fontawesome.min.js" 18 integrity="sha256-TMRxGf3NaZhrxTfD8y/NGiyE4UXBA3udH1l+Co8JDVU=" crossorigin="anonymous"></script>
18 19
19<script src="https://d3js.org/d3.v6.js"></script>
19 20
20<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-interpolate/1.3.0/d3-interpolate.js" 21 integrity="sha512-KcUKnCgVgjA6pyyyN33d5S1IHk9hFUaldkL8BmKvqR+7q9HyZj3jmWJemF6IJuLkcj3biCNzdGgXNPJCjurXnQ==" 22 crossorigin="anonymous"></script>
22 23 <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" 24 integrity="sha256-rx5u3IdaOCszi7Jb18XD9HSn8bNiEgAqWJbdBvIYYyU=" crossorigin="anonymous"> 25 <!-- <link href="url_for('static', filename='3rdparty/vis-timeline-graph2d.min.css')" rel="stylesheet" type="text/css" /> --> 26 27 <!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"> --> 28 <!-- <link rel="stylesheet" href="https://cdn.datatables.net/searchbuilder/1.0.1/css/searchBuilder.dataTables.min.css"> --> 29 <!-- <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.3.2/css/fixedColumns.dataTables.min.css"> --> 30 <!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css"> --> 31 <!-- <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.3.2/css/fixedColumns.bootstrap4.min.css"> --> 32 <!-- <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.bootstrap4.min.css"> --> 33 34 <link rel="stylesheet" type="text/css" 35 href="https://cdn.datatables.net/v/bs4/dt-1.10.23/b-1.6.5/b-colvis-1.6.5/b-html5-1.6.5/fc-3.3.2/fh-3.1.7/r-2.2.6/sp-1.2.2/datatables.min.css" /> 36 37 <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 68 bytes, lines 37-38
37 38 <script async src="https://www.googletagmanager.com/gtag/js?id=
38G-L07T8LS957
vendor: 16 bytes, lines 38-39
38"></script> 39
39<script> 40
vendor: 175 bytes, lines 40-46
40window.dataLayer = window.dataLayer || []; 41 42 function gtag() { 43 dataLayer.push(arguments); 44 } 45 gtag('js', new Date()); 46 gtag('config', '
46G-L07T8LS957
vendor: 8 bytes, lines 46-47
46'); 47
47</script>
47 48 49 <link rel="stylesheet" href="/static/css/styles.css?ts=20260920183004"> 50 <link rel="stylesheet" href="/static/css/svg.css?ts=20260920183004"> 51 52 <style> 53 :root { 54 --bg-primary: #1a1a1c; 55 --bg-secondary: #2d2d30; 56 --bg-card: #3a3a3d; 57 --bg-squad-card: #474747; 58 --text-primary: #e0e0e0; 59 --text-secondary: #b0b0b0; 60 --accent: #B81636; 61 --accent-hover: #5bbbb6; 62 --border-color: #4a4a4d; 63 --border-complement: #B81636; 64 --svg-bg: #5a5d5c; 65 --svg-text: #ffffff; 66 --svg-stroke: #ffffff; 67 --chart-goal: #40c8de; 68 --chart-assist: #ff9650; 69 --chart-cs: #97b070; 70 } 71 72 [data-theme="light"] { 73 --bg-primary: #f5f5f5; 74 --bg-secondary: #ffffff; 75 --bg-card: #ffffff; 76 --bg-squad-card: #fafafa; 77 --text-primary: #2d2d30; 78 --text-secondary: #6b6b6b; 79 --accent: #B81636; 80 --accent-hover: #5bbbb6; 81 --border-color: #e0e0e0; 82 --border-complement: #B81636; 83 --svg-bg: #e8e8e8; 84 --svg-text: #2d2d30; 85 --svg-stroke: #2d2d30; 86 --chart-goal: #2196F3; 87 --chart-assist: #FF6B35; 88 --chart-cs: #4CAF50; 89 } 90 91 body { 92 background: var(--bg-primary) !important; 93 color: var(--text-primary) !important; 94 transition: background-color 0.3s ease, color 0.3s ease; 95 } 96 97 .bg-squad-card { 98 background-color: var(--bg-squad-card) !important; 99 color: var(--text-primary) !important; 100 } 101 102 .border-complement { 103 border-color: var(--border-complement) !important; 104 } 105 106 .card { 107 background-color: var(--bg-card) !important; 108 color: var(--text-primary) !important; 109 } 110 111 .card-header { 112 background-color: var(--bg-squad-card) !important; 113 color: var(--text-primary) !important; 114 } 115 116 .table { 117 color: var(--text-primary) !important; 118 background-color: var(--bg-card) !important; 119 } 120 121 .table-striped tbody tr:nth-of-type(odd) { 122 background-color: var(--bg-secondary) !important; 123 } 124 125 .table-dark { 126 background-color: var(--bg-secondary) !important; 127 color: var(--text-primary) !important; 128 } 129
130 .modal-content { 131 background-color: var(--bg-card) !important; 132 color: var(--text-primary) !important; 133 } 134 135 .form-control { 136 background-color: var(--bg-secondary) !important; 137 border-color: var(--border-color) !important; 138 color: var(--text-primary) !important; 139 } 140 141 .form-control:focus { 142 background-color: var(--bg-secondary) !important; 143 border-color: var(--accent) !important; 144 color: var(--text-primary) !important; 145 box-shadow: 0 0 0 0.2rem rgba(184, 22, 54, 0.25) !important; 146 } 147 148 .input-group-text { 149 background-color: var(--bg-secondary) !important; 150 border-color: var(--border-color) !important; 151 color: var(--text-primary) !important; 152 } 153 154 .btn-primary { 155 background-color: var(--accent); 156 border-color: var(--accent); 157 } 158 159 .btn-primary:hover { 160 background-color: var(--accent-hover); 161 border-color: var(--accent-hover); 162 } 163 164 .btn-secondary { 165 background-color: var(--bg-secondary); 166 border-color: var(--border-color); 167 color: var(--text-primary); 168 } 169 170 .btn-secondary:hover { 171 background-color: var(--border-color); 172 border-color: var(--border-color); 173 color: var(--text-primary); 174 } 175 176 .theme-toggle-btn { 177 background: transparent; 178 border: 1px solid rgba(255, 255, 255, 0.3); 179 color: #e0e0e0; 180 border-radius: 20px; 181 padding: 5px 12px; 182 font-size: 13px; 183 cursor: pointer; 184 transition: all 0.3s ease; 185 display: inline-flex; 186 align-items: center; 187 gap: 6px; 188 margin-left: auto; 189 margin-right: 10px; 190 } 191 192 [data-theme="light"] .theme-toggle-btn { 193 border: 1px solid rgba(0, 0, 0, 0.2); 194 /*color: #2d2d30; 195 background: white;*/ 196 } 197 198 .theme-toggle-btn:hover { 199 background: rgba(255, 255, 255, 0.1); 200 border-color: var(--accent-hover); 201 } 202 203 [data-theme="light"] .theme-toggle-btn:hover { 204 background: rgba(0, 0, 0, 0.05); 205 } 206 207 .major-display-box { 208 background-color: var(--bg-secondary) !important; 209 color: var(--text-primary) !important; 210 border: var(--border-color) 1px solid !important; 211 } 212 213 .minor-display-box { 214 background-color: var(--bg-secondary) !important; 215 color: var(--text-primary) !important; 216 border: var(--border-color) 1px solid !important; 217 } 218 </style> 219 220
220<script> 221 // Apply theme immediately to prevent flash 222 (function () { 223 const savedTheme = localStorage.getItem('theme') || 'dark'; 224 document.documentElement.setAttribute('data-theme', savedTheme); 225 })(); 226 </script>
226 227 228 <link rel="manifest" href="/static/asset/manifest.json"> 229 <link rel="apple-touch-icon" href="/static/asset/apple_logo_114.png"> 230 <link rel="apple-touch-startup-image" href="/static/asset/apple_splash_320.png"> 231 <meta name="apple-mobile-web-app-capable" content="yes"> 232 <meta name="mobile-web-app-capable" content="yes"> 233 <meta name="apple-touch-fullscreen" content="yes" /> 234 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 235 <meta name="apple-mobile-web-app-title" content="FPLOptimized"> 236 237</head> 238 239<body> 240 241 <div id="app"> 242 243 <header class="bg-dark-gray mb-1"> 244 <div class="container"> 245 <nav class="navbar navbar-collapse navbar-dark container-fluid pl-0 pr-0"> 246 <a class="navbar-brand ml-0 ml-md-3 mr-0 mr-md-3 mr-auto" href="/" aria-label="Bootstrap"><img 247 src="/static/images/logo_128.png" height="33" /> FPL Optimized</a> 248 <span class="text-muted">by <a href="https://solioanalytics.com" target="_blank" 249 class="text-muted">Solio 250 Analytics</a></span> 251 <button class="theme-toggle-btn" onclick="toggleTheme()"> 252 <i class="fas fa-moon" id="theme-icon"></i> 253 <span id="theme-text">Dark</span> 254 </button> 255 <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menuToggler" aria-controls="menuToggler" aria-expanded="false" aria-label="Toggle navigation"> 256 <span class="navbar-toggler-icon"></span> 257 </button> 258 <div class="collapse navbar-collapse text-secondary flex-row-reverse" id="menuToggler"> 259 <span class="twitter-link ml-2 float-right"><a href="https://twitter.com/sertalpbilal"></a></span> 260 <ul class="navbar-nav"> 261 <li class="nav-item"> 262 <a class="nav-link" href="week.html">Optimal Squads</a> 263 </li> 264 <li class="nav-item"> 265 <a class="nav-link" href="live_gw.html">Live GW</a> 266 </li> 267 <li class="nav-item"> 268 <a class="nav-link" href="team_summary.html">GW Summary</a> 269 </li> 270 <li class="nav-item"> 271 <a class="nav-link" href="fpl_analytics_league.html">FPL Analytics xP League</a> 272 </li> 273 <li class="nav-item no-sep"> 274 <a class="nav-link" href="https://twitter.com/sertalpbilal" target=_blank><i class="fab fa-twitter-square"></i></a> 275 </li> 276 </ul> 277 </div> --> 278 </nav> 279 </div> 280 </header> 281 282 283 <!-- <div class="mt-1 container"> 284 <div class="row pl-3 pr-3"> 285 <div class="col-12 alert alert-info alert-dismissible text-small fade show" role="alert"> 286 <i class="fas fa-info-circle"></i> First time on FPL Optimized? Read a summary of tools <a target="_blank" href="https://threadreaderapp.com/thread/1391100607205941253.html">here.</a> 287 <button type="button" class="close top-close" data-dismiss="alert" aria-label="Close"> 288 <span aria-hidden="true">×</span> 289 </button> 290 </div> 291 </div> 292 </div> --> 293 294 <!-- <div class="mt-2 container"> 295 <div class="row pl-3 pr-3"> 296 <div class="col-12 alert alert-warning alert-dismissible text-small fade show" role="alert"> 297 <i class="fas fa-info-circle"></i> FPLOptimized is getting ready for the new season! Some functonalities may not work properly.</a> 298 <button type="button" class="close top-close" data-dismiss="alert" aria-label="Close">
299 <span aria-hidden="true">×</span> 300 </button> 301 </div> 302 </div> 303 </div> --> 304 <!-- 305 <div class="mt-2 container"> 306 <div class="row pl-3 pr-3"> 307 <div class="col-12 alert alert-success alert-dismissible text-small fade show" role="alert"> 308 <i class="fas fa-info-circle"></i> FPLOptimized is ready for new season! Welcome back :)</a> 309 <button type="button" class="close top-close" data-dismiss="alert" aria-label="Close"> 310 <span aria-hidden="true">×</span> 311 </button> 312 </div> 313 </div> 314 </div> --> 315 316 317 <!-- <div class="mt-2 container mb-1"> 318 <div class="row pl-3 pr-3"> 319 <div class="col-12 alert alert-success alert-dismissible text-small fade show" role="alert"> 320 <i class="fas fa-info-circle"></i> Join the next part of our journey at <a 321 href="https://solioanalytics.com">solioanalytics.com</a> 322 <button type="button" class="close top-close" data-dismiss="alert" aria-label="Close"> 323 <span aria-hidden="true">×</span> 324 </button> 325 </div> 326 </div> 327 </div> --> 328 329 <!-- <div class="mt-2 container"> 330 <div class="row pl-3 pr-3"> 331 <div class="col-12 alert alert-warning alert-dismissible text-small fade show" role="alert"> 332 <i class="fas fa-trophy"></i> <a href="https://footballcontentawards.com/voting" target="blank">Vote for FPL Optimized in Football Content Awards. (Fantasy Football / Organization)</a> 333 <button type="button" class="close top-close" data-dismiss="alert" aria-label="Close"> 334 <span aria-hidden="true">×</span> 335 </button> 336 </div> 337 </div> 338 </div> --> 339 340
340<script> 341 function toggleTheme() { 342 const html = document.documentElement; 343 const icon = document.getElementById('theme-icon'); 344 const text = document.getElementById('theme-text'); 345 const currentTheme = html.getAttribute('data-theme'); 346 347 if (currentTheme === 'light') { 348 html.setAttribute('data-theme', 'dark'); 349 icon.className = 'fas fa-moon'; 350 text.textContent = 'Dark'; 351 localStorage.setItem('theme', 'dark'); 352 } else { 353 html.setAttribute('data-theme', 'light'); 354 icon.className = 'fas fa-sun'; 355 text.textContent = 'Light'; 356 localStorage.setItem('theme', 'light'); 357 } 358 359 // Trigger theme change event for charts 360 document.dispatchEvent(new CustomEvent('themeChanged')); 361 } 362 363 // Update icon after DOM loads 364 document.addEventListener('DOMContentLoaded', function () { 365 const savedTheme = localStorage.getItem('theme') || 'dark'; 366 const icon = document.getElementById('theme-icon'); 367 const text = document.getElementById('theme-text'); 368 369 /*if (savedTheme === 'light') { 370 icon.className = 'fas fa-sun'; 371 text.textContent = 'Light'; 372 } else { 373 icon.className = 'fas fa-moon'; 374 text.textContent = 'Dark'; 375 }*/ 376 }); 377 </script>
377 378 379<main :class="{'container-fluid': maximize, 'container': !maximize}" v-cloak> 380 <div class="row mb-3"> 381 <div class="col-12"> 382 <div class="card border-dark bg-squad-card text-white"> 383 <h5 class="card-header border-complement text-center scenario_title">Season Highlights</h5> 384 <button type="button" class="btn btn-secondary btn-sm btn-right-corner" @click="maximize=!maximize"> 385 <i class="fas fa-expand" v-if="!maximize"></i> 386 <i class="fas fa-compress" v-else></i> 387 </button> 388 <div class="scenario_detail"> 389 A brief look to your entire season stats per player 390 </div> 391 <div class="card-body text-center p-3" v-cloak> 392 <div class="row no-gutters justify-content-center"> 393 <div class="col-lg-4 col-8"> 394 <div class="input-group"> 395 <input type="number" class="form-control" placeholder="Team ID" v-model.lazy="team_id" 396 :disabled="loading"> 397 <div class="input-group-append"> 398 <button class="btn btn-primary" type="button" @click="fetch_team_picks" 399 :disabled="loading">Generate</button> 400 </div> 401 </div> 402 </div> 403 </div> 404 <div class="row no-gutters justify-content-center mt-2" v-if="loading" v-cloak> 405 <div class="col-lg-3 col-8"> 406 <span class="text-muted text-xs">Loading the data can take a few seconds.</span> 407 <div class="progress"> 408 <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" 409 :style="{ width: completed/gw*100 + '%' }" aria-valuemin="0" aria-valuemax="100"> 410 </div> 411 </div> 412 </div> 413 </div> 414 <div class="row justify-content-center mb-1 mt-1" v-if="ready" v-cloak> 415 <button class="btn btn-warning mr-2" onclick="download_excel()">Download Tables as 416 Excel</button> 417 </div> 418 </div> 419 </div> 420 </div> 421 </div> 422 423 <!-- <table> 424 <tr > 425 <td class="p-2" v-for="(t, key) in pl_team_colors" :style="{'background-color': t[0], 'color': t[1]}">{{ key }}</td> 426 </tr> 427 </table> --> 428 429 430 <div class="row" id="graph-section-wrapper"> 431 <div class="col-12 mb-3"> 432 <div class="card card-field border-dark bg-squad-card text-white"> 433 <h5 class="card-header border-complement text-center scenario_title">Predicted / Realized Performance 434 </h5> 435 <div class="scenario_detail"> 436 Decision making quality compared to actual outcome 437 </div> 438 <div class="card-body" v-if="ready" v-cloak> 439 440 <div class="row justify-content-center mb-1"> 441 <div class="col-12 col-lg-4"> 442 <div class="form-group"> 443 <label>Sample tier</label> 444 <select class="custom-select" id="sample_selection-2" v-model="sample_selection" 445 @change="invalidate_cache(); redraw_graphs();"> 446 <option v-for="(p, index) in sample_options" :value="index">{{ sample_label(p) }}</option> 447 </select> 448 </div> 449 </div> 450 </div> 451 452 <div class="row justify-content-center mb-3"> 453 <div class="col-12"> 454 <div class="text-center">
455 <span class="svg-legend-text mr-2"> 456 <svg width="20" height="10"> 457 <g> 458 <line id="svg_1" y2="5" x2="20" y1="5" x1="0" stroke-width="1.5" 459 stroke="#dbf7b4" stroke-dasharray="4,1" fill="none"></line> 460 </g> 461 </svg> Predicted 462 </span> 463 <span class="svg-legend-text mr-2"> 464 <svg width="20" height="10"> 465 <g> 466 <line id="svg_1" y2="5" x2="20" y1="5" x1="0" stroke-width="1.5" 467 stroke="#6fcfd6" fill="none"></line> 468 </g> 469 </svg> Realized 470 </span> 471 </div> 472 473 <div id="season-xp-real-diff-plot"> 474 475 </div> 476 477 </div> 478 <div class="col-12"> 479 <div class="text-center"> 480 <div class="custom-control custom-switch text-small d-inline-block mr-3"> 481 <input type="checkbox" class="custom-control-input" id="all_gw_switch" 482 v-model="show_all_season"> 483 <label class="custom-control-label highlighted-checkbox" for="all_gw_switch">Show 484 All GWs</label> 485 </div> 486 </div> 487 </div> 488 <div class="col-12 col-md-6"> 489 <div class="text-center text-small">GW-by-GW values</div> 490 <table 491 class="table table-sm text-white text-small mt-1 mb-1 custom-table-responsive p-0 narrow-td no-row-borders" 492 id="gw_history"> 493 <thead> 494 <tr> 495 <th class="text-center">GW</th> 496 <th class="text-center">Pred. Pts</th> 497 <th class="text-center">Real. Pts</th> 498 <th class="text-center">Pred. Diff</th> 499 <th class="text-center">Real. Diff</th> 500 <th class="text-center">GW Luck</th> 501 <th class="text-center">GW Rank</th> 502 </tr> 503 </thead> 504 <tbody v-cloak> 505 <tr :class="{'owned-row': v.luck > 0, 'nonowned-row': v.luck < 0}" 506 v-for="(v, key) in (user_gw_results?.data || [])" 507 v-if="show_all_season || (key == user_gw_results.finish)"> 508 <td class="text-center">{{ v.gw }}</td> 509 <td class="text-center">{{ rounded(v.xp) }}</td> 510 <td class="text-center">{{ (v.rp) }}</td> 511 <td class="text-center">{{ rounded(v.exp_diff) }}</td> 512 <td class="text-center">{{ rounded(v.real_diff) }}</td> 513 <td class="text-center">{{ rounded(v.luck) }}</td> 514 <td class="text-center">{{ team_data[v.gw].entry_history.rank }}</td> 515 </tr> 516 </tbody> 517 <tfoot> 518 <tr v-if="show_all_season"> 519 <th class="text-center">GW</th> 520 <th class="text-center">Pred. Pts</th> 521 <th class="text-center">Real. Pts</th> 522 <th class="text-center">Pred. Diff</th> 523 <th class="text-center">Real. Diff</th> 524 <th class="text-center">GW Luck</th> 525 <th class="text-center">GW Rank</th> 526 </tr> 527 </tfoot> 528 </table> 529 </div> 530 <div class="col-12 col-md-6"> 531 <div class="text-center text-small">Total values</div> 532 <table 533 class="table table-sm text-white text-small mt-1 mb-1 custom-table-responsive p-0 narrow-td no-row-borders" 534 id="gw_history_total"> 535 <thead> 536 <tr> 537 <th class="text-center">GW</th> 538 <th class="text-center">Pred. Pts</th> 539 <th class="text-center">Real. Pts</th> 540 <th class="text-center">Pred. Diff</th> 541 <th class="text-center">Real. Diff</th> 542 <th class="text-center">Luck</th> 543 <th class="text-center">OR</th> 544 </tr> 545 </thead> 546 <tbody v-cloak> 547 <tr :class="{'owned-row': v.luck > 0, 'nonowned-row': v.luck < 0}" 548 v-for="(v, key) in (user_gw_results?.data || [])" 549 v-if="show_all_season || (key == user_gw_results.finish)"> 550 <td class="text-center">{{ v.gw }}</td> 551 <td class="text-center">{{ rounded(v.total_xp) }}</td> 552 <td class="text-center">{{ (v.total_rp) }}</td> 553 <td class="text-center">{{ rounded(v.total_exp_diff) }}</td> 554 <td class="text-center">{{ rounded(v.total_real_diff) }}</td> 555 <td class="text-center">
556 <span v-if="v.luck > 0"><i class="fas fa-caret-up" 557 style="color: rgb(0, 217, 0);"></i> </span> 558 <span v-if="v.luck < 0"><i class="fas fa-caret-down" 559 style="color: rgb(255, 0, 90);"></i> </span> 560 {{ rounded(v.total_exp_real_diff) }} 561 </td> 562 <td class="text-center"> 563 <span 564 v-if="v.gw > 1 && team_data[v.gw].entry_history.overall_rank < team_data[parseInt(v.gw)-1].entry_history.overall_rank"><i 565 class="fas fa-caret-up" style="color: rgb(0, 217, 0);"></i> </span> 566 <span v-else-if="v.gw > 1"><i class="fas fa-caret-down" 567 style="color: rgb(255, 0, 90);"></i> </span> 568 {{ team_data[v.gw].entry_history.overall_rank }} 569 </td> 570 </tr> 571 </tbody> 572 <tfoot> 573 <tr v-if="show_all_season"> 574 <th class="text-center">GW</th> 575 <th class="text-center">Pred. Pts</th> 576 <th class="text-center">Real. Pts</th> 577 <th class="text-center">Pred. Diff</th> 578 <th class="text-center">Real. Diff</th> 579 <th class="text-center">Luck</th> 580 <th class="text-center">OR</th> 581 </tr> 582 </tfoot> 583 </table> 584 </div> 585 <div class="col-12 col-md-6"> 586 <div class="text-center text-small">Skill/Luck Magnitude Proportion</div> 587 <table 588 class="table table-sm text-white text-small mt-1 mb-1 custom-table-responsive p-0 narrow-td no-row-borders" 589 id="gw_history_skill"> 590 <thead> 591 <tr> 592 <th class="text-center">GW</th> 593 <th class="text-center">GW Skill</th> 594 <th class="text-center">GW Luck</th> 595 <th class="text-center">Total Skill</th> 596 <th class="text-center">Total Luck</th> 597 </tr> 598 </thead> 599 <tbody v-cloak> 600 <tr :class="{'owned-row': v.luck > 0, 'nonowned-row': v.luck < 0}" 601 v-for="(v, key) in (user_gw_results?.data || [])" 602 v-if="show_all_season || (key == user_gw_results.finish)"> 603 <td class="text-center">{{ v.gw }}</td> 604 <td class="text-center"><span v-if="v.skill_ratio<0">(-) </span>{{ 605 Math.abs(v.skill_ratio) }}%</td> 606 <td class="text-center"><span v-if="v.luck_ratio<0">(-) </span>{{ 607 Math.abs(v.luck_ratio) }}%</td> 608 <td class="text-center"><span v-if="v.total_skill_ratio<0">(-) </span>{{ 609 Math.abs(v.total_skill_ratio) }}%</td> 610 <td class="text-center"><span v-if="v.total_luck_ratio<0">(-) </span>{{ 611 Math.abs(v.total_luck_ratio) }}%</td> 612 613 </tbody> 614 <tfoot> 615 <tr v-if="show_all_season"> 616 <th class="text-center">GW</th> 617 <th class="text-center">GW Skill</th> 618 <th class="text-center">GW Luck</th> 619 <th class="text-center">Total Skill</th> 620 <th class="text-center">Total Luck</th> 621 </tr> 622 </tfoot> 623 </table> 624 </div> 625 </div> 626 <!-- <div class="row justify-content-center mb-3"> 627 <div class="col-12 mt-2" v-if="season_targets && sample_selection==6 && final_outcome != undefined"> 628 <div class="col-12">
629 <span class="d-block border-below-orange">What-if Luck-Meter</span> 630 </div> 631 <div class="text-center text-small"> 632 You have finished season with {{ _.round(final_outcome.total_real_diff,1) }} relative points compared Prime Sample. To get OR #1 you needed {{ season_targets[0][2] }}.<br/> 633 Move the Luck Slider below to see where you could have ended!<br/> 634 It shows the magnitude weight of luck (variance) compared to sum of skill (predicted) and luck (variance) and calculates your final difference to tier average. 635 </div> 636 <div class="mt-3 mb-1 text-center"> 637 <div class="m-2"> 638 <input type="range" class="col-12 col-md-6 form-range p-0" min="-99.9" max="99.9" step="0.1" v-model.number="luck_input" > 639 <span class="d-block" >{{ _.round(luck_input,1) }}%</span> 640 </div> 641 </div> 642 <div class="row justify-content-center mb-3"> 643 <div class="col-6 row justify-content-center"> 644 <div class="col text-center"> 645 <div class="xp-bg text-black">Skill</div><div>{{ _.round(final_outcome.total_exp_diff,1) }}</div> 646 </div> 647 <div class="col-1 text-center"> 648 <div class="">+</div><div> </div> 649 </div> 650 <div class="col text-center"> 651 <div class="rp-bg text-black">Luck</div><div>{{ _.round(calculated_luck,1) }}</div> 652 </div> 653 <div class="col-1 text-center"> 654 <div class="">=</div><div> </div> 655 </div> 656 <div class="col text-center"> 657 <div class="outcome-bg text-black">Total</div><div>{{ _.round(calculated_total,1) }}</div> 658 </div> 659 </div> 660 </div> 661 <div class="row justify-content-center mb-3"> 662 <div class="col-6 d-flex flex-column"> 663 <div class="text-center text-small">With this result, you would finish in OR</div> 664 <div class="text-center">{{ potential_result }}</div> 665 </div> 666 </div> 667 </div> 668 </div> --> 669 670 </div> 671 </div> 672 </div> 673 </div> 674 675 676 <div class="row" id="graph-section-wrapper"> 677 <div class="col-12 mb-3"> 678 <div class="card card-field border-dark bg-squad-card text-white"> 679 <h5 class="card-header border-complement text-center scenario_title">Team of the Year</h5> 680 <div class="scenario_detail"> 681 Your top scoring players of the season 682 </div> 683 <div class="card-body" v-if="ready" v-cloak> 684 <div class="row"> 685 <div class="col-12 col-lg-6" id="top_players_field"> 686 <div class="col-12"> 687 <div class="text-center"> 688 <div class="custom-control custom-switch text-small d-inline-block mr-3"> 689 <input type="checkbox" class="custom-control-input" id="toty_relative_s" 690 v-model="toty_relative"> 691 <label class="custom-control-label highlighted-checkbox" 692 for="toty_relative_s">Show Relative Gain</label> 693 </div> 694 </div> 695 </div> 696 697 <div class="lineup gray-bg"> 698 <svg class="mx-auto d-block" viewB
698ox="0 0 112.44791 168.72709" 699 style="max-height: 700px"> 700 <svg class="field"> 701 <g class="g_field"> 702 <rect class="field-common" width="104.4753" height="136.70862" x="4.0935702" 703 y="3.8053379" /> 704 <path class="field-common" 705 d="M 9.7876973,3.8053379 A 5.6941271,5.6941271 0 0 1 4.0935704,9.499465 l -2e-7,-5.6941271 z" /> 706 <path class="field-common" id="right_top_corner" 707 d="m 9.499465,-108.56887 a 5.6941271,5.6941271 0 0 1 -5.6941269,5.69413 l -2e-7,-5.69413 z" 708 transform="rotate(90)" /> 709 <path class="field-common" id="right_bottom_corner" 710 d="m -102.87474,-140.51396 a 5.6941271,5.6941271 0 0 1 -5.69413,5.69413 l 0,-5.69413 z" 711 transform="scale(-1)" /> 712 <path class="field-common" id="left_bottom_corner" 713 d="m -134.81983,4.0935702 a 5.6941271,5.6941271 0 0 1 -5.69413,5.6941271 l 0,-5.6941271 z" 714 transform="rotate(-90)" /> 715 <rect class="field-common" id="top_penalty_box" width="46.726002" 716 height="21.884615" x="32.992699" y="3.852963" /> 717 <rect class="field-common" id="top_inner_box" width="24.50474" 718 height="11.328758" x="44.101284" y="3.828212" /> 719 <path class="field-common" id="top_arch" 720 d="m 65.686854,25.720037 a 9.4620543,6.1092615 0 0 1 -4.731027,5.290776 9.4620543,6.1092615 0 0 1 -9.462054,0 9.4620543,6.1092615 0 0 1 -4.731027,-5.290776 l 9.462054,0 z" /> 721 <path class="field-common" id="bottom_arch" 722 d="m -47.240994,-118.62238 a 9.4620543,6.1092615 0 0 1 -4.731028,5.29077 9.4620543,6.1092615 0 0 1 -9.462054,0 9.4620543,6.1092615 0 0 1 -4.731027,-5.29077 l 9.462054,0 z" 723 transform="scale(-1)" /> 724 <rect class="field-common" id="bottom_penalty_box" width="46.726002" 725 height="21.884615" x="-79.962532" y="-140.46913" 726 transform="scale(-1)" /> 727 <rect class="field-common" id="bottom_inner_box" width="24.50474" 728 height="11.328759" x="-68.851799" y="-140.42613" 729 transform="scale(-1)" /> 730 <circle class="field-common" id="kick_off" cx="55.893227" cy="71.70208" 731 r="14.196868" /> 732 <path class="field-common field-last-path" 733 d="M 4.1010416,71.569791 H 108.51143" id="center_line" 734 inkscape:connector-curvature="0" /> 735 <rect class="field-common" id="bench_box" width="104.4753" 736 height="24.503908" x="4.0935702" y="140.51396" /> 737 </g> 738 </svg> 739 <svg v-for="player in toty_final" :x="player.x" :y="player.y"> 740 <g class="g_jersey" :class="{jersey_bench: player.multiplier == 0}" 741 style="transform:translate(-20px,-35px)"> 742 <path 743 d="m 23.22238,41.75816 5.79975,-3.461141 h 6.010222 l 5.986838,3.484525 -1.520095,3.624845 -2.081363,-0.724969 V 54.784206 H 26.870609 V 44.634647 l -2.221678,0.888672 z" 744 class="jersey-regular" /> 745 <g> 746 <path class="jersey-regular" 747 d="m 24.461842,40.986418 1.07576,2.642627" /> 748 <path class="jersey-regular" 749 d="m 25.186811,40.518696 0.748355,1.91766" /> 750 </g> 751 <g transform="matrix(-1,0,0,1,74.133883,-0.39756341)"> 752 <path class="jersey-regular" d="m 34.435651,41.5351 1.07576,2.642627" /> 753 <path class="jersey-regular" 754 d="m 35.16062,41.067378 0.748355,1.91766" /> 755 </g> 756 <path d="m 29.02213,38.297019 3.042062,3.308712 2.96816,-3.308712" 757 class="jersey-regular" /> 758 <g clip-path="url(#clipPath867)" transform="translate(22.73135,-236.63834)"> 759 <g><text y="285.37598" x="9.281539" class="jersey-regular-text"> 760 <tspan class="jersey-xp-text" y="285.37598" x="9.281539"> 761 <tspan style="font-size:5px">{{ player.points_total }} 762 </tspan> 763 </tspan> 764 </text> 765 <!-- <text y="289.78659" x="9.3432751" class="jersey-regular-text jersey-team-text"> 766 <tspan v-if="true" 767 class="jersey-captain-star" 768 y="281.28659" x="11.3432751" >★</tspan> 769 </text> --> 770 <rect y="291.74704" x="0.028824098" height="3.1975782" 771 width="18.470304" class="jersey-name-bg" /> 772 <rect y="294.94461" x="0.028824052" height="2.0213056" 773 width="18.470306" class="jersey-team-bg" /> 774 <text y="294.1311" x="9.3312988" class="jersey-regular-text" 775 xml:space="preserve"> 776 <tspan class="jersey-player-name" y="294.1311" x="9.3312988">{{ 777 player.player.name }}</tspan> 778 </text> 779 <text y="296.74948" x="9.2921124" class="jersey-regular-text" 780 xml:space="preserve"> 781 <tspan class="jersey-team-name" y="296.74948" x="9.2921124">{{ 782 teams_ordered[player.player.raw.team-1].name }}</tspan> 783 </text> 784 <text class="jersey-cost-text" xml:space="preserve"> 785 <tspan style="text-align:center" y="289.74948" x="9.2921124" 786 style="font-size:2px; fill: black" 787 v-if="player.cap_count > 0">Cap: {{ 788 player.cap_count }}</tspan> 789 </text> 790 </g> 791 </g> 792 </g> 793 </svg> 794 </svg> 795 </div> 796 797 </div> 798 <div class="col-12 col-lg-6" id="top_players_list" v-if="ready">
799 <span class="d-block border-below-orange">All squad players and their point returns</span> 800 <table 801 class="p-0 col-12 table table-sm text-white table-striped text-small m-data-table mt-1 mb-1 custom-table-responsive" 802 id="top_players_table"> 803 <thead> 804 <tr> 805 <th class="text-muted sticky-col">ID</th> 806 <th class="sticky-col">Name</th> 807 <th>Pos</th> 808 <th>Lineup</th> 809 <th>Bench</th> 810 <th>Capt</th> 811 <th>Points</th> 812 <th>Gain Pts</th> 813 <!-- <th>Eff.Points</th> --> 814 </tr> 815 </thead> 816 <tbody v-cloak> 817 <tr v-for="p in user_player_sum" class="owned-row"> 818 <td class="text-muted sticky-col">{{ p.id }}</td> 819 <td class="sticky-col">{{ p.name }}</td> 820 <td>{{ element_type[p.position].short }}</td> 821 <td>{{ p.lineup_count }}</td> 822 <td>{{ p.squad_count - p.lineup_count }}</td> 823 <td>{{ p.cap_count }}</td> 824 <td>{{ p.points_total }}</td> 825 <td>{{ p.points_total_rel }}</td> 826 </tr> 827 </tbody> 828 </table> 829 </div> 830 <div class="col-12 col-lg-6"> 831 <div class="mt-1 d-flex mx-auto justify-content-center" id="csv_buttons"> 832 </div> 833 </div> 834 </div> 835 </div> 836 </div> 837 </div> 838 </div> 839 840 841 842 <div class="row"> 843 <div class="col-12 mb-3"> 844 <div class="card card-field border-dark bg-squad-card text-white"> 845 <h5 class="card-header border-complement text-center scenario_title">Points Analysis per Player</h5> 846 <div class="scenario_detail"> 847 Impact of each player on your season - realized and predicted 848 </div> 849 <div class="card-body" v-if="ready" v-cloak> 850 851 <div class="row justify-content-center"> 852 <div class="col-12 col-md-6"> 853 <div class="row justify-content-center mb-3"> 854 <div class="col-12"> 855 <span class="d-block border-below-orange">Total realized gain / loss per 856 player</span> 857 <table 858 class="table table-sm text-white table-striped text-small m-data-table mt-1 mb-1 custom-table-responsive better_pages" 859 id="total_gain_loss_table" style="width: 100%"> 860 <thead> 861 <tr> 862 <!-- <th class="text-center text-muted">ID</th> --> 863 <th class="text-center">Name</th> 864 <th class="text-center">Team</th> 865 <th class="text-center">Pos</th> 866 <th class="text-center">Pts</th> 867 <th class="text-center">Gain</th> 868 <th class="text-center">Loss</th> 869 <th class="text-center highlighted-text-col">Net</th> 870 <th class="text-center">Impact</th> 871 </tr> 872 </thead> 873 <tbody v-cloak> 874 <tr v-for="p in user_ownership_gain_loss.combined_per_player" 875 :class="{'owned-row': p.net>0, 'nonowned-row': p.net < 0}"> 876 <!-- <td class="text-center text-muted">{{ p.id }}</td> --> 877 <td class="text-center">{{ fpl_element[p.id].web_name }}</td> 878 <td class="text-center">{{ team_codes[fpl_element[p.id].team_code].short 879 }}</td> 880 <td class="text-center">{{ 881 element_type[fpl_element[p.id].element_type].short }}</td> 882 <td class="text-center">{{ p.points }}</td> 883 <td class="text-center">{{ rounded(p.gain) }}</td> 884 <td class="text-center">{{ rounded(p.loss) }}</td> 885 <td class="text-center highlighted-text-col">{{ rounded(p.net) }}</td> 886 <td class="text-center">{{ rounded(p.impact) }}%</td> 887 </tr> 888 </tbody> 889 <tfoot> 890 <tr> 891 <!-- <th class="text-center text-muted">ID</th> --> 892 <th class="text-center"></th> 893 <th class="text-center"></th> 894 <th class="text-center"></th> 895 <th class="text-center"></th> 896 <th class="text-center"></th> 897 <th class="text-center"></th> 898 <th class="text-center"></th> 899 <th class="text-center"></th> 900 </tr> 901 </tfoot> 902 </table> 903 </div> 904 <div class="row col-8 col-lg-6 justify-content-center" id="csv_buttons4"> 905 </div> 906 </div> 907 </div> 908 909 <div class="col-12 col-md-6"> 910 <div class="row justify-content-center mb-3"> 911 <div class="col-12">
912 <span class="d-block border-below-orange">Total predicted gain / loss per 913 player</span> 914 <table 915 class="table table-sm text-white table-striped text-small m-data-table mt-1 mb-1 custom-table-responsive better_pages" 916 id="total_exp_gain_loss_table" style="width: 100%"> 917 <thead> 918 <tr> 919 <!-- <th class="text-center text-muted">ID</th> --> 920 <th class="text-center">Name</th> 921 <th class="text-center">Team</th> 922 <th class="text-center">Pos</th> 923 <th class="text-center">xPts</th> 924 <th class="text-center">xGain</th> 925 <th class="text-center">xLoss</th> 926 <th class="text-center highlighted-text-col">xNet</th> 927 <th class="text-center">xImpact</th> 928 </tr> 929 </thead> 930 <tbody v-cloak> 931 <tr v-for="p in user_ownership_gain_loss.combined_per_player_exp" 932 :class="{'owned-row': p.xnet>0, 'nonowned-row': p.xnet < 0}"> 933 <!-- <td class="text-center text-muted">{{ p.id }}</td> --> 934 <td class="text-center">{{ fpl_element[p.id].web_name }}</td> 935 <td class="text-center">{{ team_codes[fpl_element[p.id].team_code].short 936 }}</td> 937 <td class="text-center">{{ 938 element_type[fpl_element[p.id].element_type].short }}</td> 939 <td class="text-center">{{ rounded(p.xpoints) }}</td> 940 <td class="text-center">{{ rounded(p.xgain) }}</td> 941 <td class="text-center">{{ rounded(p.xloss) }}</td> 942 <td class="text-center highlighted-text-col">{{ rounded(p.xnet) }}</td> 943 <td class="text-center">{{ rounded(p.ximpact) }}%</td> 944 </tr> 945 </tbody> 946 <tfoot> 947 <tr> 948 <!-- <th class="text-center text-muted">ID</th> --> 949 <th class="text-center"></th> 950 <th class="text-center"></th> 951 <th class="text-center"></th> 952 <th class="text-center"></th> 953 <th class="text-center"></th> 954 <th class="text-center"></th> 955 <th class="text-center"></th> 956 <th class="text-center"></th> 957 </tr> 958 </tfoot> 959 </table> 960 </div> 961 <div class="row col-8 col-lg-6 justify-content-center" id="csv_buttons_exp"> 962 </div> 963 </div> 964 </div> 965 966 <div class="col-12 col-md-6"> 967 <div class="row justify-content-center mb-3"> 968 <div class="col-12">
969 <span class="d-block border-below-orange">Total luck per player</span> 970 <table 971 class="table table-sm text-white table-striped text-small m-data-table mt-1 mb-1 custom-table-responsive better_pages" 972 id="total_player_luck_table" style="width: 100%"> 973 <thead> 974 <tr> 975 <!-- <th class="text-center text-muted">ID</th> --> 976 <th class="text-center">Name</th> 977 <th class="text-center">Team</th> 978 <th class="text-center">Pos</th> 979 <th class="text-center">Net</th> 980 <th class="text-center">xNet</th> 981 <th class="text-center highlighted-text-col">Luck</th> 982 <th class="text-center">Impact</th> 983 </tr> 984 </thead> 985 <tbody v-cloak> 986 <tr v-for="p in user_ownership_gain_loss.comb_per_player_luck" 987 :class="{'owned-row': p.luck>0, 'nonowned-row': p.luck < 0}"> 988 <!-- <td class="text-center text-muted">{{ p.id }}</td> --> 989 <td class="text-center">{{ fpl_element[p.id].web_name }}</td> 990 <td class="text-center">{{ team_codes[fpl_element[p.id].team_code].short 991 }}</td> 992 <td class="text-center">{{ 993 element_type[fpl_element[p.id].element_type].short }}</td> 994 <td class="text-center">{{ rounded(p.net) }}</td> 995 <td class="text-center">{{ rounded(p.xnet) }}</td> 996 <td class="text-center highlighted-text-col">{{ getWithSign(p.luck) }} 997 </td> 998 <td class="text-center">{{ rounded(p.luckimpact) }}%</td> 999 </tr> 1000 </tbody> 1001 <tfoot> 1002 <tr> 1003 <!-- <th class="text-center text-muted">ID</th> --> 1004 <th class="text-center"></th> 1005 <th class="text-center"></th> 1006 <th class="text-center"></th> 1007 <th class="text-center"></th> 1008 <th class="text-center"></th> 1009 <th class="text-center"></th> 1010 <th class="text-center"></th> 1011 </tr> 1012 </tfoot> 1013 </table> 1014 </div> 1015 <div class="row col-8 col-lg-6 justify-content-center" id="csv_buttons_luck_table"> 1016 </div> 1017 </div> 1018 </div> 1019 1020 </div> 1021 </div> 1022 </div> 1023 </div> 1024 </div> 1025 1026 1027 <div class="row"> 1028 <div class="col-12 mb-3"> 1029 <div class="card card-field border-dark bg-squad-card text-white"> 1030 <h5 class="card-header border-complement text-center scenario_title">Team Picks over Season</h5> 1031 <button type="button" class="btn btn-secondary btn-sm btn-right-corner" @click="maximize=!maximize"> 1032 <i class="fas fa-expand" v-if="!maximize"></i> 1033 <i class="fas fa-compress" v-else></i> 1034 </button> 1035 <div class="scenario_detail"> 1036 A visualization of your picks per position 1037 </div> 1038 <div class="card-body" v-if="ready" v-cloak> 1039 <div class="row"> 1040 <div class="col-12"> 1041 <div class="text-center text-small"> 1042 <div class="custom-control custom-switch text-small d-inline-block mr-3"> 1043 <input type="checkbox" class="custom-control-input" id="show_info_tog" 1044 v-model="show_info_ts" @change="draw_team_season_visual()"> 1045 <label class="custom-control-label highlighted-checkbox" for="show_info_tog">Show 1046 Info Cols</label> 1047 </div> 1048 <div class="custom-control custom-switch text-small d-inline-block mr-3"> 1049 <input type="checkbox" class="custom-control-input" id="show_pts_tog" 1050 v-model="show_pts_on_ts" @change="draw_team_season_visual()"> 1051 <label class="custom-control-label highlighted-checkbox" for="show_pts_tog">Show 1052 Points</label> 1053 </div> 1054 <div class="custom-control custom-switch text-small d-inline-block mr-3"> 1055 <input type="checkbox" class="custom-control-input" id="team_col_tog" 1056 v-model="use_team_colors" @change="draw_team_season_visual()"> 1057 <label class="custom-control-label highlighted-checkbox" for="team_col_tog">Use Team 1058 Colors</label> 1059 </div> 1060 </div> 1061 <div id="team_season_visual"> 1062 1063 </div> 1064 <!-- <div class="row justify-content-center"> 1065 <table class="col-8 col-md-6 table table-sm text-small table-striped mx-auto text-white"> 1066 <tbody> 1067 <tr> 1068 <td>Blanks / Picks</td> 1069 <td>{{ pick_stats.blanks }} / {{ pick_stats.picked }}</td> 1070 </tr> 1071 <tr> 1072 <td>10+ Picks</td> 1073 <td>{{ pick_stats.tens }} / {{ pick_stats.picked }}</td> 1074 </tr> 1075 </tbody> 1076 </table> 1077 </div> --> 1078 </div> 1079 </div> 1080 </div> 1081 </div> 1082 </div> 1083 </div> 1084 1085 1086 1087 <div class="row"> 1088 <div class="col-12 mb-3"> 1089 <div class="card card-field border-dark bg-squad-card text-white"> 1090 <h5 class="card-header border-complement text-center scenario_title">Points by Acquisition Type and 1091 Decision Age</h5> 1092 <div class="scenario_detail"> 1093 Details about where points originated with decision age details 1094 </div> 1095 <div class="card-body" v-if="ready" v-cloak> 1096 <div class="row justify-content-center"> 1097 <div class="col-12"> 1098 <!-- <div class="text-center text-small"> 1099 <div class="custom-control custom-switch text-small d-inline-block mr-3"> 1100 <input type="checkbox" class="custom-control-input" id="exclude_fh_tag" v-model="exclude_fh_from_age_0" @change="draw_point_origin_graph()"> 1101 <label class="custom-control-label highlighted-checkbox" for="exclude_fh_tag">Exclude FH from decision age analysis</label> 1102 </div> 1103 </div> --> 1104 <!-- <div class="text-small" style="overflow-x: hidden;
1104 overflow-y: scroll; max-height: 300px;"> 1105 <div> 1106 {{ user_picks_origin }} 1107 </div> 1108 </div> --> 1109 <div id="point_origin_visual"> 1110 1111 </div> 1112 </div> 1113 <!-- <div class="col-12 col-md-8 mt-3"> 1114 <table class="table table-sm text-white table-striped text-small m-data-table mt-1 mb-1 custom-table-responsive" id="point_origin_table" v-if="ready"> 1115 <thead> 1116 <tr> 1117 <th class="text-center">Decision Age</th> 1118 <th class="text-center" v-for="stat in user_picks_origin.group_names">{{ stat[0] }}</th> 1119 <th class="text-center">Total</th> 1120 <th class="text-center">Percentage</th> 1121 </tr> 1122 </thead> 1123 <tbody v-cloak> 1124 <tr v-for="age in user_picks_origin.age_groups"> 1125 <td class="text-center">{{ age }}</td> 1126 <td class="text-center" v-for="stat in user_picks_origin.group_names">{{ _.get(user_picks_origin.nested_sum, stat[1] + '.' + age) || "-" }}</td> 1127 <td class="text-center">{{ _.get(user_picks_origin.age_sums, age) || "-" }}</td> 1128 <td class="text-center">{{ _.round( (_.get(user_picks_origin.age_sums, age) || 0) / user_picks_origin.stats.total * 100, 0) }}%</td> 1129 </tr> 1130 </tbody> 1131 </table> 1132 </div> --> 1133 </div> 1134 </div> 1135 </div> 1136 </div> 1137 </div> 1138 1139 1140 1141 1142 <div class="row" id="graph-section-wrapper"> 1143 <div class="col-12 mb-3"> 1144 <div class="card card-field border-dark bg-squad-card text-white"> 1145 <h5 class="card-header border-complement text-center scenario_title">Point Distribution</h5> 1146 <div class="scenario_detail"> 1147 Distribution of your points from each type 1148 </div> 1149 <div class="card-body" v-if="ready" v-cloak> 1150 <div class="row"> 1151 <div class="col-12 col-lg-6 mb-2"> 1152 <span class="d-block border-below-orange">Total counts of key events per GW</span> 1153 <table 1154 class="table table-sm text-white table-striped text-small m-data-table mt-1 mb-1 custom-table-responsive" 1155 id="gw_points_table" v-if="ready"> 1156 <thead> 1157 <tr> 1158 <th>GW</th> 1159 <th class="text-center">Clean Sheet</th> 1160 <th class="text-center">Def Con</th> 1161 <th class="text-center">Goal</th> 1162 <th class="text-center">Assist</th> 1163 <th class="text-center">Bonus</th> 1164 <th class="text-center">Hits</th> 1165 <th class="text-center">Points</th> 1166 </tr> 1167 </thead> 1168 <tbody v-cloak> 1169 <tr v-for="p in user_stats_per_gw.points" class="owned-row"> 1170 <td class="text-center">{{ p.gw }}</td> 1171 <td :data-order=" p.info.type_sums['clean_sheets'] || 0"> 1172 <span class="gw_detail_number">{{ p.info.type_sums['clean_sheets'] || 0 1173 }}</span>
1174 <span class="gw_detail_players">{{ p.info.type_names['clean_sheets'] || '' 1175 }}</span> 1176 </td> 1177 <td :data-order="p.info.type_sums['defensive_contribution'] || 0"> 1178 <span class="gw_detail_number">{{ 1179 p.info.type_sums['defensive_contribution'] || 0 }}</span> 1180 <span class="gw_detail_players">{{ 1181 p.info.type_names['defensive_contribution'] || '' }}</span> 1182 </td> 1183 <td :data-order="p.info.type_sums['goals_scored'] || 0"> 1184 <span class="gw_detail_number">{{ p.info.type_sums['goals_scored'] || 0 1185 }}</span> 1186 <span class="gw_detail_players">{{ p.info.type_names['goals_scored'] || '' 1187 }}</span> 1188 </td> 1189 <td :data-order="p.info.type_sums['assists'] || 0"> 1190 <span class="gw_detail_number">{{ p.info.type_sums['assists'] || 0 }}</span> 1191 <span class="gw_detail_players">{{ p.info.type_names['assists'] || '' 1192 }}</span> 1193 </td> 1194 <td :data-order="p.info.type_sums['bonus'] || 0"> 1195 <span class="gw_detail_number">{{ p.info.type_sums['bonus'] || 0 }}</span> 1196 <span class="gw_detail_players">{{ p.info.type_names['bonus'] || '' 1197 }}</span> 1198 </td> 1199 <td> 1200 <span class="gw_detail_number">{{ p.hit_pts/4 }}</span> 1201 </td> 1202 <td> 1203 <span class="gw_detail_number">{{ p.net_pts }}</span> 1204 </td> 1205 </tr> 1206 </tbody> 1207 </table> 1208 </div> 1209 <div class="col-12 col-lg-6"> 1210 <span class="d-block border-below-orange">Point distribution per event type</span> 1211 <table 1212 class="table table-sm text-white table-striped text-small m-data-table mt-1 mb-1 custom-table-responsive" 1213 id="type_points_table" v-if="ready"> 1214 <thead> 1215 <tr> 1216 <th class="text-center">Type</th> 1217 <th class="text-center">Count</th> 1218 <th class="text-center">Total</th> 1219 <th class="text-center">Per Player</th> 1220 <th class="text-center">Points</th> 1221 <th class="text-center">Percentage</th> 1222 </tr> 1223 </thead> 1224 <tbody v-cloak> 1225 <tr v-for="(value, key) in (user_stats_per_gw?.type_grouped || [])" 1226 class="owned-row"> 1227 <td class="text-center">{{ player_stat_types[key].name }}</td> 1228 <td class="text-center">{{ player_stat_types[key].pp ? value.length : "-" }} 1229 </td> 1230 <td class="text-center">{{ getSum(value.map(i => parseInt(i.value))) }}</td> 1231 <td class="text-center"> 1232 {{ player_stat_types[key].pp ? rounded(getSum(value.map(i => 1233 parseInt(i.value))) / user_stats_per_gw.total_picks,2) : "-" }} 1234 </td> 1235 <td class="text-center"> 1236 {{ getSum(value.map( i=> parseInt(i.points * i.multiplier))) }}
1236 1237 </td> 1238 <td class="text-center"> 1239 {{ rounded(getSum(value.map( i=> parseInt(i.points * i.multiplier))) / 1240 user_stats_per_gw.overall_total * 100, 1) }}% 1241 </td> 1242 </tr> 1243 <tr class="bench-row"> 1244 <td class="text-center"><b>Hits</b></td> 1245 <td class="text-center">{{ user_stats_per_gw.points?.filter(i => i.hit_pts > 1246 0)?.length || '' }}</td> 1247 <td class="text-center">{{ (getSum(user_stats_per_gw?.points?.map(i => 1248 i.hit_pts) || [0]))/4 }}</td> 1249 <td></td> 1250 <td class="text-center">{{ -getSum(user_stats_per_gw?.points?.map(i => 1251 i.hit_pts) || [0]) }}</td> 1252 <td class="text-center">{{ rounded(-getSum((user_stats_per_gw?.points?.map(i => 1253 i.hit_pts)) || [0]) / (user_stats_per_gw?.overall_total || 1) * 100, 1) }}% 1254 </td> 1255 </tr> 1256 <tr class="nonowned-row"> 1257 <td class="text-center"><b>Total</b></td> 1258 <td class="text-center"></td> 1259 <td class="text-center"></td> 1260 <td class="text-center"></td> 1261 <td class="text-center">{{ user_stats_per_gw?.overall_total || 0 }}</td> 1262 <td></td> 1263 </tr> 1264 </tbody> 1265 </table> 1266 <div class="mt-1 d-flex mx-auto justify-content-center" id="csv_buttons2"> 1267 </div> 1268 </div> 1269 </div> 1270 <div class="row justify-content-center"> 1271 <div class="col-12 mb-2"> 1272 <span class="d-block border-below-orange">Detailed points returns per event type and 1273 GW</span> 1274 <div id="event_heatmap"> 1275 1276 </div> 1277 </div> 1278 </div> 1279 1280 </div> 1281 </div> 1282 </div> 1283 </div> 1284 1285 <div class="row" id="graph-section-wrapper"> 1286 <div class="col-12 mb-3"> 1287 <div class="card card-field border-dark bg-squad-card text-white"> 1288 <h5 class="card-header border-complement text-center scenario_title">Target Event Ratios</h5> 1289 <div class="scenario_detail"> 1290 Success ratio on defense/attack picks 1291 </div> 1292 <div class="card-body" v-if="ready" v-cloak> 1293 1294 <div class="row justify-content-center mb-2"> 1295 <div class="col-12 col-lg-8"> 1296 <table 1297 class="col-12 table table-sm text-white table-striped text-small m-data-table mt-1 mb-1 custom-table-responsive" 1298 id="key_events_ratio_table"> 1299 <thead> 1300 <tr> 1301 <th class="text-center">Target</th> 1302 <th class="text-center">Success</th> 1303 <th class="text-center">Picks</th> 1304 <th class="text-center highlighted-col">Success Ratio</th> 1305 <th class="text-center">Info</th> 1306 </tr> 1307 </thead> 1308 <tbody v-cloak> 1309 <tr v-for="(v, key) in user_picks_custom_stats" class="owned-row"> 1310 <td class="text-center">{{ key }}</td> 1311 <td class="text-center">{{ v.count }}</td> 1312 <td class="text-center">{{ v.total }}</td> 1313 <td class="text-center highlighted-col">{{ rounded(v.count / v.total * 100, 2) 1314 }}%</td> 1315 <td class="text-center">{{ v.info }}</td> 1316 </tr> 1317 </tbody> 1318 </table> 1319 </div> 1320 </div> 1321 <div class="row justify-content-center"> 1322 <div class="col-12 col-lg-8 row justify-content-center"> 1323 <div id="manager_comparison" class="col-12"> 1324 1325 </div> 1326 <div class="col-10 col-lg-8">
1327 <span class="text-small">Enter a team ID to compare</span> 1328 <div class="input-group mb-3"> 1329 <input type="number" class="form-control" placeholder="Team ID" id="new_id"> 1330 <div class="input-group-append"> 1331 <button class="btn btn-secondary" type="button" 1332 @click="add_ID_to_compare">Compare</button> 1333 </div> 1334 <div class="input-group-append"> 1335 <button class="btn btn-danger" type="button" 1336 @click="clear_rivals">Clear</button> 1337 </div> 1338 </div> 1339 </div> 1340 1341 </div> 1342 </div> 1343 <div class="row justify-content-center"> 1344 <div class="col-12 col-lg-8"> 1345 <span class="d-block border-below-orange">Success and returns out of key stats</span> 1346 <table 1347 class="col-12 table table-sm text-white text-small m-data-table mt-1 mb-1 custom-table-responsive p-0" 1348 id="all_picks_per_stat"> 1349 <thead> 1350 <tr> 1351 <th class="text-center text-muted text-xs">GID</th> 1352 <th class="text-center">GW</th> 1353 <th class="text-center">Player</th> 1354 <th class="text-center">Pos</th> 1355 <th class="text-center">Stat</th> 1356 <th class="text-center">Pts</th> 1357 <th class="text-center">Success</th> 1358 </tr> 1359 </thead> 1360 <tbody v-cloak> 1361 <template v-for="(v, key) in user_picks_custom_stats" 1362 v-if="v.hasOwnProperty('values')"> 1363 <tr :class="{'owned-row': p.success, 'nonowned-row': !p.success}" 1364 v-for="p in v.values"> 1365 <td class="text-center text-muted text-xs">{{ p.fixture }}</td> 1366 <td class="text-center">{{ p.gw }}</td> 1367 <td class="text-center">{{ p.name }}</td> 1368 <td class="text-center">{{ element_type[p.eltype].short }}</td> 1369 <td class="text-center">{{ key }}</td> 1370 <td class="text-center">{{ p.returns }}</td> 1371 <td class="text-center">{{ p.success ? "True" : "False"}}</td> 1372 </tr> 1373 </template> 1374 </tbody> 1375 <tfoot> 1376 <tr> 1377 <th class="text-center text-muted text-xs">GID</th> 1378 <th class="text-center">GW</th> 1379 <th class="text-center">Player</th> 1380 <th class="text-center">Pos</th> 1381 <th class="text-center">Stat</th> 1382 <th class="text-center">Pts</th> 1383 <th class="text-center">Success</th> 1384 </tr> 1385 </tfoot> 1386 </table> 1387 </div> 1388 </div> 1389 <div class="row justify-content-center"> 1390 <div class="row col-8 col-lg-6 justify-content-center" id="csv_buttons3"> 1391 </div> 1392 </div> 1393 </div> 1394 </div> 1395 </div> 1396 </div> 1397 1398 <div class="row" id="graph-section-wrapper"> 1399 <div class="col-12 mb-3"> 1400 <div class="card card-field border-dark bg-squad-card text-white"> 1401 <h5 class="card-header border-complement text-center scenario_title">Timings of ownership</h5> 1402 <div class="scenario_detail"> 1403 Time periods of owning your key players 1404 </div> 1405 <div class="card-body" v-if="ready" v-cloak> 1406 <div class="row"> 1407 <div class="col-12"> 1408 <div id="add_chart_button_group" class="justify-content-center row"> 1409 1410 <div class="col-8 col-lg-6 input-group mb-3"> 1411 <select class="custom-select" id="new_player_id"> 1412 <option v-for="p in user_player_sum" :value="p.id">{{ p.name }} ({{ 1413 p.points_total }})</option> 1414 </select> 1415 <div class="input-group-append"> 1416 <button class="btn btn-secondary" type="button" 1417 @click="add_player_plot">Plot</button> 1418 </div> 1419 </div> 1420 1421 </div> 1422 <div class="text-center">
1423 <span class="svg-legend-text mr-2"><svg width="20" height="20"> 1424 <g> 1425 <rect x="0" y="0" width="20" height="20" fill="#6fcfd6" opacity="0.3"> 1426 </rect> 1427 </g> 1428 </svg> Lineup</span> 1429 <span class="svg-legend-text"><svg width="20" height="20"> 1430 <g> 1431 <rect x="0" y="0" width="20" height="20" fill="#b995d2" opacity="0.3"> 1432 </rect> 1433 </g> 1434 </svg> Bench</span> 1435 </div> 1436 <div id="player_charts"> 1437 1438 </div> 1439 </div> 1440 </div> 1441 </div> 1442 </div> 1443 </div> 1444 </div> 1445 1446 <div class="row" id="graph-section-wrapper"> 1447 <div class="col-12 mb-3"> 1448 <div class="card card-field border-dark bg-squad-card text-white"> 1449 <h5 class="card-header border-complement text-center scenario_title">Ownership / Differential Analysis 1450 </h5> 1451 <div class="scenario_detail"> 1452 Gains and losses from key players 1453 </div> 1454 <div class="card-body" v-if="ready" v-cloak> 1455 <div class="row justify-content-center mb-1"> 1456 <div class="col-12 col-lg-4"> 1457 <div class="form-group"> 1458 <label>Sample tier</label> 1459 <div class="input-group"> 1460 <select class="custom-select" id="sample_selection" v-model="sample_selection"> 1461 <option v-for="(p, index) in sample_options" :value="index">{{ sample_label(p) }}</option> 1462 </select> 1463 <div class="input-group-append"> 1464 <button class="btn btn-secondary" type="button" 1465 @click="invalidate_cache(); redraw_graphs();">Select</button> 1466 </div> 1467 </div> 1468 1469 </div> 1470 </div> 1471 </div> 1472 <!-- <div class="row justify-content-center mb-3"> 1473 <div class="col-12 col-lg-4"> 1474 <span class="text-small">-OR- Enter a team ID to compare</span> 1475 <div class="input-group mb-3"> 1476 <input type="number" class="form-control" placeholder="Team ID" id="new_id_2"> 1477 <div class="input-group-append"> 1478 <button class="btn btn-secondary" type="button" @click="add_ID_to_compare">Compare</button> 1479 </div> 1480 </div> 1481 </div> 1482 </div> --> 1483 <div class="row justify-content-center mb-3"> 1484 <div class="col-12"> 1485 <div class="text-center"> 1486 <span class="svg-legend-text mr-2"><svg width="20" height="20"> 1487 <g> 1488 <rect x="0" y="0" width="20" height="20" fill="#6fcfd6" opacity="0.9"> 1489 </rect> 1490 </g> 1491 </svg> Gain</span> 1492 <span class="svg-legend-text"><svg width="20" height="20"> 1493 <g> 1494 <rect x="0" y="0" width="20" height="20" fill="#de6363" opacity="0.9"> 1495 </rect> 1496 </g> 1497 </svg> Loss</span> 1498 </div> 1499 <div class="text-center"> 1500 <div class="custom-control custom-switch text-small d-inline-block mr-3"> 1501 <input type="checkbox" class="custom-control-input" id="cumulative_switch" checked 1502 @change="refresh_y_axis()"> 1503 <label class="custom-control-label highlighted-checkbox" 1504 for="cumulative_switch">Cumulative</label> 1505 </div> 1506 <div class="custom-control custom-switch text-small d-inline-block mr-3"> 1507 <input type="checkbox" class="custom-control-input" id="net_switch" 1508 @change="refresh_y_axis()"> 1509 <label class="custom-control-label highlighted-checkbox" for="net_switch">Net 1510 Change</label> 1511 </div> 1512 </div>
1513 <div id="benefit-candlestick-chart"> 1514 1515 </div> 1516 <div class="row flex-grow-1 no-gutters text-small mb-1 pt-1 pb-1"> 1517 <div class="col-4 col-lg-2 mb-1" v-cloak> 1518 <div class="d-flex flex-column metric"> 1519 <div class="text-center p-0"> 1520 <div class="legend-box text-center"> 1521 GW 1522 </div> 1523 </div> 1524 <div 1525 class="setting-value text-center p-0 d-flex flex-row justify-content-center"> 1526 <span class="setting-value-text" id="hover_gw"> 1527 1528 </span> 1529 </div> 1530 </div> 1531 </div> 1532 <div class="col-4 col-lg-2 mb-1" v-cloak> 1533 <div class="d-flex flex-column metric"> 1534 <div class="text-center p-0"> 1535 <div class="legend-box text-center"> 1536 GW Gain 1537 </div> 1538 </div> 1539 <div 1540 class="setting-value text-center p-0 d-flex flex-row justify-content-center"> 1541 <span class="setting-value-text" id="hover_gw_gain"> 1542 1543 </span> 1544 </div> 1545 </div> 1546 </div> 1547 <div class="col-4 col-lg-2 mb-1" v-cloak> 1548 <div class="d-flex flex-column metric"> 1549 <div class="text-center p-0"> 1550 <div class="legend-box text-center"> 1551 GW Loss 1552 </div> 1553 </div> 1554 <div 1555 class="setting-value text-center p-0 d-flex flex-row justify-content-center"> 1556 <span class="setting-value-text" id="hover_gw_loss"> 1557 1558 </span> 1559 </div> 1560 </div> 1561 </div> 1562 <div class="col-6 col-lg-3 mb-1" v-cloak> 1563 <div class="d-flex flex-column metric"> 1564 <div class="text-center p-0"> 1565 <div class="legend-box text-center"> 1566 Top Gains 1567 </div> 1568 </div> 1569 <div 1570 class="setting-value text-center p-0 d-flex flex-row justify-content-center"> 1571 <span class="setting-value-text" id="hover_top_gains"> 1572 1573 </span> 1574 </div> 1575 </div> 1576 </div> 1577 <div class="col-6 col-lg-3 mb-1" v-cloak> 1578 <div class="d-flex flex-column metric"> 1579 <div class="text-center p-0"> 1580 <div class="legend-box text-center"> 1581 Top Losses 1582 </div> 1583 </div> 1584 <div 1585 class="setting-value text-center p-0 d-flex flex-row justify-content-center">
1586 <span class="setting-value-text" id="hover_top_losses"> 1587 1588 </span> 1589 </div> 1590 </div> 1591 </div> 1592 </div> 1593 </div> 1594 </div> 1595 <div class="row justify-content-center mb-3"> 1596 <div class="col-12 col-lg-8"> 1597 <span class="d-block border-below-orange">Gain Analysis</span> 1598 <table 1599 class="table table-sm text-white table-striped text-small m-data-table mt-1 mb-1 custom-table-responsive better_pages" 1600 id="gain_table"> 1601 <thead> 1602 <tr> 1603 <th class="text-center">GW</th> 1604 <th class="text-center">Player</th> 1605 <th class="text-center">Points</th> 1606 <th class="text-center">Mult</th> 1607 <th class="text-center">EO%</th> 1608 <th class="text-center">Net Effect</th> 1609 </tr> 1610 </thead> 1611 <tbody v-cloak> 1612 <tr class="owned-row" v-for="pair in user_ownership_gain_loss.gains"> 1613 <td class="text-center">{{ pair.gw }}</td> 1614 <td class="text-center">{{ fpl_element[pair.id].web_name }}</td> 1615 <td class="text-center">{{ pair.pts }}</td> 1616 <td class="text-center">{{ pair.multiplier }}</td> 1617 <td class="text-center">{{ pair.eo }}%</td> 1618 <td class="text-center">{{ rounded(pair.net,2) }}</td> 1619 </tr> 1620 </tbody> 1621 <tfoot> 1622 <tr> 1623 <th class="text-center">GW</th> 1624 <th class="text-center">Player</th> 1625 <th class="text-center">Points</th> 1626 <th class="text-center">Mult</th> 1627 <th class="text-center">EO%</th> 1628 <th class="text-center">Net Effect</th> 1629 </tr> 1630 </tfoot> 1631 </table> 1632 </div> 1633 <div class="col-12 col-lg-8"> 1634 <span class="text-smaller">This table shows your lineup picks, their corresponding points 1635 per week and your relative gain. Gain is equal to points multiplied with your ownership 1636 rate (Multiplier * 100 - EO), which shows you the relative gain compared to field 1637 average.</span> 1638 </div> 1639 </div> 1640 1641 <div class="row justify-content-center mb-3"> 1642 <div class="col-12 col-lg-8"> 1643 <span class="d-block border-below-orange">Loss Analysis (Key Players)</span> 1644 <table 1645 class="table table-sm text-white table-striped text-small m-data-table mt-1 mb-1 custom-table-responsive better_pages" 1646 id="loss_table"> 1647 <thead> 1648 <tr> 1649 <th class="text-center">GW</th> 1650 <th class="text-center">Player</th> 1651 <th class="text-center">Points</th> 1652 <th class="text-center">EO%</th> 1653 <th class="text-center">Net Effect</th> 1654 </tr> 1655 </thead> 1656 <tbody v-cloak> 1657 <tr class="owned-row" v-for="pair in user_ownership_gain_loss.losses"> 1658 <td class="text-center">{{ pair.gw }}</td> 1659 <td class="text-center">{{ fpl_element[pair.id].web_name }}</td> 1660 <td class="text-center">{{ pair.pts }}</td> 1661 <td class="text-center">{{ pair.eo }}%</td> 1662 <td class="text-center">{{ rounded(pair.net,2) }}</td> 1663 </tr> 1664 </tbody> 1665 <tfoot> 1666 <tr> 1667 <th class="text-center">GW</th> 1668 <th class="text-center">Player</th> 1669 <th class="text-center">Points</th> 1670 <th class="text-center">EO%</th> 1671 <th class="text-center">Net Effect</th> 1672 </tr> 1673 </tfoot> 1674 </table> 1675 </div> 1676 <div class="col-12 col-lg-8">
1677 <span class="text-smaller">This table shows players you haven't picked, their corresponding 1678 points per week and your relative loss. Loss is equal to points multiplied with 1679 effective ownership rate (EO), which shows you the relative loss compared to field 1680 average.</span> 1681 </div> 1682 </div> 1683 1684 <div class="row justify-content-center mb-1"> 1685 <div class="col-12 col-lg-8"> 1686 <span class="d-block border-below-orange">Risk Analysis</span> 1687 </div> 1688 </div> 1689 1690 <div class="row justify-content-center mb-1"> 1691 <div class="col-12 col-lg-4"> 1692 <div class="form-group"> 1693 <label>Sample tier</label> 1694 <select class="custom-select" id="sample_selection-2" v-model="sample_selection" 1695 @change="invalidate_cache(); redraw_graphs();"> 1696 <option v-for="(p, index) in sample_options" :value="index">{{ sample_label(p) }}</option> 1697 </select> 1698 </div> 1699 </div> 1700 </div> 1701 1702 <div class="row justify-content-center mb-3"> 1703 <div class="col-12"> 1704 <div id="gw-risk-chart"> 1705 1706 </div> 1707 <div class="row flex-grow-1 no-gutters text-small mb-1 pt-1 pb-1"> 1708 <div class="col-4 col-lg-2 mb-1" v-cloak> 1709 <div class="d-flex flex-column metric"> 1710 <div class="text-center p-0"> 1711 <div class="legend-box text-center"> 1712 GW 1713 </div> 1714 </div> 1715 <div 1716 class="setting-value text-center p-0 d-flex flex-row justify-content-center"> 1717 <span class="setting-value-text" id="risk_hover_gw"> 1718 1719 </span> 1720 </div> 1721 </div> 1722 </div> 1723 <div class="col-4 col-lg-2 mb-1" v-cloak> 1724 <div class="d-flex flex-column metric"> 1725 <div class="text-center p-0"> 1726 <div class="legend-box text-center"> 1727 Differential Rate <!-- Total your ownership divided by 1200% --> 1728 </div> 1729 </div> 1730 <div 1731 class="setting-value text-center p-0 d-flex flex-row justify-content-center"> 1732 <span class="setting-value-text" id="risk_hover_diff_rate"> 1733 1734 </span> 1735 </div> 1736 </div> 1737 </div> 1738 <div class="col-4 col-lg-2 mb-1" v-cloak> 1739 <div class="d-flex flex-column metric"> 1740 <div class="text-center p-0"> 1741 <div class="legend-box text-center"> 1742 Change <!-- Gain minus loss --> 1743 </div> 1744 </div> 1745 <div 1746 class="setting-value text-center p-0 d-flex flex-row justify-content-center">
1747 <span class="setting-value-text" id="risk_hover_reward"> 1748 1749 </span> 1750 </div> 1751 </div> 1752 </div> 1753 <div class="col-6 col-lg-3 mb-1" v-cloak> 1754 <div class="d-flex flex-column metric"> 1755 <div class="text-center p-0"> 1756 <div class="legend-box text-center"> 1757 Top Bets For 1758 </div> 1759 </div> 1760 <div 1761 class="setting-value text-center p-0 d-flex flex-row justify-content-center"> 1762 <span class="setting-value-text" id="risk_top_bets_for"> 1763 1764 </span> 1765 </div> 1766 </div> 1767 </div> 1768 <div class="col-6 col-lg-3 mb-1" v-cloak> 1769 <div class="d-flex flex-column metric"> 1770 <div class="text-center p-0"> 1771 <div class="legend-box text-center"> 1772 Top Bets Against 1773 </div> 1774 </div> 1775 <div 1776 class="setting-value text-center p-0 d-flex flex-row justify-content-center"> 1777 <span class="setting-value-text" id="risk_top_bets_against"> 1778 1779 </span> 1780 </div> 1781 </div> 1782 </div> 1783 </div> 1784 </div> 1785 <div class="col-12 col-lg-8"> 1786 <span class="text-smaller">This scatter plot shows your relative change to average and your 1787 differential (risk) percentage. This value is calculated based on how different your 1788 lineup compared to tier effective ownership. It is a measure of how much you are betting 1789 against the template.</span> 1790 </div> 1791 </div> 1792 1793 </div> 1794 </div> 1795 </div> 1796 </div> 1797 1798 1799 1800 <div class="row" id="graph-section-wrapper"> 1801 <div class="col-12 mb-3"> 1802 <div class="card card-field border-dark bg-squad-card text-white"> 1803 <h5 class="card-header border-complement text-center scenario_title">Transfer Quality Analysis</h5> 1804 <div class="scenario_detail"> 1805 A review of transfers with hindsight/foresight analysis 1806 </div> 1807 <div class="card-body" v-if="ready" v-cloak> 1808 <div class="row justify-content-center mb-3"> 1809 <div class="col-12"> 1810 <!-- <div class="text-center"> 1811 <span class="svg-legend-text mr-2"> 1812 <svg width="20" height="10"><g><line id="svg_1" y2="5" x2="20" y1="5" x1="0" stroke-width="1.5" stroke="#dbf7b4" stroke-dasharray="4,1" fill="none"></line></g></svg> Predicted 1813 </span> 1814 <span class="svg-legend-text mr-2"> 1815 <svg width="20" height="10"><g><line id="svg_1" y2="5" x2="20" y1="5" x1="0" stroke-width="1.5" stroke="#6fcfd6" fill="none"></line></g></svg> Realized 1816 </span> 1817 </div> --> 1818 1819 <div id="transfer-quality-plot"> 1820 1821 </div> 1822 1823 </div> 1824 1825 <div class="col-12 col-md-9"> 1826 <div class="text-center text-smaller">Comparison of predicted/realized points in following 5 1827 GWs (excluding hits)</div> 1828 <div v-if="transfer_analysis" class="row mt-1 mb-2"> 1829 <div class="col-4 text-center text-small">Hindsight Optimal Ratio <br><span 1830 class="rp-color">{{ transfer_analysis.hs_ratio }}</span></div> 1831 <div class="col-4 text-center text-small">Foresight Optimal Ratio <br><span 1832 class="xp-color">{{ transfer_analysis.fs_ratio }}</span></div> 1833 <div class="col-4 text-center text-small">Avg. Transfer xP Optimality <br><span 1834 class="outcome-color">{{ rounded(transfer_analysis.tr_optimality,1) }}%</span> 1835 </div> 1836 </div> 1837 <div class="text-center"> 1838 <div class="custom-control custom-switch text-small d-inline-block mr-3"> 1839 <input type="checkbox" class="custom-control-input" id="show_all_transfers" 1840 v-model="show_all_transfers"> 1841 <label class="custom-control-label highlighted-checkbox" 1842 for="show_all_transfers">Show All Transfers</label> 1843 </div> 1844 </div> 1845 <div class="table-responsive"> 1846 <table 1847 class="table table-sm text-white text-small mt-1 mb-1 custom-table-responsive p-0 narrow-td table-striped" 1848 id="transfer_quality"> 1849 <thead> 1850 <tr> 1851 <th class="text-center">GW</th> 1852 <th class="text-center">Range</th> 1853 <th class="text-center">Sold</th> 1854 <th class="text-center">Bought</th> 1855 <th class="text-center">rP Diff</th> 1856 <th class="text-center">xP Diff</th> 1857 <th class="text-center">Hindsight Optimal</th> 1858 <th class="text-center">Foresight Optimal</th> 1859 <th class="text-center">xP Optimality</th> 1860 </tr> 1861 </thead> 1862 <tbody> 1863 <tr v-for="entry in Object.values(transfer_analysis?.gws || []).flat()" 1864 v-if="show_all_transfers || (entry.best_xp_tr || entry.best_rp_tr) || (entry.hs_optimal && entry.fs_optimal)"> 1865 <td class="text-center">{{ entry.gw }}</td> 1866 <td class="text-center">{{ entry.gw_list }}</td> 1867 <td class="text-center">{{ fpl_element[entry.sold].web_name }}</td> 1868 <td class="text-center"> 1869 <div>{{ fpl_element[entry.bought].web_name }}</div> 1870 <div v-if="entry.best_xp" class="xp-color text-smaller">{{ entry.bought 1871 == entry.best_xp.id ? "FS Optimal" : "" }}</div> 1872 <div v-if="entry.best_rp" class="rp-color text-smaller">{{ entry.bought 1873 == entry.best_rp.id ? "HS Optimal" : "" }}</div> 1874 </td> 1875 <td class="text-center rp-color">{{ getWithSign(entry.rp_diff,0) }}</td> 1876 <td class="text-center xp-color">{{ getWithSign(entry.xp_diff,1) }}</td> 1877 <td class="text-center"> 1878 <div v-if="entry.best_rp">{{ entry.best_rp.web_name }}</div> 1879 <div v-if="entry.best_rp"><b>rp Diff: <span class="rp-color">{{ 1880 getWithSign(entry.best_rp.rp_diff, 0) }}</span></b></div> 1881 <div v-if="entry.best_rp">xP Diff: {{ getWithSign(entry.best_rp.xp_diff, 1882 1) }}</div> 1883 </td> 1884 <td class="text-center"> 1885 <div v-if="entry.best_xp">{{ entry.best_xp.web_name }}</div> 1886 <div v-if="entry.best_xp">rp Diff: {{ getWithSign(entry.best_xp.rp_diff, 1887 0) }}</div> 1888 <div v-if="entry.best_xp"><b>xP Diff: <span class="xp-color">{{ 1889 getWithSign(entry.best_xp.xp_diff, 1) }}</span></b></div> 1890 </td> 1891 <td class="text-center">{{ entry.xp_ratio }}</td> 1892 </tr> 1893 </tbody> 1894 </table> 1895 </div> 1896 </div> 1897 </div> 1898 1899 </div> 1900 </div> 1901 </div> 1902 </div> 1903 1904 1905 1906 1907 1908 1909 <div class="row" id="graph-section-wrapper"> 1910 <div class="col-12 mb-3"> 1911 <div class="card card-field border-dark bg-squad-card text-white"> 1912 <h5 class="card-header border-complement text-center scenario_title">Team / Opposition Analysis</h5> 1913 <div class="scenario_detail"> 1914 Stats about players picked from teams and played against opposition 1915 </div> 1916 <div class="card-body" v-if="ready" v-cloak> 1917 <div class="col-12 col-md-6"> 1918 <div class="row justify-content-center mb-3"> 1919 <div class="col-12"> 1920 <!-- <span class="d-block border-below-orange">Team Picks</span> --> 1921 <table 1922 class="table table-sm text-white table-striped text-small m-data-table mt-1 mb-1 custom-table-responsive better_pages" 1923 id="total_gain_loss_table" style="width: 100%"> 1924 <thead> 1925 <tr> 1926 <!-- <th class="text-center text-muted">ID</th> --> 1927 <th class="text-center">Team</th> 1928 <th class="text-center">Played For</th> 1929 <th class="text-center">Points For</th> 1930 <th class="text-center">For Percentage</th> 1931 <th class="text-center">Played Against</th> 1932 <th class="text-center">Points Against</th> 1933 <th class="text-center">Against Percentage</th> 1934 </tr> 1935 </thead> 1936 <tbody v-cloak> 1937 <tr> 1938 <td class="text-center"></td> 1939 </tr> 1940 </tbody> 1941 <tfoot> 1942 <tr> 1943 <!-- <th class="text-center text-muted">ID</th> --> 1944 <th class="text-center"></th> 1945 <th class="text-center"></th> 1946 <th class="text-center"></th> 1947 <th class="text-center"></th> 1948 <th class="text-center"></th> 1949 <th class="text-center"></th> 1950 <th class="text-center"></th> 1951 <th class="text-center"></th> 1952 </tr> 1953 </tfoot> 1954 </table> 1955 </div> 1956 <div class="row col-8 col-lg-6 justify-content-center" id="csv_buttons6"> 1957 </div> 1958 </div> 1959 </div> 1960 </div> 1961 </div> 1962 </div> 1963 </div> 1964 1965 <div class="row" id="graph-section-wrapper"> 1966 <div class="col-12 mb-3"> 1967 <div class="card card-field border-dark bg-squad-card text-white"> 1968 <h5 class="card-header border-complement text-center scenario_title">Position / Price Category Analysis 1969 </h5> 1970 <div class="scenario_detail"> 1971 Total points per position and price category 1972 </div> 1973 <div class="card-body" v-if="ready" v-cloak> 1974 <div class="row justify-content-center mb-3"> 1975 <div class="col-12 col-lg-8"> 1976 <div id="type_heatmap"> 1977 1978 </div> 1979 </div> 1980 <div class="text-xs text-center"> 1981 Price categories (Budget, Mid-Price, Premieum) are as follows: GK Below 5, 5-5.5, Above 5.5 1982 - DF Below 5, 5-6, Above 6 - MD Below 7.5, 7.5-10, Above 10 - FW Below 7.5, 7.5-10, Above 10 1983 </div> 1984 </div> 1985 <div class="row justify-content-center mb-3"> 1986 <div class="col-12 col-log-8">
1987 <span class="d-block border-below-orange">Point Distribution Treemap (Gain)</span> 1988 <div class="text-center"> 1989 <div class="custom-control custom-switch text-small d-inline-block mr-3"> 1990 <input type="checkbox" class="custom-control-input" id="actual_gain_switch" 1991 @change="refresh_point_dist()"> 1992 <label class="custom-control-label highlighted-checkbox" 1993 for="actual_gain_switch">Gain (Effective Points)</label> 1994 </div> 1995 </div> 1996 <div id="points_tree_map"> 1997 1998 </div> 1999 </div> 2000 <div class="text-xs text-center"> 2001 Gain is equal to points multiplied with your ownership rate (Multiplier * 100 - EO), which 2002 shows you the relative gain compared to field average. 2003 </div> 2004 </div> 2005 <div class="row justify-content-center mb-3"> 2006 <div class="col-12 col-log-8"> 2007 <span class="d-block border-below-orange">Point Distribution Treemap (Effective Loss)</span> 2008 <div id="points_tree_map_loss"> 2009 2010 </div> 2011 </div> 2012 <div class="text-xs text-center"> 2013 Loss is equal to points against multiplied with effective ownership rate, which shows you 2014 the relative loss compared to field average. 2015 </div> 2016 </div> 2017 </div> 2018 </div> 2019 </div> 2020 </div> 2021 2022 2023 2024 2025 <div class="row" id="graph-section-wrapper"> 2026 <div class="col-12 mb-3"> 2027 <div class="card card-field border-dark bg-squad-card text-white"> 2028 <h5 class="card-header border-complement text-center scenario_title">Formation Analysis</h5> 2029 <div class="scenario_detail"> 2030 Chosen formations and returns 2031 </div> 2032 <div class="card-body" v-if="ready" v-cloak> 2033 <div class="row justify-content-center mb-3"> 2034 <div class="col-12 col-lg-8"> 2035 <table 2036 class="table table-sm text-white table-striped text-small m-data-table mt-1 mb-1 custom-table-responsive" 2037 id="formation_analysis_table" v-if="ready"> 2038 <thead> 2039 <tr> 2040 <th class="text-center">Position</th> 2041 <th class="text-center">Picked (GW)</th> 2042 <th class="text-center">Games</th> 2043 <th class="text-center">Points</th> 2044 <th class="text-center">Points per pick (GW)</th> 2045 <th class="text-center">Points per game</th> 2046 <th class="text-center">Average pick</th> 2047 </tr> 2048 </thead> 2049 <tbody v-cloak> 2050 <tr v-for="(value, key) in user_formation_analysis_by_eltype" class="owned-row"> 2051 <td class="text-center">{{ element_type[key].name }}</td> 2052 <td class="text-center">{{ value.picked }}</td> 2053 <td class="text-center">{{ value.games }}</td> 2054 <td class="text-center">{{ value.points }}</td> 2055 <td class="text-center">{{ rounded(value.ppp,2) }}</td> 2056 <td class="text-center">{{ rounded(value.ppg,2) }}</td> 2057 <td class="text-center">{{ rounded(value.avg_pick,2) }}</td> 2058 </tr> 2059 </tbody> 2060 </table> 2061 <div class="text-center avg-formation">Average Formation:
2062 <span v-for="(value, key) in user_formation_analysis_by_eltype" v-if="key != 1"> 2063 {{ rounded(value.avg_pick,2) }} <span v-if="key != 4">-</span> 2064 </span> 2065 </div> 2066 </div> 2067 </div> 2068 <div class="row justify-content-center"> 2069 <div class="col-12 col-lg-8"> 2070 <span class="d-block border-below-orange">Performance per formation type (after 2071 auto-sub)</span> 2072 <table 2073 class="table table-sm text-white table-striped text-small m-data-table mt-1 mb-1 custom-table-responsive" 2074 id="formation_analysis_sum_table" v-if="ready"> 2075 <thead> 2076 <tr> 2077 <th class="text-center">Formation</th> 2078 <th class="text-center">Picked</th> 2079 <th class="text-center">Points</th> 2080 <th class="text-center">Average Pts</th> 2081 </tr> 2082 </thead> 2083 <tbody v-cloak> 2084 <tr v-for="value in user_formation_analysis_by_gw.sorted" class="owned-row"> 2085 <td class="text-center">{{ value.formation }}</td> 2086 <td class="text-center">{{ value.count }}</td> 2087 <td class="text-center">{{ value.points }}</td> 2088 <td class="text-center">{{ rounded(value.avg, 2) }}</td> 2089 </tbody> 2090 </table> 2091 </div> 2092 </div> 2093 </div> 2094 </div> 2095 </div> 2096 </div> 2097 2098 <div class="row" id="graph-section-wrapper"> 2099 <div class="col-12 mb-3"> 2100 <div class="card card-field border-dark bg-squad-card text-white"> 2101 <h5 class="card-header border-complement text-center scenario_title">Export</h5> 2102 <div class="card-body" v-if="ready" v-cloak> 2103 <div class="row justify-content-center mb-3"> 2104 <button class="btn btn-secondary mr-2" onclick="export_raw_data()">Download Raw Data</button> 2105 <button class="btn btn-info mr-2" onclick="export_all_data()">Download Extended Data</button> 2106 </div> 2107 </div> 2108 </div> 2109 </div> 2110 </div> 2111 2112 2113 2114 2115 2116 <!-- user_stats_per_gw --> 2117 2118 <div class="row" v-cloak> 2119 <div class="col-12 mb-3"> 2120 <div class="card border-dark bg-squad-card text-white qa"> 2121 <!-- <div class="card-body text-left"> 2122 <h5>Note</h5> 2123 <p>Data on this page is refreshed every 6 hours. It is possible that some values/graphs do not function properly while a GW is ongoing.</p> 2124 </div> --> 2125 <div class="card-footer text-white disclaimer"> 2126 The information contained on this website is for general information purposes only. Any reliance you 2127 place on this information is strictly at your own risk. 2128 </div> 2129 </div> 2130 </div> 2131 </div> 2132 2133</main> 2134
2135<script> 2136 let ts = 20260920183004; 2137 let off_season = false; 2138</script>
2138 2139
2140<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
2140 2141<!-- use version 0.20.2 -->
2142<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.20.2/package/dist/xlsx.full.min.js"></script>
2142 2143 2144 </div> 2145 2146 2147<div class="container mb-3 mt-3"> 2148 <div class="row gray-bg no-gutters"> 2149 <div class="banner-link col-12 col-md-6" style="border: 1px solid #343436;"> 2150 <!-- <img src="/static/images/ffhub.png" />Partnered with Fantasy Football Hub 2151 <a href="https://fantasyfootballhub.co.uk/" class="stretched-link" target="_blank"></a> --> 2152 </div> 2153 <div class="banner-link col-12 col-md-6" style="border: 1px solid #343436;"> 2154 <!-- <img src="/static/images/review.png" />EV data is courtesy of FPL Review 2155 <a href="https://fplreview.com/" class="stretched-link" target="_blank"></a> --> 2156 </div> 2157 </div> 2158</div> 2159 2160
2161<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
vendor: 1 bytes, line 2161
2161
2162<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.js" 2163 integrity="sha512-M17tsaj3tHw5m/gI+8XjDLTuPZ0cpTofhFLJUT9niFa/DK8WAhsSLW764iSaaXoAoivXEFUP6VxvpiahJPQ4fg==" 2164 crossorigin="anonymous"></script>
vendor: 1 bytes, line 2164
2164
2165<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js" 2166 integrity="sha512-WNLxfP/8cVYL9sj8Jnp6et0BkubLP31jhTG9vhL/F5uEZmg5wEzKoXp1kJslzPQWwPT1eyMiSxlKCgzHLOTOTQ==" 2167 crossorigin="anonymous"></script>
vendor: 1 bytes, line 2167
2167
2168<script src="https://fastly.jsdelivr.net/npm/[email protected]/lodash.min.js" 2169 integrity="sha256-ur/YlHMU96MxHEsy3fHGszZHas7NzH4RQlD4tDVvFhw=" crossorigin="anonymous"></script>
vendor: 1 bytes, line 2169
2169
2170<script src="https://fastly.jsdelivr.net/npm/[email protected]"></script>
2170 2171<!--
2171<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
vendor: 1 bytes, line 2171
2171
2172<script> 2173 Vue.config.performance = true; 2174 Vue.prototype.$log = console.log; 2175</script>
2175 -->
2176<script src="https://cdnjs.cloudflare.com/ajax/libs/jstat/1.9.5/jstat.js" 2177 integrity="sha512-D5uf20+sRi7oJxHzrp6LZDaY/IrSFIKmaQ7bOQA6V1Z+Jr9DOFKodR3RyYwdeEoGUZlfz76XQlDy5/TWdyKz9Q==" 2178 crossorigin="anonymous" referrerpolicy="no-referrer"></script>
vendor: 1 bytes, line 2178
2178
2179<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js" 2180 integrity="sha512-tVYBzEItJit9HXaWTPo8vveXlkK62LbA+wez9IgzjTmFNLMBO1BEYladBw2wnM3YURZSMUyhayPCoLtjGh84NQ==" 2181 crossorigin="anonymous" referrerpolicy="no-referrer"></script>
2181 2182 2183
2184<script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.js" 2185 crossorigin="anonymous"></script>
vendor: 1 bytes, line 2185
2185
2186<script src="https://fastly.jsdelivr.net/npm/[email protected]/vue-cookies.js" 2187 integrity="sha256-pdSyqKvUOsiAZVUhatSOyW3Wom0l7ABtO8w7LjPA3vU=" crossorigin="anonymous"></script>
2187 2188<!--
2188<script type="text/javascript" src="url_for('static', filename='3rdparty/vis-timeline-graph2d.min.js')"></script>
2188 --> 2189 2190<!--
2190<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
vendor: 1 bytes, line 2190
2190
2191<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
vendor: 1 bytes, line 2191
2191
2192<script src="https://cdn.datatables.net/fixedcolumns/3.3.2/js/dataTables.fixedColumns.min.js"></script>
2192 --> 2193<!--
2193<script src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>
2193 --> 2194<!--
2194<script src="https://cdn.datatables.net/responsive/2.2.6/js/responsive.bootstrap4.min.js"></script>
2194 --> 2195<!--
2195<script src="https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js"></script>
2195 --> 2196<!--
2196<script src="https://cdn.datatables.net/searchbuilder/1.0.1/js/dataTables.searchBuilder.min.js"></script>
2196 --> 2197
2198<script type="text/javascript" 2199 src="https://cdn.datatables.net/v/bs4/dt-1.10.23/b-1.6.5/b-colvis-1.6.5/b-html5-1.6.5/fc-3.3.2/fh-3.1.7/r-2.2.6/sp-1.2.2/datatables.min.js"></script>
2199 2200
2201<script src="https://fastly.jsdelivr.net/npm/[email protected]"></script>
2201 2202
2203<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.js" 2204 integrity="sha512-2ypsPur7qcA+2JjmmIJR1c4GWFqTLIe1naXXplraMg0aWyTOyAMpOk+QL+ULpzwrO/GdwA3qB3FhVyyiR8gdhw==" 2205 crossorigin="anonymous" referrerpolicy="no-referrer"></script>
2205 2206
2207<script src="https://fastly.jsdelivr.net/npm/[email protected]/fernetBrowser.js"></script>
2207 2208
2209<script> 2210 let repo_name = "" 2211 let season = "2026-27"; 2212 let gw = "5"; 2213 let next_gw = "5"; 2214 let date = ""; 2215 let lastupdate = ""; 2216 let listdates = [ 2217 ]; 2218 let is_active = false ; 2219 let active_gw = -1 ; 2220</script>
2220 2221 2222
2223<script src="/static/js/main.js?ts=20260920183004"></script>
2223 2224
2225<script src="/static/js/sampling_utils.js?ts=20260920183004"></script>
2225 2226
2227<script src="/static/js/highlights.js?ts=20260920183004"></script>
2227 2228 2229
2230<script> 2231 $('.alert').alert() 2232</script>
2232 2233
2234<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"ebff31e0ee5346329299366b4d5cf8b1","r":1,"spa":2}' crossorigin="anonymous"></script>
2234 2235</body> 2236 2237<!-- <div class="text-muted text-center mx-auto text-small mb-1 c-footnote">Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div> --> 2238<div class="mx-auto text-center d-block text-muted text-small mb-1">Last update: </div> 2239 2240</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.