Skip to content

Commit

Permalink
feat(orga): create cover-rate-gauge component
Browse files Browse the repository at this point in the history
Co-authored-by: Vincent Hardouin <[email protected]>
  • Loading branch information
Alexandre-Monney and VincentHardouin committed Dec 10, 2024
1 parent 88b4a84 commit fb168e6
Show file tree
Hide file tree
Showing 5 changed files with 164 additions and 4 deletions.
68 changes: 68 additions & 0 deletions orga/app/components/statistics/cover-rate-gauge.gjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { guidFor } from '@ember/object/internals';
import { htmlSafe } from '@ember/template';
import Component from '@glimmer/component';
import { t } from 'ember-intl';

const MAX_REACHABLE_LEVEL = 8;

export default class CoverRateGauge extends Component {
get id() {
return guidFor(this);
}

get userLevel() {
return this.formatNumber(this.args.userLevel);
}

get tubeLevel() {
return this.formatNumber(this.args.tubeLevel);
}

formatNumber = (str) => {
const parsed = Number(str);
if (Number.isInteger(parsed)) {
return Math.ceil(parsed);
}
return parsed.toFixed(1);
};

getGaugeSizeStyle = (level, { withExtraPercentage }) => {
const gaugeSize = (level / MAX_REACHABLE_LEVEL) * 100;
return htmlSafe(`width: calc(${gaugeSize}% + ${withExtraPercentage ? 5 : 0}%)`);
};

<template>
<div class="cover-rate-gauge">
<div class="cover-rate-gauge__container">
<div
class="cover-rate-gauge__level cover-rate-gauge__level--tube-level"
style={{this.getGaugeSizeStyle this.tubeLevel withExtraPercentage=true}}
>
{{this.tubeLevel}}
</div>
<div class="cover-rate-gauge__background">
<label for={{this.id}} class="screen-reader-only">{{t
"pages.statistics.gauge.label"
userLevel=this.userLevel
tubeLevel=this.tubeLevel
}}</label>
<progress
class="cover-rate-gauge__progress"
id={{this.id}}
max={{this.tubeLevel}}
value={{this.userLevel}}
style={{this.getGaugeSizeStyle this.tubeLevel withExtraPercentage=false}}
>
{{this.userLevel}}
</progress>
</div>
<div
class="cover-rate-gauge__level cover-rate-gauge__level--user-level"
style={{this.getGaugeSizeStyle this.userLevel withExtraPercentage=true}}
>
{{this.userLevel}}
</div>
</div>
</div>
</template>
}
83 changes: 83 additions & 0 deletions orga/app/styles/components/statistics/cover-rate-gauge.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
.cover-rate-gauge {
display: grid;
align-items: center;
justify-content: center;
width: 100%;
height: 3.5rem;
}

.cover-rate-gauge__container {
position: relative;
width: 8.875rem;

--gauge-height: 0.875rem;

height: var(--gauge-height);
color: var(--pix-neutral-500);
font-weight: var(--pix-font-medium);
}

.cover-rate-gauge__background {
display: grid;
align-items: center;
height: var(--gauge-height);
padding: 0 2px;
line-height: 20px;
background-color: rgba(var(--pix-neutral-900-inline), 0.1);
border-radius: 3.125rem;

--level-text-spacing-from-gauge: -12px;

&:before {
position: absolute;
left: var(--level-text-spacing-from-gauge);
content: '0';
}

&:after {
position: absolute;
right: var(--level-text-spacing-from-gauge);
content: '8';
}
}

.cover-rate-gauge__progress {
width: 100%;
height: 10px;
color: var(--pix-primary-300);
background-color: var(--pix-neutral-0);
border: none;

--gauge-border-radius: 1.625rem;

border-radius: var(--gauge-border-radius);

&::-webkit-progress-value {
background-color: var(--pix-primary-300);
border-radius: var(--gauge-border-radius);
}

&::-moz-progress-bar {
background-color: var(--pix-primary-300);
border-radius: var(--gauge-border-radius);
}

&::-webkit-progress-bar {
background-color: var(--pix-neutral-0);
border-radius: var(--gauge-border-radius);
}
}

.cover-rate-gauge__level {
position: absolute;
text-align: right;

&--user-level {
color: var(--pix-primary-500);
}

&--tube-level {
top: -20px;
color: var(--pix-neutral-800);
}
}
5 changes: 4 additions & 1 deletion orga/translations/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -1476,8 +1476,11 @@
"cover-rate": "Cover rate",
"reached-level": "Reached level",
"skills": "Skills",
"subjects": "Subjects"
"topics": "Topics"
}
},
"gauge": {
"label": "On the topic, your participants achieved a level of {userLevel} out of a maximum reachable level of {tubeLevel}."
}
},
"sup-organization-participant-activity": {
Expand Down
5 changes: 4 additions & 1 deletion orga/translations/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -1482,8 +1482,11 @@
"cover-rate": "Taux de couverture",
"reached-level": "Niveau atteint",
"skills": "Compétences",
"subjects": "Sujets"
"topics": "Sujets"
}
},
"gauge": {
"label": "Sur le sujet vos participants ont obtenu un niveau de {userLevel} sur un niveau maximum atteignable de {tubeLevel}."
}
},
"sup-organization-participant-activity": {
Expand Down
7 changes: 5 additions & 2 deletions orga/translations/nl.json
Original file line number Diff line number Diff line change
Expand Up @@ -1468,16 +1468,19 @@
"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.",
"headers": {
"skills": "Vaardigheden",
"subjects": "Onderwerpen",
"cover-rate": "Dekkingspercentage",
"reached-level": "Bereikt niveau"
"reached-level": "Bereikt niveau",
"topics": "Onderwerpen"
}
},
"level": {
"novice": "beginnende",
"independent": "onafhankelijk",
"advanced": "geavanceerd",
"expert": "expert"
},
"gauge": {
"label": "Je deelnemers behaalden een {userLevel} op een maximaal haalbaar niveau van {tubeLevel}."
}
},
"sup-organization-participant-activity": {
Expand Down

0 comments on commit fb168e6

Please sign in to comment.