diff --git a/src/logic/utils/graph-utils.ts b/src/logic/utils/graph-utils.ts index 9ce1eaa..46d767c 100644 --- a/src/logic/utils/graph-utils.ts +++ b/src/logic/utils/graph-utils.ts @@ -22,22 +22,22 @@ export default class GraphUtils /** * Get mark areas for percentage scores */ - static getGradeMarkAreas() + static getGradeMarkAreas(opacity: number) { return { silent: true, data: [ // Above 100 - [{itemStyle: {color: 'rgba(230,253,255,0.09)'}, yAxis: 120}, {yAxis: 100}], + [{itemStyle: {color: 'rgba(230,253,255)', opacity: opacity}, yAxis: 120}, {yAxis: 100}], // 90 to 100 - [{itemStyle: {color: 'rgba(241,255,237,0.09)'}, yAxis: 100}, {yAxis: 90}], + [{itemStyle: {color: 'rgba(241,255,237)', opacity: opacity}, yAxis: 100}, {yAxis: 90}], // 80 to 90 - [{itemStyle: {color: 'rgba(255,250,216,0.09)'}, yAxis: 90}, {yAxis: 80}], + [{itemStyle: {color: 'rgba(255,250,216)', opacity: opacity}, yAxis: 90}, {yAxis: 80}], // 70 to 80 - [{itemStyle: {color: 'rgba(255,225,199,0.1)'}, yAxis: 80}, {yAxis: 70}], + [{itemStyle: {color: 'rgba(255,225,199)', opacity: opacity}, yAxis: 80}, {yAxis: 70}], // Below 70 (Fail) - [{itemStyle: {color: 'rgb(255,190,184, 0.09)'}, yAxis: 70}, {yAxis: -100}] + [{itemStyle: {color: 'rgb(255,190,184)', opacity: opacity}, 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 f7eda4e..0194b8b 100644 --- a/src/pages/overall/overall-line/overall-line.ts +++ b/src/pages/overall/overall-line/overall-line.ts @@ -43,7 +43,7 @@ export default class OverallLine extends Vue { smooth: true, markLine: GraphUtils.getTermLines(), - markArea: GraphUtils.getGradeMarkAreas() + markArea: GraphUtils.getGradeMarkAreas(0.09) }, xAxis: {