mars 24, 2021

Créez des graphiques React en toute simplicité

Explorons un moyen efficace de créer des graphiques React avec la bibliothèque de graphiques KendoReact. Poursuivez votre lecture pour découvrir comment implémenter rapidement des graphiques en anneau, en barres, en courbes et en courbes avec une bibliothèque qui fournit une base solide pour plus que les éléments de visualisation de données de votre application React.

Les applications Web doivent souvent aider l'utilisateur final à créer sens des différents types de données. Une des meilleures façons d'afficher les données d'une manière agréable et facile à comprendre est de les visualiser à l'aide de graphiques (diagrammes).

Cet article démontrera une approche efficace pour créer des graphiques React en utilisant les KendoReact Charts ]et nous implémenterons des graphiques Donut, Bar, Line et Sparkline. Nous utilisons la bibliothèque de graphes React qui fait partie de KendoReact, car elle est riche en fonctionnalités et hautement personnalisable. Dans le cadre d'une bibliothèque complète de composants React UI, où cette bibliothèque de visualisation de données brille vraiment, c'est son intégration avec plus de 90 composants dans KendoReact, permettant aux développeurs d'implémenter un style cohérent et une conception élégante dans tout un projet.

Maintenant, commençons !

Configuration du projet

Avant de plonger dans l'implémentation de nos graphes React, développons un nouveau projet React en utilisant Create React App . Vous pouvez le faire en exécutant la commande ci-dessous dans votre terminal.

 npx create  -  react  -  app kendo  -  react  -  graphes

Une fois le projet échafaudé, nous devons installer quelques paquets pour utiliser la bibliothèque de graphiques KendoReact.

Avec npm

 npm install @ progress / kendo-react-charts @ progress / kendo-theme -matériau hammerjs

With Yarn

 yarn add @progress  /  kendo  -  react  -  charts @progress  /  kendo  -  thème  -  matériel hammerjs

Le premier paquet est la bibliothèque kendo-react-charts qui contient une variété de composants graphiques pour React. Ensuite, nous avons kendo-theme-material . Pour cet exemple, nous utiliserons le thème Material. KendoReact propose également des thèmes Default (créés par les experts UX internes de l'équipe) et Bootstrap, mais vous pouvez facilement les personnaliser ou même créer les vôtres. Enfin, nous devons installer Hammer.js une bibliothèque open-source pour reconnaître les gestes effectués par les événements tactiles, souris et pointeurs.

Après avoir installé de nouvelles dépendances, nettoyons le projet. Tout d'abord, remplacez le contenu des fichiers App.js et App.css.

src / App.js

 import   "@ progress / kendo-theme-material / dist / all.css" [19659018]; 
 import   "hammerjs" ; 
 import   "./ App.css" ; 

 function   App  ( )   {
   return   (
     < div   className  =  " App "  > [19659037] < div   className  =  " container "  > 
         < h1 >  Build React Graphiques The Easy Way  </  h1 > 
       </  div >  
     </  div > 
  ) ; 
} 

 export   default  App ;

src / App.css

 .container   {
   max-width :   1080  px ; 
   margin [19659018]:   0  auto ; 
} 

 .section   {
   padding :   50  px  0 ; 
}

Dans App.js, nous avons supprimé le code par défaut créé par Create React App et importé à la place le thème KendoReact Material et Hammer. Nous avons également deux classes dans le fichier App.css pour ajouter un peu d’espace entre les graphiques que nous allons implémenter dans un instant.

C’est tout pour la configuration. Démarrez le serveur de développement en exécutant npm run start ou yarn start et vous devriez voir un écran vide. Ajoutons quelques graphiques.

Création de graphiques React (graphiques)

Imaginez que vous travaillez sur une plate-forme de gestion des demandes d’emploi. Cette plateforme permet aux entreprises de créer des offres d'emploi auxquelles les demandeurs d'emploi peuvent postuler. Les employés travaillant dans une entreprise qui a créé une offre d'emploi devraient pouvoir voir une variété de détails, tels que le nombre de candidats postulés, le statut des candidatures, le nombre de candidatures acceptées ou rejetées, etc. Comme je l'ai mentionné précédemment, nous allons implémenter quatre types de graphiques:

React Donut chart – pour afficher l'état des applications pour le mois en cours
React Bar chart – pour afficher l'état des applications pour le dernier trois mois
Diagramme React Line – pour montrer combien de postes ont été occupés et combien il en reste

React Sparkline – pour montrer combien de demandes il reste à traiter pour atteindre l'objectif minimum [19659081] React Donut Chart

Tout d'abord, nous devons créer deux nouveaux fichiers. Le premier fichier, constants.js contient les couleurs utilisées pour les graphiques.

src / constants.js

  export   const  ] COULEURS  =   {
  accepté :   "# 059669" 
  rejeté :   "# B91C1C" 
  en attente :   "# 6366F1" 
  interview :   "# 2563EB" 
  total :   "# D97706" 
} ;

Dans le second fichier, nous implémenterons le diagramme Donut. Dans le répertoire src créez un nouveau dossier appelé charts et à l'intérieur de celui-ci, créez un fichier appelé Donut.js .

src /components/charts/Donut.js[19659016—2012import[19659029[/19459003])
Graphique
ChartTitle
ChartLegend
ChartSeries
ChartSeriesItem
ChartSeriesLabels
} from "@ progress / kendo-react-charts" ;
import { COLORS } from "../../ constantes" ;

const applicationsStatusThisMonth = [
{
état : "Accepté"
valeur : 14
couleur : COULEURS . acceptée
}
{
statut : "Interviewing"
valeur : 14
color : COLORS . interviewing
}
{
statut : "Rejeté"
valeur : 40
couleur : COULEURS . rejeté
}
{
état : "En attente"
valeur : 32
color : COLORS . pending
}
] ;

const labelContent = e => e . catégorie ;

const Charts = props => {[19659030] return (
< Chart >
< ChartTitle text = " Applications status – this month " />
< ChartLegend visible = { false } />
< ChartSeries >
< ChartSeriesItem
type = " beignet "
data = { applicationsStatusThisMonth }
categoryField = " status "
champ = " valeur "
>
< ChartSeriesLabels
color = " #fff "
background = " aucun "
content = { labelContent }
/>
</ ChartSeriesItem >
</ ChartSeries >
</ Chart >
) ;
} ;

export default Charts ;

Comme vous pouvez le voir, nous importons quelques composants React différents de la bibliothèque KendoReact. Ils sont utilisés pour composer le diagramme en anneau.

Le composant est un conteneur pour tous les autres composants. comme son nom l'indique, est utilisé pour afficher un titre pour le graphique. Le composant peut être utilisé pour indiquer si un graphique doit afficher une légende pour les catégories. Dans cet exemple, l'accessoire visible est réglé sur false mais vous pouvez le basculer sur true pour l'afficher.

] sont les principaux composants, car ils sont responsables du rendu des données. Dans ce cas, nous spécifions que nous voulons le graphique donut en passant type = "donut" prop au composant . Pour une liste complète des options disponibles, vous pouvez consulter la documentation .

Avant de voir le graphique Donut à l'écran, nous devons mettre à jour le fichier App.js , donc il importe et rend le composant .

src / App.js

 import   "@ progress / kendo-theme-material / dist / all.css" ; 
 import   "hammerjs" ; 
 import   "./ App.css" ; 
 import  Donut  from   "./ components / charts / Donut "; 

 function   App  ()   {
   return   (
     < div   className  =  " App "  > 
       < div   className  =  " container  " > 
         < h1 >  Créez facilement des graphiques React  </  h1 > 
         <[1 9459003] div   className  =  " section "  > 
           < Donut   /> 
         </  div > 
       </  div >  
     </  div > 
  ) ; 
} 

 export   default  App ;

Vous devriez maintenant voir le graphique ci-dessous sur votre écran.

C'était rapide et facile, et les graphiques sont superbes. Cependant, nous ne pouvons pas voir les pourcentages réels. Mettons à jour le graphique et ajoutons une info-bulle qui affichera la répartition en pourcentage pour chaque statut de candidature. Revenons au fichier Donut.js et apportons les modifications suivantes:

Add ChartTooltip import.

 import   {
  Graphique 
  ChartTitle 
  ChartLegend 
  ChartTooltip 
  ChartSeries 
  ChartSeriesItem 
  ChartSeriesLabels 
}   from   "@ progress / kendo-react-charts" ;

Sous les importations, créez une fonction appelée renderTooltip qui rend le balisage, qui sera affiché dans une info-bulle. Cette fonction sera transmise au composant .



 const   renderTooltip   =  context  =>   {
   const   { category  valeur }   =  contexte .  point  ||  contexte ; 
   return   (
     ] < div > 
       { catégorie } :   { value } % 
     </  div > 
  ) ; 
} ;

Rendez le composant .

   < Graphique > 
  < ChartTitle   text  =  " Statut des demandes - ce mois-ci "    /> 
   < ChartLegend   visible  =  { false }    /> 
   < ChartTooltip   render  =  { renderTooltip }    /> 
   {} 
 </  Graphique >

Ci-dessous, vous pouvez voir les infobulles en action.

Nous avons le premier graphique fait. Cependant, que se passe-t-il si nous souhaitons voir les résultats des derniers mois? Nous pouvons gérer cela en implémentant un diagramme à barres React.

Diagramme à barres React

Comme nous l'avons fait précédemment, nous devons créer un nouveau fichier pour le graphe— Bar.js . [19659003] src / components / charts / Bar.js

 import   {
  Graphique 
  ChartTitle 
  ChartLegend 
  ChartSeries 
  ChartSeriesItem 
  ChartCategoryAxis 
  ChartCategoryAxisTitle 
  ChartCategoryAxisItem 
}   from   "@ progress / kendo-react-charts" ; 
 import   { COLORS }   from   "../../ constantes" ; 


 const  series  =   [
   {
    état :   "Total" 
    données :   [ 43   30   59 ] 
    couleur :  COULEURS .  total 
  } 
   {
    état :   "En attente" 
    données :   [ 25   15   30 ] 
    couleur :  COULEURS .  en attente 
  } 
   {
    statut :   "Interviewé" 
    données :   [ 3   5   1 ] 
    couleur :  COLORS .  interviewé 
  } 
   {
    statut :   "Rejeté" 
    données :   [ 14   10   25 ] 
    couleur :  COULEURS .  rejeté 
  } 
   {
    état :   "Accepté" 
    données :   [ 1   3   2 ] 
    couleur :  COULEURS .  acceptée 
  } 
] ; 

 const  catégories  = [19659029] [ "Jan"   "Feb"   "Mar" ] ; 

 const  seriesLabels  = [19659029] {
  visible :   true 
  rembourrage :   3 
  police :   "normal 16px Arial, sans-serif" 
  position :   "center" 
} ; 

 const   Bar   =  props  =>   {[19659030] return   (
     < Chart > 
       < ChartTitle   text  =  " État des demandes - 3 derniers mois  "   /> 
       < ChartLegend   visible  =  { true }    /> 
       < ChartCategoryAxis > 
         < ChartCategoryAxisItem   categories  =  { categories }  > 
           < ChartCategoryAxisTitle   text  =  " Mois "    /> 
         </  ChartCategoryAxisItem > [19659037] </  ChartCategoryAxis > 
       < ChartSeries > 
         { série .  carte  ( ( élément  idx )   =>   (
           < ChartSeriesItem 
             key  =  { idx } 
             type  =  " bar " 
             gap  =  { 2 } 
             espacement  =  { 0,25 } 
             labels  =  { seriesLabels } 
             data  =  { item .  data } 
             nom  =  { élément .  état } 
             couleur  =  { élément .  couleur } 
           /> 
        ) ) } 
       </  ChartSeries >  
     </  Chart > 
  ) ; 
} ; 

 export   default  Bar ;

Vous avez peut-être remarqué que beaucoup de choses sont similaires, par exemple les composants de graphique. Le graphique à barres est spécifié en passant type = "bar" prop au composant .

Nous avons également de nouveaux composants – . Ceux-ci sont utilisés pour modifier le contenu d'une barre sur chaque axe. Dans ce cas, nous fournissons des mois pour les catégories, ainsi que le libellé «Mois» sur l'axe Y. Nous avons également défini le pour qu'il soit visible, car, par rapport au graphique Donut, nous n'avons pas d'étiquettes d'état. Néanmoins, en fournissant l'accessoire labels nous pouvons dire au composant ChartSeriesItem d'afficher les valeurs sur chaque barre à barres.

Avant de voir le graphique à barres à l'écran, nous devons ajoutez-le au fichier App.js .

src / App.js


 import  Bar  from   "./ components / charts / Bar" ; 
 function   App  ()   {
   return   (
     < div   className  =  ] " App "  > 
       < div   className  =  " container "  [19659018]> 
         < h1 >  Créer des graphiques de réaction en toute simplicité  </  h1 > 
         {} 
         < div   className  =  " section "  > 
           < Barre   /> 
         </  div > 
       </  div >  
     </  div > 
  ) ; 
} 

 export   default  App ;

L'image ci-dessous montre à quoi devrait ressembler le graphique à barres maintenant.

Nous pouvons voir l'état des demandes pour les trois derniers mois. Une grande chose à propos de la bibliothèque de graphiques React de KendoReact est que les graphiques peuvent être rendus interactifs. Par exemple, nous pouvons les rendre panoramique et zoomable en ajoutant des accessoires zoomable et pannable au comme ceci:

   < Graphique   zoomable   panoramique > 
 {} 
 </  Graphique >

De plus, il est également possible d’exporter des graphiques KendoReact vers différents formats tels que l’image ou le PDF. Cela peut être très utile si vous souhaitez permettre aux utilisateurs de créer des rapports avec des graphiques. Voyons comment nous pouvons ajouter une fonctionnalité d'exportation PDF.

Comment exporter un graphique React

Nous pouvons ajouter une fonctionnalité d'exportation en tirant parti des packages kendo-drawing et kendo-file-saver. Installons-les.

Avec npm

 npm install @ progress / kendo-drawing @ progress / kendo-file-saver

Avec Yarn

 yarn add @ progress / kendo-drawing @ progress / kendo-file-saver

L'étape suivante consiste à mettre à jour le fichier Bar.js . Tout d'abord, nous devons importer la méthode exportVisual de @ progress / kendo-react-charts exportPDF from @ progress / kendo-drawing et saveAs de @ progress / kendo-file-saver . Nous devons également importer le hook useRef car nous devons avoir accès à l'instance du composant . Cette instance sera transmise à la méthode exportVisual . Voir le code mis à jour ci-dessous.

src / components / charts / Bar.js

Imports

 import   { useRef }   de   "react" ; 
 import   {
  Graphique 
  ChartTitle 
  ChartLegend 
  ChartSeries 
  ChartSeriesItem 
  ChartCategoryAxis 
  ChartCategoryAxisTitle 
  ChartCategoryAxisItem 
  exportVisual 
}   de   "@ progress / kendo-react-charts" ; 
 import   { exportPDF }   de   "@ progress / kendo-drawing" ; 
 import   { saveAs }   from   "@ progress / kendo-file-saver" [19659018]; 
 import   { COLORS }   from   "../../ constantes" ;

Bar component



 const   Bar   =  props  =>   {
  
   const  chartRef  =   useRef [19659018] ( null ) ; 
	
  
   const  onPDFExportClick  =   async   ()   =>   {
     ] const  chartVisual  =   exportVisual  ( chartRef .  current ) ; 
     if   (!  chartVisual )   return ; 
     const  dataURI  =   wait   exportPDF  ( chartVisual   ] {
      paperSize :   "A4" 
      paysage :   true 
    } ) ; 
     wait   saveAs  ( dataURI   "chart .pdf ") ; 
  } ; 

   return   (
     < div > 
       < button   onClick  =  { onPDFExportClick }  >  Export  as  PDF  </  button > [19659037] < Chart   ref  =  { cmp  =>   ( chartRef .  current  =  ] cmp ) }    panoramique   zoomable > 
         {} 
       </  Graphique >  
     </  div > 
  ) ; 
} ; 

 export   default  Bar ;

Nous avons ajouté un bouton qui appelle la fonction onPDFExportClick . La fonction onPDFExportClick prépare d'abord les informations de graphique qui doivent être exportées. Il est ensuite passé à la méthode exportPDF qui prépare le fichier et le convertit en dataURI . Enfin, le dataURI est passé à la méthode saveAs qui déclenche le téléchargement du fichier.

Vous pouvez également appliquer cette logique à d'autres graphiques KendoReact. Si vous souhaitez en savoir plus sur les options d'exportation disponibles, vous pouvez consulter la documentation détaillée .

React Line Chart

Jusqu'à présent, nous avons implémenté deux types de graphiques: Donut et Bar. Voyons comment nous pouvons utiliser un graphique en courbes pour afficher des informations sur le nombre d'emplois terminés et en attente au cours des trois derniers mois. Encore une fois, nous devons créer un nouveau fichier, cette fois appelé Line.js .

src / components / Line.js

 import   {
  Graphique 
  ChartSeries 
  ChartSeriesItem 
  ChartValueAxis 
  ChartValueAxisItem 
  ChartCategoryAxis 
  ChartCategoryAxisItem 
  ChartTitle 
  ChartLegend 
}   from   "@ progress / kendo-react-charts" ; 
 import   { COLORS }   from   "../../ constantes" ; 

 export   const  series  =   [
   {
    nom :   "Total" 
    données :   [ 19   9   20 ] 
    couleur :  COULEURS .  total 
  } 
   {
    nom :   "En attente" 
    données :   [ 12   6   15 ] 
    couleur :  COULEURS .  en attente 
  } 
   {
    nom :   "Fulfilled" 
    données :   [ 7   3   5 ] 
    couleur :  COULEURS .  acceptée 
  } 
] ; 

 const  catégories  = [19659029] [ "Janvier"   "Février"   "Mars" ] ; 

 const   Ligne   =  props  =>   {
   return   (
     < Chart   pannable   zoomable   style  =  { ] { hauteur :   350  } }  > 
       < ChartTitle   text  =  " Statut de la demande - 3 derniers mois  "   /> 
       < ChartLegend   position  = "  top  "   orientation  =  " horizontal "    /> 
       < ChartValueAxis > 
         < ChartValue AxisItem   title  =  { { text :   "Job Positions"  } }    min  =  { 0 }    max  =  { 30 }    /> 
       </  ChartValueAxis > 
       < ChartCategoryAxis > 
         < ChartCategoryAxisItem   catégories  =  { catégories     /> 
       </  ChartCategoryAxis > 
       < ChartSeries > 
         { série .  carte  ( ( élément  idx )   =>   (
           < ChartSeriesItem 
             key  =  { idx } 
             type  =  " ligne " 
             info-bulle  =  { { visible :   true  } } 
             data  =  { item .  data } 
             nom  =  { élément .  nom } 
           /> 
        ) ) } 
       </  ChartSeries >  
     </  Chart > 
  ) ; 
} ; 

 export   default  Line ;

Nous utilisons les mêmes composants que dans les graphiques précédents, avec un ajout du composant qui est utilisé pour ajouter un texte de titre et spécifier les valeurs minimum et maximum à afficher dans le graphique. Enfin, importez le composant Line dans App.js .

src / App.js


 import  Line  from   " ./components/charts/Line"[19659018[/] className  =  " App "  > 
       < div   className  =  " container ">
        <h1>Build React Graphs The Easy Way</h1>
        {}
        <div className="section">
          <Line />
        </div>
      </div>
    </div>
  );
}

export default App;

Below you can see a gif that showcases the Line graph comparing the total number of jobs as well as how many are pending and fulfilled.

React Sparklines

Sparklines are simple small graphs that can be embedded in tables, headlines or text. We will use a bullet sparkline to show how many applications were processed, as well as the monthly target. As you will see in the code below, the Sparkline graph implementation is a bit different from previous graphs, as it does not use components, but rather the and components.

src/components/charts/Sparkline.js

import {
  Sparkline,
  ChartValueAxis,
  ChartValueAxisItem,
} from "@progress/kendo-react-charts";

const bulletData = [15, 75];
const bulletValueAxis = {
  min: 0,
  max: 100,
  plotBands: [
    {
      from: 0,
      to: 100,
      color: "#787878",
      opacity: 0.15,
    },
  ],
};

const SparklineContainer = () => (
  <div>
    <p>Applications this month</p>
    <Sparkline data={bulletData} type="bullet">
      <ChartValueAxis>
        <ChartValueAxisItem {...bulletValueAxis} />
      </ChartValueAxis>
    </Sparkline>
  </div>
);

export default SparklineContainer;

You can configure the look of the graph by modifying props passed to the component. In this case, we are spreading the bulletValueAxis object. The last thing to do is to import the Sparkline component and render it in the App.js file.

src/App.js


import Sparkline from "./components/charts/Sparkline";

function App() {
  return (
    <div className="App">
      <div className="container">
        <h1>Build React Graphs The Easy Way</h1>
        {}
        <div className="section">
          <Sparkline />
        </div>
      </div>
    </div>
  );
}

export default App;

Below you can see how the final result looks.

To see a full list of chart types that a Sparkline can render, you can check the KendoReact Sparkline documentation page.

Summary

We have covered how to create React graphs using as an example these four graph types from the KendoReact UI and data visualization library: Donut, Bar, Line and Sparkline. Building graphs with KendoReact is very easy, as it provides a lot of ready-made components that are feature-rich and easy to customize.

If you would like to access the full code example for this article, you can find it in this GitHub repository.

Le meilleur outil 2023 pour ta croissance Instagram !

Source link
Partager :
X
Facebook
Articles similaires

Blog ARC Optimizer

Configuration du projet

Création de graphiques React (graphiques)

Diagramme à barres React

Comment exporter un graphique React

React Line Chart

React Sparklines

Summary

Partager :

Articles similaires