Diferencia entre revisiones de «MediaWiki:Common.js»

/* ===== MEDIAWIKI COMMON.JS - PANEL CON EXTENSIÓN CHART ===== */
$(function() {
    // 1. Sistema básico de avatares
    if (mw.config.exists('wgUserAvatar')) {
        var avatarUrl = mw.util.getUrl('File:' + mw.config.get('wgUserAvatar'), {
            width: 24
        });
        $('#pt-userpage, .mw-userlink').prepend(
            $('<img>').addClass('user-avatar').attr('src', avatarUrl)
        );
    }

    // 2. Panel de administración (solo para admins)
    if (mw.config.get('wgUserGroups').includes('sysop')) {
        initAdminPanel();
    }

    // 3. Cargar recursos necesarios
    loadRequiredResources();
});

/* ===== FUNCIONES PRINCIPALES ===== */
function initAdminPanel() {
    // Añadir enlace al panel
    mw.util.addPortletLink(
        'p-tb',
        mw.util.getUrl('Special:Analytics'),
        '<i class="fas fa-chart-pie"></i> Panel',
        't-adminpanel',
        'Panel de administración'
    );

    // Mejorar dashboard de Analytics
    if (mw.config.get('wgCanonicalSpecialPageName') === 'Analytics') {
        enhanceAnalyticsDashboard();
    }

    // Cargar estadísticas
    loadChartStats();
}

/* ===== IMPLEMENTACIÓN CON EXTENSIÓN CHART ===== */
function enhanceAnalyticsDashboard() {
    // 1. Crear contenedores para gráficos
    $('#mw-content-text').prepend(
        '<div class="chart-grid">' +
        '<div class="chart-container" id="edits-chart"></div>' +
        '<div class="chart-container" id="users-chart"></div>' +
        '<div class="chart-container" id="pages-chart"></div>' +
        '</div>'
    );

    // 2. Cargar gráficos
    loadChart('edits-chart', 'Data:EditsChart.json');
    loadChart('users-chart', 'Data:UsersChart.json');
    loadChart('pages-chart', 'Data:PagesChart.json');

    // 3. Añadir controles
    addChartControls();
}

function loadChart(containerId, chartDefinition) {
    $.get(mw.util.wikiScript('api'), {
        action: 'parse',
        text: '{{#chart:' + chartDefinition + '}}',
        prop: 'text',
        format: 'json'
    }).done(function(data) {
        $('#' + containerId).html(data.parse.text['*']);
    });
}

function addChartControls() {
    var controls = [
        { id: 'day', text: 'Últimas 24h' },
        { id: 'week', text: 'Última semana' },
        { id: 'month', text: 'Último mes' }
    ];

    var $controls = $('<div class="chart-time-controls"></div>');
    
    controls.forEach(function(control) {
        $controls.append(
            '<button class="time-period-btn" data-period="' + control.id + '">' +
            control.text + '</button>'
        );
    });

    $('.chart-grid').before($controls);

    $('.time-period-btn').on('click', function() {
        var period = $(this).data('period');
        updateAllCharts(period);
    });
}

function updateAllCharts(period) {
    // Actualizar cada gráfico con el nuevo período
    $('.chart-container').each(function() {
        var $container = $(this);
        var chartDef = $container.data('chart-def') + '?period=' + period;
        loadChart($container.attr('id'), chartDef);
    });
}

/* ===== FUNCIONES AUXILIARES ===== */
function loadRequiredResources() {
    // Cargar FontAwesome si no está presente
    if (!$('link[href*="font-awesome"]').length) {
        $('head').append(
            '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">'
        );
    }

    // Estilos para los gráficos
    $('head').append(
        '<style>' +
        '.chart-grid {' +
        '  display: grid;' +
        '  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));' +
        '  gap: 20px;' +
        '  margin: 20px 0;' +
        '}' +
        '.chart-container {' +
        '  background: white;' +
        '  border-radius: 8px;' +
        '  padding: 15px;' +
        '  box-shadow: 0 2px 5px rgba(0,0,0,0.1);' +
        '}' +
        '.chart-time-controls {' +
        '  text-align: center;' +
        '  margin: 15px 0;' +
        '}' +
        '.time-period-btn {' +
        '  background: #f8f9fa;' +
        '  border: 1px solid #a2a9b1;' +
        '  padding: 5px 10px;' +
        '  margin: 0 5px;' +
        '  border-radius: 4px;' +
        '  cursor: pointer;' +
        '}' +
        '.time-period-btn:hover {' +
        '  background: #eaecf0;' +
        '}' +
        '</style>'
    );
}

/* ===== EJEMPLOS DE DEFINICIÓN DE GRÁFICOS ===== */
// Estos serían guardados en páginas de datos como Data:EditsChart.json
/*
{
    "license": "CC0-1.0",
    "version": 1,
    "source": "Data:EditStats.tab",
    "type": "line",
    "title": {
        "en": "Ediciones por hora",
        "es": "Ediciones por hora"
    },
    "xAxis": {
        "title": {"en": "Hora", "es": "Hora"},
        "format": "time"
    },
    "yAxis": {
        "title": {"en": "Ediciones", "es": "Ediciones"},
        "format": "number"
    }
}
*/

/*
{
    "license": "CC0-1.0",
    "version": 1,
    "source": "Data:UserStats.tab",
    "type": "bar",
    "title": {
        "en": "Usuarios activos",
        "es": "Usuarios activos"
    },
    "xAxis": {
        "title": {"en": "Día", "es": "Día"},
        "format": "date"
    },
    "yAxis": {
        "title": {"en": "Usuarios", "es": "Usuarios"},
        "format": "number"
    }
}
*/