對於我對開源的第三次貢獻，我參與了 Ghostfolio 項目，這是一個投資組合管理套件。

[功能] 在樹狀圖組件中設定工具提示 第3808章

dtslvr 發(fā)佈於 2024 年 9 月 22 日

本期的目標是在基於chart.js的treemap圖表元件中設定一個工具提示。

• 將 [baseCurrency]="user?.settings?.baseCurrency" 傳給 在 home-holdings.html 中
• 工具提示應顯示持有的 valueInBaseCurrency（如果可用）以及使用者的貨幣（baseCurrency）
• 嘗試使用 getTooltipOptions() 樣式

在 GitHub 上查看

在 GitHub 上尋找待解決的開放問題時，我遇到了這個問題。這次我一直想提高我的遊戲水平並開發(fā)一個功能，所以我認為這將是一個值得嘗試和解決的好問題。我沒有考慮太多就報名了。後來我發(fā)現(xiàn)這是一個 Angular 問題，這進一步激起了我的興趣，因為我對學習 Angular 很好奇。

雖然我報名了，但有一段時間我無法完成它——學校作業(yè)和生活都阻礙了我。一周過去了，我決定開始工作，所以我開始閱讀貢獻文檔，發(fā)現(xiàn)他們使用了 Docker。我想「太完美了，這週我的另一門課程教 Docker，所以我已經(jīng)準備好了」。我分叉並克隆了存儲庫，並嘗試安裝依賴項，但立即遇到了問題 - 與對等依賴項衝突有關。即使我按照說明操作，該應用程式甚至無法啟動。這嚇得我又一週不敢再做這件事了。

當我再次嘗試時，我再次克隆了我的 fork，並這次構建了應用程序，但一些測試在我開始之前就失敗了。我想在專案的 Slack 中聯(lián)繫一下，詢問是否只是我的問題，維護者回應說 CI 中的建置正在通過。我再一次被嚇得不敢參與這個計畫。

最終，維護者對這個問題發(fā)表了評論，要求更新。我決定不能再拖延了，並準備好花很多時間來解決這個問題。

我從上游引入了更改並再次克隆了我的分支，但測試仍然失敗。啟動應用程式時，伺服器會記錄警告，指出某些匯入失敗，因此我決定對此進行調查。該專案使用了一種名為 Nx 的 monorepo 管理技術，而該問題似乎相關，因此我花了一些時間研究它的作用。他們還使用了一種叫做 Storybook 的東西，他們在貢獻文件中提到瞭如何開始，但沒有費心解釋它是什麼。我決定檢查一下，發(fā)現(xiàn)它是透過單獨渲染組件來開發(fā)組件的。當我啟動 Storybook 時，它也不起作用，並且會出現(xiàn)導入錯誤。我花了一點時間嘗試調試導入問題，但後來意識到我可以只處理我的問題而不處理它們，所以我決定忽略它們並開始工作。

我花了一段時間才弄清楚我應該做什麼以及問題的範圍是什麼。事後看來，最初的問題相當神秘，儘管被標記為「好第一個問題」。我想不同的項目對於什麼是好的第一期有不同的想法。我首先瀏覽文件來找到我應該處理的元件。

我嘗試尋找我應該在 UI 中使用的圖表元件，但它在其父元件中不可見。我留下評論詢問維護者，但很快就弄清楚了。我在圖表元件及其父元件中看到了一些初始化函數(shù)，因此我在其中編寫了 console.log(this) 以查看我正在使用的內容，就在那時我意識到圖表元件甚至沒有被渲染。我深入研究了客戶端中的設置，發(fā)現(xiàn)了一個實驗性功能切換，這是我透過查看組件的 HTML 模板並發(fā)現(xiàn)它隱藏在條件語句後面而發(fā)現(xiàn)的。

當我真正看到我正在做的事情后，事情變得容易了一些。這個專案使用 Chart.js 作為圖表，因此我查看了它的文件來了解工具提示的工作原理。由於他們有專門用於工具提示的輔助功能，我心想「好吧，讓我們看看他們如何在應用程式的其他圖表中使用工具提示」。我開始研究一些使用工具提示的其他元件，並研究它們與我正在開發(fā)的元件的共同點，即它們如何將配置選項傳遞給工具提示等。我注意到他們如何在其他組件中設置工具提示並嘗試複製它，它成功了！我有一個有效的工具提示！兩週後！ ……仍然沒有顯示正確的數(shù)據(jù)！但這仍然是進步！突然間，這個問題似乎變得更可行了。我沒有被龐大的單一儲存庫嚇到，而是能夠將自己需要做的事情歸零，這就是我需要擔心的。

我在嘗試找出如何將資料傳遞到工具提示時遇到了一些困難。在仔細研究了我如何將傳遞的資料複製到工具提示的元件後，我意識到它不適用於我正在開發(fā)的元件。它以與我不同的方式接收和處理數(shù)據(jù)，當我注意到它位於apps/client/src/app/components/ 中，而我的組件位於libs/ui/src/lib 中時，我意識到了這一點。我認為 monorepo 中完全不同部分的元件可能被設計為以不同的方式工作，因此我搜尋了使用工具提示的其他元件，幸運的是，我在與我的元件相同的目錄中找到了一個元件。

我最初必須關閉為配置工具提示而添加的函數(shù)參數(shù)的類型安全性，因為我從中獲取選項的對象具有我需要訪問的屬性，而這些屬性並未為其類型定義。我本來打算向維護人員詢問此事，但當我找到一個與我的組件更接近的組件時，我意識到我根本不需要任何參數(shù)。他們沒有定義參數(shù)，而是使用自動傳遞給工具提示對像上的標籤回呼函數(shù)的上下文對象，所以我做了同樣的事情。儘管我不再需要參數(shù)，但我遇到了一個問題，當我嘗試刪除參數(shù)時，其他配置選項將變得未定義。起初我不確定發(fā)生了什麼，但它在一段時間後開始工作，所以我猜編譯器只是落後於我的更改（也許我忘記保存文件？）

所以我能夠將必要的資料放入工具提示中，但我仍然必須對其進行格式化。我再次查看其他組件，看看他們是如何做到的。他們將上下文物件中的值傳遞給 Number.toLocaleString() ，結果在工具提示中呈現(xiàn)，所以我做了同樣的事情，結果看起來漂亮乾淨，所以我的 PR 已經(jīng)準備好了。

樹狀圖組件中的功能/設定工具提示 第3897章

烏代拉納 發(fā)佈於 2024 年 10 月 9 日

修復#3808。

我的實作是基於portfolio-proportion-chart.component.ts中的工具提示。如果您需要任何更改，請告訴我。

在 GitHub 上查看

我將我的 PR 標記為可供審核，並收到了有關某些格式變更的回饋。事實證明，我應該在程式碼中使用更多的換行符，因為所有內容都被融合在一起，這是在維護者指出後我才注意到的。

我做了所要求的更改，但幾天沒有收到回復，這讓我很緊張。幸運的是，維護者最終回覆了我並合併了更改。

更好的是，維護者評論說我可以解決一個後續(xù)問題，以便在工具提示中添加更多資料。由於我現(xiàn)在知道了該專案是如何設定的，對 Angular 和 Chart.js 中的工具提示有了更多了解，因此與第一個問題相比，這個問題看起來容易多了。果然，這個問題只花了我一個小時左右，審核後也合併了。

[功能] 依名稱擴充樹狀圖元件中的工具提示 第3904章

dtslvr 發(fā)佈於 2024 年 10 月 10 日

此問題的目標是透過新增名稱（或符號作為後備）來擴展樹狀圖組件中的工具提示：

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

從 GfPortfolioProportionChartComponent 中獲得靈感。

在 GitHub 上查看

按名稱在樹狀圖組件中新增功能/擴充工具提示 第3907章

烏代拉納 發(fā)佈於 2024 年 10 月 10 日

修復#3904。

此 PR 將名稱（和符號作為後備）新增至 GfTreemapChartComponent 中工具提示的標籤。

如果願意的話，也應該可以將名稱/符號顯示為工具提示標題，但 GfPortfolioProportionChartComponent 將它們放在標籤中，所以我決定保持一致。

在 GitHub 上查看

解決這個問題大大增強了我跳入未知程式碼的信心。儘管一開始壓力很大，但一旦我專注於我真正需要做的事情，我就能夠完成我的任務，儘管我對 Angular、Nx 或 Chart.js 的了解為零。

這就是這篇文章的全部內容。我還有一個 Pull Request 需要為 Hacktoberfest 處理，所以希望很快能看到另一篇部落格文章！

以上是跳入深淵的詳細內容。更多資訊請關注PHP中文網(wǎng)其他相關文章！