写点什么

使用 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:404587

评论

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

架构训练营 - 模块四作业

Sam

架构实战营

极客时间架构训练营模块七-王者荣耀商城异地多活架构设计

张Dave

软件测试/测试开发 | Web测试方法与技术实战演练

测试人

软件测试 自动化测试 测试开发 Web自动化测试

Shell分支语句

圆弧

分支 条件 shell脚本

springboot自动配置原理

喝水不抬头

软件测试/测试开发 | Web自动化之Selenium安装

测试人

软件测试 自动化测试 测试开发 Web自动化测试 selenium

大家心心念念的RocketMQ5.x入门手册来喽

中间件兴趣圈

RocketMQ rocketmq5

FL Studio2023最新版本音乐编曲制作软件

茶色酒

FL Studio2023

为什么用元空间替代永久代?

王磊

java面试

2023我的前端面试小结

loveX001

JavaScript

软件测试/测试开发 | Web自动化之显式等待与隐式等待

测试人

软件测试 自动化测试 测试开发 web测试 web自动化

写给go开发者的gRPC教程-拦截器

凉凉的知识库

Go 微服务 gRPC http2

1行Python代码去除图片水印,网友:干干净净!

程序员晚枫

Python GitHub 开源 去水印 自动化办公

ThreadLocal源码分析及避坑指南

喝水不抬头

New Bing 内测,革搜索的命

冯骐

openai GPT ChatGPT New Bing 对话模型

2023-02-12:给定正数N,表示用户数量,用户编号从0~N-1, 给定正数M,表示实验数量,实验编号从0~M-1, 给定长度为N的二维数组A, A[i] = { a, b, c }表示,用户i报

福大大架构师每日一题

算法 rust 福大大

为什么补码是取反加1?

Dinfan

一个容器,但是一整个k8s集群

newbe36524

C# Docker Kubernetes

KMP算法详解

javaadu

数据结构 字符串 KMP

架构实战营-模块一作业

🐢先生

架构实战营

Python 发展趋势:与 Rust 深度融合、更易于编写 Web 应用

Python猫

Python

NodeJS 实战系列:DevOps 尚未解决的问题

光毅

DevOps nodejs

如何做总架构师

agnostic

总架构

C++ 智能指针(一) std::auto_ptr

orbitgw

c++ C++ STL

被流量和热度裹挟,自媒体行业必须坚守职业道德

石头IT视角

软件测试/测试开发 | Web测试方法与技术之CSS讲解

测试人

软件测试 自动化测试 测试开发 Web自动化测试 web测试

软件测试/测试开发 | Selenium 测试用例编写

测试人

软件测试 自动化测试 测试开发 Web自动化测试 selenium

三次握手与四次挥的问题,怎么回答?

loveX001

JavaScript

ChatGPT十问十答 | 图解ChatGPT

涛哥 数字产品和业务架构

人工智能 ChatGPT

软件测试/测试开发 | SeleniumIDE用例录制

测试人

软件测试 自动化测试 测试开发 Web自动化测试 selenium

promise执行顺序面试题令我头秃,你能作对几道

loveX001

JavaScript

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