gitgrpah.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <html>
  2. <head>
  3. <title>GitFlow</title>
  4. <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.11.4/gitgraph.css" />
  5. </head>
  6. <body>
  7. <canvas id="gitGraph"></canvas>
  8. <script src="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.11.4/gitgraph.min.js"></script>
  9. <script>
  10. /***********************
  11. * CUSTOM TEMPLATES *
  12. ***********************/
  13. var myTemplateConfig = {
  14. colors: ["#979797", "#008fb5", "#f1c109"],
  15. branch: {
  16. lineWidth: 10,
  17. spacingX: 50,
  18. labelRotation: 0
  19. },
  20. commit: {
  21. spacingY: -80,
  22. dot: {
  23. size: 12
  24. },
  25. message: {
  26. displayAuthor: false,
  27. displayBranch: false,
  28. displayHash: false,
  29. font: "normal 12pt Arial"
  30. },
  31. tooltipHTMLFormatter: function(commit) {
  32. return "<b>" + commit.sha1 + "</b>" + ": " + commit.message;
  33. }
  34. }
  35. };
  36. var myTemplate = new GitGraph.Template(myTemplateConfig);
  37. var gitgraph = new GitGraph({
  38. template: "metro",
  39. reverseArrow: false,
  40. orientation: "vertical",
  41. //mode: "compact"
  42. });
  43. var master = gitgraph.branch("master");
  44. master.commit({message: "ENH: feature 1", author: "Alice <alice@xyz.com>"});
  45. master.commit({message: "ENH: feature 2", author: "Alice <alice@xyz.com>"});
  46. feature = master.branch("feature");
  47. master.commit({message: "ENH: feature 3", author: "Alice <alice@xyz.com>"});
  48. feature.commit({message: "ENH: feature 4", author: "Alice <alice@xyz.com>"});
  49. feature.commit({message: "ENH: feature 4 - fix 1", author: "Alice <alice@xyz.com>"});
  50. feature.commit({message: "ENH: feature 4 - fix 2", author: "Alice <alice@xyz.com>"});
  51. feature.merge(master);
  52. </script>
  53. </body>
  54. </html>