@akshay-rajput/git-graph-svg 2.0.3 → 2.0.5

package/README.md

@@ -1,33 +1,52 @@
 # GitGraphSVG
 
-A lightweight, customizable **SVG-based Git commit graph renderer for
-React**.
+A lightweight, customizable **SVG-based Git commit graph renderer for React**.
 
-`GitGraphSVG` renders a commit history with branching and merging
-support, automatic lane allocation, and customizable node/edge
-rendering.
+`git-graph-svg` renders a Git-style commit history with branching and merging support, automatic lane allocation, and fully customizable node and edge rendering.
 
-------------------------------------------------------------------------
+Built for **flexibility, performance, and zero dependencies**.
 
-## ✨ Features
+---
 
--   🔀 Automatic branch lane management\
--   🎨 Customizable color palette\
--   🧩 Render overrides (`renderNode`, `renderEdge`)\
--   📐 Fully SVG-based (no canvas)\
--   ⚡ Lightweight & dependency-free
+# ✨ Features
 
-------------------------------------------------------------------------
+* 🔀 Automatic branch lane management
+* 🎨 Customizable branch color palettes
+* 🧩 Fully customizable node and edge rendering
+* 📐 Pure SVG rendering (no canvas)
+* ⚡ Lightweight & dependency-free
+* 🌿 Supports complex branch & merge histories
+
+---
+
+# 📐 Screenshots
 
-## 📐 Screenshots
 ![Screenshot](https://raw.githubusercontent.com/notakshayrajput/RepositoryGraph/refs/heads/main/images/examples.png)
 
-## 🚀 Basic Usage
+![Screenshot](https://raw.githubusercontent.com/notakshayrajput/RepositoryGraph/refs/heads/main/images/examples1.png)
+
+---
+
+# 📦 Installation
+
+```bash
+npm install git-graph-svg
+```
+
+or
+
+```bash
+yarn add git-graph-svg
+```
+
+---
 
-``` tsx
-import { GitGraphSVG, CommitItem } from "./GitGraphSVG";
+# 🚀 Basic Usage
 
-const commits: CommitItem[] = [
+```tsx
+import { GitGraph, type ICommitItem } from "git-graph-svg";
+
+const commits: ICommitItem[] = [
   {
     id: "a1",
     message: "Initial commit",
@@ -45,77 +64,78 @@ const commits: CommitItem[] = [
 ];
 
 export default function App() {
-  return <GitGraphSVG commits={commits} />;
+  return <GitGraph commits={commits} />;
 }
 ```
 
-------------------------------------------------------------------------
-
-## 📘 Data Model
+---
 
-### CommitItem
+# 📘 Commit Data Model
 
-``` ts
-export interface CommitItem {
-  id: string;
-  message: string;
-  author: string;
-  date: string;
-  parents: string[];
+```ts
+export interface ICommitItem {
+    id: string;
+    message: string;
+    author: string;
+    date: string;
+    parents: string[];
+    meta?: any;
 }
 ```
 
-Each commit must reference its parent commit IDs in the `parents` array.
-
-------------------------------------------------------------------------
-
-## ⚙️ Props
-
-``` ts
-export interface GitGraphSVGProps {
-  commits: CommitItem[];
-
-  rowHeight?: number;
-  laneWidth?: number;
-  colorPalette?: string[];
-
-  renderNode?: (commit: _CommitItem) => React.ReactNode;
-
-  renderEdge?: (
-    from: _CommitItem,
-    to: _CommitItem,
-    defaultPath: string
-  ) => React.ReactNode;
+Each commit references its parent commit IDs in the `parents` array.
+
+---
+
+# ⚙️ Component Props
+
+```ts
+interface GitGraphProps {
+    commits: ICommitItem[];
+    colorPalette?: string[];
+    padding?: {
+        left: number;
+        right: number;
+        bottom: number;
+        top: number;
+    } | number;
+    rowHeight?: number;
+    laneWidth?: number;
+    style?: React.CSSProperties;
+    renderNode?: (x: number, y: number, color: string, commit: ICommitItem) => ReactNode;
+    renderEdge?: (from: ICommitItem, to: ICommitItem, d: string, color: string) => ReactNode;
+    getMergeCurve?: (x1: number, y1: number, x2: number, y2: number) => string;
+    getBranchSplitCurve?: (x1: number, y1: number, x2: number, y2: number) => string;
 }
 ```
 
-------------------------------------------------------------------------
+---
+
+# 🎨 Custom Rendering
 
-## 🎨 Custom Rendering
+The graph engine handles **layout and branch logic**, while you control how nodes and edges are rendered.
 
-You can override how nodes and edges are rendered.
+---
 
-### Custom Nodes
+## Custom Node Rendering
 
-``` tsx
-<GitGraphSVG
+```tsx
+<GitGraph
   commits={commits}
-  renderNode={(commit) => (
+  renderNode={(x, y, color, commit) => (
     <g key={commit.id}>
+      <circle cx={x} cy={y} r={3} fill={color} />
+
       <circle
-        cx={commit.cx}
-        cy={commit.cy}
-        r={8}
-        fill="white"
-        stroke={commit.color}
-        strokeWidth={3}
+        cx={x}
+        cy={y}
+        r={6}
+        fill="none"
+        stroke={color}
+        strokeWidth={2}
       />
-      <text
-        x={commit.cx}
-        y={commit.cy - 10}
-        textAnchor="middle"
-        fontSize={10}
-      >
+
+      <text x={x + 20} y={y}>
         {commit.id}
       </text>
     </g>
@@ -123,88 +143,177 @@ You can override how nodes and edges are rendered.
 />
 ```
 
-------------------------------------------------------------------------
+---
 
-### Custom Edges
+## Custom Edge Rendering
 
-``` tsx
-<GitGraphSVG
+```tsx
+<GitGraph
   commits={commits}
-  renderEdge={(from, to, path) => (
+  renderEdge={(from, to, path, color) => (
     <path
       key={`${from.id}-${to.id}`}
       d={path}
-      stroke="black"
-      strokeDasharray="4 2"
+      stroke={color}
+      strokeWidth={2}
       fill="none"
+      strokeDasharray="5,5"
     />
   )}
 />
 ```
 
-------------------------------------------------------------------------
+---
 
-## 🎨 Default Configuration
+## 🎨 Custom Color Palette
 
-``` ts
-const LANE_WIDTH = 50;
-const NODE_RADIUS = 5;
+```tsx
+<GitGraph
+  commits={commits}
+  colorPalette={[
+    "#8338ec",
+    "#ff006e",
+    "#fb5607",
+    "#ffbe0b"
+  ]}
+/>
+```
 
-const COLOR_PALETTE = [
-  "#3a86ff",
-  "#8338ec",
-  "#ff006e",
-  "#fb5607",
-  "#ffbe0b"
-];
+If the number of active branches exceeds the palette size, additional colors are generated automatically.
+
+---
+
+## 🧪 Example: Multiple Graph Styles
+
+```tsx
+import { useMemo } from "react";
+import { GitGraph, type ICommitItem } from "git-graph-svg";
+import { heavyCommitDataset } from "./type";
+
+function App() {
+  const commits = useMemo(
+    () =>
+      heavyCommitDataset.sort(
+        (a: any, b: any) =>
+          new Date(b.date).getTime() - new Date(a.date).getTime()
+      ),
+    [heavyCommitDataset]
+  );
+
+  return (
+    <div style={{ display: "flex" }}>
+      
+      {/* Graph with custom nodes and dashed edges */}
+      <GitGraph
+        commits={commits}   
+        rowHeight={25}
+        laneWidth={25}
+        renderNode={(x, y, color, commit) => (
+          <g key={commit.id}>
+            <circle cx={x} cy={y} r={3} fill={color} />
+            <circle
+              cx={x}
+              cy={y}
+              r={6}
+              fill="none"
+              stroke={color}
+              strokeWidth={2}
+            />
+            <text x={x + 20} y={y}>
+              {commit.id}
+            </text>
+          </g>
+        )}
+        renderEdge={(from, to, d, color) => (
+          <path
+            key={`${from.id}-${to.id}`}
+            d={d}
+            stroke={color}
+            strokeWidth={2}
+            fill="none"
+            strokeDasharray="5,5"
+          />
+        )}
+      />
+
+      {/* Default graph */}
+      <GitGraph commits={commits} rowHeight={35} laneWidth={35} />
+
+
+    </div>
+  );
+}
+
+export default App;
 ```
 
-If more branches exist than available colors, random colors are
-generated automatically.
+---
+
+# 📏 Layout Rules
+
+| Property  | Description                         |
+| --------- | ----------------------------------- |
+| rowHeight | Vertical spacing between commits    |
+| laneWidth | Horizontal spacing between branches |
+| width     | `laneCount * laneWidth`             |
+| height    | `commitCount * rowHeight`           |
+
+---
+
+# 🔄 Branch & Merge Handling
+
+The engine automatically handles:
+
+* Branch creation
+* Branch merging
+* Lane reuse when branches end
+* Multiple parent commits
+* Smooth lane transitions
 
-------------------------------------------------------------------------
+Rendering rules:
 
-## 📏 Layout Rules
+* Straight lines when commits stay in the same lane
+* Smooth curves when switching lanes
+* Colors follow branch lineage
 
--   Vertical spacing = `rowHeight`
--   Horizontal spacing = `laneWidth`
--   SVG width = `lanesCount * laneWidth`
--   SVG height = `commits.length * rowHeight`
+---
 
-------------------------------------------------------------------------
+# 🧠 Design Philosophy
 
-## 🔄 Merge & Branch Handling
+`git-graph-svg` is designed as a **rendering engine**, not a UI component.
 
--   Straight lines are drawn when commits stay in the same lane.
--   Smooth Bézier curves are used when switching lanes.
--   Multiple parents are supported.
--   Lane colors are automatically reassigned when branches end.
+It handles:
 
-------------------------------------------------------------------------
+* commit layout
+* lane allocation
+* edge path generation
+* color management
 
-## 🧠 Design Philosophy
+You control the **visual layer**.
 
-`GitGraphSVG` is designed as a **rendering engine**, not a UI component.
+This makes it easy to integrate with:
 
-It: - Calculates layout - Assigns lanes and colors - Generates edge
-paths - Exposes rendering hooks
+* Git visualizers
+* CI/CD dashboards
+* repository browsers
+* build pipeline UIs
 
-You control the visual layer.
+---
 
-------------------------------------------------------------------------
+# 🚀 Future Enhancements
 
-## 🚀 Possible Future Enhancements
+Possible upcoming improvements:
 
--   Animations
--   Hover interactions
--   Zoom & pan
--   Horizontal layout support
--   Stepped lane transitions
--   Commit grouping
--   Performance optimization for large graphs
+* animations
+* hover tooltips
+* zoom & pan
+* horizontal layout support
+* commit grouping
+* performance optimizations for large repositories
+* interactive branch highlighting
 
-------------------------------------------------------------------------
+---
 
-## 📜 License
+# 📜 License
 
 MIT

package/dist/components/GitGraph/GitGraph.d.ts

@@ -10,11 +10,17 @@ export interface ICommitItem {
 export interface GitGraphProps {
     commits: ICommitItem[];
     colorPalette?: string[];
+    padding?: {
+        left: number;
+        right: number;
+        bottom: number;
+        top: number;
+    } | number;
     rowHeight?: number;
     laneWidth?: number;
     style?: React.CSSProperties;
     renderNode?: (x: number, y: number, color: string, commit: ICommitItem) => ReactNode;
-    renderEdge?: (d: string, color: string) => ReactNode;
+    renderEdge?: (from: ICommitItem, to: ICommitItem, d: string, color: string) => ReactNode;
     getMergeCurve?: (x1: number, y1: number, x2: number, y2: number) => string;
     getBranchSplitCurve?: (x1: number, y1: number, x2: number, y2: number) => string;
 }

package/dist/components/GitGraph/util.d.ts

@@ -2,7 +2,7 @@ import { ICommitItem } from './GitGraph';
 declare const svgUtils: {
     getCurveTop(x1: number, y1: number, x2: number, y2: number): string;
     getCurveBottom(x1: number, y1: number, x2: number, y2: number): string;
-    drawFinalPath(d: string, color: string, width?: number): import("react/jsx-runtime").JSX.Element;
+    drawFinalPath(d: string, color: string, width: number | undefined, from: ICommitItem, to: ICommitItem): import("react/jsx-runtime").JSX.Element;
     drawPoint(x: number, y: number, color: string, commit: ICommitItem): import("react/jsx-runtime").JSX.Element;
 };
 export { svgUtils };