Render graph from JSON

[TesloCosmin]

It would be nice to have the possibility to render the graph automatically from JSON data (coming from an Ajax call for example), including the options for customizing dots, arrow, branches, message and so on.

[nicoespeon]

Hi @TesloCosmin =)

For sure that would be a cool feature to add. That would be a nice step to do to enable integration with GitHub / Bitbucket / etc. APIs.

Long time we didn't update the lib but I'll find some time to give it a look. I'll let you know (eventually, feel free to open a PR if you have something in mind =) ).

Thanks!

[noisy]

:+1: for this feature request! Do you know guys is there any standard of JSON format, which could be used for that?

[Potherca]

Looks like there isn't really a git-graph specific format. There's the format used in the Github API and the Bitbucket API, which are both different.

There's also the more generic JSON Graph Format and the Netflix JSON Graph Specification.

I think it would be more sensible to have intermediary converters for each source than try to find a common denominator.

[strich]

Wondering if there has been any additional work on this feature?

[nicoespeon]

Hi @strich =)

There has been no concrete progression from my side, but it's still something I wish to do. There has been discussions around that feature, as you can see with related issues above.

[nicoespeon]

Worth a check: https://github.com/fabien0102/git2json

[YMA-MDL]

Here is a method I have made to render a gitgraph in Aras PLM, from a GitLab commits exports https://gist.github.com/YMA-MDL/b1d7284a8cebc3ecf36829984859656b

I still need to work on it to make sure it ends on the main (gitlab commits are pulled on a branch basis and the branch of each commit is not referenced)

It assumes the input json is sorted chronologically.

[Andrey-Pavlov]

@YMA-MDL I would like first of all to thank you for your solution. It helped me so much.

Have you found solution to how merge branches to master and not vice versa? I have multiple "master into" merge commits.

[j-barata]

Hi, Please consider this : https://github.com/j-barata/react-gitgraph-demo

[fabien0102]

@j-barata Very interesting, I wasn't aware about this react-gitgraph ^^

BTW, this feature is a part of our plan for the v2 (#188 #187). The actual idea is to take this kind of json (https://github.com/fabien0102/git2json/blob/master/test/gitlog.expected) and use it in react with something like this:

<Gitgraph data={myJSON} />

or

<Gitgraph>
  {(gitgraph) => {
    gitgraph.import(myJSON)
  }}
</Gitgraph>

You have all examples of the new gitgraph-react usage here -> https://github.com/nicoespeon/gitgraph.js/tree/2.0.0/packages/gitgraph-react/src/stories

Any feedback are appreciate :wink:

[nicoespeon]

This will be fixed with v2 with an import() function that'd take a JSON-input. The format of the JSON will be the one generated by git2json to begin with.

[nicoespeon]

So, this is technically not resolved for the gitgraph.js package… But we released @gitgraph/react in v1.0.0-0 and this was implemented here. There is an import() function, which expects the JSON format generated by git2json.

We even have stories to document usage:

<Gitgraph>
  {(gitgraph) => {
    gitgraph.import(simpleGraph);
  }}
</Gitgraph>

// simpleGraph JS object, could be a JSON
export default [
  {
    refs: ["HEAD", "feat1"],
    hash: "5d8e7d7f6b4cf520b4ec55a0face7c07b4d642c1",
    hashAbbrev: "5d8e7d7",
    tree: "4b825dc642cb6eb9a060e54bf8d69288fbee4904",
    treeAbbrev: "4b825dc",
    parents: ["0df8d7cce68908571cd7cd9178e498f1519de77e"],
    parentsAbbrev: ["0df8d7c"],
    author: {
      name: "Nicolas Carlo",
      email: "nicolas.carlo@busbud.com",
      timestamp: 1532021290000,
    },
    committer: {
      name: "Nicolas Carlo",
      email: "nicolas.carlo@busbud.com",
      timestamp: 1532021290000,
    },
    subject: "third",
    body: "",
    notes: "",
    stats: [],
  },
  {
    refs: ["master"],
    hash: "5e5b104afddb719d02b6d685463dd38b4dd82493",
    hashAbbrev: "5e5b104",
    tree: "4b825dc642cb6eb9a060e54bf8d69288fbee4904",
    treeAbbrev: "4b825dc",
    parents: ["0df8d7cce68908571cd7cd9178e498f1519de77e"],
    parentsAbbrev: ["0df8d7c"],
    author: {
      name: "Nicolas Carlo",
      email: "nicolas.carlo@busbud.com",
      timestamp: 1532021274000,
    },
    committer: {
      name: "Nicolas Carlo",
      email: "nicolas.carlo@busbud.com",
      timestamp: 1532021274000,
    },
    subject: "second",
    body: "",
    notes: "",
    stats: [],
  },
  {
    refs: [],
    hash: "0df8d7cce68908571cd7cd9178e498f1519de77e",
    hashAbbrev: "0df8d7c",
    tree: "4b825dc642cb6eb9a060e54bf8d69288fbee4904",
    treeAbbrev: "4b825dc",
    parents: [],
    parentsAbbrev: [],
    author: {
      name: "Nicolas Carlo",
      email: "nicolas.carlo@busbud.com",
      timestamp: 1532021230000,
    },
    committer: {
      name: "Nicolas Carlo",
      email: "nicolas.carlo@busbud.com",
      timestamp: 1532021230000,
    },
    subject: "first",
    body: "",
    notes: "",
    stats: [],
  },
];

We didn't test a lot of use-cases though, so we flagged the feature as "experimental" for now. But it exists. I suggest you report any scenario where it fails rendering the graph as you would expect—or might even failed rendering at all.

Thus, I'm closing this issue as we won't maintain the gitgraph.js package. There will be a @gitgraph/js package soon to replace it.

We still accept PRs if someone really needs it, but I'd suggest moving to the aforementioned packages. Thanks 🙏