Für meinen dritten Beitrag zu Open Source habe ich am Projekt ghostfolio gearbeitet, einer Suite zur Verwaltung von Anlageportfolios.
Geisterfolio
/
Geisterfolio
Open-Source-Vermögensverwaltungssoftware. Angular NestJS Prisma Nx TypeScript?
Geisterfolio
Open-Source-Vermögensverwaltungssoftware
Ghostfol.io | Live-Demo | Ghostfolio Premium | FAQ |
Blog | Slack | X
Ghostfolio ist eine Open-Source-Vermögensverwaltungssoftware, die auf Web-Technologie basiert. Die Anwendung ermöglicht es vielbeschäftigten Menschen, den Überblick über Aktien, ETFs oder Kryptowährungen zu behalten und fundierte, datengesteuerte Anlageentscheidungen zu treffen. Die Software ist für den persönlichen Gebrauch im Dauerbetrieb konzipiert.
Ghostfolio Premium
Unser offizielles Cloud-Angebot Ghostfolio Premium ist der einfachste Einstieg. Aufgrund der Zeitersparnis ist dies für die meisten Menschen die beste Option. Die Einnahmen werden zur Deckung der Kosten der Hosting-Infrastruktur und zur Finanzierung der laufenden Entwicklung verwendet.
Wenn Sie Ghostfolio lieber auf Ihrer eigenen Infrastruktur ausführen möchten, finden Sie weitere Anweisungen im Abschnitt Selbsthosting.
Warum Ghostfolio?
Ghostfolio ist für Sie, wenn Sie...
- ? Handel mit Aktien, ETFs oder Kryptowährungen auf mehreren Plattformen
- ? Ich strebe ein „Buy & Hold“ an…
Auf GitHub ansehen
[Funktion] Richten Sie einen Tooltip in der Treemap-Diagrammkomponente ein
#3808
Ziel dieser Ausgabe ist es, einen Tooltip in der Treemap-Diagrammkomponente einzurichten, die auf chart.js basiert.
- Übergeben Sie [baseCurrency]="user?.settings?.baseCurrency" an in home-holdings.html
- Der Tooltip sollte valueInBaseCurrency aus den Beständen anzeigen, sofern verfügbar, zusammen mit der Währung des Benutzers (baseCurrency)
- Versuchen Sie, getTooltipOptions() für den Stil zu verwenden
Auf GitHub ansehen
Als ich auf GitHub nach offenen Problemen suchte, an denen ich arbeiten konnte, bin ich auf dieses hier gestoßen. Dieses Mal wollte ich mein Spiel verbessern und an einer Funktion arbeiten, also entschied ich, dass dies ein gutes Thema wäre, um es auszuprobieren und daran zu arbeiten. Ich habe mich dafür angemeldet, ohne mich zu sehr damit zu befassen. Später sah ich, dass es sich um ein Angular-Problem handelte, was mein Interesse noch mehr weckte, weil ich neugierig war, Angular zu lernen.
Obwohl ich mich dafür angemeldet habe, konnte ich eine Zeit lang nicht daran arbeiten – Schulaufgaben und das Leben kamen mir dazwischen. Eine Woche verging und ich beschloss, mich an die Arbeit zu machen, also begann ich mit dem Lesen der beitragenden Dokumente und sah, dass sie Docker verwendeten. Ich dachte: „Perfekt, mein anderer Kurs unterrichtet diese Woche Docker, also bin ich bereit.“ Ich habe das Repo geforkt und geklont und versucht, die Abhängigkeiten zu installieren, bin aber sofort auf Probleme gestoßen – etwas, das mit Peer-Abhängigkeitskonflikten zu tun hat. Die App startete nicht einmal, obwohl ich die Anweisungen befolgt hatte. Das hat mich davon abgehalten, noch eine Woche daran zu arbeiten.
Als ich es erneut versuchte, habe ich meinen Fork erneut geklont und die App dieses Mal erstellen lassen, aber einige Tests schlugen fehl, bevor ich überhaupt begonnen hatte. Ich überlegte, im Slack des Projekts nachzufragen, ob es sich nur um mein Problem handelte, und der Betreuer antwortete, dass der Build in CI in Arbeit sei. Wieder einmal hatte ich Angst davor, an dem Projekt zu arbeiten.
Schließlich äußerte sich der Betreuer zu dem Problem und forderte ein Update. Ich beschloss, dass ich es nicht länger aufschieben konnte und bereitete mich darauf vor, viel Zeit damit zu verbringen, das Problem in den Griff zu bekommen.
Ich habe Änderungen vom Upstream übernommen und meinen Fork erneut geklont, aber die Tests schlugen immer noch fehl. Beim Starten der App protokollierte der Server eine Warnung, dass einige Importe fehlschlugen, also beschloss ich, der Sache nachzugehen. Das Projekt verwendete eine Technologie zur Verwaltung des Monorepo namens Nx, und das Problem schien damit zusammenzuhängen, also habe ich eine Weile damit verbracht, mich mit der Funktionsweise zu befassen. Sie verwendeten auch etwas namens „Storybook“, in dem sie im beitragenden Dokument erwähnten, wie man anfängt, ohne sich jedoch die Mühe zu machen, zu erklären, was es war. Ich beschloss, es auszuprobieren und fand heraus, dass es für die Entwicklung von Komponenten durch isoliertes Rendern gedacht war. Als ich Storybook startete, funktionierte es ebenfalls nicht und es kam zu Importfehlern. Ich habe eine Weile versucht, die Importprobleme zu beheben, aber dann wurde mir klar, dass ich einfach an meinem Problem arbeiten könnte, ohne mich darum zu kümmern, also beschloss ich, sie einfach zu ignorieren und machte mich an die Arbeit.
Es hat eine Weile gedauert, bis ich herausgefunden habe, was ich überhaupt tun sollte und welchen Umfang das Problem hat. Die ursprüngliche Ausgabe war im Nachhinein ziemlich kryptisch, obwohl sie als „gute erste Ausgabe“ bezeichnet wurde. Ich nehme an, dass verschiedene Projekte unterschiedliche Vorstellungen davon haben, was eine gute Erstausgabe ausmacht. Ich habe zunächst die Dateien durchgesehen, um die Komponente zu finden, an der ich arbeiten sollte.
Ich habe versucht, in der Benutzeroberfläche nach der Diagrammkomponente zu suchen, an der ich arbeiten sollte, aber sie war in der übergeordneten Komponente nicht sichtbar. Ich habe einen Kommentar hinterlassen und den Betreuer gefragt, es dann aber sofort herausgefunden. Ich sah einige Initialisierungsfunktionen in der Diagrammkomponente und ihrer übergeordneten Komponente, also schrieb ich console.log(this) hinein, um zu sehen, womit ich arbeitete, und da wurde mir klar, dass die Diagrammkomponente nicht einmal gerendert wurde. Ich habe die Einstellungen im Client durchgesehen und einen experimentellen Funktionsschalter gefunden, den ich herausgefunden habe, als ich mir die HTML-Vorlage für die Komponente angesehen und festgestellt habe, dass sie hinter einer bedingten Anweisung verborgen war.
Nachdem ich das, woran ich gerade arbeitete, tatsächlich sehen konnte, wurde es etwas einfacher. Das Projekt verwendete chart.js für seine Diagramme, daher habe ich mir die Dokumentation angesehen, um zu sehen, wie Tooltips funktionieren. Da sie eine Hilfsfunktion speziell für Tooltips hatten, dachte ich mir: „Okay, mal sehen, wie sie Tooltips in anderen Diagrammen in der App verwenden.“ Ich fing an, mir einige andere Komponenten anzusehen, die Tooltips verwendeten, und zu prüfen, was sie mit der Komponente, an der ich arbeitete, gemeinsam hatten, d. h. wie sie Konfigurationsoptionen an den Tooltip weitergaben und so weiter. Ich habe bemerkt, wie sie den Tooltip in den anderen Komponenten eingerichtet und versucht haben, ihn zu replizieren, und es hat funktioniert! Ich hatte einen funktionierenden Tooltip! Nach zwei Wochen! ...Was immer noch nicht die richtigen Daten zeigte! Aber es war trotzdem ein Fortschritt! Plötzlich schien das Problem viel machbarer zu sein. Anstatt Angst vor dem riesigen Monorepo zu haben, konnte ich mich genau auf die Dinge konzentrieren, an denen ich arbeiten musste, und das war alles, worüber ich mir Sorgen machen musste.
Ich hatte etwas mehr Schwierigkeiten, herauszufinden, wie man Daten an den Tooltip weitergibt. Nachdem ich mir genauer angesehen hatte, wie die Komponente, die ich kopierte, Daten an den Tooltip weitergab, wurde mir klar, dass es für die Komponente, an der ich arbeitete, nicht funktionieren würde. Es empfing und verarbeitete Daten auf eine andere Art und Weise als meine, was mir klar wurde, als ich bemerkte, dass sie sich in apps/client/src/app/components/ befanden, während sich meine Komponente in libs/ui/src/lib befand. Ich ging davon aus, dass eine Komponente in einem völlig anderen Teil des Monorepos wahrscheinlich anders konzipiert ist, also habe ich nach anderen Komponenten gesucht, die Tooltips verwenden, und glücklicherweise habe ich eine im selben Verzeichnis wie meine Komponente gefunden.
Ich musste zunächst die Typsicherheit für die Parameter der Funktion deaktivieren, die ich zum Konfigurieren des Tooltips hinzugefügt habe, da das Objekt, von dem ich die Optionen erhielt, Eigenschaften hatte, auf die ich zugreifen musste, die nicht für seinen Typ definiert waren. Ich wollte den Betreuer danach fragen, aber als ich eine Komponente fand, die näher an meiner funktionierte, wurde mir klar, dass ich überhaupt keine Parameter brauchte. Anstatt Parameter zu definieren, verwendeten sie das Kontextobjekt, das automatisch an die Label-Callback-Funktion des Tooltip-Objekts übergeben wurde, also habe ich dasselbe getan. Obwohl ich einen Parameter nicht mehr benötigte, stieß ich auf ein Problem, bei dem andere Konfigurationsoptionen undefiniert wurden, als ich versuchte, den Parameter zu entfernen. Zuerst war ich nicht sicher, was los war, aber nach einer Weile fing es an zu funktionieren, also schätze ich, dass der Compiler einfach hinter meinen Änderungen zurückgeblieben ist (vielleicht habe ich vergessen, die Datei zu speichern?)
So konnte ich zwar die nötigen Daten in den Tooltip bekommen, musste ihn aber noch formatieren. Ich habe noch einmal auf die andere Komponente geschaut, um zu sehen, wie sie es gemacht haben. Sie übergaben Werte vom Kontextobjekt an Number.toLocaleString() und das Ergebnis wurde im Tooltip gerendert, also habe ich das Gleiche getan und es sah schön und sauber aus, sodass meine PR fertig war.
Funktions-/Einrichtungs-Tooltip in der Treemap-Diagrammkomponente
#3897
Behebt #3808.
Ich habe meine Implementierung auf den Tooltip in portfolio-proportion-chart.component.ts gestützt. Bitte teilen Sie mir mit, wenn Sie Änderungen wünschen.
Auf GitHub ansehen
Ich habe meine PR als zur Überprüfung bereit markiert und Feedback zu einigen Formatierungsänderungen erhalten. Es stellte sich heraus, dass ich viel mehr Zeilenumbrüche in meinem Code verwenden sollte, da alles zusammengewürfelt war, was mir erst auffiel, nachdem der Betreuer darauf hingewiesen hatte.
Ich habe die gewünschten Änderungen vorgenommen, aber ein paar Tage lang keine Antwort erhalten, was mich nervös machte. Glücklicherweise hat sich der Betreuer schließlich bei mir gemeldet und die Änderungen zusammengeführt.
Noch besser ist, dass der Betreuer kommentiert hat, dass es ein Folgeproblem gibt, an dem ich arbeiten könnte, um dem Tooltip weitere Daten hinzuzufügen. Da ich nun wusste, wie das Projekt aufgebaut war, ein wenig mehr über Angular und die Tooltips in Chart.js wusste, sah dieses Problem viel einfacher aus als beim ersten. Tatsächlich hat mich diese Ausgabe nur etwa eine Stunde gekostet, und nach einer Überprüfung wurde auch diese zusammengeführt.
[FEATURE] Tooltip in Treemap-Diagrammkomponente um Namen erweitern
#3904
Ziel dieser Ausgabe ist es, den Tooltip in der Treemap-Diagrammkomponente durch Hinzufügen des Namens (oder des Symbols als Ersatz) zu erweitern:
return [
// `${name ?? symbol}`,
// value or percentage as before
];
Nach dem Login kopieren
Lassen Sie sich von der GfPortfolioProportionChartComponent inspirieren.
Auf GitHub ansehen
Tooltip in der Treemap-Diagrammkomponente nach Namen anzeigen/erweitern
#3907
Behebt #3904.
Diese PR fügt den Namen (und das Symbol als Ersatz) zur Beschriftung für den Tooltip in GfTreemapChartComponent hinzu.
Es sollte auch möglich sein, den Namen/das Symbol stattdessen als Tooltip Titel anzuzeigen, wenn dies gewünscht wird, aber GfPortfolioProportionChartComponent fügt sie in die Beschriftung ein, daher habe ich beschlossen, es konsistent zu halten.
Auf GitHub ansehen
Die Arbeit an diesem Problem hat mein Selbstvertrauen beim Einstieg in unbekannten Code enorm gestärkt. Obwohl es anfangs unglaublich stressig war, konnte ich meine Aufgabe erfüllen, nachdem ich mich auf das konzentriert hatte, was ich tatsächlich tun musste, obwohl ich keinerlei Kenntnisse in Angular, Nx oder Chart.js hatte.
Das ist alles für diesen Beitrag. Ich muss noch an einer Pull-Anfrage für das Hacktoberfest arbeiten, also erwarten Sie bald einen weiteren Blog-Beitrag!
Das obige ist der detaillierte Inhalt vonSprung ins kalte Wasser. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
