MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Any JavaScript here will be loaded for all users on every page load. */


$(function () {
    var $bc = $('#mw-content-subtitle');
    if ($bc.length && $bc.text().trim() !== '') {
        $bc.prepend('<a href="/wiki/Main_Page">Climate Knowledge Graph</a> › ');
    }
});


mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js');

$(function () {
    if ($('#ar6-gender-chart').length === 0) return;

    /* Faked Wikibase SPARQL result */
    var genderData = {
        labels: ['Male', 'Female', 'Unknown'],
        values: [357, 224, 12],
        colors: ['#364497', '#01adef', '#b0b7c3']
    };

    var countryData = [
        { name: 'United States', count: 89 },
        { name: 'United Kingdom', count: 67 },
        { name: 'Germany', count: 45 },
        { name: 'France', count: 38 },
        { name: 'China', count: 34 },
        { name: 'Australia', count: 28 },
        { name: 'India', count: 24 },
        { name: 'Canada', count: 22 },
        { name: 'Japan', count: 18 },
        { name: 'Brazil', count: 15 },
        { name: 'South Africa', count: 12 },
        { name: 'Netherlands', count: 11 },
        { name: 'Switzerland', count: 10 },
        { name: 'Mexico', count: 9 },
        { name: 'Kenya', count: 8 }
    ];

    /* Wait for Chart.js to load */
    setTimeout(function () {

        /* Pie chart */
        var ctx = document.getElementById('ar6-gender-chart').getContext('2d');
        new Chart(ctx, {
            type: 'pie',
            data: {
                labels: genderData.labels,
                datasets: [{
                    data: genderData.values,
                    backgroundColor: genderData.colors,
                    borderWidth: 1,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: false,
                plugins: {
                    legend: { display: false }
                }
            }
        });

        /* Legend */
        var legend = document.getElementById('ar6-gender-legend');
        var total = genderData.values.reduce(function (a, b) { return a + b; }, 0);
        genderData.labels.forEach(function (label, i) {
            var pct = Math.round(genderData.values[i] / total * 100);
            legend.innerHTML += '<div class="ar6-legend-item">' +
                '<span class="ar6-legend-dot" style="background:' + genderData.colors[i] + '"></span>' +
                '<span class="ar6-legend-label">' + label + '</span>' +
                '<span class="ar6-legend-value">' + genderData.values[i] + ' (' + pct + '%)</span>' +
                '</div>';
        });

        /* Country bar chart */
        var mapEl = document.getElementById('ar6-map');
        var max = Math.max.apply(null, countryData.map(function (c) { return c.count; }));
        var html = '<div class="ar6-country-list">';
        countryData.forEach(function (c) {
            var pct = Math.round(c.count / max * 100);
            html += '<div class="ar6-country-row">' +
                '<span class="ar6-country-name">' + c.name + '</span>' +
                '<div class="ar6-country-bar-wrap">' +
                '<div class="ar6-country-bar" style="width:' + pct + '%"></div>' +
                '</div>' +
                '<span class="ar6-country-count">' + c.count + '</span>' +
                '</div>';
        });
        html += '</div>';
        mapEl.innerHTML = html;

    }, 800);

});