Angular et la visualisation d’informations

Introduction

Du vaste domaine de la visualisation d’informations et de l’intégration de composants d’interface (GUI components), nous présentons dans ce chapitre trois aspects particuliers centrés sur un projet Angular :

La création de graphiques (de charts) hydratés par des flux de données asynchrones.
L’interfaçage de cartes géographiques (en l’occurrence de Google Maps) annotées par des informations graphiques.
L’intégration de composants graphiques issus de différentes bibliothèques de composants.

La création de graphiques sera illustrée par l’utilisation des bibliothèques graphiques D3.js et dc.js, qui reposent sur le langage SVG dont un aperçu sera donné. La bibliothèque Crossfilter, qui permet d’analyser de grands volumes de données dans le but d’effectuer une analyse multidimensionnelle, sera également mise en œuvre.

La médiatisation d’une carte géographique sera effectuée par l’emploi de l’API Google Map via un composant de la bibliothèque de composants graphiques PrimeNG. Nous surchargerons cette Google Map d’informations graphiques.

Une application Angular synthétisant ces deux points sera présentée en fin de chapitre : une Google Map stigmatisera (via des cercles de diamètres plus...

Création de charts avec D3.js et dc.js

La bibliothèque D3.js (Data-Driven Documents) permet de créer des interfaces graphiques vectorielles en JavaScript. Les codes créés en D3 créent des balises du langage SVG (Scalable Vector Graphics) (en fait, ils insèrent dans le DOM des éléments correspondant à ces balises et à leurs attributs). L’originalité de D3 est de générer des éléments graphiques en SVG à partir de collections d’objets JavaScript. Ces objets pouvant être, dans le cas d’une utilisation sous Angular, délivrés par des observables.

La bibliothèque dc.js utilise la bibliothèque D3.js pour proposer des fonctions permettant de créer des graphiques statistiques (charts). Elle est souvent utilisée avec la bibliothèque Crossfilter, qui permet en amont (mais toujours sur le client), une analyse multidimensionnelle des données.

1. Installation de D3.js

Hors Angular, la bibliothèque D3.js est liée à votre code via la balise <script> (après avoir été téléchargée, ce qui est à recommander) :

<script src="d3.min.js" type="text/javascript" />

Sous Angular, D3.js est installée en tant que module via npm :

npm install --save d3  
npm install --save-dev @types/d3

Il suffit ensuite d’importer ce module :

import * as d3 from 'd3';

2. Le langage SVG

Le langage balisé SVG, normalisé par le W3C, permet de créer des graphiques 2D vectoriels. Il permet également de contrôler (via des événements) et d’animer les éléments graphiques ainsi créés. C’est un langage très complet, les interactions entre éléments graphiques étant scriptables en JavaScript.

Par exemple, un rectangle peut être créé par la balise <rect> :

<rect x="<abscisse du coin supérieur gauche>" 
      y="<ordonnée du coin supérieur gauche>" 
      width="<largeur>" 
      height="<hauteur>" 
      stroke="<couleur de la bordure>" 
     ...

Intégration de cartes Google Map dans un projet Angular

Voyons comment utiliser le composant présenté dans la section précédente, en sélectionnant les noms des lieux à partir desquels les produits ont été commandés, non plus dans une liste déroulante, mais directement sur une Google Map. Nous allons expliquer comment interfacer une carte Google Map avec Angular, et plus spécifiquement, en utilisant la bibliothèque de composants PrimeNG, puis présenter les codes qui réalisent cette intégration. Cet exemple vous donnera un aperçu de l’utilisation de composants graphiques (UI components) sous Angular.

Vous allez réutiliser le serveur de test que vous avez créé pour alimenter en données les histogrammes. Aux données associées aux lieux à partir desquels les commandes ont été effectuées, vous rajouterez leurs coordonnées géographiques pour afficher sur la carte Google Map des cercles de diamètres proportionnels aux nombres de produits commandés. Ces cercles seront affichés « en overlay », c’est-à-dire sur une couche (un layer) située au-dessus de la carte sous-jacente.

1. Installation des prérequis techniques

Pour gérer des cartes Google Maps, vous devez d’une part installer les types TypeScript nécessaires, et d’autre part installer dans la bibliothèque de modules Node.js ceux faisant partie de la bibliothèque PrimeNG (vous pourriez utiliser une autre bibliothèque de composants, voire créer votre composant, mais cela serait un peu plus complexe).

a. Installation des types TypeScript

L’intégration de Google Maps dans un projet Angular requiert l’installation de types complémentaires pour TypeScript.

Voici la procédure à suivre :

Si vous ne l’avez déjà fait, installez l’application typings qui gère le typage de TypeScript :

npm install typings --global

Utilisez l’application typings pour installer les types relatifs à l’utilisation de Google Maps :

typings install dt~google.maps --global --save

Cela crée le fichier typings.json :

{ 
  "globalDependencies": { 
    "google.maps":...

Mise en œuvre de composants graphiques

1. Autre exemple de composant PrimeNG (Calendar)

Dans la bibliothèque de composants graphiques PrimeNG que nous avons découverte dans la section précédente figure le composant Calendar, qui permet de sélectionner une date via un calendrier.

D’une manière générale, quel que soit le composant mis en œuvre, la component directive (la balise portant comme nom le sélecteur du composant) est utilisée dans le template du composant qui l’intègre (ce composant « hôte » pouvant bien sûr être activé sur une route).

Voici le schéma de programmation d’utilisation d’un composant de PrimeNG :

<p-nomDuComposant ...></p-nomDuComposant>

(La classe implémentant le composant hôte peut bien sûr spécifier les valeurs des directives attributs nécessaires au paramétrage du composant.)

Voici la liste des principaux codes de l’application de test :

CALENDAR/src/app/app.component.html : template du composant hôte intégrant le composant Calendar de PrimeNG.
CALENDAR/src/app/app.component.ts : classe du composant hôte permettant de récupérer la date sélectionnée.
CALENDAR/src/app/app.module.ts : root module du projet (non présenté).

Voici le code du template du composant hôte AppComponent (fichier app.component.html). La variable date contient la valeur de la date sélectionnée via le calendrier. Cette valeur est passée à une méthode de la classe du composant hôte pour ici la faire afficher dans la console du navigateur.

<p-calendar [(ngModel)]="date" 
  [showIcon]="true">< 
  (onSelect)= "onChange(date)"> 
</p-calendar> 
<h3> Voici la date sélectionnée {{date}} </h3>

Voici le code du composant hôte AppComponent (fichier app.component.ts), qui ne fait qu’importer le module nécessaire à la gestion du calendrier, définir les feuilles de style nécessaires à PrimeNG, et une méthode qui reçoit la nouvelle date sélectionnée :

import { Component } from '@angular/core'; 
import {CalendarModule}...

Bilan des acquis de ce chapitre

La visualisation d’informations est un domaine dans lequel une application Angular immergée dans une architecture MEAN trouve toute sa place. Angular est particulièrement adapté pour réaliser des tableaux de bord (des dashboards) permettant de visualiser au travers de graphiques l’évolution de flux de données asynchrones. Des données géolocalisées peuvent être également médiatisées par l’annotation de cartes géographiques via des surcouches d’annotations graphiques. Ainsi, vous pouvez intégrer dans une application Angular des Google Maps surchargées par des overlays.

Un grand nombre de bibliothèques propose des composants graphiques (des UI components) prêts à l’emploi, nous avons choisi de vous présenter les bibliothèques PrimeNG et Material dont l’offre est particulièrement riche.

Dans un premier temps, nous avons expliqué comment créer un graphique (en l’occurrence, un histogramme) en utilisant la bibliothèque JavaScript graphique D3.js. D3.js insère dans le DOM des éléments du langage SVG, qui est un langage balisé permettant de réaliser des graphiques vectoriels et de les animer. Les bases de la bibliothèque D3.js ainsi que du langage SVG ont ainsi été présentées....