Des graphiques de tableau de bord sans aucune dépendance
Nous avons construit les courbes de tendance, les mini-graphiques et les barres par catégorie de notre tableau de bord en SVG en ligne. Aucune bibliothèque de graphiques, quelques centaines de lignes en tout, et le mode sombre gratuit. Voici l'argumentaire pour des graphiques faits main, et les cas où il ne faut surtout pas s'y risquer.
Quand nous avons ajouté un tableau de bord de stock, le geste évident était d'installer une bibliothèque de graphiques. Les plus populaires sont excellentes. Elles sont aussi volumineuses, dogmatiques sur la mise en thème, et conçues pour couvrir mille cas alors qu'il nous en fallait quatre : une courbe de tendance à deux séries, un mini-graphique par ligne, une barre de niveau de stock et une répartition par catégorie. Nous les avons écrits en SVG en ligne à la place, et l'ensemble pèse moins lourd que les définitions de types de la plupart des bibliothèques.
Un graphique, c'est un chemin
Retirez l'outillage et une courbe n'est qu'une chaîne de caractères : un chemin SVG construit à partir de vos valeurs. Associez l'indice de chaque point à x, chaque valeur à y, et reliez-les. La seule subtilité qui mérite d'être notée, c'est la marge : placez la valeur maximale quelques pixels sous le bord supérieur, sinon le trait de votre sommet se fait couper en deux par le viewBox.
const W = 300, H = 80, PAD = 3; // top pad so the peak stroke is not clippedconst max = Math.max(1, ...values);const x = (i) => (i / (values.length - 1)) * W;const y = (v) => PAD + (H - PAD) * (1 - v / max); const d = values .map((v, i) => `${i === 0 ? 'M' : 'L'}${x(i).toFixed(1)} ${y(v).toFixed(1)}`) .join(' '); // <path d={d} fill="none" stroke="var(--color-primary)" strokeWidth="2" />Le mode sombre ne coûte rien
Le gain discret, c'est la mise en thème. Nos jetons de design sont des variables CSS, et les traits et remplissages SVG les acceptent comme n'importe quelle autre propriété. Écrire stroke="var(--color-primary)" veut dire que le graphique se recolore à l'instant où le thème bascule, sans configuration de thème au niveau du graphique, sans palette en double et sans écart entre les graphiques et le reste de l'interface. Quand nous avons ajusté plus tard notre palette sombre, les graphiques ont suivi sans qu'on y touche.
Les cas limites vous appartiennent
Les bibliothèques sont généreuses en fonctionnalités et avares sur les cas limites qui n'appartiennent qu'à vous. Que doit faire un mini-graphique avec un seul point de données ? Que dit la courbe de tendance quand une activité vient d'ouvrir et que toutes les valeurs sont à zéro ? Des composants faits main rendent ces décisions explicites et bon marché : un état vide honnête avec une phrase, une ligne plate au lieu d'un plantage, un résumé en texte à côté de chaque graphique pour les lecteurs d'écran, et une seule requête média prefers-reduced-motion qui coupe l'animation de tracé.
- Donnez à chaque graphique un aria-label et un résumé en langage simple. Le SVG est de la décoration, la phrase est la donnée.
- Animez les traits avec stroke-dashoffset pour un effet de tracé, et conditionnez-le à prefers-reduced-motion.
- Gardez les calculs et le balisage ensemble. Un composant de graphique qui se lit de haut en bas sur un seul écran est un graphique que vous pouvez réparer à 23 h.
- Concevez l'état vide en premier. Les nouveaux comptes le voient plus que n'importe quel autre état.
Quand il faut prendre une bibliothèque
Le fait main cesse d'être malin dès que les besoins montrent de vraies dents. Le zoom et la sélection à la souris, les échelles logarithmiques, les aires empilées avec une vraie interpolation, les axes au placement de graduations intelligent, le rendu en canvas pour des dizaines de milliers de points : ce sont des problèmes résolus, et les résoudre une seconde fois à la main, c'est ainsi qu'une fonctionnalité de deux jours devient un loisir de deux mois. Notre règle est simple. Si le graphique est une présentation, écrivez le SVG. Si le graphique est un instrument que l'utilisateur manipule, prenez la dépendance et soyez heureux que quelqu'un l'entretienne.
La meilleure bibliothèque de graphiques pour quatre petits graphiques s'est avérée être une boucle for.
