[M] Move markarea to GraphUtils

src/logic/utils/graph-utils.ts

@@ -18,4 +18,27 @@ export default class GraphUtils
             })
         }
     }
+
+    /**
+     * Get mark areas for percentage scores
+     */
+    static getGradeMarkAreas()
+    {
+        return {
+            silent: true,
+            data:
+            [
+                // Above 100
+                [{itemStyle: {color: 'rgba(230,253,255,0.09)'}, yAxis: 120}, {yAxis: 100}],
+                // 90 to 100
+                [{itemStyle: {color: 'rgba(241,255,237,0.09)'}, yAxis: 100}, {yAxis: 90}],
+                // 80 to 90
+                [{itemStyle: {color: 'rgba(255,250,216,0.09)'}, yAxis: 90}, {yAxis: 80}],
+                // 70 to 80
+                [{itemStyle: {color: 'rgba(255,225,199,0.1)'}, yAxis: 80}, {yAxis: 70}],
+                // Below 70 (Fail)
+                [{itemStyle: {color: 'rgb(255,190,184, 0.09)'}, yAxis: 70}, {yAxis: -100}]
+            ]
+        }
+    }
 }

src/pages/overall/overall-line/overall-line.ts

@@ -42,53 +42,8 @@ export default class OverallLine extends Vue
         series:
         {
             smooth: true,
-
-            // Quarter lines
             markLine: GraphUtils.getTermLines(),
-
+            markArea: GraphUtils.getGradeMarkAreas()
-            // Mark area
-            markArea:
-            {
-                silent: true,
-                data:
-                [
-                    // Above 100
-                    [
-                        {
-                            yAxis: 120,
-                            itemStyle: {color: 'rgba(230,253,255,0.09)'}
-                        }, {yAxis: 100}
-                    ],
-                    // 90 to 100
-                    [
-                        {
-                            yAxis: 100,
-                            itemStyle: {color: 'rgba(241,255,237,0.09)'}
-                        }, {yAxis: 90}
-                    ],
-                    // 80 to 90
-                    [
-                        {
-                            yAxis: 90,
-                            itemStyle: {color: 'rgba(255,250,216,0.09)'}
-                        }, {yAxis: 80}
-                    ],
-                    // 70 to 80
-                    [
-                        {
-                            yAxis: 80,
-                            itemStyle: {color: 'rgba(255,225,199,0.1)'}
-                        }, {yAxis: 70}
-                    ],
-                    // Below 70 (Fail)
-                    [
-                        {
-                            yAxis: 70,
-                            itemStyle: {color: 'rgb(255,190,184, 0.09)'}
-                        }, {yAxis: -100}
-                    ]
-                ]
-            }
         },
         xAxis:
         {