Sauter dans les profondeurs

Pour ma troisième contribution à l'open source, j'ai travaillé sur le projet ghostfolio, qui est une suite de gestion de portefeuille d'investissement.

feuille fantôme / feuille fantôme

Logiciel de gestion de patrimoine Open Source. Angulaire NestJS Prisma Nx TypeScript ?

FantômeFolio

Logiciel de gestion de patrimoine Open Source

Ghostfol.io | Démo en direct | Ghostfolio Premium | FAQ | Blog | Slack | X

Ghostfolio est un logiciel de gestion de patrimoine open source construit avec la technologie Web. L'application permet aux personnes occupées de suivre les actions, les ETF ou les crypto-monnaies et de prendre des décisions d'investissement solides et basées sur des données. Le logiciel est conçu pour un usage personnel en fonctionnement continu.

Ghostfolio Premium

Notre offre cloud officielle Ghostfolio Premium est le moyen le plus simple de commencer. En raison du temps gagné, ce sera la meilleure option pour la plupart des gens. Les revenus sont utilisés pour couvrir les coûts de l'infrastructure d'hébergement et pour financer le développement en cours.

Si vous préférez exécuter Ghostfolio sur votre propre infrastructure, veuillez trouver des instructions supplémentaires dans la section Auto-hébergement.

Pourquoi Ghostfolio ?

Ghostfolio est fait pour vous si vous êtes...

• ? négocier des actions, des ETF ou des crypto-monnaies sur plusieurs plateformes
• ? poursuivre un achat et conserver…

Voir sur GitHub

[Fonctionnalité] Configurer une info-bulle dans le composant graphique arborescent #3808

dtslvr publié le 22 septembre 2024

Le but de ce numéro est de mettre en place une info-bulle dans le composant graphique treemap qui est basé sur chart.js.

• Passez [baseCurrency]="user?.settings?.baseCurrency" à dans home-holdings.html
• L'info-bulle doit afficher valueInBaseCurrency des avoirs si disponible avec la devise de l'utilisateur (baseCurrency)
• Essayez d'utiliser getTooltipOptions() pour le style

Voir sur GitHub

En cherchant des tickets ouverts sur lesquels travailler sur GitHub, je suis tombé sur celui-ci. Cette fois, j'avais envie d'améliorer mon jeu et de travailler sur une fonctionnalité, j'ai donc décidé que ce serait un bon problème sur lequel essayer de travailler. Je me suis inscrit sans trop m'y intéresser. J'ai vu plus tard qu'il s'agissait d'un problème angulaire, ce qui a encore piqué mon intérêt car j'étais curieux d'apprendre Angular.

Bien que je me sois inscrit, je n'ai pas pu y travailler pendant un certain temps - les devoirs scolaires et la vie m'ont gêné. Une semaine s'est écoulée et j'ai décidé que je devais me mettre au travail. J'ai donc commencé par lire les documents de contribution et j'ai vu qu'ils utilisaient Docker. Je me suis dit "parfait, mon autre cours enseigne Docker cette semaine, donc je suis prêt". J'ai forké et cloné le dépôt et essayé d'installer les dépendances et j'ai immédiatement rencontré des problèmes - quelque chose à voir avec des conflits de dépendances entre pairs. L'application ne démarre même pas même si j'ai suivi les instructions. Cela m'a fait peur de travailler dessus pendant encore une semaine.

Quand j'ai réessayé, j'ai cloné à nouveau mon fork et j'ai réussi à construire l'application cette fois, mais certains tests échouaient avant même d'avoir commencé. J'ai pensé à contacter Slack du projet pour demander si c'était juste de mon côté, et le responsable a répondu en disant que la version de CI était en train de réussir. Encore une fois, j'avais peur de travailler sur le projet.

Finalement, le responsable a commenté le problème en demandant une mise à jour. J'ai décidé que je ne pouvais plus tarder et je me suis préparé à passer un bon moment à essayer de résoudre ce problème.

J'ai apporté des modifications depuis l'amont et cloné à nouveau mon fork, mais les tests échouaient toujours. Lors du démarrage de l'application, le serveur enregistrait un avertissement indiquant que certaines importations échouaient, j'ai donc décidé de l'examiner. Le projet utilisait une technologie de gestion du monorepo appelée Nx, et le problème semblait lié, j'ai donc passé un moment à examiner ce qu'il faisait. Ils ont également utilisé quelque chose appelé Storybook, dont ils ont mentionné comment démarrer dans le document de contribution, mais n'ont pas pris la peine d'expliquer de quoi il s'agissait. J'ai décidé de le vérifier et j'ai découvert que c'était pour développer des composants en les rendant isolés. Lorsque j'ai démarré Storybook, cela ne fonctionnait pas non plus et me donnait des erreurs d'importation. J'ai passé un peu de temps à essayer de déboguer les problèmes d'importation, mais j'ai ensuite réalisé que je pouvais simplement travailler sur mon problème sans les traiter, j'ai donc décidé de les ignorer et de me mettre au travail.

Il m'a fallu un certain temps pour comprendre ce que j'étais censé faire et quelle était l'ampleur du problème. Le numéro original était assez énigmatique avec le recul, bien qu'il ait été qualifié de "bon premier numéro". Je suppose que différents projets ont des idées différentes sur ce qui constitue un bon premier numéro. J'ai commencé par parcourir les fichiers pour trouver le composant sur lequel je devais travailler.

J'ai essayé de rechercher le composant graphique sur lequel j'étais censé travailler dans l'interface utilisateur, mais il n'était pas visible dans son composant parent. J'ai laissé un commentaire demandant au responsable, mais j'ai tout de suite compris. J'ai vu des fonctions d'initialisation dans le composant graphique et son composant parent, j'ai donc écrit console.log(this) à l'intérieur pour voir avec quoi je travaillais, et c'est à ce moment-là que j'ai réalisé que le composant graphique n'était même pas rendu. J'ai fouillé dans les paramètres du client et j'ai trouvé une bascule de fonctionnalités expérimentales, que j'ai découverte en regardant le modèle HTML du composant et en voyant qu'elle était cachée derrière une instruction conditionnelle.

Après avoir pu voir ce sur quoi je travaillais, les choses sont devenues un peu plus faciles. Le projet utilisait chart.js pour ses graphiques, je suis donc allé consulter sa documentation pour voir comment fonctionnent les info-bulles. Comme ils avaient une fonction d'aide spécifiquement pour les info-bulles, je me suis dit "D'accord, voyons comment ils utilisent les info-bulles dans d'autres graphiques de l'application". J'ai commencé à examiner d'autres composants qui utilisaient des info-bulles et à examiner ce qu'ils avaient en commun avec le composant sur lequel je travaillais, c'est-à-dire comment ils transmettaient les options de configuration à l'info-bulle, etc. J'ai remarqué comment ils avaient configuré l'info-bulle dans les autres composants et j'ai essayé de la reproduire, et cela a fonctionné ! J'avais une info-bulle fonctionnelle ! Après deux semaines ! ...Qui n'affichait toujours pas les bonnes données ! Mais c'était quand même un progrès ! Soudain, le problème semblait beaucoup plus réalisable. Au lieu d'être effrayé par l'énorme monorepo, j'ai pu me concentrer sur les choses exactes sur lesquelles je devais travailler, et c'était tout ce dont j'avais besoin de m'inquiéter.

J'ai eu un peu plus de mal à essayer de savoir comment transmettre des données à l'info-bulle. Après avoir regardé de plus près comment le composant que je copiais transmettait les données à l'info-bulle, j'ai réalisé que cela ne fonctionnerait pas pour celui sur lequel je travaillais. Il recevait et traitait les données d'une manière différente de la mienne, ce que j'ai réalisé lorsque j'ai remarqué qu'elles se trouvaient dans apps/client/src/app/components/, alors que mon composant était dans libs/ui/src/lib. J'ai pensé qu'un composant dans une partie complètement différente du monorepo était probablement conçu pour fonctionner différemment, j'ai donc recherché d'autres composants utilisant des info-bulles et, heureusement, j'en ai trouvé un dans le même répertoire que mon composant.

J'ai d'abord dû désactiver la sécurité de type pour les paramètres de la fonction que j'ai ajoutée pour configurer l'info-bulle, car l'objet dont j'obtenais les options avait des propriétés auxquelles je devais accéder qui n'étaient pas définies pour son type. J'allais demander au responsable à ce sujet, mais lorsque j'ai trouvé un composant qui fonctionnait plus près du mien, j'ai réalisé que je n'avais besoin d'aucun paramètre. Au lieu de définir des paramètres, ils ont utilisé l'objet contextuel transmis automatiquement à la fonction de rappel d'étiquette sur l'objet info-bulle, j'ai donc fait la même chose. Même si je n'avais plus besoin d'un paramètre, j'ai rencontré un problème où d'autres options de configuration devenaient indéfinies lorsque j'essayais de supprimer le paramètre. Au début, je n'étais pas sûr de ce qui se passait, mais cela a commencé à fonctionner après un certain temps, donc je suppose que le compilateur était juste en retard par rapport à mes modifications (peut-être ai-je oublié de sauvegarder le fichier ?)

J'ai donc pu insérer les données nécessaires dans l'info-bulle, mais je devais quand même la formater. J'ai encore une fois regardé l'autre composant pour voir comment ils l'avaient fait. Ils ont transmis les valeurs de l'objet contextuel à Number.toLocaleString() et le résultat a été rendu dans l'info-bulle, j'ai donc fait la même chose et le résultat est joli et propre, donc mon PR était prêt.

Info-bulle de fonctionnalité/configuration dans le composant de graphique arborescent #3897

ouday-rana publié le 09 octobre 2024

Corrections #3808.

J'ai basé mon implémentation sur l'info-bulle de portfolio-proportion-chart.component.ts. S'il vous plaît laissez-moi savoir si vous souhaitez des changements.

Voir sur GitHub

J'ai marqué mon PR prêt à être examiné et j'ai reçu des commentaires sur certaines modifications de formatage. Il s'avère que je devrais utiliser beaucoup plus de sauts de ligne dans mon code car tout était fusionné, ce que je n'ai remarqué qu'après que le responsable l'a signalé.

J'ai apporté les modifications demandées mais je n'ai pas eu de réponse pendant quelques jours, ce qui m'a rendu nerveux. Heureusement, le responsable est finalement revenu vers moi et a fusionné les modifications.

Mieux encore, le responsable a commenté en disant qu'il y avait un problème de suivi sur lequel je pourrais travailler pour ajouter plus de données à l'info-bulle. Puisque je savais maintenant comment le projet était mis en place, que j'en savais un peu plus sur Angular et les info-bulles dans Chart.js, ce problème semblait beaucoup plus simple que lors du premier. Effectivement, ce problème ne m'a pris qu'une heure environ, et après examen, celui-ci a également été fusionné.

[FONCTION] Étendre l'info-bulle dans le composant de graphique arborescent par son nom #3904

dtslvr publié le 10 octobre 2024

Le but de ce numéro est d'étendre l'info-bulle dans le composant graphique treemap en ajoutant le nom (ou le symbole comme solution de secours) :

return [
  // `${name ?? symbol}`,
  // value or percentage as before
];

Inspirez-vous du composant GfPortfolioProportionChartComponent.

Voir sur GitHub

Info-bulle de fonctionnalité/extension dans le composant de graphique arborescent par nom #3907

ouday-rana publié le 10 octobre 2024

Corrections #3904.

Ce PR ajoute le nom (et le symbole comme solution de secours) à l'étiquette de l'info-bulle dans GfTreemapChartComponent.

Il devrait également être possible d'afficher le nom/symbole sous forme d'info-bulle titre à la place si vous préférez, mais GfPortfolioProportionChartComponent les met dans l'étiquette, j'ai donc décidé de le garder cohérent.

Voir sur GitHub

Travailler sur ce problème a considérablement renforcé ma confiance en moi pour me lancer dans du code inconnu. Même si c'était incroyablement stressant au début, une fois que je me suis concentré sur ce que je devais réellement faire, j'ai pu accomplir ma tâche, même si je suis arrivé sans aucune connaissance d'Angular, de Nx ou de Chart.js.

C'est tout pour ce post. J'ai encore une pull request sur laquelle travailler pour le Hacktoberfest, alors attendez-vous à voir un autre article de blog bientôt !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!