You're Invited: Meet the Socket team at BSidesSF and RSAC - April 27 - May 1.RSVP
Socket
Sign inDemoInstall
Socket

@manufac/reactjs-calendar-heatmap

Package Overview
Dependencies
Maintainers
1
Versions
33
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@manufac/reactjs-calendar-heatmap - npm Package Compare versions

Comparing version

to
0.2.5

dist/esm/index.js

24

package.json
{
"name": "@manufac/reactjs-calendar-heatmap",
"version": "0.2.4",
"version": "0.2.5",
"description": "React component for d3.js calendar heatmap graph.",

@@ -19,9 +19,14 @@ "homepage": "https://manufac-analytics.github.io/reactjs-calendar-heatmap/",

"clean": "rm -rf dist/*",
"build": "webpack",
"build:umd": "webpack",
"build:esm": "rollup -c",
"build": "yarn build:umd && yarn build:esm",
"start": "webpack --watch"
},
"main": "dist/calendar-heatmap.js",
"module": "dist/calendar-heatmap.js",
"jsnext:main": "dist/calendar-heatmap.js",
"types": "dist/types.d.ts",
"exports": {
"import": "./dist/esm/index.js",
"require": "./dist/umd/index.js"
},
"main": "dist/umd/index.js",
"module": "dist/esm/index.js",
"types": "dist/umd/types.d.ts",
"files": [

@@ -34,7 +39,12 @@ "dist"

"@babel/preset-react": "^7.16.7",
"@rollup/plugin-babel": "^5.3.1",
"@rollup/plugin-node-resolve": "^13.2.1",
"babel-loader": "^8.2.5",
"copy-webpack-plugin": "^10.2.4",
"css-loader": "^6.5.1",
"css-loader": "^6.7.1",
"postcss": "^8.4.12",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"rollup": "^2.70.2",
"rollup-plugin-postcss": "^4.0.2",
"style-loader": "^3.3.1",

@@ -41,0 +51,0 @@ "webpack": "^5.66.0",

@@ -5,25 +5,29 @@ # React component for D3.js Calendar Heatmap

Includes a global overview of multiple years and visualizations of year, month, week and day overview with zoom for details-on-demand.
Includes a global overview of multiple years and visualizations of year, month, week and day overview with zoom for details-on-demand.
Inspired by [Github's contribution graph](https://help.github.com/articles/viewing-contributions-on-your-profile/#contributions-calendar)
- Inspired by [Github's contribution graph](https://help.github.com/articles/viewing-contributions-on-your-profile/#contributions-calendar)
- Based on [Calendar View](https://bl.ocks.org/mbostock/4063318) by [Mike Bostock](https://github.com/mbostock)
- Based on [D3.js Calendar Heatmap](https://github.com/DKirwan/calendar-heatmap) by [Darragh Kirwan](https://github.com/DKirwan)
- Based on [ReactJS Calendar Heatmap](https://github.com/g1eb/reactjs-calendar-heatmap) by [Gleb](https://github.com/g1eb)
Based on [Calendar View](https://bl.ocks.org/mbostock/4063318) by [Mike Bostock](https://github.com/mbostock)
Aaand [D3.js Calendar Heatmap](https://github.com/DKirwan/calendar-heatmap) by [Darragh Kirwan](https://github.com/DKirwan)
[Live Demo](https://manufac-analytics.github.io/reactjs-calendar-heatmap/).
## Demo
Click <a href="https://rawgit.com/g1eb/reactjs-calendar-heatmap/master/" target="_blank">here</a> for a live demo.
### Global overview
### Global overview
[![calendar heatmap - global overview](https://raw.githubusercontent.com/g1eb/reactjs-calendar-heatmap/master/images/screenshot_global_overview.png)](https://rawgit.com/g1eb/reactjs-calendar-heatmap/master/)
### Year overview
[![calendar heatmap - year overview](https://raw.githubusercontent.com/g1eb/reactjs-calendar-heatmap/master/images/screenshot_year_overview.png)](https://rawgit.com/g1eb/reactjs-calendar-heatmap/master/)
### Month overview
[![calendar heatmap - month overview](https://raw.githubusercontent.com/g1eb/reactjs-calendar-heatmap/master/images/screenshot_month_overview.png)](https://rawgit.com/g1eb/reactjs-calendar-heatmap/master/)
### Week overview
[![calendar heatmap - week overview](https://raw.githubusercontent.com/g1eb/reactjs-calendar-heatmap/master/images/screenshot_week_overview.png)](https://rawgit.com/g1eb/reactjs-calendar-heatmap/master/)
### Day overview
[![calendar heatmap - day overview](https://raw.githubusercontent.com/g1eb/reactjs-calendar-heatmap/master/images/screenshot_day_overview.png)](https://rawgit.com/g1eb/reactjs-calendar-heatmap/master/)

@@ -33,23 +37,23 @@

1) Install 'reactjs-calendar-heatmap' with npm
1. Install `@manufac/reactjs-calendar-heatmap` with `yarn` (or `npm`):
```
npm install reactjs-calendar-heatmap
yarn add @manufac/reactjs-calendar-heatmap
```
2) Import `CalendarHeatmap` in your component
2. Import `CalendarHeatmap` in your component
```javascript
import CalendarHeatmap from 'reactjs-calendar-heatmap'
```js
import { CalendarHeatmap } from '@manufac/reactjs-calendar-heatmap';
```
3) Render `CalendarHeatmap` component
3. Render `CalendarHeatmap` component
```html
```jsx
<CalendarHeatmap
data={data}
color={color}
overview={overview}
handler={print}>
</CalendarHeatmap>
data="{data}"
color="{color}"
overview="{overview}"
handler="{print}"
/>
```

@@ -59,8 +63,8 @@

|Property | Usage | Default | Required |
|:------------- |:-------------|:-----:|:-----:|
| data | Time series data from max a year back | none | yes |
| color | Theme hex color | #45ff00 | no |
| overview | Initial overview type (choices are: year, month, day) | year | no |
| handler | Handler function is fired on click of a time entry in daily overview | none | no |
| Property | Usage | Default | Required |
| :------- | :------------------------------------------------------------------- | :-----: | :------: |
| data | Time series data from max a year back | none | yes |
| color | Theme hex color | #45ff00 | no |
| overview | Initial overview type (choices are: year, month, day) | year | no |
| handler | Handler function is fired on click of a time entry in daily overview | none | no |

@@ -120,18 +124,6 @@ ### Example data

See [index.html](https://github.com/g1eb/reactjs-calendar-heatmap/blob/master/index.html) for an example implementation with random data or click <a href="https://rawgit.com/g1eb/reactjs-calendar-heatmap/master/" target="_blank">here</a> for a live demo.
## Vanilla.js version
If you are looking for a plain vanilla javascript version of the heatmap, check out [calendar-heatmap-graph](https://github.com/g1eb/calendar-heatmap)
## AngularJS
If you want to use this heatmap as an AngularJS directive (version 1.x), see [angular-calendar-heatmap](https://github.com/g1eb/angular-calendar-heatmap)
Or as an Angular component (version 2.x), see [angular2-calendar-heatmap](https://github.com/g1eb/angular2-calendar-heatmap)
## Dependencies
* [react.js](https://reactjs.org/)
* [moment.js](https://momentjs.com/)
* [d3.js](https://d3js.org/)
- [react.js](https://reactjs.org/)
- [moment.js](https://momentjs.com/)
- [d3.js](https://d3js.org/)