help@rskworld.in +91 93305 39277
RSK World
  • Home
  • Development
    • Web Development
    • Mobile Apps
    • Software
    • Games
    • Project
  • Technologies
    • Data Science
    • AI Development
    • Cloud Development
    • Blockchain
    • Cyber Security
    • Dev Tools
    • Testing Tools
  • Blog
  • About
  • Contact

Theme Settings

Color Scheme
Display Options
Font Size
100%
Back to Project
RSK World
sports-analysis
/
assets
/
js
RSK World
sports-analysis
Sports Analysis Dataset - Game Footage + Player Tracking + Event Annotations + OpenCV + Video Analysis
js
  • dashboard.js10.1 KB
  • explorer.js7.8 KB
  • main.js3.7 KB
dashboard.js
assets/js/dashboard.js
Raw Download
Find: Go to:
/*
RSK World
Founder: Molla Samser
Designer & Tester: Rima Khatun
Email: help@rskworld.in
Phone: +91 93305 39277
Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147
Website: https://rskworld.in/
*/

// Load data from metadata
let gamesData = [];

async function loadDashboardData() {
    try {
        const response = await fetch('data/metadata/games_metadata.json');
        const metadata = await response.json();
        gamesData = metadata.games;
        
        // Load events data
        const eventsData = [];
        for (const game of gamesData) {
            if (game.events_file) {
                try {
                    const eventsResponse = await fetch(game.events_file);
                    const events = await eventsResponse.json();
                    eventsData.push(...events.events);
                } catch (e) {
                    console.warn(`Could not load events for ${game.game_id}`);
                }
            }
        }
        
        // Load performance data
        let performanceData = [];
        try {
            const perfResponse = await fetch('data/annotations/performance_metrics_001.csv');
            const perfText = await perfResponse.text();
            performanceData = parseCSV(perfText);
        } catch (e) {
            console.warn('Could not load performance data');
        }
        
        updateStatistics(metadata, eventsData, performanceData);
        renderCharts(eventsData, metadata, performanceData);
        renderGamesTable(metadata);
        renderTopPerformers(performanceData);
    } catch (error) {
        console.error('Error loading dashboard data:', error);
        // Use sample data if files can't be loaded
        loadSampleData();
    }
}

function parseCSV(text) {
    const lines = text.split('\n').filter(line => line.trim() && !line.startsWith('#'));
    const headers = lines[0].split(',');
    const data = [];
    
    for (let i = 1; i < lines.length; i++) {
        const values = lines[i].split(',');
        const obj = {};
        headers.forEach((header, index) => {
            obj[header.trim()] = values[index] ? values[index].trim() : '';
        });
        data.push(obj);
    }
    
    return data;
}

function updateStatistics(metadata, events, performance) {
    document.getElementById('totalGames').textContent = metadata.dataset_info.total_games || gamesData.length;
    document.getElementById('totalPlayers').textContent = performance.length || 16;
    document.getElementById('totalEvents').textContent = events.length || 7;
    document.getElementById('totalDuration').textContent = gamesData.reduce((sum, game) => sum + (game.duration_minutes || 0), 0);
}

function renderCharts(events, metadata, performance) {
    // Events Distribution Chart
    const eventsCount = {};
    events.forEach(event => {
        eventsCount[event.event_type] = (eventsCount[event.event_type] || 0) + 1;
    });
    
    new Chart(document.getElementById('eventsChart'), {
        type: 'doughnut',
        data: {
            labels: Object.keys(eventsCount),
            datasets: [{
                data: Object.values(eventsCount),
                backgroundColor: [
                    '#0d6efd',
                    '#dc3545',
                    '#ffc107',
                    '#28a745',
                    '#17a2b8'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true
        }
    });
    
    // Sports Coverage Chart
    const sportsCount = {};
    gamesData.forEach(game => {
        sportsCount[game.sport] = (sportsCount[game.sport] || 0) + 1;
    });
    
    new Chart(document.getElementById('sportsChart'), {
        type: 'bar',
        data: {
            labels: Object.keys(sportsCount),
            datasets: [{
                label: 'Number of Games',
                data: Object.values(sportsCount),
                backgroundColor: '#28a745'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });
    
    // Performance Metrics Chart
    if (performance.length > 0) {
        const topPerformers = performance
            .sort((a, b) => parseFloat(b.distance_covered_km || 0) - parseFloat(a.distance_covered_km || 0))
            .slice(0, 5);
        
        new Chart(document.getElementById('performanceChart'), {
            type: 'line',
            data: {
                labels: topPerformers.map(p => `Player ${p.player_id}`),
                datasets: [
                    {
                        label: 'Distance (km)',
                        data: topPerformers.map(p => parseFloat(p.distance_covered_km || 0)),
                        borderColor: '#0d6efd',
                        backgroundColor: 'rgba(13, 110, 253, 0.1)',
                        yAxisID: 'y'
                    },
                    {
                        label: 'Avg Speed (km/h)',
                        data: topPerformers.map(p => parseFloat(p.speed_avg_kmh || 0)),
                        borderColor: '#28a745',
                        backgroundColor: 'rgba(40, 167, 69, 0.1)',
                        yAxisID: 'y1'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                scales: {
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left'
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        grid: {
                            drawOnChartArea: false
                        }
                    }
                }
            }
        });
    }
}

function renderGamesTable(metadata) {
    const tbody = document.getElementById('gamesTableBody');
    tbody.innerHTML = '';
    
    gamesData.forEach(game => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${game.game_id}</td>
            <td><span class="badge bg-primary">${game.sport}</span></td>
            <td>${game.date}</td>
            <td>${game.venue}</td>
            <td>${game.duration_minutes}</td>
            <td>${getPlayerCount(game.game_id)}</td>
            <td>${getEventCount(game.game_id)}</td>
            <td>
                <button class="btn btn-sm btn-primary btn-action" onclick="viewGame('${game.game_id}')">
                    <i class="fas fa-eye"></i> View
                </button>
            </td>
        `;
        tbody.appendChild(row);
    });
}

function renderTopPerformers(performance) {
    const container = document.getElementById('topPerformers');
    
    if (performance.length === 0) {
        container.innerHTML = '<p class="text-muted">No performance data available</p>';
        return;
    }
    
    const sorted = performance
        .sort((a, b) => parseFloat(b.distance_covered_km || 0) - parseFloat(a.distance_covered_km || 0))
        .slice(0, 5);
    
    container.innerHTML = sorted.map((player, index) => `
        <div class="performer-item">
            <div class="performer-rank">#${index + 1}</div>
            <div class="performer-info">
                <div class="performer-name">Player ${player.player_id} - ${player.team}</div>
                <div class="performer-stats">
                    Jersey #${player.jersey_number} | Speed: ${player.speed_avg_kmh} km/h
                </div>
            </div>
            <div class="performer-value">${player.distance_covered_km} km</div>
        </div>
    `).join('');
}

function getPlayerCount(gameId) {
    // This would normally fetch from tracking data
    return gameId === 'game_001' ? '8' : '4';
}

function getEventCount(gameId) {
    // This would normally fetch from events data
    return gameId === 'game_001' ? '5' : '2';
}

function viewGame(gameId) {
    alert(`Viewing details for ${gameId}\n\nThis would open a detailed game view page.`);
    // In a full implementation, this would navigate to a game detail page
}

function exportData(format) {
    if (format === 'csv') {
        let csv = 'Game ID,Sport,Date,Venue,Duration (min)\n';
        gamesData.forEach(game => {
            csv += `${game.game_id},${game.sport},${game.date},${game.venue},${game.duration_minutes}\n`;
        });
        downloadFile(csv, 'games-data.csv', 'text/csv');
    } else if (format === 'json') {
        const json = JSON.stringify(gamesData, null, 2);
        downloadFile(json, 'games-data.json', 'application/json');
    }
}

function downloadFile(content, filename, mimeType) {
    const blob = new Blob([content], { type: mimeType });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}

function loadSampleData() {
    // Fallback sample data
    gamesData = [
        {
            game_id: 'game_001',
            sport: 'Football',
            date: '2026-01-15',
            venue: 'Stadium A',
            duration_minutes: 90
        },
        {
            game_id: 'game_002',
            sport: 'Basketball',
            date: '2026-01-20',
            venue: 'Arena B',
            duration_minutes: 48
        }
    ];
    updateStatistics({ dataset_info: { total_games: 2 } }, [], []);
    renderCharts([], { games: gamesData }, []);
    renderGamesTable({ games: gamesData });
}

// Initialize dashboard when page loads
document.addEventListener('DOMContentLoaded', loadDashboardData);

303 lines•10.1 KB
javascript

About RSK World

Founded by Molla Samser, with Designer & Tester Rima Khatun, RSK World is your one-stop destination for free programming resources, source code, and development tools.

Founder: Molla Samser
Designer & Tester: Rima Khatun

Development

  • Game Development
  • Web Development
  • Mobile Development
  • AI Development
  • Development Tools

Legal

  • Terms & Conditions
  • Privacy Policy
  • Disclaimer

Contact Info

Nutanhat, Mongolkote
Purba Burdwan, West Bengal
India, 713147

+91 93305 39277

hello@rskworld.in
support@rskworld.in

© 2026 RSK World. All rights reserved.

Content used for educational purposes only. View Disclaimer