高效管理团队表现:构建可视化的贡献度面板组件

2023-11-30 06:36

本文主要是介绍高效管理团队表现:构建可视化的贡献度面板组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

说在前面

贡献度面板(Contribution Graph)是指在代码仓库中按时间展示每位开发者的提交情况的可视化图表。它会显示不同日期的提交次数,并用颜色的深浅表示提交的数量。

贡献度面板展现的好处有以下几点:

  1. 可视化展示:贡献度面板以直观的方式展示了开发者在项目中的活跃程度和工作进度。这使团队成员能够快速了解他人的贡献情况,增强对团队工作的可视化认知。
  2. 激励参与:贡献度面板可以激励团队成员积极参与项目,提高工作动力和责任感。通过看到自己的提交在图表中的变化,开发者能够获得成就感、满足感,并感到自己对项目的价值和影响力。
  3. 监控工作进度:通过观察贡献度面板,团队可以了解项目的整体工作进展情况。如果某些日期的提交数量很少或没有,可能意味着团队成员之间的协作或工作安排存在问题。这可以帮助团队及时发现并解决潜在的瓶颈或沟通问题。
  4. 评估绩效:贡献度面板可以用于评估开发者的工作绩效。它提供了一个客观的数据指标,用于评估每个人的提交频率、参与度和质量。这能够帮助团队进行绩效评估、薪酬分配以及职业发展规划。

总之,贡献度面板为团队提供了一个直观且可量化的视觉化工具,有助于促进成员之间的协作、监控项目进展以及评估个人绩效,从而提高团队合作效率和项目管理能力。

现在大家在很多地方都可以看到类似的贡献度面板,如:

  • gitee
    image.png

  • LeetCode
    image.png

今天我们就一起来试着实现一个类似的贡献度组件

实现思路

一、面板绘制

这里我们可以直接使用table进行简单的表格绘制

<table> 标签定义 HTML 表格一个 HTML 表格包括 <table> 元素,一个或多个 <tr>、<th>以及 <td>元素。

<tr> 元素定义表格行,<th> 元素定义表头,<td> 元素定义表格单元。

更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。

<table class="contribution-table" :id="'contribution-table-' + uid"><trv-for="(rowItem, rowInd) in rowTil":key="'row-' + rowInd"class="contribution-table-tr"><template v-for="colInd in column + 1"><tdv-if="rowInd != 0 || !hideTd.includes(colInd)":key="'row-' + rowInd + '-col-' + colInd":class="{block: getDateByInd(rowInd - 1, colInd - 2),'text-content': colInd == 1,'contribution-table-td': true,}":style="getBackground(rowInd - 1, colInd - 2)":title="getTitle(rowInd - 1, colInd - 2)":colspan="getColSpan(rowInd, colInd)"><span v-if="colInd === 1" style="font-size: xx-small">{{rowItem}}</span><spanv-else-if="rowInd === 0"style="word-break: keep-all; font-size: xx-small">{{ getMonthText(rowInd, colInd) }}</span><span v-else></span></td></template></tr>
</table>

二、计算起始日期(一年前的日期)

startDate: {type: String,default: () => {// 获取当前日期const currentDate = new Date();// 获取一年前的日期const oneYearAgoDate = new Date();oneYearAgoDate.setFullYear(currentDate.getFullYear() - 1);// 处理闰年情况if (currentDate.getMonth() === 1 &&currentDate.getDate() === 29 &&!this.isLeapYear(oneYearAgoDate.getFullYear())) {// 如果当前是闰年的2月29日,而一年前的那一年不是闰年,则将一年前的日期设置为2月28日oneYearAgoDate.setDate(28);}// 格式化一年前的日期const formattedDate = oneYearAgoDate.toISOString().slice(0, 10);return formattedDate;},
}

三、生成起始日期一年内的日期列表

formattedDate(date) {return new Date(date).toISOString().slice(0, 10);
},
getTomorrowDate(date) {const currentDate = new Date(date);// 获取当前日期的天数const currentDay = currentDate.getDate();// 设置 Date 对象的日期为当前日期的下一天currentDate.setDate(currentDay + 1);// 获取明天的日期并格式化return currentDate.toISOString().slice(0, 10);
},
getDateList() {const dateList = [];let startDate = this.startDate;const today = this.formattedDate(new Date());while (startDate != today && dateList.length < 365) {dateList.push({date: startDate,});startDate = this.getTomorrowDate(startDate);}dateList.push({date: today,});this.dateList = dateList;
},

四、根据贡献测试匹配对应的颜色块

我们可以自己定义指定区间贡献次数展示的颜色块,如下:

colorRule: {type: Array,default: () => {return [{min: 0,max: 0,color: "#EEEEEE",},{min: 1,max: 8,color: "#D6E685",},{min: 9,max: 15,color: "#8CC665",},{min: 16,max: 20,color: "#44A340",},{min: 21,color: "#1E6823",},];},
},

表示 min <= 贡献次数 <= max 时,展示的颜色为 color,我们只需要获取到指定日期的贡献次数,再与颜色区间规则进行匹配,找到对应的区间颜色即可。

getColor(rowInd, colInd) {const date = this.getDateByInd(rowInd, colInd);if (!date) return "";const count = this.getCount(date);const rule =this.colorRule.find((item) => {const min = item.min;let max = item.max;if (max === undefined) max = Infinity;return min <= count && max >= count;}) || {};return rule.color || "";
},

效果预览

组件使用文档:http://jyeontu.xyz/jvuewheel/#/JContributionPanel

image.png

源码

Gitee:https://gitee.com/zheng_yongtao/jyeontu-component-warehouse

公众号

https://mp.weixin.qq.com/s/J958KwEwj4-lhfGTYiXzIw

说在后面

🎉 这里是 JYeontu,现在是一名前端工程师,有空会刷刷算法题,平时喜欢打羽毛球 🏸 ,平时也喜欢写些东西,既为自己记录 📋,也希望可以对大家有那么一丢丢的帮助,写的不好望多多谅解 🙇,写错的地方望指出,定会认真改进 😊,偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章,有兴趣的也可以关注下。在此谢谢大家的支持,我们下文再见 🙌。

这篇关于高效管理团队表现:构建可视化的贡献度面板组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/435990

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

高效+灵活,万博智云全球发布AWS无代理跨云容灾方案!

摘要 近日,万博智云推出了基于AWS的无代理跨云容灾解决方案,并与拉丁美洲,中东,亚洲的合作伙伴面向全球开展了联合发布。这一方案以AWS应用环境为基础,将HyperBDR平台的高效、灵活和成本效益优势与无代理功能相结合,为全球企业带来实现了更便捷、经济的数据保护。 一、全球联合发布 9月2日,万博智云CEO Michael Wong在线上平台发布AWS无代理跨云容灾解决方案的阐述视频,介绍了

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动,这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升:减少抖动,提高图像的清晰度和细节表现力,使得监控画面更加真实可信。 - 细节增强:在低光条件下,抖

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

高效录音转文字:2024年四大工具精选!

在快节奏的工作生活中,能够快速将录音转换成文字是一项非常实用的能力。特别是在需要记录会议纪要、讲座内容或者是采访素材的时候,一款优秀的在线录音转文字工具能派上大用场。以下推荐几个好用的录音转文字工具! 365在线转文字 直达链接:https://www.pdf365.cn/ 365在线转文字是一款提供在线录音转文字服务的工具,它以其高效、便捷的特点受到用户的青睐。用户无需下载安装任何软件,只

Retrieval-based-Voice-Conversion-WebUI模型构建指南

一、模型介绍 Retrieval-based-Voice-Conversion-WebUI(简称 RVC)模型是一个基于 VITS(Variational Inference with adversarial learning for end-to-end Text-to-Speech)的简单易用的语音转换框架。 具有以下特点 简单易用:RVC 模型通过简单易用的网页界面,使得用户无需深入了

软考系统规划与管理师考试证书含金量高吗?

2024年软考系统规划与管理师考试报名时间节点: 报名时间:2024年上半年软考将于3月中旬陆续开始报名 考试时间:上半年5月25日到28日,下半年11月9日到12日 分数线:所有科目成绩均须达到45分以上(包括45分)方可通过考试 成绩查询:可在“中国计算机技术职业资格网”上查询软考成绩 出成绩时间:预计在11月左右 证书领取时间:一般在考试成绩公布后3~4个月,各地领取时间有所不同

安全管理体系化的智慧油站开源了。

AI视频监控平台简介 AI视频监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒,省去繁琐重复的适配流程,实现芯片、算法、应用的全流程组合,从而大大减少企业级应用约95%的开发成本。用户只需在界面上进行简单的操作,就可以实现全视频的接入及布控。摄像头管理模块用于多种终端设备、智能设备的接入及管理。平台支持包括摄像头等终端感知设备接入,为整个平台提

poj 2976 分数规划二分贪心(部分对总体的贡献度) poj 3111

poj 2976: 题意: 在n场考试中,每场考试共有b题,答对的题目有a题。 允许去掉k场考试,求能达到的最高正确率是多少。 解析: 假设已知准确率为x,则每场考试对于准确率的贡献值为: a - b * x,将贡献值大的排序排在前面舍弃掉后k个。 然后二分x就行了。 代码: #include <iostream>#include <cstdio>#incl