https://github.com/react-sandbox/heatmap
📅🔥 Calendar heatmap graph
https://github.com/react-sandbox/heatmap
calendar-heatmap heatmap react react-heatmap svg typescript
Last synced: 9 months ago
JSON representation
📅🔥 Calendar heatmap graph
- Host: GitHub
- URL: https://github.com/react-sandbox/heatmap
- Owner: react-sandbox
- License: mit
- Created: 2023-12-30T22:39:03.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-02T07:38:47.000Z (over 1 year ago)
- Last Synced: 2024-12-31T01:30:02.505Z (10 months ago)
- Topics: calendar-heatmap, heatmap, react, react-heatmap, svg, typescript
- Language: TypeScript
- Homepage:
- Size: 605 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
@react-sandbox/heatmap
📅🔥 Calendar heatmap component
Customizable SVG inspired by GitHub's contribution graph.
### Install
Install the `@react-sandbox/heatmap` package:
```bash
# npm
npm install @react-sandbox/heatmap
# yarn
yarn add @react-sandbox/heatmap
# pnpm
pnpm add @react-sandbox/heatmap
```
### Import
Import the `Heatmap` component:
```tsx
import React from 'react'
import Heatmap from '@react-sandbox/heatmap'
const values = [
{ date: new Date('2023-01-01T00:00:00'), count: 5 },
{ date: new Date('2023-01-05T00:00:00'), count: 10 },
{ date: new Date('2023-01-15T00:00:00'), count: 7 },
{ date: new Date('2023-02-08T00:00:00'), count: 3 }
// ...
]
function App() {
return (
)
}
```
### Props
| Prop | Type | Default | Description |
| ------------- | ---------------------- | -------------- | ------------------------------------------------------ |
| `startDate` | `Date` | **required** | Start date |
| `values` | `Array` | **required** | Array of objects with `date: Date` and `count: number` |
| `emptyColor` | `RGB Tuple` | `[20, 30, 30]` | Color of day with a `count` of 0 |
| `baseColor` | `RGB Tuple` | `[0, 128, 0]` | Color of day with a `count` of 1 or more |
| `scaleFactor` | `number` | `10` | Multiplier that increases `baseColor` intensity |
| `className` | `string` | `-` | CSS classes |
| `style` | `React.CSSProperties` | `-` | CSS styles |
## Development
### Local
```
pnpm install
pnpm dev
```
### Tests
```
pnpm test
```
### Example
Inside `test/`:
```
pnpm install
pnpm dev
```
## License
MIT