Skip to content

Instantly share code, notes, and snippets.

@liunian
Created January 10, 2018 03:12
Show Gist options
  • Save liunian/a8c151175c1f4e1cffd69218f1dd1c43 to your computer and use it in GitHub Desktop.
Save liunian/a8c151175c1f4e1cffd69218f1dd1c43 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/liquxin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.11.4/gitgraph.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.11.4/gitgraph.min.js"></script>
</head>
<body>
<canvas id="gitGraph"></canvas>
<script id="jsbin-javascript">
// var config = {
// template: "metro" // could be: "blackarrow" or "metro" or `myTemplate` (custom Template object)
// , orientation: "vertical-reverse"
// //, mode: "compact" // special compact mode: hide messages & compact graph
// };
var graphConfig = new GitGraph.Template({
branch: {
color: "#000000",
lineWidth: 3,
spacingX: 60,
mergeStyle: "straight",
showLabel: true, // display branch names on graph
labelFont: "normal 10pt Arial",
labelRotation: 0
},
commit: {
spacingY: -30,
dot: {
size: 8,
strokeColor: "#000000",
strokeWidth: 4
},
tag: {
font: "normal 10pt Arial",
color: "yellow"
},
message: {
color: "black",
font: "normal 12pt Arial",
displayAuthor: false,
displayBranch: false,
displayHash: false,
}
},
arrow: {
size: 8,
offset: 3
}
});
var config = {
template: graphConfig,
mode: "extended",
orientation: "vertical-reverse"
};
var gitGraph = new GitGraph(config);
/************************
* BRANCHES AND COMMITS *
************************/
// Create branch named "master"
var master = gitGraph.branch("master");
master.commit('init');
var dailyBranch = gitGraph.branch('daily/0.1.0');
dailyBranch.commit('add feats');
var hotfixReleaseBranch = dailyBranch.branch({
name: 'hotfix/180110',
color: '#CB3B14'
});
var hotfix1 = hotfixReleaseBranch.branch({
name: 'hotfix/fix-a',
color: '#039DB3'
});
hotfix1.commit('fix feature A');
var hotfix2 = hotfixReleaseBranch.branch({
name: 'hotfix/fix-b',
color: '#FF6C44'
});
hotfix2.commit('fix feature B');
var hotfix3 = hotfixReleaseBranch.branch({
name: 'hotfix/fix-c',
color: '#0E81FC'
});
hotfix1.merge(hotfixReleaseBranch);
hotfix2.merge(hotfixReleaseBranch);
hotfixReleaseBranch.merge(dailyBranch, {dotStrokeWidth: 10, message: '$ lzd publish -d', tag: "UAT deploy window"});
hotfix3.commit();
hotfix3.merge(hotfixReleaseBranch);
hotfixReleaseBranch.merge(dailyBranch, {dotStrokeWidth: 10, message: '$ lzd publish -d', tag: 'UAT deploy window'});
hotfix1.delete();
hotfix2.delete();
hotfix3.delete();
hotfixReleaseBranch.delete();
var hotfixReleaseBranch2 = dailyBranch.branch({
name: 'hotfix/180111',
color: '#CB3B14'
});
var hotfix4 = hotfixReleaseBranch2.branch({
name: 'hotfix/fix-d',
color: '#039DB3'
});
hotfix4.commit('fix another issue');
hotfix4.merge(hotfixReleaseBranch2);
hotfixReleaseBranch2.merge(dailyBranch, {dotStrokeWidth: 10, message: '$ lzd publish -d', tag: 'UAT deploy window'});
dailyBranch.merge(master, {dotStrokeWidth: 10, message: '$ lzd publish -o', tag: 'publish/0.1.0'});
</script>
<script id="jsbin-source-javascript" type="text/javascript">// var config = {
// template: "metro" // could be: "blackarrow" or "metro" or `myTemplate` (custom Template object)
// , orientation: "vertical-reverse"
// //, mode: "compact" // special compact mode: hide messages & compact graph
// };
var graphConfig = new GitGraph.Template({
branch: {
color: "#000000",
lineWidth: 3,
spacingX: 60,
mergeStyle: "straight",
showLabel: true, // display branch names on graph
labelFont: "normal 10pt Arial",
labelRotation: 0
},
commit: {
spacingY: -30,
dot: {
size: 8,
strokeColor: "#000000",
strokeWidth: 4
},
tag: {
font: "normal 10pt Arial",
color: "yellow"
},
message: {
color: "black",
font: "normal 12pt Arial",
displayAuthor: false,
displayBranch: false,
displayHash: false,
}
},
arrow: {
size: 8,
offset: 3
}
});
var config = {
template: graphConfig,
mode: "extended",
orientation: "vertical-reverse"
};
var gitGraph = new GitGraph(config);
/************************
* BRANCHES AND COMMITS *
************************/
// Create branch named "master"
var master = gitGraph.branch("master");
master.commit('init');
var dailyBranch = gitGraph.branch('daily/0.1.0');
dailyBranch.commit('add feats');
var hotfixReleaseBranch = dailyBranch.branch({
name: 'hotfix/180110',
color: '#CB3B14'
});
var hotfix1 = hotfixReleaseBranch.branch({
name: 'hotfix/fix-a',
color: '#039DB3'
});
hotfix1.commit('fix feature A');
var hotfix2 = hotfixReleaseBranch.branch({
name: 'hotfix/fix-b',
color: '#FF6C44'
});
hotfix2.commit('fix feature B');
var hotfix3 = hotfixReleaseBranch.branch({
name: 'hotfix/fix-c',
color: '#0E81FC'
});
hotfix1.merge(hotfixReleaseBranch);
hotfix2.merge(hotfixReleaseBranch);
hotfixReleaseBranch.merge(dailyBranch, {dotStrokeWidth: 10, message: '$ lzd publish -d', tag: "UAT deploy window"});
hotfix3.commit();
hotfix3.merge(hotfixReleaseBranch);
hotfixReleaseBranch.merge(dailyBranch, {dotStrokeWidth: 10, message: '$ lzd publish -d', tag: 'UAT deploy window'});
hotfix1.delete();
hotfix2.delete();
hotfix3.delete();
hotfixReleaseBranch.delete();
var hotfixReleaseBranch2 = dailyBranch.branch({
name: 'hotfix/180111',
color: '#CB3B14'
});
var hotfix4 = hotfixReleaseBranch2.branch({
name: 'hotfix/fix-d',
color: '#039DB3'
});
hotfix4.commit('fix another issue');
hotfix4.merge(hotfixReleaseBranch2);
hotfixReleaseBranch2.merge(dailyBranch, {dotStrokeWidth: 10, message: '$ lzd publish -d', tag: 'UAT deploy window'});
dailyBranch.merge(master, {dotStrokeWidth: 10, message: '$ lzd publish -o', tag: 'publish/0.1.0'});
</script></body>
</html>
// var config = {
// template: "metro" // could be: "blackarrow" or "metro" or `myTemplate` (custom Template object)
// , orientation: "vertical-reverse"
// //, mode: "compact" // special compact mode: hide messages & compact graph
// };
var graphConfig = new GitGraph.Template({
branch: {
color: "#000000",
lineWidth: 3,
spacingX: 60,
mergeStyle: "straight",
showLabel: true, // display branch names on graph
labelFont: "normal 10pt Arial",
labelRotation: 0
},
commit: {
spacingY: -30,
dot: {
size: 8,
strokeColor: "#000000",
strokeWidth: 4
},
tag: {
font: "normal 10pt Arial",
color: "yellow"
},
message: {
color: "black",
font: "normal 12pt Arial",
displayAuthor: false,
displayBranch: false,
displayHash: false,
}
},
arrow: {
size: 8,
offset: 3
}
});
var config = {
template: graphConfig,
mode: "extended",
orientation: "vertical-reverse"
};
var gitGraph = new GitGraph(config);
/************************
* BRANCHES AND COMMITS *
************************/
// Create branch named "master"
var master = gitGraph.branch("master");
master.commit('init');
var dailyBranch = gitGraph.branch('daily/0.1.0');
dailyBranch.commit('add feats');
var hotfixReleaseBranch = dailyBranch.branch({
name: 'hotfix/180110',
color: '#CB3B14'
});
var hotfix1 = hotfixReleaseBranch.branch({
name: 'hotfix/fix-a',
color: '#039DB3'
});
hotfix1.commit('fix feature A');
var hotfix2 = hotfixReleaseBranch.branch({
name: 'hotfix/fix-b',
color: '#FF6C44'
});
hotfix2.commit('fix feature B');
var hotfix3 = hotfixReleaseBranch.branch({
name: 'hotfix/fix-c',
color: '#0E81FC'
});
hotfix1.merge(hotfixReleaseBranch);
hotfix2.merge(hotfixReleaseBranch);
hotfixReleaseBranch.merge(dailyBranch, {dotStrokeWidth: 10, message: '$ lzd publish -d', tag: "UAT deploy window"});
hotfix3.commit();
hotfix3.merge(hotfixReleaseBranch);
hotfixReleaseBranch.merge(dailyBranch, {dotStrokeWidth: 10, message: '$ lzd publish -d', tag: 'UAT deploy window'});
hotfix1.delete();
hotfix2.delete();
hotfix3.delete();
hotfixReleaseBranch.delete();
var hotfixReleaseBranch2 = dailyBranch.branch({
name: 'hotfix/180111',
color: '#CB3B14'
});
var hotfix4 = hotfixReleaseBranch2.branch({
name: 'hotfix/fix-d',
color: '#039DB3'
});
hotfix4.commit('fix another issue');
hotfix4.merge(hotfixReleaseBranch2);
hotfixReleaseBranch2.merge(dailyBranch, {dotStrokeWidth: 10, message: '$ lzd publish -d', tag: 'UAT deploy window'});
dailyBranch.merge(master, {dotStrokeWidth: 10, message: '$ lzd publish -o', tag: 'publish/0.1.0'});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment