From 5c9e67478f43c8184a9976780533a8f7e6754568 Mon Sep 17 00:00:00 2001
From: Hykilpikonna <admin@moecraft.cc>
Date: Sun, 29 Sep 2019 17:17:23 -0400
Subject: [PATCH] [+] Rebuild entire average graph from settings

---
 .../overall/graph-average/graph-average.ts    | 73 +++++++++++++------
 .../overall/graph-average/graph-average.vue   |  2 +-
 2 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/src/pages/overall/graph-average/graph-average.ts b/src/pages/overall/graph-average/graph-average.ts
index 6de9b59..bf7f373 100644
--- a/src/pages/overall/graph-average/graph-average.ts
+++ b/src/pages/overall/graph-average/graph-average.ts
@@ -9,31 +9,62 @@ export default class GraphAverage extends Vue
     // @ts-ignore
     @Prop({required: true}) courses: Course[];
 
-    private settings =
-    {
-    };
-
     /**
-     * Convert assignments list to a graph dataset.
+     * Generate settings
      */
-    get convertChart()
+    get chartSettings()
     {
-        let courses = this.courses;
-
-        // Make column list
-        let columns = ['Course', 'GPA', 'MaxGPA'];
-
-        // Calculate GPA and MaxGPA for each course (rows)
-        let rows = courses.map(course =>
+        let settings =
         {
-            return {
-                'Course': course.name,
-                'GPA': GPAUtils.getGP(course, course.letterGrade),
-                'MaxGPA': GPAUtils.getGP(course, 'A+')
-            };
-        });
+            // Dataset
+            dataset:
+            {
+                source: this.courses.map(course =>
+                {
+                    // [Course name, GPA, MaxGPA]
+                    return [course.name, GPAUtils.getGP(course, course.letterGrade),
+                        GPAUtils.getGP(course, 'A+')];
+                })
+            },
 
-        // Return graph
-        return {columns: columns, rows: rows}
+            // X axis represents course names
+            xAxis:
+            {
+                type: 'value'
+            },
+
+            // Y axis represents GPAs and MaxGPAs
+            yAxis:
+            {
+                type: 'category',
+                data: this.courses.map(course => course.name)
+            },
+
+            // Data
+            series:
+            [
+                {
+                    type: 'bar',
+                    encode:
+                    {
+                        x: 1,
+                        y: 0
+                    }
+                },
+                {
+                    type: 'bar',
+                    encode:
+                    {
+                        x: 2,
+                        y: 0
+                    }
+                }
+            ]
+        };
+
+        // TODO: Remove this
+        console.log(settings);
+
+        return settings;
     }
 }
diff --git a/src/pages/overall/graph-average/graph-average.vue b/src/pages/overall/graph-average/graph-average.vue
index 932304c..12b0998 100644
--- a/src/pages/overall/graph-average/graph-average.vue
+++ b/src/pages/overall/graph-average/graph-average.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="graph-average">
-        <ve-histogram :data="convertChart" :extend="settings"></ve-histogram>
+        <ve-bar :extend="chartSettings"></ve-bar>
     </div>
 </template>