Utilisation de graphiques et de crochets de réaction

Bienvenue dans notre série Bien démarrer avec KendoReact ! Dans la cinquième et dernière entrée de cette série, Eric Bishard explique comment utiliser le composant graphique de KendoReact et utiliser les crochets React. Découvrez ce que KendoReact peut faire pour vous, développeur de React!

Retour au quatrième post de la série.

Nous allons ajouter un graphique directement sous le symbole composant de grille existant. Le lien que je viens de vous donner pour le graphique est un excellent endroit pour mieux comprendre les différentes façons de le personnaliser. Maintenant, lorsque nous voulons ajouter n'importe quel type de graphique (sprakline, pie, beignet, peu importe), nous commençons par installer le paquet Kendo Chart et une autre dépendance appelée hammerjs

 npm install @ progress / kendo-react-charts hammerjs 

Une chose que je veux faire ici est d'utiliser le dernier ajout à la bibliothèque React (crochets), mais nous devrons mettre à jour nos paquets React pour utiliser 16.7 Alpha. Commençons par l'installer maintenant:

 npm install react @ next react-dom @ next 

Si vous souhaitez obtenir les derniers bits absolus de React, vous devez le faire. En outre, nous allons maintenant voir les modifications apportées à notre package.json à partir de:

 "dépendances": {
    [...]
    "hammerjs": "^ 2.0.8",
    "réagir": "^ 16.6.0",
    "react-dom": "^ 16.6.0",
    "react-scripts": "2.0.5"
  } 

 "dépendances": {
    [...]
    "hammerjs": "^ 2.0.8",
    "réagir": "^ 16.7.0-alpha.0",
    "react-dom": "^ 16.7.0-alpha.0",
    "react-scripts": "2.0.5"
  } 

Les crochets à réaction offrent aux composants fonctionnels de React la capacité de travailler avec l'état de réaction, d'effectuer des effets secondaires sur le changement d'état et de puiser dans le contexte de réaction. Nous allons simplement l'utiliser pour gérer un état simple dans un composant fonctionnel. C’est ce que nous, les développeurs, attendions de React: il résout des problèmes avec Classes et setState IMHO. Cela vous permet également de vous éloigner des cours dans la majorité des situations que vous pouvez rencontrer lors de la construction de composants. Si vous parvenez à comprendre Hooks, vous aurez beaucoup moins besoin de classes dans React.

Au lieu de créer un autre bloc de HTML et de composants dans la page App.js importons un composant et déplacer notre prochain bloc de code en dehors de la page App.js .

Dans React, cette opération est aussi simple que créer un fichier – nous l'appellerons le PieChartContainer.js and nous allons mettre ici un code de structure de composant fonctionnel très basique:

 fonction par défaut d’exportation PieChartContainer () {
  revenir (
    

       KENDO PIE PART 
    
  );
} 

Dans la page App.js ajoutons maintenant une importation et importons le composant dans le fichier JSX:

 import de PieChartContainer de './PieChartContainer';
...
 

Nous pouvons maintenant importer les quelques importations nécessaires à l'utilisation des composants Hooks et Kendo Chart. De plus, nous aurons besoin du code HTML qui remplacera le div de substitution que nous avons actuellement en place.

Voici les importations dont nous aurons besoin:

 import React, {useState} à partir de 'react';
importer {Button} depuis '@ progress / kendo-react-buttons';
importer {Chart, ChartSeries, ChartSeriesItem} depuis '@ progress / kendo-react-charts';

La première chose à faire dans le composant fonctionnel PieChartContainer est de définir l'état et les gestionnaires par défaut de certaines entrées que je vais placer sur la page. Chaque entrée correspondra à une valeur d'état et nous aurons une autre valeur d'état qui, après un événement, peut mettre à jour un tableau des trois valeurs de la série de camemberts. Cet objet sera éventuellement utilisé dans notre diagramme à secteurs.

 const [graphProtein, setGraphProtein] = useState (0);
const [graphCarbs, setGraphCarbs] = useState (0);
const [graphSugars, setGraphSugars] = useState (0);
const [seriesData, setSeriesData] = useState ([
  graphProtein,
  graphCarbs,
  graphSugars
]);

const handleGraphProteinChange = (e) => {
  setGraphProtein (isNaN (e.target.value)? 0: e.target.value)
}
const handleGraphCarbsChange = (e) => {
  setGraphCarbs (isNaN (e.target.value)? 0: e.target.value)
}
const handleGraphSugarsChange = (e) => {
  setGraphSugars (isNaN (e.target.value)? 0: e.target.value)
}
const handleSeriesDataChange = (e) => {
  setSeriesData ([graphProtein, graphCarbs, graphSugars])
} 

Nous allons également remplacer l'élément d'espace réservé span de notre page par le code suivant, que j'ai créé avant de placer notre graphique sur la page. Je voulais m'assurer de comprendre ce que j'attendais de l'utilisateur et comment je pouvais prendre ces entrées et les traduire en un tableau condensé de chaque valeur à alimenter dans le graphique. Voici comment je gère les choses lorsque je crée manuellement un prototypage. :

 

  
 Quantité de protéines: -
    
  



  


               




  
 Carb Montant: -
    
  
  
 Quantité de sucre: -
    
  
   Update Pie 
  

     La valeur protéique est: {graphProtein},
    Glucides La valeur est: {graphCarbs},
    La valeur des sucres est: {graphSugars},
    Les données de série sont: {seriesData}
  
 

Passons maintenant à un code de base pour afficher le graphique sur la page. J'ai repris un code de l'exemple du composant KendoReact Charts et l'a modifié pour répondre à mes besoins:

Nous devons passer quelques états dans la carte. Nous aurons une série et une série Par défaut que nous lierons à nos propriétés sur l'objet Etat .

Je vais vous donner un peu plus de HTML d'ajouter directement au-dessus du graphique et ses environs
food-graph div et créer un div de la fratrie pour food-graph-input. Nous allons permettre à nos utilisateurs d’ajouter des chiffres à trois sections de notre graphique, chacune représentant un graphique à secteurs représentant ces chiffres. Cela nous permet de visualiser la différence entre les protéines, les sucres et les glucides de notre grille.

 

  
 Quantité de protéines: -
    
  
  
 Carb Montant: -
    
  
  
 Quantité de sucre: -
    
  
 

Et, avec ces modifications, nous devrons mettre à jour notre objet state afin de fournir les valeurs par défaut pour les séries seriesDefault ] graphProtein graphCarb et graphSugar . Notre état devrait finir par ressembler à l'objet ci-dessous:

 this.state = {
      données: this.getNutrition (initialFilter),
      filtre: initialFilter,
      habitId: 0,
      habitName: '',
      habitIteration: 0,
      habitudes: [],
      habitudesOptions: [
        'Drink 1 cup of water',
        '1 Hour of Coding',
        '10 pushups',
        'Eat Your Fruits and veggies',
        '1 hour of Reading',
        '10 minutes of Meditation',
      ],
      série: [{data: [1,1,1]}],
      seriesDefaults: {type: 'pie'},
      graphProtein: 0,
      graphCarb: 0,
      graphSugar: 0
    } 

Nous avons besoin de quelques fonctions pour gérer toute modification apportée aux modifications d'entrée des protéines carb et sucre, chacune d'entre elles doit également faire appel à un . ] handleGraphChange () fonctionne après avoir défini leur propre état. Ajoutons maintenant ces quatre fonctions au bas de tous nos gestionnaires de fonctions.

 // Fonctions sur les diagrammes
  handleProteinChange = (event) => {
    this.setState ({graphProtein: event.target.value});
    this.handleGraphChange ();
  }
  handleCarbChange = (event) => {
    this.setState ({graphCarb: event.target.value});
    this.handleGraphChange ();
  }
  handleSugarChange = (event) => {
    this.setState ({graphSugar: event.target.value});
    this.handleGraphChange ();
  }
  handleGraphChange = () => {
    this.setState ({
      série: [{
        data: [
          this.state.graphProtein,
          this.state.graphCarb,
          this.state.graphSugar
        ]
      }]
    });
  } 

Fin de série!