写点什么

使用 Apache ECharts 呈现社区活动的渲染图

  • 2021-08-25
  • 本文字数:2286 字

    阅读完需:约 8 分钟

使用Apache ECharts呈现社区活动的渲染图

整理 | 王强


ApacheCon Asia 2021大会的“数据可视化论坛”上,Apache APISIX Committer 孙毅发表了题为“使用 Echarts 呈现社区活跃度”的演讲。本文是这次演讲的内容总结。

 


大家好,我是孙毅,是 Apache APISIX 的 Committer。今天由我来给大家分享使用Apache ECharts来呈现社区活跃度这个主题。

项目介绍


这个项目主要是由我和后端的吴舒旸同学两个人完成的。上面是仓库地址[1]和我们的 ID,大家有 bug 或者 feature 都可以去提交。

项目初衷


我们为什么要做一个这样的小工具呢?我们在日常开发中会经常遇到选型的问题,怎么来判断开源社区是否活跃稳定,是否能可持续发展?如果单从 Star 数或者是 Fork 数这些维度来判断,对我们来说是不够的。

 

我们的思考是:社区的活跃度也就是社区开发者的活跃度,我们可以收集一些开发者的数据,并做成可视化的图表来判断这个社区是否是健康的、活跃的。于是我们就准备做一个这样的工具[2]来供大家使用。

为何选择 ECharts 来渲染图表


在我们决定要做这个事之后,我们开始做了一些技术选型,最后我们选择了 ECharts 来渲染我们的图表,原因有如下几点:

 

  1. 它是 Apache 软件协议,是一个比较友好流行的开源协议。

  2. ECharts 的上手成本比较低,上手比较快。我们调研的时候发现在它的官网里面有大量图表示例,可以满足我们当前的需求。

  3. 它的文档示例非常丰富。这会让我们后面避开很多坑,在需要支持的时候我们就可以去翻文档来解决我们的问题。

  4. 它同时也有非常丰富的 API。我们目前还没有遇到比较高阶的特性需求,但后期如果我们会有一些比较高阶的玩儿法,那么 ECharts 的丰富 API 相信可以去完成我们的这些需求。

项目功能


下面介绍一下这款图表工具的一些功能。



我们这个工具目前有两个图表,第一个图表就是贡献者增长曲线,是由每个贡献者的首次提交的日期整理而成。图表上可以看到横坐标代表时间,纵坐标代表贡献者数量,从左到右代表这个项目从立项到现在的贡献者总人数的变化过程。



第二个功能是我们的贡献者增长曲线具有合并查看模式。

 

以 apisix 为例,我们会把和 apisix 所有相关的仓库数据聚合在一起来展示。我们可以看到左侧是我们的普通模式,就是仓库的贡献者的变化;右面的是我们的合并模式,会把这些仓库的所有贡献者的数据聚合一起,有更全面的统计。目前我们支持合并模式的仓库有 apisix、skywalking、openwhisk,还有 dubbo。如果大家也想把自己的仓库做成这种合并模式,可以提 feature,或者修改 yaml 文件,就可以支持查看模式了。



另外一个功能是贡献者曲线的多仓库对比模式。多仓库对比模式可以让某一领域的使用者分析某一领域的软件近期的变化。我们可以从这个图表中看到 apisix 用了两年的时间就快达到了 kong 6 年的贡献者人数的总和。

 

另外一个是分享功能。当使用者觉得这些图表对他们来说有用的时候,他们想的第一件事是去分享给其他人。我们也对分享这一块比较重视,做了如下几个分享:

 

  1. 网页分享。你可以把分享的链接复制给你的朋友,直接访问链接就会看到你当前的图表。

  2. 图片分享。这个和网页有点类似,只不过它会直接给你返回一张图片。

  3. 社交媒体分享。我们先做了 Twitter,点击 Twitter 之后就会跳转到 Twitter 平台,然后自动编辑你的 Post。

  4. 值得提的一点是我们同样也支持 Markdown 分享。你可以直接把这段代码复制到你的 Markdown 文件中,就可以把这个图表展示在你的 Markdown 里边。需要注意的是我们的图片是由后端动态生成的,也就是说一旦你的贡献者数量,或者贡献者活跃度有更改的话,那么这个图片是会动态刷新的。你只需要首次给它提交到你的仓库里面,后期的数据更新都是由这个服务自己动态完成的。

 

我们做的另外一个图表是月贡献者增长曲线。这个意思是说每一个仓库在每个月具体有多少个活跃的贡献者。这个图表可以让我们分析这个仓库在短期内的活跃度。



我们可以看到 apisix 的活跃度现在是稳定在 kong 的两倍左右。

项目反响


我们把这个工具做完,并且觉得它是稳定可用的时候,我们秉着开源精神将这个工具提交给了一些开源项目。目前有如下这些仓库在用,并且得到比较好的一些反馈。



我们从项目想法到开发计划,再到落地成品到用户使用,这个过程像是一种快乐的传递。尤其是当看到用户在使用我们的小工具,这个工具真真切切帮助了使用者从更多纬度去分析社区的活跃度,这一点是令我们非常开心的。

项目未来规划


目前这个工具已经是稳定可用了,但后期一定会有其他的一些需求,需要去开发。我们后期会更多倾听社区的声音,将社区里面合理的需求转化为产品。我相信有社区力量的注入,我们的项目将会更加完善、更加好用、好看。

项目总结


在整个项目的开发过程中,我认识到一个人的能力终归是有限的,而社区的能力是无限的,因为社区会有源源不断的有能力的人来注入。

 

像我们在开发合并模式的时候,这个需求是由 skyWalking 社区提出的。我们在向 skywalking 提交我们的贡献者视图的时候,社区里面有人就提出可不可以增加合并模式来完成多个仓库的聚合展示。经过我们的讨论分析后,我们觉得这个功能不仅仅对 skywalking 是有用的,其他小伙伴也会有类似的需求,我们就把这个事情落地了。如果是单靠我和后端同学去想到底需要哪些功能,可能就是比较吃力。从这一方面上来说,社区的能力以及社区的需求是无限的。

 

我们的图表从表观上看去只是一条冷冰冰的数据,但是我们每条可视化数据背后都是一位位优秀的工程师用汗水浇铸而成的。这就让我们的工作变得更加有意义,因为每一个点都是工程师辛辛苦苦参与到这个开源项目当中的成果,这让我们的事情变得更有意义。

 

如上就是我的分享内容,谢谢大家。

 

[1] 仓库地址:https://github.com/api7/contributor-graph

[2] 工具链接:https://www.apiseven.com/en/contributor-graph

2021-08-25 12:404669

评论

发布
暂无评论
发现更多内容

用上ConcurrentHashMap,就没有并发问题了?

海拉鲁

Java 并发

直播带货需要运营者实名验证:规范行业有利于健康发展

石头IT视角

Redis可以做哪些事?

Java旅途

redis

Java-技术专题-LocalDate和LocalTime和LocalDateTime

洛神灬殇

使用 Maven Archetype 基于 IDEA 快速创建项目

程序员小航

Java maven 开发 项目 Archetype

架构师训练营 -week06-作业

大刘

极客大学架构师训练营

创新方案百花齐放,英特尔助力2020 EdgeX中国挑战赛推动智能边缘行业创新及人才发展

E科讯

LeetCode题解:78. 子集,递归+for循环+回溯,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

K近邻算法:机器学习萌新必学算法

华为云开发者联盟

学习 算法

Javassist实现JDK动态代理

AI乔治

Java 编程 架构 jdk

GitHub上最励志的计算机自学教程(重制版),前端小白到亚马逊工程师

沉默王二

GitHub 学习 程序员 面试

Java-技术专题-volatile关键字

洛神灬殇

Week 6 命题作业

阿泰

蚂蚁金服首发887页Java面试宝典!还原真实面试情景+面试题

Java架构追梦

Java 编程 架构 面试 蚂蚁金服

程序员什么时候就该辞职了?

Java架构师迁哥

Mac/Windows 连接 Ubuntu 的 samba 服务器

jiangling500

ubuntu Mac windows Samba

从实际案例聊聊Java应用的GC优化

AI乔治

Java 编程 架构 JVM GC

Java-技术专题-Object克隆方法解析

洛神灬殇

【得物技术】一文读懂Vue生命周期

得物技术

Vue 生命周期 得物技术部 得物 钩子函数

叼!阿里Mysql三位封神专家总结800页性能优化的千金良方

996小迁

Java MySQL 编程 架构 面试

架构师训练营 - 第 6、7、8、9、10 、11、12、13周学习总结(1 期)

阿甘

第二周作业

小兵

京东推荐系统中的兴趣拓展如何驱动业务持续增长?

京东科技开发者

算法 推荐系统 知识图谱

英特尔第十一代处理器 (代号Rocket Lake-S) 架构详情

E科讯

TronChain波场链合约系统开发技术

薇電13242772558

区块链 智能合约

第二周总结

小兵

对抗验证概述

计算机与AI

学习 数据验证

手撕面试题:多个线程顺序执行问题

大头星

Java 面试 多线程

架构师训练营第六周作业

Shunyi

极客大学架构师训练营

JVM 源码解读之 CMS GC 触发条件

AI乔治

Java 架构 JVM GC

JavaScript 对象 — 重学 JavaScript

三钻

Java 大前端 对象

使用Apache ECharts呈现社区活动的渲染图_文化 & 方法_孙毅_InfoQ精选文章