[dashboard][Study Progression] Add tooltip visualising of Total in li…

…ne chart (#8123)

    Added total scan and recruitment data in their respective chart visualisations
    Added total calculation
    Updated related CSS
    Updated scale of chart appropriately
    Minor Spelling mistake fixes

    Resolves #8122

modules/statistics/css/recruitment.css

@@ -11,3 +11,6 @@
     background-color: #2FA4E7;
 }
 
+.c3-chart-line.c3-target.c3-target-Total{
+    display: none !important;
+}

modules/statistics/js/studyprogression.js

@@ -38,18 +38,38 @@ $(document).ready(function() {
             dataset.push(data.datasets[i].name);
             processedData.push(dataset.concat(data.datasets[i].data));
         }
+        var totals = new Array();
+        totals.push("Total");
+        for(var j=0; j<data.datasets[0].data.length; j++){
+            var total=0;
+            for(var i=0;i<data.datasets.length;i++){
+                total+=parseInt(data.datasets[i].data[j]);
+            }
+            totals.push(total);
+        }
+        processedData.push(totals);
         return processedData;
     }
 
+    function maxY(data){
+        var maxi=0;
+        for(var j=0; j<data.datasets[0].data.length; j++){
+            for(var i=0;i<data.datasets.length;i++){
+                maxi=Math.max(maxi,parseInt(data.datasets[i].data[j]));
+            }
+        }
+        return maxi;
+    }
+
 
     // AJAX to get scan line chart data
     $.ajax({
         url: loris.BaseURL + '/statistics/charts/scans_bymonth',
         type: 'get',
         success: function(data) {
-            let lengendNames = [];
+            let legendNames = [];
             for (let j=0; j<data.datasets.length; j++) {
-                lengendNames.push(data.datasets[j].name);
+                legendNames.push(data.datasets[j].name);
             }
             let scanLineData = formatLineData(data);
             scanLineChart = c3.generate({
@@ -74,6 +94,7 @@ $(document).ready(function() {
                         }
                     },
                     y: {
+                        max: maxY(data),
                         label: 'Scans'
                     }
                 },
@@ -87,7 +108,7 @@ $(document).ready(function() {
             d3.select('.scanChartLegend')
               .insert('div', '.scanChart')
               .attr('class', 'legend')
-              .selectAll('div').data(lengendNames).enter()
+              .selectAll('div').data(legendNames).enter()
               .append('div')
               .attr('data-id', function(id) {
                 return id;
@@ -119,9 +140,9 @@ $(document).ready(function() {
         url: loris.BaseURL + '/statistics/charts/siterecruitment_line',
         type: 'get',
         success: function(data) {
-            let lengendNames = [];
+            let legendNames = [];
             for (let j=0; j<data.datasets.length; j++) {
-                lengendNames.push(data.datasets[j].name);
+                legendNames.push(data.datasets[j].name);
             }
             let recruitmentLineData = formatLineData(data);
             recruitmentLineChart = c3.generate({
@@ -146,6 +167,7 @@ $(document).ready(function() {
                         }
                     },
                     y: {
+                        max: maxY(data),
                         label: 'Candidates registered'
                     }
                 },
@@ -159,7 +181,7 @@ $(document).ready(function() {
             d3.select('.recruitmentChartLegend')
               .insert('div', '.recruitmentChart')
               .attr('class', 'legend')
-              .selectAll('div').data(lengendNames).enter()
+              .selectAll('div').data(legendNames).enter()
               .append('div')
               .attr('data-id', function(id) {
                 return id;