feat(orga): create cover-rate-gauge component

Co-authored-by: Vincent Hardouin <[email protected]>

Author: Alexandre-Monney

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

@@ -0,0 +1,69 @@
+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 = 7;
+
+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 num = Number(str);
+    const oneDigitNum = num.toFixed(1);
+    if (oneDigitNum.toString().endsWith('0')) {
+      return Math.ceil(num);
+    }
+    return oneDigitNum;
+  };
+
+  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>
+}

orga/app/styles/app.scss

@@ -51,6 +51,7 @@
 @import 'components/sup-organization-participant/replace-students-modal';
 @import 'components/import-banner';
 @import 'components/import-information-banner';
+@import 'components/statistics/cover-rate-gauge';
 
 // pages
 @import 'pages/login';

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

@@ -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: '7';
+  }
+}
+
+.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);
+  }
+}

orga/translations/en.json

@@ -1462,6 +1462,9 @@
       }
     },
     "statistics": {
+      "gauge": {
+        "label": "On the topic, your participants achieved a level of {userLevel} out of a maximum reachable level of {tubeLevel}."
+      },
       "level": {
         "advanced": "advanced",
         "expert": "expert",

orga/translations/fr.json

@@ -1468,6 +1468,9 @@
       }
     },
     "statistics": {
+      "gauge": {
+        "label": "Sur le sujet vos participants ont obtenu un niveau de {userLevel} sur un niveau maximum atteignable de {tubeLevel}."
+      },
       "level": {
         "advanced": "avancé",
         "expert": "expert",

orga/translations/nl.json

@@ -1462,6 +1462,9 @@
       "title": "{count, plural, =0 {Studenten} =1 {Studenten ({count})} other {studenten ({count})}}"
     },
     "statistics": {
+      "gauge": {
+        "label": "Je deelnemers behaalden een {userLevel} op een maximaal haalbaar niveau van {tubeLevel}."
+      },
       "level": {
         "advanced": "geavanceerd",
         "expert": "expert",