Add classes for the stat page

Also removed the pie chart graph because it wasn't really useful.

mobile/www/index.html

@@ -90,6 +90,7 @@
 <script src="js/app.js"></script>
 <script src="js/database.js"></script>
 <script src="js/graph.js"></script>
+<script src="js/feclass.js"></script>
 <script src="js/stats.js"></script>
 <script src="js/comparator.js"></script>
 <script src="js/index.js"></script>

mobile/www/js/comparator.js

@@ -49,18 +49,7 @@ function displayComparedCharacters() {
     $$("#table-comparator-content").empty();
 
     selectedCharacters.forEach(char => {
-        // Get all available classes for the character
+        const availableClasses = getAvailableClassesForCharacter(char);
-        const availableClasses = [];
-
-        feData.classes.forEach(feClass => {
-            if (feClass.isAvailableForAll && (feClass.idGender == ID_GENDER_NON_RESTRICTED || feClass.idGender == char.idGender)) {
-                availableClasses.push(feClass);
-            } else {
-                if (feData.restrictedClasses.find(x => x.idClass == feClass.id && x.idCharacter == char.id)) {
-                    availableClasses.push(feClass);
-                }
-            }
-        });
 
         // Create the select of available classes
         const selectContainer = $$("<div class='item-input-wrap input-dropdown-wrap'></div>");
@@ -166,8 +155,11 @@ function computeCharacterGrowthRatesWithClass(char) {
     return charData;
 }
 
-function switchGraph(event) {
+/**
+ * Change the style of the buttons used to choose the graph displayed and call the method to display the graph
+ */
+function switchGraph(event, callback) {
     $$("." + BUTTON_ACTIVE_CLASS_NAME).removeClass(BUTTON_ACTIVE_CLASS_NAME);
     $$(event.target).addClass(BUTTON_ACTIVE_CLASS_NAME);
-    displayCurrentGraph();
+    callback();
 }

mobile/www/js/feclass.js

@@ -0,0 +1,14 @@
+function getAvailableClassesForCharacter(char) {
+    const availableClasses = [];
+
+    feData.classes.forEach(feClass => {
+        if (feClass.isAvailableForAll && (feClass.idGender == ID_GENDER_NON_RESTRICTED || feClass.idGender == char.idGender)) {
+            availableClasses.push(feClass);
+        } else {
+            if (feData.restrictedClasses.find(x => x.idClass == feClass.id && x.idCharacter == char.id)) {
+                availableClasses.push(feClass);
+            }
+        }
+    });
+    return availableClasses
+}

mobile/www/js/graph.js

@@ -82,38 +82,3 @@ function displayPolarSpider(containerId, categories, series) {
         }
     });
 }
-
-function displayPieChart(data) {
-    Highcharts.chart('container-char-gr', {
-        chart: {
-            plotBackgroundColor: null,
-            plotBorderWidth: null,
-            plotShadow: false,
-            type: 'pie'
-        },
-        title: {
-            text: ''
-        },
-        tooltip: {
-            pointFormat: '{series.name}: <b>{point.y}%</b>'
-        },
-        credits: {
-            enabled: false
-        },
-        plotOptions: {
-            pie: {
-                allowPointSelect: true,
-                cursor: 'pointer',
-                dataLabels: {
-                    enabled: true,
-                    format: '<b>{point.name}</b>: {point.y}%'
-                },
-            }
-        },
-        series: [{
-            name: 'Growth Rates',
-            colorByPoint: true,
-            data: data,
-        }]
-    });
-}

mobile/www/js/routes.js

@@ -28,12 +28,10 @@ routes = [
                     $$("#picture-char").attr("src", "img/characters/" + char.firstName + ".png");
                     actualCharId = charId;
                     createTableOfStats();
+                    createListOfAvailableClasses()
                     displayTableOfGrowthRates();
-
-                    $$("#select-graph").on("change", () => {
-                        displayGraphOfGrowthRates();
-                    });
                 }
+                createEventForGraphSwitch(displayGraphOfGrowthRates);
             }
         }
     },
@@ -42,14 +40,7 @@ routes = [
         path: '/comparator/',
         templateUrl: './pages/comparator.html',
         on: {
-            pageInit: (e, page) => {
+            pageInit: (e, page) => createEventForGraphSwitch(displayCurrentGraph),
-                $$("#btn-graph-column-chart").on("click", (event) => {
-                    switchGraph(event);
-                });
-                $$("#btn-graph-spider-web").on("click", (event) => {
-                    switchGraph(event);
-                });
-            },
             // We must use the pageAfterIn event in order to open the smartselect directly
             pageAfterIn: (e, page) => {
                 configureSmartSelectOfCharacters();
@@ -68,3 +59,11 @@ routes = [
     },
 ];
 
+function createEventForGraphSwitch(callback) {
+    $$("#btn-graph-column-chart").on("click", (event) => {
+        switchGraph(event, callback);
+    });
+    $$("#btn-graph-spider-web").on("click", (event) => {
+        switchGraph(event, callback);
+    });
+}

mobile/www/js/stats.js

@@ -3,9 +3,6 @@ File name : stats.js
 Description : Display the stats of a character and/or class with various graphs
  */
 
-const GRAPH_PIE_CHART_VALUE = "pie-chart";
-const GRAPH_SPIDER_WEB_VALUE = "spider-web";
-const GRAPH_COLUMN_CHART_VALUE = "column-chart";
 const GRAPH_CONTAINER_GR_ID = "container-char-gr";
 let actualCharId;
 
@@ -29,21 +26,37 @@ function displayTableOfGrowthRates() {
     displayGraphOfGrowthRates();
 }
 
-function displayGraphOfGrowthRates() {
+function createListOfAvailableClasses() {
-    const selectedGraph = $$("#select-graph").val();
+    const char = feData.characters.find(x => x.id == actualCharId);
+    // Get all available classes for the character
+    const availableClasses = getAvailableClassesForCharacter(char);
 
-    switch (selectedGraph) {
+    // Create the select of available classes
-        case GRAPH_SPIDER_WEB_VALUE:
+    const select = $$("#select-classes");
-            displayPolarSpiderOfGrowthRates(actualCharId);
+    const defaultOption = $$("<option value='-1'>None</option>");
-            break;
+    select.append(defaultOption);
-        case GRAPH_PIE_CHART_VALUE:
+
-            displayPieChartOfGrowthRates(actualCharId);
+    availableClasses.forEach(feClass => {
-            break;
+        const option = $$("<option>");
-        case GRAPH_COLUMN_CHART_VALUE:
+        option.val(feClass.id);
-        default:
+        option.text(feClass.name);
-            displayColumnChartOfGrowthRates(actualCharId);
+        select.append(option);
-            // Column chart graph by default
+    });
-            break;
+
+    // select the first element
+    select.val(-1);
+
+    select.on("change", (e) => {
+        char.idClassSelected = Number($$(e.target).val());
+        displayGraphOfGrowthRates();
+    });
+}
+
+function displayGraphOfGrowthRates() {
+    if ($$("#btn-graph-column-chart").hasClass("button-active")) {
+        displayColumnChartOfGrowthRates(actualCharId);
+    } else {
+        displayPolarSpiderOfGrowthRates(actualCharId);
     }
 }
 
@@ -75,19 +88,3 @@ function displayPolarSpiderOfGrowthRates(charId) {
 
     displayPolarSpider(GRAPH_CONTAINER_GR_ID, statsNames, charData);
 }
-
-function displayPieChartOfGrowthRates(charId) {
-    const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null);
-    const statsValues = [];
-
-    charGrowthRates.forEach(gr => {
-        const nameStat = feData.stats.find(x => x.id == gr.idStat).name;
-        const statWithValue = {
-            name: nameStat,
-            y: gr.value,
-        };
-        statsValues.push(statWithValue);
-    });
-
-    displayPieChart(statsValues);
-}

mobile/www/pages/comparator.html

@@ -46,8 +46,8 @@
             </figure>
             <div class="block">
                 <p class="segmented segmented-raised segmented-round">
-                    <button id="btn-graph-column-chart" class="button button-round button-active">Column chart</button>
+                    <button id="btn-graph-spider-web" class="button button-round button-active">Spider web</button>
-                    <button id="btn-graph-spider-web" class="button button-round">Spider web</button>
+                    <button id="btn-graph-column-chart" class="button button-round">Column chart</button>
                 </p>
             </div>
         </div>

mobile/www/pages/stat.html

@@ -33,12 +33,9 @@
                             <i class="icon demo-list-icon"></i>
                         </div>
                         <div class="item-inner">
-                            <div class="item-title item-label">Graph</div>
+                            <div class="item-title item-label">Class</div>
                             <div class="item-input-wrap input-dropdown-wrap">
-                                <select id="select-graph" placeholder="Please choose...">
+                                <select id="select-classes" placeholder="Please choose...">
-                                    <option value="column-chart">Column chart</option>
-                                    <option value="pie-chart">Pie chart</option>
-                                    <option value="spider-web">Spider web</option>
                                 </select>
                             </div>
                         </div>
@@ -47,6 +44,12 @@
                 <figure class="highcharts-figure">
                     <div id="container-char-gr"></div>
                 </figure>
+                <div class="block">
+                    <p class="segmented segmented-raised segmented-round">
+                        <button id="btn-graph-spider-web" class="button button-round button-active">Spider web</button>
+                        <button id="btn-graph-column-chart" class="button button-round">Column chart</button>
+                    </p>
+                </div>
             </div>
         </div>
     </div>