Notre nouvelle démo de portefeuille financier, partie 2 – Interface utilisateur de Kendo pour Angular

Bienvenue dans la série d'articles du blog financier, partie II! Chez Progress, nous aimons les composants attrayants et séduisants. Mon équipe aime particulièrement les composants angulaires attrayants. Récemment, nous avons créé une application de démonstration angulaire qui montre un certain nombre de nos magnifiques composants travaillant ensemble pour créer cette application de démonstration de portefeuille financier:

Kendo UI que chacun utilise!

J'ai divisé l'application en cinq composantes angulaires principales:

1. Graphique boursier
2. Liste de stock
3. Profil utilisateur
4. Données en temps réel
5. Heatmap

Dans le premier message, j'ai couvert les composants Tableau des actions et Liste des stocks (et les composants enfants qu'ils emploient). Voyons maintenant comment nous avons construit le profil utilisateur, les données en temps réel et les composants Heatmap!

Follow Along

Vous pouvez extraire le code et suivre – tout est disponible sur GitHub et GitHub Pages!

1. Cloner le repo https://github.com/telerik/kendo-angular/tree/master/examples-standalone/finance-portfolio
2. Allez à la racine de l'application cd kendo-angular / examples-standalone / finance-portfolio /
3. Run npm install and npm start
4. Accédez à http: // localhost: 4200 dans votre navigateur Web

Données en temps réel — Virtualisation des données

Construire la grille avec Kendo UI

J'ai couvert les bases de Kendo UI Grid dans une série de vidéos et dans ce post ici . Jetez-y un coup d’œil si vous commencez tout juste à utiliser Grid from Kendo UI!

Puisque j’ai déjà couvert les bases ailleurs, passons en revue les points forts de la création de cette grille de données en temps réel. Tout d'abord, nous avons bien sûr installé et ajouté la grille à notre projet:

Défilement virtuel dans la grille

Comme vous pouvez le voir, nous définissons le mode de défilement jusqu'à virtuel . L'événement pageChange est ici pour cette fonction de défilement virtuel. Afin de savoir quand une page a changé, la fonctionnalité de défilement virtuel de la Grille repose sur des calculs basés sur la rowHeight fixe ainsi que sur l'ensemble pageSize de la Grille. En savoir plus sur le défilement virtuel dans votre grille d'interface utilisateur Kendo ici: https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/ .

Plugging Data dans notre grille d'interface utilisateur Kendo

Notre [data] est réglé sur gridView qui, si nous extrayons le fichier component.ts, est réglé sur public gridView: GridDataResult; . Le GridDataResult provient de ce fichier:

real-time-data.component.ts

Nous gèrent également le pageChangeEvent en fournissant le nombre d'éléments à ignorer ainsi qu'en chargeant les produits générés aléatoirement dans ce fichier. Il est toujours plus facile de contrôler une application de démonstration en utilisant des données de démonstration, c'est pourquoi notre équipe a décidé d'aller dans cette direction pour l'application de démonstration Financial Portfolio. Cependant, vous pouvez toujours échanger nos fausses données contre des données en direct! Consultez le reste du fichier de composants de données en temps réel pour voir comment nous générons ces données aléatoires pour la vue grille en temps réel!

Rendre les données en temps réel 🥳

Cellule personnalisée dans Kendo UI Grid

] Vous pouvez personnaliser n'importe quelle cellule de la grille d'interface utilisateur de Kendo en utilisant la directive de modèle de cellule associée à ng-template . Ici, dans cette colonne de la grille Kendo, nous créons un modèle personnalisé pour les cellules contenant les données de prix. Nous lions la donnée qui est constamment mise à jour et lui attribuons une classe de prix en hausse (texte vert) ou une classe de prix en baisse (texte en rouge), selon que le stock augmenté ou diminué.

À
définir le modèle de cellule imbriquer une balise avec la directive kendoGridCellTemplate dans une balise .

Nous donnons à la colonne de changement de prix le même traitement et les mêmes classes, vérifiez-la:

Heatmap

Notre heatmap utilise un composant jQuery (le Kendo UI TreeMap) avec facilité à l'intérieur de notre heatmap component : [19659004] Ci-dessous vous pouvez trouver le code pour instancier et peupler un composant jQuery treemap dans notre composant angulaire Heatmap

         public ngAfterViewInit (): void {
            this.treeMap = kendo.jQuery (this.heatmap.nativeElement) .kendoTreeMap ({
                dataSource: nouveau kendo.data.HierarchicalDataSource ({
                    données: this.treeData,
                    schéma: {
                        modèle: {
                            enfants: 'items'
                        }
                    }
                }),
                valueField: 'valeur',
                textField: 'symbole',
                couleurs: [['#09E98B', '#00A95B']['#FF9693', '#EC0006']],
                modèle: ({dataItem}) => {
                    retourne «
»
                    + dataItem.symbol + `
 $ {dataItem.change}% 
`;
                }
            }). data ('kendoTreemap');
            this.tooltip = kendo.jQuery (this.heatmap.nativeElement) .kendoTooltip ({
                filtre: '.k-feuille',
                position: 'centre',
                showOn: 'cliquez',
                contenu: (e: any) => {
                    const treemap = kendo.jQuery (this.heatmap.nativeElement) .data ('kendoTreeMap');
                    const item = treemap.dataItem (e.target.closest ('. k-treemap-tile'));
                    const cssClass = (valeur: nombre): chaîne => {
                        valeur de retour> 0? 'valeur positive': 'valeur négative';
                    };
                    retour '
                        
 $ {item.symbol} 
                        
 $ {item.name} 
                        

                             Prix: 
                            
                                 $ {item.price}
                            
                        
                        

                             Modification: 
                            
                                 $ {(item.change> 0? '+': '')} $ {Item.change}%
                            
                         
                        

                             Capitalisation boursière:  $ {item.value}
                        
                     »;
                }
              }). data ('kendoTooltip');
        }
        public ngOnDestroy (): void {
            kendo.destroy (this.treeMap);
            kendo.destroy (this.tooltip);
        } 

Le TreeMap est un moyen de visualiser des données hiérarchiques, vous donnez au treemap un objet avec des couleurs et des valeurs de champ et il construira un treemap avec des feuilles contenant chaque élément individuel de données:

Vous pouvez en savoir plus sur le composant TreeMap ici: https://demos.telerik.com/kendo-ui/treemap/index .

User Profil

Quelques composants de l'interface utilisateur de Kendo ont été utilisés pour créer notre jolie page de portefeuille utilisateur - une autre grille et un composant de graphique à secteurs ainsi qu'une mini-table et un avatar de style personnalisé.

Tout d'abord, nous construisons cette mini-grille en passant en revue nos actions prioritaires:

Ensuite, nous utilisons un autre graphique pour construire ce graphique à secteurs animé pour montrer nos actions sous une forme différente:

Nous donnons à notre graphique à secteurs un biseau regardez en définissant la propriété overlay: [overlay] = "{gradient: 'crossedBevel'}" .

[19659004] La page du portfolio des utilisateurs comporte également un mini-tableau sous une image et un nom d'avatar personnalisés. Cette application de démonstration wa est créé avant que nous ayons notre composant Avatar, qui est très pratique dans des endroits comme celui-ci!

Le composant Avatar est également super personnalisable et super simple à mettre en œuvre. Vérifiez-le si vous avez besoin d'avatars d'utilisateurs dans votre application Angular!

Résumé

Dans cet article et sa préquelle nous avons couvert la liste de stock et le graphique boursier sur la page de destination - avec sa capacité à basculer entre les types de graphiques et à afficher plusieurs graphiques en même temps! Nous avons également couvert la grille de données en temps réel, la vue Heatmap et la page du portefeuille utilisateur avec ses nombreux composants d'interface utilisateur Kendo! Pour plus de détails sur cette application de démonstration, consultez le code source ici:

Financial Stocks Portfolio sur les pages GitHub
Financial Stocks Portfolio Repo sur GitHub

Comme toujours, nous aimons les commentaires d'amour d'amour ici dans l'équipe Kendo UI! S'il vous plaît laissez-nous savoir si cette application de démonstration vous a été utile et quel type d'autres applications de démonstration vous aimeriez voir!

Kendo UI for Angular Feedback Portal

Alyssa est l'avocat du développeur angulaire pour l'interface utilisateur de Kendo. Si vous aimez Angular, React, Vue ou jQuery et que vous aimez aussi les composants magnifiques et très détaillés, consultez Kendo UI . Vous pouvez trouver l'interface utilisateur de Kendo pour la bibliothèque angulaire ici ou simplement sauter dans un essai gratuit de 30 jours aujourd'hui. Bon codage!