Étude de cas KendoReact Charts : enquête concepteur-développeur

Si vous souhaitez un moyen rapide et facile de commencer à intégrer des graphiques magnifiques, réactifs et entièrement accessibles dans vos applications React, ne cherchez pas plus loin que KendoReact.

N’importe quel développeur vous dira que l’une des choses les plus pénibles au monde à coder à partir de zéro, ce sont les graphiques. Compliqué, difficile à rendre réactif et capricieux, je peux penser à environ un millier de choses que je préférerais faire au lieu de créer des graphiques à partir de zéro – et la plupart de ces choses ne sont pas très amusantes non plus.

C’est pourquoi, en s’asseyant pour créer le Résultats de l’enquête sur l’état de la collaboration entre concepteurs et développeurs page, j’étais immensément reconnaissant de pouvoir atteindre notre Progress KendoGraphiques de réaction. Alors que je m’asseyais avec l’équipe pour commencer à planifier la page, j’ai réalisé que j’allais devoir créer 47 graphiques au total ! Tous ces graphiques devaient être :

• Entièrement réactif, prêt à l’emploi. Je n’ai absolument pas eu le temps de bricoler des points d’arrêt individuels pour 47 graphiques, et je ne veux même pas imaginer à quoi ressemblerait ce CSS.
• Facile à personnaliser pour s’adapter aux couleurs de notre marque, idéalement en même temps (car encore une fois… 47 charts).
• Accessible afin que tous nos utilisateurs puissent comprendre/interagir avec le contenu des 47 graphiques.
• Rapide à créer, puisque, d’ailleurs, ai-je mentionné que je devais faire 47 d’entre eux ???

D’accord, alors… j’étais peut-être un peu intimidé par la portée et l’ampleur de cette tâche. La date limite approchait rapidement et je devais me mettre au travail. Poursuivez votre lecture pour voir comment les graphiques KendoReact ont résisté à mon évaluation, sur la base de ces quatre priorités principales. Alerte spoiler : J’étais plutôt content d’eux.

Réactivité

En 2024, la réactivité fait partie de ces choses qui ne sont vraiment pas facultatives. Tout le monde accède au Web depuis son téléphone, sa tablette, sa voiture, l’écran situé à l’avant de son réfrigérateur, etc. Et pourtant, les graphiques et les visualisations de données sont l’une des rares choses qui semblent avoir échappé aux mailles du filet en matière de performances réactives ; il existe encore un nombre vraiment surprenant de graphiques sur le Web qui ne sont ni lisibles ni utilisables si vous n’êtes pas sur un écran en taille réelle.

Même en mettant de côté les utilisateurs d’appareils mobiles (et autres petits écrans), nous avions quelques questions liées. Étant donné que ces graphiques devaient permettre aux utilisateurs de comparer les résultats, ils devaient être présentés côte à côte. Cela signifiait que même en plein écran, les graphiques individuels seraient toujours (dans de nombreux cas) « demi » de taille. La réactivité n’était ici vraiment pas négociable.

Heureusement, ce n’est pas non plus un problème avec les graphiques KendoReact. Dès que vous les déposez, ils réagissent automatiquement, aucun ajustement supplémentaire n’est nécessaire. Dans de nombreux cas, j’ai spécifié une hauteur sur les graphiques à barres, pour m’assurer qu’il y avait suffisamment d’espace entre les barres, mais il s’agissait avant tout d’une préférence visuelle (les graphiques n’en avaient pas besoin pour être réactifs). Ce n’était pas non plus trop difficile, il suffisait d’ajouter une hauteur à l’élément parent Chart :

<Chart style={{height: 200}}>

Personnalisation

Comme vous pouvez le constater lors d’une visite rapide sur le site du rapport, il existait une identité de marque assez forte que nous devions faire correspondre à la conception visuelle de ces graphiques. Progress, comme la plupart des autres entreprises, dispose d’un guide de style très spécifique. Tout ce que nous voulions mettre sur cette page devait être cohérent avec la conception des autres pages du site/du menu de navigation/etc. En pratique, cela signifiait que je devais pouvoir personnaliser les polices et les couleurs de tous les graphiques.

Puisque je devais gérer la conception visuelle de la page entière (pas juste les charts), j’ai choisi de définir mes styles en Progress Générateur de thèmes et exportez simplement le Sass. Cela m’a épargné un tonne de temps, par rapport à l’écriture manuelle du Sass – et honnêtement, je suis assez doué avec CSS, donc cela veut dire quelque chose.

En définissant toutes mes couleurs et styles dans ThemeBuilder, j’ai pu prévisualiser en direct l’apparence de mes graphiques et autres composants.

En plus des composants KendoReact, j’ai également géré tous les styles de base des éléments HTML via ThemeBuilder : en-têtes, liens, listes à puces, paragraphes, etc. Cela a été d’une grande aide, car (par nature) un rapport signifie un parcelle du texte, ces éléments de base ont été utilisés autour de chaque graphique. Pouvoir les styliser au même endroit que les composants et conserver tous mes CSS gérés au même endroit était un énorme avantage.

Accessibilité

Étant donné que les sections descriptives du rapport étaient pour la plupart du texte brut, il n’y avait pas grand-chose à craindre du point de vue de l’accessibilité : après tout, les anciennes balises d’en-tête et de paragraphe classiques sont à peu près aussi accessibles que possible.

Cependant, les graphiques (comme nous le savons tous) sont une autre histoire. Souvent, les graphiques sur le Web sont des images plates, ce qui signifie qu’ils doivent s’appuyer entièrement sur du texte alternatif pour être compréhensibles par nos utilisateurs malvoyants. Si un graphique n’est pas qu’une image, c’est souvent parce qu’il comporte des éléments interactifs (comme cliquer pour mettre en évidence/isoler des éléments spécifiques)… mais ceux-ci ont tendance à être difficiles, voire impossibles, à utiliser si vous naviguez avec un clavier ou autre périphérique de saisie alternatif.

Les graphiques KendoReact, en revanche, ne présentent pas ces problèmes. Ils sont entièrement navigable au clavierce qui signifie que vous pouvez faire toutes les choses interactives intéressantes avec eux, peu importe ce que vous utilisez comme périphérique d’entrée. Voici un exemple d’activation et de désactivation de sections du graphique à secteurs en utilisant uniquement le clavier :

En plus de cela, les graphiques aussi jouez gentiment avec les lecteurs d’écran ! Évidemment, c’est un peu plus difficile à capturer dans un format pouvant être inclus dans un blog… mais j’ai fait de mon mieux. Voici un extrait de VoiceOver sur OS X décrivant les valeurs de points d’un graphique à barres (en utilisant également uniquement la navigation au clavier) :

Souvent, nos utilisateurs qui s’appuient sur des fonctionnalités d’accessibilité sont laissés pour compte lorsqu’il s’agit de graphiques et d’autres formes de visualisation de données. Bien que nous puissions contribuer à atténuer les graphiques inaccessibles en fournissant des résumés et des descriptions, il est infiniment mieux si nos utilisateurs peuvent interpréter les données eux-mêmes – et avec les graphiques KendoReact, ils le peuvent.

Vitesse

Toutes ces autres choses sont belles, mais n’ont qu’une valeur limitée s’il faut des heures pour créer un seul graphique. Si vous les créez à partir de zéro, cela prendra du temps. Parfois, même si vous utilisez une bibliothèque, la quantité de personnalisation et d’ajustements manuels nécessaires pour obtenir ce que vous voulez signifie que vous ne gagnez toujours pas autant de temps. Les graphiques KendoReact sont cependant rapides et faciles à mettre en œuvre.

Si vous utilisez ThemeBuilder (comme je l’étais), les styles de haut niveau (polices et couleurs) seront déjà appliqués dès que vous ajouterez le nouveau graphique à la page. Il y a eu un petit investissement de temps initial pour définir les configurations des graphiques comme je le souhaitais pour ce projet : personnaliser les types d’unités en pourcentages, supprimer les étiquettes de l’axe X sur les graphiques à barres et définir les étiquettes pour qu’elles apparaissent à droite de chacun. barre, en ajustant l’endroit où la légende apparaît dans les diagrammes circulaires, etc. Une fois cela fait, il était assez facile de dupliquer le graphique et de mettre à jour les données.

Liaison de données est flexible et peut être géré via des tableaux ou des objets, donc quelle que soit la forme sous laquelle vous avez déjà les données, vous n’aurez probablement pas à les modifier. Même avec les personnalisations que j’ai effectuées, chaque graphique comportait moins de 50 lignes de code, et cela inclut les importations et autres passe-partout ! C’est à peu près plug-and-play ; pourquoi ne pas aimer ça ?

Essayez-les vous-même !

Les bibliothèques de composants de Kendo UI combinent forme et fonction, offrant plus de 100 composants intuitifs et riches en fonctionnalités, tous hautement personnalisables et conçus en gardant à l’esprit l’expérience du développeur et de l’utilisateur final. Si vous souhaitez un moyen rapide et facile de commencer à intégrer des graphiques magnifiques, réactifs et entièrement accessibles dans vos applications React, ne cherchez pas plus loin. Découvrez le Bibliothèque de composants de l’interface utilisateur KendoReactet essayez-le, entièrement gratuit pendant 30 jours !

Bien sûr, n’oubliez pas de consulter notre page Web des résultats de l’enquête pour voir tous ces graphiques en action – et pendant que vous y êtes, vous voudrez certainement télécharger le rapport complet pour obtenir toutes les analyses de données supplémentaires et des coupes transversales intéressantes. Nous pensons qu’il y a beaucoup à apprendre et il regorge de conseils utiles pour améliorer le processus de collaboration sur votre lieu de travail.

Essayez KendoReact