Construisons un tableau de bord des ventes avec React

  this.appContainer = el}> 
 L'attribut  ref   permet attribuer un  HTMLDivElement  représentant le contenu de l'élément 
  sur lequel il est placé, à une propriété locale. 
 Ensuite, nous voudrons nous assurer que nous appelons le  handlePDFExport ( )  fonctionne à partir de l'événement  onClick . Désactivons également l'autre bouton pour le moment. 
 Share 
 Exporter au format PDF  
 Nous allons maintenant tester notre bouton pour nous assurer que tout fonctionne correctement. Lorsque vous appuyez sur le bouton, vous devriez recevoir une invite pour télécharger un fichier PDF. Lors de l'ouverture du PDF, vous devriez voir le contenu entier de notre page. Vous pouvez imaginer ce qui se produirait si nous mettions cet attribut sur un autre 
 de notre page. À ce stade, le bouton imprimera uniquement le contenu de l'élément 
 . Nous reviendrons sur cette idée une fois que la grille fonctionnera correctement et que nous créerons un bouton qui n’imprimera que la grille de données.
 Avant de passer à autre chose, j’aimerais souligner que, dans React, nous souhaitons appeler une fonction dans notre JSX. comme nous l'avons fait avec le gestionnaire  onClick nous affectons simplement ce nom de fonction à l'attribut. Pas besoin de guillemets d'invocation de citations, juste le nom de la fonction comme ci-dessous:
 onClick = {this.handlePDFExport} 
 Mais attendez? Nos boutons ont tous l'air… meh! Nous avons oublié quelque chose. Nous devons intégrer notre thème Matériel Kendo UI maintenant que nous utilisons actuellement certains composants de Kendo UI sur la page. Une fois le fichier CSS correct importé, tous les autres composants à importer bénéficieront également de ce style.
 Importez le thème de matériau situé au bas de nos importations le  App.js  juste au-dessus. l'importation pour  App.css .
 import '@ progress / kendo-theme-material / dist / all.css'; 
 Et n'oublions pas que nous devrons intégrer ce thème utiliser le fil pour que cette importation fonctionne.
 $ yarn add @ progress / kendo-theme-material 
 Faisons également entrer une classe qui donnera de l'espacement à nos boutons. Il est déjà défini dans les styles que nous avons ajoutés au fichier  App.css . Sur le div qui entoure nos boutons, ajoutez  de boutons à droite  au  className . Les boutons et leur div contenant devraient maintenant ressembler à ceci:

   Share 
   Export to PDF 
 
 Vous devriez maintenant voir vos boutons prendre le style Matériau Design.
  Dialogue de dialogue
 Câblons le Dans une application de production réelle, cela parlerait à un service qui pourrait être utilisé pour envoyer un courrier électronique à quelqu'un afin de partager le lien du tableau de bord, mais nous allons simplement le faire imprimer sur la console.
 In le constructeur de notre fichier  App.js  permet de créer un objet à conserver. Cet objet d'état est compris par React comme étant un objet spécial. Sous le capot, React traite cet objet différemment.
 constructeur (accessoires) {
  super (accessoires);
  this.appContainer = React.createRef ();
  this.state = {
    showDialog: false
  }
} 
 Créons une fonction dans la classe  App sous la fonction  handlePDFExport () . Comme je l'ai mentionné  Les objets de l'état Réagir  sont spéciaux, ils ont une API spécifiquement utilisée pour interagir avec eux. Par exemple, si nous voulons modifier l'état de quelque manière que ce soit, nous ne devrions pas accéder directement à l'objet et attribuer de nouvelles valeurs. Au lieu de cela, nous utilisons la méthode  setState  pour mettre à jour l'état. Cela planifiera une mise à jour de l'objet d'état d'un composant. Lorsque l'état change, le composant répond par un nouveau rendu.
 handleShare = () => {
  this.setState ({
    showDialog:! this.state.showDialog
  })
}  
  CONSEIL PRO:  Pour exécuter une fonction ou vérifier si l'état est mis à jour correctement, nous pouvons passer une fonction en tant que second argument (rappel) à  setState () la fonction sera exécuté une fois l'état mis à jour. En savoir plus et  explorer les documents React pour l’état .
 handleShare = () => {
  this.setState ({
    showDialog:! this.state.showDialog
  }, () => console.log (this.state))
} 
 Nous devons également mettre à jour le bouton pour utiliser cette fonction. Nous ajouterons ensuite une caractéristique distinctive en définissant primaire à  true . Dans les coulisses, notre composant prend cette valeur  true  et donne au bouton un style  primaire :
 Share  
 Ce bouton bascule donc une valeur booléenne dans notre état objet, qui est généralement un bon moyen de masquer et d’afficher des modaux, des fenêtres contextuelles ou des zones cachées de la page. Mais nous devons créer une zone cachée qui se révélera lorsque vous cliquerez sur ce bouton. Comme nous l'avons vu dans notre rappel setState, chaque fois que nous appuyons sur le bouton de partage  cette valeur est inversée. Ce bloc HTML que nous allons ajouter devrait être remplacé par le code ci-dessous:
 Boîte de dialogue illustrée / masquée avec logique 
 
 Remplacez-le par le code suivant:
 {this.state.showDialog &&
  

    
 Veuillez saisir l'adresse électronique du destinataire. / 19659093] Share 
       Annuler 
    
  
} 
 Décryptons ce que nous venons d'ajouter: nous avons introduit un nouveau composant KendoReact appelé 
 qui est enveloppé dans une expression qui va masquer ou afficher la zone en fonction de la valeur  state.showDialog  en cours d'inversion. La meilleure façon de penser à cela est que notre composant 
 équivaut à une valeur de vérité. Cela revient à dire:
 {this.state.showDialog && true} 
 Donc, parce qu'il est couplé avec le  this.state.showDialog si les deux correspondent à true, le dialogue s'affiche. Toutefois, si  this.state.showDialog  est faux, la sortie du composant 
 n'est pas révélée. Encore une fois, c’est une façon de penser à cette déclaration si, pour une raison quelconque, elle vous semble étrange.
 Le composant 
 ne fonctionnera pas sans l’importer du package  react-dialogs . obtenez-le ajouté et importé:
 $ yarn add @ progress / kendo-react-dialogs
           @ progress / kendo-react-input
           @ progress / kendo-react-intl 
 Et nous allons également importer ces paquets dans notre  App.js . Nos importations devraient maintenant ressembler à ceci:
 import React, {Component} from 'react';
importer ReactDOM de 'react-dom';

importer {Dialog, DialogActionsBar} depuis '@ progress / kendo-react-dialogs';
importer {entrée} de '@ progress / kendo-react-input';

importer {Button} depuis '@ progress / kendo-react-buttons';
importer {savePDF} de '@ progress / kendo-react-pdf';

importer '@ progress / kendo-theme-material / dist / all.css';
import './App.css';[19659013HERJ'airemarquéquelquechosequimanquaitlorsquej'aicliquésurnosnouveauxboutonsL'interfaceutilisateurdeMaterialDesignaveclaquellej'aitravailléutiliseuneffetd'entraînementsurcertainsélémentsdel'interfaceutilisateurLesboutonsmontrentclairementceteffetd'entraînementetjenelevoispascheznousCeciestdûaufaitqueKendoUIfournitceladansunpackageséparécequiestunebonneidéecarjepeuxounonsouhaiterquelecodesupplémentairesoitajoutéauCSSetàJavaScriptsijenesouhaitepasl'utiliserAjoutonsetimportonsceci  en tant que composant qui enveloppera notre application: 
 $ yarn add @ progress / kendo-react-ripple 
 Ceci fait, vous pouvez maintenant importer  Ripple  dans la page  App.js  située juste au-dessus des dialogues  de  et  de DialogActionsBar :
 de {Ripple} de '@ progress / kendo-react-ripple'; 
 Ensuite, nous voulons ajouter un conteneur  autour de l'élément 
 de  app-container  afin que tous les  Button  et d'autres composants obtiennent l'effet d'entraînement comme un enfant de :
la classe App étend le composant {
  constructeur (props) {/ * ... * /}
  handlePDFExport = () => {/ * ... * /}
  
  render () {
    revenir (
      
        
  this.appContainer = elem}>
          {/ * ... * /}
        
      
    );
  }
}

exportation par défaut 
 Lorsque vous cliquez et faites glisser en dehors de l'état du bouton, puis relâchez-le, vous obtiendrez l'effet sans activer l'événement  cliquez sur  du bouton.
 Mmm, Donut Charts
 J'aimerais commencer à importer le composant  Chart . Il contient le moins de données possible. C'est donc une étape logique et simple.
 Ajoutons le composant (commenté) remplaçant l'élément de substitution 
 Recherchez la ligne de code libellée comme suit:
 
 Donut Chart Container 
 
 Et remplacez-le par :
 {/ *  * /} 
  tableaux de KendoReact :
 $ yarn add @ progress / kendo-react-charts 
 Copiez ensuite le code que j'ai modifié de la documentation de l'interface utilisateur de Kendo dans  DonutChartContainer.js  à partir du résumé ci-dessous:
 Les diagrammes KendoReact fournissent un vaste ensemble de fonctionnalités permettant de créer de riches visualisations de données. Pour en savoir plus à leur sujet, n'hésitez pas à consulter l'API  Charts .
  export const donutChartData = [1 9459142];
 Dans le fichier  App.js nous devons ajouter une importation:
 import {DonutChartContainer} from './components/DonutChartContainer'; 
 ... et uncomment le  {/ *  * /}  au format HTML.
  
 Notre composant devrait maintenant fonctionner. Faisons un changement pour que vous compreniez comment nous pouvons formater l'étiquette pour le graphique en anneau. Pour le moment, nous affichons uniquement la catégorie, car nous l'avons spécifié dans la configuration de nos composants.
 Dans le fichier  DonutChartContainer.js Modification de la fonction  labelTemplate  en:
 const labelTemplate. = (e) => (e.category + ' n' + e.value + '%'); 
 
 Voici notre magnifique beignet, il a même l'air savoureux! Lorsque nous utilisons le graphique en anneau, nous interagissons avec un composant  . L'entrée  content  accepte une fonction qui renvoie une chaîne. C'est si simple. Il remplit chaque section (les catégories dans notre cas) de richesse en bonté. En utilisant simplement ce que nous savons sur JavaScript, nous pouvons obtenir une meilleure mise en forme et je pense que nous voudrons peut-être utiliser  e.percentage  au lieu de  e.value . Vous pouvez obtenir des détails sur les champs que nous pouvons exploiter dans notre  ChartSeriesLabels documenation .
 J'ai modifié la fonction de modèle pour obtenir un affichage plus attrayant et en choisissant le pourcentage, je garantis que chaque catégorie représente toujours. sa partie du total. C’est le cas où nous déciderons peut-être d’utiliser des données dont le total n’est pas égal à 100.
 const labelTemplate = (e) => (e.category + ' n' + (e.percentage * 100 ) + '%'); 
 L'affichage n'a pas changé ici, je voulais simplement utiliser  pourcentage  au lieu de  valeur .
 Augmenter l'élément de graphique à barres
 La prochaine étape logique consiste à créer une barre  Graphique  qui représente une ventilation mensuelle des pourcentages de chaque mois à partir du quatrième trimestre 2018. Le graphique en donut  indique le pourcentage moyen sur tout le trimestre, mais notre graphique à barres montrera chaque mois de ce trimestre. Vous trouverez ci-dessous les données que nous devons ajouter à notre fichier  appData.js . Vous remarquerez que nos données correspondent également au graphique en anneau, de sorte que l'utilisateur peut facilement voir la relation. 
 export const barChartQ4Months = ['October', 'November', 'December'];
export const barChartMonthlyPercentages = [
  { name: 'Beverages', data: [14, 16, 19.5]},
  {nom: 'Condiments', données: [24, 23.5, 24.5]},
  {nom: 'Produce', données: [12.5, 12.5, 14]},
  {nom: 'Viande / Volaille', données: [16, 18, 17]},
  {nom: 'Fruits de mer', données: [21.5, 20, 17]},
  {name: 'Other', données: [7, 12, 11]},
]; 
 Avec les données en place, nous pouvons ajouter un nouveau composant conteneur à notre répertoire  composants . Créez un fichier nommé  BarChartContainer.js .
 Remplacez l'élément de substitution 
 de l'élément. Recherchez la ligne de code qui se lit comme suit:
 Bar Chart Container 
 
 Et remplacez-la par:
 {/ *  * /} 
 Ensuite, copiez le code que je n'ai modifié que légèrement dans les exemples de documentation de Kendo UI et insérez-le dans  BarChartContainer.js  dans Gist ci-dessous:
 Placez une importation dans le haut de la page, juste au-dessus de nos importations CSS dans  App. js :
 import {BarChartContainer} de './components/BarChartContainer'; 
 ... également dans  App.js non mis en commentaire  {/ *  *. /}  en HTML.
   
 Effectuez une confirmation visuelle rapide pour vous assurer que les lignes du graphique à barres utilisent les mêmes couleurs que le graphique en anneau. Tout devrait s'aligner car nos données pour chaque graphique sont dans le même ordre. Si vous construisiez une API pour servir ces données, vous voudriez vous assurer que rien ne se perdra.
 C'est peut-être la plus facile à configurer à ce jour. La page de conteneur est très simple car nous ne traitons avec aucun État. Nous aimons toujours avoir cette couche d’abstraction dans notre projet cependant.
 La façon dont je pense à ce composant, c’est que j’observe ma forme de données. Nous avons un éventail de mois, chacun de ces mois se traduisant par une catégorie sur le graphique à barres. Nous avons également un tableau d'objets. Chacun de ces objets a un champ  nommé  qui correspond à nos catégories d'aliments. Il aura également un champ de données. Donc, pour chaque mois (catégorie sur le graphique à barres), nous itérons sur le premier index de chaque tableau de champs de données. Chaque itération construit une barre dont la hauteur correspond à la valeur de l'index. Cela se répète chaque mois.
 Mon conseil à tous ceux qui travaillent avec ce tableau est de prendre cet exemple et de se familiariser avec la manière dont chaque balise du composant  joue dans cette histoire de ventilation des données. Nous avons un  Légende  ChartCategoryAxis & Items ChartSeries & Items,  ChartValueAxis & Items  et bien sûr le composant englobant, le  ChartValueAxis & Items  et bien sûr le composant englobant, le  Chart  lui-même .
 La possibilité de piratage informatique sur ces cartes est bien là aussi. Consultez cet article sur  Visualisations de données avec Kendo UI  pour des idées vraiment sympas d'utilisation des différentes cartes, y compris notre ami M. Bar Chart. Passons maintenant à autre chose.
 Ajout du composant Grid
 Le conteneur  Grid  est de loin l'un de nos composants les plus utilisés et les plus demandés dans Kendo UI.
 A La liste des produits servira de données pour notre réseau. Nous allons copier l'essentiel ci-dessous et le coller dans  appData.js . Cela constituera le top 10 des produits du quatrième trimestre, qui constituent le cœur des données sur lesquelles nous construisons le tableau de bord. Dans une situation plus avancée, la  Grid  pourrait être remplie par une recherche avec autocomplete et plus de produits pourraient être filtrés ou recherchés, etc. Ce que j'aime de Kendo UI, c'est que la plupart des choses que je peux imaginer
 Avant de faire quoi que ce soit, je voudrais vous montrer les paquets que j’ajoute avant d’utiliser la grille  :
 $ yarn add @ progress / kendo- requête de données
           @ progress / kendo-react-dateinputs
           @ progress / kendo-react-dropdowns
           @ progress / kendo-react-grid
           @ progress / kendo-react-input
           @ progress / kendo-react-intl 
 Cela devrait couvrir tous les éléments dont nous avons besoin pour notre composant gird. Nous en avons déjà installé deux, mais ce n’est que parce que les composants de KendoReact ont parfois des dépendances qui sont également présentes dans d’autres composants.
 Ensuite, ajoutons les données à notre fichier  appData.js :
 En regardant les données, les champs les plus importants de nos objets de données sont les suivants: ID du produit, nom, catégorie, prix, champs en stock et discontinués. J'ai apporté un peu plus de données que nécessaire. C'était dans l'espoir de vous faire jouer avec l'affichage de différents champs et l'expérimentation avec la grille elle-même.
 Les composants principaux d'une grille KendoReact   sont l'élément même  qui contient l'enfant  . 19659181] composants, chaque mappage à un champ spécifique de notre objet de données.
 Je veux vous donner un rapide aperçu visuel du code de ce composant, donc si je ne voulais afficher que l'ID, le nom et la catégorie de notre ensemble de données , Je pourrais très facilement et presque de la mémoire construire ce composant:
 
  
  
  
 
 Et cela ressemblerait à ceci sur la page:
 
 Grid Container
 Et remplacez-le par:
 {/ *  * /} 
 L'implémentation de la  grille  est aussi simple que cela. Dans notre projet, nous allons utiliser un peu plus de propriétés et un dimensionnement de colonne plus important que dans l'exemple ci-dessus. Copiez l'intégralité du composant à partir de l'essentiel ci-dessous. et placez-le dans un nouveau fichier nommé  GridContainer.js :
 Ajoutez l'importation:
 import {GridContainer} à partir de './components/GridContainer' ;[[19659013hnetmaintenantlaréférenceàlecomposant:
   
  Composants fonctionnels sans état
 Jusqu'à présent, nous utilisions des composants fonctionnels sans état, ou en d'autres termes, des composants définis comme une fonction. Ils ne prennent qu'un seul argument d'objet d'accessoires un Nd ne détiennent aucun de leur propre état - ils n'ont pas de cycles de vie. Jusqu'à présent, aucun état local n'était requis pour nos composants de conteneur. Ils ne servent que de simples conteneurs pour nos composants d’interface utilisateur Kendo. La séparation est bonne pour l'organisation, mais c'est tout. Je veux rapidement vous montrer une autre façon d'écrire un composant fonctionnel en utilisant la fonction de flèche ES6, ce qui nous permettra d'omettre les mots-clés, fonction  et le retour ainsi que les accolades. En utilisant cette méthode, un composant pourrait ressembler à ceci:
 const HelloContainer = ({data}) => ([19459001)Bonjour{dataname}!
); 
 Très utile si nous créons simple les composants de conteneur sans aucun état, et je dois noter que vous devez toujours vous efforcer de vous contraindre à utiliser ces types de composants chaque fois que cela est possible.
 Composants de classe
 Les composants de classe bénéficient de la possibilité d'avoir un constructeur et de le gérer. leur propre état. La syntaxe ressemble à ceci:
 La classe HelloContainer étend React.Component {
  render () {
    return 
 {this.props.name} 
;
  }
} 
 Si vous souhaitez en savoir plus sur les nombreuses façons de créer des composants dans React, qui va au-delà de ce didacticiel, regardez cette vidéo de Michael Chan .
 Jusqu'à présent, nous avons rien de spécial avec le  GridContainer.js  nous obligeant à utiliser la méthode de classe pour créer des composants. Laissez-moi vous montrer où aller, sachant que je peux utiliser un composant fonctionnel sans état, pour réaliser que j'ai besoin d'un composant basé sur une classe pouvant gérer un état.
 Incorporer un graphique sparkline en tant que contenu pour une colonne de grille
 Je souhaite ajouter un nouveau  à cette composante, et je veux vous montrer un truc sympa qui nous permettra de lier une  KendoReact Sparkline  de  en personnalisant le contenu de la cellule   de la grille de KendoReact. To do this we will need to create a randomized set of data to use for the Sparkline component. We can then insert that random data array into the already existing gridData object for each item and make it a property called PriceHistory.
Let's start by converting this component into a class-based component and importing the Sparkline component. Let's swap out our component with the following gist:
Copying in that new code, we went from using export const to using export default classor we went from stateless functional component to class based component. In doing so, we encountered an error. We need to update our import statement in App.js.
import GridContainer from './components/GridContainer';
Learn more about when to use curly braces when importing in ES6.
We added some code to modify the data and add random numbers to an array. We'll create a function, processData() for this purpose and add it to the GridContainer:
processData = (data) => {
  data.forEach((item) => {
    item.PriceHistory = Array.from({length: 40},() => Math.floor(Math.random()*100));
    return item;
  })
  return data;
}
The property, PriceHistoryis now available when the Grid is rendered. We can see this by placing a debugger; statement before the return data; line in our new function and then opening the Chrome DevTools and inspecting that data object. Now we just need a Sparkline that can use the new PriceHistory property.
We are going to build another component inside our GridContainer.js file because this new component will only be used here in this file. Just under the import statements, create a new exported class with the following code:
class SparkLineChartCell extends React.Component {
  render() {
    return ()
  }
}
Next, add the new column to the Grid component, just above the discontinued column:
Just in case you have any issues I have created a gist for GridContainer.jsshowing what it should look like at this point. And just like that, we have Sparkline component rendering inside of a column in each Grid row:
Adding PanelBar Navigation
Before getting started, we need to install a package:
$ yarn add @progress/kendo-react-layout
The data is very straightforward. Let's copy that into the appData.js file. The shape of the data is an object with two top level nodes containing arrays as values.
Let's add the PanelBarContainer component. Once it's completely implemented, we will be able to use it to affect some of the other states in the application to demonstrate some interactivity. But first we need to get the component working and we need to bring in some additional styles for the Teammate's section of the PanelBarContainer. Copy the code in this Gist and add it to the bottom of the App.css page:
Now we just need to copy the Gist below and paste into our PanelBarContainer.js component:
Once that's done being copied into PanelBarContainer.jswe need to add the import to App.js for the PanelBarContainer:
import PanelBarContainer from './components/PanelBarContainer';
And replace the 
 element for the PanelBarContainer:
We will also need to add some profile images for each team member, I have created a small zip file that has some images already sized correctly that you can use: profile_images.zip.
After you have downloaded those images, add them to a public/img directory in your project for any static files like logos, graphics, images, etc. The public directory is the right place for these.
Our new component should look like this:
KendoReactwhich we've built from the ground up with native UI components so you can build beautiful React apps quickly. Feel free to download a free 30 day trial today and explore everything KendoReact can do.
Start My KendoReact Trial
 Comments are disabled in preview mode.
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
 
   
 
Source link 
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)