JSFiddle - React, Tailwind, and code Playground

by huang shiyu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.11.4/gitgraph.js"></script>
<canvas id="gitGraph"></canvas>

JavaScript

/***********************
 *  CUSTOM TEMPLATES   *
 ***********************/
const colors = []
var myTemplateConfig = {
  colors: ["#ab1", "#0F0", "#00F"], // branches colors, 1 per column
  branch: {
    lineWidth: 2,
    spacingX: 15,
  },
  commit: {
    spacingY: -30,
    dot: {
      size: 5
    },
    message: {
      displayAuthor: true,
      displayBranch: false,
      displayHash: true,
      font: "normal 12pt Arial"
    },
    shouldDisplayTooltipsInCompactMode: true, // default = true
    tooltipHTMLFormatter: function (commit) {
      return "<b>" + commit.sha1 + "</b>" + ": " + commit.message;
    }
  }
};
var myTemplate = new GitGraph.Template(myTemplateConfig);

/***********************
 *    INITIALIZATION   *
 ***********************/
(async function () {
  const commits = await fetch('https://gitlab.com/api/v4/projects/145205/repository/commits').then(res => res.json())
  const branches = await fetch('https://gitlab.com/api/v4/projects/145205/repository/branches').then(res => res.json())
commits.sort((a, b) => new Date(b.created_at) - new Date(a.created_at))

var config = {
  template: myTemplate // could be: "blackarrow" or "metro" or `myTemplate` (custom Template object)
    //, reverseArrow: true  // to make arrows point to ancestors, if displayed
    //, orientation: "vertical-reverse"
    //, mode: "compact"     // special compact mode: hide messages & compact graph
};
var gitGraph = new GitGraph(config);

/************************
 * BRANCHES AND COMMITS *
 ************************/
// Create branch named "master"
var master = gitGraph.branch("master");
commits.reduce(({ parents, branch }, curr, find) => {
  const commit = {
    message: curr.message,
    author: curr.committer_name,
    sha1: curr.sha,
    date: curr.committed_date
  }
  const index = parents.indexOf(curr.id)
  console.log(find, parents, index, curr.id)
  console.log([...new Set(parents.concat(curr.parent_ids))])
  if (index === -1) {
    gitGraph.commit(commit)
  } else...