这篇文章是关于我们改善开放式仪表板的旅程，该仪表板为开源供款提供了宝贵的见解。
去年10月，我们进行了新的Opensaused Insights仪表板的alpha发布。此次发射是与最大的开源黑客马拉松Hacktoberfest相吻合。我们的目标是提供有关接受，合并甚至垃圾邮件的贡献数量的见解和报告。从那以后，仪表板已经超越了Hacktoberfest数据，现在包括代表活跃和开放的GitHub拉动请求的github头像。
如果您想查看开源贡献connect your GitHub account to OpenSauced。
面临挑战
一开始，我们的团队在采购和操纵github头像以在仪表板上显示散点图电子图片时遇到了挑战。我们很难找到合适的解决方案，尤其是在有效处理大量图像时。
作为这一挑战的一部分，当您在要求资源（例如来自URL的头像）时未经身份验证时，GitHub具有积极的利率限制。我们需要获取化身，操纵它们，然后缓存它们。因为我们的产品本来是公开的，所以我们会吸引很多用法，并且可能会很快花钱。
解决方案：利用尼沃和云
为了克服这些挑战，团队转向 nivo图表库以进行可视化和 Cloudinary 用于图像操纵和缓存271K图像。我们成功地将Nivo图表集成到了我们的仪表板中，这要归功于其在D3顶部构建的丰富数据可视化组件集。
。通过利用Cloudinary的图像操纵功能和缓存策略，我们能够围绕化身并将它们无缝整合到仪表板中。
今天，这要归功于nivo和Cloudinary，但是该旅程包括许多试验和测试完美解决方案。
nivo是一个开源库，提供了一组丰富的数据可视化组件，该组件构建在Awesome D3和React库的顶部。
nivo 提供增压组件，以轻松构建Dataviz应用 它建在D3的顶部。
已有几个库已存在于React D3集成 但是只有少数提供服务器端渲染能力和完全声明的图表。
安装
要使用Nivo，您必须安装@nivo/core软件包，然后选择
根据您希望使用的图表：
yarn add @nivo/core @nivo/bar
功能
- 高度自定义
- 运动/过渡，由react-spring提供支持
- Interactive Components Playground
- Exhaustive Documentation
- SVG Charts
- HTML Charts
- Canvas Charts
- 服务器端渲染和HTTP API
- Patterns & Gradients
- Theming
- 响应式图表
讨论
软件包和组件
nivo 由多个软件包/组件组成，用于完整列表 请使用Components Explorer。
指南
支持者
欢迎捐赠帮助改善 nivo [Become a backer]
开放集体赞助商
云是操纵和缓存图像以重复使用的托管解决方案。
使用Apache电子绘图处理图像处理
在采用Nivo和Cloudinary之前，我们最初使用Apache E-Charts（特别是称为echarts-for-react的React包装器）来处理图像处理和加载。事实证明，这种方法非常慢，这是在我们有实时限制的同时找出更好的解决方案的一个过程。
寻找解决方案的旅程
我们面临着一个挑战，能够在页面上提供直接从GitHub采购的图像。可以缓存并操纵所需的化身以匹配我们的圆形图像设计。活动期间显示的贡献者的总数约为150k，今天接近300k的贡献者在最受欢迎的开源存储库中表示贡献。
。
React解决方案的电子图片使我们无法访问图像，并在显示图表后提供了有限的选项来编辑图像。我们首先在无花果设计中构建了产品，并为有机会拥有圆形图像而感到兴奋。尽管如此，我们的电子绘制库只会允许纯平和平方的图像，并且对图像的任何操作都是挑战。
[设计]
[现实]
在每个开发人员的职业生涯中都有一段时间，您会向您展示一种可能无法触及或范围之外的设计。图像周围的最简单请求破坏了我们的图表，并要求整个团队集思广益解决方案。
您可以在我们现在封闭的问题中看到头脑风暴。
Comment for
#373
嘿，另一个想法。如果我们添加cloudinary处理图像并传递这些URL怎么办？这将使我们能够转换（边框和圆形）图像，并在其中缓存一些。
另外，我们可以使用imagemagick（用于图像变换的CLI工具） + supabase storage免费执行此操作。
@brandonroberts您之前做过这样的事情吗？
解决方案1：JavaScript方法
我们的第一次尝试是使用快速的lib函数手动将图像四舍五入。
function applyBorderRadius(imageElement) {
imageElement.style.borderRadius = '50%';
}
// Get the image element
var image = document.getElementById('myImage');
// Apply the 50% border radius
applyBorderRadius(image);
即使是错误的，也总是很好。
这个第一个解决方案需要纠正，并且不起作用，因为图像在散布图表上使用图像限制了电子创建。事后，我们无法直接访问要操纵的要素。
我们需要一种在发送到图表之前操纵图像的方法。
解决方案2：成像图像图像
ImageMagick是一个有趣的开源平台，用于显示，创建，转换，修改和编辑图像。我有一些在以前的雇主与ImageMagick合作的经验，并很快找到了将图像绕到图表之前的解决方案。
但是，当我发现stackoverflow answer做类似的事情时，我选择使用它。
https://images.weserv.nl/?url=https://www.github.com/bdougie.png?size=60?v=4&h=300&w=300&fit=cover&mask=circle&maxage=7d
这很有效，但是我们仍然需要解决缓存问题。
我真的很想尝试建立一项服务来使用ImageMagick +新的Supabase storage来做到这一点，但是我不愿意维护该解决方案，我们只有一些时间来探索更独特的工具。
（如果您想建立这样的服务，请找到我，我很想成为Beta测试仪。）
我们需要一种方法来缓存图像，然后再发送到图表并开始查看工具或服务以使其更容易。
解决方案3：利用云进行图像操纵和缓存
要解决缓存问题并优化图像处理，我们探索了不同的工具和服务。
Cloudinary提供图像操纵和缓存策略。他们也有一个宽敞的免费层 - 但我指出的是，我们指出的是，我们的Hacktoberfest的最初数据数量立即被推到了付费层。
https://res.cloudinary.com/colbycloud/image/fetch/f_auto,q_auto/w_400,h_400,c_crop,r_400,g_auto/v1/https://avatars.githubusercontent.com/u/5713670
您也可以与解决方案现场看到PR。
feat: Leverage cloudinary for round images
#467
这是什么类型的PR？ （检查所有适用）
- [x]
png“> png”> ð 功能 - []
错误修复 - []
文档更新 - []
样式 - []
ð§–ð» 代码recactor - []
绩效改进 - []
test - []
build - []
ci - []
杂货 - []
© 还原 - []
Description
此公关是故意建立的，以替换将来的云。正如Vortex指出的那样，该解决方案最终将花费真正的钱。权衡是，我们最终将从该产品中赚钱，并利用它来为此付出代价。
。详细信息
- 添加云URL，以飞行编辑和缓存的头像。
- 只能编辑github.com URL。我在云方面执行此操作。
RAPIC票和文件
修复＃373
Mobile＆Desktop屏幕截图/录音
添加了测试？
- []
ð 是 - [x]
png“> png”> ð 不，因为它们不需要 - []
不，因为我需要帮助
添加到文档？
- []
readme.md - []
docs.opensaucced.pizza - []
dev.to/opensaucced - []
故事书 - [x]
png“> png”> ð 无需文档
[可选]我们是否需要执行任何工作后任务？
完成此问题https://github.com/open-sauced/insights/issues/468
[可选] GIF最能描述此PR或它如何使您感觉如何？
解决方案是使用github avatar作为imageUrl来建造包装器。
// lib/utils/roundedImages
const roundedImage = (imageUrl: string, cloudName: string | undefined) => {
return cloudName
? `https://res.cloudinary.com/${cloudName}/image/fetch/c_fill,g_face,h_300,w_300,bo_20px_solid_white,r_max/f_auto,e_shadow/${imageUrl}`
: imageUrl;
};
// components/organisms/Dashboard/dashboard.tsx
import roundedImage from "lib/utils/roundedImages";
scatterChartData = prs.map(({ updated_at, linesCount, author_login }) => {
const author_image = author_login.includes("[bot]") ? "octocat" : author_login;
const data = {
x: calcDaysFromToday(new Date(updated_at)),
y: linesCount,
contributor: author_login,
image: roundedImage(`https://www.github.com/${author_image}.png?size=60`, process.env.NEXT_PUBLIC_CLOUD_NAME)
};
return data;
});
}
与Cloudinary的交互是所有基于URL的，使我们可以将GitHub用户ID作为即时的选项传递。同一ID也用于回忆缓存的映像，这意味着我们默认情况下有缓存。我们也不需要为此构建任何新的基础架构。
最初的150k用户配置文件被缓存，我们立即需要每月为Pro Tier支付90美元，我们认为这对我们来说是合理且可预测的。
我们今天仍在制定相同的云计划，这主要是由于惯性以及我们仍然需要准备好建造和维护我们产品核心的东西的事实。到目前为止，Cloudinary正在缓存271K图像为我们转换。
这种情况是一种经典的构建与购买场景，我们可以在S3上构建自己的缓存和图像存储，但是在这样的解决方案上施加的技术债务并不是我们的优先事项。这笔90美元也不会使我们欠债。
迁移到Nivo图表
在12月，由于其现代特征和活跃的社区，我们从Apache E-Charts转换为Nivo图表。该决定是由过时的电子创图状态及其收到的有限贡献所驱动的。我们计划向Nivo上游贡献，以改善其与图像的集成和相互作用。
我们在Nivo讨论有关此功能和其他功能增强的讨论中进行了积极的对话。维护者的反应非常迅速，我们期待在上游贡献以支持该项目。
Support a popover like behavior for tooltips
#2201
您的功能请求与问题有关吗？请描述。 关于问题是什么的清晰清晰的描述。前任。当[...]
目前正在从事项目并使用散点图图。但通过提供的工具提示发现了一些限制
- 工具提示不能悬停在 上
描述您想要的解决方案 清晰简洁的描述您想发生的事情。
类似于Github Hovercard的行为，我们可以在工具提示上放置
描述您考虑过的替代方案 您考虑过的任何替代解决方案或功能的清晰清晰的描述。
其他上下文 在此处添加有关功能请求的任何其他上下文或屏幕截图。
如果您对我们的方法有任何想法或评论或可以共享的其他解决方案，我们欢迎您的意见。让我们继续互相学习并增强我们的开源项目。