对于我对开源的第三次贡献，我参与了 Ghostfolio 项目，这是一个投资组合管理套件。
幽灵作品集
/
幽灵作品集
开源财富管理软件
Ghostfol.io | 现场演示 | Ghostfolio 高级版 | 常见问题解答 | 博客 | 松弛 | X
Ghostfolio是一款利用网络技术构建的开源财富管理软件。该应用程序使忙碌的人们能够跟踪股票、ETF 或加密货币，并做出可靠的、数据驱动的投资决策。该软件专为个人连续操作使用而设计。
我们的官方Ghostfolio Premium云产品是最简单的入门方式。由于它节省了时间，这对于大多数人来说将是最佳选择。收入用于支付托管基础设施的成本并资助持续的开发。
如果您喜欢在自己的基础设施上运行 Ghostfolio，请在自托管部分找到更多说明。
Ghostfolio 适合您，如果您...
[功能] 在树形图组件中设置工具提示
第3808章
本期的目标是在基于chart.js的treemap图表组件中设置一个工具提示。
在 GitHub 上寻找待解决的开放问题时，我遇到了这个问题。这次我一直想提高我的游戏水平并开发一个功能，所以我认为这将是一个值得尝试和解决的好问题。我没有考虑太多就报名了。后来我发现这是一个 Angular 问题，这进一步激起了我的兴趣，因为我对学习 Angular 很好奇。
虽然我报名了，但有一段时间我无法完成它——学校作业和生活都阻碍了我。一周过去了，我决定开始工作，所以我开始阅读贡献文档，发现他们使用了 Docker。我想“太完美了，这周我的另一门课程教 Docker，所以我已经准备好了”。我分叉并克隆了存储库，并尝试安装依赖项，但立即遇到了问题 - 与对等依赖项冲突有关。即使我按照说明操作，该应用程序甚至无法启动。这吓得我又一周不敢再做这件事了。
当我再次尝试时，我再次克隆了我的 fork，并这次构建了应用程序，但一些测试在我开始之前就失败了。我想在项目的 Slack 中联系一下，询问是否只是我的问题，维护者回应说 CI 中的构建正在通过。我再一次被吓得不敢参与这个项目。
最终，维护者对这个问题发表了评论，要求更新。我决定不能再拖延了，并准备好花很多时间来解决这个问题。
我从上游引入了更改并再次克隆了我的分支，但测试仍然失败。启动应用程序时，服务器会记录一条警告，指出某些导入失败，因此我决定对此进行调查。该项目使用了一种名为 Nx 的 monorepo 管理技术，并且该问题似乎相关，因此我花了一些时间研究它的作用。他们还使用了一种叫做 Storybook 的东西，他们在贡献文档中提到了如何开始，但没有费心解释它是什么。我决定检查一下，发现它是通过单独渲染组件来开发组件的。当我启动 Storybook 时，它也不起作用，并且会出现导入错误。我花了一点时间尝试调试导入问题，但后来意识到我可以只处理我的问题而不处理它们，所以我决定忽略它们并开始工作。
我花了一段时间才弄清楚我应该做什么以及问题的范围是什么。事后看来，最初的问题相当神秘，尽管被标记为“好第一个问题”。我想不同的项目对于什么是好的第一期有不同的想法。我首先浏览文件来找到我应该处理的组件。
我尝试寻找我应该在 UI 中使用的图表组件，但它在其父组件中不可见。我留下评论询问维护者，但很快就弄清楚了。我在图表组件及其父组件中看到了一些初始化函数，因此我在其中编写了 console.log(this) 以查看我正在使用的内容，就在那时我意识到图表组件甚至没有被渲染。我深入研究了客户端中的设置，发现了一个实验性功能切换，这是我通过查看组件的 HTML 模板并发现它隐藏在条件语句后面而发现的。
当我真正看到我正在做的事情后，事情变得容易了一些。该项目使用 Chart.js 作为图表，因此我查看了它的文档来了解工具提示的工作原理。由于他们有专门用于工具提示的辅助功能，我心想“好吧，让我们看看他们如何在应用程序的其他图表中使用工具提示”。我开始研究一些使用工具提示的其他组件，并研究它们与我正在开发的组件的共同点，即它们如何将配置选项传递给工具提示等。我注意到他们如何在其他组件中设置工具提示并尝试复制它，它成功了！我有一个有效的工具提示！两周后！ ...仍然没有显示正确的数据！但这仍然是进步！突然间，这个问题似乎变得更可行了。我没有被庞大的单一存储库吓到，而是能够将自己需要做的事情归零，这就是我需要担心的。
我在尝试找出如何将数据传递到工具提示时遇到了一些困难。在仔细研究了我如何将传递的数据复制到工具提示的组件后，我意识到它不适用于我正在开发的组件。它以与我不同的方式接收和处理数据，当我注意到它位于 apps/client/src/app/components/ 中，而我的组件位于 libs/ui/src/lib 中时，我意识到了这一点。我认为 monorepo 中完全不同部分的组件可能被设计为以不同的方式工作，因此我搜索了使用工具提示的其他组件，幸运的是，我在与我的组件相同的目录中找到了一个组件。
我最初必须关闭为配置工具提示而添加的函数参数的类型安全性，因为我从中获取选项的对象具有我需要访问的属性，而这些属性并未为其类型定义。我本来打算向维护人员询问此事，但当我找到一个与我的组件更接近的组件时，我意识到我根本不需要任何参数。他们没有定义参数，而是使用自动传递给工具提示对象上的标签回调函数的上下文对象，所以我做了同样的事情。尽管我不再需要参数，但我遇到了一个问题，当我尝试删除参数时，其他配置选项将变得未定义。起初我不确定发生了什么，但它在一段时间后开始工作，所以我猜编译器只是落后于我的更改（也许我忘记保存文件？）
所以我能够将必要的数据放入工具提示中，但我仍然必须对其进行格式化。我再次查看其他组件，看看他们是如何做到的。他们将上下文对象中的值传递给 Number.toLocaleString() ，结果在工具提示中呈现，所以我做了同样的事情，结果看起来漂亮干净，所以我的 PR 已经准备好了。
树形图组件中的功能/设置工具提示
第3897章
修复#3808。
我的实现基于portfolio-proportion-chart.component.ts中的工具提示。如果您需要任何更改，请告诉我。
我将我的 PR 标记为可供审核，并收到了有关某些格式更改的反馈。事实证明，我应该在代码中使用更多的换行符，因为所有内容都被融合在一起，这是在维护者指出后我才注意到的。
我做了所要求的更改，但几天没有收到回复，这让我很紧张。幸运的是，维护者最终回复了我并合并了更改。
更好的是，维护者评论说我可以解决一个后续问题，以便向工具提示添加更多数据。由于我现在知道了该项目是如何设置的，对 Angular 和 Chart.js 中的工具提示有了更多了解，因此与第一个问题相比，这个问题看起来容易多了。果然，这个问题只花了我一个小时左右，审核后也合并了。
[功能] 按名称扩展树形图组件中的工具提示
第3904章
此问题的目标是通过添加名称（或符号作为后备）来扩展树形图组件中的工具提示：
return [
// `${name ?? symbol}`,
// value or percentage as before
];
从 GfPortfolioProportionChartComponent 中获取灵感。
按名称在树形图组件中添加功能/扩展工具提示
第3907章
修复#3904。
此 PR 将名称（和符号作为后备）添加到 GfTreemapChartComponent 中工具提示的标签。
如果愿意的话，也应该可以将名称/符号显示为工具提示标题，但 GfPortfolioProportionChartComponent 将它们放在标签中，所以我决定保持一致。
解决这个问题极大地增强了我跳入未知代码的信心。尽管一开始压力很大，但一旦我专注于我真正需要做的事情，我就能够完成我的任务，尽管我对 Angular、Nx 或 Chart.js 的了解为零。
这就是这篇文章的全部内容。我还有一个 Pull Request 需要为 Hacktoberfest 处理，所以希望很快能看到另一篇博客文章！
以上是跳入深渊的详细内容。更多信息请关注PHP中文网其他相关文章！
