Tableau de bord de visualisation des données en temps réel avec Kendo UI & Vue

Apprenez à créer des tableaux de bord de visualisation de données en temps réel à l'aide de Kendo UI et de Vue.js. Nous allons créer un serveur de nœud personnalisé avec Socket.io pour alimenter les fonctionnalités de l'application en temps réel.

Le besoin de fonctionnalités en temps réel dans les applications et les logiciels Web modernes ne peut pas être surestimé. Ils sont utilisés partout, des applications de médias sociaux devant mettre à jour tous les utilisateurs connectés avec de nouvelles données, aux applications de visualisation de données, aux canaux de communication, etc.

En raison de la forte demande de fonctionnalités et de fonctionnalités en temps réel, les développeurs sont toujours à la recherche de moyens pour mieux automatiser le processus de leur intégration afin de créer de meilleures applications en temps réel. Cette recherche régulière a donné lieu à des technologies telles que Pusher, PubNub, etc., dont l’idée principale est d’alimenter les fonctionnalités temps réel dans les applications Web et mobiles.

Dans cet article, nous allons montrer comment exploiter la puissance de la Composant graphique Kendo UI et Socket.io pour créer un tableau de bord de visualisation de données en temps réel avec Vue.js.

Remarque: vous souhaitez créer un tableau de bord similaire avec Angular? Consultez ce guide ici .

Créer un projet Vue

Nous devons d’abord créer un projet Vue.js avec lequel nous pourrons démontrer la mise en oeuvre de notre planificateur de tâches. Sans plus attendre, ouvrez une fenêtre de terminal sur votre répertoire préféré et exécutez la commande ci-dessous:

  vue create realtime-chart

Si vous n'avez pas installé Vue CLI dans le monde, veuillez suivre ce guide et revenez ensuite pour continuer cette leçon…

Une fois que vous avez terminé de démarrer votre application Vue, Accédez au nouveau répertoire de l'application Vue et démarrez le serveur de développement.

 cd  realtime-chart
 npm  courir servir

Ceci servira votre application Vue sur localhost: 8080 . Vous pouvez y accéder sur votre navigateur et vous devriez voir votre application Vue.

Configurer le serveur de nœud

Ensuite, configurons notre serveur de nœud personnalisé. La logique derrière notre implémentation est assez simple et directe. Sur le serveur, nous ouvrons une connexion Socket.io et émettons des données après quelques secondes spécifiées. Ensuite, sur le client, nous écoutons l’événement venant du serveur qui nous envoie de nouvelles valeurs toutes les quelques secondes. Avec ces valeurs, nous pouvons mettre à jour l'organigramme sur le client.

Installer les dépendances

Nous devons installer certaines dépendances pour les packages dont nous avons besoin à la fois pour notre serveur et le client. Ouvrez une fenêtre de terminal dans le répertoire racine du projet et exécutez la commande ci-dessous:

 npm   install  --save express socket.io socket.io-client @ progress / kendo-ui @ progress / kendo-theme -default @ progress / kendo-charts-vue-wrapper

Vous pouvez également ajouter le package Kendo UI via CDN pour vous assurer qu'il est toujours disponible dans votre application. Ouvrez le fichier index.html du répertoire public de votre projet et mettez à jour la section avec le script ci-dessous:

 <   src  =  " https://unpkg.com/@progress/kendo-charts-vue-wrapper/dist/cdn/kendo-charts-vue-wrapper.js "   >  </  script > 
 < script   src  =  " https://kendo.cdn.telerik.com/2017.3 .913 / js / kendo.all.min.js  " >  </  script > 
 < script   src  ] =  " https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js "  > [19659026] </  script > 
 < script   src  =  " https://unpkg.com/vue/dist/vue.min .js  " >  </  script >  

Créez maintenant un fichier server.js dans le répertoire racine du projet et mettez-le à jour avec le code ci-dessous:

    
 const  express  =   require  (  "express" ) ; 
 const  app  =   express  () ; 
 const  port  =   4000 ; 
 const  serveur  =  app .  écoutez  ( ` $ [{1} port }   `   fonction  ()   {
  console .  log  ( `Le serveur a démarré sur le port  $ { port }  `  )  ]; 
} ) ; 
 const  io  =   require  ( "socket.io" )  (19659024] ( serveur ) ; 
 function   getRandomValue  ()  {
     return  Math .  étage  ] ( Math .  random  ()   *   90 )   +   20 
} 
io .  sur  ( "connexion"  socket  =>   {
     setInterval  ( ( ])   =>   {
        socket .  diffusion .  emit  ( "newdata"   getRandomValue  () ) 
     }   9000 ) 
    
} ) ; 

Nous définissons ici une fonction getRandomValue () qui renvoie un entier aléatoire. Ensuite, nous ouvrons une connexion Socket.io et émettons un événement newdata avec le nombre entier aléatoire généré à partir de la fonction getRandomValue () toutes les 9 secondes. Sur le client, tout ce que nous avons à faire est d’écouter cet événement et de mettre à jour notre graphique avec ces valeurs.

Enfin, pour installer le composant ChartInstaller de manière globale dans notre application Vue, ouvrez le . js dans le répertoire racine du projet et mettez-le à jour avec le code ci-dessous:

 import   { ChartInstaller }   depuis   '@ progress / kendo-charts-vue -wrapper '
Vue .  utilisez  ( ChartInstaller ) 

Configuration de la carte de Kendo UI sur le client

Pour la visualisation des données sur le client, nous utilisons le . Composant graphique Kendo UI . Il vous permet d'utiliser des graphiques sans trop de soucis à l'intérieur de Vue et d'autres frameworks tels que React et Angular. C’est un bon outil pour les personnes qui ont besoin d’obtenir rapidement et facilement des graphiques simples.

Ouvrez le fichier App.vue dans le répertoire src de votre projet et mettez à jour le section avec le code ci-dessous:

 < template > 
   < div id  =  "app" > 
     < div id  =  "vueapp"   class  =  "vue-app" > 
     < kendo  -  carte :  titre  -  texte  =  "'Tableau de bord en temps réel'" 
                 :  légende  -  position  =  ] "'bas'" 
                 :  série  =  "série" 
                 :  catégorie  -  axe  -  catégories  ] =  "catégories" 
                 :  valeur  -  axis  =  "axe" 
                 :  thème  = [19659053] "'sass'" > 
     < /  kendo  -  carte > 
 < /  de  div  > 
   < /  div > 
 < /  template > 

Nous venons de restituer le composant Kendo UI avec quelques événements graphiques de base et leurs gestionnaires. Dans la section du composant, nous nous abonnerons aux événements de graphique par les noms de gestionnaire. Mettez donc à jour la section du script du composant avec le code ci-dessous.

 < script > 
 import   '@ progress / kendo-theme-default / dist / all.css '
 import   { Carte }   de  ' @ progress / kendo-charts-vue-wrapper '
 import  io  de   "socket.io-client" ; 
 var  socket  =  io .  connect  ( "http: / / localhost: 4000 ") ; 
    
 export   default   {
nom :   'app' 
composants :   {
Graphique
} 
 monté  ()  {
 ce .  getSeriesData  () 
] . ]
 créé  ()  {
 ce .  getRealtimeData  () 
}   de données  ()   {
 return   {
  série :  [] 
    catégories :   [ "Produit1"   "Produit2"   "Produit3" ] 
    axe :   [
       {
        nom :   "stockrange" 
        étiquettes :   {
            format :   "{0}%" 
        } 
    } 
    ] 
  } 
} 
methods :  {
 getSeriesData  ( fetchedData )  {
   cette .  série  =   [[19659024] {
      nom :   'Microsoft' 
      data :   [ this .  getRandomChartValues ​​ ( fetchedData )  
             cette . . 19659024] ( fetchedData )  
            cette .  getRandomChartValues ​​ ( extraiteDonnées ) 
      axe :   "stockrange" 
    } 
     {
      nom :   'Google' 
      data :   [ this .  getRandomChartValues ​​ ( fetchedData )  
             cette . . 19659024] ( fetchedData )  
            cette .  getRandomChartValues ​​ ( extraiteDonnées ) 
      axe :   "stockrange" 
    } 
     {
      nom :   'Sealuse' 
      data :   [ this .  getRandomChartValues ​​ ( fetchedData )  
             cette . . 19659024] ( fetchedData )  
            cette .  getRandomChartValues ​​ ( extraiteDonnées ) 
      axe :   "stockrange" 
    } ] 
  } 
 getRealtimeData  ()   {
  socket .  on  ( "newdata"  fetchedData  =>   {
     cette . . ] ( fetchedData )  
  } ) 
} 
 getRandomChartValues ​​ ( numéro )  [  Math .  floor  ( Math .  random  ()   *  numéro ) [19659103] +   10 
		} 
	} 
} 
 < /  script > 

Nous importons ici les paquets de graphiques nécessaires pour rendre notre graphique. Nous avons également importé le package client Socket.io qui nous aidera à établir des communications avec le serveur.

Dans l'objet de l'application de l'application, nous avons défini une méthode getSeriesData () . remplissons notre tableau avec les données extraites du serveur. Comme nous avons besoin de différents ensembles de valeurs pour différentes parties du graphique, nous avons également défini une fonction getRandomChartValues ​​() qui prend en valeur la valeur extraite du serveur et la multiplie par un nombre aléatoire. De cette manière, nous pouvons avoir différentes valeurs pour toutes les parties de nos graphiques.

Dans la méthode getRealtimeData () nous écoutons l'événement de socket newdata du serveur. Une fois reçue, nous appelons la méthode getSeriesData () avec fetchedData passée en paramètre pour renseigner l'objet de la série de notre graphique.

Test de l'application

Nous sommes maintenant tous prêts à essayez notre application. Vous pouvez exécuter le serveur dans une fenêtre de terminal distincte du répertoire racine du projet avec: serveur de noeud

OU
serveur nodemon //  si  vous avez installé nodemon dans le monde entier

Votre application Vue fonctionne déjà sur localhost: 8080 dans le navigateur. Accédez à et regarder comment les mises à jour des données sur les stocks avec des valeurs différentes en temps réel.

Conclusion

Dans cet article, nous avons montré comment implémenter la visualisation de données en temps réel avec Socket.io et Vue.js à l'aide du composant graphique Kendo UI. Vous pouvez faire beaucoup plus avec cette application - vous pouvez étendre cette fonctionnalité pour utiliser des API de données en temps réel pour surveiller les cours des actions, etc. N'hésitez pas à consulter la documentation sur Socket.io Vue.js and Kendo UI pour en savoir plus

Ce blog vous a été présenté par Kendo UI

Si vous souhaitez en savoir plus sur la création de superbes applications Web? Kendo UI - l'intégrale Bibliothèque de composants d'interface utilisateur qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux menus déroulants et jauges.