Rendu des données boursières avec KendoReact StockChart
Apprenez à créer rapidement une application React qui collecte les entrées de l'utilisateur, utilise cette entrée pour demander des données à une API, puis les restitue sous forme de graphique cool à l'aide de KendoReact StockChart.
Dans cet article, nous allons créer une application React pour restituer l'historique des cours des actions.
Nous utiliserons KendoReact de ButtonGroup
et Input
. ] des composants pour recueillir les entrées de l'utilisateur, et StockChart
pour afficher les données boursières correctement.
Si vous suivez, vous aurez une super petite application qui restitue des données historiques sur les actions en un rien de temps. Commençons à coder!
Vous pouvez voir le code permettant de créer l'extrémité avant de cette application sur de ce repo GitHub .
Création d'une application React avec Créer une application React
Nous allons commencer à créer notre application en créant une interface de base à l'aide de Créer une application React un outil qui nous permet d'avoir une application React opérationnelle très rapidement.
Nous pouvons créez une nouvelle application dans un dossier appelé stock-chart-app
en l'exécutant à partir de la ligne de commande:
$ npx créer-réagir-app stock-chart-app
dossier notre répertoire courant, et lancez l’application:
$ cd stock-chart-app
$ npm start
Nous pouvons voir notre application en cours d’exécution en naviguant sur localhost: 3 000.
Les fichiers les plus importants créés:
package.json
: listant toutes les dépendances de notre projet [19659022] src / index.js : le point d'entrée de notre applicationsrc / App.js
: un exemple de vue que nous allons modifier à notre goûtsrc / App.test.js
: exemple de test
Installation de dépendances KendoReact
KendoReact est une bibliothèque de composants React native permettant de créer des interfaces utilisateur complexes. Nous allons utiliser certains de leurs composants, nous devrons donc installer les dépendances suivantes:
$ npm install --save @ progress / kendo-react-input
@ progress / kendo-react-buttons
@ progress / kendo-react-charts
@ progress / kendo-dessin
@ progress / kendo-react-intl
@ progress / kendo-theme-material
hammerjs
Mise en route
Notre composant App
servira de base à notre application. Nous conserverons les trois éléments suivants dans son état:
- Le symbole de la société entré par l'utilisateur
- La plage de dates à afficher
- Les données extraites de l'appel de l'API
Nous fournirons des valeurs initiales. values dans son constructeur:
// src / App.js
importer Réagir, {Composant} de "réagir";
export default class App étend le composant {
constructeur (accessoires) {
super (accessoires);
this.state = {
symbole: "",
portée: "1m",
stocksData: {}
};
}
}
Nous rendrons également trois composants correspondant à ces trois éléments d'état:
-
Composant d'entrée
permettant de lire le symbole de la société du composant ButtonGroup
permettant de lire la plage de datesStockChart
composant permettant de restituer les données
Notre méthode de rendu
ressemblera à ceci:
// src / App.js
export default class App étend le composant {
render () {
const {symbol, range, stockData} = this.state;
revenir (
);
}
}
Saisie d'un symbole de société avec l'entrée KendoReact
Nous allons utiliser le composant de [KendoReact Input
pour permettre à l'utilisateur de saisir le symbole de l'entreprise qu'il souhaite afficher:
/ / src / SymbolInput.js
importer Réagir, {Composant} de "réagir";
importer {entrée} de "@ progress / kendo-react-input";
La classe par défaut d'exportation SymbolInput étend le composant {
render () {
const {valeur} = this.props;
revenir (
);
}
}
Le composant Input
nous permet d'effectuer une validation assez avancée. Vous voyez comment nous utilisons la propriété de modèle
avec une expression régulière pour garantir que l'utilisateur entre un symbole de société valide? La propriété onChange
ne se déclenche que lorsque l'utilisateur saisit une valeur valide.
Le traitement de ce rappel onChange
est direct:
// src / SymbolInput.js
La classe par défaut d'exportation SymbolInput étend le composant {
handleChange (evt) {
const {onChange} = this.props;
symbole const = evt.target.value;
onChange (symbole);
}
}
Sélection d'une plage de dates avec KendoReact ButtonGroup
Nous allons utiliser le composant de KendoReact ButtonGroup
pour permettre à l'utilisateur de sélectionner la plage de dates souhaitée:
// src / RangeButtonGroup.js
importer Réagir, {Composant} de "réagir";
importer {Button, ButtonGroup} de "@ progress / kendo-react-buttons";
La classe d'exportation par défaut RangeButtonGroup étend Component {
render () {
const {valeur} = this.props;
revenir (
{/* etc */}
);
}
}
La propriété togglable = {true}
fait basculer les boutons entre les styles sélectionnés et non sélectionnés lorsque l'utilisateur les clique dessus. Nous pouvons nous assurer qu'un seul d'entre eux est actif à la fois en contrôlant leur propriété sélectionnée
en la définissant sur true
uniquement pour la plage actuellement sélectionnée.
Au lieu de répéter la même chose code pour chaque rappel onClick
nous pouvons avoir un gestionnaire d’événements générique handleClick
et le lier à différentes valeurs:
// src / RangeButtonGroup.js
La classe d'exportation par défaut RangeButtonGroup étend le composant {
constructeur (accessoires) {
super (accessoires);
this.handleClickOneMonth = this.handleClick.bind (this, "1m");
this.handleClickThreeMonths = this.handleClick.bind (this, "3m");
this.handleClickSixMonths = this.handleClick.bind (this, "6m");
this.handleClickOneYear = this.handleClick.bind (this, "1y");
this.handleClickTwoYears = this.handleClick.bind (this, "2y");
this.handleClickFiveYears = this.handleClick.bind (this, "5y");
}
handleClick (plage) {
const {onClick} = this.props;
onClick (plage);
}
}
Rendu des données boursières avec KendoReact StockChart
Enfin, nous rendrons les données boursières à l'aide du composant de KendoReact StockChart
. C'est un composant assez complexe qui attend certains autres composants comme des enfants. Cela ressemblera à ceci:
// src / CustomStockChart.js
importer Réagir de "réagir";
importer {
StockChart,
ChartTitle,
Série ChartS,
ChartSeriesItem,
ChartNavigator,
ChartNavigatorSelect,
ChartNavigatorSeries,
ChartNavigatorSeriesItem
} de "@ progress / kendo-react-charts";
importer des "hammerjs";
const CustomStockChart = props => {
revenir (
);
};
export default default CustomStockChart;
Les trois parties principales du graphique sont les suivantes:
ChartTitle
qui affiche le titre du graphiqueChartSeries
qui affiche les données réellesChartNavigator
. vous permet de modifier la plage de données à afficher
Massaging API Data
The openField
closeField
lowField
de highField
et categoryField
accessoires de ChartSeriesItem
et du champ
et categoryField
et du champ
et des champs ChartNavigatorSeries
. définir les noms d'attribut appropriés dans les données passées aux données
prop. Nous devrons donc nous assurer qu'il ressemble à ceci:
[
{
"Date": "/Date(1390780800000)/",
"Open": 32.6945,
"Close": 31.9496,
"Low": 31.9053,
"High": 32.7122
},
{
// ...
}
]
Le champ
Date
peut être une instance deDate propre ou une chaîne ressemblant à / Date (
tout ce qui vous convient le mieux) /
Nous allons nous occuper de masser les données fournies par notre API dans un format qui correspond à la forme ci-dessus dans notre fonction appropriée massageData
:
// src / utils.js
fonction d'exportation massageData (obj) {
revenir {
Date: nouvelle date (obj.date),
Ouvert: obj.open,
Fermer: obj.close,
Faible: obj.low,
High: obj.high,
};
}
Nous pouvons ensuite mapper les données d'API avec cette fonction pour obtenir ce que nous voulons:
// src / StockChart.js
const CustomStockChart = props => {
const {data} = props;
const massagedData = data.map (massageData);
revenir ( /* ... */ );
Calcul des dates de début et de fin
Nous devons également indiquer à ChartNavigator
les dates de début et de fin que nous voulons afficher. Nous pouvons utiliser la date du premier élément du tableau comme date de début et la date du dernier élément comme date de fin:
// src / StockChart.js
const CustomStockChart = props => {
const {data} = props;
const massagedData = data.map (massageData);
const from = new Date (données [0] .date);
const to = new Date (data [data.length - 1] .date);
revenir ( /* ... */ );
Nous avons maintenant tout ce dont nous avons besoin pour restituer le StockChart
!
Récupération de données à partir d'une API externe
Lorsque l'utilisateur entre un symbole ou modifie la plage de dates, notre Le composant App
en sera informé, mettra à jour son état et enverra ensuite une demande à l'API IEX pour extraire les données correspondantes:
// src / App.js
export default class App étend le composant {
handleChangeSymbol (symbole) {
this.setState ({symbol}, this.updateStockData);
}
handleClickRange (range) {
this.setState ({range}, this.updateStockData);
}
async updateStockData () {
const {symbol, range} = this.state;
si (! symbole ||! gamme) {
revenir;
}
essayer {
const stockData = wait fetchData (symbole, plage);
this.setState ({stockData});
} catch (err) {
console.error ("Impossible d'extraire les données de stock:", err);
}
}
}
Notre fonction fetchData
utilise l'API Fetch pour demander de manière asynchrone des données de stock à l'API IEX .
fetch ()
. ] prend un argument – le chemin de la ressource que nous voulons extraire – et retourne une Promise contenant un objet Response . Pour extraire le contenu du corps JSON de la réponse, nous utilisons la méthode json ()
. Cet appel à json ()
renvoie une autre promesse résolue avec le résultat de l'analyse du corps du texte sous la forme JSON .
Notre mise en oeuvre ressemble donc à ceci:
// src /utils.js
exportation de la fonction async fetchData (symbole, plage) {
const url = `$ {serverUrl}? symbol = $ {symbol} & range = $ {range}`;
réponse const = wait fetch (url);
return response.json ();
}
Si vous ne souhaitez pas gérer les appels API et souhaitez uniquement des exemples de données de stock, consultez le fichier
stock-data.json
référencé dans laStockChart
documentation .
Notre interface est maintenant terminée. Il est capable de collecter les entrées utilisateur, de les utiliser pour demander des données à une API, puis de les afficher sous forme de graphique cool. 1965
Cependant, si nous essayions de frapper l'API IEX directement depuis notre interface, nous rencontrerions rapidement notre ami CORS . Notre interface frontale (localhost: 3000) et l'API IEX vivent sous différents domaines, de sorte que le navigateur bloque toute requête allant du premier au dernier.
Nous allons résoudre ce problème en construisant un proxy. avec Node.js et Express.js dans le prochain article, restez à l’écoute.
Les commentaires sont désactivés en mode Aperçu.
Source link