Catégories
Astuces et Design

Créez un tableau de bord réactif avec un matériau angulaire et des graphiques ng2 – Smashing Magazine

A propos de l'auteur

Zara Cooper est une développeur de logiciels et une rédactrice technique qui aime partager ce qu'elle apprend en tant que développeur avec les autres. Quand elle a du temps à perdre, elle aime…
Plus à propos
Zara

Les schémas dans Angular 9 sont des générateurs de code qui peuvent créer des composants et des modèles dans des projets à l'aide de modèles et de mises en page prédéterminés. Dans cet article, Zara Cooper explique comment tirer parti des schémas dans Angular Material et ng2-charts pour réduire considérablement le temps et le travail nécessaires à la création d'un tableau de bord.

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 Angular Material et ng2-charts, vous pouvez tirer parti des schémas pour réduire l'effort et le temps que vous pourriez consacrer à la création 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'une boutique en ligne vendant des articles en cuir comme des sacs, des portefeuilles, des porte-clés, etc. Le propriétaire du magasin souhaite 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, entre autres.

Nous allons créer un tableau de bord pour afficher ces informations et aider le propriétaire du magasin à les analyser. 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 de la semaine.

Conditions préalables

Pour suivre, vous devez avoir installé Angular CLI. Si vous ne l'avez pas installé, vous pouvez découvrir comment l'obtenir sur 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 cela. 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'en avez pas besoin et pourriez simplement répondre non.

Ensuite, vous devrez installer ng2-charts. ng2-charts nécessite charts.js en tant que dépendance. Pour installer ng2-charts, exécutez:

npm install ng2-charts --save

Ensuite, installez charts.js:

npm install chart.js --save

Pour accéder aux graphiques, ajoutez le ChartsModule à la AppModuleImportations de.

import { ChartsModule } from 'ng2-charts';

@NgModule({
  imports: (
   …
   ChartsModule,
   …
)
})

Enfin, installez les schémas ng2-charts en tant que dépendance de développement car ils ne sont pas livrés avec ng2-charts par défaut.

npm install --save-dev ng2-charts-schematics

Générer un composant de navigation

Tout d'abord, nous devons 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 itinéraires dans la navigation, utilisez le routerLink directive et modifiez 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');

Pour voir ce composant, ajoutez-le à app.component.html.


C'est ce que le NavComponent ressemble à.

Composant de navigation
Composant de navigation (grand aperçu)

Étant donné que la navigation sera affichée à côté d'autres composants, l'ajout d'un router-outlet cela aiderait à basculer entre les autres composants différents. dans le nav.component.html modèle, juste après la fermeture , remplace le commenter avec .



   ...
   
     
       ...
     
     
   
 

Dans les captures d'écran qui suivent dans cet article, ce composant de navigation sera omis pour mieux mettre en évidence le tableau de bord que nous allons générer dans le cadre 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 présentation du tableau de bord, vous devez exécuter le @angular/material:dashboard schématique. 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 ce cas, nommons-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 vers le routeur.

// app-routing.module.ts
import { DashComponent } from './dash/dash.component';

const routes: Routes = ({ path: 'dashboard', component: DashComponent });

@NgModule({
  imports: (RouterModule.forRoot(routes)),
  exports: (RouterModule)
})

Une fois terminé, pour voir les résultats, exécutez npm start et dirigez-vous vers localhost:4200/dashboard. Vous devriez voir ceci:

composant de tableau de bord généré
Composant de tableau de bord généré (grand aperçu)

Le schéma génère quatre cartes dans le modèle et les affiche dans une grille réactive. Le CDK de matériau angulaire utilise le Layout package pour styliser cette grille de cartes réactive. le BreakpointObserver utilité du Layout package é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 Layout package 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
...
cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
    map(({ matches }) => {
      if (matches) {
        ...
      }
      ...
    })
  );

Pour en 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 les correspondances s'affichent 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 les matchs s'afficheront dans quatre colonnes où:

  • Les quatre cartes 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.

Cela devrait ressembler à la capture d'écran ci-dessous en non-Breakpoints.Handset et non-Breakpoints.Tablet allumettes. Sur Breakpoints.Handset et Breakpoints.Tablet correspond, tout s'affichera dans une seule colonne.

composant de tableau de bord avec des cartes supplémentaires
Composant de tableau de bord avec des cartes supplémentaires (grand aperçu)

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 carte, exécutez:

ng g c card -m app --style css

À partir du modèle de composant de tableau de bord, nous allons simplement prendre le balisage inclus dans le étiquette et placez-le dans le modèle de carte:



   
       
           {{title}}
           
           
               
               
           
       
   
   
       
   

Pour ajouter le titre comme entrée sur la carte:

// card.component.ts
import { Component, Input } from '@angular/core';

...

export class CardComponent{
 @Input() title: string;


...
}

Pour styliser la carte:

/*card.component.css*/
.more-button {
   position: absolute;
   top: 5px;
   right: 10px;
}

.dashboard-card {
   position: absolute;
   top: 15px;
   left: 15px;
   right: 15px;
   bottom: 15px;
}


.dashboard-card-content {
   text-align: center;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   max-height: 100%;
   justify-content: center;
   align-items: stretch;
}

mat-card {
   display: flex;
   flex-direction: column;
}

Ajout de cartes au tableau de bord

Étant donné que 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, retirer le cards propriété et remplacez-le par un cardLayout propriété à la place. le cardLayout variable définira le nombre de colonnes pour la liste de grille de matériaux et le nombre de lignes et de colonnes que chacune des cartes du tableau de bord couvrira. 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(
   map(({ matches }) => {
     if (matches) {
       return {
         columns: 1,
         miniCard: { cols: 1, rows: 1 },
         chart: { cols: 1, rows: 2 },
         table: { cols: 1, rows: 4 },
       };
     }

    return {
       columns: 4,
       miniCard: { cols: 1, rows: 1 },
       chart: { cols: 2, rows: 2 },
       table: { cols: 4, rows: 4 },
     };
   })
 );

...

dans le dash.component.html modèle, remplacez le colspan et rowspan valeurs de mat-grid-tile éléments et le cols propriété de la mat-grid-list élément.


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 liée ci-dessus.

Générer les graphiques

Les quatre graphiques dont nous avons besoin pour le tableau de bord sont:

  • Une carte radar des produits par unité vendue.
  • Un graphique à secteurs des ventes par source de trafic.
  • Un graphique à barres des sessions de la boutique en ligne.
  • Un graphique linéaire des ventes sur l'année.

Semblable à la création du tableau de bord, la génération de composants de graphique 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. Courir ng generate ng2-charts-schematics: .

ng generate ng2-charts-schematics:radar charts/product-sales-chart
ng generate ng2-charts-schematics:pie charts/sales-traffic-chart
ng generate ng2-charts-schematics:line charts/annual-sales-chart 
ng generate ng2-charts-schematics:bar charts/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 le chartContainer classe à la divs qui entourent le canvas élément dans les modèles de graphique.

...

Ensuite, ajoutez ce style à styles.css afin qu'ils puissent être accessibles à tous les composants du graphique.

/*styles.css*/
...

.chartContainer canvas {
    max-height: 250px;
    width: auto;
}

.chartContainer{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

Ajout de données aux graphiques

Les composants de graphique générés sont fournis avec des exemples de données déjà connectés. Si vous disposez de services préexistants qui fournissent vos propres données, vous pouvez ajouter ces données aux composants de graphique. Les graphiques prennent des étiquettes pour l'axe des x, des données ou des ensembles de données, un type de graphique, des couleurs, une légende ainsi que d'autres options de personnalisation. Pour fournir les données et les étiquettes aux graphiques, créez un service qui récupérera les données d'une source de votre choix et les renverra sous une forme acceptée par les graphiques. Par exemple, le AnnualSalesChartComponent reçoit son jeu de données et ses étiquettes du SalesServiceS getSalesByMonth méthode qui renvoie un tableau de ventes pour chaque mois de l'année en cours. Vous pouvez trouver ce service ici et les données qu'il renvoie ici. Injectez le service en tant que propriété privée dans le AnnualSalesChartComponent constructeur. Appelez la méthode qui renvoie les données de graphique requises à partir du service dans le ngOnInit crochet de cycle de vie.

// annual-sales-chart.component.ts
import { SalesService } from ’src/app/sales/sales.service';


...


export class AnnualSalesChartComponent implements OnInit {
  public salesChartData: ChartDataSets() = (
   { data: (), label: 'Total Sales' },
 );

 public salesChartLabels: Label() = ();
  ...

  constructor(private salesService: SalesService) { }
  ngOnInit() {
   this.salesService.getSalesByMonth().subscribe({
     next: salesItems => {
       salesItems.forEach(li => {
         this.salesChartData(0).data.push(li.revenue);
         this.salesChartLabels.push(li.month);
       });
     },
    ...
   });
 }
}

Ajout de graphiques au tableau de bord

L'étape suivante consiste à ajouter les graphiques au tableau de bord, en dash.component.html. Voici à quoi cela ressemble:


...



   
       
   


   
       
   


   
       
   


   
       
   


...

Voici à quoi ressemble le tableau de bord réactif résultant.

tableau de bord avec graphiques
Tableau de bord avec graphiques (grand aperçu)

Générer une table

Nous ajouterons un tableau des commandes pour donner au propriétaire de la boutique un aperçu des dernières commandes passées et de leur état. Pour générer le composant de table des commandes, exécutez le schéma:

ng generate @angular/material:table orders-table

Cela générera un composant de table qui ressemblera à ceci.

table générée par le schéma de matériau angulaire
Tableau généré par le schéma de matériau angulaire (Grand aperçu)

Les tableaux comportant de nombreuses colonnes peuvent être difficiles à rendre réactifs pour les vues du combiné et de la tablette. Lors de l'ajout du tableau à une carte, faites-le défiler horizontalement afin que toutes les données puissent être affichées correctement et ne soient pas obstruées. Vous pouvez le faire en ajoutant le style ci-dessous à votre composant de tableau:


...
/*table.component.css*/

...

.small-table{
  overflow-x: scroll !important;
}

Pour ajouter le tableau au composant de tableau de bord:


Id {{row.id}} Date {{row.date | date }} Name {{row.name}} Order Total {{row.orderTotal | currency}} Payment Mode {{row.paymentMode}} Status {{row.status}}

Une fois les données ajoutées au tableau, voici à quoi ressemblera le tableau de bord:

tableau de bord avec graphiques et tableau
Tableau de bord avec graphiques et tableau (grand aperçu)

Création d'un composant de mini-carte

Tout ce qui reste pour compléter le tableau de bord est de remplir les quatre petites cartes qui se trouvent en haut. Le fait d'avoir des cartes récapitulatives plus petites dans le tableau de bord facilite la mise en évidence de brèves informations qui n'ont pas besoin de graphiques ou de tableaux entiers. Dans cet exemple, les quatre mini-cartes afficheront le total des ventes, la valeur moyenne de la commande, le nombre total de commandes et le nombre de clients qui ont visité le magasin pour la journée. C'est juste un exemple. Ces mini-cartes ne peuvent pas être générées comme avec la navigation, la disposition du tableau de bord, les graphiques et le tableau. Ils n'ont pas de schémas. Ci-dessous, nous verrons brièvement comment les créer. Bien que nous allions ajouter des données spécifiques à l'exemple, vous pouvez leur ajouter ce que vous voulez ou décider de les supprimer complètement. Pour commencer, générez le mini-card composant, exécutez:

ng g c mini-card -m app --style css

Vous pouvez trouver le modèle du composant lié ici et son style ici. Ce composant a huit propriétés d'entrée que vous pouvez découvrir comment ajouter ici. Pour obtenir des données sur les composants de la mini-carte, injectez le service qui leur fournit des données dans le DashComponent constructeur. Attribuer les données reçues du service à une propriété du DashComponent. Dans ce cas, nous obtiendrons des données du StoreSummaryService et attribuez-le au miniCardData propriété. Voici comment:

// dash.component.ts
export class DashComponent implements OnInit{
...
 miniCardData: StoreSummary();

 constructor(private breakpointObserver: BreakpointObserver, private summaryService: StoreSummaryService) {}

 ngOnInit() {
   this.summaryService.getStoreSummary().subscribe({
     next: summaryData => {
       this.miniCardData = summaryData;
     }
   });
 } 
}

Pour ajouter le mini-cards au composant dash et les remplir avec les données du service:


...


   
     
   

...

La capture d'écran ci-dessous montre à quoi ressemblera le tableau de bord avec les mini-cartes remplies.

tableau de bord avec graphiques, tableaux et mini-cartes
Tableau de bord avec graphiques, tableaux et mini-cartes. (Grand aperçu)

Mettre tout ensemble

En fin de compte, le modèle de composant de tableau de bord doit contenir:


Dashboard

Voici ce que contient le tableau de bord résultant.

tableau de bord complété
Tableau de bord terminé (grand aperçu)

Conclusion

La création de tableaux de bord implique une quantité considérable de travail et de planification. Une façon de les rendre plus rapides est d'utiliser les différents schémas fournis par Angular Material et ng2-charts. Avec ces schémas, l'exécution d'une commande générera un composant entièrement complet et peut entraîner un tableau de bord opérationnel assez rapidement. Cela vous laisse beaucoup plus de temps pour vous concentrer sur la création de services de données et leur ajout à vos composants de tableau de bord.

Si vous souhaitez en savoir plus sur certains des schémas fournis par Angular Material, visitez material.angular.io, et pour ceux fournis par ng2-charts, visitez leur site lié ici.

Éditorial fracassant(ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *