https://github.com/pantharshit00/recontrib
React Component that implements GitHub's commit chart.
https://github.com/pantharshit00/recontrib
chart github graph react
Last synced: 3 months ago
JSON representation
React Component that implements GitHub's commit chart.
- Host: GitHub
- URL: https://github.com/pantharshit00/recontrib
- Owner: pantharshit00
- License: mit
- Created: 2019-05-17T16:19:44.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-20T11:05:17.000Z (over 5 years ago)
- Last Synced: 2024-10-12T22:50:22.209Z (over 1 year ago)
- Topics: chart, github, graph, react
- Language: TypeScript
- Homepage: https://pantharshit00.github.io/recontrib
- Size: 4.28 MB
- Stars: 20
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Recontrib
React Component that implements GiHub's commit graph UI. https://pantharshit00.github.io/recontrib
## Usage
1. Add the Reach UI tooltip CSS
```js
import '@reach/tooltip/style.css';
```
2. Use the component and pass the data
```js
const App = () => {
return (
);
};
```
Data is structured as following. You can directly pass the data from the GitHub API(https://api.github.com/repos/:owner/:repo/stats/commit_activity):
```ts
interface WeekData {
days: number[]; // commits in individual days in the week
total: number; // total number commits in the week
week: number; // Timestamp in seconds of the seconds of the starting of the week
}
```
## Props
```ts
interface Props {
data: Array; // data
gridSize?: number; // size of the tile
fontSize?: string; // fontSize of months and weekdays
}
```
---
MIT️ ©️ [Harshit Pant](https://twitter.com/pantharshit00) 2019