Composant · Données

PriorityMatrix

Documenté

Matrice de priorisation 2×2 : complexité en abscisse, valeur en ordonnée (0 à 100 pts), quatre quadrants teintés séparés par deux seuils en pointillés. Chaque point porte une étiquette placée par un recuit simulé déterministe (même algorithme que placePriorityLabels de @sentropic/dataviz-core, dupliqué dans chaque paquet DS pour ne pas créer de dépendance entre couches) : le placement évite les chevauchements de boîtes, le recouvrement des points, la sortie de cadre ainsi que le masquage des seuils et des noms de quadrant, sur la base du meilleur effort, sans garantie (voir Limites).

Exemple

Matrice de priorisation démo

Auth SSO : complexité 18, valeur 82
SSO SAML : complexité 20, valeur 80
MFA : complexité 22, valeur 79
Exports CSV : complexité 68, valeur 72
Export PDF : complexité 70, valeur 70
API webhooks : complexité 71, valeur 69
Thème sombre : complexité 30, valeur 30
Mode offline : complexité 32, valeur 28
Chat temps réel : complexité 85, valeur 15
Audit logs : complexité 15, valeur 25
SSO SCIM : complexité 55, valeur 55
IA résumés : complexité 90, valeur 85
SSO rôles : complexité 50, valeur 50

Voir le code (Svelte)

<div class="docs-matrix-box">
  <PriorityMatrix
    label="Matrice de priorisation démo"
    data={[{"x":18,"y":82,"label":"Auth SSO"},{"x":20,"y":80,"label":"SSO SAML"},{"x":22,"y":79,"label":"MFA"},{"x":68,"y":72,"label":"Exports CSV"},{"x":70,"y":70,"label":"Export PDF"},{"x":71,"y":69,"label":"API webhooks"},{"x":30,"y":30,"label":"Thème sombre"},{"x":32,"y":28,"label":"Mode offline"},{"x":85,"y":15,"label":"Chat temps réel"},{"x":15,"y":25,"label":"Audit logs"},{"x":55,"y":55,"label":"SSO SCIM"},{"x":90,"y":85,"label":"IA résumés"},{"x":50,"y":50,"label":"SSO rôles"}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`PriorityMatrixDatum[]`	requis
`label`	`string`	requis (a11y)
`title`	`string`	`Matrice de priorisation`
`xLabel` / `yLabel`	`string`	`Complexité (0-100 pts)` / `Valeur (0-100 pts)`
`xThreshold` / `yThreshold`	`number`	`50` / `50`
`width` / `height`	`number`	`640` / `400`
`radius`	`number`	`5`

PriorityMatrixDatum = { x, y, label, tone? } : x (complexité) et y (valeur) sur 0 à 100, bornés à l'affichage (les valeurs non finies retombent à l'origine du tracé et se lisent « N/A » dans la liste accessible, jamais « NaN ») ; label affiché sur une ou deux lignes dans une boîte à bordure ; tone cycle sinon dans la palette data-vis. Quadrants : Gains rapides, Projets majeurs, Attendre, Ne pas faire (noms fixes, sans prop, même convention que ScatterPlot). Parité Svelte / React / Vue / Angular, styles par tokens, aucun attribut style littéral.

Tokens CSS

Variable sémantique	Emploi
`--st-semantic-text-primary`	Titre, texte des étiquettes.
`--st-semantic-text-secondary`	Seuils, noms de quadrant, graduations, traits de rappel.
`--st-semantic-border-subtle`	Carroyage, axes, bordure des boîtes.
`--st-semantic-surface-default`	Fond opaque des boîtes d'étiquette.
`--st-semantic-feedback-success / info / warning`	Teintes des quadrants (12 % via `color-mix`).
`--st-semantic-data-category1 … 8`	Couleur des points (`tone`).

Limites documentées

Le placement est un meilleur effort. Sur le jeu de référence 13 points (640×400) : 0 chevauchement entre boîtes, seuils et noms de quadrant dégagés, mais 3 points sur 13 couverts par une boîte ; les obstacles de seuil poussent les étiquettes sur les ancres quand la place manque. Les jeux denses se dégradent : 25 points, 0 chevauchement et 7 points couverts ; 40 points, 3 chevauchements et 15 points couverts. Tous les chiffres de cette section se rejouent par node packages/dataviz-core/bench/priority-matrix-measure.mjs (Node 22, graine 42), sauf les deux mesures de police signalées comme relevées en navigateur.

Limite	Mesure
Coût du recuit (O(n³), `max(1500, n×120)` itérations)	13 pts : 1,3 ms (1 560 itérations) ; 30 : 9,1 ms ; 50 : 39,8 ms ; 80 : 151,6 ms ; 100 : 277,3 ms. La qualité s'effondre avant le temps : sur jeux denses, 3 chevauchements à 50 points, 75 à 80, 152 à 100. Plafond utile : ~30 points, ~50 au maximum. Le placement est mémoïsé une fois par changement de référence des entrées ; muter le tableau en place laisse le placement périmé.
Boîtes estimées, pas mesurées	`12 + 7 × caractères`, plafonné à 120 px : modèle valable pour du latin étroit. Relevé ponctuel en navigateur (Inter 11 px, Chromium, hors harnais) : « MMMMMMMMMM » déborde de 17,7 px, « WWWWWWWWWWWW » de 26,7 px, « データ可視化の基盤 » de 24,0 px. Aucune prop ne permet de passer des boîtes mesurées, donc la garantie de non-chevauchement ne vaut que dans ce modèle.
Texte agrandi à 200 %	La taille en `rem` dans un `viewBox` fixe est partagée avec `ScatterPlot` ; propre au composant, l'encadré dimensionné en dur. Relevé ponctuel en navigateur (hors harnais) : à 200 %, les libellés du jeu de référence débordent de leur boîte, jusqu'à ~60 px.
Taille minimale de cadre	Jeu 13 points, chevauchements entre boîtes : 0 à 640×400, 1 à 480×300 et 400×250, 9 à 320×200, 35 à 200×140, 78 à 120×90 avec 12 boîtes hors tracé. Les points couverts suivent : 3/13 jusqu'à 400×250, 10/13 à 320×200, 13/13 à 120×90. Ne pas descendre sous ~480×300.
Déterminisme par exécution, pas par ordre d'entrée	Répétitions et SSR identiques à l'octet ; inverser le tableau d'entrée déplace 13/13 étiquettes, écart maximal 86,6 px, longueur des traits 168,5 → 221,3 px. Stabiliser l'ordre en amont si la comparabilité entre rafraîchissements compte.
Noms de quadrant non configurables	`QUADRANT_NAMES` (4 chaînes françaises) n'a pas de prop ; seuls `title`, `xLabel`, `yLabel` sont configurables.