Construisons un tableau de bord financier avec React

Dans ce didacticiel, nous allons créer un exemple de tableau de bord financier à partir de zéro et en apprendre un peu plus sur la grille CSS, KendoReact et le thème dans le processus.

Les applications financières sont difficiles. Ils traitent généralement une tonne de données, et l'affichage de ces données de manière significative est essentiel pour rendre vos utilisateurs heureux et productifs.

Dans cet article, vous allez créer un exemple de tableau de bord financier en trois étapes. Tout d'abord, vous allez créer une disposition de tableau de bord et en apprendre un peu plus sur la syntaxe de la grille CSS dans le processus. Ensuite, vous allez ajouter des composants d'interface utilisateur à partir de KendoReact notre bibliothèque d'interface utilisateur qui facilite l'affichage des données dans des graphiques, des grilles, etc. Et enfin, vous apprendrez comment personnaliser votre tableau de bord, y compris comment gérer le thème et comment modifier les composants de KendoReact pour répondre à vos besoins.

Lorsque vous aurez terminé, vous aurez un tableau de bord qui ressemble à ceci.

ce référentiel GitHub de l'article et basculez vers sa branche start . Vous pouvez le faire en exécutant l'ensemble de commandes suivant dans votre terminal ou votre invite de commande.

 git clone https://github.com/ tjvantoll / financial-dashboard.git
cd financier-tableau de bord
git checkout start

Étape 1: Construire votre mise en page initiale

Comme la plupart des grands projets de développement de logiciels, faire un peu de planification avant de passer directement au codage de votre tableau de bord est une bonne idée. Dans cette section, nous allons commencer par examiner un schéma filaire rapide de la disposition de notre tableau de bord, puis voir comment échafauder cette disposition avec CSS.

Création d'un filaire

Un filaire est une représentation visuelle de ce que votre l'application finale ressemblera. Il est important d'avoir une certaine représentation de votre application avant de commencer à coder, mais le filaire ne montre pas toutes les dernières fonctionnalités, et il n'a pas besoin d'être conçu par des professionnels.

À titre d'exemple, voici un croquis que j'ai créé dans Balsamiq pour le tableau de bord de cet article.

Implémentation de votre mise en page avec CSS

Il existe de nombreuses façons de mettre en page une application avec CSS de nos jours. L'une des approches les plus courantes consiste à utiliser un cadre comme Bootstrap qui fournit une variété de noms de classe pour vous aider à diviser votre interface utilisateur en une série de lignes et de colonnes.

Par exemple, vous pouvez créer une disposition Bootstrap avec trois colonnes en utilisant le balisage suivant.

 < div   class  =  "container" >
  < div   class  =  "row" >
    < div   class  =  "col-sm" >
      Une  de  trois colonnes
    </  div >
    < div   class  =  "col-sm" >
      Une  de  trois colonnes
    </  div >
    < div   class  =  "col-sm" >
      Une  de  trois colonnes
    </  div >
  </  div >
</  div >

Bien que cela fonctionne, personnellement, je ne suis pas un grand fan de cette approche dans les grandes applications comme les tableaux de bord. Les applications du monde réel ont tendance à se compliquer très rapidement, et avant que vous ne le sachiez, votre balisage passe de concis à un gâchis compliqué de noms de classe difficiles à déchiffrer.

< div className = "panels" > < div ] className = "panel-info" > < InfoPanel /> </ div > < ] div className = "panel-allocation" > < AllocationPanel /> </ div > [19659034] < div className = "panel-balance" > < PerformancePanel /> </ div > < div className = " panel-positions "> < PositionsPanel /> </ div > </ div >

Notre tâche consiste à prendre ce balisage et à le faire ressembler à notre filaire, qui, pour rappel, ressemble à ceci.

.panels> div { // Ajouter une bordure noire autour de chaque panneau pour le débogage bordure : 1px noir uni; } .panels { affichage : grille ; grille -espace: 10px; grille -template- colonnes : 225px auto auto; grille -template-rows: auto auto; } .panel-info { grille - rangée : travée 2 ; } .panel-positions { grille -colonne: travée 2 ; }

Après avoir ajouté ce code, vous voudrez vous diriger vers votre terminal ou invite de commande et exécuter npm run start qui lancera votre application React dans votre navigateur. Une fois terminé, vous devriez voir une interface utilisateur qui ressemble à ceci.

disposition de grille CSS et c'est incroyablement bien pris en charge par les navigateurs Web aujourd'hui.

CONSEIL : Si vous êtes nouveau dans la grille CSS, consultez cette introduction vidéo sur YouTube . Et quand vous avez les bases, mettez en signet CSS Tricks A Complete Guide to Grid car c'est une excellente référence lorsque vous devez rechercher les différentes propriétés CSS de la grille.

Ce qui rend la grille CSS attrayante est sa brièveté. Au lieu d'encombrer votre balisage avec une myriade de noms de classe, vous obtenez un moyen puissant de diviser votre interface utilisateur en lignes et colonnes.

La grille CSS facilite également la réactivité de vos tableaux de bord. , ajoutez le bit CSS suivant à votre fichier src / styles / _layout.scss .

 @  media  (largeur max:  750 pixels ) {
   .panels  {
     grille-modèle-colonnes :  225px  auto;
     grille-modèle-lignes : auto auto auto;
  }
   .panel-positions  {
     grille-colonne : travée  2 ;
  }
}

@  média  (largeur maximale:  500 px ) {
   .panels  {
     grille-modèle-colonnes : auto;
  }
   .panel-positions  {
     grille-colonne : travée  1 ;
  }
}

Ce code réoriente votre grille à mesure que l'écran de l'utilisateur se rétrécit. Par exemple, à 750 pixels, il change le conteneur .panels en utilisant trois colonnes ( grid-template-columns: 225px auto auto ), en deux ( grid-template-colonnes : 225px auto ). Et puis, à 500 pixels, il réduit ce même conteneur à une seule colonne ( grid-template-columns: auto ), de sorte que tous les panneaux de l'application s'empilent les uns sur les autres.

Vous pouvez voir ce que cela ressemble au gif ci-dessous.
Étape 2: Ajout de composants d'interface utilisateur

Souvent, la partie la plus difficile de la création d'un tableau de bord est de trouver un niveau élevé composants d'interface utilisateur de qualité. Le monde React est grand, donc heureusement il y a des tonnes de composants, mais les tableaux de bord nécessitent souvent une grande variété de contrôles, et essayer de construire une interface utilisateur à partir d'un ensemble disparate de composants du Web peut être un

C'est là que KendoReact entre en jeu. KendoReact propose 80+ composants d'interface utilisateur qui fonctionnent ensemble de manière transparente, de sorte que vous sachiez que vos graphiques ressembleront à votre DatePicker et que votre DropDownList ressemblera à votre calendrier, sans travail supplémentaire. De plus, les composants sont modulaires, vous pouvez donc utiliser uniquement les composants dont vous avez besoin sans gonfler vos applications.

Votre application de tableau de bord comporte quatre panneaux, et chacun a son implémentation dans un fichier dans le src / panels de votre application dossier. Dans cette section, nous allons implémenter un composant KendoReact dans chaque fichier afin que vous puissiez avoir une idée du fonctionnement de la bibliothèque.

Utilisation du PanelBar

Un PanelBar est un composant d'interface utilisateur qui affiche des données hiérarchiques dans une série de, enfin, des panneaux. Votre PanelBar typique ressemble à ceci.

npm install kendo-react-layout

Ensuite, vous devrez importer le composant dans votre code. Pour ce faire dans l'exemple, ouvrez votre fichier src / panels / InfoPanel.tsx et notez les importations déjà incluses dans le haut du fichier.

 import  {PanelBar, PanelBarItem}  de   "@ progress / kendo-react-layout" ;

Ensuite, notez que votre InfoPanel.tsx a du code prérempli pour récupérer des données et qu'il stocke ces données dans une constante nommée fundInfo . Pour utiliser ces données, remplacez le balisage

Info Panel

existant du composant par le code ci-dessous.

  < PanelBar > 
   < PanelBarItem [19659033] expand  =  {true}   title  =  "Fund Managers" > 
     < div > 
       {fundInfo && fundInfo .managers.map ((item, idx) => (
        <div className = "manager" key = {idx} >
           < img   src  =  {`/ team / $ {item.firstName}   $  {item.lastName}   ]  .png  `}
             alt  =  {item.firstName + '' + item.lastName}   /> 
           < span   className  =  "info-gestionnaire" > 
             < h2 >  {item.firstName + '' + item.lastName}   </  h2 > 
             < p >  {item.position}   </  p > 
           </  span  > 
         </  div > 
      ))}
     </  div > 
   </  PanelBarItem > 
 </  PanelBar >   

Après vous enregistrer cette modification, vous devrez redémarrer votre application en exécutant npm run start dans votre terminal ou votre invite de commande. Quand il revient, vous devriez voir un panneau pliable.

incluant un certain nombre d'options de personnalisation différentes pour le PanelBar il est donc facile d'adapter chaque composant à répondre à vos besoins.

Mais la véritable puissance de KendoReact réside dans la cohérence de la bibliothèque lorsque vous avez besoin d'utiliser une grande variété de composants dans une seule application. Pour voir cela en action, ajoutons quelques composants supplémentaires. [19659115] Utilisation du graphique

Les diagrammes et les graphiques sont peut-être les composants d'interface utilisateur les plus courants dans n'importe quel tableau de bord, en particulier ceux financiers. Pour répondre à ce besoin, KendoReact fournit une bibliothèque de graphiques incroyablement complète, avec un support pour tout, de la ligne de base, la barre et diagramme circulaire s, vers des graphiques plus spécialisés tels que les diagrammes en boîte, les diagrammes de dispersion, les entonnoirs, etc.

Dans cette section, nous allons implémenter deux graphiques différents pour que vous puissiez voir à quel point le processus est facile et pour voir à quel point le KendoReact

Si vous vous souvenez de la section précédente, votre première étape pour utiliser n'importe quel composant KendoReact est de l'installer à partir de npm. Dans cet esprit, continuez et exécutez la commande ci-dessous pour installer le package KendoReact Chart dans votre application.

 npm  install  kendo-react-charts

Ensuite, vous devrez importer le composant Chart dans votre code. Si vous ouvrez votre fichier src / panels / AllocationPanel.tsx vous verrez l'ensemble d'importations suivant en haut.

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

Notez que le package de cartes contient en fait une série de composants modulaires. Notez également que votre fichier AllocationPanel.tsx contient du code pour récupérer des données et les stocker dans une constante data .

Pour utiliser ces données dans un graphique, remplacez le AllocationPanel.tsx fichier de balisage

Allocation Panel

avec le code ci-dessous, qui rend les données du fichier dans un composant KendoReact Chart.

  < Chart > 
   < ChartTitle   text  =  { " Asset   Allocation "}>  </  ChartTitle > 
   < ChartSeries > 
     < ChartSeriesItem   type  =  "donut"   data  =  { data} > 
     < ChartSeriesLabels 
       content  =  {e  =>  `$ {e.value}%`}
      background = "aucun"
      color = "# fff" />
     </  ChartSeriesItem > 
   </  ChartSeries > 
   < ChartLegend   position  =  { ""  bottom  "}  visible  =  {true}  /> 
   < ChartTooltip   render  =  {(e :   any ) =>  (
     < div >  {e.point? e.point.category: ""}  </  div > 
  )} />
 </  Graphique > 

Après avoir enregistré votre fichier avec ce code, vous devriez voir un nouveau graphique en anneau dans votre application.

< Graphique > < ChartTitle text = "Fund Performance" /> < ChartCategoryAxis > < ChartCategoryAxisItem catégories = {[ " 2014 ", "[ 2015 ", " 2016 ", " 2017 ", " 2018 ", " 2019 ", " 2020 "]] " } /> </ ChartCategoryAxis > < ChartSeries > < ChartSeriesItem type = "ligne" data = {data} /> </ ChartSeries > < ChartTooltip render = {renderTooltip} /> </ Graphique >

Lorsque votre application est actualisée, vous devriez voir un nouveau graphique linéaire dans le troisième panneau de votre application.
en ajoutant la possibilité d'exporter au format PDF ou SVG permettant aux utilisateurs de faire un panoramique et un zoom ajoutant la prise en charge de l'internationalisation et bien plus encore.

Et ce niveau de personnalisation s'applique à tous les composants de KendoReact, y compris notre composant le plus populaire, la grille .

Utilisation de la grille

La grille KendoReact offre un ensemble complet et fou de façons de travailler avec des données. Dans sa forme la plus élémentaire, la grille fournit une manière élégante d'afficher des données dans un table, avec prise en charge de fonctionnalités telles que pagination tri filtrage modification regroupement et plus encore.

De là, vous pouvez ajouter des fonctionnalités plus avancées, comme Exportation PDF Exportation Excel colonnes verrouillées colonnes redimensionnables et défilement virtualisé si vous le souhaitez, ou, vous pouvez vous en tenir à les bases si c'est tout ce dont vous avez besoin.

Dans cette section, nous nous en tiendrons aux bases afin que vous puissiez voir à quel point vous pouvez facilement ajouter une grille à vos propres applications et à quel point la grille fonctionne avec d'autres composants de KendoReact. [19659003] Vous voudrez commencer par installer la grille à partir de npm, ainsi que ses dépendances, ce que vous pouvez faire en exécutant la commande ci-dessous dans votre terminal ou invite de commande.

 npm install --save  @progress  / kendo-react-grid  @progress  / kendo-  data  -query  @progress  / kendo-react-  data  - t ools  @progress  / kendo-react-inputs  @progress  / kendo-react-intl  @progress  / kendo-react-dropdowns  @progress  / kendo-react-dateinputs  @progress  / kendo-drawing

Ensuite, ouvrez votre fichier src / panels / PositionsPanel.tsx et notez que les importations de grille apparaissent déjà en haut.

 import  {Grid, GridCellProps, GridColumn}  de   "@ progress / kendo-react-grid" ;

Le fichier contient également des données dans une constante positions . Pour l'utiliser, remplacez le balisage

Positions Panel

du fichier par le code suivant.

 < Grid 
   data  =  {positions} 
   style  =  {{  hauteur:   700 }}
> 
   < GridColumn   title  =  Champ "Symbol"    =  "symbol"   verrouillé  =  {true }   largeur  =  {100}  /> 
   < GridColumn   title  =  Champ "Name"    =  "nom"  /> 
   < GridColumn   title  =  "Change"   champ  =  "day_change"  /> 
   < GridColumn   title  =  Champ "% Change"    =  "change_pct"  /> 
   < ] GridColumn   title  =  Champ "Volume"    =  "volume"  /> 
   < GridColumn   titre  =  Champ "Market Cap"    =  "market_cap"  /> 
 </  Grille > 

Lorsque votre application est actualisée, vous devriez voir la grille dans le panneau inférieur de votre application.

Étape 3: Personnalisation de votre interface utilisateur

Les tableaux de bord sont complexes et les applications financières du monde réel doivent gérer un ensemble vertigineux d'exigences qui changent constamment. Il est important que tous les outils que vous utilisez puissent être personnalisés pour répondre à vos besoins changeants.

Dans la première étape de cet article, nous avons utilisé la disposition de la grille CSS, car elle fournit un moyen flexible d'organiser les panneaux de votre tableau de bord sans utiliser HTML. Dans cette section, nous examinerons quelques façons de personnaliser les composants de l'interface utilisateur de KendoReact eux-mêmes, vous donnant la possibilité de répondre aux exigences de votre entreprise sans écrire de code compliqué.

Points d'extension

KendoReact fournit un certain nombre d'API d'extensibilité à laisser vous personnalisez le rendu de vos composants. Ceci est très utile sur les composants complexes, car vous voulez souvent modifier une partie d'un composant sans avoir à réécrire le tout.

C'est plus facile à voir avec un exemple. Notez l'état actuel de la grille dans notre exemple.

< Grid [19659183] data = {positions} style = {{ hauteur: 700 }} > < GridColumn title = Champ "Symbol" = "symbol" verrouillé = {true } largeur = {100} /> < GridColumn title = Champ "Name" = "nom" /> < GridColumn title = "Change" champ = "day_change" /> < GridColumn title = Champ "% Change" = "change_pct" /> < ] GridColumn title = Champ "Volume" = "volume" /> < GridColumn titre = Champ "Market Cap" = "market_cap" /> </ Grille >

Les composants d'interface utilisateur tiers ont tendance à éloigner le DOM sous-jacent. C'est généralement souhaitable – après tout, écrire et est bien plus facile que d'écrire un désordre

 <GridColumn title =  Champ "Change"    =  "day_change"  />
Champ <GridColumn title =  "% Change"    =  "change_pct"  />

  < GridColumn   title  =  "Change"   field  =  "day_change" "  cellule  =  {ChangeCell}  /> 
 < GridColumn   title  =  Champ"% Change "   =  "change_pct"   cellule  =  {ChangeCell}  /> 

 const  ChangeCell =  ( accessoires: GridCellProps ) =>  {
   const  value = props.dataItem [propsfield|| "" ];
   retour  (
     < td   style  =  {{  couleur:   valeur >  0? "vert": "rouge"}}>
      {valeur}%
     </  td > 
  )
}