ホームページ >ウェブフロントエンド >jsチュートリアル >ディープエンドへのジャンプ
ディープエンドへのジャンプ
- Mary-Kate Olsenオリジナル
- 2024-10-19 12:34:29233ブラウズ
オープンソースへの 3 回目の貢献では、投資ポートフォリオ管理スイートである Ghostfolio プロジェクトに取り組みました。
ゴーストフォリオ
/
ゴーストフォリオ
オープンソースの資産管理ソフトウェア。 Angular NestJS Prisma Nx TypeScript ?
ゴーストフォリオ
オープンソースの資産管理ソフトウェア
Ghostfol.io | ライブデモ | ゴーストフォリオ プレミアム | よくある質問 | ブログ | スラック | X
Ghostfolio は、Web テクノロジーで構築されたオープンソースの資産管理ソフトウェアです。このアプリケーションを使用すると、忙しい人々が株、ETF、または暗号通貨を追跡し、データに基づいて確実な投資決定を下せるようになります。このソフトウェアは、継続的な運用での個人使用を目的として設計されています。
ゴーストフォリオ プレミアム
弊社の公式 Ghostfolio プレミアム クラウド サービスは、最も簡単に開始できる方法です。時間を節約できるため、ほとんどの人にとってこれが最良の選択肢になります。収益はホスティング インフラストラクチャのコストをカバーし、進行中の開発に資金を提供するために使用されます。
独自のインフラストラクチャで Ghostfolio を実行したい場合は、「セルフホスティング」セクションで詳しい手順をご覧ください。
Ghostfolio を選ぶ理由
Ghostfolio はこんなあなたにぴったりです...
- ?複数のプラットフォームで株、ETF、または暗号通貨を取引する
- ?バイアンドホールドを追求中…
[機能] ツリーマップチャートコンポーネントにツールチップを設置
#3808
この問題の目標は、chart.js に基づいたツリーマップ チャート コンポーネントにツールチップを設定することです。
- [baseCurrency]="user?.settings?.baseCurrency" を
に渡します。 home-holdings.html 内 - ツールチップには、ユーザーの通貨 (baseCurrency) とともに利用可能な場合、保有資産からの valueInBaseCurrency が表示されます
- スタイルに getTooltipOptions() を使用してみてください
GitHub で取り組む未解決の問題を探しているときに、これを見つけました。今回はさらにステップアップして機能に取り組みたいと思っていたので、これは取り組んでみるのに良い問題だと判断しました。あまり深く調べずに登録してしまいました。後でそれが Angular の問題であることがわかり、Angular の学習に興味があったのでさらに興味をそそられました。
登録したものの、学校の課題や生活に邪魔されて、しばらく取り組むことができませんでした。 1 週間が経過し、仕事に取り掛かろうと決心し、寄稿ドキュメントを読み始めたところ、Docker が使用されていることがわかりました。私は「完璧だ、今週は他のコースで Docker について教えているので、もう準備はできている」と思いました。リポジトリをフォークしてクローンし、依存関係をインストールしようとしましたが、すぐに問題、つまりピアの依存関係の競合に関連する問題に遭遇しました。指示に従ってもアプリが起動すらしませんでした。これで怖くなって、もう一週間これに取り組むのが億劫になりました。
もう一度試したとき、フォークのクローンを再度作成し、今度はアプリをビルドしましたが、開始する前にいくつかのテストが失敗していました。プロジェクトの Slack に連絡して、それが私の側だけのものなのか尋ねようと思ったのですが、メンテナは、CI のビルドは成功していると返答しました。またしても怖くなってプロジェクトに取り組むことから遠ざかってしまいました。
最終的に、メンテナはこの問題についてアップデートを求めるコメントを出しました。私はこれ以上先送りすることはできないと決心し、時間をかけてこの問題を解決する準備をしました。
アップストリームから変更を取り込み、フォークのクローンを再度作成しましたが、テストは依然として失敗しました。アプリを起動すると、サーバーは一部のインポートが失敗したことを示す警告をログに記録したため、それを調査することにしました。このプロジェクトでは、Nx と呼ばれるモノリポジトリを管理するテクノロジが使用されており、問題が関連しているように思えたので、それが何をしているのかを調査するのにしばらく時間を費やしました。彼らは Storybook と呼ばれるものも使用しており、寄稿ドキュメントでその開始方法について言及していましたが、それが何であるかについてはわざわざ説明しませんでした。調べてみると、コンポーネントを個別にレンダリングして開発するためのものであることがわかりました。 Storybook を起動しても動作せず、インポート エラーが発生しました。インポートの問題のデバッグに少し時間を費やしましたが、それらに対処しなくても問題に取り組むだけで済むことに気づき、無視することに決め、作業を開始しました。
自分が何をすべきなのか、問題の範囲がどこまでなのかを理解するまでに時間がかかりました。最初の号は「良い初号」と銘打たれていたにもかかわらず、今にして思えばかなり不可解だった。プロジェクトによって、良い創刊号とは何かというアイデアも異なると思います。私はまずファイルを調べて、作業するはずのコンポーネントを見つけました。
UI で作業するはずだったチャート コンポーネントを探してみましたが、その親コンポーネントには表示されませんでした。メンテナーに質問するコメントを残しましたが、すぐに解決しました。グラフ コンポーネントとその親コンポーネントに初期化関数がいくつかあることがわかり、その中に console.log(this) を書き込んで、何を操作しているのかを確認しました。そのとき、グラフ コンポーネントがレンダリングされていないことに気づきました。クライアントの設定を調べてみると、実験的な機能の切り替えを見つけました。これは、コンポーネントの HTML テンプレートを見て、条件ステートメントの背後に隠されていることがわかりました。
自分が取り組んでいることを実際に見ることができてから、物事は少し楽になりました。このプロジェクトではグラフに chart.js を使用していたので、ツールチップがどのように機能するかを確認するためにそのドキュメントにアクセスしました。彼らにはツールチップ専用のヘルパー関数があったので、「よし、アプリ内の他のチャートでツールチップがどのように使われるかを見てみましょう」と思いました。私は、ツールチップを使用する他のコンポーネントをいくつか調べ、私が取り組んでいたコンポーネントとの共通点、つまりツールチップなどに構成オプションを渡す方法を調べ始めました。他のコンポーネントでツールチップがどのように設定されているかに注目し、それを複製しようとしたところ、うまくいきました。機能するツールチップがありました! 2週間後！ ...それでも正しいデータが表示されませんでした。しかし、それにもかかわらず、それは進歩でした！突然、この問題ははるかに実行可能であるように思えました。大規模なモノリポジトリに怯える代わりに、取り組む必要のあるものに正確に焦点を当てることができ、心配する必要があったのはそれだけでした。
ツールチップにデータを渡す方法を見つけるのにもう少し苦労しました。コピーしていたコンポーネントがツールチップにデータを渡す方法を詳しく調べた結果、私が作業していたコンポーネントではそれが機能しないことに気付きました。私のものとは異なる方法でデータを受信して処理していましたが、私のコンポーネントが libs/ui/src/lib にあったのに対し、データが apps/client/src/app/components/ にあることに気づいたときに気づきました。モノリポジトリのまったく別の部分にあるコンポーネントは、おそらく異なる動作をするように設計されているのではないかと考え、ツールヒントを使用する他のコンポーネントを探したところ、幸運なことに、コンポーネントと同じディレクトリにコンポーネントが見つかりました。
最初は、ツールヒントを構成するために追加した関数のパラメーターのタイプ セーフティをオフにする必要がありました。これは、オプションを取得していたオブジェクトに、その型に対して定義されていないアクセスする必要のあるプロパティがあったためです。これについてはメンテナに尋ねようと思っていましたが、自分の動作に近いコンポーネントを見つけたので、パラメータはまったく必要ないことに気付きました。パラメーターを定義する代わりに、ツールチップ オブジェクトのラベル コールバック関数に自動的に渡されるコンテキスト オブジェクトが使用されたため、私も同じことを行いました。パラメーターがもう必要なくなったにもかかわらず、パラメーターを削除しようとすると、他の構成オプションが未定義になるという問題が発生しました。最初は何が起こっているのかわかりませんでしたが、しばらくすると動作するようになったので、コンパイラが変更に遅れているだけだと思います (ファイルを保存するのを忘れたのでしょうか?)
それで、必要なデータをツールチップに取り込むことができましたが、それでもフォーマットする必要がありました。私はもう一度他のコンポーネントに注目して、どのように動作するかを確認しました。コンテキスト オブジェクトから Number.toLocaleString() に値が渡され、その結果がツールヒントにレンダリングされたので、私も同じことを行ったところ、見栄えが良くきれいに表示されたので、PR の準備が整いました。
ツリーマップ チャート コンポーネントの機能/ツールチップの設定
#3897
#3808 を修正します。
私は、portfolio-proportion-chart.component.ts のツールチップに基づいて実装しました。変更をご希望の場合はお知らせください。
PR にレビュー準備完了のマークを付けたところ、いくつかの書式変更に関するフィードバックを受け取りました。すべてが滑らかにまとまっていたので、コード内でより多くの改行を使用する必要があることがわかりました。メンテナに指摘されて初めてそれに気づきました。
要求された変更を加えましたが、数日間連絡がなかったため、不安になりました。幸いなことに、最終的にはメンテナが私に戻ってきて、変更をマージしてくれました。
さらに良いことに、メンテナは、ツールヒントにさらにデータを追加するために取り組むことができるフォローアップの問題があるとコメントしました。私はプロジェクトの設定方法を理解し、Angular と Chart.js のツールチップについても少し知ったので、この問題は最初の問題に比べてはるかに簡単に見えました。案の定、この問題には 1 時間ほどしかかかりませんでした。レビューの後、その問題もマージされました。
[機能] ツリーマップ チャート コンポーネントのツールチップを名前で拡張します
#3904
この問題の目的は、名前 (またはフォールバックとしてのシンボル) を追加して、ツリーマップ チャート コンポーネントのツールチップを拡張することです。
return [
// `${name ?? symbol}`,
// value or percentage as before
];
GfPortfolioProportionChartComponent からインスピレーションを得てください。
ツリーマップ チャート コンポーネントの名前による機能/拡張ツールチップ
#3907
#3904 を修正します。
この PR は、GfTreemapChartComponent のツールチップのラベルに名前 (およびフォールバックとしてのシンボル) を追加します。
必要に応じて、代わりにツールチップ タイトル として名前/シンボルを表示することもできるはずですが、GfPortfolioProportionChartComponent はラベルにそれらを配置するため、一貫性を保つことにしました。
この問題に取り組むことで、未知のコードに飛び込む自信が大幅に高まりました。最初は非常にストレスがかかりましたが、実際にやるべきことに集中してからは、Angular、Nx、または Chart.js の知識がゼロでも、タスクを完了することができました。
この投稿は以上です。 Hacktoberfest に向けて取り組むプル リクエストがもう 1 つあるので、近いうちに別のブログ投稿をご覧になることを期待しています!
以上がディープエンドへのジャンプの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。