[PyQt5]实现GitHub的CommitCalendar（贡献瓦片图）

Github的commit calendar记录了每天的贡献量。

这次就实现一个这种样式的图表吧&＃xff01;使用PyQt5。

第一部分&＃xff1a;

import datetimefrom PyQt5.QtWidgets import QWidget
from PyQt5.QtGui import QPainter, QColorfrom CommitCalendar.pyqt5._color import ColorSchemeclass QCommitCalendar(QWidget):""" A Github Commit-Calendar like widget. """def __init__(self,commit_data: dict,block_size: int &＃61; 10, # commit方块的大小block_spacing: int &＃61; 3, # commit方块的空隙color_scheme&＃61;ColorScheme.Naive, # 见第二部分orientation: str &＃61; &＃39;right&＃39;, # 图表的朝向&＃xff0c;GitHub是朝右的&＃xff0c;这里还可以朝左# Inherit from QWidget.parent&＃61;None, *args, **kwargs):super().__init__(parent, *args, **kwargs)self.commit_dict &＃61; commit_dataself.block_size &＃61; block_sizeself.block_spacing &＃61; block_spacingself.color_scheme &＃61; color_schemeself.orientation &＃61; orientationself._today &＃61; datetime.date.today()self._weekday &＃61; datetime.datetime.now().weekday() # 星期数下标&＃xff0c;0开始self._painter &＃61; QPainter(self)self.setMinimumSize(250, 115)self.setMaximumWidth(725)self.setStyleSheet("background-color: white")def _calc_cols_nbr(self) -> int:# 计算可以画出多少列return int(self.width() / (self.block_size &＃43; self.block_spacing) - 2)def _set_painter(self, color: str):# 设置画笔self._painter.setPen(QColor(color))self._painter.setBrush(QColor(color))def _commit_color_map(self, date: str):# 将不同的commit数对应不同的颜色&＃xff0c;这里的标准自己拟定# Map commit number to color.commit &＃61; self.commit_dict.get(date)if commit is not None:commit &＃61; int(commit)if commit > 10:self._set_painter(self.color_scheme[3])elif commit > 5:self._set_painter(self.color_scheme[2])else:self._set_painter(self.color_scheme[1])else:self._set_painter(self.color_scheme[0])def paintEvent(self, paint_event):assert self.block_size >&＃61; 10assert self.block_spacing > 0assert self.orientation in (&＃39;right&＃39;, &＃39;left&＃39;)# Begin painting...self._painter.begin(self)delta &＃61; 0 # 日期偏移cols &＃61; range(self._calc_cols_nbr())for col in cols:# Monday index is 0, and the first day of week is Sunday.# 周一的下标是0&＃xff0c;而且一周的开始是周日# 这里绘制行时需分情况rows &＃61; range(self._weekday &＃43; 2) if col &＃61;&＃61; 0 else range(7)for row in rows:if self.orientation &＃61;&＃61; &＃39;right&＃39;:x &＃61; self.width() - (self.block_size &＃43; self.block_spacing) * (col &＃43; 2)else:x &＃61; (self.block_size &＃43; self.block_spacing) * (col &＃43; 1)y &＃61; (self.block_size &＃43; self.block_spacing) * (len(rows) - row)# Paint different color on.date &＃61; self._today - datetime.timedelta(days&＃61;delta)self._commit_color_map(str(date))delta &＃43;&＃61; 1self._painter.drawRect(x, y, self.block_size, self.block_size)self._painter.end()

第二部分

这里配置颜色表&＃xff0c;从左到右依次由浅入深。

class ColorScheme:# hex color from less to more (0 ~ 4)Naive &＃61; (&＃39;#ebedf0&＃39;, &＃39;#c6e48b&＃39;, &＃39;#7bc96f&＃39;, &＃39;#239a3b&＃39;, &＃39;#196127&＃39;) # GitHub原配色Velvet&＃61; (&＃39;#ebedf0&＃39;, &＃39;#e1eec3&＃39;, &＃39;#e6bea1&＃39;, &＃39;#ea8e7f&＃39;, &＃39;#f05053&＃39;) # 桃阳红配色


测试

这里使用json数据来代表每日的commit数&＃xff1a;

{"2019-07-28": "2","2019-07-29": "5","2019-07-30": "8","2019-07-31": "2","2019-08-01": "1","2019-08-08": "2","2019-08-20": "12","2019-08-25": "5","2019-08-28": "2","2019-08-31": "7","2019-09-01": "2","2019-09-18": "2","2019-09-28": "5","2019-09-30": "2","2019-10-28": "1","2019-11-28": "2","2019-12-21": "12","2019-12-28": "2","2020-02-14": "4","2020-02-26": "15"
}


测试脚本&＃xff1a;

import sys
import cgitb
import jsonfrom PyQt5.QtWidgets import QApplication
from CommitCalendar.pyqt5 import QCommitCalendar, ColorSchemecgitb.enable(format("text"))if __name__ &＃61;&＃61; &＃39;__main__&＃39;:app &＃61; QApplication(sys.argv)f &＃61; open(&＃39;test.json&＃39;, &＃39;r&＃39;)cc &＃61; QCommitCalendar(json.load(f))f.close()cc.setWindowTitle(&＃39;PyQt5 Demo&＃39;)cc.show()sys.exit(app.exec_())


运行效果如下&＃xff1a;

还可以更改配色&＃xff1a;
cc &＃61; QCommitCalendar(json.load(f), color_scheme&＃61;ColorScheme.VelvetSun)

总结

大体效果是实现了&＃xff0c;但是还差周围的一些标签&＃xff0c;这些也好说&＃xff0c;此处就不进行展示了。唯一的缺陷时&＃xff0c;这些方块不可交互&＃xff0c;不能用鼠标点击获取详细信息。如果要这样做的话&＃xff0c;可以使用QQGraphicsRectItem实现。新的一年&＃xff0c;看看今年会有多少贡献吧&＃xff01;