Créer un tableau de bord opérationnel pour le commerce électronique React

Nous allons construire un tableau de bord opérationnel dans React pour un magasin de commerce électronique, en utilisant un certain nombre de graphiques et de composants de KendoReact.

Un tableau de bord n'est aussi bon que les informations qu'il présente, ce qui aide à résoudre un besoin spécifique. Il existe quatre types principaux de tableaux de bord:

• Stratégique : Aide à guider la stratégie d'entreprise à long terme, souvent de haut niveau
• Opérationnel : examine les performances actuelles, guide l'alignement sur KPIs de l'entreprise
• Analytique : Contient de grandes quantités de données utilisées par les analystes
• Tactique : Utilisé pour analyser et surveiller un processus

Dans cet article, nous allons construire un tableau de bord opérationnel dans React pour un boutique en ligne, utilisant un certain nombre de graphiques et de composants de KendoReact . Nous commencerons par discuter de nos besoins, passerons à la phase de conception et de planification, puis discuterons du code réel pour l'implémenter.

Le code source complet de ce projet peut être trouvé ici .

Le tableau de bord doit répondre à un besoin réel

Imaginez un magasin de commerce électronique nommé «Le monde merveilleux du camping» (TWWOC). Il se spécialise dans l'équipement, les vêtements et les outils liés, vous l'aurez deviné, au camping! Les objectifs de notre entreprise sont les suivants:

• Être financièrement durable : Sans revenus, notre boutique en ligne aura du mal à réussir. Il s'agit d'une entreprise amorcée sans financement de capital-risque, les revenus sont donc particulièrement importants.
• Fournir une livraison rapide : Toujours viser à maintenir Livraisons en attente bas. Lorsqu'un client commande un article, l'expédition doit être aussi rapide que possible.
• Favoriser l'engagement de la communauté : Cela se fait en permettant aux clients de laisser leurs commentaires et commentaires sur les produits que nous vendons.
• Give Excellent Support : Un client doit recevoir une assistance rapide, utile et amicale à tout moment.

Ces quatre objectifs correspondent aux quatre sections affichées en haut du tableau de bord. Ils affichent des aperçus rapides relatifs à nos objectifs, fournissant des liens rapides pour résoudre les éléments en attente.

Sous les cases de statistiques, nous afficherons un graphique des revenus de tendance avec un graphique géographique et un graphique à secteurs par catégorie ci-dessous. Celles-ci aideront notre entreprise à comprendre le pouls de l'entreprise, d'où viennent nos clients et quelles catégories d'articles les intéressent le plus.

Installation du thème matériel et Bootstrap

Nous utiliserons le thème matériel de KendoReact . Leur site Web contient d'excellentes instructions d'installation, mais en bref, les étapes sont:

• Ajouter le package @ progress / kendo-theme-material
• Importer du CSS précompilé dans le projet import "@ progress / kendo-theme- material / dist / all.css ";
• Ajoutez la police Roboto au projet:
• Utilisez la police Roboto dans CSS body {font-family: Roboto, sans-serif; }

J'ai également installé le package @ progress / kendo-react-ripple et j'ai enroulé le composant Ripple autour de l'ensemble du tableau de bord d'administration pour donner aux boutons une ondulation

Utilisation des lignes et des colonnes de Bootstrap

Bootstrap fournit une excellente mise en page avec des lignes et des colonnes . Même si nous utilisons un thème matériel, cela ne signifie pas que nous ne pouvons pas importer uniquement la partie de mise en page de Bootstrap pour en profiter.

Pour utiliser la mise en page, nous devons exécuter ] yarn add bootstrap et peut alors inclure l'importation en haut du fichier App.js : import "bootstrap / dist / bootstrap-grid.min.css"; .

Définition de notre disposition

En utilisant la disposition de Bootstrap, nous pouvons diviser l'administrateur en une série de lignes et de colonnes. Pour vous aider à comprendre comment notre tableau de bord est structuré, j'ai inclus un croquis dessiné à la main à l'ancienne:

Psuedo-code n'est pas seulement pour décrire la logique de programmation en anglais! Voici un psuedo-JSX de ce à quoi ressemblera notre application, sans le désordre des divs, des classes, des accessoires et de la logique supplémentaire pour mapper les données dans notre application.

 < Container > 
   < Nav   /> 

   < Main > 
     < Row > 
       < Column > 
         <  StatBox   /> 
       </  Colonne > 
       < Colonne > 
         < StatBox   /> 
       </  Colonne > 
       < Colonne > 
         < StatBox   /> 
       </  Colonne > [19659039] < Colonne > 
         < StatBox   /> 
       </  Colonne > 
     </  Row > [19659065] < Ligne > 
       < Colonne > 
         < RevenueChart   /> 
       </  Colonne > [19659037] </  Ligne > [19659065] < Ligne > 
       < Colonne > 
         < RevenueMap   /> 
       </  Colonne > [19659039] < Colonne > 
         < CategoryPieChart   /> 
       </  Column > 
     </  Row > 
   </  Main > 
 </  Container > 

Stat Boxes

Les premières informations contenues dans notre tableau de bord sont les quatre boites statistiques qui retracent aux objectifs de notre entreprise, contenant des liens rapides permettant à l'équipe de résoudre facilement les problèmes.

J'ai choisi d'en faire un composant, ce qui permet de le réutiliser sans dupliquer le code. Il reçoit l'image (icône) affichée en haut à gauche, le texte de l'en-tête et la valeur, ainsi que tous les enfants à rendre sous la statistique.

 const   StatBox   =   ( {  img  texte  valeur  enfants } )   =>   (
   < div   className  =  " col-sm-12 col-md-6 col-lg-3 mt-4 "  > 
     < div   className  =  " card shadow-1 "  > 
       < div   className  =  " ligne "  > 
         < div   className  =  " col-4 "  > 
           < div   className  =  " card shadow-2 stat-box-icon "  > 
             < img   src [1 9659133] =  { img }    alt  =  { text }    style  = [19659032] { { maxHeight :   "100%"  } }    /> 
           </  div  > 
         </  div > 

         < div   className  =  " col-8 text-right "  > 
           < span   className  =  " block "  >   { text }  </  span > 
           < span   className  =  " block "   ]> 
             < strong >   { value }  </  strong > 
           </  span > 
         </  div > 
       </  div > 

       < div   className  =  " row mt-4 "  > 
         < div   className  =  " col "  >   { enfants }  </  div  > 
       </  div > 
     </  div > 
   </  div > 
) ; [19659200] Sans afficher le code des quatre boîtes de statistiques (qui se ressemblent toutes assez), la première boîte de statistiques est utilisée comme: 

 < StatBox   img  =  " / money.svg  "   text  = "  Revenu gagné  "   value  = "  24 431 $  " > 
   < ul > 
     { clients .  map  ( customer  =>   (
       < li   clé  =  { client .  id }  > 
         < a   href  =  " # "  > 
           < img 
             src  =  " /customer.svg  " 
             alt  = "  client  " 
             style  =  { { width  :   "1rem"  marginRight :   "0.5rem"  } } 
           /> 
           { customer  .  nom } 
         </  a > 
       </  li > 
    ) ) } 
   </  ul > 
 </  StatBox >  
 Le  ul  et ses enfants sont devenus les enfants   à notre composant  StatBox .
   
 Revie w Dialog
 KendoReact fournit un composant de dialogue  facile à utiliser . Nous utiliserons le composant  Dialog  pour permettre à notre équipe de rapidement  Approuver  ou  Refuser  les avis sur les produits.
 La ​​première étape consiste à importer les composants appropriés ( après l'installation du paquet):
 import   { Dialog  DialogActionsBar }   from   "@ progress / kendo-react-dialogs"  ; 
 Nous devons choisir quand le composant  Dialog  est affiché, et nous pouvons le contrôler dans l'état au niveau du composant. Lorsqu'un avis est cliqué, nous placerons cet avis dans l'état, qui sera utilisé plus tard pour contrôler si la boîte de dialogue est actuellement visible ou non. Je ne montrerai que les parties pertinentes de notre tableau de bord pour garder l'exemple concis:
 export   default   function   App  ()   {
   const [19659034] [ activeReview  setActiveReview ]   =  React .  useState  ( null )  ; 

   return   (
     < div   className  =  " container-fluid "  > 
       { } 
       < StatBox   img  =  " /megaphone.svg "    text  =  "  Approbation de révision  "   value  = "  10  " > 
         < ul  > 
           { reviews .  map  ( review  =>   (
             < li   key [1 9659133] =  { avis .  id }  > 
               < Button
                onClick  =  { ()   =>   {
                  
                   setActiveReview  ( {  ...  review  ]} ) ; 
                } } 
                icon  =  "rouage" 
                style  =  { { float :   "right"  } } 
               / > 
               { [ ...  Array  ( review .  stars ) .  keys  ()  ] .  map  ( star  =>   (
                 < span   key  =  { star }    role  =  " img "    aria-label  =  " star  ] " > 
                   ⭐️
                 </  span >  
              ) ) } 
               < br   /> 
          < a   href  =  " # "   >   { avis .  produit }  </  a > 
             </  li > 
          ) ) } 
         </  ul > 
       </  StatBox > 
       {} 
     < /  div > 
  ) ; 
} 
 Le  activeReview  contient maintenant  null  s'il n'y a pas de révision active, ou il contient la révision qui doit être affichée dans la boîte de dialogue. Nous pouvons contrôler cela en regardant d'abord si  activeReview  a une valeur, et si c'est le cas, nous pouvons rendre le composant  Review  qui contient la boîte de dialogue.
 export   par défaut   function   App  ()   {
   const   [ activeReview  setActiveReview ]   =  React .  useState  ( null ) ; 

   return   (
     < div   className  =  " container-fluid "  > 
       {} 
       { activeReview  &&   (
         <  Review 
           review  =  { activeReview }  
           triggerClose  =  { ()   =>   {
             setActiveReview  ( null ) ; 
          } [19659032]} 
         /> 
      ) } 
       {} 
     </  div > 
  ) ; 
} [19659447] Dialogue de révision "/>

 Le composant  Review  a pour tâche d'afficher la boîte de dialogue, ainsi que de contrôler ce qui se passe lorsque l'utilisateur clique pour approuver ou refuser la révision. Dans votre application, c'est ici que vous feriez un appel HTTP au serveur pour sauvegarder les données, où dans notre cas nous utilisons simplement  alert  pour afficher un message à l'utilisateur. 
 const   Examen   =   ( { examen  triggerClose } )   =>   (
   < Dialog   title  =  { "Veuillez vérifier" }    onClose  =  { triggerClose }  [19659032]> 
     < h2 >   { review .  product }  </  h2  > 
     < p >   { review .  text }  </  p > [19659037] < DialogActionsBar > 
       < Button 
         onClick  =  { ()   =>   {[19659487] alert  ( "refusé" ) ; 
           triggerClose  () ; 
        } } 
      > [19659499] Refuser
       </  Bouton > 
       < Bouton 
         onClick  =  { ()   =>   { 
           alert  ( "Approuvé" ) ; 
           triggerClose  () ; 
        } } 
      > 
         Approuver
       </  Bouton > 
     </  DialogActionsBar > 
   </  Dialog > 
) ; 
 Tableau des revenus
 Tout le monde aime les graphiques! Comme le dit le proverbe, une image vaut mille mots. Un graphique peut présenter beaucoup plus d'informations que la simple liste de certains nombres dans un tableau. Nous utiliserons un  Area Chart  de la bibliothèque KendoReact.
 Il existe un certain nombre de packages qui doivent être installés avant d'utiliser le composant  Chart :  yarn add @ progress / kendo-drawing @ progress / kendo-react-intl @ progress / kendo-react-charts hammerjs .
 Nous pouvons les importer avec:
 import   "hammerjs" ; [19659538] importation   {
  Graphique 
  ChartLegend 
  ChartTooltip 
  ChartSeries 
  ChartSeriesItem 
  ChartCategoryAxis 
  GraphiqueCategoryAxisItem
}   from   "@ progress / kendo-react-charts" ; 
 Le composant  Chart  entoure le reste du graphique, principalement composé du  ChartCategoryAxis  (les valeurs X en bas du graphique) et le composant  ChartSeries qui fournit les données au graphique, à partir desquelles nous obtenons les valeurs de l'axe Y de notre graphique.
 const   RevenueChart   =   ()   =>   (
   <> 
     < h2 >  Revenue [19659361] </  h2 > 
     < Chart > 
       < ChartTooltip   /> 
       < ChartCategoryAxis > [19659499]  < ChartCategoryAxisItem
          catégories  =  { ventes .  carte  ( ( { jour } )   =>  jour ) } 
          title  =  { { text :   "Day"  } } 
         / > 
       </  ChartCategoryAxis > 
       < ChartSeries > 
          < ChartSeriesItem
          type  =  "zone" 
          data  =  { sales .  map  ( ( { value } )   =>  valeur ) } 
          color  =  "# 4FC3F7" 
         / > 
       </  ChartSeries > 
     </  Chart >  [19659551] < / > 
) ; 
 Category Trends
  Sparklines  sont un moyen incroyable d'ajouter des données visuelles en ligne à votre tableau de bord pour en transmettre plus informations qu'une simple étiquette ou un numéro sans prendre de place supplémentaire. Heureusement, le composant  Sparkline  de KendoReact est incroyablement facile à utiliser. Ce n'est rien de plus que de passer un tableau de nombres, un type  et vous pouvez éventuellement changer les couleurs affichées.
 Ci-dessous, nous créons une liste des catégories de produits que nous vendons, avec une colonne (pensez graphique à barres) Sparkline affichant trois semaines de données sur les tendances des ventes à côté du libellé de la catégorie. Nous sommes capables de transmettre une tonne d'informations dans très peu d'espace.
 const   CategorySparklines   =   ()   =>   (
   < > 
     < h2 >  Tendances des catégories  </  h2 > 

     < ul > 
       { catégories .  carte  ( ( { catégorie  récente }  index ) [19659100] =>   (
         < li   clé  =  { catégorie }  > 
           { catégorie }  { "" } 
           < Sparkline 
             data  =  { recent }  
             seriesColors  =  { [ couleurs  [ index ] ] }  
             type  =  " colonne " 
           /> [19659041] </  li > 
      ) ) } 
     </  ul >  
   < / [19659334]> 
) ; 
 Diagramme à secteurs de catégories
 Le dernier diagramme utilisé dans ce tableau de bord React est un  diagramme à secteurs  de KendoReact. Il affichera une ventilation des catégories de produits que nous vendons et le montant de chaque catégorie en termes de pourcentage de toutes les ventes.
 Les données utilisées dans le graphique ressemblent à:
 const  categories  ] =   [
   { catégorie :   «Tentes»  value :   30  } [19659673] { catégorie :   "Sleeping Bags"  value :   20  } 
   { category :   "Kitchen & Hydration"  value :   15  } 
   { category :   "Vêtements"  valeur :   15  } 
   { catégorie :   "Footwear"  valeur :   10  } 
   { catégorie :   "Outils et éclairage" [19659032] valeur :   10  } 
] ; 

 const  colors  =   [
   "# E57373" 
   "# 9575CD" 
   "# 64B5F6" 
   "# 4DB6AC" 
   "# FFF176" 
   ] "# FF8A65" 
   "# 90A4AE" 
] ; 
 Nous pouvons utiliser ces données pour créer un superbe graphique à secteurs avec juste un peu plus de dix lignes de code: [19659098] const   CategoryPieChart   =   ()   =>   (
  <> 
  < h2 > [19659555] Catégorie Pourcentage  </  h2 > 
  < Graphique   seriesColors  =  { colors }   > 
  < ChartLegend   position  =  " top "    /> 
  < ChartTooltip   /> 
  < ChartSeries [19659032]> 
  < ChartSeriesItem 
  type  =  " pie "  
  data  =  { categories }  
  champ  =  " value "  
  categoryField  =  " category " [19659437] /> 
  </  ChartSeries > 
  </  Chart >  
  < / > 
 ) [19659032]; 
 
 Conclusion
 Dans cet article, nous sommes passés des étapes de planification d'un tableau de bord dans React, jusqu'à son implémentation. Il est très important de se rappeler que les tableaux de bord doivent résoudre des problèmes réels. Avoir trop d'informations peut rendre le tableau de bord écrasant, alors que le manque d'informations ou le fait d'avoir des informations incorrectes peut le rendre inefficace. Pour un autre exemple de création d'un tableau de bord dans React,  Eric Bishard  a écrit un merveilleux article sur  la création d'un tableau de bord de vente dans React .
 Les icônes utilisées dans cette démo ont été créées par  ] Darius Dan .