dario.genga/FE_Charts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add classes for the stat page

Browse Source 
Also removed the pie chart graph because it wasn't really useful.
This commit is contained in:
dario-cfpt
2020-02-04 08:45:43 +01:00
parent f0ed0e519c
commit fa173d1f19
8 changed files with 73 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
mobile/www/index.html
View File

@ -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>

20
mobile/www/js/comparator.js
View File

@ -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();
}

14
mobile/www/js/feclass.js Normal file
View File

@ -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
}

35
mobile/www/js/graph.js
View File

@ -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,
}]
});
}

25
mobile/www/js/routes.js
View File

@ -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);
});
}

63
mobile/www/js/stats.js
View File

@ -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);
}

4
mobile/www/pages/comparator.html
View File

@ -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">Spider web</button>
<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>

13
mobile/www/pages/stat.html
View File

@ -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...">
<option value="column-chart">Column chart</option>
<option value="pie-chart">Pie chart</option>
<option value="spider-web">Spider web</option>
<select id="select-classes" placeholder="Please choose...">
</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>