ivalentin
/
SWDB


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803
							<?php
    /**
     * Runs view.
     *
     * Contains the view layout and ome code to present the data.
     *
     * @category View
     * @property_read Stats_Page $page The page model.
     * @property_read int $UID Player ID.
     */
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta content='text/html; charset=utf-8' http-equiv='content-type'/>
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1'/>
        <title><?=$page->title?></title>
        <link rel='shortcut icon' href='<?=$page->favicon?>'/>
        <!-- CSS files -->
        <link rel='stylesheet' type='text/css' href='<?=URL::CSS?>ui.css'/>
        <link rel='stylesheet' type='text/css' href='<?=URL::CSS?>stats.css'/>
        <link rel='stylesheet' type='text/css' href='<?=URL::CSS?>filters.css'/>
        <!-- Meta tags -->
        <link rel='canonical' href='<?=$page->canonical?>'/>
        <link rel='author' href='<?=$page->author?>'/>
        <link rel='publisher' href='<?=$page->author?>'/>
        <meta name='description' content='<?=$page->description?>'/>
        <meta property='og:title' content='<?=$page->title?>'/>
        <meta property='og:url' content='<?=$page->canonical?>'/>
        <meta property='og:description' content='<?=$page->description?>'/>
        <meta property='og:image' content='<?=$page->icon?>'/>
        <meta property='og:site_name' content='<?=$page->name?>'/>
        <meta property='og:type' content='website'/>
        <meta property='og:locale' content='en'/>
        <meta name='twitter:card' content='summary'/>
        <meta name='twitter:title' content='<?=$page->title?>'/>
        <meta name='twitter:description' content='<?=$page->description?>'/>
        <meta name='twitter:image' content='<?=$page->icon?>'/>
        <meta name='twitter:url' content='<?=$page->canonical?>'/>
        <meta name='robots' content='index follow'/>
        <script>

            /**
             * Shows or hiddes the filters panel.
             */
            function toggleFilters(){
                var content = document.getElementById('filters_content');
                var slid = document.getElementById('filters_slid');
                if (content.style.maxHeight != '30em'){
                    content.style.maxHeight = '30em';
                    slid.style.transform = 'rotate(90deg)';
                }
                else{
                    content.style.maxHeight = '0px';
                    slid.style.transform = 'rotate(0deg)';
                }
            };

            function selectAreaType(){
                var areaType = document.getElementById('filter_area_type').options[document.getElementById('filter_area_type').selectedIndex].value;
                // Clear all selectors
                document.getElementById('filter_stage').style.display = 'none';
                document.getElementById('filter_difficulty').style.display = 'none';
                var areas = document.getElementsByClassName('filter_area');
                for (var i = 0; i < areas.length; i++) {
                    areas[i].style.display = 'none';
                    areas[i].removeAttribute('name');
                }

                // Show selected selector.
                switch (areaType){
                    case '<?=AREA_TYPE_ID::SCENARIO?>':
                        document.getElementById('filter_area_scenario').style.display = 'inline-block';
                        document.getElementById('filter_area_scenario').setAttribute('name', 'area');
                        populateStage(7);
                        document.getElementById('filter_stage').style.display = 'inline-block';
                        populateDifficulty();
                        document.getElementById('filter_difficulty').style.display = 'inline-block';
                        break;
                    case '<?=AREA_TYPE_ID::CAIROS_DUNGEON?>':
                        document.getElementById('filter_area_cairos').style.display = 'inline-block';
                        document.getElementById('filter_area_cairos').setAttribute('name', 'area');
                        populateStage(10);
                        document.getElementById('filter_stage').style.display = 'inline-block';
                        break;
                    // TODO initialvalues for stage and difficulty
                    // TODO: Other areas
                }
            }

            /**
             * Shows the stage selector in the filters.
             *
             * @param total The number of stages to show.
             */
            function populateStage(total){
                var sel = document.getElementById('filter_stage');
                while (sel.firstChild) {
                    sel.removeChild(sel.firstChild);
                }
                var opt;
                var att;
                // Empty
                opt = document.createElement('option');
                tex = document.createTextNode('');
                opt.appendChild(tex);
                sel.appendChild(opt);
                for (var i = 1; i <= total; i ++){
                    opt = document.createElement('option');
                    tex = document.createTextNode('Stage ' + i);
                    att = document.createAttribute('value');
                    att.value = i;
                    opt.setAttributeNode(att);
                    opt.appendChild(tex);
                    sel.appendChild(opt);
                }
            }

            /**
             * Shows the difficulty selector in the filter panel.
             *
             * @param labyrinth Indicates if the area type is the Tartarus
             *        labyrinth. If so, it includes 'Easy'.
             * @param toa Indicates if the area type is the Tower of
             *        Ascension. If so, it excludes 'Hell'.
             */
            function populateDifficulty(labyrinth = false, toa = false){
                var sel = document.getElementById('filter_difficulty');
                while (sel.firstChild) {
                    sel.removeChild(sel.firstChild);
                }
                var opt;
                var att;
                var tex;
                // Empty
                opt = document.createElement('option');
                tex = document.createTextNode('');
                opt.appendChild(tex);
                sel.appendChild(opt);
                // Easy (Labyrinth only)
                if (labyrinth){
                    opt = document.createElement('option');
                    tex = document.createTextNode('Easy difficulty');
                    att = document.createAttribute('value');
                    att.value = '<?=DIFFICULTY_ID::EASY?>';
                    opt.setAttributeNode(att);
                    opt.appendChild(tex);
                    sel.appendChild(opt);
                }
                // Normal
                opt = document.createElement('option');
                tex = document.createTextNode('Normal difficulty');
                att = document.createAttribute('value');
                att.value = '<?=DIFFICULTY_ID::NORMAL?>';
                opt.setAttributeNode(att);
                opt.appendChild(tex);
                sel.appendChild(opt);
                // Hard
                opt = document.createElement('option');
                tex = document.createTextNode('Hard difficulty');
                att = document.createAttribute('value');
                att.value = '<?=DIFFICULTY_ID::HARD?>';
                opt.setAttributeNode(att);
                opt.appendChild(tex);
                sel.appendChild(opt);
                // Hell
                if (!toa){
                    opt = document.createElement('option');
                    tex = document.createTextNode('Hell difficulty');
                    att = document.createAttribute('value');
                    att.value = '<?=DIFFICULTY_ID::HELL?>';
                    opt.setAttributeNode(att);
                    opt.appendChild(tex);
                    sel.appendChild(opt);
                }
            }

            /**
             * Sets the values for the stage and difficulty at page load.
             */
            function initialValues(){
<?php
                if ($page->filters["STAGE"] != null && $page->filters["STAGE"] > 0){
?>
                    document.getElementById('filter_stage').selectedIndex = <?=$page->filters["STAGE"]?>;
<?php
                }
                if ($page->filters["DIFFICULTY"] != null && $page->filters["DIFFICULTY"] > 0){
?>
                    document.getElementById('filter_difficulty').selectedIndex = <?=$page->filters["DIFFICULTY"]?>;
<?php
                }
?>
            }


            /**
             * Calls all required functions to draw all diagrams.
             */
            function populateDiagrams(){
<?php
                if ($page->show_data){
?>
                    diagramWin();
                    diagramDropType();
                    diagramDropRuneSlot();
                    diagramDropRuneStars();
                    diagramDropRuneQuality();
<?php
                }
?>
            }

            /**
             * Generates the win rate diagram.
             */
            function diagramWin(){
                var canvas = document.getElementById("diagram_win");
                var ctx = canvas.getContext("2d");
                ctx.lineWidth = 2;
                var lastend = 0;
                var data = [<?=$page->win_lose[0]?>, <?=$page->win_lose[1]?>];
                var total = 0;
                var color = [
                    getComputedStyle(document.querySelector('div.diagram table.legend tr.color_1')).color,
                    getComputedStyle(document.querySelector('div.diagram table.legend tr.color_2')).color
                ];

                for(var e = 0; e < data.length; e++){
                  total += data[e];
                }

                for (var i = 0; i < data.length; i++) {
                    ctx.beginPath();
                    ctx.moveTo(canvas.width / 2, canvas.height / 2);
                    ctx.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2, lastend, lastend + (Math.PI * 2 * (data[i] / total)), false);
                    ctx.lineTo(canvas.width / 2, canvas.height / 2);
                    ctx.fillStyle = '#000000';
                    ctx.stroke();
                    ctx.fillStyle = color[i];
                    ctx.fill();
                    lastend += Math.PI * 2 * (data[i] / total);
                }
            }

            /**
             * Generates the drop rate diagram.
             */
            function diagramDropType(){
                // TODO: Diferenciate scenario, dungeon and hall.
                var canvas = document.getElementById("diagram_drop_type");
                var ctx = canvas.getContext("2d");
                ctx.lineWidth = 2;
                var lastend = 0;
                var data = [
                    <?=$page->drop_type["rune"]?>,
                    <?=$page->drop_type["rune_craft"]?>,
                    <?=$page->drop_type["item"]?>,
                    <?=$page->drop_type["sd"]?>,
                    <?=$page->drop_type["shapeshifting"]?>,
                    <?=$page->drop_type["unit"]?>,
                ];
                var total = 0;
                var color = [
                    getComputedStyle(document.querySelector('div.diagram table.legend tr.color_1')).color,
                    getComputedStyle(document.querySelector('div.diagram table.legend tr.color_2')).color,
                    getComputedStyle(document.querySelector('div.diagram table.legend tr.color_3')).color,
                    getComputedStyle(document.querySelector('div.diagram table.legend tr.color_4')).color,
                    getComputedStyle(document.querySelector('div.diagram table.legend tr.color_5')).color,
                    getComputedStyle(document.querySelector('div.diagram table.legend tr.color_6')).color,
                ];
                for(var e = 0; e < data.length; e++){
                    total += data[e];
                }
                for (var i = 0; i < data.length; i++) {
                    ctx.beginPath();
                    ctx.moveTo(canvas.width/2, canvas.height/2);
                    ctx.arc(canvas.width/2, canvas.height/2, canvas.height/2, lastend, lastend + (Math.PI * 2 * (data[i] / total)), false);
                    ctx.lineTo(canvas.width/2, canvas.height/2);
                    ctx.fillStyle = '#000000';
                    ctx.stroke();
                    ctx.fillStyle = color[i];
                    ctx.fill();
                    lastend += Math.PI * 2 * (data[i] / total);
                }
            }

            /**
             * Generates the rune slot rate diagram.
             */
            function diagramDropRuneSlot(){
                var canvas = document.getElementById("diagram_rune_slot");
                var data = [
                    <?=$page->drop_rune_slot["1"]?>,
                    <?=$page->drop_rune_slot["2"]?>,
                    <?=$page->drop_rune_slot["3"]?>,
                    <?=$page->drop_rune_slot["4"]?>,
                    <?=$page->drop_rune_slot["5"]?>,
                    <?=$page->drop_rune_slot["6"]?>
                ];
                var total = 6;

                // Polarchart base
                var ctx_base = canvas.getContext("2d");
                ctx_base.lineWidth = 1;
                ctx_base.font = '32px serif'
                ctx_base.textBaseline = 'middle'
                ctx_base.textAlign = 'middle'
                var lastend = Math.PI + Math.PI / total;
                var radius = Math.round((canvas.width / 2) * ((i + 1) / total));
                for (var i = 0; i < total; i++) {
                    ctx_base.moveTo(canvas.width / 2, canvas.height / 2);
                    ctx_base.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2, lastend, lastend + (Math.PI * 2 / total), false);
                    ctx_base.lineTo(canvas.width / 2, canvas.height / 2);
                    ctx_base.strokeStyle = '#333333';
                    ctx_base.stroke();
                    lastend += (Math.PI * 2 / total);
                }
                ctx_base.fillStyle = '#33333366';
                ctx_base.fill();
                // Numbers
                ctx_base.fillStyle = '#ffffff';
                lastend = Math.PI + Math.PI / total;
                for (var i = 0; i < total; i ++){
                    lastend += (Math.PI * 2 / total);
                    tx = canvas.width / 2 + canvas.width / 2.3 * Math.cos(lastend);
                    ty = canvas.width / 2 + canvas.width / 2.3 * Math.sin(lastend);
                    ctx_base.fillText(i + 1, tx - 8, ty);

                }

                // Polarchart content
                var ctx_data = canvas.getContext("2d");
                max = Math.max.apply(null, data)  * 1.1;
                var initX = 0;
                var initY = 0;
                let region = new Path2D();
                for (var i = 0; i < total; i++) {
                    var r = Math.round((canvas.width / 2) * data[i] / max);
                    var x = Math.round(r * Math.sin(Math.PI * 2 / total));
                    var y = Math.round(r * Math.cos(Math.PI * 2 / total));

                    // Rotate the point
                    angle = (i + 4) * Math.PI * 2 / total;
                    rx = x * Math.cos(angle) - y * Math.sin(angle)
                    ry = y * Math.cos(angle) + x * Math.sin(angle)
                    rx += canvas.width / 2;
                    ry += canvas.width / 2;
                    if (i == 0){
                        region.moveTo(rx, ry);
                        initX = rx;
                        initY = ry;
                    }
                    else{
                        region.lineTo(rx, ry);
                    }
                }
                region.lineTo(initX, initY);
                ctx_data.lineWidth = 2;
                ctx_data.strokeStyle = '#ff0000';
                ctx_data.stroke(region)
                ctx_data.fillStyle = '#ff000055';
                ctx_data.fill(region)
            }

            /**
             * Generates the rune star rate diagram.
             */
            function diagramDropRuneStars(){
                var canvas = document.getElementById("diagram_rune_stars");
                var data = [
                    <?=$page->drop_rune_stars["6"]?>,
                    <?=$page->drop_rune_stars["5"]?>,
                    <?=$page->drop_rune_stars["4"]?>,
                    <?=$page->drop_rune_stars["3"]?>,
                    <?=$page->drop_rune_stars["2"]?>,
                    <?=$page->drop_rune_stars["1"]?>
                ];
                var total = 6;

                // Polarchart base
                var ctx_base = canvas.getContext("2d");
                ctx_base.lineWidth = 1;
                ctx_base.font = '32px serif'
                ctx_base.textBaseline = 'middle'
                ctx_base.textAlign = 'middle'
                var lastend = Math.PI + Math.PI / total;
                for (var i = 0; i < total; i++) {
                    radius = Math.round((canvas.width / 2) * ((i + 1) / total));
                    ctx_base.moveTo(canvas.width / 2, canvas.height / 2);
                    ctx_base.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2, lastend, lastend + (Math.PI * 2 / total), false);
                    ctx_base.lineTo(canvas.width / 2, canvas.height / 2);
                    ctx_base.strokeStyle = '#333333';
                    ctx_base.stroke();
                    lastend += (Math.PI * 2 / total);
                }
                ctx_base.fillStyle = '#33333366';
                ctx_base.fill();
                // Numbers
                ctx_base.fillStyle = '#ffffff';
                lastend = Math.PI + Math.PI / total;
                for (var i = 0; i < total; i ++){
                    lastend += (Math.PI * 2 / total);
                    tx = canvas.width / 2 + canvas.width / 2.3 * Math.cos(lastend);
                    ty = canvas.width / 2 + canvas.width / 2.3 * Math.sin(lastend);
                    ctx_base.fillText(6 - i, tx - 8, ty);

                }

                // Polarchart content
                var ctx_data = canvas.getContext("2d");
                max = Math.max.apply(null, data) * 1.1;
                var initX = 0;
                var initY = 0;
                let region = new Path2D();
                for (var i = 0; i < total; i++) {
                    var r = Math.round((canvas.width / 2) * data[i] / max);
                    var x = Math.round(r * Math.sin(Math.PI * 2 / total));
                    var y = Math.round(r * Math.cos(Math.PI * 2 / total));

                    // Rotate the point
                    angle = (i + 4) * Math.PI * 2 / total;
                    rx = x * Math.cos(angle) - y * Math.sin(angle)
                    ry = y * Math.cos(angle) + x * Math.sin(angle)
                    rx += canvas.width / 2;
                    ry += canvas.width / 2;
                    if (i == 0){
                        region.moveTo(rx, ry);
                        initX = rx;
                        initY = ry;
                    }
                    else{
                        region.lineTo(rx, ry);
                    }
                }
                region.lineTo(initX, initY);
                ctx_data.lineWidth = 2;
                ctx_data.strokeStyle = '#ff0000';
                ctx_data.stroke(region)
                ctx_data.fillStyle = '#ff000055';
                ctx_data.fill(region)
            }

            /**
             * Generates the rune quality rate diagram.
             */
            function diagramDropRuneQuality(){
                var canvas = document.getElementById("diagram_rune_quality");
                var data = [
                    <?=$page->drop_rune_quality[strval(QUALITY_ID::LEGEND)]?>,
                    <?=$page->drop_rune_quality[strval(QUALITY_ID::HERO)]?>,
                    <?=$page->drop_rune_quality[strval(QUALITY_ID::RARE)]?>,
                    <?=$page->drop_rune_quality[strval(QUALITY_ID::MAGIC)]?>,
                    <?=$page->drop_rune_quality[strval(QUALITY_ID::NORMAL)]?>
                ];
                var total = 5;

                // Polarchart base
                var ctx_base = canvas.getContext("2d");
                ctx_base.lineWidth = 1;
                //var lastend = Math.PI * 2 / (0.5 * total / Math.PI);
                var lastend = ((270 - (180 / (total))) * Math.PI / 180);
                var color = [
                    '#f5790066', // LEGEND
                    '#ad7fa866', // HERO
                    '#15c6e166', // RARE
                    '#55ff5566', // MAGIC
                    '#cccccc66'  // NORMAL
                ];
                for (var i = 0; i < total; i++) {
                    ctx_base.beginPath();
                    radius = Math.round((canvas.width / 2) * ((i + 1) / total));
                    ctx_base.moveTo(canvas.width / 2, canvas.height / 2);
                    ctx_base.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2, lastend, lastend + (Math.PI * 2 / total), false);
                    ctx_base.lineTo(canvas.width / 2, canvas.height / 2);
                    ctx_base.fillStyle = color[i];
                    ctx_base.fill();
                    ctx_base.strokeStyle = '#333333';
                    ctx_base.stroke();
                    lastend += (Math.PI * 2 / total);
                }
                //ctx_base.fillStyle = '#33333366';
                //ctx_base.fill()

                // Polarchart content
                var ctx_data = canvas.getContext("2d");
                max = Math.max.apply(null, data) * 1.1;
                var initX = 0;
                var initY = 0;
                let region = new Path2D();
                for (var i = 0; i < total; i++) {
                    var r = Math.round((canvas.width / 2) * data[i] / max);
                    var x = Math.round(r * Math.sin(Math.PI * 2 / total));
                    var y = Math.round(r * Math.cos(Math.PI * 2 / total));

                    // Rotate the point
                    // TOTALLY experimental, not reliable for a different number of sectors.
                    angle = (i * Math.PI * 2 / total) + 2 * Math.PI / (2 * (total - 1)) + 270 * (4.6/6) * Math.PI / 180;
                    rx = x * Math.cos(angle) - y * Math.sin(angle)
                    ry = y * Math.cos(angle) + x * Math.sin(angle)
                    rx += canvas.width / 2;
                    ry += canvas.width / 2;
                    if (i == 0){
                        region.moveTo(rx, ry);
                        initX = rx;
                        initY = ry;
                    }
                    else{
                        region.lineTo(rx, ry);
                    }
                }
                region.lineTo(initX, initY);
                ctx_data.lineWidth = 2;
                ctx_data.strokeStyle = '#ff0000';
                ctx_data.stroke(region)
                ctx_data.fillStyle = '#ff000055';
                ctx_data.fill(region)
            }

            // TODO: Script to show/hide area selector
        </script>
    </head>
    <body onload='populateDiagrams();'>
<?php
        include __DIR__ . "/inc/header.php";
?>
        <section class='filters'>
            <h2 id='filters_title' onClick='selectAreaType();initialValues();toggleFilters();'>
                <img id='filters_slid' id='filters_slid' alt=' ' src='<?=URL::IMG["ICON"]?>slid.png'/>
                Stat filters
            </h2>
            <article id='filters_content'>
<?php
                $filters = $page->filters;
                include __DIR__ . "/inc/filter_stats.php";
?>
            </article>

        </section> <!-- #filters -->
<?php
        if ($page->show_data){
?>
            <section class='content'>
                <h2>
                    Stats
                </h2>
                <article>
                    <div id='win' class='diagram'>
                        <h3>
                            Victory rate
                        </h3>
                        <canvas id='diagram_win' width='200' height='200'></canvas>
                        <table class='legend'>
                            <tr class='color_1'>
                                <td>
                                    Victories:
                                </td>
                                <td>
                                    <?=$page->win_lose[0]?>
                                </td>
                                <td>
                                    (<?=number_format(($page->win_lose[0] * 100) / ($page->win_lose[0] + $page->win_lose[1]), 2, ".", ",")?>%)
                                </td>
                            </tr>
                            <tr class='color_2'>
                                <td>
                                    Defeats:
                                </td>
                                <td>
                                    <?=$page->win_lose[1]?>
                                </td>
                                <td>
                                    (<?=number_format(($page->win_lose[1] * 100) / ($page->win_lose[0] + $page->win_lose[1]), 2, ".", ",")?>%)
                                </td>
                            </tr>
                            <tr class='color_0'>
                                <td>
                                    Total:
                                </td>
                                <td colspan='2'>
                                    <?=($page->win_lose[0] + $page->win_lose[1])?>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id='drop_type' class='diagram'>
                        <h3>
                            Drop rate
                        </h3>
                        <canvas id='diagram_drop_type' width='200' height='200'></canvas>
                        <table class='legend'>
<?php
                            // Do some calculations
                            $rune = $page->drop_type["rune"];
                            $rucr = $page->drop_type["rune_craft"];
                            $item = $page->drop_type["item"];
                            $sedu = $page->drop_type["sd"];
                            $shap = $page->drop_type["shapeshifting"];
                            $unit = $page->drop_type["unit"];
                            $total = $rune + $rucr + $item + $sedu + $shap + $unit;
?>
                            <tr class='color_1'>
                                <td>
                                    Rune:
                                </td>
                                <td>
                                    <?=$rune?>
                                </td>
                                <td>
                                    (<?=number_format(($rune * 100) / $total, 2, ".", ",")?>%)
                                </td>
                            </tr>
                            <tr class='color_2'>
                                <td>
                                    Rune craft item:
                                </td>
                                <td>
                                    <?=$rucr?>
                                </td>
                                <td>
                                    (<?=number_format(($rucr * 100) / $total, 2, ".", ",")?>%)
                                </td>
                            </tr>
                            <tr class='color_3'>
                                <td>
                                    Item:
                                </td>
                                <td>
                                    <?=$item?>
                                </td>
                                <td>
                                    (<?=number_format(($item * 100) / $total, 2, ".", ",")?>%)
                                </td>
                            </tr>
                            <tr class='color_4'>
                                <td>
                                    Secret Dungeon:
                                </td>
                                <td>
                                    <?=$sedu?>
                                </td>
                                <td>
                                    (<?=number_format(($sedu * 100) / $total, 2, ".", ",")?>%)
                                </td>
                            </tr>
                            <tr class='color_5'>
                                <td>
                                    Transmog Stone:
                                </td>
                                <td>
                                    <?=$shap?>
                                </td>
                                <td>
                                    (<?=number_format(($shap * 100) / $total, 2, ".", ",")?>%)
                                </td>
                            </tr>
                            <tr class='color_6'>
                                <td>
                                    Unit:
                                </td>
                                <td>
                                    <?=$unit?>
                                </td>
                                <td>
                                    (<?=number_format(($unit * 100) / $total, 2, ".", ",")?>%)
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id='drop_rune_slot' class='diagram'>
                        <h3>
                            Rune drops by slot
                        </h3>
                        <canvas id='diagram_rune_slot' width='200' height='200'></canvas>
                        <table class='legend'>
<?php
                            $total = array_sum($page->drop_rune_slot);
                            for ($i = 1; $i <= 6; $i ++){
                                $val = $page->drop_rune_slot[strval($i)]
?>
                                <tr class='color_0'>
                                    <td>
                                        Slot <?=$i?>:
                                    </td>
                                    <td>
                                         <?=$val?>
                                    </td>
                                    <td>
                                        (<?=number_format(($val * 100) / $total, 2, ".", ",")?>%)
                                    </td>
                                </tr>
<?php
                            }
?>
                        </table>
                    </div>
                    <div id='drop_rune_stars' class='diagram'>
                        <h3>
                            Rune drops by stars
                        </h3>
                        <canvas id='diagram_rune_stars' width='200' height='200'></canvas>
                        <table class='legend'>
<?php
                            $total = array_sum($page->drop_rune_stars);
                            for ($i = 6; $i >= 1; $i --){
                                $val = $page->drop_rune_stars[strval($i)]
?>
                                <tr class='color_0'>
                                    <td>
<?php
                                        for ($j = 1; $j <= $i; $j ++){
?>
                                            <img class='star star_gold' src='<?=URL::IMG["ICON"]?>star.png'/>
<?php
                                        }
?>
                                    </td>
                                    <td>
                                        <?=$val?>
                                    </td>
                                    <td>
                                        (<?=number_format(($val * 100) / $total, 2, ".", ",")?>%)
                                    </td>
                                </tr>
<?php
                            }
?>
                        </table>
                    </div>
                    <div id='drop_rune_quality' class='diagram'>
                        <h3>
                            Rune drops by quality
                        </h3>
                        <canvas id='diagram_rune_quality' width='200' height='200'></canvas>
                        <table class='legend'>
<?php
                            $total = array_sum($page->drop_rune_quality);
?>
                            <tr class='color_legend'>
                                <td>
                                    Legend:
                                </td>
                                <td>
                                    <?=$page->drop_rune_quality[QUALITY_ID::LEGEND]?>
                                </td>
                                <td>
                                    (<?=number_format(($page->drop_rune_quality[QUALITY_ID::LEGEND] * 100) / $total, 2, ".", ",")?>%)
                                </td>
                            </tr>
                            <tr class='color_hero'>
                                <td>
                                    Hero:
                                </td>
                                <td>
                                    <?=$page->drop_rune_quality[QUALITY_ID::HERO]?>
                                </td>
                                <td>
                                    (<?=number_format(($page->drop_rune_quality[QUALITY_ID::HERO] * 100) / $total, 2, ".", ",")?>%)
                                </td>
                            </tr>
                            <tr class='color_rare'>
                                <td>
                                    Rare:
                                </td>
                                <td>
                                    <?=$page->drop_rune_quality[QUALITY_ID::RARE]?>
                                </td>
                                <td>
                                    (<?=number_format(($page->drop_rune_quality[QUALITY_ID::RARE] * 100) / $total, 2, ".", ",")?>%)
                                </td>
                            </tr>
                            <tr class='color_magic'>
                                <td>
                                    Magic:
                                </td>
                                <td>
                                    <?=$page->drop_rune_quality[QUALITY_ID::MAGIC]?>
                                </td>
                                <td>
                                    (<?=number_format(($page->drop_rune_quality[QUALITY_ID::MAGIC] * 100) / $total, 2, ".", ",")?>%)
                                </td>
                            </tr>
                            <tr class='color_normal'>
                                <td>
                                    Normal:
                                </td>
                                <td>
                                    <?=$page->drop_rune_quality[QUALITY_ID::NORMAL]?>
                                </td>
                                <td>
                                    (<?=number_format(($page->drop_rune_quality[QUALITY_ID::NORMAL] * 100) / $total, 2, ".", ",")?>%)
                                </td>
                            </tr>
                        </table>
                    </div>
                </article>
            </section>
<?php
        }
        include __DIR__ . "/inc/footer.php";
?>
    </body>
</html>