|
Tags: Replaced Manual revert |
| Line 7: |
Line 7: |
| $bc.prepend('<a href="/wiki/Main_Page">Climate Knowledge Graph</a> › '); | | $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;
| |
|
| |
| }, 1200);
| |
|
| |
| }); | | }); |