Créez vos applications React Pop avec les visualisations de données

Pomper vos applications avec des visualisations de données ne doit pas être compliqué. Voici quelques manières de commencer à rendre vos applications plus attrayantes et intuitives pour vos utilisateurs finaux.

La plupart des applications que nous écrivons finissent par traiter des données. Qu'il s'agisse de l'afficher, de le modifier ou de le manipuler, les données constituent généralement le cœur de nos applications. En général, il suffit parfois d’afficher des données brutes sur une page et de laisser l’utilisateur en tirer les conclusions, mais bon nombre d’entre nous sommes des apprenants visuels. Un moyen simple d’attirer l’attention des visiteurs est de le visualiser. Entrez la visualisation des données.

Il existe de nombreuses solutions pour ajouter une représentation graphique de vos données, mais certaines d'entre elles peuvent être assez complexes. Il devrait y avoir un moyen d'obtenir des visualisations de données avancées sans configuration avancée! C'est pourquoi ce poste a été créé. passer un peu de temps à comprendre comment l'ajout des composants de visualisation de données (diagrammes et jauges) KendoReact KendoReact peut rendre votre application réellement éblouissante avec seulement quelques lignes de code. Configuration facile pour la victoire facile!

Installation

Commençons par nous assurer que nous pouvons utiliser le code que nous trouvons dans cet article de blog et toute documentation en exécutant un rapide npm install . pour quelques colis. Notre projet est ainsi préparé et prêt à fonctionner.

 npm install --save @ progress / kendo-react-charts @ progress / kendo-dessin @ progress / kendo-react-intl hammerjs

Ce que nous avons installé ci-dessus est le package global de kendo-react-charts qui contient toutes les cartes de KendoReact, le cadre de kendo-drawing qui nous aide réellement à rendre le graphiques (logique du nom, non?), le paquet de kendo-react-intl (pour aider à tout scénario de localisation ou de mondialisation), et enfin hammerjs que nous avons en tant que dépendance pour aider avec l'interactivité et les événements des graphiques KendoReact.

Nous ne devrions pas oublier non plus d'installer notre thème favori pour travailler avec nos composants! Dans ce cas, nous utiliserons le thème Matériau et suivrons les instructions de cet article de documentation pour nous permettre d'installer le thème le plus naturel dans notre processus existant autour de CSS.

installation soignée, voyons ce que nous pouvons faire avec certaines de ces visualisations de données!

Ajout de notre premier graphique

Avant de commencer à afficher des graphiques sur une page, voyons quel type de données nous peut vouloir afficher. Dans ce cas particulier, nous souhaitons mettre en évidence les ventes quotidiennes d'un produit imaginaire. Puisque nous avons sept jours de la semaine pour travailler, mettons en place un tableau ressemblant à ceci:

 state = {
  salesPerDay: [12, 9, 13, 7, 10, 8, 12]
}

Très bien, prenons ces excellentes données et faisons une sorte de visualisation!

Pour commencer, nous devrons importer des parties du graphique KendoReact, plus précisément

 import {.
    Graphique,
    Série ChartS,
    ChartSeriesItem,
} de '@ progress / kendo-react-charts';

Cela nous mettra dans une bonne position car nous pouvons maintenant définir un graphique, ainsi que n'importe quel nombre de séries au sein dudit graphique. Les cartes de KendoReact prennent en charge le fait de disposer de plusieurs séries, du même type ou de types différents, et avec ces trois importations, nous pouvons présenter tout ce que nous souhaitons pour nos cartes de manière déclarative.

Le composant de carte peut être configuré dans notre JSX utilisant ce qui suit:

Comme nous pouvons le voir dans l'extrait de code ci-dessus, nous définissons un puis nous définissons le fait que nous souhaitons avoir une sorte de série dans étant une série individuelle. La configuration de cette série est assez basique, définissons donc notre type comme une colonne (il existe une tonne d'autres types à choisir!) Et transmettons nos données. Cela nous donne un tableau qui semble déjà très bon:

Une structure en colonnes comme celle-ci n'est peut-être pas la meilleure solution pour suivre les ventes quotidiennes, aussi, avec une modification rapide du paramètre type = "line" nous mettons à jour notre graphique.

Pour ajouter plus d'interactivité au graphique et pour rendre plus claire la valeur de chacun de nos marqueurs, allons de l'avant et ajoutons quelques astuces au parti.

L'info-bulle peut être définie à l'aide d'une série. par série et est défini en important et en utilisant ChartSeriesItemTooltip . Il s'agit du défini dans chaque composant ChartSeriesItem avec lequel l'info-bulle doit être utilisée.

Dans notre cas, avec tout mis à jour, le composant entier ressemble à ceci:

 import React from 'react';
importer ReactDOM de 'react-dom';

importer {process} de '@ progress / kendo-data-query';

importer {
    Graphique,
    Série ChartS,
    ChartSeriesItem,
    ChartSeriesItemTooltip,
} de '@ progress / kendo-react-charts';

importer des "hammerjs";

La classe App étend React.Component {
  state = {
    salesPerDay: [12, 9, 13, 7, 10, 8, 12]
  }

  render () {
    revenir (
      

        
          
            
                
            
          
        
      
        );
    }
}

ReactDOM.render (
    
    document.querySelector ('my-app')
)

La manière dont cela a été ajouté ne voulait pas que notre ChartSeriesItem soit à fermeture automatique, mais plutôt un avec la visibilité définie comme étant vraie. Il existe une tonne d'options y compris la définition de modèles pour l'affichage du code HTML générique, pour ces info-bulles. Au-delà de l'affichage initial, nous avons beaucoup à faire pour peaufiner les choses à votre goût.

La dernière chose que nous voudrions peut-être faire avec cela C’est ajouter des valeurs à notre axe X pour nous assurer que nous savons ce que ces données représentent. Comme nous appelons ces données salesPerDay il est logique d’essayer d’ajouter quelque chose aux jours de la semaine. Lundi – Le dimanche a beaucoup de sens ici (tous les partisans de "la semaine commence le dimanche" ?). Nous pouvons étendre nos entrées de tableau de ventes et les avoir comme objets avec les champs sales et Cela nous laisse avec un tableau d'objets connectés à notre graphique.

 salesPerDay: [
    { sales: 12, day: "Mon" },
    { sales: 9, day: "Tues" },
    { sales: 13, day: "Wed" },
    { sales: 7, day: "Thurs" },
    { sales: 10, day: "Fri" },
    { sales: 8, day: "Sat" },
    { sales: 12, day: "Sun"}
  ] 

Si nous regardons immédiatement sur notre page, un problème qui apparaît maintenant est que nous ne voyons plus nos points de données. pas de panique, c’est très facile à "réparer" en définissant quels champs sont liés à ce qui dans le graphique avec une liaison rapide. Plus précisément, nous pouvons mettre à jour votre r ChartSeriesItem pour avoir field = "sales" et "categoryField =" day " ajout des accessoires. Dans le graphique de KendoReact, nous pouvons nous rappeler que la catégorie (et l'axe) est généralement liée à l'axe des X dans ces cas, alors que le champ [ou le champ de valeur] a tendance à être sur l'axe des Y.

Avec seulement quelques lignes de code, nous obtenons un tableau prêt à émerveiller nos utilisateurs! Nous sommes également liés aux champs, ce qui signifie que nous pouvons facilement ouvrir cette possibilité à des scénarios plus avancés. Pour référence, voici le code complet en action que vous pouvez exécuter dans StackBlitz pour voir le résultat final:

Une nouvelle couleur de peinture

Le graphique ci-dessus est plutôt joli, mais il suit spécifiquement notre thème standard. Et si nous voulions avoir le plein contrôle sur l'apparence de ce graphique? Nous avons tous des conceptions et des couleurs personnalisées auxquelles nous devons nous tenir (peut-être une norme de conception UX à l'échelle de l'entreprise) et nous souhaitons bien sûr adapter notre graphique à celui-ci.

Le moyen le plus simple serait de suivre . les instructions de personnalisation du thème Matériau KendoReact . Comme cela se fait via des variables Sass, il peut être assez facile d'ajuster ce thème pour qu'il corresponde à vos critères de conception. Il y a même une section spécifique au graphique qui traite de variables spécifiques pour le graphique.

Nous pouvons également adopter une approche déclarative ou programmatique, définissant des styles dans chaque partie de notre composant, ce qui correspond continuerons tout au long de cet article.

Commençons par notre objectif final, la conception de notre graphique. Les ventes en général tendent généralement à indiquer que les affaires marchent bien et sont associées à de l'argent. Restons donc avec un thème vert pour le graphique. La couleur verte principale est # 4EA952 .

Il est logique de commencer par définir le fond vert du graphique. Nous devrons introduire une nouvelle partie du graphique ici, la ChartArea [19659047Cetélémentnousdonnelecontrôlesurdesélémentstelsquelalargeuretlahauteurdugraphiqueetnouspermetégalementdedéfinirlacouleurd'arrière-planquiseraajoutéeànotreconfigurationdegraphiqueentantqu'élémentàfermetureautomatique sous notre étiquette .

Bon, peut-être pas le plus beau (encore!) Continuons donc à peaufiner certaines choses. Le bleu par défaut de notre série est peut-être un peu étrange ici, alors mettons cela à peu près comme un blanc (mais pas tout à fait) comme # F9FCF9 .

Nous devrions également aborder la couleur que nous avons sur les axes X et Y ici. Nous en avons parlé plus tôt lorsque nous avons parlé d’afficher le lun-dim au bas de notre graphique. Cela se fera en configurant les éléments ChartValueAxis et ChartCategoryAxis . L'importation de ceux-ci à partir de notre package graphique nous permet de définir des détails autour des axes X et Y, comme la couleur de police par défaut dans notre cas, ainsi que de nombreux autres éléments.

Jetons d'abord un coup d'œil à notre implémentation, puis expliquons ce qui a été fait. définir les couleurs par défaut de ces éléments d'axe.

Comme nous le voyons dans l'extrait ci-dessus, nous avons également ajouté les éléments ChartValueAxisItem et ChartCategoryAxisItem en fait, où nous définissons si les étiquettes sont visibles pour commencer (valeur par défaut). vrai ici au fait) et quelle couleur ils devraient être.

Pour l'instant, nous ne faisons que définir des couleurs, mais ces AxisItems sont très importants lorsque nous voulons personnaliser notre graphique. Par exemple, le ChartValueAxisItem nous permet de définir les valeurs max et min afin que nous n'ayons pas toujours 0 comme valeur la plus basse. Ceci est utile lorsque les valeurs commencent très haut pour commencer, ou nous voulons aussi voir des valeurs négatives. Le ChartCategoryAxisItem nous fournit le moyen de changer le niveau de liaison par défaut pour les dates (jour, semaine, mois, année) ainsi que les intervalles pour l'endroit où nous voulons afficher des points dans les données. Idéal dans les scénarios où les performances sont une source de préoccupation et pour lesquelles nous ne souhaitons peut-être pas afficher absolument tous les points de données au début.

Cela étant dit, dans ce cas, nous ne faisons que définir la couleur comme étant celle de notre élément de série. 19659065] série-et-axes-mis à jour "title =" 006-série-et-axes-mis à jour "/>

Bien mieux! Le dernier détail serait de traiter les lignes que nous avons à l’arrière-plan, car elles en font Il est plus facile d'identifier la valeur à traiter au premier coup d'œil.

Dans le graphique de KendoReact, nous avons les propriétés majorGridLines et minorGridLines avec lesquelles nous pouvons travailler. Dans ce cas, nous n’avons que majorGridLines car nous n’avons que des lignes associées à chaque tick normal, mais si nous voulions être encore plus précis avec nos données, nous pourrions également définir des valeurs de ticks mineures pour mettre en évidence des éléments de données entre nos plus grands / valeurs plus importantes (majeur).

Pour les mettre en place, nous pourrions nous k avec nos éléments existants ChartValueAxisItem et ChartCategoryAxisItem mais un élément extrêmement utile à couvrir ici serait également ChartAxisDefaults . L'avantage de ce composant est qu'il nous permet de configurer les valeurs par défaut que nous voulons hériter de tous nos éléments d'axe et que nous n'aurions besoin de définir des valeurs d'axe supplémentaires que lorsque nous aurons une modification très spécifique pour un élément d'axe (ou les deux). (s). En fait, nous pourrions même supprimer les sections précédentes ChartCategoryAxis et ChartValueAxis de notre composant Graphique si nous le voulions, car elles hériteraient de cet élément. Nous voudrons peut-être prolonger cela plus tard afin de pouvoir les laisser pour l'instant.

Le composant ChartAxisDefaults peut être inclus directement dans notre composant et se fermer automatiquement. Nous devrions également définir la propriété majorGridLines, ce qui nous donne . le dashType nous laisse par défaut une ligne, et bien qu'il y ait beaucoup de variations, la version de "point" est celle que nous avions dans notre image d'origine.

Si nous courons ceci

Voici le code source complet de ce que nous venons de faire.

Visualisations de données simples et rapides

Parfois, un graphique peut ne pas être le meilleur moyen d'afficher des informations, par exemple si vous souhaitez mettre en surbrillance un pourcentage compris entre 0 et 100, ou peut-être une sorte de barre de progression. les jauges de KendoReact entrent en jeu. Ce type de visualisations, combiné aux graphiques, nous donne toute une gamme de visuels à traiter.

Tous ces composants peuvent être trouvés dans le même package, il est donc préférable de les installer. un jeu d'enfant avec npm installer --save @ progress / kendo-react-gauges @ progress / kendo-dessin @ progress / kendo-react-i ntl .

Le composant ArcGauge qui peut être ajouté à n’importe quel composant React en utilisant l’import import {ArcGauge} de '@ progress / kendo-react-gauges' ; .

Le moyen le plus rapide de rendre ce composant est d’ajouter une variable à notre état du type suivant:

 this.state = {
  valeur: 78
};

Et dans notre rendu, nous pouvons ajouter le ArcGauge et le lier à cette valeur.

 render () {
  revenir  (
    
   )
}

La jauge résultante ressemble à ceci:

Ce qui, bien que joli, manque un moyen de le voir. Cela peut facilement être obtenu en définissant le prop arcCenterRender qui peut être transmis à une fonction et restitué à peu près tout ce que nous voulons. un format particulier ou une personnalisation amusante avec l'étiquette de jauge modifiant la mise en forme ou les couleurs avec ArcGauge lui-même.

Pour notre échantillon particulier, supposons que nous avons affaire à des pourcentages, nous voulons donc que notre valeur soit suivie par "%" affiché dans l'arc de notre ArcGauge.Nous pouvons commencer par définir l'arc arcCenterRender à une fonction (nous l'écrirons dans un bit), ce qui nous donne quelque chose comme arcCenterRender = {this .centerLabelRenderer} . Ensuite, dans le constructeur de notre composant React nous pouvons définir centerLabelRenderer .

 this.centerLabelRenderer = (valeur, couleur) => {
  return (
 {valeur}% 
);
}

Ce qui est pratique ici est que les valeurs et couleur seront toujours transmises à partir de ce que nous avons déjà défini sur ArcGauge lui-même. Ainsi, si la valeur ou la couleur de notre jauge change, l'étiquette à l'intérieur peut en être de même. Comme il s'agit d'un modèle qui accepte les éléments HTML, nous pouvons vraiment retourner ce que nous voulons. Dans ce cas, faisons simplement un h3 simple et relions à la fois la couleur et la valeur .

Voici tout ce qui a été mis ensemble. Avec cette configuration, nous obtenons une visualisation claire et facile à lire.

Ajout de visualisations à quelque chose [19659095] Enfin, nous pouvons couvrir un autre type de visualisation, à savoir le composant Sparkline .

Même s’il s’agit d’un petit composant de taille, il garde tout de même un coup de poing puissant! Nous pouvons l'appeler le "cricket bruyant" du logiciel de visualisation de données KendoReact. Actuellement, Sparkline prend en charge les types suivants, tous dotés d'astuces intégrées et d'autres fonctionnalités utiles: Ligne

• (valeur par défaut si aucun type n'est défini)
• Barre
• Colonne
• Zone
• Pie
• ] Bullet

Pour commencer à utiliser ce composant, nous devons simplement importer le composant Sparkline de notre paquet kendo-react-charts :

 import {Sparkline} de '@ progress / kendo-react- graphiques';

À partir de là, nous pouvons simplement travailler avec nos données originales salesPerDay (sans les dates) et les lier au composant Sparkline.

 La classe App étend React.Component {.
  state = {
    salesPerDay: [ 12, 9, 13, 7, 10, 8, 12 ]
  }

  render () {
    revenir (
      

        
      
    );
  }
}

C'est ça! Nous avons maintenant un composant Sparkline rendu dans notre page. Bien entendu, l'intégration à d'autres composants aura probablement plus de sens, mais c'est là qu'un rendu personnalisé peut entrer en jeu.

Comme d'habitude, voici le code source complet de cet exemple:

Visualize All the Les choses!

Pincer des objets dans nos applications peut parfois sembler une tâche ardue, mais ce n’est pas nécessairement le cas! En travaillant avec nos données existantes et en les liant simplement à un graphique, à une jauge ou même à une petite visualisation sparkline, nous pouvons très facilement passer notre application à un niveau supérieur et rendre nos applications encore plus intuitives pour que nos utilisateurs finaux puissent comprendre et interagir avec . Espérons que cet article vous ait inspiré pour vous aider à ajouter des visualisations de données à vos propres applications!

Pour plus d'informations sur la création d'applications avec React

Consultez notre page All Things React qui contient une excellente collection d’informations et de pointeurs sur l’information React - avec des sujets d'actualité et des informations actualisées, allant de la création à la création d'une interface utilisateur convaincante.

---