Add classes for the stat page

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

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 = [];
-
-        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);
-                }
-            }
-        });
+        const availableClasses = getAvailableClassesForCharacter(char);
 
         // 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

@@ -81,39 +81,4 @@ 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) => {
-                $$("#btn-graph-column-chart").on("click", (event) => {
-                    switchGraph(event);
-                });
-                $$("#btn-graph-spider-web").on("click", (event) => {
-                    switchGraph(event);
-                });
-            },
+            pageInit: (e, page) => createEventForGraphSwitch(displayCurrentGraph),
             // We must use the pageAfterIn event in order to open the smartselect directly
             pageAfterIn: (e, page) => {
                 configureSmartSelectOfCharacters();
@@ -67,4 +58,12 @@ routes = [
         templateUrl: './pages/about.html'
     },
 ];
-  
+
+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() {
-    const selectedGraph = $$("#select-graph").val();
+function createListOfAvailableClasses() {
+    const char = feData.characters.find(x => x.id == actualCharId);
+    // Get all available classes for the character
+    const availableClasses = getAvailableClassesForCharacter(char);
 
-    switch (selectedGraph) {
-        case GRAPH_SPIDER_WEB_VALUE:
-            displayPolarSpiderOfGrowthRates(actualCharId);
-            break;
-        case GRAPH_PIE_CHART_VALUE:
-            displayPieChartOfGrowthRates(actualCharId);
-            break;
-        case GRAPH_COLUMN_CHART_VALUE:
-        default:
-            displayColumnChartOfGrowthRates(actualCharId);
-            // Column chart graph by default
-            break;
+    // Create the select of available classes
+    const select = $$("#select-classes");
+    const defaultOption = $$("<option value='-1'>None</option>");
+    select.append(defaultOption);
+
+    availableClasses.forEach(feClass => {
+        const option = $$("<option>");
+        option.val(feClass.id);
+        option.text(feClass.name);
+        select.append(option);
+    });
+
+    // 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);
-}