fix: add hint tooltips for quadrant axes

Author: graphieros

app/components/Compare/FacetQuadrantChart.vue

@@ -383,6 +383,58 @@ const config = computed<VueUiQuadrantConfig>(() => {
               })
             "
           />
+          
+          <foreignObject
+              :x="0"
+              :y="30"
+              style="overflow: visible;"
+              :width="svg.width"
+              :height="12"
+          >
+          <div class="flex items-center justify-center gap-2">
+            <TooltipApp interactive>
+              <button
+                data-dom-to-png-ignore
+                type="button"
+                class="i-lucide:info w-3.5 h-3.5 text-fg-muted cursor-help"
+                :aria-label="$t('compare.quadrant_chart.explanation.tooltip_help_efficiency')"
+              />
+              <template #content>
+                <div class="flex flex-col gap-3">
+                  <p class="text-xs text-fg-muted">
+                    {{ $t('compare.quadrant_chart.explanation.efficiency') }}
+                  </p>
+                </div>
+              </template>
+            </TooltipApp>
+          </div>
+          </foreignObject>
+
+          <foreignObject
+              :x="svg.width - 40"
+              :y="svg.height / 2 - 8"
+              style="overflow: visible;"
+              :width="20"
+              :height="12"
+          >
+          <div class="flex items-center justify-center gap-2">
+            <TooltipApp interactive>
+              <button
+                data-dom-to-png-ignore
+                type="button"
+                class="i-lucide:info w-3.5 h-3.5 text-fg-muted cursor-help"
+                :aria-label="$t('compare.quadrant_chart.explanation.tooltip_help_adoption')"
+              />
+              <template #content>
+                <div class="flex flex-col gap-3">
+                  <p class="text-xs text-fg-muted">
+                    {{ $t('compare.quadrant_chart.explanation.adoption') }}
+                  </p>
+                </div>
+              </template>
+            </TooltipApp>
+          </div>
+          </foreignObject>
         </template>
 
         <template #menuIcon="{ isOpen }">

i18n/locales/en.json

@@ -1255,6 +1255,8 @@
       },
       "explanation": {
         "tooltip_help": "Show scoring explanation",
+        "tooltip_help_adoption": "Show traction scoring explanation",
+        "tooltip_help_efficiency": "Show ergonomics scoring explanation",
         "introduction": "The score is calculated by combining multiple signals into two axes:",
         "adoption": "Traction: reflects usage and activity (downloads, freshness, likes)",
         "efficiency": "Ergonomics: reflects footprint and quality (install size, dependencies, vulnerabilities, type support)",

i18n/locales/fr-FR.json

@@ -1248,6 +1248,8 @@
       },
       "explanation": {
         "tooltip_help": "Afficher l’explication du score",
+        "tooltip_help_adoption": "Afficher l'explication du score de popularité",
+        "tooltip_help_efficiency": "Afficher l'explication du score d'ergonomie",
         "introduction": "Le score est calculé en combinant plusieurs signaux sur deux axes :",
         "adoption": "Popularité : reflète l’utilisation et l’activité (téléchargements, fraîcheur, mentions)",
         "efficiency": "Ergonomie : reflète l’empreinte et la qualité (taille d’installation, dépendances, vulnérabilités, support des types)",

i18n/schema.json

@@ -3769,6 +3769,12 @@
                 "tooltip_help": {
                   "type": "string"
                 },
+                "tooltip_help_adoption": {
+                  "type": "string"
+                },
+                "tooltip_help_efficiency": {
+                  "type": "string"
+                },
                 "introduction": {
                   "type": "string"
                 },