L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
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 .
Source link