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/package.json

@@ -2,7 +2,7 @@
   "name": "net.dariogenga.fecharts",
   "displayName": "FE_Charts",
   "version": "1.0.0",
-  "description": "A sample Apache Cordova application that responds to the deviceready event.",
+  "description": "Fire Emblem Charts is a mobile application that allows you to view the statistics of the characters in the game Fire Emblem Three Houses in the form of graphics.",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

mobile/www/index.html

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

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) {

mobile/www/pages/comparator.html

@@ -1,5 +1,4 @@
-<div class="view safe-areas">
-    <div class="page">
+<div class="page page-comparator">
     <div class="navbar">
         <div class="navbar-inner">
             <div class="left">
@@ -8,12 +7,48 @@
                     <i class="icon material-icons md-only">menu</i>
                 </a>
             </div>
-                <div class="title sliding">Fire Emblem Charts</div>
+            <div class="title sliding">Comparator</div>
         </div>
     </div>
     <div class="page-content">
-            <div class="block block-strong">
-                <p>Comparator page</p>
+        <div class="card data-table data-table-collapsible data-table-init">
+            <table id="table-comparator">
+                <thead id="table-comparator-header">
+                <tr>
+                    <th>Character</th>
+                    <th>Class</th>
+                </tr>
+                </thead>
+                <tbody id="table-comparator-content">
+                </tbody>
+            </table>
+            <button id="btn-compare" class="button button-fill">Compare</button>
+            <a class="item-link smart-select smart-select-init" data-open-in="popup"  data-searchbar="true" data-searchbar-placeholder="Search a character...">
+                <select id="select-compare" multiple maxlength="8">
+                </select>
+                <div class="item-content" hidden>
+                    <div class="item-inner">
+                        <div class="item-title">Comparator</div>
+                    </div>
+                </div>
+            </a>
+        </div>
+        <div class="list no-hairlines-md">
+            <ul>
+                <li class="item-content item-input">
+                    <div class="item-media">
+                        <i class="icon demo-list-icon"></i>
+                    </div>
+                </li>
+            </ul>
+            <figure class="highcharts-figure">
+                <div id="container-comparator"></div>
+            </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">Spider web</button>
+                </p>
             </div>
         </div>
     </div>