オープンソースへの 3 回目の貢獻では、投資ポートフォリオ管理スイートである Ghostfolio プロジェクトに取り組みました。
ゴーストフォリオ
/
ゴーストフォリオ
ゴーストフォリオ
/
ゴーストフォリオ
オープンソースの資産管理ソフトウェア。 Angular NestJS Prisma Nx TypeScript ?
ゴーストフォリオ
オープンソースの資産管理ソフトウェア
Ghostfol.io | ライブデモ | ゴーストフォリオ プレミアム | よくある質(zhì)問 | ブログ | スラック | X
Ghostfolio は、Web テクノロジーで構(gòu)築されたオープンソースの資産管理ソフトウェアです。このアプリケーションを使用すると、忙しい人々が株、ETF、または暗號通貨を追跡し、データに基づいて確実な投資決定を下せるようになります。このソフトウェアは、継続的な運用での個人使用を目的として設計されています。
ゴーストフォリオ プレミアム
弊社の公式 Ghostfolio プレミアム クラウド サービスは、最も簡単に開始できる方法です。時間を節(jié)約できるため、ほとんどの人にとってこれが最良の選択肢になります。収益はホスティング インフラストラクチャのコストをカバーし、進行中の開発に資金を提供するために使用されます。
獨自のインフラストラクチャで Ghostfolio を?qū)g行したい場合は、「セルフホスティング」セクションで詳しい手順をご覧ください。
Ghostfolio を選ぶ理由
Ghostfolio はこんなあなたにぴったりです...
- ?複數(shù)のプラットフォームで株、ETF、または暗號通貨を取引する
- ?バイアンドホールドを追求中…
[機能] ツリーマップチャートコンポーネントにツールチップを設置
#3808
[機能] ツリーマップチャートコンポーネントにツールチップを設置
#3808
この問題の目標は、chart.js に基づいたツリーマップ チャート コンポーネントにツールチップを設定することです。
- [baseCurrency]="user?.settings?.baseCurrency" を
に渡します。 home-holdings.html 內(nèi) - ツールチップには、ユーザーの通貨 (baseCurrency) とともに利用可能な場合、保有資産からの valueInBaseCurrency が表示されます
- スタイルに getTooltipOptions() を使用してみてください
GitHub で取り組む未解決の問題を探しているときに、これを見つけました。今回はさらにステップアップして機能に取り組みたいと思っていたので、これは取り組んでみるのに良い問題だと判斷しました。あまり深く調(diào)べずに登録してしまいました。後でそれが Angular の問題であることがわかり、Angular の學習に興味があったのでさらに興味をそそられました。
登録したものの、學校の課題や生活に邪魔されて、しばらく取り組むことができませんでした。 1 週間が経過し、仕事に取り掛かろうと決心し、寄稿ドキュメントを読み始めたところ、Docker が使用されていることがわかりました。私は「完璧だ、今週は他のコースで Docker について教えているので、もう準備はできている」と思いました。リポジトリをフォークしてクローンし、依存関係をインストールしようとしましたが、すぐに問題、つまりピアの依存関係の競合に関連する問題に遭遇しました。指示に従ってもアプリが起動すらしませんでした。これで怖くなって、もう一週間これに取り組むのが億劫になりました。
もう一度試したとき、フォークのクローンを再度作成し、今度はアプリをビルドしましたが、開始する前にいくつかのテストが失敗していました。プロジェクトの Slack に連絡して、それが私の側(cè)だけのものなのか尋ねようと思ったのですが、メンテナは、CI のビルドは成功していると返答しました。またしても怖くなってプロジェクトに取り組むことから遠ざかってしまいました。
最終的に、メンテナはこの問題についてアップデートを求めるコメントを出しました。私はこれ以上先送りすることはできないと決心し、時間をかけてこの問題を解決する準備をしました。
アップストリームから変更を取り込み、フォークのクローンを再度作成しましたが、テストは依然として失敗しました。アプリを起動すると、サーバーは一部のインポートが失敗したことを示す警告をログに記録したため、それを調(diào)査することにしました。このプロジェクトでは、Nx と呼ばれるモノリポジトリを管理するテクノロジが使用されており、問題が関連しているように思えたので、それが何をしているのかを調(diào)査するのにしばらく時間を費やしました。彼らは Storybook と呼ばれるものも使用しており、寄稿ドキュメントでその開始方法について言及していましたが、それが何であるかについてはわざわざ説明しませんでした。調(diào)べてみると、コンポーネントを個別にレンダリングして開発するためのものであることがわかりました。 Storybook を起動しても動作せず、インポート エラーが発生しました。インポートの問題のデバッグに少し時間を費やしましたが、それらに対処しなくても問題に取り組むだけで済むことに気づき、無視することに決め、作業(yè)を開始しました。
自分が何をすべきなのか、問題の範囲がどこまでなのかを理解するまでに時間がかかりました。最初の號は「良い初號」と銘打たれていたにもかかわらず、今にして思えばかなり不可解だった。プロジェクトによって、良い創(chuàng)刊號とは何かというアイデアも異なると思います。私はまずファイルを調(diào)べて、作業(yè)するはずのコンポーネントを見つけました。
UI で作業(yè)するはずだったチャート コンポーネントを探してみましたが、その親コン??ポーネントには表示されませんでした。メンテナーに質(zhì)問するコメントを殘しましたが、すぐに解決しました。グラフ コンポーネントとその親コン??ポーネントに初期化関數(shù)がいくつかあることがわかり、その中に console.log(this) を書き込んで、何を操作しているのかを確認しました。そのとき、グラフ コンポーネントがレンダリングされていないことに気づきました。クライアントの設定を調(diào)べてみると、実験的な機能の切り替えを見つけました。これは、コンポーネントの HTML テンプレートを見て、條件ステートメントの背後に隠されていることがわかりました。
自分が取り組んでいることを?qū)g際に見ることができてから、物事は少し楽になりました。このプロジェクトではグラフに chart.js を使用していたので、ツールチップがどのように機能するかを確認するためにそのドキュメントにアクセスしました。彼らにはツールチップ専用のヘルパー関數(shù)があったので、「よし、アプリ內(nèi)の他のチャートでツールチップがどのように使われるかを見てみましょう」と思いました。私は、ツールチップを使用する他のコンポーネントをいくつか調(diào)べ、私が取り組んでいたコンポーネントとの共通點、つまりツールチップなどに構(gòu)成オプションを渡す方法を調(diào)べ始めました。他のコンポーネントでツールチップがどのように設定されているかに注目し、それを複製しようとしたところ、うまくいきました。機能するツールチップがありました! 2週間後！ ...それでも正しいデータが表示されませんでした。しかし、それにもかかわらず、それは進歩でした！突然、この問題ははるかに実行可能であるように思えました。大規(guī)模なモノリポジトリに怯える代わりに、取り組む必要のあるものに正確に焦點を當てることができ、心配する必要があったのはそれだけでした。
ツールチップにデータを渡す方法を見つけるのにもう少し苦労しました。コピーしていたコンポーネントがツールチップにデータを渡す方法を詳しく調(diào)べた結(jié)果、私が作業(yè)していたコンポーネントではそれが機能しないことに気付きました。私のものとは異なる方法でデータを受信して??処理していましたが、私のコンポーネントが libs/ui/src/lib にあったのに対し、データが apps/client/src/app/components/ にあることに気づいたときに気づきました。モノリポジトリのまったく別の部分にあるコンポーネントは、おそらく異なる動作をするように設計されているのではないかと考え、ツールヒントを使用する他のコンポーネントを探したところ、幸運なことに、コンポーネントと同じディレクトリにコンポーネントが見つかりました。
最初は、ツールヒントを構(gòu)成するために追加した関數(shù)のパラメーターのタイプ セーフティをオフにする必要がありました。これは、オプションを取得していたオブジェクトに、その型に対して定義されていないアクセスする必要のあるプロパティがあったためです。これについてはメンテナに尋ねようと思っていましたが、自分の動作に近いコンポーネントを見つけたので、パラメータはまったく必要ないことに気付きました。パラメーターを定義する代わりに、ツールチップ オブジェクトのラベル コールバック関數(shù)に自動的に渡されるコンテキスト オブジェクトが使用されたため、私も同じことを行いました。パラメーターがもう必要なくなったにもかかわらず、パラメーターを削除しようとすると、他の構(gòu)成オプションが未定義になるという問題が発生しました。最初は何が起こっているのかわかりませんでしたが、しばらくすると動作するようになったので、コンパイラが変更に遅れているだけだと思います (ファイルを保存するのを忘れたのでしょうか?)
それで、必要なデータをツールチップに取り込むことができましたが、それでもフォーマットする必要がありました。私はもう一度他のコンポーネントに注目して、どのように動作するかを確認しました。コンテキスト オブジェクトから Number.toLocaleString() に値が渡され、その結(jié)果がツールヒントにレンダリングされたので、私も同じことを行ったところ、見栄えが良くきれいに表示されたので、PR の準備が整いました。
ツリーマップ チャート コンポーネントの機能/ツールチップの設定
#3897
#3808 を修正します。
私は、portfolio-proportion-chart.component.ts のツールチップに基づいて実裝しました。変更をご希望の場合はお知らせください。
PR にレビュー準備完了のマークを付けたところ、いくつかの書式変更に関するフィードバックを受け取りました。すべてが滑らかにまとまっていたので、コード內(nèi)でより多くの改行を使用する必要があることがわかりました。メンテナに指摘されて初めてそれに気づきました。
要求された変更を加えましたが、數(shù)日間連絡がなかったため、不安になりました。幸いなことに、最終的にはメンテナが私に戻ってきて、変更をマージしてくれました。
さらに良いことに、メンテナは、ツールヒントにさらにデータを追加するために取り組むことができるフォローアップの問題があるとコメントしました。私はプロジェクトの設定方法を理解し、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 つあるので、近いうちに別のブログ投稿をご覧になることを期待しています!
以上がディープエンドへのジャンプの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
node.jsでHTTPリクエストを作成する方法は？
Jul 13, 2025 am 02:18 AM
node.jsでHTTPリクエストを開始するには、組み込みモジュール、axios、およびnode-fetchを使用する3つの一般的な方法があります。 1.依存関係のない內(nèi)蔵http/httpsモジュールを使用します。これは基本的なシナリオに適していますが、https.get（）を使用してデータを取得したり、.write（）を介してPOSTリクエストを送信するなど、データステッチとエラーモニタリングの手動処理が必要です。 2.Axiosは、約束に基づいたサードパーティライブラリです。簡潔な構(gòu)文と強力な機能を備えており、非同期/待ち聲、自動JSON変換、インターセプターなどをサポートします。非同期リクエスト操作を簡素化することをお勧めします。 3.Node-Fetchは、約束と単純な構(gòu)文に基づいて、ブラウザフェッチに似たスタイルを提供します
JavaScriptデータ型：プリミティブ対參照
Jul 13, 2025 am 02:43 AM
JavaScriptデータ型は、プリミティブタイプと參照タイプに分割されます。プリミティブタイプには、文字列、數(shù)字、ブール、ヌル、未定義、シンボルが含まれます。値は不変であり、コピーは値を割り當てるときにコピーされるため、互いに影響を與えません。オブジェクト、配列、関數(shù)などの參照タイプはメモリアドレスを保存し、同じオブジェクトを指す変數(shù)は互いに影響します。 TypeofとInstanceOFを使用してタイプを決定できますが、TypeOfNullの歴史的な問題に注意してください。これらの2種類の違いを理解することは、より安定した信頼性の高いコードを書くのに役立ちます。
React vs Angular vs Vue：どのJSフレームワークが最適ですか？
Jul 05, 2025 am 02:24 AM
どのJavaScriptフレームワークが最良の選択ですか？答えは、あなたのニーズに応じて最も適切なものを選択することです。 1.反応は柔軟で無料で、高いカスタマイズとチームアーキテクチャ機能を必要とする中規(guī)模および大規(guī)模プロジェクトに適しています。 2。Angularは、エンタープライズレベルのアプリケーションと長期的なメンテナンスに適した完全なソリューションを提供します。 3. Vueは使いやすく、中小規(guī)模のプロジェクトや迅速な発展に適しています。さらに、既存のテクノロジースタック、チームサイズ、プロジェクトのライフサイクル、およびSSRが必要かどうかは、フレームワークを選択する上で重要な要素でもあります。要するに、絶対に最良のフレームワークはありません。最良の選択は、あなたのニーズに合ったものです。
JavaScript Timeオブジェクト、誰かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。
Jul 08, 2025 pm 02:27 PM
こんにちは、JavaScript開発者！今週のJavaScriptニュースへようこそ！今週は、DenoとのOracleの商標紛爭、新しいJavaScript Timeオブジェクトがブラウザ、Google Chromeアップデート、およびいくつかの強力な開発ツールによってサポートされています。始めましょう！ 「JavaScript」の商標を登録しようとするDeno Oracleの試みとのOracleの商標紛爭は、論爭を引き起こしました。 Node.jsとDenoの作成者であるRyan Dahlは、商標をキャンセルするために請願書を提出しました。
キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？
Jul 08, 2025 am 02:43 AM
Cacheapiは、ブラウザからネットワークリクエストをキャッシュするツールです。これは、ウェブサイトのパフォーマンスとオフラインエクスペリエンスを改善するために、サービスワーカーと併用することがよくあります。 1.開発者は、スクリプト、スタイルシート、寫真などのリソースを手動で保存できるようにします。 2。要求に応じてキャッシュ応答と一致させることができます。 3.特定のキャッシュの削除またはキャッシュ全體のクリアをサポートします。 4.フェッチイベントを聞いているサービスワーカーを介して、キャッシュの優(yōu)先順位またはネットワークの優(yōu)先戦略を?qū)g裝できます。 5.オフラインサポート、繰り返しのアクセス速度の高速化、主要なリソースのプリロード、バックグラウンドアップデートコンテンツによく使用されます。 6.それを使用する場合、キャッシュバージョンの制御、ストレージ制限、およびHTTPキャッシングメカニズムとの違いに注意する必要があります。
ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ
Jul 08, 2025 am 02:40 AM
約束は、JavaScriptで非同期操作を処理するためのコアメカニズムです。チェーンコール、エラー処理、コンビナーの理解は、アプリケーションをマスターするための鍵です。 1.チェーンコールは、.then（）を通じて新しい約束を返し、非同期プロセスの連結(jié)を?qū)g現(xiàn)します。それぞれ.then（）は以前の結(jié)果を受け取り、値または約束を返すことができます。 2。エラー処理は、.catch（）を使用して例外をキャッチしてサイレント障害を回避し、キャッチのデフォルト値を返すためにプロセスを継続する必要があります。 3。promise.all（）などの組み合わせ（すべての成功後にのみ成功しました）、promise.race（）（最初の完了が返されます）、promise.allsettled（）（すべての完了を待っています）
JavaScriptでのデータ操作のためのArray.Prototypeメソッドを活用します
Jul 06, 2025 am 02:36 AM
.map（）、.filter（）、.reduce（）などのJavaScriptアレイ內(nèi)蔵メソッドは、データ処理を簡素化できます。 1）.map（）は、要素を1つに変換して新しい配列を生成するために使用されます。 2）.filter（）は、條件ごとに要素をフィルタリングするために使用されます。 3）.reduce（）は、データを単一の値として集約するために使用されます。使用すると誤用を避ける必要があり、その結(jié)果、副作用やパフォーマンスの問題が発生します。
JSラウンドアップ：JavaScriptイベントループに深く潛り込む
Jul 08, 2025 am 02:24 AM
JavaScriptのイベントループは、コールスタック、WebAPIS、およびタスクキューを調(diào)整することにより、非同期操作を管理します。 1.コールスタックは同期コードを?qū)g行し、非同期タスクに遭遇すると、処理のためにWebAPIに引き渡されます。 2。WebAPIがバックグラウンドでタスクを完了した後、コールバックを?qū)潖辘工毳濠`（マクロタスクまたはマイクロタスク）に入れます。 3.イベントループは、コールスタックが空であるかどうかをチェックします?？栅螆龊稀ⅴ畅`ルバックはキューから取り出され、実行のためにコールスタックに押し込まれます。 4.マイクロタスク（Promise.thenなど）は、マクロタスク（SettimeOutなど）より優(yōu)先されます。 5.イベントループを理解するには、メインスレッドのブロックを避け、コード実行順序を最適化するのに役立ちます。
