July 6, 2020

Voici les graphiques allégés 3.0

Nous sommes heureux de publier les graphiques allégés 3.0. Nous avons ajouté la possibilité d’avoir deux échelles de prix en même temps, de déterminer le nombre de barres à partir des données visibles à gauche et à droite, d’utiliser votre propre format de date, de remplacer la plage d’échelle automatique, et bien plus encore. Dans cet article, nous allons vous guider à travers chacune de ces mises à jour et vous montrer comment commencer à utiliser notre nouvelle version des graphiques allégés.

Changements marquants

Tout d’abord, il s’agit d’une publication majeure de la bibliothèque, qui comporte quelques modifications importantes :

  • Les deux méthodes d’abonnement et de désabonnement à VisibleTimeRangeChange ont été déplacées de ChartApi à TimeScaleApi ;
  • Avec notre version 3.0, vous pouvez spécifier l’axe des prix sur lequel vous souhaitez placer la série. Il en va de même pour le déplacement de la série entre les échelles de prix.

Consultez notre doc sur les changements marquants avec un guide complet pour vous aider à migrer en douceur.

Deux échelles de prix

Depuis notre première version publique, la bibliothèque n’a pu afficher qu’une seule grille de prix en même temps (de gauche ou de droite), si tant est qu’elle en ait une. Avec la version 3.0, vous pourrez afficher jusqu’à deux barèmes de prix en même temps. Cela signifie que vous pouvez ajouter deux séries différentes sur le graphique, les placer sur des échelles de prix différentes (l’une à gauche, l’autre à droite) et elles seront toutes deux visibles. En outre, vous avez la possibilité de placer plusieurs séries sur la même échelle de prix, même s’il s’agit d’une superposition. Ainsi, vous pouvez créer votre propre étude avec plusieurs résultats et faire de chaque résultat une série séparée et les placer tous sur la même échelle de prix pour qu’ils soient mis à l’échelle ensemble.

Comptage et visibilité des barres

Supposons que vous développiez une application et que vous deviez mettre en place un chargement continu de données pour les cas où un utilisateur fait défiler l’historique vers la gauche (consultable ici). C’est une fonctionnalité assez basique pour les solutions graphiques.

La version 3.0 de la bibliothèque comporte de nombreuses améliorations liées à cette fonctionnalité. Par exemple, vous pouvez maintenant obtenir des informations sur le nombre de barres d’une série à partir de la gauche de la barre visible gauche ou de la droite de la barre visible droite. Vous pouvez également faire des prévisions et charger de nouvelles barres à l’avance afin que les utilisateurs ne voient pas de « gel » ou de retard de chargement. Par exemple, supposons que vous commenciez à charger des barres supplémentaires lorsqu’un utilisateur fait défiler le graphique vers la gauche, de sorte qu’il ne reste plus que 50 à 100 barres dans l’historique.

En outre, l’API peut également être appliquée à la synchronisation fluide des plages visibles (comme sur le multigraphique de TradingView, par exemple) entre plusieurs graphiques. Lorsqu’un graphique est déplacé, les autres le sont également.

Formats de date

Auparavant, nous avions une liste codée en dur des formats de date disponibles (19 formats au total), de sorte que vous ne pouviez pas personnaliser et utiliser votre propre format, qui serait mieux adapté à vos besoins.

Dans la version 3.0, nous avons modifié cette liste, ce qui vous permet d’utiliser n’importe quelle chaîne personnalisée comme format de date. Par exemple, vous pouvez utiliser « aaaa-dd » ou même « aaaa », qui convient aux graphiques saisonniers.

Un format personnalisé peut être n’importe quelle chaîne, contenant un nombre quelconque de caractères de remplacement de date, que nous remplacerons ensuite par les valeurs de date correspondantes :

  • « aaaa » – année complète (par exemple 2020)
  • « yyy » – année courte (par exemple 20)
  • « MMMM » – long mois (par exemple juillet)
  • MMM » – mois court (par exemple février)
  • MM » – numérique (avec un zéro de tête si nécessaire) mois (par exemple 03)
  • « jj » – jour du mois (avec un zéro de tête si nécessaire) (par exemple 15)

Contournement de la fourchette de prix des séries

Par défaut, la bibliothèque utilise toutes les données visibles sur le graphique pour calculer la fourchette de prix en mode échelle automatique. Toutefois, si vous souhaitez la modifier d’une manière ou d’une autre, par exemple si vous êtes sûr que la série ne doit pas avoir de valeurs négatives, vous pouvez modifier la fourchette de prix de manière à ce qu’elle ne soit pas négative, et la bibliothèque adoptera la fourchette de prix en conséquence.

Possibilité d’ajouter un texte au marqueur de série

Les marqueurs de série sont utiles pour améliorer l’UX d’un graphique. Ils vous permettent d’afficher des marqueurs (flèches, cercle ou carré) à côté des barres d’une série. Dans notre nouvelle version de la bibliothèque, vous pouvez également spécifier une signature ou un texte pour chaque marqueur, ce qui vous permet d’ajouter des légendes et des notes.

API pour convertir le temps en coordonnées et vice versa

Parfois, il est nécessaire de placer un indice ou un texte en haut de la bibliothèque à un moment précis sur le graphique. Dans notre version 3.0, nous avons ajouté la possibilité de convertir le temps en coordonnées X et vice versa, en demandant essentiellement à l’API de définir les coordonnées de l’écran. En outre, vous pouvez désormais obtenir la largeur de l’échelle de prix visible (à gauche ou à droite). Cela peut être utile, par exemple, si vous avez l’échelle de prix de gauche affichée et que vous avez besoin d’obtenir une coordonnée exacte à l’intérieur du graphique.

Possibilité de masquer les ticks de l’échelle des prix

Les marques de ticks sur l’échelle des prix peuvent sembler quelque peu déroutantes pour certains, souvent parce qu’elles ressemblent à un signe moins. Cependant, vous pouvez désormais désactiver ce symbole, ce qui entraîne l’arrêt de leur affichage par la bibliothèque. Cela signifie qu’il n’y a plus de symboles confus qui remplissent votre graphique si vous préférez que cet espace soit dégagé.

Plus de fonctionnalités, un plus petit emballage

L’une des significations de « léger » se rapporte à la taille. La première version de la bibliothèque était de ~43.7KB en min.gz. Depuis lors, nous avons ajouté de nombreuses nouvelles fonctionnalités et vous pouvez penser que la taille imite la croissance de ces ajouts, mais c’est là que vous vous trompez.

Dans cette version, nous avons appliqué diverses techniques pour réduire la taille de la bibliothèque, ce qui nous permet de vous fournir un ensemble plus petit. Ainsi, la version 3.0 de la bibliothèque fait 42,4 Ko en min.gz, encore plus petite qu’auparavant, mais pleine de fonctionnalités et d’outils supplémentaires.

Notez que les techniques que nous avons utilisées ici ne sont pas spécifiques aux graphiques allégés. Cela signifie que vous pouvez également les utiliser dans vos projets. Si vous souhaitez en savoir plus sur notre processus, consultez les GH #436 et GH #432, qui mettent en évidence la réduction de taille dans la bibliothèque. Nos tests ont montré que ces techniques peuvent réduire la taille d’un paquet jusqu’à 30 % sous forme non comprimée minimisée, et jusqu’à 10 % en min.gz.

Un remerciement particulier à notre communauté

TradingView est une communauté d’investisseurs, de traders et de programmeurs. Nous tenons à remercier tous nos contributeurs qui ont aidé à la réalisation de cette version :

Nous avons plus à vous montrer

Nous n’avons fait qu’effleurer la surface avec ce post concernant les nouveautés de Graphiques allégés 3.0. Pour voir la liste complète des changements, nous vous encourageons à consulter nos notes Github pour plus de détails et d’informations. Si vous souhaitez en savoir plus sur la façon dont les graphiques légers peuvent vous aider, veuillez consulter notre bibliothèque de graphiques.

Nous espérons que vous avez apprécié cette mise à jour. Comme toujours, nous vous invitons à continuer à nous envoyer vos commentaires, suggestions et réactions. C’est avec plaisir que nous construisons pour vous.

Look first / Then leap

Ouvrir le graphique