La nouvelle démo de portefeuille financier utilisant Kendo UI pour Angular

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

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!

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:

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

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:

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:

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

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:

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 .

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.

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:

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:

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.

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.

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:

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

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

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

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

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

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

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

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.

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

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

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!