對(duì)於我對(duì)開源的第三次貢獻(xiàn)，我參與了 Ghostfolio 項(xiàng)目，這是一個(gè)投資組合管理套件。

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

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

本期的目標(biāo)是在基於chart.js的treemap圖表元件中設(shè)定一個(gè)工具提示。

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

在 GitHub 上查看

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

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

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

最終，維護(hù)者對(duì)這個(gè)問題發(fā)表了評(píng)論，要求更新。我決定不能再拖延了，並準(zhǔn)備好花很多時(shí)間來解決這個(gè)問題。

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

我花了一段時(shí)間才弄清楚我應(yīng)該做什麼以及問題的範(fàn)圍是什麼。事後看來，最初的問題相當(dāng)神秘，儘管被標(biāo)記為「好第一個(gè)問題」。我想不同的項(xiàng)目對(duì)於什麼是好的第一期有不同的想法。我首先瀏覽文件來找到我應(yīng)該處理的元件。

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

當(dāng)我真正看到我正在做的事情后，事情變得容易了一些。這個(gè)專案使用 Chart.js 作為圖表，因此我查看了它的文件來了解工具提示的工作原理。由於他們有專門用於工具提示的輔助功能，我心想「好吧，讓我們看看他們?nèi)绾卧趹?yīng)用程式的其他圖表中使用工具提示」。我開始研究一些使用工具提示的其他元件，並研究它們與我正在開發(fā)的元件的共同點(diǎn)，即它們?nèi)绾螌⑴渲眠x項(xiàng)傳遞給工具提示等。我注意到他們?nèi)绾卧谄渌M件中設(shè)置工具提示並嘗試複製它，它成功了！我有一個(gè)有效的工具提示！兩週後！ ……仍然沒有顯示正確的數(shù)據(jù)！但這仍然是進(jìn)步！突然間，這個(gè)問題似乎變得更可行了。我沒有被龐大的單一儲(chǔ)存庫嚇到，而是能夠?qū)⒆约盒枰龅氖虑闅w零，這就是我需要擔(dān)心的。

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

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

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

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

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

修復(fù)#3808。

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

在 GitHub 上查看

我將我的 PR 標(biāo)記為可供審核，並收到了有關(guān)某些格式變更的回饋。事實(shí)證明，我應(yīng)該在程式碼中使用更多的換行符，因?yàn)樗袃?nèi)容都被融合在一起，這是在維護(hù)者指出後我才注意到的。

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

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

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

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

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

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

從 GfPortfolioProportionChartComponent 中獲得靈感。

在 GitHub 上查看

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

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

修復(fù)#3904。

此 PR 將名稱（和符號(hào)作為後備）新增至 GfTreemapChartComponent 中工具提示的標(biāo)籤。

如果願(yuàn)意的話，也應(yīng)該可以將名稱/符號(hào)顯示為工具提示標(biāo)題，但 GfPortfolioProportionChartComponent 將它們放在標(biāo)籤中，所以我決定保持一致。

在 GitHub 上查看

解決這個(gè)問題大大增強(qiáng)了我跳入未知程式碼的信心。儘管一開始?jí)毫艽?，但一旦我專注於我真正需要做的事情，我就能夠完成我的任?wù)，儘管我對(duì) Angular、Nx 或 Chart.js 的了解為零。

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

以上是跳入深淵的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！