(@gitgraph/js) Add option to make graph responsive

package.json

@@ -28,7 +28,7 @@
     "develop": "concurrently npm:watch npm:storybook",
     "website": "lerna run start --scope=@gitgraph/website --stream",
     "deploy:website": "lerna run deploy --scope=@gitgraph/website --stream",
-    "lint": "eslint packages/*/src/**/*.{ts,tsx,js,jsx}",
+    "lint": "eslint packages/**/src/**/*.{ts,tsx}",
     "lint:fix": "npm run lint -- --fix",
     "pretest": "npm run build",
     "test": "jest",

packages/gitgraph-js/src/gitgraph.ts

@@ -63,7 +63,7 @@ interface CommitYWithOffsets {
 
 function createGitgraph(
   graphContainer: HTMLElement,
-  options?: GitgraphOptions,
+  options?: GitgraphOptions & { responsive?: boolean },
 ) {
   let commitsElements: {
     [commitHash: string]: {
@@ -85,9 +85,16 @@ function createGitgraph(
 
   // Create an `svg` context in which we'll render the graph.
   const svg = createSvg();
-  adaptSvgOnUpdate();
+  adaptSvgOnUpdate(Boolean(options && options.responsive));
   graphContainer.appendChild(svg);
 
+  if (options && options.responsive) {
+    graphContainer.setAttribute(
+      "style",
+      "display:inline-block; position: relative; width:100%; padding-bottom:100%; vertical-align:middle; overflow:hidden;",
+    );
+  }
+
   // React on gitgraph updates to re-render the graph.
   const gitgraph = new GitgraphCore(options);
   gitgraph.subscribe((data) => {
@@ -123,15 +130,15 @@ function createGitgraph(
     );
   }
 
-  function adaptSvgOnUpdate(): void {
+  function adaptSvgOnUpdate(adaptToContainer: boolean): void {
     const observer = new MutationObserver(() => {
       if (shouldRecomputeOffsets) {
         shouldRecomputeOffsets = false;
         computeOffsets();
         render(lastData);
       } else {
         positionCommitsElements();
-        adaptGraphDimensions();
+        adaptGraphDimensions(adaptToContainer);
       }
     });
 
@@ -221,7 +228,7 @@ function createGitgraph(
       });
     }
 
-    function adaptGraphDimensions(): void {
+    function adaptGraphDimensions(adaptToContainer: boolean): void {
       const { height, width } = svg.getBBox();
 
       // FIXME: In horizontal mode, we mimic @gitgraph/react behavior
@@ -245,8 +252,16 @@ function createGitgraph(
           // Add `BRANCH_LABEL_PADDING_Y` so we don't crop branch label.
           BRANCH_LABEL_PADDING_Y + TOOLTIP_PADDING + verticalCustomOffset;
 
-      svg.setAttribute("width", (width + widthOffset).toString());
-      svg.setAttribute("height", (height + heightOffset).toString());
+      if (adaptToContainer) {
+        svg.setAttribute("preserveAspectRatio", "xMinYMin meet");
+        svg.setAttribute(
+          "viewBox",
+          `0 0 ${width + widthOffset} ${height + heightOffset}`,
+        );
+      } else {
+        svg.setAttribute("width", (width + widthOffset).toString());
+        svg.setAttribute("height", (height + heightOffset).toString());
+      }
     }
   }
 

packages/gitgraph-react/src/Gitgraph.tsx

@@ -116,7 +116,7 @@ class Gitgraph extends React.Component<GitgraphProps, GitgraphState> {
           <g ref={this.$commits}>
             {this.state.commits.map((commit) => (
               <Commit
-                key={commit.hashAbbrev}
+                key={commit.hash}
                 commits={this.state.commits}
                 commit={commit}
                 currentCommitOver={this.state.currentCommitOver}

packages/stories/src/gitgraph-js/1-basic-usage.stories.tsx

@@ -422,4 +422,21 @@ storiesOf("gitgraph-js/1. Basic usage", module)
         develop.delete();
       }}
     </GraphContainer>
+  ))
+  .add("responsive", () => (
+    <GraphContainer>
+      {(graphContainer) => {
+        const gitgraph = createGitgraph(graphContainer, {
+          generateCommitHash: createFixedHashGenerator(),
+          responsive: true,
+        });
+
+        const master = gitgraph.branch("master").commit("Initial commit");
+        const develop = gitgraph.branch("develop");
+        develop.commit("one");
+        master.commit("two");
+        develop.commit("three");
+        master.merge(develop);
+      }}
+    </GraphContainer>
   ));