Principal / Comment

Créez un tableau de bord de données avec AngularJS

Dès que j'ai commencé à jouer avec AngularJS, il m'a frappé que sa capacité à saisir des données et à les utiliser directement dans le balisage pouvait offrir de grandes possibilités pour la visualisation des données. Cette approche pourrait présenter un moyen très rapide et simple de créer des visualisations de données à partir de zéro, plutôt que de devoir compter sur une bibliothèque distincte.

Dans ce didacticiel, nous allons commencer à créer un tableau de bord de données pour une application Web - dans ce cas, un clone RunKeeper appelé «JogTracker». Nous passerons de l'utilisation des valeurs angulaires dans le style HTML à SVG en ligne, avant d'utiliser le polyfill conic-gradient ().

Comme de nombreuses applications de suivi de la condition physique, l

Comme de nombreuses applications de suivi de la condition physique, l'une des parties les plus populaires de Runkeeper est la possibilité de suivre vos données

Pour moi, la partie la plus intéressante de cette technique est que vous pouvez commencer à créer des visualisations de données avec même les connaissances JavaScript les plus limitées. Nous utiliserons largement notre fichier de script pour contenir des données, donc si vous pouvez écrire des objets JavaScript, vous serez sur la bonne voie.

Configuration de l'application

Pour ce prototype, je vais laisser Bootstrap faire le gros du travail en matière de style et de mise en page, afin que nous puissions nous concentrer sur le code spécifique à Angular. Je suppose que vous avez inclus la bibliothèque Angular dans votre HTML, et que vous avez configuré et lié votre application Angular (voir le code d'exemple pour plus de détails sur la façon de procéder, si nécessaire).

Nous allons maintenant créer la structure de données pour notre application JogTracker. Nous allons garder cela très simple, avec chaque «jogging» stocké comme un objet avec une propriété d'heure, de distance et de date. Nous allons stocker ces objets dans un tableau appelé $ scope.data - $ scope nous permet d'accéder à ces données directement depuis notre contrôleur dans le HTML.

$scope.data = [{ distance: 3.24, time: 34, date: new Date('May 01, 2015'), }, // And so on... ]

Afin de créer mes visualisations, j'ai également besoin de connaître les valeurs maximales de temps et de distance. Cela peut être fait pour chacun avec un petit morceau de JavaScript:

$scope.maxDistance = Math.max.apply(Math, $scope.data.map(function(jog) { return jog.distance; }))

Je peux alors faire de même pour trouver le temps maximum. Maintenant j'ai toutes mes données stockées et accessibles depuis mon HTML, c'est tout pour JavaScript!

Diagramme à bandes

La visualisation principale que je vais créer est un graphique à barres montrant les 10 derniers jogs de mes données, avec une barre pour la distance et le temps. L'accessibilité est importante, donc dans le HTML, je vais créer un tableau contenant les données et utiliser CSS pour le convertir visuellement en histogramme.

Le graphique à barres étant un tableau HTML, nous pouvons ajouter des en-têtes de tableau uniquement pour les lecteurs d

Le graphique à barres étant un tableau HTML, nous pouvons ajouter des en-têtes de tableau uniquement pour les lecteurs d'écran pour des raisons d'accessibilité

Pour commencer, je vais exploiter la fonctionnalité ng-repeat d'Angular pour parcourir mon tableau $ scope.data et cracher les données dans une table.

   {jog.date }   { number} Minutes   { number} Miles

Cela créera une ligne de tableau pour chaque entrée dans les données. Je déclare le nom individuel de chaque entrée comme jog. Cela me permet d'accéder aux propriétés de cet objet, telles que jog.distance. J'ai également utilisé des filtres angulaires en utilisant |. Dans l'attribut ng-repeat, le filtre limitTo vous permet de limiter le nombre d'entrées affichées. Une valeur de 10 affichera les 10 premières entrées, mais je veux afficher les 10 dernières. Pour cela, j'ai mis le limitTo à -10.

Nous avons maintenant un tableau accessible montrant nos données. Transformons-le en graphique à barres. Tout d'abord, nous devons configurer du CSS pour remplacer l'apparence de notre table.

.bar-chart { display: block; height: 300px; position: relative; border-left: 1px solid #668284; border-bottom: 1px solid #668284; } .bar-chart td { position: absolute; width: 20px; bottom: 0; }

Cela transforme à la fois le tableau et la cellule en éléments de bloc, ajoute une bordure pour afficher un axe X et Y, et définit le positionnement et la largeur des cellules qui deviendront nos barres. Nous définissons un positionnement absolu car nous allons utiliser un peu de magie angulaire pour espacer les barres le long de notre graphique en utilisant la propriété left.

J'ai également mis en place des classes pour chaque barre, afin de leur donner une couleur de fond et de décaler leur position. La cellule .legend affichera la date sous les barres, elle a donc été positionnée comme telle. .time sera placé à côté de la barre de .distance, il a donc été poussé avec une certaine marge.

.bar-chart .legend { bottom: -40px; }  .bar-chart .distance { background: #B9D7D9; }  .bar-chart .time { background: #668284; margin-left: 30px; }

Il existe de nombreuses touches stylistiques supplémentaires, telles que la rotation du texte le long des barres, veuillez donc consulter l'exemple de projet pour le code complet. OK, maintenant pour plonger dans la magie angulaire dans notre HTML!

{ date} {jog.time } Minutes {{jog.distance}} Miles

L'élément clé de la création du graphique est l'attribut ng-style qui applique le style à l'aide de valeurs de données angulaires. Le style dans le style ng est écrit comme un objet avec des paires valeur / clé. Vous pouvez également passer de l'arithmétique et mélanger des nombres et des chaînes ici.

Regardons d'abord la valeur de gauche, qui est la même sur toutes les cellules. Je veux organiser mes 10 barres uniformément sur la largeur de mon graphique, donc je vais les espacer par incréments de 10%.

left:$index * 10 +'%'

Pour ce faire, j'utilise la valeur $ index qu'Angular attribue à toutes les entrées du ng-repeat, en partant de zéro par incréments de un, tout comme dans un tableau JavaScript. Donc, si nous exécutons les calculs, ma première cellule aura une valeur à gauche de: 0% - $ index (0) x 10 (0) + '%' (l'unité sous forme de chaîne). Ma deuxième cellule dans cette colonne aura une valeur de gauche de 10 pour cent, les 20 pour cent suivants, et ainsi de suite. Je peux également utiliser les mathématiques pour faire varier la hauteur de mes barres.

height: (jog.distance / maxDistance) * 300 + 'px'

Ici, je prends la distance de mon jogging individuel et je la divise par la distance maximale dans le tableau. Je multiplie ensuite cela par 300 (la hauteur de mon graphique en px) puis j'ajoute mon unité de px sous forme de chaîne.

Si nous considérons ce qui se passerait avec l'entrée la plus longue distance, le résultat de jog.distance / maxDistance serait un (car ils sont le même nombre), ce qui donnerait un résultat de 300px. Cela signifie que notre plus grande barre sera toujours la pleine hauteur du graphique, et les autres barres auront des hauteurs par rapport à cela.

Idéalement, la plupart de cette logique serait déplacée vers notre JavaScript, peut-être en tant que filtre angulaire personnalisé, rendant le HTML plus propre. Cependant, pour faciliter la compréhension, à ce stade, nous l'utiliserons directement dans le HTML.

Le dernier élément de la magie angulaire des données vis-à-vis des données consiste à utiliser l'attribut ng-class pour appliquer une classe, en fonction du fait qu'une condition est remplie. Dans ce cas, je veux ajouter une classe de surbrillance au jogging le plus long, donc j'ajoute ng-class = '{highlight: jog.distance === maxDistance}' à monélément.

Conclusion

Notre première visualisation de données angulaire est terminée! Ce n'est pas seulement dans les attributs de style que les valeurs angulaires peuvent être utilisées. Nous pouvons les utiliser à l'intérieur de SVG en ligne et même les utiliser dans des polyfills tels que le conic-gradient () de Lea Verou pour créer des visualisations plus complexes.

Mots : Nick Moreton

Nick Moreton est chargé de cours à la Birmingham City University. Ses domaines d'expertise incluent HTML, CSS, JavaScript, AngularJS et WordPress. Cet article a été initialement publié dans le numéro 274 du magazine net