Jacky/JKTV-online
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2.0.0 Alpha: Data Refinery

Browse Source
This commit is contained in:
Jacky
2026-08-08 21:31:56 +08:00
parent fa75081d4d
commit 562775e5db
48 changed files with 4172 additions and 661 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/templates/players/profile.html
+36 -5
View File
@@ -213,6 +213,8 @@
</div>
</div>
{% include "players/_career_dashboard.html" %}
<!-- 2. Charts Section (Middle) -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Trend Chart -->
@@ -221,8 +223,11 @@
<h3 class="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
<span>📈</span> 近期表现走势 (Performance Trend)
</h3>
<div class="flex bg-gray-100 dark:bg-slate-700 rounded-lg p-1">
<button class="px-3 py-1 text-xs font-bold rounded-md bg-white dark:bg-slate-600 shadow-sm text-gray-800 dark:text-white">Recent 20</button>
<div id="trend-period-buttons" class="flex flex-wrap bg-gray-100 dark:bg-slate-700 rounded-lg p-1">
<button onclick="loadTrendPeriod('last_10', this)" class="px-3 py-1 text-xs font-bold rounded-md text-gray-500">10</button>
<button onclick="loadTrendPeriod('last_20', this)" class="trend-active px-3 py-1 text-xs font-bold rounded-md bg-white dark:bg-slate-600 shadow-sm text-gray-800 dark:text-white">20</button>
<button onclick="loadTrendPeriod('last_30', this)" class="px-3 py-1 text-xs font-bold rounded-md text-gray-500">30</button>
<button onclick="loadTrendPeriod('career', this)" class="px-3 py-1 text-xs font-bold rounded-md text-gray-500">Career</button>
</div>
</div>
<div class="relative h-80 w-full">
@@ -256,7 +261,7 @@
</div>
{% macro detail_item(label, value, key, format_str='{:.2f}', sublabel=None, count_label=None) %}
{% set dist = distribution[key] if distribution else None %}
{% set dist = distribution[key] if distribution and distribution[key] else None %}
<div class="flex flex-col group relative h-full p-2 rounded hover:bg-gray-50 dark:hover:bg-slate-700/30 transition-colors">
<div class="flex justify-between items-center mb-1">
<span class="text-xs font-bold text-gray-400 uppercase tracking-wider truncate max-w-[150px]" title="{{ label }}">{{ label }}</span>
@@ -273,7 +278,11 @@
<div class="flex justify-between items-end mb-1">
<div class="flex items-baseline gap-1">
<span class="text-lg font-black text-gray-900 dark:text-white font-mono">
{{ format_str.format(value if value is not none else 0) }}
{% if value is none %}
<span class="text-sm text-gray-400">N/A</span>
{% else %}
{{ format_str.format(value) }}
{% endif %}
</span>
{% if sublabel %}
<span class="text-[10px] text-gray-400">{{ sublabel }}</span>
@@ -834,6 +843,7 @@
{% block scripts %}
<script>
let trendChartInstance = null;
const profileSteamId = "{{ player.steam_id_64 }}";
function resetZoom() {
if (trendChartInstance) {
@@ -853,8 +863,29 @@ function likeComment(commentId, btn) {
});
}
function loadTrendPeriod(periodKey, button) {
fetch(`/players/${profileSteamId}/charts_data?period=${periodKey}`)
.then(response => response.json())
.then(data => {
if (!trendChartInstance) return;
trendChartInstance.data.labels = data.trend.labels;
trendChartInstance.data.datasets[0].data = data.trend.values;
trendChartInstance.data.datasets[1].data = Array(data.trend.labels.length).fill(1.5);
trendChartInstance.data.datasets[2].data = Array(data.trend.labels.length).fill(1.0);
trendChartInstance.data.datasets[3].data = Array(data.trend.labels.length).fill(0.6);
trendChartInstance.update();
document.querySelectorAll('#trend-period-buttons button').forEach(item => {
item.classList.remove('bg-white', 'dark:bg-slate-600', 'shadow-sm', 'text-gray-800', 'dark:text-white');
item.classList.add('text-gray-500');
});
button.classList.remove('text-gray-500');
button.classList.add('bg-white', 'dark:bg-slate-600', 'shadow-sm', 'text-gray-800', 'dark:text-white');
});
}
document.addEventListener('DOMContentLoaded', function() {
const steamId = "{{ player.steam_id_64 }}";
const steamId = profileSteamId;
fetch(`/players/${steamId}/charts_data`)
.then(response => response.json())