L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Construire un tableau de bord de visualisation de données avec Kendo UI & Angular
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:
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