From 96d10b32fdeaeca9bfcdac527fe785621567c7d7 Mon Sep 17 00:00:00 2001
From: Bram Barbieri <bram.barbieri@hva.nl>
Date: Mon, 1 Apr 2024 13:56:49 +0200
Subject: [PATCH] chart class, shortcuts, for loop update.

---
 web/newWebsite/questions-chart-class.js       |  27 +++++
 ...n-class.js => questions-creation-class.js} |   0
 web/newWebsite/questions-dashboard.html       |   3 +-
 web/newWebsite/questions-main.js              | 109 ++----------------
 4 files changed, 40 insertions(+), 99 deletions(-)
 create mode 100644 web/newWebsite/questions-chart-class.js
 rename web/newWebsite/{questions-main-class.js => questions-creation-class.js} (100%)

diff --git a/web/newWebsite/questions-chart-class.js b/web/newWebsite/questions-chart-class.js
new file mode 100644
index 0000000..42467d9
--- /dev/null
+++ b/web/newWebsite/questions-chart-class.js
@@ -0,0 +1,27 @@
+class ChartConfigClass{
+    constructor(data, text){
+        this.data = data
+        this.text = text
+    }
+
+    get chartConfig() {
+        return{
+            type: 'pie',
+            data: this.data,
+            options: {
+                responsive: true,
+                legend: {
+                    position: 'top',
+                },
+                title: {
+                    display: true,
+                    text: this.text
+                },
+                animation: {
+                    animateScale: true,
+                    animateRotate: true
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/web/newWebsite/questions-main-class.js b/web/newWebsite/questions-creation-class.js
similarity index 100%
rename from web/newWebsite/questions-main-class.js
rename to web/newWebsite/questions-creation-class.js
diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html
index 46dad55..3594c6b 100644
--- a/web/newWebsite/questions-dashboard.html
+++ b/web/newWebsite/questions-dashboard.html
@@ -47,7 +47,8 @@
 
         <!-- Add more questions and canvas elements as needed -->
     </div>
-    <script src="questions-main-class.js"></script>
+    <script src="questions-chart-class.js"></script>
+    <script src="questions-creation-class.js"></script>
     <script src="questions-main.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js
index 010d6bf..c9f996e 100644
--- a/web/newWebsite/questions-main.js
+++ b/web/newWebsite/questions-main.js
@@ -13,6 +13,8 @@ let questionOptionsDummy4 = ['really crowded','not at all', 'its fine', ];
 let dummydata5 = [30, 20, 20];
 let questionOptionsDummy5 = ['no','yes', 'decently'];
 
+let chartConfigArray = [];
+let textArray = [];
 
 let questionArray = [];
 let questionOptionsDummy = [];
@@ -26,113 +28,24 @@ for (let i = 0; i < 5; i++) {
 }
 
 
-const chartConfig1 = {
-    type: 'pie',
-    data: questionArray[0].questionData,
-    options: {
-        responsive: true,
-        legend: {
-            position: 'top',
-        },
-        title: {
-            display: true,
-            text: 'Question 1 Responses'
-        },
-        animation: {
-            animateScale: true,
-            animateRotate: true
-        }
-    }
-};
+for (let i = 0; i < 5; i++){
+    textArray.push('Question 1 Responses', 'Question 2 Responses', 'Question 3 Responses', 'Question 4 Responses', 'Question 5 Responses');
 
-const chartConfig2 = {
-    type: 'pie',
-    data: questionArray[1].questionData,
-    options: {
-        responsive: true,
-        legend: {
-            position: 'top',
-        },
-        title: {
-            display: true,
-            text: 'Question 2 Responses'
-        },
-        animation: {
-            animateScale: true,
-            animateRotate: true
-        }
-    }
-};
-
-const chartConfig3 = {
-    type: 'pie',
-    data: questionArray[2].questionData,
-    options: {
-        responsive: true,
-        legend: {
-            position: 'top',
-        },
-        title: {
-            display: true,
-            text: 'Question 3 Responses'
-        },
-        animation: {
-            animateScale: true,
-            animateRotate: true
-        }
-    }
-};
-
-const chartConfig4 = {
-    type: 'pie',
-    data: questionArray[3].questionData,
-    options: {
-        responsive: true,
-        legend: {
-            position: 'top',
-        },
-        title: {
-            display: true,
-            text: 'Question 4 Responses'
-        },
-        animation: {
-            animateScale: true,
-            animateRotate: true
-        }
-    }
-};
-
-const chartConfig5 = {
-    type: 'pie',
-    data: questionArray[4].questionData,
-    options: {
-        responsive: true,
-        legend: {
-            position: 'top',
-        },
-        title: {
-            display: true,
-            text: 'Question 5 Responses'
-        },
-        animation: {
-            animateScale: true,
-            animateRotate: true
-        }
-    }
-};
+    chartConfigArray.push(new ChartConfigClass(questionArray[i].questionData, textArray[i]));
+}
 
 // Create the charts
 const ctx1 = document.getElementById('chart1').getContext('2d');
-const myChart1 = new Chart(ctx1, chartConfig1);
+const myChart1 = new Chart(ctx1, chartConfigArray[0].chartConfig);
 
 const ctx2 = document.getElementById('chart2').getContext('2d');
-const myChart2 = new Chart(ctx2, chartConfig2);
+const myChart2 = new Chart(ctx2, chartConfigArray[1].chartConfig);
 
 const ctx3 = document.getElementById('chart3').getContext('2d');
-const myChart3 = new Chart(ctx3, chartConfig3);
+const myChart3 = new Chart(ctx3, chartConfigArray[2].chartConfig);
 
 const ctx4 = document.getElementById('chart4').getContext('2d');
-const myChart4 = new Chart(ctx4, chartConfig4);
+const myChart4 = new Chart(ctx4, chartConfigArray[3].chartConfig);
 
 const ctx5 = document.getElementById('chart5').getContext('2d');
-const myChart5 = new Chart(ctx5, chartConfig5);
+const myChart5 = new Chart(ctx5, chartConfigArray[4].chartConfig);