From f4f6fa25239d5e7b686b89a645d79c1c5abba209 Mon Sep 17 00:00:00 2001
From: Hykilpikonna <admin@moecraft.cc>
Date: Sun, 20 Oct 2019 09:51:13 -0400
Subject: [PATCH] [+] Create course scatter vue component

---
 .../course/course-scatter/course-scatter.ts   | 68 +++++++++++++++++++
 .../course/course-scatter/course-scatter.vue  | 17 +++++
 2 files changed, 85 insertions(+)
 create mode 100644 src/pages/course/course-scatter/course-scatter.ts
 create mode 100644 src/pages/course/course-scatter/course-scatter.vue

diff --git a/src/pages/course/course-scatter/course-scatter.ts b/src/pages/course/course-scatter/course-scatter.ts
new file mode 100644
index 0000000..c443329
--- /dev/null
+++ b/src/pages/course/course-scatter/course-scatter.ts
@@ -0,0 +1,68 @@
+import {Component, Prop, Vue} from 'vue-property-decorator';
+import {Course} from '@/components/app/app';
+import {GPAUtils} from '@/utils/gpa-utils';
+import Constants from '@/constants';
+
+@Component({
+})
+export default class CourseScatter extends Vue
+{
+    // @ts-ignore
+    @Prop({required: true}) course: Course;
+
+    /**
+     * Generate settings
+     */
+    get chartSettings()
+    {
+        let settings =
+        {
+            // Title
+            title:
+            {
+                show: true,
+                textStyle:
+                {
+                    fontSize: 12
+                },
+                text: 'Course GPA',
+                subtext: 'Current GPA for every course',
+                x: 'center'
+            },
+
+            // X axis represents course names
+            xAxis:
+            {
+                type: 'category',
+                axisLabel: {
+                    interval: 0,
+                    inside: false,
+                    rotate: 90,
+
+                    // Truncate text length
+                    formatter: (value: string) => value.length <= 16 ? value : value.substr(0, 14) + '...'
+                },
+            },
+
+            // Y axis represents GPAs and MaxGPAs
+            yAxis:
+            {
+                type: 'value'
+            },
+
+            // Data
+            series:
+            [
+
+            ],
+
+            // Disable tooltip
+            tooltip:
+            {
+                show: false
+            }
+        };
+
+        return settings;
+    }
+}
diff --git a/src/pages/course/course-scatter/course-scatter.vue b/src/pages/course/course-scatter/course-scatter.vue
new file mode 100644
index 0000000..698c6de
--- /dev/null
+++ b/src/pages/course/course-scatter/course-scatter.vue
@@ -0,0 +1,17 @@
+<template>
+    <div id="course-scatter">
+        <ve-scatter height="450px" class="graph"
+                :extend="chartSettings"></ve-scatter>
+    </div>
+</template>
+
+<script src="course-scatter.ts" lang="ts"></script>
+<style lang="scss" scoped>
+    #overall-bar
+    {
+        .graph
+        {
+            margin-top: 50px;
+        }
+    }
+</style>