Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
gitgraph.js sketch sample
See blog post at http://leonardinius.galeoconsulting.com/2017/06/today-i-learned-2017-06_1-gitgraphjs
/*
Copyright by (copied from) http://jsfiddle.net/gabrieleromanato/khx7w/
*/
window.generateLoremIpsum = function(len) {
var words = ['lorem',
'ipsum',
'dolor',
'sit',
'amet',
'consectetur',
'adipiscing',
'elit',
'curabitur',
'vel',
'hendrerit',
'libero',
'eleifend',
'blandit',
'nunc',
'ornare',
'odio',
'ut',
'orci',
'gravida',
'imperdiet',
'nullam',
'purus',
'lacinia',
'a',
'pretium',
'quis',
'congue',
'praesent',
'sagittis',
'laoreet',
'auctor',
'mauris',
'non',
'velit',
'eros',
'dictum',
'proin',
'accumsan',
'sapien',
'nec',
'massa',
'volutpat',
'venenatis',
'sed',
'eu',
'molestie',
'lacus',
'quisque',
'porttitor',
'ligula',
'dui',
'mollis',
'tempus',
'at',
'magna',
'vestibulum',
'turpis',
'ac',
'diam',
'tincidunt',
'id',
'condimentum',
'enim',
'sodales',
'in',
'hac',
'habitasse',
'platea',
'dictumst',
'aenean',
'neque',
'fusce',
'augue',
'leo',
'eget',
'semper',
'mattis',
'tortor',
'scelerisque',
'nulla',
'interdum',
'tellus',
'malesuada',
'rhoncus',
'porta',
'sem',
'aliquet',
'et',
'nam',
'suspendisse',
'potenti',
'vivamus',
'luctus',
'fringilla',
'erat',
'donec',
'justo',
'vehicula',
'ultricies',
'varius',
'ante',
'primis',
'faucibus',
'ultrices',
'posuere',
'cubilia',
'curae',
'etiam',
'cursus',
'aliquam',
'quam',
'dapibus',
'nisl',
'feugiat',
'egestas',
'class',
'aptent',
'taciti',
'sociosqu',
'ad',
'litora',
'torquent',
'per',
'conubia',
'nostra',
'inceptos',
'himenaeos',
'phasellus',
'nibh',
'pulvinar',
'vitae',
'urna',
'iaculis',
'lobortis',
'nisi',
'viverra',
'arcu',
'morbi',
'pellentesque',
'metus',
'commodo',
'ut',
'facilisis',
'felis',
'tristique',
'ullamcorper',
'placerat',
'aenean',
'convallis',
'sollicitudin',
'integer',
'rutrum',
'duis',
'est',
'etiam',
'bibendum',
'donec',
'pharetra',
'vulputate',
'maecenas',
'mi',
'fermentum',
'consequat',
'suscipit',
'aliquam',
'habitant',
'senectus',
'netus',
'fames',
'quisque',
'euismod',
'curabitur',
'lectus',
'elementum',
'tempor',
'risus',
'cras'
];
var wordCount = (len > words.length) ? (words.length - 1) : len;
var extracted = [];
for (var i = 0; i < wordCount; i++) {
var word = Math.floor(Math.random() * words.length);
extracted[i] = words[word];
}
return extracted.join(' ');
};
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example Sketch</title>
<link rel="stylesheet" type="text/css" href="http://gitgraphjs.com/css/gitgraph.css" />
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id="gitGraph"></canvas>
<div id="detail" class="gitgraph-detail">Example Sketch</div>
<script src="./lorem.js"></script>
<script src="http://gitgraphjs.com/js/gitgraph.min.js"></script>
<script src="sketch.js"></script>
</body>
</html>
var mkLoremIpsum = function (text) {
return text + ' ' + window.generateLoremIpsum(5);
}
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"
};
var gitgraph = new GitGraph(config);
var master = gitgraph.branch({ name: "master", column: 0 });
master.commit({ message: mkLoremIpsum("1.0.0.0-SNAPSHOT"), dotStrokeWidth: 10, dotStrokeColor: "blue", color: "white" });
master.commit({ messageDisplay: false });
master.commit({ message: mkLoremIpsum("1.0.1.0-SNAPSHOT") });
master.commit(mkLoremIpsum("1.0.1.0-SNAPSHOT"));
master.commit({ messageDisplay: false });
master.commit({ message: mkLoremIpsum("1.2.0.0-SNAPSHOT") });
master.commit(mkLoremIpsum("1.2.0.0-SNAPSHOT"));
master.commit({ messageDisplay: false });
master.commit({ message: mkLoremIpsum("1.2.1.0-SNAPSHOT") });
master.commit(mkLoremIpsum("1.2.1.0-SNAPSHOT"));
var release = gitgraph.branch({ parentBranch: master, name: "v1.2.1.0", column: 1 });
release.commit({ messageDisplay: false });
release.commit({ message: mkLoremIpsum("1.2.1.1"), tag: "v1.2.1.1" });
master.commit({ message: mkLoremIpsum("2.0.0.0-SNAPSHOT"), dotStrokeWidth: 10, dotStrokeColor: "blue", color: "white" });
master.commit(mkLoremIpsum("2.0.0.0-SNAPSHOT")).commit({ messageDisplay: false });
release.merge(master, { dotStrokeWidth: 10, message: mkLoremIpsum("2.0.0.0-SNAPSHOT") });
release.commit({ messageDisplay: false });
release.commit({ message: mkLoremIpsum("1.2.1.2"), tag: "v1.2.1.2" });
release.merge(master, { dotStrokeWidth: 10, message: mkLoremIpsum("2.0.0.0-SNAPSHOT") });
master.commit(mkLoremIpsum("...")).commit(mkLoremIpsum("...")).commit({ messageDisplay: false });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment