Add graphs for the growth rates of a character

The visual of the graphs remains to be improved according to the size of
the screen.

mobile/www/js/index.js

@@ -1,5 +1,9 @@
-const baseUrl = "http://localhost:3000/";
-const primaryNodeName = "Fire Emblem Three House";
+const BASE_URL = "http://localhost:3000/";
+const PRIMARY_NODE_NAME = "Fire Emblem Three House";
+const GRAPH_PIE_CHART_VALUE = "pie-chart";
+const GRAPH_SPIDER_WEB_VALUE = "spider-web";
+const GRAPH_COLUMN_CHART_VALUE = "column-chart";
+let actualCharId;
 
 let feData = JSON.parse(localStorage.getItem("feData"));
 
@@ -12,7 +16,7 @@ function updateData(data) {
 }
 
 if (feData != null) {
-    fetch(baseUrl + "update", {
+    fetch(BASE_URL + "update", {
         method: "POST",
         body: JSON.stringify({version: feData.version}),
         headers: {
@@ -33,7 +37,7 @@ if (feData != null) {
             console.log(err);
         });
 } else {
-    fetch(baseUrl + "all")
+    fetch(BASE_URL + "all")
         .then(res => {
             if (res.ok) {
                 return res.json();
@@ -56,13 +60,14 @@ function displayCharacters() {
 
     // Format the data for the network graph ([House name, Character first name]
     houses.forEach(house => {
-        housesWithCharacters.push([primaryNodeName, house.name]);
+        housesWithCharacters.push([PRIMARY_NODE_NAME, house.name]);
     });
     characters.forEach(char => {
         const house = houses.find(x => x.id === char.idHouse);
         housesWithCharacters.push([house.name, char.firstName]);
     });
 
+    // Create the network graph
     Highcharts.addEvent(
         Highcharts.Series,
         'afterSetOptions',
@@ -74,9 +79,9 @@ function displayCharacters() {
             if (this instanceof Highcharts.seriesTypes.networkgraph && e.options.id === 'char-tree') {
                 e.options.data.forEach(function (link) {
 
-                    if (link[0] === primaryNodeName) {
-                        nodes[primaryNodeName] = {
-                            id: primaryNodeName,
+                    if (link[0] === PRIMARY_NODE_NAME) {
+                        nodes[PRIMARY_NODE_NAME] = {
+                            id: PRIMARY_NODE_NAME,
                             marker: {
                                 radius: 20
                             }
@@ -103,10 +108,10 @@ function displayCharacters() {
         }
     );
 
-    Highcharts.chart('container', {
+    Highcharts.chart('container-characters', {
         chart: {
             type: 'networkgraph',
-            height: '25%'
+            height: '200%'
         },
         title: {
             text: ''
@@ -137,3 +142,186 @@ function displayCharacters() {
 
 }
 
+function createTableOfStats() {
+    const stats = feData.stats;
+    stats.forEach(stat => {
+        const th = $$(`<th>${stat.shortName}</th>`);
+        const td = $$(`<td id="stat-${stat.id}"></td>`);
+        $$("#table-gr-header").append(th);
+        $$("#table-gr-content").append(td);
+    });
+}
+
+function displayTableOfGrowthRates() {
+    const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == actualCharId) ? x : null).filter((x) => x != null);
+
+    charGrowthRates.forEach(gr => {
+        $$("#stat-" + gr.idStat).text(gr.value);
+    });
+
+    displayGraphOfGrowthRates();
+}
+
+function displayGraphOfGrowthRates() {
+    const selectedGraph = $$("#select-graph").val();
+
+    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;
+    }
+}
+
+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);
+
+    Highcharts.chart('container-char-gr', {
+        chart: {
+            polar: true,
+            type: 'line'
+        },
+        title: {
+            text: '',
+        },
+        pane: {
+            size: '100%'
+        },
+        credits: {
+            enabled: false
+        },
+        xAxis: {
+            categories: statsNames,
+            tickmarkPlacement: 'on',
+            lineWidth: 0,
+        },
+        yAxis: {
+            gridLineInterpolation: 'polygon',
+            lineWidth: 0,
+            min: 0,
+        },
+        tooltip: {
+            shared: true,
+            pointFormat: '<span style="color:{series.color}"><b>{point.y}%</b><br/>'
+        },
+        series: [{
+            name: 'Growth Rates',
+            data: statsValues,
+            pointPlacement: 'on'
+        }],
+        responsive: {
+            rules: [{
+                condition: {
+                    maxWidth: 800
+                },
+                chartOptions: {
+                    pane: {
+                        size: '50%'
+                    }
+                }
+            }]
+        }
+
+    });
+}
+
+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);
+    });
+
+
+    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: statsValues,
+        }]
+    });
+
+}
+
+function displayColumnChartOfGrowthRates(charId) {
+    const charFirstName = feData.characters.find(x => x.id == charId).firstName;
+    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 = [];
+    const charData = {
+        name: charFirstName,
+    };
+
+    charGrowthRates.forEach(gr => {
+        statsValues.push(gr.value);
+    });
+    charData.data = statsValues;
+
+    Highcharts.chart('container-char-gr', {
+        chart: {
+            type: 'column'
+        },
+        title: {
+            text: ''
+        },
+        tooltip: {
+            pointFormat: 'Growth Rates: <b>{point.y}%</b>'
+        },
+        xAxis: {
+            categories: statsNames
+        },
+        credits: {
+            enabled: false
+        },
+        plotOptions: {
+            column: {
+                stacking: 'normal',
+                dataLabels: {
+                    enabled: true,
+                    format: '{point.y}%'
+                }
+            }
+        },
+        series: [charData],
+    });
+}