yearrecord——一个类似痕迹墙的React数据展示组件

介绍一下自己做的一个类似于力扣个人主页提交记录和GitHub主页贡献记录的React组件。
下图分别是力扣个人主页提交记录和GitHub个人主页的贡献记录,像这样类似痕迹墙的形式可以比较直观且高效得展示一段时间内得数据记录。
力扣个人主页提交记录
GitHub个人主页贡献记录
然而要从0实现这个功能还是有一些麻烦得,并且该功能可用的场景也比较多,于是便把它做成了一个通用的组件,只需要提供数据即可渲染这样的效果。

如何使用

安装

在一个React项目中:

npm install yearrecord

使用

引入后当成普通的组件通过data这个prop传递数据即可,也可以不传递任何的prop,这样将使用随机生成的数据,颜色、尺寸等将使用使用默认值。

import YearRecord from "yearrecord"function App() {return (<><YearRecordthemeColor="green"tooltipTitileFunc={item => `${item.year}${item.month}${item.day}日, ${item.data}次浏览`}></YearRecord></>)
}export default App

然后可得到如下的渲染结果:

在这里插入图片描述
组件提供了较高的可配置能力,可通过props自定义主题颜色、间距、尺寸、tooltip title等等,具体可参考项目主页的API表格。

目前该组件仅完成了比较核心的功能,相对于GitHub的贡献记录还有一些特性没有实现,如果有感兴趣的小伙伴,欢迎来给这个组件提issue、提pr,如果能给一个star就更好了🤣

项目主页:https://qgq99.github.io/yearrecord/
代码地址:https://github.com/qgq99/yearrecord

感谢支持!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/47221.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue搜索框过滤--- computed、watch区别

vue组件选项&#xff08;component options&#xff09; 1. computed&#xff08;计算属性&#xff09; 用途&#xff1a;computed属性用于声明性地描述一些依赖其它响应式属性的数据。当依赖的响应式属性变化时&#xff0c;计算属性会自动重新求值。缓存&#xff1a;计算属性…

等保-Linux等保测评

等保-Linux等保测评 1.查看相应文件&#xff0c;账户xiaoming的密码设定多久过期 rootdengbap:~# chage -l xiaoming Last password change : password must be changed Password expires : pass…

数据库管理-第221期 Oracle的高可用-04(20240717)

数据库管理221期 2024-07-17 数据库管理-第221期 Oracle的高可用-04&#xff08;20240717&#xff09;1 ADG2 连接配置2.1 TNS2.2 JDBC2.3 JAVA连接池2.3.1 Oracle UCP2.3.2 应用连接池基础配置 总结 数据库管理-第221期 Oracle的高可用-04&#xff08;20240717&#xff09; 作…

mysql5.7版本字符集编码

默认character_set_databaselatin1 当你字段插入中文值的时候&#xff0c;会报错。 所以修改为了character_set_databaseutf8既可以。 character_set_server他的范围更大&#xff0c;属于服务器级别。

自然语言处理NLP--文本相似度面试题

自然语言处理NLP--文本相似度面试题 问题 1: 什么是文本相似度&#xff0c;如何在搜索系统中应用&#xff1f;问题 2: 如何使用TF-IDF进行文本相似度计算&#xff1f;问题 3: 使用Word2Vec进行文本相似度计算的过程是怎样的&#xff1f;问题 4: BERT如何用于文本相似度计算&…

LeetCode 852, 20, 51

目录 852. 山脉数组的峰顶索引题目链接标签二分思路代码 三分思路代码 20. 有效的括号题目链接标签思路代码 51. N 皇后题目链接标签思路回溯如何保证皇后之间无法互相攻击 代码 852. 山脉数组的峰顶索引 题目链接 852. 山脉数组的峰顶索引 标签 数组 二分查找 二分 思路…

网络安全-网络安全及其防护措施6

26. 访问控制列表&#xff08;ACL&#xff09; ACL的定义和作用 访问控制列表&#xff08;ACL&#xff09;是一种网络安全机制&#xff0c;用于控制网络设备上的数据包流量。通过ACL&#xff0c;可以定义允许或拒绝的流量&#xff0c;增强网络的安全性和管理效率。ACL通过在路…

逍遥模拟器安装Magisk和EDXPosed教程

资源下载&#xff1a; 逍遥模拟器安装Magisk和EDXPosed教程 - 多开鸭资源下载&#xff1a; MagiskEDXP教程文件 单独的逍遥模拟器使用的版本EDXPosed打包下载&#xff08;下载之后解压出来一共4个文件&#xff09;&#xff1a; 如果要按本教程安装就务必使用这里的安装包&…

翁恺-C语言程序设计-10-0. 说反话

10-0. 说反话 给定一句英语&#xff0c;要求你编写程序&#xff0c;将句中所有单词的顺序颠倒输出。 输入格式&#xff1a;测试输入包含一个测试用例&#xff0c;在一行内给出总长度不超过80的字符串。字符串由若干单词和若干空格组成&#xff0c;其中单词是由英文字母&#…

爬虫(一)——爬取快手无水印视频

前言 最近对爬虫比较感兴趣&#xff0c;于是浅浅学习了一些关于爬虫的知识。爬虫可以实现很多功能&#xff0c;非常有意思&#xff0c;在这里也分享给大家。由于爬虫能实现的功能太多&#xff0c;而且具体的实现方式也有所不同&#xff0c;所以这里开辟了一个新的系列——爬虫…

记录贴-芋道源码-环境搭建

文字讲解 链接: 芋道源码-环境搭建&#xff08;一&#xff09;后端 链接: 芋道源码-环境搭建&#xff08;二&#xff09;前端 链接: 基于FastGPT和芋道源码挑战一句话生成代码 视频讲解 链接: 芋道源码零基础启动教程&#xff08;上&#xff09; 链接: 芋道源码零基础启动教程…

bs4取值技巧的详细介绍

1. 基本取值方法&#xff1a; find()&#xff1a; 查找第一个匹配的标签。soup.find(h1) # 查找第一个<h1>标签find_all()&#xff1a; 查找所有匹配的标签。soup.find_all(a) # 查找所有<a>标签select()&#xff1a; 使用CSS选择器查找标签。soup.select(.item…

进阶篇:如何使用 Stable Diffusion 优化神经网络训练

进阶篇&#xff1a;如何使用 Stable Diffusion 优化神经网络训练 一、引言 随着深度学习的发展&#xff0c;神经网络模型在各个领域取得了显著的成果。然而&#xff0c;在训练复杂神经网络时&#xff0c;模型的稳定性和优化问题始终是一个挑战。Stable Diffusion&#xff08;…

用AI生成Springboot单元测试代码太香了

你好&#xff0c;我是柳岸花开。 在当今软件开发过程中&#xff0c;单元测试已经成为保证代码质量的重要环节。然而&#xff0c;编写单元测试代码却常常让开发者头疼。幸运的是&#xff0c;随着AI技术的发展&#xff0c;我们可以利用AI工具来自动生成单元测试代码&#xff0c;极…

基于单片机的停车场车位管理系统设计

1.简介 停车场车位管理系统是日常中随处可见的一种智能化车位管理技术&#xff0c;使用该技术可以提高车位管理效率&#xff0c;从而减轻人员车位管理工作负荷。本系统集成车牌识别、自动放行、自助缴费等技术&#xff0c;并且具备车位占用状态实时监测与车位数量实时统计、查询…

SQL进阶--条件分支

一、问题引入 在SQL中&#xff0c;虽然不像某些编程语言&#xff08;如C、Java或Python&#xff09;那样直接支持if-else这样的条件分支语句&#xff0c;但它提供了几种方式来实现条件逻辑&#xff0c;这些方式主要通过CASE语句、IF()函数&#xff08;在某些数据库如MySQL中&a…

C# - WINFORM - 控件树遍历与特定控件操作方案概述

1.全局控件遍历 实现了一个通用函数EnumerateAllControls, 它可以遍历指定窗体或容器内的所有控件&#xff0c;打印出每个控件的名称和类型。 private void EnumerateAllControls(Control parent) {foreach (Control control in parent.Controls){Console.WriteLine($"C…

golang mux组件兼容转移url

Go 的mux 遇到%2F、%0A 无法处理的问题&#xff0c;后来有推出UseEncodedPath() 的参数&#xff0c;就不会直接吐404&#xff0c;让程式没办法做后续的处理。 如果请求是 http://localhost:8000/mvfood/aa%2Fbb/exist 此时go服务使用的mux 组件检测到请求路径中有%2F字符串会直…

vue3【详解】单文件组件 SFC(含SFC的优点、缺点、使用场景、原理、使用预处理器、<script setup>语法详解、资源拆分)

SFC 概述 将一个组件的逻辑 (JavaScript)&#xff0c;模板 (HTML) 和样式 (CSS) 封装在同一个.vue 文件里&#xff0c;即单文件组件&#xff08; Single-File Components&#xff0c;缩写为 SFC&#xff09;。 <script setup> import { ref } from vue const count ref…

Java SpringAOP简介

简介 官方介绍&#xff1a; SpringAOP的全称是&#xff08;Aspect Oriented Programming&#xff09;中文翻译过来是面向切面编程&#xff0c;AOP是OOP的延续&#xff0c;是软件开发中的一个热点&#xff0c;也是Spring框架中的一个重要内容&#xff0c;是函数式编程的一种衍生…