index.html

﻿<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="utf-8">
    <title>SAO:MD 腳色數量統計</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <script>
        var randomColorGenerator = function () {
            return '#' + (Math.random().toString(16) + '0000000').slice(2, 8);
        };

        var dbDatabase;
        $(document).ready(function () {
            $.getJSON("data.json").done(function (data) {
                dbDatabase = data;
                let liName = {};
                $.each(data.cname, function (key, cname) {
                    liName[cname.id] = {
                        label: (cname.name + " / " + cname.name_en),
                        data: [],
                        fill: false,
                        backgroundColor: randomColorGenerator(),
                    };
                });

                let liGroup = [];
                $.each(data.group, function (keyGroup, group) {
                    liGroup.push(group.long);

                    //TODO: this counting method very stupid
                    $.each(liName, function (keyName, cname) {
                        if (cname.data.length > 0)
                            cname.data.push(cname.data[cname.data.length - 1]);
                        else
                            cname.data.push(0);

                        $.each(data.base, function (keyChar, baseChar) {
                            if (baseChar.cname == keyName && baseChar.group == keyGroup) {
                                ++cname.data[cname.data.length-1];
                            }
                        });

                    });
                });

                let dataset = [];
                $.each(liName, function (key, val) {
                    let vCount = val.data[val.data.length - 1];
                    if (vCount > 0) {
                        dataset.push(val);
                        if (vCount < 10)
                            val.hidden = true;
                    }
                });

                var ctx = document.getElementById('myChart');
                var myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: liGroup,
                        datasets: dataset
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>
    <h3 align="center">SAO:MD 腳色數量統計</h3>
    <canvas id="myChart" width="800" height="600"></canvas>
    <footer>
      <p align=center><a href=https://ratsounds.github.io/saomddc/>Data sorce: SAO:MD:DC<a/></p>
    </footer>
</body>
</html>