스크립트
00:00:00TanStack récidive, cette fois en s'attaquant aux graphiques en JavaScript avec TanStack Charts.
00:00:04Il promet une taille de bundle plus petite que des bibliothèques comme ReCharts, avec du SVG et
00:00:08des sorties canvas, des animations, des infobulles, des interactions, et comme la plupart des bibliothèques TanStack, il possède un
00:00:13noyau agnostique du framework, un typage sécurisé et une excellente expérience développeur. Et malgré sa nouveauté,
00:00:18vous pouvez déjà construire de nombreux types de graphiques, de l'histogramme de base
00:00:22ou du diagramme en barres, jusqu'à des graphiques plus complexes comme un diagramme de Sankey, une treemap, des cartes thermiques, des graphiques radar,
00:00:27des camemberts, des jauges, et même de superbes cartes du monde. Il peut probablement répondre à tous vos besoins
00:00:32dès à présent. La première chose que je veux aborder, c'est la façon dont TanStack Charts aborde les graphiques,
00:00:41car c'est similaire à une bibliothèque comme ggplot2 en R : il utilise une grammaire des graphiques. Cette
00:00:47approche ne traite pas un graphique comme un type fixe, mais plutôt comme une composition de marques,
00:00:51d'échelles et de correspondances. Au lieu de demander un diagramme en barres, vous spécifiez par exemple de placer des barres
00:00:56ici, d'associer cette variable à l'axe des x, celle-là à l'axe des y, et d'appliquer ces échelles. À partir de cette description,
00:01:01un graphique émerge. C'est une différence très subtile, mais c'est ce qui rend cette bibliothèque extrêmement
00:01:05flexible. Quelqu'un a tweeté pour demander s'il était possible de créer ce type de graphique, et la réponse a été oui.
00:01:11Ce n'est pas un type de graphique intégré, la bibliothèque est simplement assez flexible pour le créer.
00:01:14Pour voir comment cela fonctionne, si nous examinons cette démo de diagramme en barres qui mappe la fréquence
00:01:18des lettres anglaises, le code le plus important ne fait que 20 lignes. On commence par définir un graphique
00:01:23grâce à la fonction define chart, et à l'intérieur, nous commençons par les marques. On peut voir
00:01:28les marques comme les éléments qui sont réellement dessinés, c'est-à-dire vos lignes, points ou barres. J'ai créé un site de démo
00:01:32essayant d'utiliser toutes les marques disponibles dans TanStack Charts, et je crois qu'il y en a environ 55,
00:01:37ce qui devrait donner un bon aperçu des graphiques réalisables avec TanStack Charts,
00:01:40et il y en a vraiment beaucoup. Accrochez-vous bien,
00:01:43mais vous pouvez voir nos graphiques en barres normaux, qu'ils soient horizontaux ou verticaux,
00:01:47de même que les lignes et les aires. Nous avons aussi des nuages de points,
00:01:51une règle qui correspond à la ligne pointillée traversant le graphique, que l'on peut rendre verticale,
00:01:54on peut créer un graphique à ticks, en x ou y, un rectangle, une cellule, des bandes,
00:01:59des flèches, des vecteurs pour créer un champ de vent, des liaisons, des hexagones,
00:02:04du texte pour l'afficher où vous voulez dans le graphique. Nous avons des cadres,
00:02:08des lignes, des différences, des graphiques de régression linéaire, des boîtes, des graphiques en violon,
00:02:13des graphiques en gaufre. On peut déjà réaliser des cartes de contour. Soit dit en passant,
00:02:17cette bibliothèque est sortie il y a une semaine, c'est fou qu'elle ait autant de fonctionnalités, et la liste continue.
00:02:22On peut créer ce graphique, quel qu'il soit, je ne sais même pas à quoi il sert.
00:02:25Nous avons une treemap, un diagramme sunburst, des diagrammes de Sankey, un guide de ciblage avec réticule,
00:02:29des graphiques radiaux comme les camemberts, donuts ou radars, et enfin
00:02:33plus bas, nous avons aussi le géoshape si vous voulez des cartes du monde. Comme je le disais, il y en a tellement
00:02:38qu'on peut les combiner pour créer pratiquement n'importe quel graphique nécessaire. Revenons à notre démo
00:02:42de diagramme en barres : la seule marque dont j'ai besoin est bar y, et à l'intérieur, on passe les données,
00:02:47ce tableau d'objets. Ensuite, on définit la clé pour l'axe des x et celle pour l'axe
00:02:51des y. C'est génial car cela évite de conformer vos données à une structure spécifique,
00:02:56vous pouvez simplement la définir ici. C'est aussi typé en toute sécurité, ce qui signifie que si je fais une faute de frappe sur une clé,
00:03:00je le saurai immédiatement, avec la sécurité de type que nous aimons chez TanStack.
00:03:04Après avoir défini les marques voulues, nous avons nos axes x et y. Pour l'axe des x,
00:03:08c'est très simple. J'ai indiqué vouloir un espace de type band, pour les catégories, afin que nos lettres soient
00:03:12espacées uniformément, avec un peu de marge entre elles. Pour l'axe des y, j'utilise une échelle
00:03:17linéaire, réservée aux nombres, et j'active le paramètre nice à true, ce qui signifie simplement d'arrondir
00:03:21l'axe à un nombre sensé au lieu de s'arrêter à la valeur la plus haute. Si je mets cela à false,
00:03:26on voit que le haut de l'axe s'arrête exactement au niveau du haut de la barre la plus haute. Ici,
00:03:30j'ai aussi ajouté une étiquette et un format à l'axe, pour formater ces nombres en pourcentages
00:03:34plutôt qu'en décimales. Toute cette définition constitue la partie agnostique du framework, mais pour l'afficher
00:03:39avec React, il suffit d'importer le composant chart, de lui passer notre définition,
00:03:43une hauteur et une étiquette, et c'est tout ce dont nous avons besoin pour faire notre graphique. Mais ce que je veux
00:03:47vraiment clarifier, c'est que nous n'avons pas utilisé de diagramme en barres ici. Nous avons défini dans le code où nous voulons
00:03:51afficher nos marques, et il se trouve que le résultat final est un diagramme en barres. C'est une nuance très
00:03:55subtile, mais c'est l'essence même de la grammaire des graphiques. Pour illustrer sa souplesse,
00:04:00disons que je souhaite une ligne de moyenne sur mon diagramme en barres : il me suffit d'aller dans le tableau des marques et d'ajouter
00:04:04une nouvelle marque, cette fois rule Y. Pour un autre exemple rapide, disons que je veux un graphique en ligne avec des points et une
00:04:09aire en dessous, eh bien je peux simplement définir tout cela comme des marques, et regardez ça, j'ai maintenant un graphique
00:04:14de notre nombre d'abonnés, ce qui est le moment parfait pour vous inviter à vous abonner et à rester à jour sur l'actualité de l'IA et
00:04:18des développeurs. Si vous voulez voir encore plus d'exemples d'utilisation de ces marques pour construire
00:04:22tous ces graphiques variés montrés plus tôt, vous pouvez consulter leur documentation ; ils ont des tonnes
00:04:26d'exemples incroyablement détaillés. D'ailleurs, j'ai pris quelques exemples supplémentaires dans leur documentation
00:04:30juste pour vous montrer exactement ce que TanStack Charts peut faire, car je n'ai pas le temps de passer en revue toutes les
00:04:34fonctionnalités en profondeur, cela prendrait littéralement environ 20 heures. Mais l'un des plus cool est ce graphique en globe,
00:04:38que j'adore vraiment. Je trouve ça super cool de pouvoir faire ça dans une bibliothèque vieille d'une semaine.
00:04:42Nous avons aussi les interactions, qui sont formidables : nous avons ce pinceau ici, on peut le glisser sur
00:04:46notre tracé et modifier sa plage de chaque côté. On peut zoomer sur notre graphique, pour effectuer un zoom
00:04:51précis sur ce graphique en ligne. Nous avons la sélection par clé et par clavier, donc si je survole l'un d'eux
00:04:56et appuie sur espace, tout fonctionne bien, et vous pouvez voir que la valeur de ce que nous avons sélectionné s'affiche en bas.
00:05:00Nous avons aussi un réticule, donc au fil du déplacement, il affiche la date exacte
00:05:04sur laquelle je passe sur l'axe en bas. Il y a aussi des infobulles dotées de nombreuses options de configuration,
00:05:09ainsi vous pouvez voir qu'actuellement, c'est réglé sur nearest X, donc seule la distance horizontale compte pour déterminer
00:05:14le point sélectionné. On pourrait aussi choisir une stratégie comme group X, pour afficher toutes ces
00:05:18valeurs lorsqu'on survole n'importe quelle zone ici. On peut également épingler une infobulle : en survolant
00:05:22ces diagrammes en barres, l'infobulle change, mais si je clique sur l'un d'eux, cela l'épingle
00:05:26et affiche des détails supplémentaires. Ici, vous pouvez également voir que nous n'avons pas d'infobulle, mais
00:05:31que ces valeurs sont lues directement en bas, ce qui permet d'extraire cette information. Ici,
00:05:35nous affichons une infobulle personnalisée : si je clique pour l'épingler, un bouton de fermeture personnalisé apparaît, et tout cela est
00:05:39réalisé en React. Cette bibliothèque gère également les animations : si je modifie
00:05:43les valeurs de ces barres, on constate une transition animée fluide entre les anciennes et les nouvelles valeurs.
00:05:48On peut aussi cliquer sur relire ici pour observer une apparition échelonnée des barres,
00:05:51et si je supprime certaines barres en bas, on voit l'animation s'adapter
00:05:55lors de l'ajout ou du retrait de ces barres. On peut même effectuer une animation en continu : à l'arrivée de nouvelles données,
00:06:00la ligne ou la barre se décale simplement au lieu d'être redessinée. Et avant de passer à la façon dont
00:06:03ces graphiques sont stylisés, la dernière fonctionnalité à montrer est l'exportation. J'ai des
00:06:07boutons ici pour télécharger en SVG et PNG, et en cliquant dessus, voici le résultat final obtenu.
00:06:12Parlons maintenant de la façon de thématiser et styliser ces graphiques. Si je supprime les styles de
00:06:16ce graphique, voici l'aspect de base par défaut : sans style à l'origine, il utilise simplement
00:06:21la couleur courante pour le premier plan, et l'arrière-plan est transparent. Il y a trois niveaux
00:06:25de style dans TanStack Charts : le premier concerne vos variables CSS. Ce sont vos couleurs par catégorie
00:06:30issues de six propriétés personnalisées, que l'on peut surcharger sur n'importe quel conteneur. En changeant ces
00:06:35valeurs, vous voyez comment le graphique met à jour toutes ses couleurs. Le deuxième niveau se situe au niveau du
00:06:39bloc de thème, présent dans la définition du graphique. Il est destiné au mobilier du graphique
00:06:43plutôt qu'aux données, c'est-à-dire le texte, les lignes de grille, l'arrière-plan,
00:06:47etc. Enfin, le troisième niveau s'applique aux marques elles-mêmes, permettant de configurer le remplissage,
00:06:51le tracé, l'opacité, les extrémités de lignes, les tirets, le rayon des coins, les polices, etc. Ces valeurs peuvent être fixes ou
00:06:57pilotées par les données, permettant par exemple de colorer une barre selon qu'elle dépasse un certain objectif. On peut même créer
00:07:01des dégradés à l'aide des données. Comme je l'ai dit, cette bibliothèque est hyper flexible et très légère.
00:07:06Dans ce test de référence complet incluant réticules, brossage, zoom et sélection,
00:07:10la taille du bundle se situe entre 36 et 43 kilo-octets. Si on compare à Chart.js ou
00:07:16Recharts, Chart.js pèse entre 45 et 58 ko, et Recharts entre 153 et 168 ko. TanStack Charts est donc
00:07:24nettement plus petit. Leur philosophie est un autre point fort : ils ont conçu cet outil pour deux choses.
00:07:28Premièrement, obtenir des graphiques soignés à partir d'une déclaration courte,
00:07:32et deuxièmement, permettre à une IA de composer, inspecter et modifier des graphiques sans avoir à apprendre un modèle de série spécifique
00:07:38à une application. L'API a donc été conçue pour qu'un agent puisse écrire des graphiques sans lire la
00:07:42documentation. Franchement, j'ai utilisé Claude pour configurer la plupart des démos présentées plus tôt, et bien que j'aie vérifié
00:07:47tout cela (ce qui est assez rare de nos jours), cela correspondait globalement à mes attentes. J'ai dû faire très
00:07:52peu de modifications, ce qui est surprenant pour une toute nouvelle bibliothèque. Voilà donc pour TanStack Charts. C'est mon
00:07:57nouveau coup de cœur en matière de bibliothèque de graphiques, et elle progresse rapidement. Dites-moi ce que vous en pensez dans les commentaires
00:08:01ci-dessous. N'oubliez pas de vous abonner, et comme toujours, à bientôt pour la prochaine.