[O] Dynamic radar min value

src/logic/course.ts

@@ -256,7 +256,7 @@ export default class Course
                     ? this.grading.weightingMap[type] : scoreMax / totalScoreMax;
 
                 // Return
-                return {name: type, id: typeAssignments[0].typeId, weight: weight,
+                return {name: type, id: typeAssignments[0].typeId, weight: +(weight * 100).toFixed(2),
                     scoreMax: scoreMax, score: score, percent: +(score / scoreMax * 100).toFixed(2)}
             })
         }

src/logic/utils/graph-utils.ts

@@ -70,4 +70,21 @@ export default class GraphUtils
             ]
         }
     }
+
+    /**
+     * Text style for pie graphs or radar graphs
+     */
+    static pieTextStyle()
+    {
+        return {
+            fontSize: 14,
+            textShadowColor: '#cfcfcf',
+            textShadowBlur: 2,
+            textShadowOffsetX: 1,
+            textShadowOffsetY: 1,
+            backgroundColor: '#f6f6f6',
+            borderRadius: 3,
+            padding: [3, 5]
+        }
+    }
 }

src/pages/course/course-page.scss

@@ -18,3 +18,9 @@
     // https://stackoverflow.com/questions/17572619/inset-box-shadow-only-on-one-side
     box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.1);
 }
+
+.type-graph
+{
+    padding-top: 23px;
+    height: 420px !important;
+}

src/pages/course/course-page.vue

@@ -17,12 +17,16 @@
 
             <el-row>
                 <el-col :span="12">
-                    <el-card class="large overall-line-card vertical-center" body-style="padding: 0">
-                        <CourseTypeRadar :course="course"></CourseTypeRadar>
+                    <el-card class="large overall-line-card vertical-center type-graph"
+                             body-style="padding: 0">
+                        <TypeRadar :course="course"></TypeRadar>
                     </el-card>
                 </el-col>
                 <el-col :span="12">
-                    Hi
+                    <el-card class="large overall-line-card vertical-center type-graph"
+                             body-style="padding: 0">
+                        <TypePie :course="course"></TypePie>
+                    </el-card>
                 </el-col>
             </el-row>
 
@@ -40,10 +44,11 @@
     import AssignmentEntry from '@/pages/overall/overall-course/assignment-entry/assignment-entry.vue';
     import AssignmentTypeHead from '@/pages/course/assignment-type-head/assignment-type-head.vue';
     import Course, {Assignment} from '@/logic/course';
-    import TypeRadar from '@/pages/course/course-type-radar/type-radar';
+    import TypeRadar from '@/pages/course/type-radar/type-radar';
+    import TypePie from '@/pages/course/type-pie/type-pie';
 
     @Component({
-        components: {CourseTypeRadar: TypeRadar, AssignmentEntry, CourseHead, CourseScatter, AssignmentTypeHead}
+        components: {TypeRadar, TypePie, AssignmentEntry, CourseHead, CourseScatter, AssignmentTypeHead}
     })
     export default class CoursePage extends Vue
     {

src/pages/course/course-scatter/course-scatter.vue

@@ -5,12 +5,4 @@
 </template>
 
 <script src="./course-scatter.ts" lang="ts"></script>
-<style lang="scss" scoped>
-    #overall-bar
-    {
-        .graph
-        {
-            margin-top: 50px;
-        }
-    }
-</style>
+<style lang="scss" scoped></style>

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

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

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

@@ -0,0 +1,60 @@
+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';
+import GraphUtils from '@/logic/utils/graph-utils';
+
+@Component
+export default class TypePie 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 =
+        {
+            ...GraphUtils.getBaseSettings('Assignment Type Weight',
+                'How much each type of assignment affect your average'),
+
+            tooltip: {},
+
+            // Data
+            series:
+            {
+                type: 'pie',
+                avoidLabelOverlap: false,
+                radius: ['40%', '60%'],
+                center: ['50%', '55%'],
+                label: GraphUtils.pieTextStyle(),
+                data: this.course.assignmentTypes.map((t, i) => {return {
+                    value: t.weight,
+                    name: `${t.name}\n${t.weight}%`,
+                    itemStyle:
+                    {
+                        color: Constants.THEME.colors[i],
+                        opacity: 0.8,
+                        shadowColor: 'rgba(0,0,0,0.22)',
+                        shadowBlur: 10
+                    }
+                }}).sort((a, b) => a.value - b.value)
+            }
+        };
+
+        return settings;
+    }
+}

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

@@ -0,0 +1,8 @@
+<template>
+    <div id="type-pie">
+        <ve-pie height="420px" class="graph" :extend="{a: this.course.name}" :after-config="afterConfig"></ve-pie>
+    </div>
+</template>
+
+<script src="./type-pie.ts" lang="ts"></script>
+<style lang="scss" scoped></style>

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

@@ -25,11 +25,13 @@ export default class TypeRadar extends Vue
      */
     get chartSettings()
     {
+        let min = this.course.assignmentTypes.reduce((min, t) => Math.min(min, t.percent), 100);
+
         // Create settings
         let settings =
         {
-            ...GraphUtils.getBaseSettings('Type Radar',
-                'Assignment type grades for ' + this.course.name),
+            ...GraphUtils.getBaseSettings('Assignment Type Radar',
+                'How are you doing for different types of assignment'),
 
             // Radar settings
             radar:
@@ -37,18 +39,7 @@ export default class TypeRadar extends Vue
                 // shape: 'circle',
                 name:
                 {
-                    textStyle:
-                    {
-                        fontSize: 14,
-                        textShadowColor: '#cfcfcf',
-                        textShadowBlur: 2,
-                        textShadowOffsetX: 1,
-                        textShadowOffsetY: 1,
-                        color: '#fff',
-                        backgroundColor: '#f6f6f6',
-                        borderRadius: 3,
-                        padding: [3, 5]
-                    }
+                    textStyle: GraphUtils.pieTextStyle()
                 },
                 splitArea:
                 {
@@ -68,10 +59,11 @@ export default class TypeRadar extends Vue
                 indicator: this.course.assignmentTypes.map((t, i) => {return {
                     name: `${t.name}\n${t.percent}%`,
                     max: 100,
+                    min: min - 30,
                     color: Constants.THEME.colors[i]
                 }}),
                 radius: '60%',
-                center: ['50%', '60%']
+                center: ['50%', '55%']
             },
 
             tooltip: {},
@@ -90,7 +82,7 @@ export default class TypeRadar extends Vue
                             color:
                             {
                                 type: 'radial',
-                                x: 0.5, y: 0.6, r: 0.5,
+                                x: 0.5, y: 0.55, r: 0.5,
                                 colorStops:
                                 [
                                     {offset: 0, color: '#ffa0a0'},

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

@@ -0,0 +1,8 @@
+<template>
+    <div id="type-radar">
+        <ve-radar height="420px" class="graph" :extend="{a: this.course.name}" :after-config="afterConfig"></ve-radar>
+    </div>
+</template>
+
+<script src="./type-radar.ts" lang="ts"></script>
+<style lang="scss" scoped></style>