Add comparator of characters

The user can now compare the stats of multiple characters with two
graph (column graph and polar spider).

Small refactor of the displayPolarSpider function to work in all pages.

mobile/www/js/comparator.js

@@ -0,0 +1,117 @@
+/*
+File name : comparator.js
+Description : Allow the user to compare multiple characters
+ */
+
+const GRAPH_CONTAINER_COMPARATOR_ID = "container-comparator";
+let smartComparator;
+let selectedCharacters = [];
+
+function configureSmartSelectOfCharacters() {
+    const characters = feData.characters;
+    const houses = feData.houses;
+
+    // Create the options of the select
+    houses.forEach(house => {
+        const optgroup = "<optgroup id='optgroup-house-" + house.id + "' label='" + house.name + "'>";
+        $$("#select-compare").append(optgroup);
+    });
+    characters.forEach(char => {
+        const option = "<option id='" + char.id + "'>" + char.firstName + "</option>";
+        $$("#optgroup-house-" + char.idHouse).append(option);
+    });
+
+    // Configure the smartselect
+    smartComparator = app.smartSelect.create({
+        el: '.smart-select',
+    });
+    smartComparator.open();
+
+    smartComparator.on("close", () => {
+        displayComparedCharacters();
+    });
+
+    $$("#btn-compare").on("click", () => {
+        smartComparator.open();
+    });
+}
+
+function displayComparedCharacters() {
+    const selectedCharactersName = smartComparator.getValue();
+
+    selectedCharacters = [];
+    selectedCharactersName.forEach(name => {
+        selectedCharacters.push(feData.characters.find(x => x.firstName == name));
+    });
+
+    $$("#table-comparator-content").empty();
+
+    selectedCharacters.forEach(char => {
+        // Fill the table
+        const tr = $$("<tr>");
+        const tdName = $$("<td>" + char.firstName + "</td>");
+        const tdClass = $$("<td>" + "none" + "</td>");
+        tr.append(tdName);
+        tr.append(tdClass);
+        $$("#table-comparator-content").append(tr);
+    });
+
+    displayCurrentGraph();
+}
+
+function displayCurrentGraph() {
+    if ($$("#btn-graph-column-chart").hasClass("button-active")) {
+        compareWithColumnGraph();
+    } else {
+        compareWithPolarSpider();
+    }
+}
+
+function compareWithColumnGraph() {
+    const statsNames = feData.stats.map(x => x.name);
+    const charactersData = [];
+
+    selectedCharacters.forEach(char => {
+        // Create the graph
+        const statsValues = [];
+        const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == char.id) ? x : null).filter((x) => x != null);
+        const charData = {
+            name: char.firstName,
+            stack: char.id,
+        };
+
+        charGrowthRates.forEach(gr => {
+            statsValues.push(gr.value);
+        });
+        charData.data = statsValues;
+
+        charactersData.push((charData));
+    });
+
+    displayColumnChart(GRAPH_CONTAINER_COMPARATOR_ID, statsNames, charactersData);
+}
+
+function compareWithPolarSpider() {
+    const charactersData = [];
+    const statsNames = feData.stats.map(x => x.name);
+
+
+    selectedCharacters.forEach(char => {
+        const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == char.id) ? x : null).filter((x) => x != null);
+        const statsValues = charGrowthRates.map(x => x.value);
+        const charData = {
+            name: char.firstName,
+            data: statsValues,
+        };
+
+        charactersData.push(charData);
+    });
+
+    displayPolarSpider(GRAPH_CONTAINER_COMPARATOR_ID, statsNames, charactersData);
+}
+
+function switchGraph(event) {
+    $$(".button-active").removeClass("button-active");
+    $$(event.target).addClass("button-active");
+    displayCurrentGraph();
+}

mobile/www/js/graph.js

@@ -3,8 +3,8 @@ File name : graph.js
 Description : Display some graphs according to their settings
  */
 
-function displayColumnChart(categories, data) {
-    Highcharts.chart('container-char-gr', {
+function displayColumnChart(containerId, categories, data) {
+    Highcharts.chart(containerId, {
         chart: {
             type: 'column'
         },
@@ -12,7 +12,7 @@ function displayColumnChart(categories, data) {
             text: ''
         },
         tooltip: {
-            pointFormat: 'Growth Rates: <b>{point.y}%</b>'
+            pointFormat: '{series.name}: <b>{point.y}%</b>'
         },
         xAxis: {
             categories: categories,
@@ -33,8 +33,8 @@ function displayColumnChart(categories, data) {
     });
 }
 
-function displayPolarSpider(categories, data) {
-    Highcharts.chart('container-char-gr', {
+function displayPolarSpider(containerId, categories, series) {
+    Highcharts.chart(containerId, {
         chart: {
             polar: true,
             type: 'line'
@@ -58,15 +58,16 @@ function displayPolarSpider(categories, data) {
             lineWidth: 0,
             min: 0,
         },
+        plotOptions: {
+            series: {
+                pointPlacement: 'on'
+            }
+        },
         tooltip: {
             shared: true,
-            pointFormat: '<span style="color:{series.color}"><b>{point.y}%</b><br/>'
+            pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y}%</b><br/>'
         },
-        series: [{
-            name: 'Growth Rates',
-            data: data,
-            pointPlacement: 'on'
-        }],
+        series: series,
         responsive: {
             rules: [{
                 condition: {

mobile/www/js/index.js

@@ -73,6 +73,9 @@ function displayCharacters() {
                 keys: ['from', 'to'],
             }
         },
+        credits: {
+            enabled: false
+        },
         series: [{
             dataLabels: {
                 enabled: true,

mobile/www/js/routes.js

@@ -39,7 +39,21 @@ routes = [
     },
     {
         path: '/comparator/',
-        templateUrl: './pages/comparator.html'
+        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);
+                });
+            },
+            // We must use the pageAfterIn event in order to open the smartselect directly
+            pageAfterIn: (e, page) => {
+                configureSmartSelectOfCharacters();
+            }
+        }
     },
     {
         path: '/about/',

mobile/www/js/stats.js

@@ -6,6 +6,7 @@ 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;
 
 function createTableOfStats() {
@@ -60,15 +61,19 @@ function displayColumnChartOfGrowthRates(charId) {
     });
     charData.data = statsValues;
 
-    displayColumnChart(statsNames, [charData]); // The data must be an array
+    displayColumnChart(GRAPH_CONTAINER_GR_ID, statsNames, [charData]); // The data must be an array
 }
 
 function displayPolarSpiderOfGrowthRates(charId) {
     const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null);
     const statsNames = feData.stats.map(x => x.name);
     const statsValues = charGrowthRates.map(x => x.value);
+    const charData = [{
+        name: feData.characters.find(x => x.id == charId).firstName,
+        data: statsValues,
+    }];
 
-    displayPolarSpider(statsNames, statsValues);
+    displayPolarSpider(GRAPH_CONTAINER_GR_ID, statsNames, charData);
 }
 
 function displayPieChartOfGrowthRates(charId) {