gitgraph.js sketch sample

2017-06-example-sketch.png

Readme.txt

See blog post at http://leonardinius.galeoconsulting.com/2017/06/today-i-learned-2017-06_1-gitgraphjs

lorem.js

/*
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(' ');

};

sketch.html

<!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>

sketch.js

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 });