Génération de graphiques basés sur des données dans votre grille d'interface utilisateur Kendo

Dans ce didacticiel, voyez comment vous pouvez facilement générer une variété de graphiques en fonction des données de votre interface utilisateur Kendo pour Angular Grid.

Une question fréquente qui surgit des personnes utilisant Kendo UI pour Angular est de savoir comment elles peuvent fonctionner. avec les composants Grille et Graphique ensemble. Cela a du sens après tout, la grille peut afficher les données brutes et le graphique est un bon moyen de consommer visuellement lesdites données. Un scénario particulier qui nous est souvent demandé:

"Comment générer des graphiques avec la sélection actuelle dans une grille?"

Eh bien, je suis ici pour dire que c'est aussi simple que la tarte ie et tout ce dont vous avez besoin est une grille, un graphique, un composant de menu et peut-être un moule à tarte!

Dans cet article, je vais vous expliquer CETTE DÉMO KILLER et comment vous aussi vous pouvez atteindre une telle ✨ MAJESTÉ ✨ dans votre Interface utilisateur de Kendo pour Angular Grid! Pour suivre facilement, saisissez le code source et voyez ce que nous avons fait. Je vais couvrir les éléments importants pour la mise en place de ce type d'interaction entre nos composants!

Ce gif a été tiré de l'un de nos exemples d'applications que vous pouvez trouver ici: https://prgress.co/ ChartsSampleApp . Pour ceux qui souhaitent suivre le code source, voici un lien vers le référentiel GitHub: https://prgress.co/ChartsGitHub .

Lorsque vous sélectionnez une ligne sur cette grille et cliquez avec le bouton droit , un menu contextuel vous est proposé. Dans ce menu, vous verrez tous les types de graphiques que vous pouvez générer avec ces données.

Une fois que vous avez choisi un type de graphique, une boîte de dialogue apparaît avec les données choisies affiché sous forme de graphique!

Cet article va parcourir certaines des étapes qu'il faudra pour créer ce flux de travail. Nous allons commencer par ajouter un menu pour les types de graphiques sur clic droit. Ensuite, nous vous montrerons comment construire les différents graphiques lorsqu'ils sont sélectionnés. Plongeons et parcourons l'exemple d'application pour voir le type d'interaction sur lequel la démo se concentre!

Construire la plus belle des grilles

La première étape de cet incroyable voyage de Grille à Graphique est, bien sûr. la grille. Nous avons ajouté de nombreux éléments à cette Grille: des cases à cocher pour la sélection, des noms et des descriptions bien sûr, beaucoup d'autres éléments de données et une mini-Grille dans la dernière colonne! Vous pouvez personnaliser davantage les cellules et les colonnes de votre grille d'interface utilisateur Kendo en spécifiant le modèle utilisé. Consultez nos documents de modèle de grille pour plus de détails.

Passons en revue les "os" de notre grille pour voir comment nous avons réalisé cette disposition:

data.ts si vous souhaitez vérifier comment il est formaté.

SelectableSettings pour permettre aux utilisateurs de sélectionner la grille avec ou sans sélection de flèche (afin qu'ils puissent cliquer sur

Sélection persistante

Si vous remarquez le bac kendoGridSelectBy C'est ici que nous lions les éléments stockés que nous avons sélectionnés. Le selectedKeys est l'endroit où nous définissons la collection qui stocke nos articles sélectionnés. J'adore cette fonctionnalité! En savoir plus sur nos documents Persistance de la sélection .

Remarque: Un élément important à noter ici: lorsqu'un utilisateur modifie les éléments sélectionnés, la grille émet un événement selectionChange que nous sommes. en utilisant pour appeler onSelectionChange () qui stocke les nouveaux éléments sélectionnés pour la persistance! 1965

Les colonnes de notre grille

Voyons maintenant les autres colonnes que nous avons créées! La première consiste à créer des cases à cocher pour la sélection. Nous spécifions showSelectAll à true donc nous avons une case à cocher tout sélectionner disponible dans l'en-tête.

Suit ensuite le nom du stock, comme vous vous en doutez:

ng-template (Modèles angulaires pas nos propres modèles) pour personnaliser l'apparence! Beaucoup d'autres colonnes font aussi bien, comme vous le verrez ci-dessous.

fichier complet ici. ) Développez la flèche ci-dessous pour voir le balisage complet.

Une note sympa avec ces colonnes – la bibliothèque de graphiques est si flexible que nous pouvons même l'utiliser dans des graphiques plus petits dans la grille elle-même (voir la dernière colonne et son mini-graphique!). [19659005] ici dans nos documents .

Maintenant que nous avons nos données souhaitées dans la plus belle des grilles, nous sommes prêts à obtenir ces données sous forme de graphique! La première étape sera de créer un menu lorsque certains morceaux

public onCellClick (e: CellClickEvent): void { console.log (e.type, "J'ai été cliqué! Rude!"); }

Utilisation de cellClickEvent sur les cellules de grille

Avec la grille cellClickEvent vous avez deux types: cliquez sur et menu contextuel . Le premier, cliquez sur se déclenchera sur simple clic (ou entrez à partir du clavier). L'événement de clic du menu contextuel se déclenchera lors d'un clic droit. 1965

Nous pouvons maintenant saisir l'événement de clic (si cela s'est produit lors d'un clic droit) et créer un petit menu contextuel pour afficher nos options de graphique !! ? Pie, non?!

 public onCellClick (e: CellClickEvent): void {
            if (e.type === 'menu contextuel') {
                const originalEvent = e.originalEvent;
                originalEvent.preventDefault ();
                
            }
        } 

Prévention du défaut par clic droit

Nous avons également accès à l'événement de clic DOM qui a déclenché l'événement cellClick (appelé originalEvent ). Si nous le déconnectons dans la console, vous pouvez voir tout ce à quoi nous avons accès hors de ceci:

Nous saisissons l'originalEvent du clic droit et empêchons la valeur par défaut de événement. La valeur par défaut dans ce cas serait le menu du navigateur normal qui apparaît sur le clic droit:

consultez le dépôt ici!

Maintenant que nous avons capturé le clic droit et empêché la valeur par défaut , nous sommes prêts POUR CE QUE VOUS AVEZ ATTENDU! Le composant menu!

@ViewChild ('gridmenu') public gridContextMenu: ContextMenuComponent;

Maintenant, sur un clic droit, nous devons positionner ce MAGNIFIQUE menu:

 public onCellClick (e: CellClickEvent): void {
            console.log (e.type, "J'ai été cliqué! Rude!", e.originalEvent);
            if (e.type === 'menu contextuel') {
                console.log (e.type);
                const originalEvent = e.originalEvent;
                originalEvent.preventDefault ();
                this.gridContextMenu.show ({
                    left: originalEvent.pageX, // position où le clic droit s'est produit sur l'axe des x
                    top: originalEvent.pageY // position où le clic droit s'est produit sur l'axe des y
                });
            }
        } 

Création du balisage du menu

Voici le kendo-contextmenu dans le fichier HTML de notre composant stock-list:

public onSelect (e: ContextMenuSelectEvent): void { if (e.item.text === 'Graphiques' || e.item.items! == non défini) { revenir; } if (e.item.text === 'Exporter Excel') { this.grid.saveAsExcel (); } autre { this.chartConfiguration = { chartName: e.item.text, seriesType: getChartType (e.item.text), pile: getChartStack (e.item.text) }; si (! this.opened) { this.opened = true; } this.gridContextMenu.hide (); } }

Ici, nous faisons des choses magiques. Nous revenons (essentiellement sans action, sans masquer le menu contextuel si l'élément sur lequel vous avez cliqué est Graphiques ou indéfini. Si l'élément sélectionné était Exporter Excel nous enregistrons la grille dans un Fichier Excel. Sinon, nous arrivons à créer un magnifique graphique avec les données sélectionnées et à masquer le menu contextuel!

Comment construisons-nous les éléments qui remplissent ce menu?

fichier data.ts .

abattre ce projet et à approfondir les autres détails soignés que nous n'avons pas couverts dans cet article. J'aime vraiment cette démo qui Tsvetomir et Svetlin a travaillé dur pour montrer la puissance de plusieurs interfaces utilisateur Kendo pour les composants angulaires combinés.

Alyssa est l'avocat des développeurs angulaires pour l'interface utilisateur de Kendo. Si vous aimez Angular, React, Vue ou jQuery et que vous aimez également les composants magnifiques et très détaillés, consultez la bibliothèque d'interface utilisateur de Kendo ici ou passez simplement à un essai gratuit de 30 jours aujourd'hui. Bon codage!