SIS Visualize

Visualize the SIS

当前为 2018-06-11 提交的版本,查看 最新版本

// ==UserScript==
// @name         SIS Visualize
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  Visualize the SIS
// @author       Hieu DM
// @match        ctt-sis.hust.edu.vn/Students/StudentCourseMarks.aspx
// @require      https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    $( document ).ready(function() {
        $('.MainContentTitle')
            .append('<div id="vtl-addon"><div id="vtl" class="btn btn-control btn-primary">Virtualize!</div>' +
                    '<div id="vtl-modal" class="modal fade" role="dialog"><div class="modal-dialog modal-lg"><div class="modal-content">' +
                    '<div class="modal-header">Tổng hợp</div>' +
                    '<div class="modal-body"><canvas id="vtl_bar"></canvas><hr><canvas id="vtl_pie"></canvas></div></div></div></div></div>');

        $('#vtl').click(function() {
            var a = 0, ap = 0, b = 0, bp = 0, c = 0, cp = 0, d = 0, dp = 0, f = 0;
            var cnt = 0;
            $("#vtl-modal").modal();
            $('td:nth-of-type(8)').each(function(){
                cnt++;
                switch($(this).html()) {
                    case 'A': a += 1; break;
                    case 'A+': ap += 1; break;
                    case 'B': b += 1; break;
                    case 'B+': bp += 1; break;
                    case 'C': c += 1; break;
                    case 'C+': cp += 1; break;
                    case 'D': d += 1; break;
                    case 'D+': dp += 1; break;
                    case 'F': f += 1; break;
                    default:
                }
            });

            var ctx = document.getElementById("vtl_bar").getContext('2d');
            var vtl_bar = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ["A+", "A", "B+", "B", "C+", "C", "D+", "D", "F"],
                    datasets: [{
                        data: [ap, a, bp, b, cp, c, dp, d, f],
                        backgroundColor: [
                            'rgba(244, 191, 191, 0.8)',
                            'rgba(234, 136, 136, 0.8)',
                            'rgba(226, 89, 89, 0.8)',
                            'rgba(219, 51, 51, 0.8)',
                            'rgba(202, 36, 36, 0.8)',
                            'rgba(175, 31, 31, 0.8)',
                            'rgba(148, 27, 27, 0.8)',
                            'rgba(119, 21, 21, 0.8)',
                            'rgba(83, 15, 15, 0.8)',
                        ]
                    }]
                },
                options: {
                    legend: {
                        display: false
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    },
                    title: {
                        text: 'Số lượng điểm theo từng loại',
                        display: true,
                        position: 'bottom',
                        fontSize: 20
                    }
                }
            });

            cnt = cnt;
            var apx = (ap/cnt*100).toFixed(2);
            var ax = (a/cnt*100.0).toFixed(2);
            var bpx = (bp/cnt*100.0).toFixed(2);
            var bx = (b/cnt*100).toFixed(2);
            var cpx = (cp/cnt*100).toFixed(2);
            var cx = (c/cnt*100).toFixed(2);
            var dpx = (dp/cnt*100).toFixed(2);
            var dx = (d/cnt*100).toFixed(2);
            var fx = (f/cnt*100).toFixed(2);

            ctx = document.getElementById("vtl_pie").getContext('2d');
            var vtl_pie = new Chart(ctx,{
                type: 'pie',
                data: {
                    labels: ["A+", "A", "B+", "B", "C+", "C", "D+", "D", "F"],
                    datasets: [{
                        label: 'Điểm',
                        data: [apx, ax, bpx, bx, cpx, cx, dpx, dx, fx],
                        backgroundColor: [
                            'rgba(244, 191, 191, 0.8)',
                            'rgba(234, 136, 136, 0.8)',
                            'rgba(226, 89, 89, 0.8)',
                            'rgba(219, 51, 51, 0.8)',
                            'rgba(202, 36, 36, 0.8)',
                            'rgba(175, 31, 31, 0.8)',
                            'rgba(148, 27, 27, 0.8)',
                            'rgba(119, 21, 21, 0.8)',
                            'rgba(83, 15, 15, 0.8)',
                        ]
                    }]
                },
                options: {
                    title: {
                        text: 'Tỉ lệ điểm',
                        display: true,
                        position: 'bottom',
                        fontSize: 20
                    }
                }
            });

        });
    });
})();