提交图表
概览
Contition Graph 包是一个 React 组件套件,旨在以互动和信息化的方式可视化承诺图. 它展示一个存储器内的历史,支持无限地加载卷轴。 见 这个员额 详细执行情况.
CommitGraph 用于平台,如 多尔特湖 可视化数据库输入日志历史.
演示
这个 演示 特性样本输入数据和真实的 GitHub 寄存器图表.
特征
- 交互式提交图形可视化 : Render将历史作为互动图来承诺,对存储处的活动提供了清晰而详细的视角.
- 无限滚动支持 :
CommitGraph.WithInfiniteScroll通过在用户滚动时动态地加载新内容来增强大型承诺历史的用户经验. - 自定义样式 : 用于承诺日志图的广泛样式选项,包括节点颜色,间隔等,以无缝匹配项目的设计.
安装
npm install commit-graph
快速启动
使用提交图形
对于没有无限卷轴的基本执行:
import React from "react";
import { CommitGraph } from "commit-graph";
const MyComponent = () => {
const commits = [
// Commits data according to the new Commit type
];
const branchHeads = [
// Branch heads data according to the new Branch type
];
return (
<CommitGraph
commits={commits}
branchHeads={branchHeads}
graphStyle={{
commitSpacing: 50,
branchSpacing: 20,
branchColors: ["#FF0000", "#00FF00", "#0000FF"],
nodeRadius: 2,
}}
/>
);
};
export default MyComponent;
使用 Co通Graph 。 无限滚动
对于需要无限卷轴处理大型承诺历史的执行:
import React from "react";
import { CommitGraph } from "commit-graph";
const MyComponent = () => {
// Your commit and branch head data, loadMore function, and hasMore flag
return (
<CommitGraph.WithInfiniteScroll
commits={/* Your commits data */}
branchHeads={/* Your branch heads data */}
loadMore={/* Your loadMore function */}
hasMore={/* hasMore flag */}
/>
);
};
export default MyComponent;
道具
Communication Graph 和 Communication Graph 的通用道具 。 无限滚动
- 执行(阵列):数组
Commit代表承诺历史的天体. - 分支头 (阵列): 一组
Branch在承诺图中代表分支头的物体.
CommitGraph 的附加道具 。 无限滚动
- 加载更多(函数):在到达滚动端时加载更多任务的函数 .
- has More (boolean) : 说明是否有更多的承诺可以加载 .
类型定义
这些类型定义应当用于构建传递给CommitGraph和CommitGraph两个指令和分支标题道具的数据. 用"无限滚动"组件,确保承诺历史和分支信息的适当可视化.
Commit 类型
这个 Commit 类型代表个人在犯罪历史中犯罪。 每个 Commit 对象应符合下列结构:
type ParentCommit = {
sha: string;
};
export type Commit = {
sha: string;
commit: {
author: {
name: string; // The name of the commit author
date: string | number | Date; // The date of the commit
email?: string; // The email of the commit author (optional)
};
message: string; // The commit message
};
parents: ParentCommit[]; // An array of parent commits
html_url?: string; // The URL to view the commit (optional)
};
此类型定义包括承诺的SHA,作者信息,承诺消息,父方承诺的数组,以及承诺的可选URL.
Branch 类型
这个 Branch 类型定义寄存器中分支的结构,每个分支与特定承诺相关:
export type Branch = {
name: string; // The name of the branch
commit: {
sha: string; // The SHA of the latest commit on the branch
};
link?: string; // A URL to the branch on GitHub (optional)
};
每个分行对象应包括分行名称,分行最新承诺的SHA,以及与分行的可选链接.
graphStyle (对象,可选)
指定执行图的样式选项的可选对象。 这个 graphStyle 对象应具有以下属性:
commitSpacing(数目):承诺之间的垂直间隔.branchSpacing(数字):分枝之间的水平间隔.branchColors(串行数): 用于不同分支的颜色阵列。 默认 :['#FF0000', '#00FF00', '#0000FF']。 。 。 .nodeRadius(数字):承诺节点圈的半径.
dateFormatFn (职能,可选)
格式化输入日期的可选函数 。 以日期、数字或字符串作为输入并返回字符串.
dateFormatFn?: (d: string | number | Date) => string;
示例:
const customDateTimeFormatFn = (d: string | number | Date): string => {
return new Date(d).toLocaleString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
});
};
const MyComponent = () => {
// Your commit and branch head data, loadMore function, and hasMore flag
return (
<CommitGraph.WithInfiniteScroll
commits={/* Your commits data */}
branchHeads={/* Your branch heads data */}
loadMore={/* Your loadMore function */}
hasMore={/* hasMore flag */}
dateFormatFn={customDateTimeFormatFn}
/>
);
};
currentBranch (弦,可选)
现分行名.
fullSha (boolean,可选)
而非默认缩短了SHA,显示承诺的全部SHA.
故事书
通过运行故事本来探索“提交图”组件及其特性:
npm run storybook