diff --git a/src/logic/utils/graph-utils.ts b/src/logic/utils/graph-utils.ts index 518265f..9ce1eaa 100644 --- a/src/logic/utils/graph-utils.ts +++ b/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}] + ] + } + } } diff --git a/src/pages/overall/overall-line/overall-line.ts b/src/pages/overall/overall-line/overall-line.ts index 6ebbbfa..f7eda4e 100644 --- a/src/pages/overall/overall-line/overall-line.ts +++ b/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(), - - // 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} - ] - ] - } + markArea: GraphUtils.getGradeMarkAreas() }, xAxis: {