Skip to content

Commit fb168e6

Browse files
Alexandre-MonneyVincentHardouin
Alexandre-Monney
and
VincentHardouin
committed
feat(orga): create cover-rate-gauge component
Co-authored-by: Vincent Hardouin <[email protected]>
1 parent 88b4a84 commit fb168e6

File tree

5 files changed

+164
-4
lines changed

5 files changed

+164
-4
lines changed

‎orga/app/components/statistics/cover-rate-gauge.gjs

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { guidFor } from '@ember/object/internals';
2+
import { htmlSafe } from '@ember/template';
3+
import Component from '@glimmer/component';
4+
import { t } from 'ember-intl';
5+
6+
const MAX_REACHABLE_LEVEL = 8;
7+
8+
export default class CoverRateGauge extends Component {
9+
get id() {
10+
return guidFor(this);
11+
}
12+
13+
get userLevel() {
14+
return this.formatNumber(this.args.userLevel);
15+
}
16+
17+
get tubeLevel() {
18+
return this.formatNumber(this.args.tubeLevel);
19+
}
20+
21+
formatNumber = (str) => {
22+
const parsed = Number(str);
23+
if (Number.isInteger(parsed)) {
24+
return Math.ceil(parsed);
25+
}
26+
return parsed.toFixed(1);
27+
};
28+
29+
getGaugeSizeStyle = (level, { withExtraPercentage }) => {
30+
const gaugeSize = (level / MAX_REACHABLE_LEVEL) * 100;
31+
return htmlSafe(`width: calc(${gaugeSize}% + ${withExtraPercentage ? 5 : 0}%)`);
32+
};
33+
34+
<template>
35+
<div class="cover-rate-gauge">
36+
<div class="cover-rate-gauge__container">
37+
<div
38+
class="cover-rate-gauge__level cover-rate-gauge__level--tube-level"
39+
style={{this.getGaugeSizeStyle this.tubeLevel withExtraPercentage=true}}
40+
>
41+
{{this.tubeLevel}}
42+
</div>
43+
<div class="cover-rate-gauge__background">
44+
<label for={{this.id}} class="screen-reader-only">{{t
45+
"pages.statistics.gauge.label"
46+
userLevel=this.userLevel
47+
tubeLevel=this.tubeLevel
48+
}}</label>
49+
<progress
50+
class="cover-rate-gauge__progress"
51+
id={{this.id}}
52+
max={{this.tubeLevel}}
53+
value={{this.userLevel}}
54+
style={{this.getGaugeSizeStyle this.tubeLevel withExtraPercentage=false}}
55+
>
56+
{{this.userLevel}}
57+
</progress>
58+
</div>
59+
<div
60+
class="cover-rate-gauge__level cover-rate-gauge__level--user-level"
61+
style={{this.getGaugeSizeStyle this.userLevel withExtraPercentage=true}}
62+
>
63+
{{this.userLevel}}
64+
</div>
65+
</div>
66+
</div>
67+
</template>
68+
}

‎orga/app/styles/components/statistics/cover-rate-gauge.scss

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
.cover-rate-gauge {
2+
display: grid;
3+
align-items: center;
4+
justify-content: center;
5+
width: 100%;
6+
height: 3.5rem;
7+
}
8+
9+
.cover-rate-gauge__container {
10+
position: relative;
11+
width: 8.875rem;
12+
13+
--gauge-height: 0.875rem;
14+
15+
height: var(--gauge-height);
16+
color: var(--pix-neutral-500);
17+
font-weight: var(--pix-font-medium);
18+
}
19+
20+
.cover-rate-gauge__background {
21+
display: grid;
22+
align-items: center;
23+
height: var(--gauge-height);
24+
padding: 0 2px;
25+
line-height: 20px;
26+
background-color: rgba(var(--pix-neutral-900-inline), 0.1);
27+
border-radius: 3.125rem;
28+
29+
--level-text-spacing-from-gauge: -12px;
30+
31+
&:before {
32+
position: absolute;
33+
left: var(--level-text-spacing-from-gauge);
34+
content: '0';
35+
}
36+
37+
&:after {
38+
position: absolute;
39+
right: var(--level-text-spacing-from-gauge);
40+
content: '8';
41+
}
42+
}
43+
44+
.cover-rate-gauge__progress {
45+
width: 100%;
46+
height: 10px;
47+
color: var(--pix-primary-300);
48+
background-color: var(--pix-neutral-0);
49+
border: none;
50+
51+
--gauge-border-radius: 1.625rem;
52+
53+
border-radius: var(--gauge-border-radius);
54+
55+
&::-webkit-progress-value {
56+
background-color: var(--pix-primary-300);
57+
border-radius: var(--gauge-border-radius);
58+
}
59+
60+
&::-moz-progress-bar {
61+
background-color: var(--pix-primary-300);
62+
border-radius: var(--gauge-border-radius);
63+
}
64+
65+
&::-webkit-progress-bar {
66+
background-color: var(--pix-neutral-0);
67+
border-radius: var(--gauge-border-radius);
68+
}
69+
}
70+
71+
.cover-rate-gauge__level {
72+
position: absolute;
73+
text-align: right;
74+
75+
&--user-level {
76+
color: var(--pix-primary-500);
77+
}
78+
79+
&--tube-level {
80+
top: -20px;
81+
color: var(--pix-neutral-800);
82+
}
83+
}

‎orga/translations/en.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -1476,8 +1476,11 @@
14761476
"cover-rate": "Cover rate",
14771477
"reached-level": "Reached level",
14781478
"skills": "Skills",
1479-
"subjects": "Subjects"
1479+
"topics": "Topics"
14801480
}
1481+
},
1482+
"gauge": {
1483+
"label": "On the topic, your participants achieved a level of {userLevel} out of a maximum reachable level of {tubeLevel}."
14811484
}
14821485
},
14831486
"sup-organization-participant-activity": {

‎orga/translations/fr.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -1482,8 +1482,11 @@
14821482
"cover-rate": "Taux de couverture",
14831483
"reached-level": "Niveau atteint",
14841484
"skills": "Compétences",
1485-
"subjects": "Sujets"
1485+
"topics": "Sujets"
14861486
}
1487+
},
1488+
"gauge": {
1489+
"label": "Sur le sujet vos participants ont obtenu un niveau de {userLevel} sur un niveau maximum atteignable de {tubeLevel}."
14871490
}
14881491
},
14891492
"sup-organization-participant-activity": {

‎orga/translations/nl.json

+5-2
Original file line numberDiff line numberDiff line change
@@ -1468,16 +1468,19 @@
14681468
"caption": "Deze tabel toont de resultaten van alle deelnemers per onderwerp. Voor elke regel wordt de vaardigheid, het onderwerp, het dekkingspercentage en het behaalde niveau aangegeven.",
14691469
"headers": {
14701470
"skills": "Vaardigheden",
1471-
"subjects": "Onderwerpen",
14721471
"cover-rate": "Dekkingspercentage",
1473-
"reached-level": "Bereikt niveau"
1472+
"reached-level": "Bereikt niveau",
1473+
"topics": "Onderwerpen"
14741474
}
14751475
},
14761476
"level": {
14771477
"novice": "beginnende",
14781478
"independent": "onafhankelijk",
14791479
"advanced": "geavanceerd",
14801480
"expert": "expert"
1481+
},
1482+
"gauge": {
1483+
"label": "Je deelnemers behaalden een {userLevel} op een maximaal haalbaar niveau van {tubeLevel}."
14811484
}
14821485
},
14831486
"sup-organization-participant-activity": {

0 commit comments

Comments
 (0)