Utilisateur:Aelxen/Mes scripts/HistoryGraph.js

Note : après avoir enregistré la page, vous devrez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

Mozilla / Firefox / Konqueror / Safari : maintenez la touche Majuscule (Shift) en cliquant sur le bouton Actualiser (Reload) ou pressez Maj-Ctrl-R (Cmd-R sur Apple Mac) ;

Firefox (sur GNU/Linux) / Chrome / Internet Explorer / Opera : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5.

mw.loader.using(['mediawiki.util', 'mediawiki.api', 'chart.js'], function () {
    $(document).ready(function () {
        if (mw.config.get('wgAction') === 'history') {
            $('#pagehistory').before('<div id="history-chart-container" style="width: 90%; height: 400px; margin-bottom: 20px;"><canvas id="historyChart"></canvas></div>');
            
            var api = new mw.Api();
            api.get({
                action: 'query',
                titles: mw.config.get('wgPageName'),
                prop: 'revisions',
                rvprop: 'timestamp',
                rvlimit: 'max',
                formatversion: 2
            }).done(function (data) {
                var revisions = data.query.pages[0].revisions;
                var dates = {};

                revisions.forEach(function (rev) {
                    var date = rev.timestamp.split('T')[0];
                    if (!dates[date]) {
                        dates[date] = 0;
                    }
                    dates[date]++;
                });

                var sortedDates = Object.keys(dates).sort();
                var dateLabels = sortedDates;
                var dateData = sortedDates.map(function (date) { return dates[date]; });

                var ctx = document.getElementById('historyChart').getContext('2d');
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: dateLabels,
                        datasets: [{
                            label: 'Modifications par date',
                            data: dateData,
                            borderColor: 'rgba(75, 192, 192, 1)',
                            backgroundColor: 'rgba(75, 192, 192, 0.2)'
                        }]
                    },
                    options: {
                        scales: {
                            x: {
                                type: 'time',
                                time: {
                                    unit: 'day'
                                }
                            }
                        }
                    }
                });
            });
        }
    });
});