Fermer

juillet 1, 2019

Construire un tableau de bord de visualisation de données avec Kendo UI & Angular5 minutes de lecture

AngularT Dark_870x220


La visualisation des données est importante car elle affiche efficacement les performances des opérations. Il permet aux utilisateurs de voir les liens entre les performances et les conditions de fonctionnement. Découvrez à quel point il est facile d’utiliser Kendo UI avec Angular et Socket.io pour mettre en place une plate-forme de visualisation de données fiable. Kendo UI fournit des composants d'interface utilisateur pour des bibliothèques telles que jQuery Angular React et Vue et contient de nombreux composants. pour créer des graphiques, des tableaux de données et des pages de glisser-déposer.

Kendo UI est personnalisable et fournit un ensemble de thèmes pour Material UI, Bootstrap, etc. Les composants de Kendo UI sont distribués sous forme de multiples packages NPM. peur de gonfler votre application avec des composants inutiles et d'augmenter votre offre de construction. Il offre des composants pour la gestion de grands ensembles de données et pour une visualisation aisée des données. Couplé à Angular, Kendo UI est un outil imparable pour le développement d’applications Web fantastiques.

Nous allons créer un tableau de bord de visualisation des données illustrant la population mondiale. En utilisant des composants de Kendo UI, nous allons créer une grille pour afficher les données de population de pays du monde entier. Nous allons créer un serveur minimal qui s’exécute sur Express et Socket.io pour alimenter les données de notre application

. Pour suivre ce didacticiel, vous devez avoir une connaissance de base de Angular. Assurez-vous que Node et NPM sont installés avant de commencer.

Si vous ne connaissez pas encore Angular, veuillez suivre le tutoriel officiel ici . Vous pouvez revenir à l'article lorsque vous avez terminé.

Nous allons créer l'application à l'aide des outils suivants:

Voici une capture d'écran de l'application que nous allons construire:

 visualisation de données tableau de bord que nous construisons

Initialisation de l'application et installation des dépendances

Pour commencer, nous allons utiliser la CLI (interface de ligne de commande) fournie par l'équipe Angular pour initialiser notre projet.

First , installez la CLI en exécutant npm install -g @ angular / cli . NPM est un gestionnaire de paquets utilisé pour l'installation de paquets. Il sera disponible sur votre PC si vous avez Node installé. Sinon, téléchargez le nœud ici .

Pour créer un nouveau projet Angular à l'aide de la CLI, ouvrez un terminal et exécutez:

 dans le nouveau kendo-dashboard --style = scss 

Cette commande est utilisé pour initialiser un nouveau projet angulaire; le projet utilisera SCSS comme pré-processeur.

Ensuite, exécutez la commande suivante dans le dossier racine du projet pour installer les dépendances:

     Ng add @ progress / kendo-angular-dropdowns
    ng add @ progress / kendo-angular-charts
    ng add @ progress / kendo-angular-grid

La commande permet d’ajouter des composants individuels de Kendo UI au projet. Nous allons maintenant installer une bibliothèque angulaire pour utiliser Socket.io dans les applications angulaires:

      npm   install  ngx-socket-io @ progress / kendo-theme-default

Pour les dépendances d’arrière-plan, nous aurons besoin de ce qui suit:

      npm   install  exprimer un analyseur de corps socket.io axios

Nous allons récupérer les données de population à partir d’une API externe . Pour ce faire, nous utiliserons Axios dans le projet.

Démarrez le serveur de développement angulaire en exécutant ng serve dans un terminal situé dans le dossier racine de votre projet.

Construction de notre serveur

19659011] Nous allons construire le serveur en utilisant Express . Express est un framework web minimal, rapide et sans opinion pour Node.js . Le serveur utilise Socket.io pour communiquer avec le client, nous allons donc intégrer Express Server à socket à l'aide de la bibliothèque HTTP.

Créez un fichier appelé server.js à la racine du fichier. projetez-le et mettez-le à jour avec l'extrait de code ci-dessous:

    
     const  express  =   require  ( 'express' ) ; 
     const  bodyParser  =   require  ( "analyseur de corps" ) ; 
     const  app  =   express  ( ) ; 
     const  http  =   require  ( 'http' ) .  createServer  (  app ) ; 
    
     const  io  =   require  ( 'socket.io' )  ([19459004)] http ) ; 
     const  axios  =   require  ([19659032] 'axios' ) ; 
    
     const  port  =  processus .  env .  PORT  || [19659069] 4000 ; 
    
    
     const  BASE_URL  =   'http://api.population.io:80/1.0/population/' ; 
     const  ] COUNTRY  =   'Monde' ; 

La configuration ici est plutôt standard pour les applications Express utilisant Socket.io. Il n'y a aucun problème si vous ne connaissez pas Socket.io car nous n'utiliserons que deux méthodes: émettre pour la répartition des événements et io.on pour les écouter. . Vous pouvez toujours suivre le didacticiel officiel ici .

Nous créons un serveur pour écouter les événements de notre application tout en distribuant des événements. Nous allons donc configurer des écouteurs et des méthodes de communication avec le client:

     const  express  =   require  ( 'express' ) ; 
     const  bodyParser  =    ( "analyseur de corps" ) ; 
    
     ... 
     ... 
    
    io .  sur  ( 'connection'   asynchrone   ( prise )   => 19659098] {
       ] getWorldPopulation  () ; 
      
       const  youthPopulation  =   wait   getWorldAgePopulation  ( 24 ; 
       const  oldPopulation  =   wait   getWorldAgePopulation  ( 45 ) ; 
    
      io .  emit  ( 'population de jeunes'  population-jeunesse ) ; 
      io .  emit  ( 'population'  la population âgée ) ; 
    
       const  populationData  =   ] wait   getWorldPopulationLast5years  () ; 
       wait   getCountriesPopulationData  ( 2019    ; 
      io .  emit  ( "population des 5 dernières années"  populationData ) ; 
    
      socket .  on  ( 'chercher des données de population'   ( { age  année } 19659031])   =>   {
         getCountriesPopulationData  ( année 
age ) } ] [1965931] ]) ; const dateInISO = new Date () . to (19659031) () . split ( 'T' ) [ 0 ] ; const années = [ { année : '2019' date : dateInISO }

. année : '2018' date : '2018-12-31' }
{ ] année : '2017' date : '2017-12-31' }
{ année : '2016' date : '2016-12-31' }
{ année : '2015' date : [19659072] '2015-12-31'
{ année : '2014' date : '2014-12-31' } ] ;

asynchrone fonction getWorldPopulationLast5years () {
let populationData = [] ;
pour ( l'année de de années ) {[19659233] const { population_ totale } = wait getCountryPopulationForYear ( année . date [19459334] «Monde» ) ;
        populationData = populationData . concat ( {
          année : année . année
          population : population_ totale . population
}
}
retour populationData ;
;
; 19659055] async function getCountriesPopulationData ( année age ) {
const { de données numériques } = wait axios . get [ ' $ { BASE_URL } {{ année } / age / $ { age } / ` ) [1945931]
      io . emit ( "données sur la population des pays" données )
}

async function getWorldPopulation 19659031] () {
const { données } = wait axios . obtenez ( ` $ { BASE_URL } $ { PAYS } / aujourd'hui et demain / ' ) ;
const [ aujourd'hui de demain ] = de données . de la population totale ;
      io . emit ( 'population mondiale' { aujourd'hui demain } ) [19659161]}

async function getWorldAgePopulation ( age ) {
const { de données



Source link