Fermer

août 25, 2020

La nouvelle démo de portefeuille financier utilisant Kendo UI pour Angular8 minutes de lecture



 Un gif parcourant les différentes pages et fonctionnalités de l'application de démonstration de portefeuille financier à l'aide de Kendo
Composants de l'interface utilisateur

Dans cette série, je vais parcourir les composants angulaires qui composent cette application et me plonger dans le
Kendo UI composants que chacun utilise! Nous passerons par
le composant Angular Stock Chart, ainsi qu'un autre graphique
composants, entrées, boutons et, bien sûr, notre fameux composant Grid pour construire un portefeuille financier
application, capable de vous tenir à jour avec les stocks de votre choix!

J'ai divisé l'application en cinq composants angulaires principaux:

  1. Tableau des actions
  2. Liste des stocks
  3. Profil utilisateur
  4. ] Données en temps réel
  5. Heatmap

Pour rendre l'expérience de lecture plus succincte, dans ce premier article, je couvrirai le graphique boursier et la liste boursière
composants (et les composants enfants qu'ils emploient) – consultez la partie II pour le reste à couvrir!

 capture d'écran de nos composants angulaires

Follow Along

Vous pouvez afficher le code et suivre – tout est disponible sur les pages GitHub et GitHub!

  1. Clonez le dépôt 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

Comme vous pouvez le voir dans le GIF d'ouverture, l'application vous montre les informations boursières qui vous intéressent avec notre interface utilisateur Kendo
Composant de graphique boursier. Ce composant est prêt à l'emploi avec des fonctionnalités permettant de choisir des plages de dates et des plages de temps
pour les actions que vous souhaitez examiner. Vous pouvez également changer le type de graphique que vous visualisez: Bougie, Ligne ou
Zone.

Notre application de portefeuille financier affiche également les actions dans une liste d'actions, une carte thermique et des actions en mouvement en temps réel
ainsi qu'une page de profil utilisateur. Cette démo regorge de nombreuses fonctionnalités! Plongeons dans cet incroyable
démo par composant (composant angulaire, c'est-à-dire).

Diagramme boursier et détails boursiers Composants angulaires

Le diagramme boursier avec détails boursiers et la liste des stocks sont tous visibles par défaut sur le tableau de bord (page de destination).
Je leur ai donné des titres et des contours ici, afin que vous puissiez voir visuellement où se trouvent ces composants angulaires:

 capture d'écran décrivant le graphique boursier, les détails et les limites des composants de la liste d'actions

Le profil utilisateur est accessible lorsque l'avatar dans le en haut à droite est sélectionné:

 Page Profil utilisateur sur l'application de démonstration Kendo UI Financial Portfolio

Les vues Heatmap et Real Time Data sont disponibles grâce au composant de navigation. La navigation
Le composant est utilisé à l'intérieur
le composant Liste des actions:

 Basculer les options de la liste des actions sur l'application de démonstration du portefeuille financier de l'interface utilisateur Kendo

Cette navigation est créée à l'aide du groupe de boutons de l'interface utilisateur de Kendo, des boutons de l'interface utilisateur de Kendo et utilise bien sûr le routage angulaire avec
le routerLink et
Directives routerLinkActive . Voici la
Vue Heatmap et vue Real Time Data:

 Heatmap des actions sur l'application Kendo UI Financial Portfolio Demo  Cours des actions en temps réel sur l'application Kendo UI Financial Portfolio Demo

Maintenant que nous avons un aperçu de la plus grande Composants angulaires qui composent cette application, regardons plus en profondeur
dans les composants angulaires pour voir quels composants Kendo UI sont utilisés pour réaliser ce portefeuille.

Le graphique boursier de Kendo UI

La première chose qu'un utilisateur voit sur la page de destination est le graphique boursier qui implémente principalement le ] Graphique d'action Kendo UI
Component
.

Le StockChart est un contrôle spécialisé pour visualiser le mouvement de prix d'un instrument financier sur un certain

 Graphique boursier principal qui représente les actions sur l'application de démonstration du portefeuille financier de l'interface utilisateur de Kendo

Le composant graphique boursier étend le graphique de base de l'interface utilisateur de Kendo, ainsi que des fonctionnalités supplémentaires pour afficher les données financières.
informations sur une certaine période de temps. Il existe un volet de navigation qui vous permet de sélectionner un morceau spécifique de
time:

 volet du navigateur pour limiter le temps pendant lequel vous visualisez une action sur la démonstration du portefeuille financier de Kendo UI
App

GLORIOUS STOCK GRART DOCS

Création d'un graphique boursier avec le moins de flexion ?

Notre composant graphique boursier a également un composant angulaire enfant appelé Détails du stock. C'est là que notre beaucoup parlé
à propos de Kendo UI Stock Chart est réellement implémenté! Si vous voulez voir le code complet, développez le bloc ci-dessous ou cochez
Plot Bands !

Les bandes du graphique graphique vous permettent de mettre en évidence une plage spécifique d'un axe.
Pour afficher les bandes de tracé, définissez l'option axis plotBands sur un tableau de PlotBand .

 le balisage pour les bandes de tracé  la fonctionnalité plotbands

Donner notre graphique boursier deux Axes X

Les axes Chart fournissent un
échelle de valeurs pour les séries de données tracées.

Ici, nous configurons les axes de notre graphique. Il existe deux types d'axes: la catégorie et la valeur.

Catégorie
les axes
sont déclarés via les composants de configuration kendo-chart-category-axis-item et placés dans un
Collection d'axes des catégories de graphiques kendo.

Les axes des valeurs sont
déclaré via les composants de configuration de l'élément kendo-chart-value-axis-item et placé dans un kendo-chart-value-axis
collection.

 Axe des valeurs du graphique kendo

Limitation de la plage affichée en réglant les valeurs Min et Max

Nous lions les range.start et range.end à ces entrées ainsi que définir un
min et max . En savoir plus sur la date
personnalisations des entrées de plage ici dans nos documents .

Données pour notre graphique

Le composant Angular Stock Chart extrait ses données boursières de ce fichier local:

 capture d'écran du fichier stocks.ts avec toutes les données de stock locales

Il est toujours plus facile de contrôler une application de démonstration lorsque vous pouvez passer au sans fil. Notre équipe a donc pensé que c'était la meilleure solution pour
cette démo particulière. Cependant, vous pouvez facilement échanger les données locales contre une API boursière active.

Passage d'éléments configurables au composant Détails du stock

Le graphique boursier de l'interface utilisateur de Kendo est contrôlé par plusieurs composants d'interface utilisateur qui transmettent des éléments tels que le graphique type et
intervalle:

 capture d'écran du composant app-stock-details dans le fichier de composant du graphique boursier  gif du graphique boursier basculant entre les types de graphiques

Ces composants de l'interface utilisateur de Kendo — Plage de dates, entrée de date et liste déroulante— nous permettent de personnaliser
le graphique boursier pour voir les stocks pendant une période de temps exacte. Si vous voulez voir le code complet, développez le bloc
ci-dessous.

stock-chart.component.html

Modification de la période affichée dans notre graphique boursier ?

Kendo Date Range & Date Input

The DateRange Component tient
les entrées de date de début et de fin et dispose d'une fenêtre contextuelle de plage de dates sophistiquée pour les sélectionner.

 Le sélecteur de plage de dates en action dans l'application de démonstration de portefeuille financier

Vous pouvez voir dans le balisage que notre kendo-daterange a deux entrées kendo-date . L'un est pour le
directive kendoDateRangeStartInput
et l'autre est pour la
Directive kendoDateRangeEndInput
.

Il y a pas mal de choses que vous pouvez personnaliser et contrôler sur ces directives. Une chose, par exemple, est
autoCorrectOn que nous utilisons en cas de changement.

autoCorrectOn : spécifie le comportement de correction automatique. Si la date de début est postérieure à la date de fin,
la directive fixe la plage de dates à une seule date, soit lors du changement d'entrée, soit lors du flou (voir exemple). Par défaut, le
le composant n'effectue aucune correction automatique.

Configuration du navigateur

Prêt à l'emploi, le graphique boursier a un volet de navigation pour mettre à l'échelle la période affichée et l'ensemble du graphique apparaît
quelque chose comme ceci:

 gif de frottement de la période avec le volet du navigateur sur un graphique boursier par défaut

Pour plus de détails sur le graphique boursier, consultez nos documents: https://www.telerik.com/ kendo-angular-ui / components / charts / stock-chart /

Vous pouvez consulter la ligne de code exacte sur GitHub: stock-details.component.html

 le balisage pour le navigateur time scrubber of fun

Basculement des types de graphiques dans le graphique boursier de l'interface utilisateur de Kendo ?

Liste déroulante de Kendo

Comme nous l'avons mentionné précédemment, nous avons une liste déroulante qui nous permet de basculer le type de graphique. Mais comment allons-nous basculer
entre les types de graphiques dans le graphique boursier? Eh bien, la liste déroulante du type de graphique définit la variable
chartType à
soit 'candle', 'line' ou 'area'.

 gif des deux listes déroulantes en action dans l'application de démonstration financière

Vous pouvez consulter la ligne exacte de code sur GitHub: stock- chart.component.html

 balisage de la liste déroulante

Nous utilisons également l'élément angulaire
ng-template (angulaire
modèles pas nos propres modèles) pour personnaliser le contenu de nos listes déroulantes.

Pour personnaliser le contenu des éléments de la liste de suggestions, utilisez le modèle d'élément. Pour définir un modèle d'élément, imbriquez une balise avec la directive kendoDropDownListItemTemplate dans une balise .

Si Chart Type Candlestick

Si le chartType est défini sur 'candle 'alors voici le balisage que le graphique boursier utilisera:

Vous pouvez consulter la ligne de code exacte sur GitHub: stock-details.component.html

Nous utilisons également ng-template à nouveau pour personnaliser le modèle de l'infobulle pour le graphique en chandelier:

Vous pouvez consulter la ligne de code exacte sur GitHub: stock-details.component.html

 markdown for tooltip for the candlestick chart

If Chart Type Line

Si le chartType est défini pour «aligner» le graphique boursier utilisera ce balisage:

Vous pouvez consulter la ligne exacte de code sur GitHub: stock-details.component.html

 démarque pour le graphique linéaire de Kendo UI

Si Chart Type Area

Sinon, si le chartType est défini sur 'area', le graphique boursier utilisera ce graphique en aires.

Vous pouvez consulter la ligne de code exacte sur GitHub: stock-details. component.html

 démarque pour le graphique en aires de l'interface utilisateur Kendo

Affichage de deux graphiques à la fois avec l'interface utilisateur Kendo

→ Toujours afficher les colonnes, quel que soit le type de graphique

Vous avez peut-être remarqué dans la démo du graphique boursier, il existe toujours deux types de graphiques différents qui s'affichent en un
temps. Ici vous pouvez voir le graphique en aires ainsi que les colonnes.

 image du graphique boursier montrant deux graphiques à la fois, colonne et zone

Ceci est dû au fait que nous donnons au graphique cette série de colonnes définie pour afficher à tout moment, avec l'un de l'autre
trois mentionnés ci-dessus.

Vous pouvez consulter la ligne exacte de code sur GitHub: stock-details.component.html

 histogramme marque vers le bas

Conclusion

Nous avons donc couvert le graphique boursier dans toute sa splendeur, y compris la possibilité de basculer entre les types de graphiques et comment
pour afficher plusieurs graphiques en même temps! Je couvrirai le reste du portefeuille financier dans un prochain article,
y compris la page de profil utilisateur, les données en temps réel et les composants Heatmap! Pour l'instant, vous pouvez cloner l'application de démonstration et vérifier
le code source ici:

Financial Stocks Portfolio sur GitHub
Pages

Stocks financiers
Portfolio Repo sur GitHub

 kendoka demande des commentaires

Comme toujours, nous aimons aimer les commentaires d'amour ici sur l'équipe de Kendo UI! Veuillez nous indiquer si cette application de démonstration a été utile pour
vous et quel genre d'autres applications de démonstration vous aimeriez voir!

Kendo UI pour Angular Feedback Portal

Alyssa est le développeur angulaire de Kendo UI. Si vous êtes dans Angular, React, Vue ou jQuery et que cela arrive aussi
pour aimer les composants magnifiques et très détaillés, consultez Kendo UI . Vous pouvez trouver l'interface utilisateur Kendo pour la bibliothèque angulaire ici ou tout simplement sauter dans un essai gratuit de 30 jours aujourd'hui. Heureux
Codage!





Source link

0 Partages