[+] Rebuild entire average graph from settings

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;
     }
 }

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>