Created
January 10, 2018 03:14
-
-
Save liunian/be5a81333291d33cfb9505d53dfecc29 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/liquxin
This file contains hidden or 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 name="description" content="UAT FLOW"> | |
| <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 hidden or 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