Created
January 10, 2018 03:12
-
-
Save liunian/a8c151175c1f4e1cffd69218f1dd1c43 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/liquxin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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