Site icon Blog ARC Optimizer

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 application
  • src / App.js : un exemple de vue que nous allons modifier à notre goût
  • src / 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:

  1. Le symbole de la société entré par l'utilisateur
  2. La plage de dates à afficher
  3. 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:

  1. Composant d'entrée permettant de lire le symbole de la société
  2. du composant ButtonGroup permettant de lire la plage de dates
  3. StockChart 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 graphique
  • ChartSeries qui affiche les données réelles
  • ChartNavigator . 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 de Date 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 la StockChart 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.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link
Quitter la version mobile