From 2baa70c2c28ff4ee6258c28d3e787d263990e59a Mon Sep 17 00:00:00 2001 From: dario-cfpt Date: Tue, 28 Jan 2020 08:33:46 +0100 Subject: [PATCH] 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 +- mobile/www/index.html | 1 + mobile/www/js/comparator.js | 117 +++++++++++++++++++++++++++++++ mobile/www/js/graph.js | 23 +++--- mobile/www/js/index.js | 3 + mobile/www/js/routes.js | 16 ++++- mobile/www/js/stats.js | 9 ++- mobile/www/pages/comparator.html | 63 +++++++++++++---- 8 files changed, 205 insertions(+), 29 deletions(-) create mode 100644 mobile/www/js/comparator.js diff --git a/mobile/package.json b/mobile/package.json index de5819d..3be0821 100644 --- a/mobile/package.json +++ b/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" diff --git a/mobile/www/index.html b/mobile/www/index.html index 2e9a254..0049461 100644 --- a/mobile/www/index.html +++ b/mobile/www/index.html @@ -91,6 +91,7 @@ + diff --git a/mobile/www/js/comparator.js b/mobile/www/js/comparator.js new file mode 100644 index 0000000..6598b03 --- /dev/null +++ b/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 = ""; + $$("#select-compare").append(optgroup); + }); + characters.forEach(char => { + const 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 = $$(""); + const tdName = $$("" + char.firstName + ""); + const tdClass = $$("" + "none" + ""); + 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(); +} diff --git a/mobile/www/js/graph.js b/mobile/www/js/graph.js index 73696cd..f81a0b1 100644 --- a/mobile/www/js/graph.js +++ b/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: {point.y}%' + pointFormat: '{series.name}: {point.y}%' }, 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: '{point.y}%
' + pointFormat: '{series.name}: {point.y}%
' }, - series: [{ - name: 'Growth Rates', - data: data, - pointPlacement: 'on' - }], + series: series, responsive: { rules: [{ condition: { diff --git a/mobile/www/js/index.js b/mobile/www/js/index.js index 8610932..64672ac 100644 --- a/mobile/www/js/index.js +++ b/mobile/www/js/index.js @@ -73,6 +73,9 @@ function displayCharacters() { keys: ['from', 'to'], } }, + credits: { + enabled: false + }, series: [{ dataLabels: { enabled: true, diff --git a/mobile/www/js/routes.js b/mobile/www/js/routes.js index 50d8ea1..d90cb03 100644 --- a/mobile/www/js/routes.js +++ b/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/', diff --git a/mobile/www/js/stats.js b/mobile/www/js/stats.js index bc9f12c..22a3111 100644 --- a/mobile/www/js/stats.js +++ b/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) { diff --git a/mobile/www/pages/comparator.html b/mobile/www/pages/comparator.html index 7371174..3e9c249 100644 --- a/mobile/www/pages/comparator.html +++ b/mobile/www/pages/comparator.html @@ -1,19 +1,54 @@ -
-
-
-
-
- - menu - menu - -
-
Fire Emblem Charts
+
+
+
+
+ + menu + menu +
+
Comparator
-
-
-

Comparator page

+
+
+
+ + + + + + + + + +
CharacterClass
+ + + + + +
+
+
    +
  • +
    + +
    +
    • +
+
+
+
+
+

+ + +