@rsalianto/git-heatmap-react 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +95 -0
- package/package.json +5 -2
package/README.md
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
# @rsalianto/git-heatmap-react
|
|
2
|
+
|
|
3
|
+
React component for displaying GitHub/GitLab contribution heatmaps.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @rsalianto/git-heatmap-react @rsalianto/git-heatmap-core
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Fetch from an API endpoint
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { GitHeatmap } from "@rsalianto/git-heatmap-react";
|
|
17
|
+
|
|
18
|
+
export default function Page() {
|
|
19
|
+
return <GitHeatmap apiUrl="/api/github-contributions" />;
|
|
20
|
+
}
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### Pass data directly
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { GitHeatmap } from "@rsalianto/git-heatmap-react";
|
|
27
|
+
import { normalizeManual } from "@rsalianto/git-heatmap-core";
|
|
28
|
+
|
|
29
|
+
const data = normalizeManual([
|
|
30
|
+
{ date: "2024-06-01", count: 4 },
|
|
31
|
+
{ date: "2024-06-02", count: 0 },
|
|
32
|
+
]);
|
|
33
|
+
|
|
34
|
+
export default function Page() {
|
|
35
|
+
return <GitHeatmap data={data} />;
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Custom fetch function
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
<GitHeatmap fetchData={() => fetch("/api/contributions").then(r => r.json())} />
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Props
|
|
46
|
+
|
|
47
|
+
| Prop | Type | Default | Description |
|
|
48
|
+
|---|---|---|---|
|
|
49
|
+
| `data` | `HeatmapData` | — | Static data (skips fetching) |
|
|
50
|
+
| `apiUrl` | `string` | — | Endpoint returning `HeatmapData` JSON |
|
|
51
|
+
| `fetchData` | `() => Promise<HeatmapData>` | — | Custom fetch function |
|
|
52
|
+
| `levels` | `LevelConfig[]` | `DEFAULT_LEVELS` | Color thresholds (5 levels) |
|
|
53
|
+
| `cellSize` | `number` | `10` | Cell size in px |
|
|
54
|
+
| `cellGap` | `number` | `3` | Gap between cells in px |
|
|
55
|
+
| `cellRadius` | `number` | `2` | Cell border radius in px |
|
|
56
|
+
| `showTotal` | `boolean` | `true` | Show total contributions text |
|
|
57
|
+
| `showLegend` | `boolean` | `true` | Show Less/More legend |
|
|
58
|
+
| `showMonthLabels` | `boolean` | `true` | Show month labels |
|
|
59
|
+
| `showDayLabels` | `boolean` | `true` | Show Mon/Wed/Fri labels |
|
|
60
|
+
| `theme` | `Partial<HeatmapTheme>` | — | Override CSS variable values |
|
|
61
|
+
| `onDayClick` | `(day: HeatmapDay) => void` | — | Click handler |
|
|
62
|
+
| `label` | `string` | `"Contribution heatmap"` | Accessible label |
|
|
63
|
+
|
|
64
|
+
## Theming
|
|
65
|
+
|
|
66
|
+
Override via the `theme` prop or CSS variables:
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
<GitHeatmap
|
|
70
|
+
apiUrl="/api/contributions"
|
|
71
|
+
theme={{
|
|
72
|
+
colorL0: "#161b22",
|
|
73
|
+
colorL1: "#0e4429",
|
|
74
|
+
colorL2: "#006d32",
|
|
75
|
+
colorL3: "#26a641",
|
|
76
|
+
colorL4: "#39d353",
|
|
77
|
+
}}
|
|
78
|
+
/>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
CSS variables: `--ghm-color-l0` through `--ghm-color-l4`, `--ghm-text`, `--ghm-tooltip-bg`, `--ghm-tooltip-border`, `--ghm-tooltip-text`, `--ghm-font`, `--ghm-fs`.
|
|
82
|
+
|
|
83
|
+
## `useHeatmapData` hook
|
|
84
|
+
|
|
85
|
+
```ts
|
|
86
|
+
import { useHeatmapData } from "@rsalianto/git-heatmap-react";
|
|
87
|
+
|
|
88
|
+
const { data, status, error } = useHeatmapData({ apiUrl: "/api/contributions" });
|
|
89
|
+
// status: "idle" | "loading" | "success" | "error"
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## Related packages
|
|
93
|
+
|
|
94
|
+
- [`@rsalianto/git-heatmap-next`](https://www.npmjs.com/package/@rsalianto/git-heatmap-next) — Next.js App Router API route handlers
|
|
95
|
+
- [`@rsalianto/git-heatmap-core`](https://www.npmjs.com/package/@rsalianto/git-heatmap-core) — Core utilities
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rsalianto/git-heatmap-react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "React component for git contribution heatmap",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -13,7 +13,10 @@
|
|
|
13
13
|
"require": "./dist/index.js"
|
|
14
14
|
}
|
|
15
15
|
},
|
|
16
|
-
"files": [
|
|
16
|
+
"files": [
|
|
17
|
+
"dist",
|
|
18
|
+
"README.md"
|
|
19
|
+
],
|
|
17
20
|
"sideEffects": false,
|
|
18
21
|
"scripts": {
|
|
19
22
|
"build": "tsup",
|