Créer un tableau de bord avec des graphiques dans Kendo UI pour Angular ListView

Configurons un tableau de bord avec une liste de graphiques pour un client, y compris la pagination, les options de boutons, de chiffres ou de défilement, et une notification lorsqu’il n’y a plus d’éléments à afficher. Kendo UI pour Angular ListView en fera un jeu d’enfant !

Lorsque nous construisons des applications et souhaitons afficher une liste de données, les tableaux et les grilles sont de bonnes solutions. Cependant, nous souhaitons parfois une conception sophistiquée et personnalisée pour afficher les données. La solution la plus fréquemment utilisée consiste à utiliser @for ou *ngFor pour les nostalgiques d’Angular.

Le @for et *ngFor Les directives sont puissantes, nous permettant de parcourir une liste d’éléments et d’utiliser nos conceptions ou composants personnalisés. C’est la principale raison pour laquelle la plupart d’entre nous les utilisons. Cependant, ils peuvent parfois être un peu limitatifs.

Que se passe-t-il lorsque nous voulons mettre en évidence le premier ou le dernier élément, implémenter la pagination ou ajouter un défilement ? Dans de tels cas, nous devons implémenter toutes ces fonctionnalités nous-mêmes ou utiliser une alternative rapide, simple et indolore. 😃

Comme toujours, la meilleure façon d’apprendre est de montrer un scénario réel.

Scénario

Nous avons été embauchés pour créer une démo pour un nouveau client. Le client souhaite afficher des informations dans un tableau de bord avec une liste de graphiques. Ces graphiques montreront des données sur l’utilisation des frameworks par pays.

Le client souhaite visualiser les données avec des graphiques mais aussi avec une pagination, avec des options de boutons, de chiffres ou de défilement, et avertir l’utilisateur lorsqu’il n’y a plus d’éléments à afficher. Et encore une chose… ils veulent la démo dès que possible !

Ma première idée est d’utiliser Progress Kendo UI pour Graphiques angulaires pour visualiser les informations et les combiner avec @for pour parcourir les données fictives. Avec cette première approche, je pense que nous pouvons commencer.

Configurer le projet

Tout d’abord, configurez l’application Angular avec la commande ng new listview-charts.

ng new listview-charts
cd listview-charts
npm install

(Lors de la génération, j’ai choisi CSS pour le format de style et j’ai refusé SSG/Prerendering pour l’instant.)

Ensuite, installez le Interface utilisateur Kendo pour angulaire Graphiques à l’aide d’une commande schématique pour enregistrer :

ng add @progress/kendo-angular-charts

Pour utiliser toute la puissance de Kendo UI pour Angular, téléchargez un essai gratuit. Après cela, activez la licence en copiant le Kendo UI License.txt fichier dans le projet, renommez-le kendo-ui-license.txt et exécutez les commandes suivantes :

npm install –save @progress/kendo-licensing
npx kendo-ui-license activate

OK, nous sommes prêts à travailler sur le projet ! Commençons !

Les données simulées

Tout d’abord, ouvrez le projet avec votre éditeur préféré et copiez l’exemple données.ts
déposer dans src/app/data/. Il contient des exemples d’informations fictives pour les graphiques :

export const frameworkUsage = [
  {
    country: 'France',
    data: [
      { framework: 'Angular', usage: 125, color: '#DD0031' },
      { framework: 'Vue', usage: 389, color: '#4FC08D' },
    ],
  },
  {
    country: 'Canada',
    data: [
      { framework: 'React', usage: 421, color: '#61DAFB' },
      { framework: 'Ember', usage: 96, color: '#F05E1B' },
    ],
  },....

Parfait, nous avons les données fictives, il est donc temps de créer le composant Chart Stats !

Créer un composant de statistiques de graphique

Le composant Chart Stats fonctionnera comme un wrapper pour le graphique de l’interface utilisateur de Kendo. Il nous suffit de transmettre les données en entrée pour les lier au composant kendo-chart. Tout d’abord, créez un nouveau composant à l’aide de la CLI angulaire en exécutant la commande ng g c components/chart-stats dans la borne.

ng g c components/chart-stats
CREATE src/app/components/chart-stats/chart-stats.component.css (0 bytes)
CREATE src/app/components/chart-stats/chart-stats.component.html (26 bytes)
CREATE src/app/components/chart-stats/chart-stats.component.spec.ts (621 bytes)
CREATE src/app/components/chart-stats/chart-stats.component.ts (253 bytes)

Ouvrir chart-stats.component.ts et importer le ChartModule pour accéder à tous les composants fournis par Kendo UI Charts. Nous allons utiliser un Graphique de l’interface utilisateur Kendo de la colonne de typequi nécessite trois champs : données, champ et catégorie. Je vais donc ajouter trois propriétés d’entrée :

• data: fournit un tableau de données
• field: le champ à lier dans le composant Kendo UI Chart
• category: définit le champ de données utilisé pour les étiquettes de catégorie (par exemple, utilisation) dans le graphique.

Le code dans chart-stats.component.ts ça ressemble à ça :

import { Component, input } from '@angular/core';
import { ChartModule } from '@progress/kendo-angular-charts';

@Component({
  selector: 'app-chart-stats',
  standalone: true,
  imports: [ChartModule],
  templateUrl: './chart-stats.component.html',
  styleUrl: './chart-stats.component.css',
})
export class ChartStatsComponent {
  data = input<Array<any>>([]);
  field = input<string>('field');
  category = input<string>('category');
}

Ouvrir chart-stats.component.html et ajoutez trois composants de ChartModule: kendo-chart, kendo-chart-series et kendo-chart-series-item.

Dans kendo-chart-series-itemdéfinissez le type sur column et liez les données, le champ et la catégorie avec les propriétés du signal.

N’oubliez pas de lire la valeur du signal entre parenthèses (). En savoir plus sur Signaux ici.

<kendo-chart>
  <kendo-chart-series>
    <kendo-chart-series-item
      type="column"
      [data]="data()"
      [field]="category()"
      [categoryField]="field()"
    >
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

Afficher les graphiques avec @for

Il est temps de créer le tableau de bord. Ouvrir app.component.ts et importer et enregistrer le ChartStatsComponent dans la section importation. Étant donné que les données fictives fournissent une liste d’utilisation des données par pays, déclarez une variable locale countries et réglez-le avec le frameworkUsage données simulées.

Le code ressemble à ceci :

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { frameworkUsage } from './data/data';
import { ChartStatsComponent } from './components/chart-stats/chart-stats.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet,ChartStatsComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  title = 'listview-charts';
  countries = frameworkUsage;
}

Ensuite, ouvrez app.component.html et utiliser le app-chart-stats composant pour afficher les graphiques de chaque pays. Vous pouvez utiliser l’Angulaire @for directive pour parcourir le countries tableau et lier les données au app-chart-stats composant.

Au sein du *@forajoutez un nouveau div avec la classe country et utilisez l’interpolation pour lier country.country pour afficher le nom.

Le code dans app.component.html ça ressemble à ça :

 @for (country of countries; track country) {
    <div class="country">
      <h2>{{ country.country }}</h2>
      <app-chart-stats
        [data]="country.data"
        field="framework"
        category="usage"
      />
    </div>
  }

Désormais, notre tableau de bord est configuré pour afficher les graphiques de chaque pays à l’aide du ChartStatsComponent.

Ouvrir styles.css et ajoutez le .country Classe CSS avec les règles CSS suivantes :

.country {
  border: 1px solid black;
  margin: 1rem;
  padding: 1rem;
}

Enregistrez les modifications et voilà ! Nous avons le tableau de bord avec une liste de graphiques !

Oui, nous avons un joli format pour visualiser les données, mais quelques fonctionnalités manquent, comme la pagination, le défilement et autres. Commençons par la pagination.

Nous allons commencer par créer le pagination.service pour gérer la logique de pagination. Le service de pagination calculera les éléments à afficher en fonction de la page actuelle et de la taille de la page.

Tout d’abord, exécutez la commande suivante pour générer à l’aide de la CLI angulaire :

ng g s services/pagination
CREATE src/app/services/pagination.service.spec.ts (377 bytes)
CREATE src/app/services/pagination.service.ts (139 bytes)

Créez une interface pour définir la structure du résultat de la pagination. Cette interface comprend les éléments de la page actuelle, le nombre total d’éléments, le numéro de la page actuelle et le nombre total de pages.

Pour gagner du temps, je fournirai l’interface PaginationResult, ouvrirai le src/app/services/pagination.service.ts et collez-le dans le fichier.

export interface PaginationResult {
  items: T[];
  totalItems: number;
  currentPage: number;
  totalPages: number;
}

Dans ce même fichier (pagination.service.ts) implémente cette fonctionnalité dans le PaginationService classe. Dans ce service, nous allons fournir une méthode appelée paginateData qui découpe le tableau de données en fonction de la page actuelle et de la taille de la page, puis renvoie les résultats paginés.

@Injectable({ providedIn: 'root' })
export class PaginationService {
  paginateData(data: any, page: number, pageSize: number): PaginationResult {
    const totalItems = data.length;
    const totalPages = Math.ceil(totalItems / pageSize);
    const startIndex = (page - 1) * pageSize;
    const endIndex = Math.min(startIndex + pageSize, totalItems);

    return {
      items: data.slice(startIndex, endIndex),
      totalItems,
      currentPage: page,
      totalPages,
    };
  }
}

Parfait! Notre prochaine étape consiste à utiliser le pagination.service dans le app.component.ts. Faisons-le!

Mettre à jour le composant de l’application

Modifier app.component.ts. Injectez d’abord le PaginationService pour gérer la pagination. Parce que nous devons continuer à suivre toutes les données et fournir uniquement les éléments de la page actuelle, nous devons diviser les données.

Stockez les données fictives dans une nouvelle variable appelée dataServer:

 export class AppComponent implements OnInit {
 dataServer = frameworkUsage;

Notez que nous implémentons OnInit sur ce composant (à utiliser prochainement). Assurez-vous de l’ajouter à notre importation OnInit de @angular/core en haut du composant.

Ensuite, initialisez countries avec un tableau vide et configurez le pageSize et currentPage.

countries: any = [];
currentPage = 1;
pageSize = 3;

Créer une nouvelle méthode bindData() pour envoyer la configuration et les données au service de pagination, et renvoyer le paginationResult objet et lier les éléments à l’objet countries variables.

bindData() {
 const paginatedResult = this.paginationService.paginateData(
   this.dataServer,
   this.currentPage,
   this.pageSize,
 );

 this.countries = paginatedResult.items;
}

Mettre en œuvre le ngOnInit hooks de cycle de vie pour lier les données initiales.

ngOnInit(): void {
 this.bindData();
}

Pour se déplacer entre les pages, nous créons une nouvelle méthode nextPage(). Cela augmente le currentPage valeur et diminutions prevPagepuis rappelle à nouveau le bindData() méthode.

nextPage() {
    this.currentPage = this.currentPage + 1;
    this.bindData();
  }

Le code final dans app.component.ts le code ressemble à :

export class AppComponent implements OnInit {
  dataServer = frameworkUsage;
  countries: any = [];
  currentPage = 1;
  pageSize = 3;
  paginationService = inject(PaginationService);

  ngOnInit(): void {
    this.bindData();
  }

  bindData() {
    const paginatedResult = this.paginationService.paginateData(
      this.dataServer,
      this.currentPage,
      this.pageSize,
    );

    this.countries = paginatedResult.items;
  }

 prevPage() {
    this.currentPage = this.currentPage - 1;
    this.bindData();
  }

  nextPage() {
    this.currentPage = this.currentPage + 1;
    this.bindData();
  }
}

La dernière étape de la pagination consiste à ouvrir le app.component.html. Ajoutez deux boutons, prev et next. Dans le next bouton, liez l’événement click à nextPage fonction:

<button (click)="prevPage()">next</button>
<button (click)="nextPage()">next</button>
  @for (country of countries; track country) {
    <div class="country">
      <h2>{{ country.country }}</h2>
      <app-chart-stats
        [data]="country.data"
        field="framework"
        category="usage"
      />
    </div>
  }

Ouf… nous arrivons tout juste à la pagination. Pourquoi ne pas prendre un raccourci pour obtenir les mêmes fonctionnalités et bien plus encore avec seulement quelques lignes de code en passant à Kendo UI pour Vue de liste angulaire? Cela facilitera notre travail en simplifiant les tâches telles que le défilement, la pagination et même la mise en évidence d’éléments spécifiques.

Interface utilisateur Kendo pour Angular ListView

Kendo UI pour Angular ListView nous permet d’afficher une collection d’éléments dans une liste hautement personnalisable. Il est conçu pour gérer des ensembles de données complexes et fournit une prise en charge intégrée des fonctionnalités dont nous avons besoin telles que :

• Pagination: Gérez facilement de grands ensembles de données en les divisant en pages.
• Défilement: implémentez un défilement fluide et une virtualisation pour afficher efficacement de grandes listes.
• Modèles d’articles: personnalisez la façon dont chaque élément de la liste est affiché à l’aide de modèles.

De plus, l’utilisation de Kendo UI pour Angular ListView apporte des fonctionnalités intégrées pour la pagination, le défilement et le rendu des éléments, réduisant ainsi le besoin d’implémentations personnalisées telles que la pagination, le service, le type, etc.

Profitons donc de toutes ces fonctionnalités et passons à Kendo UI pour Angular ListView.

Passer à Kendo UI pour Angular ListView

Accédez à nouveau au répertoire du projet et exécutez le ng add @progress/kendo-angular-listview schémas pour ajouter le Kendo UI ListView :

ng add @progress/kendo-angular-listview
✔ Determining Package Manager
  › Using package manager: npm
✔ Searching for compatible package version
  › Found compatible package version: @progress/kendo-angular-listview@16.4.0.
✔ Loading package information from registry
✔ Confirming installation
✔ Installing package
            @progress/kendo-theme-default already installed, skipping styles registration.
UPDATE package.json (1888 bytes)
✔ Packages installed successfully.

Au lieu d’utiliser le paginationServicenous remplaçons le PaginationResult avec le PagerSettings type fourni par Kendo UI. Cette configuration vous permet de contrôler facilement les paramètres de pagination, car le même Angular ListView gère tout : nous n’avons pas besoin du service ou d’une variable supplémentaire pour contenir l’intégralité des données. Attribuez donc le frameworkUsage des données simulées au pays. Ajoutons également quelques configurations PagerSettings. (Nous montrons les boutons précédent et suivant en réglant previousNext propriété et afficher le nombre total d’éléments avec pageSizeValues défini sur vrai.)

country = frameworkUsage;
   public pagerSettings: PagerSettings = {
    previousNext: true,
    pageSizeValues: true,
  };

Le code dans app.component.ts ressemble à :

import { Component, } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { frameworkUsage } from './data/data';
import { ChartStatsComponent } from './components/chart-stats/chart-stats.component';
import {
  ListViewModule,
  PagerSettings,
} from '@progress/kendo-angular-listview';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, ChartStatsComponent, ListViewModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
   country = frameworkUsage;
   public pagerSettings: PagerSettings = {
    previousNext: true,
    pageSizeValues: true,
  };
}

Remplacez @for par kendo-listview

Mettez à jour votre app.component.html pour utiliser le composant kendo-listview. Il faut lier certaines propriétés :

• [kendoListViewBinding]: Il lie les données au ListView. Il accepte un tableau d’éléments que vous souhaitez afficher. Dans ce cas, c’est forcément countryqui est notre liste de données.
• kendoListViewItemTemplate: Il s’agit d’un modèle angulaire utilisé pour définir la manière dont chaque élément du ListView doit être rendu. Il permet de personnaliser l’affichage des éléments de la liste – dans notre cas, le h3 avec le titre et le app-chart-stats.
• let-dataItem="dataItem": Ceci donne accès aux données de l’élément actuel.
• let-isLast: Cette variable fait partie du contexte du modèle Kendo ListView et est utilisée pour déterminer si l’élément en cours de rendu est le dernier élément de la liste. Nous pouvons utiliser cette variable pour afficher des messages ou des styles spéciaux pour le dernier élément, comme afficher un message « Vous avez atteint la fin de la liste ».
• [pageable]: Cette propriété configure les paramètres de pagination du ListView, afin d’afficher des éléments tels que les boutons précédent/suivant et le nombre de boutons de page à afficher.
• [pageSize]: Spécifie le nombre d’éléments à afficher par page.

Nous avons donc tout pour notre démo dans un seul composant et seulement quelques lignes. Le code dans votre app.component.html devrait ressembler à :

<kendo-listview
    [height]="550"
    [kendoListViewBinding]="country"
    [pageable]="pagerSettings"
    [pageSize]="pageSize"
  >
    <ng-template
      kendoListViewItemTemplate
      let-dataItem="dataItem"
      let-isLast="isLast"
    >
      <h3>{{ dataItem.country }}</h3>
      @if (isLast) {
        <p>You reach the limit</p>
      }
      <app-chart-stats
        [data]="dataItem.data"
        field="framework"
        category="usage"
      />
    </ng-template>
  </kendo-listview>

Enregistrez les modifications et tada !!!

Nous avons notre tableau de bord en un rien de temps sans avoir besoin d’implémenter une logique complexe et couvrant toutes les fonctionnalités de notre démo !

Résumer

Nous avons appris à créer un tableau de bord en utilisant @for avec pagination. Initialement, la directive @for permet d’utiliser facilement des composants personnalisés, mais lorsqu’il s’agit d’ajouter des fonctionnalités telles que la pagination et le défilement, leur implémentation manuelle peut devenir complexe et nécessiter plus de code.

Passer à l’interface utilisateur Kendo pour Angular ListView est une excellente option car elle est livrée avec des fonctionnalités intégrées telles que la pagination, le défilement, les modèles d’éléments, etc. Cela permet de gagner du temps sur les implémentations personnalisées, simplifiant et accélérant le développement.

Et n’oubliez pas : Kendo UI pour Angular est livré avec un essai gratuit de 30 jours. Alors allez-y…

Essayez maintenant