From f9b777d061fa1502fde2d2f532133f7c50c8b7a2 Mon Sep 17 00:00:00 2001
From: Mahdi Dibaiee <mdibaiee@pm.me>
Date: Sat, 16 Oct 2021 21:23:03 +0100
Subject: [PATCH] update chart

---
 css/style.css      | 16 ++++++++++++++++
 index.html         | 10 +++++++---
 javascript/main.js | 19 +++++++++++++++++--
 templates/index.nj | 10 +++++++---
 4 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/css/style.css b/css/style.css
index 7b96b06..9f3bfa3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -10,6 +10,22 @@ header {
   margin-bottom: 2rem;
 }
 
+.text-center {
+  text-align: center;
+}
+
+.alcohol-abuse-chart-box {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.alcohol-abuse-chart-box p {
+  margin-top: 1rem;
+}
+
 .heading h1, .heading h2 {
   text-align: center;
 }
diff --git a/index.html b/index.html
index 0e60016..f29741f 100644
--- a/index.html
+++ b/index.html
@@ -95,14 +95,18 @@
     </div>
   </div>
   <div class='row'>
-    <div class='column'>
+    <div class='column column-50'>
       <p>Binge drinking (drinking 5 units over a 2 hour period, followed by a period of abstinence) and high alcohol intake (more than 5 units a day), can lead to dependence, tolerance and cravings, which lead to a continuation of alcohol abuse to prevent withdrawal symptoms.</p>
       <p>Chronic alcohol abuse can have adverse effects such as loss of balance and gait, slurred speech, slower reactions, poor memory consolidation, compromised emotional modulation and judgement. These effects in turn can lead to difficulties in social and emotional interactions, and a reduction in motivation, attention and impulse control.</p>
       <p>These effects are studied and proven using methods such as MRI scans which show loss of neurons, particularly in the frontal lobe, the area most associated with reasoning, decision-making and rationality, however it can affect other areas of the brain such as the cerebellum (associated with balance and movement), hippocampus (memory) and amygdala (memory, decision making and emotional responses). [<a href='#ref-1'>1</a>]</p>
 
       <p>Every year millions of people suffer from Alcohol use disorder, leading to physical and mental health problems.</p>
-
-      <canvas id='alcohol-abuse'></canvas>
+    </div>
+    <div class='column column-50'>
+      <div class='alcohol-abuse-chart-box'>
+        <canvas id='alcohol-abuse'></canvas>
+        <p class='text-center'>Alcohol Abuse Across The World [<a href='#ref-2'>2</a>]</p>
+      </div>
     </div>
   </div>
 
diff --git a/javascript/main.js b/javascript/main.js
index d2bb0f4..a51cb4c 100644
--- a/javascript/main.js
+++ b/javascript/main.js
@@ -9,14 +9,29 @@ const alcoholAbuseChart = new Chart(alcoholAbuseCanvas, {
     labels: alcoholDeathPercent.map(function(a) { return a.year }),
     datasets: [{
       label: 'Deaths by Alcohol Abuse',
-      data: alcoholDeathPercent.map(function(a) { return a.val }),
+      data: alcoholDeathPercent.map(function(a) { return a.val * 100 }),
       fill: true,
       backgroundColor: 'rgb(249, 98, 200)'
     }, {
       label: 'Prevalence of Alcohol Abuse',
-      data: alcoholPrevalencePercent.map(function(a) { return a.val }),
+      data: alcoholPrevalencePercent.map(function(a) { return a.val * 100 }),
       borderColor: 'rgb(97, 152, 250)'
     }]
+  },
+  options: {
+    aspectRatio: 1,
+    scales: {
+      y: {
+        type: 'linear',
+        beginAtZero: true,
+        max: 2,
+        ticks: {
+          callback: function(value, index, values) {
+            return value + '%';
+          }
+        }
+      }
+    }
   }
 });
 
diff --git a/templates/index.nj b/templates/index.nj
index 4ee1146..4b1f179 100644
--- a/templates/index.nj
+++ b/templates/index.nj
@@ -26,14 +26,18 @@
     </div>
   </div>
   <div class='row'>
-    <div class='column'>
+    <div class='column column-50'>
       <p>Binge drinking (drinking 5 units over a 2 hour period, followed by a period of abstinence) and high alcohol intake (more than 5 units a day), can lead to dependence, tolerance and cravings, which lead to a continuation of alcohol abuse to prevent withdrawal symptoms.</p>
       <p>Chronic alcohol abuse can have adverse effects such as loss of balance and gait, slurred speech, slower reactions, poor memory consolidation, compromised emotional modulation and judgement. These effects in turn can lead to difficulties in social and emotional interactions, and a reduction in motivation, attention and impulse control.</p>
       <p>These effects are studied and proven using methods such as MRI scans which show loss of neurons, particularly in the frontal lobe, the area most associated with reasoning, decision-making and rationality, however it can affect other areas of the brain such as the cerebellum (associated with balance and movement), hippocampus (memory) and amygdala (memory, decision making and emotional responses). [<a href='#ref-1'>1</a>]</p>
 
       <p>Every year millions of people suffer from Alcohol use disorder, leading to physical and mental health problems.</p>
-
-      <canvas id='alcohol-abuse'></canvas>
+    </div>
+    <div class='column column-50'>
+      <div class='alcohol-abuse-chart-box'>
+        <canvas id='alcohol-abuse'></canvas>
+        <p class='text-center'>Alcohol Abuse Across The World [<a href='#ref-2'>2</a>]</p>
+      </div>
     </div>
   </div>