[+] Create course-type-radar

src/pages/course/course-type-radar/course-type-radar.ts

@@ -0,0 +1,52 @@
+import {Component, Prop, Vue} from 'vue-property-decorator';
+import Constants from '@/constants';
+import {FormatUtils} from '@/logic/utils/format-utils';
+import moment from 'moment';
+import Course, {Assignment} from '@/logic/course';
+
+@Component
+export default class CourseTypeRadar extends Vue
+{
+    @Prop({required: true}) course: Course;
+
+    /**
+     * Override options
+     *
+     * @param options Original options (Unused)
+     */
+    afterConfig(options: any)
+    {
+        return this.chartSettings;
+    }
+
+    /**
+     * Generate settings
+     */
+    get chartSettings()
+    {
+        // Create settings
+        let settings =
+        {
+            // Color
+            color: Constants.THEME.colors,
+
+            // Title
+            title:
+            {
+                show: true,
+                textStyle:
+                {
+                    fontSize: 13
+                },
+                text: 'Assignments',
+                subtext: 'Assignment scores for ' + this.course.name,
+                x: 'center'
+            },
+
+            // Data
+            series: {}
+        };
+
+        return settings;
+    }
+}

src/pages/course/course-type-radar/course-type-radar.vue

@@ -0,0 +1,16 @@
+<template>
+    <div id="course-scatter">
+        <ve-radar height="450px" class="graph" :extend="{heyIUsedCourseObject: this.course.name}" :after-config="afterConfig"></ve-radar>
+    </div>
+</template>
+
+<script src="./course-type-radar.ts" lang="ts"></script>
+<style lang="scss" scoped>
+    #overall-bar
+    {
+        .graph
+        {
+            margin-top: 50px;
+        }
+    }
+</style>