Fermer

septembre 10, 2020

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



 Un gif parcourant les différentes pages et fonctionnalités de l'application de démonstration de portefeuille financier à l'aide des composants de l'interface utilisateur Kendo [19659003] Dans cette série, je passe en revue les composants angulaires qui composent cette application et je me penche sur les composants <a href= 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

 Un tableau avec des informations boursières en temps réel mises à jour à la volée. Les couleurs des stocks changent du vert au rouge, indiquant que le stock augmente ou diminue.

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:

 une capture d'écran de la marque de l'enveloppe extérieure de la grille de kendo

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

 capture d'écran de l'événement de changement de page et de l'événement de chargement des produits

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 .

 le balisage d'une colonne du composant de données en temps réel utilisant ng-template vers personnaliser les cellules de la grille

 une capture d'écran de la colonne de prix

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

 le balisage pour la colonne de grille kendo pour le changement de prix

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:

 une carte d'arbre à partir de l'interface utilisateur de kendo affichant des informations sur les stocks

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é.

 image de l'ouverture de la page du portefeuille utilisateur

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

 le balisage pour la grille des actions de profil sur la page du portefeuille utilisateur

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

 le balisage pour le graphique à secteurs sur la page du portefeuille utilisateur

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

 une image montrant le diagramme à secteurs normal et le diagramme à secteurs avec biseau, oooooo [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!

 une capture d'écran de l'avatar de l'utilisateur et du tableau récapitulatif dans la page du portefeuille utilisateur

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!

 endoka demandant vos commentaires

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!





Source link

0 Partages