From 703af3944bdf41ffb24c68075b9c6d4a8cc3ceff Mon Sep 17 00:00:00 2001
From: Aryan Kothari <87589047+thearyadev@users.noreply.github.com>
Date: Thu, 21 Dec 2023 14:02:30 -0500
Subject: [PATCH] 74 improve chart draw performance (#83)

* Use cache to load pre-calculated data

* remove dead code

* use cache
---
 static/js/season.js | 46 +++++++++++++++++++++++++++++----------------
 static/js/trends.js | 24 ++++++++++++++++-------
 2 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/static/js/season.js b/static/js/season.js
index 97b54a83..c32b25c0 100644
--- a/static/js/season.js
+++ b/static/js/season.js
@@ -17,6 +17,10 @@ const charts = [ // define all chart ids here
     'OTMP_DAMAGE_ALL', 'OTMP_TANK_ALL', 'O_ALL_AMERICAS', 'O_ALL_EUROPE',
     'O_ALL_ASIA', 'O_ALL_ALL', 
 ]
+
+const chartCache = {}
+
+
 const hero_color_data = $("colors").data().herocolors
 function map_multi_array(arrayOfObjects){
     const heroes = [];
@@ -30,29 +34,39 @@ function map_multi_array(arrayOfObjects){
 
 }
 
+
+
 function drawChart(chartName) {
+    if (!chartCache.hasOwnProperty(chartName)){ // chart not in cache
+        const chartElement = $(`#${chartName}`)
+
+        const chartDataRaw = chartElement.data().graphdata
+        const [heroes, counts] = map_multi_array(chartDataRaw.graph)
+        const stats = chartDataRaw.statistic
+        const entries = counts.reduce((acc, cur) => acc + cur, 0)
+        const chartTypeBreakdown = chartName.split("_")
+        let yAxisLength = 300; // standard size for all single role single region charts
+        if (chartName === "O_ALL_ALL"){ // o type, all roles, all regions
+            yAxisLength = 1250
+        }else if (chartTypeBreakdown[chartTypeBreakdown.length - 1] === "ALL" || chartTypeBreakdown[0] === "O") { // all roles, single region or O-type chart
+            yAxisLength = 500
+        }
+
+        chartCache[chartName] = {
+            heroes, counts, stats, entries, yAxisLength, chartElement
+        }
 
-    const chartElement = $(`#${chartName}`)
-    const chartDataRaw = chartElement.data().graphdata
-    const [heroes, counts] = map_multi_array(chartDataRaw.graph)
-    const stats = chartDataRaw.statistic
-    const entries = counts.reduce((acc, cur) => acc + cur, 0)
-    const chartTypeBreakdown = chartName.split("_")
-    let yAxisLength = 300; // standard size for all single role single region charts
-    if (chartName === "O_ALL_ALL"){ // o type, all roles, all regions
-        yAxisLength = 1250
-    }else if (chartTypeBreakdown[chartTypeBreakdown.length - 1] === "ALL" || chartTypeBreakdown[0] === "O") { // all roles, single region or O-type chart
-        yAxisLength = 500
     }
 
 
+    const chartDataCached = chartCache[chartName]
     Highcharts.chart(chartName, {
         chart: {
             type: 'column',
             margin: [75, 50, 75, 50]
         },
         xAxis: {
-            categories: heroes,
+            categories: chartDataCached.heroes,
             crosshair: true,
             accessibility: {
                 description: 'Heroes'
@@ -60,7 +74,7 @@ function drawChart(chartName) {
         },
         yAxis: {
             min: 0,
-            max: yAxisLength,
+            max: chartDataCached.yAxisLength,
             title: {
                 text: 'Occurrences'
             }
@@ -74,10 +88,10 @@ function drawChart(chartName) {
         series: [
             {
                 name: `Occurrences`,
-                data: counts.map((item, index) => {
+                data: chartDataCached.counts.map((item, index) => {
                     return {
                         y: item,
-                        color: lookup_hero_color(heroes[index])
+                        color: lookup_hero_color(chartDataCached.heroes[index])
                         }
                 })
             },
@@ -85,7 +99,7 @@ function drawChart(chartName) {
     });
 
 
-    chartElement.parent().append(`<p class='chart-stats small text-muted'><small>Mean: ${stats?.mean} | Variance: ${stats?.variance} | Standard Deviation: ${stats?.standard_deviation} | # Entires: ${entries}</small></p>`)
+    chartDataCached.chartElement.parent().append(`<p class='chart-stats small text-muted'><small>Mean: ${chartDataCached?.mean} | Variance: ${chartDataCached?.variance} | Standard Deviation: ${chartDataCached?.standard_deviation} | # Entires: ${chartDataCached.entries}</small></p>`)
 
 }
 
diff --git a/static/js/trends.js b/static/js/trends.js
index dd792ab7..c37ff2d4 100644
--- a/static/js/trends.js
+++ b/static/js/trends.js
@@ -1,14 +1,24 @@
 
 const hero_color_data = $("colors").data().herocolors
+const cache = {
 
+}
 
-function drawHeroTrendChartAllRegions() {
-    const chartElement = $('#T_ALL_ALL')
-    const data = $('data').data().trends
-    const seasons = JSON.parse($('seasons').data().seasons.replace(/'/g, '"')).map(item => item.split("_")[0])
 
+function drawHeroTrendChartAllRegions() {
+    const chartName = "HeroTrendChartAllRegions"
+    if (!cache.hasOwnProperty(chartName)){
+        const chartElement = $('#T_ALL_ALL')
+        const data = $('data').data().trends
+        const seasons = JSON.parse($('seasons').data().seasons.replace(/'/g, '"')).map(item => item.split("_")[0])
+        cache[chartName] = {
+            data,
+            seasons
+        }
+    }
 
 
+    const cachedData = cache[chartName]
 Highcharts.chart('T_ALL_ALL', {
     legend: {
         layout: 'vertical',
@@ -16,9 +26,9 @@ Highcharts.chart('T_ALL_ALL', {
         verticalAlign: 'middle'
     },
     xAxis: {
-        categories:  seasons,
+        categories:  cachedData.seasons,
         min: 0, // Replace with your actual minimum value
-        max: seasons.length -1, // Replace with your actual maximum value
+        max: cachedData.seasons.length -1, // Replace with your actual maximum value
         startOnTick: false,
         endOnTick: false,
     },
@@ -39,7 +49,7 @@ Highcharts.chart('T_ALL_ALL', {
 
 
 
-    series: data.map(item => {
+    series: cachedData.data.map(item => {
     console.log(item)
      return {
         color: lookup_hero_color(item.name),