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

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

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

@@ -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>
+}

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

orga/translations/en.json

@@ -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": {

orga/translations/fr.json

@@ -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": {

orga/translations/nl.json

@@ -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": {