Forráskód Böngészése

Filters for stats. Pretty graphics.

Iñigo Valentin 6 éve
szülő
commit
42dcf364c4

+ 13 - 8
application/page/Stats_Page.php

@@ -23,7 +23,7 @@
         /**
          * @var bool Indicates if there is data to show.
          */
-        public $show_data = false;
+        public $show_data = true;
 
         /**
          * @var Run The best run for the selected area
@@ -92,12 +92,22 @@
             global $db;
             $best_run = null;
             $this->view = PATH::VIEW . "stats.php";
+            $this->title = "Stats - SWDB";
+            $this->description = "Player statistics";
+            $this->canonical = URL::BASE . "stats/";
+
             $this->parse_filters();
 
+            // If no filters, stop
+            if ($this->filters["AREA"] == null){
+                $this->show_data = false;
+                return;
+            }
+
             // TODO DEBUG Force NB10
-            $this->filters["AREA"] = 6001;
+            /*$this->filters["AREA"] = 6001;
             $this->filters["AREA_TYPE"] = 2;
-            $this->filters["STAGE"] = 10;
+            $this->filters["STAGE"] = 10;*/
             // TODO END DEBUG
 
             // Build query modifier:
@@ -214,11 +224,6 @@
             while ($r = $q->fetchArray(SQLITE3_ASSOC)){
                 $this->drop_rune_quality[strval($r["quality"])] = $r["count"];
             }
-            
-            
-            $this->title = "Stats - SWDB";
-            $this->description = "Player statistics";
-            $this->canonical = URL::BASE . "stats/";
         }
 
         /**

+ 16 - 11
application/view/inc/filter_stats.php

@@ -9,32 +9,33 @@
      * @property_read int $page Player ID.
      */
 ?>
-<form action='/<?=$UID?>/runs/' method='get' id='filter_runeupgrade' class='filter'>
+<form action='/<?=$UID?>/stats/' method='get' id='filter_runeupgrade' class='filter'>
     <table>
+        <tr>
+            <td class='filter'>
+                <span>Area:</span>
+            </td>
+        </tr>
         <tr>
             <td class='filter'>
 <?php
                 $selected = array_fill(0, 12 + 1, "");
                 $selected[$filters["AREA_TYPE"]] = "selected";
 ?>
-                <span>Region:</span>
-                <select name='area_type' id='filter_area'>
-                    <option value='0'>All</option>
+                <select name='area_type' id='filter_area_type' onChange='selectAreaType();'>
+                    <option value='0'></option>
                     <option value='<?=AREA_TYPE_ID::SCENARIO?>' <?=$selected[AREA_TYPE_ID::SCENARIO]?>>Scenario</option>
                     <option value='<?=AREA_TYPE_ID::CAIROS_DUNGEON?>' <?=$selected[AREA_TYPE_ID::CAIROS_DUNGEON]?>>Cairos Dungeon</option>
                     <option value='<?=AREA_TYPE_ID::RIFT_DUNGEON?>' <?=$selected[AREA_TYPE_ID::RIFT_DUNGEON]?>>Rift Beast</option>
                     <option value='<?=AREA_TYPE_ID::RIFT_RAID?>' <?=$selected[AREA_TYPE_ID::RIFT_RAID]?>>Rift Raid</option>
                     <option value='<?=AREA_TYPE_ID::DIMENSIONAL_HOLE?>' <?=$selected[AREA_TYPE_ID::DIMENSIONAL_HOLE]?>>Dimensional Hole</option>
                 </select>
-            </td>
-            <td class='filter'>
 <?php
                 $selected = array_fill(0, 9002, "");
                 $selected[$filters["AREA"]] = "selected";
 ?>
-                <span>Area:</span>
-                <select name='area_scenario'>
-                    <option value='0'>All</option>
+                <select class='filter_area' id='filter_area_scenario'>
+                    <option value='0'></option>
                     <option value='1' <?=$selected[1]?>>Garen Forest</option>
                     <option value='2' <?=$selected[2]?>>Mt. Siz</option>
                     <option value='3' <?=$selected[3]?>>Kabir Ruins</option>
@@ -49,8 +50,8 @@
                     <option value='12' <?=$selected[12]?>>Mt. Runar</option>
                     <option value='13' <?=$selected[13]?>>Charuka Remains</option>
                 </select>
-                <select name='area_cairos'>
-                    <option value='0'>All</option>
+                <select class='filter_area' id='filter_area_cairos'>
+                    <option value='0'></option>
                     <option value='1001' <?=$selected[1001]?>>Hall of Dark</option>
                     <option value='2001' <?=$selected[2001]?>>Hall of Fire</option>
                     <option value='3001' <?=$selected[3001]?>>Hall of Water</option>
@@ -61,6 +62,10 @@
                     <option value='8001' <?=$selected[8001]?>>Giant&#39;s Keep</option>
                     <option value='9001' <?=$selected[9001]?>>Dragon&#39;s Lair</option>
                 </select>
+                <select id='filter_stage' name='stage'>
+                </select>
+                <select id='filter_difficulty' name='difficulty'>
+                </select>
             </td>
         </tr>
     </table>

+ 460 - 250
application/view/stats.php

@@ -55,15 +55,165 @@
                     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(){
-                diagramWin();
-                diagramDropType();
-                diagramDropRuneSlot();
-                diagramDropRuneStars();
-                diagramDropRuneQuality();
+<?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");
@@ -71,7 +221,10 @@
                 var lastend = 0;
                 var data = [<?=$page->win_lose[0]?>, <?=$page->win_lose[1]?>];
                 var total = 0;
-                var color = ['#00ff00','#ff0000'];
+                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];
@@ -90,6 +243,9 @@
                 }
             }
 
+            /**
+             * Generates the drop rate diagram.
+             */
             function diagramDropType(){
                 // TODO: Diferenciate scenario, dungeon and hall.
                 var canvas = document.getElementById("diagram_drop_type");
@@ -105,12 +261,17 @@
                     <?=$page->drop_type["unit"]?>,
                 ];
                 var total = 0;
-                var color = ['#00ff00', '#ff0000', '#0000ff' , '#ffff00', '#ff00ff', '#00ffff'];
-
+                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];
+                    total += data[e];
                 }
-
                 for (var i = 0; i < data.length; i++) {
                     ctx.beginPath();
                     ctx.moveTo(canvas.width/2, canvas.height/2);
@@ -124,6 +285,9 @@
                 }
             }
 
+            /**
+             * Generates the rune slot rate diagram.
+             */
             function diagramDropRuneSlot(){
                 var canvas = document.getElementById("diagram_rune_slot");
                 var data = [
@@ -139,9 +303,12 @@
                 // Polarchart base
                 var ctx_base = canvas.getContext("2d");
                 ctx_base.lineWidth = 1;
-                var lastend = Math.PI / total;
+                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++) {
-                    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);
@@ -150,7 +317,17 @@
                     lastend += (Math.PI * 2 / total);
                 }
                 ctx_base.fillStyle = '#33333366';
-                ctx_base.fill()
+                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");
@@ -186,6 +363,9 @@
                 ctx_data.fill(region)
             }
 
+            /**
+             * Generates the rune star rate diagram.
+             */
             function diagramDropRuneStars(){
                 var canvas = document.getElementById("diagram_rune_stars");
                 var data = [
@@ -201,7 +381,10 @@
                 // Polarchart base
                 var ctx_base = canvas.getContext("2d");
                 ctx_base.lineWidth = 1;
-                var lastend = Math.PI / total;
+                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);
@@ -212,7 +395,17 @@
                     lastend += (Math.PI * 2 / total);
                 }
                 ctx_base.fillStyle = '#33333366';
-                ctx_base.fill()
+                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");
@@ -248,6 +441,9 @@
                 ctx_data.fill(region)
             }
 
+            /**
+             * Generates the rune quality rate diagram.
+             */
             function diagramDropRuneQuality(){
                 var canvas = document.getElementById("diagram_rune_quality");
                 var data = [
@@ -263,18 +459,28 @@
                 var ctx_base = canvas.getContext("2d");
                 ctx_base.lineWidth = 1;
                 //var lastend = Math.PI * 2 / (0.5 * total / Math.PI);
-                var lastend = 270 * Math.PI / 180;
+                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()
+                //ctx_base.fillStyle = '#33333366';
+                //ctx_base.fill()
 
                 // Polarchart content
                 var ctx_data = canvas.getContext("2d");
@@ -319,7 +525,7 @@
         include __DIR__ . "/inc/header.php";
 ?>
         <section class='filters'>
-            <h2 id='filters_title' onClick='toggleFilters();'>
+            <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>
@@ -331,262 +537,266 @@
             </article>
 
         </section> <!-- #filters -->
-        <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;
+        if ($page->show_data){
 ?>
-                        <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'>
+            <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
-                        $total = array_sum($page->drop_rune_slot);
-                        for ($i = 1; $i <= 6; $i ++){
-                            $val = $page->drop_rune_slot[strval($i)]
+                            // 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_0'>
+                            <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>
-                                    Slot <?=$i?>:
+                                    (<?=number_format(($shap * 100) / $total, 2, ".", ",")?>%)
+                                </td>
+                            </tr>
+                            <tr class='color_6'>
+                                <td>
+                                    Unit:
                                 </td>
                                 <td>
-                                     <?=$val?>
+                                    <?=$unit?>
                                 </td>
                                 <td>
-                                    (<?=number_format(($val * 100) / $total, 2, ".", ",")?>%)
+                                    (<?=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)]
 ?>
-                    </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'>
+                                <tr class='color_0'>
+                                    <td>
+                                        Slot <?=$i?>:
+                                    </td>
+                                    <td>
+                                         <?=$val?>
+                                    </td>
+                                    <td>
+                                        (<?=number_format(($val * 100) / $total, 2, ".", ",")?>%)
+                                    </td>
+                                </tr>
 <?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>
+                        </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
-                                    for ($j = 1; $j <= $i; $j ++){
+                            $total = array_sum($page->drop_rune_stars);
+                            for ($i = 6; $i >= 1; $i --){
+                                $val = $page->drop_rune_stars[strval($i)]
 ?>
-                                        <img class='star star_gold' src='<?=URL::IMG["ICON"]?>star.png'/>
+                                <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>
-                                    <?=$val?>
+                                    <?=$page->drop_rune_quality[QUALITY_ID::LEGEND]?>
                                 </td>
                                 <td>
-                                    (<?=number_format(($val * 100) / $total, 2, ".", ",")?>%)
+                                    (<?=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
-                        }
-?>
-                    </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>

+ 21 - 9
public/css/stats.css

@@ -2,26 +2,38 @@ div.diagram{
     display: inline-block;
     vertical-align: top;
     text-align: center;
-    border: 0.2em solid #000000;
+    border: 0.2em solid #c8ad78;
+    background-color: #a4886c;
+    border-radius: 0.5em;
+    margin: 0.5em;
+    width: 275px;
+    height: 400px;
 }
 
 div.diagram h3{
-    
+    border-top-left-radius: 0.5em;
+    border-top-right-radius: 0.5em;
+    border-bottom: 0.1em solid #c8ad78;
+    margin: 0 0 0.5em 0;
+    padding: 0.5em;
+    background-color: #93775b;
 }
 
 div.diagram table.legend{
     list-style: none;
     text-align: left;
     font-weight: bold;
+    width: 100%;
+    font-size: 90%;
 }
 
 div.diagram table.legend tr.color_0{color: #ffffff;}
-div.diagram table.legend tr.color_1{color: #00ff00;}
-div.diagram table.legend tr.color_2{color: #ff0000;}
-div.diagram table.legend tr.color_3{color: #0000ff;}
-div.diagram table.legend tr.color_4{color: #ffff00;}
-div.diagram table.legend tr.color_5{color: #ff00ff;}
-div.diagram table.legend tr.color_6{color: #00ffff;}
+div.diagram table.legend tr.color_1{color: #33ff33;}
+div.diagram table.legend tr.color_2{color: #ff3333;}
+div.diagram table.legend tr.color_3{color: #6666ff;}
+div.diagram table.legend tr.color_4{color: #ffff33;}
+div.diagram table.legend tr.color_5{color: #ff33ff;}
+div.diagram table.legend tr.color_6{color: #33ffff;}
 div.diagram table.legend tr.color_normal{color: #cccccc;}
 div.diagram table.legend tr.color_magic{color: #55ff55;}
 div.diagram table.legend tr.color_rare{color: #15c6e1;}
@@ -29,7 +41,7 @@ div.diagram table.legend tr.color_hero{color: #ad7fa8;}
 div.diagram table.legend tr.color_legend{color: #f57900;}
 div.diagram table.legend td{
     padding-right: 1em;
-    text-shadow: 0 0 0.2em #000000;
+    text-shadow: 0 0 0.1em #000000;
 }
 
 div#drop_rune_stars img.star{