Comment créer une grille de données de mise à jour en temps réel dans React

Dans cet article de blog, nous examinons pour la première fois comment lier des données en temps réel à la grille de données KendoReact.

Il existe de nombreux exemples de construction d'une grille de données à l'aide de données statiques, mais qu'en est-il des données de diffusion en direct ?

Dans cet article de blog, je veux souligner comment vous pouvez créer une grille en temps réel qui utilise leGrille de données KendoReactet des données de diffusion en direct pour créer un tableau qui met à jour les cellules de données appropriées et met en évidence les changements en direct en mettant à jour les couleurs et l'apparence des cellules en fonction du type de changement qui s'est produit.

Allons-y directement !

Le projet fini

Pour ceux qui préfèrent avoir l'ensemble du projet en une seule fois, puis suivre le blog,voici un lien direct vers le projet StackBlitzauquel je ferai référence au fur et à mesure.

Préparer le terrain—Lier les données à la grille de données React

Remarque : Tout au long de cet article de blog, je traiterai desGrille de données KendoReactaussi bien queBouton KendoRéagir Composants. Pour savoir comment vous familiariser avec ces composants, je vous recommande vivement de consulter lePremiers pas avec l'article KendoReactqui vous permettra de vous familiariser avec l'utilisation de notre grille de données React.

Vous pouvez également suivre les étapes de base décrites dans leArticle de démarrage de React Data Tablepour arriver à un point où vous pouvez suivre le code ci-dessous.

Au départ, nous chargeons simplement un tableau d'éléments de données dans notre table de données KendoReact.

importer  *  commeRéagirà partir de  'réagir';
importer  *  commeRéagirDOMà partir de  'réagir-dom';
importer {Grille,GrilleColonnecommeColonne} à partir de  '@progress/kendo-react-grid';
importerdes produitsà partir de  './produits.json';
constante  Application = () => {
constante [Les données,setData] =Réagir.useState(des produits);

retourner (
  <>
    <Grille  Les données={Les données}>
      <Colonne  champ="ID produit" Titre="identifiant" largeur="80px" filtrable={faux}  />
      <Colonne champ="Nom du produit"  Titre="Nom"  largeur="250px"  />
      <Colonne champ="Unités en stock" Titre="En stock" filtre="numérique" largeur="100px" cellule={InStockCell} />
      <Colonne champ="Prix ​​unitaire" Titre="Prix" filtre="numérique" largeur="150px" />
    </Grille>
  </>
);
};

Dans ce cas, les données ne sont qu'un objet JSON représentant 10 éléments de données avec les champs que nous avons définis dans la collection de colonnes de la grille et quelques autres.

Ensuite, nous devrons prendre ce tableau de données et y ajouter un peu de streaming.

Mise à jour aléatoire des données

Un avertissement rapide : le code que j'ai écrit pour mettre à jour les données à des intervalles aléatoires a pour seul but de fournir une présentation simple des données changeant à des intervalles aléatoires. Vous avez très probablement déjà une stratégie pour mettre à jour les données vous-même, ou vous diffusez des données depuis quelque part et ne vous souciez même pas de gérer les données vous-même.

Tout cela pour dire que le seul but de ce code est d'illustrer comment configurer des mises à jour en temps réel avec la grille de données KendoReact et il ne remportera certainement aucun prix pour le code propre. 😉

Pour ceux qui copient et collent au fur et à mesure, j'ai ajouté la collection de variables suivante qui nous aidera avec l'état de ce composant particulier. Ne vous inquiétez pas trop de ce dont ils sont responsables pour le moment.

constante [Les données,setData] =Réagir.useState(des produits);
constante [minuteur en pause,setPausedTimer] =Réagir.useState(vrai);
constante [buttonLabel,setButtonLabelsetButtonLabel] =Réagir.useState('Démarrer');
constantechangeIntervalRef=Réagir.useRef(nul);

Pour rendre cela plus facile à suivre et pour simplifier l'exemple, je mets à jour au hasardun seul champlaUnités en stockchamp pour ajouter ou supprimer un nombre aléatoire d'unités (entre -4 et 4).

Ceci est géré par trois fonctions que j'ai ajoutées dans le code :

• randomizeData– prend une collection de données et sélectionne au hasard les entrées de la collection à mettre à jour
• mise à jourStock– prend l'entrée sélectionnée derandomizeDataet détermine combien sera ajouté ou soustrait deUnités en stock ; il définit égalementest changéà vrai (pour indiquer que ce champ a été mis à jour) et nous disons si ce changement a éténégatifoupositifselon si nous avons ajouté ou soustrait
• mettre à jour la valeur du stock– est utilisé parMettre à jour le stockajouter ou soustraire un nombre entre 0 et 4

constante  randomizeData = (donnéespassées) => {
	laissernouvelles données=donnéespassées.tranche();
	pour (
	  laisserje=Math.rond(Math.Aléatoire() * dix);je<nouvelles données.longueur;je+=Math.rond(Math.Aléatoire() * dix)) {
	  mise à jourStock(nouvelles données[je]);
	}
	retournernouvelles données;
};


constante  mise à jourStock = (lignepassée) => {
	laisseranciennesUnitésEnStock=lignepassée.Unités en stock;
	laissermis à jourUnitésEnStock= mettre à jour la valeur du stock();mis à jourUnitésEnStock< 0 ? (lignepassée.changer le type= 'négatif') : (lignepassée.changer le type= 'positif');lignepassée.est changé= vrai;lignepassée.Unités en stock=anciennesUnitésEnStock-mis à jourUnitésEnStock;
};

constante  mettre à jour la valeur du stock = () => {
  retournerMath.sol(Math.Aléatoire() * 4) * (Math.rond(Math.Aléatoire()) ? 1 : -1);
};

Une fois ces fonctions configurées, il s'agit de mettre à jour les cellules de manière aléatoire à un intervalle défini. Cela peut être fait en utilisant lesetInterval()etclearInterval()Fonctions JavaScript.

j'ai mis en place lestartDataChange()etpauseChangeDonnées()fonctions pour cela.

constante  startDataChange = () => {
  clearInterval(changeIntervalRef.courant);changeIntervalRef.courant= setInterval(() => {
	  laissernouvelles données= randomizeData(Les données);
	  setData(nouvelles données);
  }, 1000);
};


constante  pauseDataChange = () => {
  clearInterval(changeIntervalRef.courant);
};

Cela va maintenant appeler lerandomizeDatafonction toutes les 1 seconde, qui mettra à jour quelques lignes aléatoires avec une augmentation ou une diminution deUnités en stock.

Pour créer un événement qui nous permet de démarrer ou d'arrêter nos données "en direct", quelque chose comme ce gestionnaire de clics peut fonctionner :

constante  onStartStopClick = () => {
	updateButtonLabel();
	si (minuteur en pause) {
		startDataChange();
		setPausedTimer(!minuteur en pause);
	} autre {
		pauseDataChange();
		setPausedTimer(!minuteur en pause);
	}
};
	constante  updateButtonLabel = () => {minuteur en pause? setButtonLabelsetButtonLabel('Arrêter') : setButtonLabelsetButtonLabel('Démarrer');
};

Si nous construisons notre projet et appuyons sur le bouton Démarrer, nous verrons les cellules de la colonne "En stock" se mettre à jour de manière aléatoire ! Cependant, il est difficile de voir quand les changements se produisent et où puisque rien ne change visuellement, juste la valeur de la cellule.

Cela signifie que pour avoir des données en direct et mises à jour dans la grille de données KendoReact, il vous suffit de mettre à jour les données sous-jacentes elles-mêmes. S'il s'agit déjà d'un flux de données provenant de votre backend ou vivant quelque part dans votre application React, vous pouvez simplement pointer l'ensemble de données vers la table de données KendoReact et vous êtes prêt pour les courses !

Cependant, nous pouvons faire plus. Que se passe-t-il si nous voulons mettre à jour le style des cellules selon que la valeur a augmenté ou diminué ?

Mise à jour des styles de cellule pour notre grille en temps réel

Maintenant que nous avons React Data Table, qui se met à jour automatiquement via les données de diffusion en direct, nous pouvons voir comment nous pouvons mettre à jour l'interface utilisateur pour mettre en évidence qu'un changement s'est produit.

Dans notre application React actuelle, nous nous concentrons sur le champ "En stock", et les chiffres augmentent ou diminuent. Puisque nous n'avons que ces deux états, il est logique de se concentrer sur l'application d'un style pour indiquer un changement positif, et un autre pour indiquer un changement négatif. Le vert est généralement associé à la croissance, tandis que le rouge est la couleur vers laquelle nous nous dirigeons lorsque quelque chose rétrécit.

Pour faciliter la tâche à tous, voici les styles et les couleurs que nous utiliserons :

• Positif:Texte vert avec un vert clair (#bffdbc3) Couleur de l'arrière plan
• Négatif:Texte rouge avec un rouge clair (#ffd1d1) Couleur de l'arrière plan

Chaque fois que nous devons personnaliser le comportement d'une cellule de grille dans notre grille de données React, nous devons tirer parti de lafonctionnalité de cellules personnaliséesce qui nous permet de passer n'importe quel composant React pour refléter notre cellule.

Comme ligne de base, nous pouvons créer cette fonction qui renvoie la même cellule que celle que nous aurions normalement dans notre grille de données React. Nous pouvons personnaliser davantage cela pour ajouter ultérieurement nos mises à jour des styles.

constante InStockCell = (accessoires) => {
	constantechamp=accessoires.champ|| '';
	constanteévaluer=accessoires.élément de données[champ];
	retourner (
	  <td
		colSpan={accessoires.colSpan}
		rôle={'cellule de grille'}
		aria-colindex={accessoires.ariaColumnIndex}
		aria-sélectionné={accessoires.est sélectionné}
      >
        {évaluer=== nul ? '' :accessoires.élément de données[champ].toString()}
      </td>
    );
}

Bien que nous ayons quelques accessoires supplémentaires à ce sujet

élément (lié à l'accessibilité), le seul point à retenir est que nous avons affaire aux mêmes éléments que nous aurions affaire si nous écrivions nous-mêmes une table de données.

Pour remplacer le rendu par défaut du champ "En stock" pour utiliser cette nouvelle cellule personnalisée, nous mettrions simplement à jour la configuration de la colonne pour utiliser lecelluleprop, comme ceci:

<Colonne
	champ="Unités en stock"
	Titre="En stock"
	filtre="numérique"
	largeur="100px"
	cellule={InStockCell}
/>

Vient maintenant le moment où nous pouvons mettre à jour le style de la cellule selon que nous avons un changement positif ou négatif dans nos données de diffusion en direct.

Pour cet exemple, il suffit de mettre à jour le style prop de notre

élément. Vous pouvez également travailler avec lenom du cours prop si vous aviez une classe externe à appliquer. Dans mon cas, je vais créer un objet appeléCellColors qui contiendra les propriétés de couleur et de couleur d'arrière-plan. Je vais ensuite l'utiliser pour mettre à jour le style de ma cellule comme ceci:

retourner (
	<td
	  style={{Couleur:CellColors.Couleur,Contexte:CellColors.Couleur de l'arrière plan,
	  }}
	  colSpan={accessoires.colSpan}
	  rôle={'cellule de grille'}
	  aria-colindex={accessoires.ariaColumnIndex}
	  aria-sélectionné={accessoires.est sélectionné}
	>
	  {évaluer=== nul ? '' :accessoires.élément de données[champ].toString()}
	</td>
);

Je couvrirai la logique de la façon dont je créeCellColorsensuite, mais je voulais souligner à quel point nous avons besoin d'un petit changement dans le rendu de l'interface utilisateur pour mettre à jour automatiquement notre grille en temps réel pour montrer quand les valeurs sous-jacentes ont augmenté ou diminué.

Abordant le reste de la logique dans ceInStockCellcomposant, je veux mentionner un champ que j'ai montré précédemment:est changé . Ce champ se trouve sur tous les éléments de données et nous permettra de signaler si un élément de données particulier a été modifié ou non.

Ce type de champ n'est pas nécessaire. Je l'ai juste ajouté à cet exemple pour souligner que vous pouvez bifurquer dans ces cellules personnalisées pour créer différentes options de rendu en fonction de vos données.

Le prochain champ à rappeler est lechanger le typechamp, qui sera soitpositifounégatif.

constante  InStockCell = (accessoires) => {
	constantecheckChange=accessoires.élément de données.est changé|| faux;
	constantechamp=accessoires.champ|| '';
	constanteévaluer=accessoires.élément de données[champ];

	si (checkChange=== vrai) {
      laisserchanger le type=accessoires.élément de données.changer le type;
	  laisserCellColors= {};changer le type=== 'positif' ? ((CellColors.Couleur= 'vert'), (CellColors.Couleur de l'arrière plan= '#bfdbc3')) : ((CellColors.Couleur= 'rouge'), (CellColors.Couleur de l'arrière plan= '# ffd1d1'));
      
      retourner (
        <td
          style={{Couleur:CellColors.Couleur,Contexte:CellColors.Couleur de l'arrière plan,
          }}
         colSpan={accessoires.colSpan}
         rôle={'cellule de grille'}
         aria-colindex={accessoires.ariaColumnIndex}
         aria-sélectionné={accessoires.est sélectionné}
        >
          {évaluer=== nul ? '' :accessoires.élément de données[champ].toString()}
        </td>
      );
      } autre { 
        retourner (
          <td
            colSpan={accessoires.colSpan}
            rôle={'cellule de grille'}
            aria-colindex={accessoires.ariaColumnIndex}
            aria-sélectionné={accessoires.est sélectionné}
          >
            {évaluer=== nul ? '' :accessoires.élément de données[champ].toString()}
          </td>
        );
    }
};

Lorsque nous construisons notre application et que nous appuyons sur Démarrer, nous verrons désormais les données de diffusion en direct dans notre grille de données React où les cellules mettent automatiquement à jour leur style en fonction de l'évolution de la valeur !

Pour référence, voici un projet StackBlitz qui a tout en place :

Grille de données approfondie en temps réel

Si vous voulez un exemple d'application plus avancé qui présente plus de façons de créer vos propres données de diffusion en direct, ou d'autres façons d'aborder la mise à jour du contenu de la grille de données KendoReact, alors je vous recommande de visiter leArticle de documentation sur les mises à jour des données en direct de KendoReact Data Grid . Cette démo se concentre spécifiquement sur la grille de données, mais si vous préférez une application plus complète avec plusieurs composants d'interface utilisateur et des données en temps réel, nous avons leApplication de tableau de bord financier KendoReactexemple aussi.

L'article Live Data Updates présente une table de données liée aux données concernant les crypto-monnaies (non liée à une API en direct – les données sont toutes locales). Cette version s'ajoute à ce que j'ai couvert ici et a une configuration plus avancée pour mettre à jour les données à la volée.

Vos propres données de diffusion en direct

J'espère que cet article vous a aidé à comprendre les bases de la création d'une grille en temps réel avec React par vous-même.

La plupart du contenu est entré dans la logique de construction de nos fausses données et de leur mise à jour aléatoire. Il y a de fortes chances que vous puissiez supprimer cela et simplement lier vos flux de données existants à la grille de données KendoReact.

Nous n'avons également fait qu'effleurer la surface lorsqu'il s'agit de mettre à jour les cellules appropriées pour mettre en évidence les modifications. Puisque nous utilisons CSS, nous pouvons appliquer toutes sortes d'effets soignés comme, par exemple, mettre en surbrillance dans une nouvelle couleur, puis revenir lentement au style par défaut. Tant que nous avons un moyen de savoir quels éléments de données ou quels champs individuels ont été modifiés, nous avons un contrôle total sur l'apparence de notre grille de données React !