Skip to content

Commit a12e9f8

Browse files
TomPlumTomPlum
committed
feat(graph): exposed new graph orientation prop to mirror the graph in the y-axis
1 parent be75174 commit a12e9f8

26 files changed

Lines changed: 115854 additions & 132 deletions

File tree

‎README.md‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -238,13 +238,14 @@ All components have optional props to further configure the log.
238238
239239
### Graph
240240
241-
| Property | Type | Description |
242-
|--------------------------|-------------|----------------------------------------------------------------------------------------------------------------|
243-
| `showCommitNodeHashes` | `boolean` | Whether to show the commit hash next to nodes in the graph. |
244-
| `showCommitNodeTooltips` | `boolean` | Whether to show tooltips when hovering over a commit node. |
245-
| `nodeTheme` | `NodeTheme` | Theme applied to commit node elements in the graph. |
246-
| `nodeSize` | `number` | The diameter, in pixels, of the commits nodes. Should be divisible by 2 and between 8 and 30 to render nicely. |
247-
| `enableResize` | `boolean` | Enables horizontal resizing of the graph. Default: `false`. |
241+
| Property | Type | Description |
242+
|--------------------------|---------------------|----------------------------------------------------------------------------------------------------------------|
243+
| `showCommitNodeHashes` | `boolean` | Whether to show the commit hash next to nodes in the graph. |
244+
| `showCommitNodeTooltips` | `boolean` | Whether to show tooltips when hovering over a commit node. |
245+
| `nodeTheme` | `NodeTheme` | Theme applied to commit node elements in the graph. |
246+
| `nodeSize` | `number` | The diameter, in pixels, of the commits nodes. Should be divisible by 2 and between 8 and 30 to render nicely. |
247+
| `orientation` | `normal \| flipped` | The orientation of the graph. Normal renders the checked-out branch on the left, flipped on the right. |
248+
| `enableResize` | `boolean` | Enables horizontal resizing of the graph. Default: `false`. |
248249
249250
#### NodeTheme
250251

‎packages/demo/src/GitLog.stories.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const meta: Meta<StoryProps> = {
3030
enableResize: false,
3131
nodeTheme: 'default',
3232
nodeSize: 20,
33+
orientation: 'normal',
3334
onSelectCommit: (commit?: Commit) => {
3435
console.info(`Selected commit ${commit?.hash}`)
3536
},
@@ -161,6 +162,17 @@ const meta: Meta<StoryProps> = {
161162
step: 2
162163
}
163164
},
165+
orientation: {
166+
name: 'Graph Orientation',
167+
table: {
168+
category: 'Dimensions'
169+
},
170+
control: 'radio',
171+
options: {
172+
Normal: 'normal',
173+
Flipped: 'flipped'
174+
}
175+
},
164176
onSelectCommit: {
165177
name: 'onSelectCommit',
166178
table: {
@@ -230,6 +242,7 @@ export const Demo: Story = {
230242
<GitLog.Graph
231243
nodeSize={args.nodeSize}
232244
nodeTheme={args.nodeTheme}
245+
orientation={args.orientation}
233246
enableResize={args.enableResize}
234247
showCommitNodeHashes={args.showCommitNodeHashes}
235248
showCommitNodeTooltips={args.showCommitNodeTooltips}

‎packages/demo/src/GitLogPaged.stories.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const meta: Meta<StoryProps> = {
2828
enableResize: false,
2929
nodeTheme: 'default',
3030
nodeSize: 20,
31+
orientation: 'normal',
3132
onSelectCommit: (commit?: Commit) => {
3233
console.info(`Selected commit ${commit?.hash}`)
3334
},
@@ -129,6 +130,17 @@ const meta: Meta<StoryProps> = {
129130
step: 2
130131
}
131132
},
133+
orientation: {
134+
name: 'Graph Orientation',
135+
table: {
136+
category: 'Dimensions'
137+
},
138+
control: 'radio',
139+
options: {
140+
Normal: 'normal',
141+
Flipped: 'flipped'
142+
}
143+
},
132144
onSelectCommit: {
133145
name: 'onSelectCommit',
134146
table: {
@@ -208,6 +220,7 @@ export const Demo: Story = {
208220
<GitLogPaged.Graph
209221
nodeSize={args.nodeSize}
210222
nodeTheme={args.nodeTheme}
223+
orientation={args.orientation}
211224
enableResize={args.enableResize}
212225
showCommitNodeHashes={args.showCommitNodeHashes}
213226
showCommitNodeTooltips={args.showCommitNodeTooltips}

‎packages/library/README.md‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -196,13 +196,14 @@ All components have optional props to further configure the log.
196196
197197
### Graph
198198
199-
| Property | Type | Description |
200-
|--------------------------|-------------|----------------------------------------------------------------------------------------------------------------|
201-
| `showCommitNodeHashes` | `boolean` | Whether to show the commit hash next to nodes in the graph. |
202-
| `showCommitNodeTooltips` | `boolean` | Whether to show tooltips when hovering over a commit node. |
203-
| `nodeTheme` | `NodeTheme` | Theme applied to commit node elements in the graph. |
204-
| `nodeSize` | `number` | The diameter, in pixels, of the commits nodes. Should be divisible by 2 and between 8 and 30 to render nicely. |
205-
| `enableResize` | `boolean` | Enables horizontal resizing of the graph. Default: `false`. |
199+
| Property | Type | Description |
200+
|--------------------------|---------------------|----------------------------------------------------------------------------------------------------------------|
201+
| `showCommitNodeHashes` | `boolean` | Whether to show the commit hash next to nodes in the graph. |
202+
| `showCommitNodeTooltips` | `boolean` | Whether to show tooltips when hovering over a commit node. |
203+
| `nodeTheme` | `NodeTheme` | Theme applied to commit node elements in the graph. |
204+
| `nodeSize` | `number` | The diameter, in pixels, of the commits nodes. Should be divisible by 2 and between 8 and 30 to render nicely. |
205+
| `orientation` | `normal \| flipped` | The orientation of the graph. Normal renders the checked-out branch on the left, flipped on the right. |
206+
| `enableResize` | `boolean` | Enables horizontal resizing of the graph. Default: `false`. |
206207
207208
#### NodeTheme
208209

‎packages/library/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"author": "Thomas Plumpton",
44
"repository": "https://github.com/TomPlum/react-git-log",
55
"description": "A flexible, themable, React component for visualising Git commit history, branch and tag metadata.",
6-
"version": "2.2.0",
6+
"version": "2.3.0",
77
"license": "Apache-2.0",
88
"type": "module",
99
"main": "dist/react-git-log.js",

‎packages/library/src/GitLog.spec.tsx‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ describe('GitLog', () => {
5858
})
5959
})
6060

61-
it('should render correctly and match the snapshot the standard GitLog component', { timeout: 1000 * 10 } ,() => {
61+
it('should render correctly and match the snapshot of the GitLog component', { timeout: 1000 * 10 } ,() => {
6262
const gitLogEntries = parseGitLogOutput(sleepRepositoryData)
6363

6464
const { asFragment } = render(
@@ -77,6 +77,45 @@ describe('GitLog', () => {
7777
expect(asFragment()).toMatchSnapshot()
7878
})
7979

80+
it('should render correctly and match the snapshot of the GitLog component in flipped orientation', { timeout: 1000 * 10 } ,() => {
81+
const gitLogEntries = parseGitLogOutput(sleepRepositoryData)
82+
83+
const { asFragment } = render(
84+
<GitLog
85+
showHeaders
86+
currentBranch='release'
87+
entries={gitLogEntries}
88+
githubRepositoryUrl='https://github.com/TomPlum/sleep'
89+
>
90+
<GitLog.Tags />
91+
<GitLog.Graph orientation='flipped' />
92+
<GitLog.Table />
93+
</GitLog>
94+
)
95+
96+
expect(asFragment()).toMatchSnapshot()
97+
})
98+
99+
it('should render correctly and match the snapshot of the GitLog component with a custom node size', { timeout: 1000 * 10 } ,() => {
100+
const gitLogEntries = parseGitLogOutput(sleepRepositoryData)
101+
102+
const { asFragment } = render(
103+
<GitLog
104+
showHeaders
105+
currentBranch='release'
106+
entries={gitLogEntries}
107+
defaultGraphWidth={100}
108+
githubRepositoryUrl='https://github.com/TomPlum/sleep'
109+
>
110+
<GitLog.Tags />
111+
<GitLog.Graph nodeSize={12} />
112+
<GitLog.Table />
113+
</GitLog>
114+
)
115+
116+
expect(asFragment()).toMatchSnapshot()
117+
})
118+
80119
it('should log a warning if the graph subcomponent is not rendered', () => {
81120
const consoleWarn = vi.spyOn(console, 'warn')
82121

0 commit comments

Comments
 (0)