L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Créez un tableau de bord réactif avec un matériau angulaire et des graphiques ng2
Créer un tableau de bord à partir de zéro est souvent assez compliqué. Vous devez créer des outils pour collecter des données sur des éléments d'intérêt. Une fois collectées, ces données doivent être présentées de manière simple et significative à vos utilisateurs. Cela implique une planification complexe des données à inclure et de la manière de les afficher efficacement. Une fois que vous avez un plan, la mise en œuvre de la conception est une tâche énorme, d'autant plus qu'elle implique la construction de plusieurs composants.
Avec le matériau angulaire et les ng2-charts, vous pouvez tirer parti des schémas pour réduire l'effort et le temps que vous pourriez consacrer à la construction d'un tableau de bord. Le matériau angulaire est livré avec un certain nombre de schémas que vous pouvez utiliser pour générer un tableau de bord. De même, ng2-charts fournit des schémas pour générer plusieurs composants de graphique. Dans cet article, je vais illustrer comment utiliser à la fois ng2-charts et Angular Material pour configurer un tableau de bord assez rapidement.
Un exemple
Pour illustrer comment créer un tableau de bord, nous prendrons l'exemple d'un boutique en ligne vendant des articles en cuir comme des sacs, des portefeuilles, des porte-clés, etc. Le propriétaire de la boutique souhaite, entre autres, suivre des informations telles que la provenance des clients vers leur boutique en ligne, la manière dont leurs produits se vendent, la relation entre les sources de trafic et les ventes.
Nous allons créer un tableau de bord pour afficher ces informations et vous aider le propriétaire du magasin l'analyse. Le tableau de bord contiendra quatre petites cartes récapitulatives, quatre types de graphiques différents et un tableau répertoriant les dernières commandes passées. Les quatre cartes récapitulatives afficheront des informations telles que le revenu total des ventes, la valeur moyenne des commandes, le nombre total de commandes et le nombre de clients qui reviennent. Les graphiques afficheront le nombre d'unités vendues pour chaque produit, les ventes par source de trafic, les sessions de la boutique en ligne au fil du temps et les ventes pour la semaine.
Prérequis
Pour suivre le cours, vous devez avoir installé Angular CLI . Si vous ne l'avez pas installé, vous pouvez trouver comment l'obtenir à cli.angular.io . Si vous ne partez pas d’un projet Angular préexistant, vous devez en générer un en exécutant ng new . Par exemple, pour créer un panneau d'administration pour le magasin susmentionné, nous allons exécuter:
ng new store-admin-panel Votre projet doit également avoir des routes configurées pour lui. Si vous démarrez à partir d'une nouvelle application, sélectionnez oui lorsque vous êtes invité à ajouter un module de routage angulaire lors de la configuration de votre projet ci-dessus.
Ajouter un matériau angulaire et des graphiques Ng2 à votre projet
Angular Material est livré avec divers schémas pour générer une variété de composants utiles tels que des carnets d'adresses, des arbres, des tableaux, la navigation, etc. Pour ajouter un matériau angulaire à votre projet, exécutez:
ng add @ angular / material Choisissez un thème parmi les options fournies dans les invites suivantes. Ensuite, vous serez invité à choisir d’ajouter des styles de typographie et des animations de navigateur Angular Material. Vous n’avez pas besoin de ceux-ci et pourriez simplement répondre non.
Ensuite, vous devrez installer ng2-charts. ng2-charts nécessite charts.js comme dépendance. Pour installer ng2-charts, exécutez:
npm install ng2-charts --save Puis installez charts.js:
npm install chart.js --save Pour accéder aux graphiques, ajoutez le ] ChartsModule vers les importations de AppModule .
import {ChartsModule} depuis 'ng2-charts';
@NgModule ({
importations: [
…
ChartsModule,
…
]
}) Enfin, installez les schémas ng2-charts en tant que dépendance dev car ils ne sont pas livrés avec ng2-charts par défaut.
npm install --save-dev ng2-charts-schematics Génération d'un composant de navigation
Tout d'abord, nous devrons ajouter un composant de navigation pour aider les utilisateurs à naviguer confortablement dans l'application. La navigation doit contenir des liens vers le tableau de bord et d'autres pages qui feront partie du panneau d'administration. Le matériau angulaire fournit un schéma qui génère un composant de navigation. Nous nommerons ce composant nav . L'ajout d'une navigation latérale à l'application se fait en exécutant:
ng generate @ angular / material: navigation nav Pour lier d'autres routes dans la navigation, utilisez la directive routerLink et changez le nom de la page dans la barre d'outils en fonction de l'itinéraire emprunté par l'utilisateur.
// nav.component.ts
...
menuItems = ['dashboard', ’sales', 'orders', 'customers', 'products'];
...
{{élément | titlecase}}
... Pour voir ce composant, ajoutez-le à app.component.html .
Voici à quoi ressemble le NavComponent .
Puisque le nav sera être affiché à côté d'autres composants, l'ajout d'un routeur-sortie aiderait à basculer entre les autres composants différents. Dans le modèle nav.component.html juste après la fermeture remplacez le commentaire par
...
...
Dans les captures d'écran qui suivent dans cet article, ce composant de navigation sera omis afin de mieux mettre en évidence le tableau de bord que nous allons générer pour les besoins du didacticiel. Si vous suivez tout en créant ce tableau de bord, la navigation apparaîtra toujours comme illustré ci-dessus dans votre navigateur avec le tableau de bord à l'intérieur.
Générer le tableau de bord
La partie la plus importante du tableau de bord est sa disposition. Il doit contenir tous les composants mentionnés précédemment et être réactif lorsqu'il est affiché sur différents appareils. Pour générer la disposition du tableau de bord, vous devez exécuter le schéma @ angular / material: dashboard . Il générera un composant de tableau de bord réactif. Transmettez le nom préféré de votre tableau de bord au schéma. Dans cet exemple, appelons-le dash .
ng generate @ angular / material: dashboard dash Pour afficher le tableau de bord nouvellement généré dans le composant de navigation, ajoutez un itinéraire pour celui-ci au routeur.
// app-routing.module.ts
import {DashComponent} depuis './dash/dash.component';
routes const: Routes = [{ path: 'dashboard', component: DashComponent }];
@NgModule ({
importations: [RouterModule.forRoot(routes)],
exportations: [RouterModule]
}) Une fois terminé, pour voir les résultats, exécutez npm start et dirigez-vous vers localhost: 4200 / dashboard . Vous devriez voir ceci:
Le schéma génère quatre cartes dans le modèle et les affiche dans une grille réactive. Le CDK Angular Material utilise le package Layout pour styliser cette grille de cartes réactive. L'utilitaire BreakpointObserver du package Layout évalue les requêtes multimédias et modifie l'interface utilisateur en fonction de celles-ci. Il existe différents points d'arrêt disponibles, mais dans le composant généré, seules deux catégories sont prises en compte. Le Breakpoints.Handset et d'autres requêtes qui ne correspondent pas. Le package Layout spécifie 14 états de point d'arrêt que vous pouvez utiliser pour personnaliser la réactivité de votre tableau de bord.
// dashboard.component.js
...
cartes = this.breakpointObserver.observe (Breakpoints.Handset) .pipe (
carte (({matches}) => {
if (correspond) {
...
}
...
})
); Pour revenir au tableau de bord, puisque quatre cartes récapitulatives, quatre graphiques et un tableau seront sur le tableau de bord, nous avons besoin de neuf cartes au total. Breakpoints.Handset et Breakpoints.Tablet correspondances seront affichées dans une grille à une colonne où:
- Les quatre cartes récapitulatives couvriront une ligne.
- Les graphiques couvriront deux lignes.
- Le tableau s'étendra sur quatre lignes.
Non- Breakpoints.Handset et non- Breakpoints.Tablet correspondances s'affichent dans quatre colonnes où:
- Le quatre fiches récapitulatives couvriront une ligne et une colonne.
- Les graphiques couvriront deux lignes et deux colonnes.
- Le tableau s'étendra sur quatre lignes et quatre colonnes.
Il devrait ressembler à la capture d'écran ci-dessous en non – Breakpoints.Handset et non- Breakpoints.Tablet correspond. Sur Breakpoints.Handset et Breakpoints.Tablet correspond, tout s'affichera dans une seule colonne.
Créer un composant de carte
Dans le composant de tableau de bord, toutes les cartes sont générées par itération. Pour éviter les répétitions, lors de l'ajout de tous les nouveaux composants, nous créerons un composant de carte réutilisable. Le composant carte acceptera un titre comme entrée et utilisera ng-content pour ajouter dynamiquement le reste du contenu. Pour créer le composant de la carte, exécutez:
ng gc card -m app --style css À partir du modèle de composant de tableau de bord, nous allons simplement prendre le balisage inclus dans la balise
{{title}}
Pour ajouter le titre comme entrée à la carte:
// card.component.ts
import {Component, Input} de '@ angular / core';
...
classe d'exportation CardComponent {
@Input () titre: chaîne;
...
} Pour styliser la carte:
/ * card.component.css * /
.more-button {
position: absolue;
haut: 5px;
à droite: 10px;
}
.dashboard-card {
position: absolue;
haut: 15px;
gauche: 15px;
à droite: 15px;
en bas: 15px;
}
.dashboard-card-content {
text-align: centre;
flex-grow: 1;
affichage: flex;
flex-direction: colonne;
align-items: centre;
hauteur max: 100%;
justify-content: centre;
align-items: étirer;
}
mat-card {
affichage: flex;
flex-direction: colonne;
} Ajout de cartes au tableau de bord
Puisque les éléments du tableau de bord seront ajoutés individuellement et non par itération, le composant de tableau de bord doit être modifié pour en tenir compte. Dans dashboard.component.ts supprimez la propriété cards et remplacez-la par une propriété cardLayout . La variable cardLayout définira le nombre de colonnes pour la liste de grille de matériaux et le nombre de lignes et de colonnes que couvrira chacune des cartes du tableau de bord. Breakpoints.Handset et Breakpoints.Tablet les correspondances de requête s'affichent dans 1 colonne et celles qui ne correspondent pas s'affichent dans 4 colonnes.
// dashboard.component.js
...
cardLayout = this.breakpointObserver.observe (Breakpoints.Handset) .pipe (
carte (({matches}) => {
if (correspond) {
revenir {
colonnes: 1,
miniCard: {cols: 1, rows: 1},
graphique: {cols: 1, rows: 2},
tableau: {cols: 1, lignes: 4},
};
}
revenir {
colonnes: 4,
miniCard: {cols: 1, rows: 1},
graphique: {cols: 2, rows: 2},
tableau: {cols: 4, rows: 4},
};
})
);
... Dans le modèle dash.component.html remplacez les valeurs colspan et rowspan de mat-grid-tile et la propriété cols de l'élément mat-grid-list .
Dashboard
Mini Card Content Here
Chart Content Here
Table Content Here
Le tableau de bord finira par ressembler exactement à la capture d'écran la plus récente ci-dessus.
Génération des graphiques
Les quatre graphiques dont nous avons besoin pour le tableau de bord sont:
- Un graphique radar des produits de unité vendue.
- Un diagramme à secteurs des ventes par source de trafic.
- Un diagramme à barres des sessions de la boutique en ligne.
- Un graphique linéaire des ventes sur l'année.
Similaire à la création du tableau de bord, génération de composants graphiques implique l'exécution d'un schéma. En utilisant les schémas ng2-charts, générez les quatre graphiques différents. Nous les placerons dans un dossier appelé graphiques. Exécutez ng generate ng2-charts-schematics: .
ng generate ng2-charts-schematics: radar charts / product-sales-chart
ng generate ng2-charts-schematics: camemberts / sales-traffic-chart
ng generate ng2-charts-schematics: graphiques linéaires / graphique-ventes-annuelles
ng generate ng2-charts-schematics: histogrammes / store-sessions-chart Après avoir exécuté ces commandes, les quatre composants du graphique sont générés et sont remplis avec des exemples de données prêts à être affichés. En fonction des données que vous souhaitez afficher, choisissez les graphiques qui correspondent le mieux à vos besoins en matière de visualisation des données. Pour chacun des graphiques générés ci-dessus, ajoutez la classe chartContainer aux div s qui renferment l'élément canvas dans les modèles de graphique.