Skip to content

Commit d8e1ba3

Browse files
gemmadlougemmadlou
committed
Refactored ratings object into a dictionary for easier lookups
1 parent 25a4156 commit d8e1ba3

File tree

2 files changed

+50
-42
lines changed

2 files changed

+50
-42
lines changed

‎src/components/EPCRating.vue

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -36,34 +36,34 @@ const yPotentialPos = computed(() => calcuateVerticalPositionInSVG(getRating(pro
3636
<line x1="615" y1="376" x2="615" y2="0" style="stroke: #b1b4b6; stroke-width: 1;"></line>
3737
<line x1="615" y1="376" x2="0" y2="376" style="stroke: #b1b4b6; stroke-width: 1;"></line>
3838

39-
<rect width="78" height="50" x="72" y="25" :style="{fill: colors.band.A}">
39+
<rect width="78" height="50" x="72" y="25" :style="{fill: ratings['A'].bandColor}">
4040
</rect>
41-
<rect width="118" height="50" x="72" y="75" :style="{fill: colors.band.B}">
41+
<rect width="118" height="50" x="72" y="75" :style="{fill: ratings['B'].bandColor}">
4242
</rect>
43-
<rect width="158" height="50" x="72" y="125" :style="{fill: colors.band.C}">
43+
<rect width="158" height="50" x="72" y="125" :style="{fill: ratings['C'].bandColor}">
4444
</rect>
45-
<rect width="198" height="50" x="72" y="175" :style="{fill: colors.band.D}">
45+
<rect width="198" height="50" x="72" y="175" :style="{fill: ratings['D'].bandColor}">
4646
</rect>
47-
<rect width="238" height="50" x="72" y="225" :style="{fill: colors.band.E}">
47+
<rect width="238" height="50" x="72" y="225" :style="{fill: ratings['E'].bandColor}">
4848
</rect>
49-
<rect width="278" height="50" x="72" y="275" :style="{fill: colors.band.F}">
49+
<rect width="278" height="50" x="72" y="275" :style="{fill: ratings['F'].bandColor}">
5050
</rect>
51-
<rect width="318" height="50" x="72" y="325" :style="{fill: colors.band.G}">
51+
<rect width="318" height="50" x="72" y="325" :style="{fill: ratings['G'].bandColor}">
5252
</rect>
5353

54-
<rect width="72" height="50" x="0" y="25" :style="{fill: colors.score.A}">
54+
<rect width="72" height="50" x="0" y="25" :style="{fill: ratings['A'].scoreColor}">
5555
</rect>
56-
<rect width="72" height="50" x="0" y="75" :style="{fill: colors.score.B}">
56+
<rect width="72" height="50" x="0" y="75" :style="{fill: ratings['B'].scoreColor}">
5757
</rect>
58-
<rect width="72" height="50" x="0" y="125" :style="{fill: colors.score.C}">
58+
<rect width="72" height="50" x="0" y="125" :style="{fill: ratings['C'].scoreColor}">
5959
</rect>
60-
<rect width="72" height="50" x="0" y="175" :style="{fill: colors.score.D}">
60+
<rect width="72" height="50" x="0" y="175" :style="{fill: ratings['D'].scoreColor}">
6161
</rect>
62-
<rect width="72" height="50" x="0" y="225" :style="{fill: colors.score.E}">
62+
<rect width="72" height="50" x="0" y="225" :style="{fill: ratings['E'].scoreColor}">
6363
</rect>
64-
<rect width="72" height="50" x="0" y="275" :style="{fill: colors.score.F}">
64+
<rect width="72" height="50" x="0" y="275" :style="{fill: ratings['F'].scoreColor}">
6565
</rect>
66-
<rect width="72" height="50" x="0" y="325" :style="{fill: colors.score.G}">
66+
<rect width="72" height="50" x="0" y="325" :style="{fill: ratings['G'].scoreColor}">
6767
</rect>
6868

6969
<text role="presentation" aria-hidden="true" x="0" y="0" style="font-size: 40px; font-family: sans-serif; fill: #0b0c0c; font-weight: bold;">
@@ -104,12 +104,12 @@ const yPotentialPos = computed(() => calcuateVerticalPositionInSVG(getRating(pro
104104
Potential
105105
</text>
106106

107-
<svg aria-hidden="true" x="415" :y="yCurrentPos" width="90" height="50" class="rating-current rating-label" :style="{fill: colors.score[currentRating]}">
107+
<svg aria-hidden="true" x="415" :y="yCurrentPos" width="90" height="50" class="rating-current rating-label" :style="{fill: ratings[currentRating].scoreColor}">
108108
<polygon points="0,25 25,50 100,50 100,0 25,0 0,25"></polygon>
109109
<text x="35" y="31" fill="black">{{ currentScore }} {{ currentRating }}</text>
110110
</svg>
111111

112-
<svg aria-hidden="true" x="515" :y="yPotentialPos" width="90" height="50" class="rating-potential rating-label" :style="{fill: colors.score[potentialRating]}">
112+
<svg aria-hidden="true" x="515" :y="yPotentialPos" width="90" height="50" class="rating-potential rating-label" :style="{fill: ratings[potentialRating].scoreColor}">
113113
<polygon points="0,25 25,50 100,50 100,0 25,0 0,25"></polygon>
114114
<text x="35" y="31" fill="black">{{ potentialScore }} {{ potentialRating }}</text>
115115
</svg>

‎src/util.ts

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,44 @@
11
export const ratings = {
2-
A: 92,
3-
B: 81,
4-
C: 69,
5-
D: 55,
6-
E: 39,
7-
F: 21
8-
}
9-
10-
export const colors = {
11-
band: {
12-
A: '#00C781',
13-
B: '#19b459',
14-
C: '#8dce46',
15-
D: '#ffd500',
16-
E: '#fcaa65',
17-
F: '#ef8023',
18-
G: '#e9153b'
2+
A: {
3+
min: 92,
4+
bandColor: '#00C781',
5+
scoreColor: '#64C7A4'
6+
},
7+
B: {
8+
min: 81,
9+
bandColor: '#19b459',
10+
scoreColor: '#72CA8B'
11+
},
12+
C: {
13+
min: 69,
14+
bandColor: '#8dce46',
15+
scoreColor: '#b4df86'
16+
},
17+
D: {
18+
min: 55,
19+
bandColor: '#ffd500',
20+
scoreColor: '#ffe666'
21+
},
22+
E: {
23+
min: 39,
24+
bandColor: '#fcaa65',
25+
scoreColor: '#fdc79b'
26+
},
27+
F: {
28+
min: 21,
29+
bandColor: '#ef8023',
30+
scoreColor: '#f4ac71'
1931
},
20-
score: {
21-
A: '#64C7A4',
22-
B: '#72CA8B',
23-
C: '#b4df86',
24-
D: '#ffe666',
25-
E: '#fdc79b',
26-
F: '#f4ac71',
27-
G: '#f2738a'
32+
G: {
33+
min: 0,
34+
bandColor: '#e9153b',
35+
scoreColor: '#f2738a'
2836
}
2937
}
3038

3139
export const getRating = (score: number): string => {
3240
for (let key in ratings) {
33-
if (score >= ratings[key as keyof typeof ratings]) {
41+
if (score >= ratings[key as keyof typeof ratings].min) {
3442
return key
3543
}
3644
}

0 commit comments

Comments
 (0)