git日历坐标系? 手动实现github活跃/贡献图

前言

在使用github或gitlab时，我们总能发现，我们一年内的活跃度能够通过一张图直观地展现出来，那么你是否好奇它是如何实现的，最近工作中也遇到这样类似的需求，刚开始打算使用echarts的日历坐标系，但demo测试下来结果不尽人意，除了配置麻烦，自定义自由度不够，以及对于业务需求支持度也不够，因此，痛定思痛，决定动手手写一个自由度更高的组件。而且对于后端数据结构要求很低，除了能展示近一年数据，还能自定义时间范围，有需要的小伙伴可以直接查看源码：https://gitee.com/fcli/vue-calendar-map.git

话不多说，先上实现效果图：

布局结构

本组件主要分为三个部分：
（1）最左侧展示周一至周日部分,每周开始时间从周日或周一开始可自定义修改

<div class="weeks"><div class="week">周一</div><div class="week">周二</div><div class="week">周三</div><div class="week">周四</div><div class="week">周五</div><div class="week">周六</div><div class="week">周日</div>
</div>

（2）每一列表示一周的始末时间，使用el-tooltip悬浮展示具体时间，需要的可以自定义修改展示内容和样式

<div class="column" v-for="(columnData, columnIndex) in allDateData" :key="columnIndex"><div class="my-title">{{ columnData.title }}</div><div class="date-wrapper" v-for="(dateItem, dateIndex) in columnData.data" :key="dateIndex":style="{ background: getColor(dateItem.number).color }":class="{ hiddenDate: (columnIndex == 0 && dateIndex < prevTodayWeek - 1), active: getColor(dateItem.number).level == hoverLevel }"><el-tooltip class="box-item" effect="dark" :content="dateItem.date" placement="top"><div class="date"></div></el-tooltip></div>
</div>

（3）贡献图例，可自定义实现点击筛选等功能

 <div class="operation"><div class="legend"><div class="level-desc">少</div><div class="level level-1" @mouseover="hoverLevel = i" @mouseout="hoverLevel = 0" v-for="i in 5" :key="i":class="['level-' + i]"></div><div class="level-desc">多</div></div>
</div>

具体实现

1、首先计算和获取上一年的时间，以及是星期几，我这里采用dayjs来获取。计算上年今日最接近的周一的时间，该时间为起始时间。

 // 上年今日
let prevToday = dayjs().subtract(1, 'year').format('YYYY-MM-DD')
// 上年今日的是星期几,dayjs获取的为0-6，0是星期日
let prevTodayWeekNum = dayjs(prevToday).format('d') || 7;
prevTodayWeek.value = prevTodayWeekNum;
// 初始日期（上年临近的星期一）
let firstMondayDate =
prevTodayWeekNum > 1? dayjs().subtract(1, 'year').subtract(prevTodayWeekNum - 1, 'days').format('YYYY-MM-DD'): prevToday;

2、计算从开始时间到结束时间之间有多少个周，计算列数

 // 初始日期至今日的天数，包括今日
let days = dayjs().diff(dayjs(firstMondayDate), 'days') + 1;
// 每周天数
let columns = 7;
// 最大列数（周数）
let lineNums = Math.ceil(days / columns);

3、绘制图表数据，判断月份需要展示的位置,可往dateData中自定义添加需要的数据字段。第一列直接根据第一天的月份，之后的每列数根据上一周的最后一天减去第一天的月份，如果大于1代表月份发生了改变，下一列的title显示最新的月份。

 // 绘制图表的源数据let dateData: any = [];let monthCN = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];for (let i = 0; i < lineNums; i++) {// 最近一星期不一定满的let weekColumn = i === lineNums - 1 ? (days % columns ? days % columns : columns) : columns;// 开始计算title（月份的图例）let theWeekStartMonth = dayjs(firstMondayDate).add(i * 7, 'days').format('M');let day = dayjs(firstMondayDate).add(i * 7, 'days').format('DD');//防止开始时月份挤在一起if (i == 0 && 30 - day < 15) {theWeekStartMonth = theWeekStartMonth + 1;}let theWeekEndMonth = dayjs(firstMondayDate).add(i * 7 + weekColumn, 'days').format('M');let title = i === 0 ? monthCN[theWeekStartMonth - 1] : '';let isSwitchMonth = false;if (theWeekEndMonth - theWeekStartMonth) {isSwitchMonth = true;}if (i && dateData[i - 1].isSwitchMonth) {title = monthCN[theWeekEndMonth - 1];}// 图表源数据格式：columns：列数，title：列标题，isSwitchMonth：月份是否发生改变，data：每格数据dateData.push({columns: weekColumn,title: title,isSwitchMonth: isSwitchMonth,data: []});for (let j = 0; j < dateData[i].columns; j++) {let date = dayjs(firstMondayDate).add(i * 7 + j, 'days').format('YYYY-MM-DD');// 提交次数在slider范围内再进行次数赋值let number = submissionRecord.value[date];// number：提交次数，date：提交日期dateData[i].data.push({number: number,date: date});}}

（4）根据活跃度或数据量，展示不同节点的背景颜色

const getColor = (number: number) => {let num = number / props.maxData;let level = 1;if (num == 0) {num = 0.1;level = 1} else if (num > 0 && num < 0.3) {num = 0.3;level = 2} else if (num > 0.3 && num < 0.6) {num = 0.6;level = 3} else if (num < 0.9) {num = 0.8;level = 4} else {num = 1;level = 5}if (props.maxData == 0) {num = 0.1;level = 1}return { color: 'rgba(55,126,259,' + num + ')', level };
}

（5）监听数据的变化，动态响应，更新组件数据

    watch(() => props.timeData, (newValue) => {submissionRecord.value = newValue;init();}, { immediate: true, deep: true })

使用示例

已经打包上传npm，有需要的小伙伴可以直接安装使用，如果需要自定义修改组件内容，可访问git源码自行修改。git地址：https://gitee.com/fcli/vue-calendar-map.git

npm install @fcli/vue-calendar-map --save-dev 来安装在项目中使用
import VueCalendarMap from '@fcli/vue-calendar-map';
const app=createApp(App)
app.use(VueCalendarMap);

测试demo

<template><div class="content"><vue-calendar-map :timeData="timeData" :maxData="maxData"></vue-calendar-map></div>
</template><script setup lang="ts">
import dayjs from 'dayjs';
import VueCalendarMap from './plugin/index.vue';
import {ref} from 'vue';
components:{VueCalendarMap
}
const maxData=ref(190);
const timeData=ref<any>({})
let tempDate:any={}
for(let i=0;i<366;i++){let date=dayjs().subtract(1, 'year').add(i, 'days').format('YYYY-MM-DD')tempDate[date]=(Math.random() * 200).toFixed(0);
}
timeData.value=tempDate;
</script>