{"_id":"@freecodecamp/react-calendar-heatmap","_rev":"10-c287a152984ac731db9dc52ff95d96e1","name":"@freecodecamp/react-calendar-heatmap","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@freecodecamp/react-calendar-heatmap","version":"1.0.0","description":"A calendar heatmap component built on SVG, inspired by Github's commit calendar graph.","author":{"name":"Kevin Qi"},"main":"dist/react-calendar-heatmap.cjs.js","module":"dist/react-calendar-heatmap.esm.js","browser":"dist/react-calendar-heatmap.umd.js","style":"dist/styles.css","repository":{"type":"git","url":"git+https://github.com/freeCodeCamp/react-calendar-heatmap.git"},"license":"MIT","keywords":["calendar","react","react-component","svg"],"scripts":{"build":"npm-run-all clean build:css build:js","build:css":"postcss src/styles.css --use autoprefixer -d dist/ --no-map","build:js":"cross-env NODE_ENV=production rollup -c","clean":"rimraf dist","format":"prettier --write 'src/**/*' 'demo/src/**/*'","lint":"eslint src","prepare":"npm-run-all clean build","test":"jest --config jest.config.js --coverage","test:watch":"jest --config jest.config.js --watch","start":"npm-run-all --parallel start:js start:css","start:css":"postcss src/styles.css --use autoprefixer -d dist/ --no-map --watch","start:js":"cross-env NODE_ENV=development rollup -c -w"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0 || ^16.0.0"},"dependencies":{"memoize-one":"^5.0.0","prop-types":"^15.6.2"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.2","@babel/plugin-external-helpers":"^7.0.0","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","autoprefixer":"^9.1.3","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.2","babel-jest":"^24.0.0","cross-env":"^5.2.0","enzyme":"^3.10.0","enzyme-adapter-react-16":"^1.3.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.1","eslint-config-prettier":"^6.0.0","eslint-plugin-import":"^2.18.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","jest":"^24.0.0","npm-run-all":"^4.1.3","postcss-cli":"^6.0.0","prettier":"^1.14.2","react":"^16.4.2","react-dom":"^16.4.2","react-test-renderer":"^16.4.2","rimraf":"^2.0.0","rollup":"^1.6.0","rollup-plugin-babel":"4","rollup-plugin-commonjs":"^10.0.0","rollup-plugin-node-resolve":"^5.0.1","rollup-plugin-replace":"^2.0.0","rollup-plugin-uglify":"^6.0.0"},"gitHead":"dc0dcae5059996c6fa7d4d2cba3b5911945db2ed","bugs":{"url":"https://github.com/freeCodeCamp/react-calendar-heatmap/issues"},"homepage":"https://github.com/freeCodeCamp/react-calendar-heatmap#readme","_id":"@freecodecamp/react-calendar-heatmap@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"mot01","email":"mylongemailaddress01@gmail.com"},"dist":{"integrity":"sha512-+bqI/VEVHiuvD+Ca17e9os4eQ8MG5xv/tXjyWYjK5zfo81FiCPF10P3LbAkHnttRatxxeudTDCmJjCR2kSM0xQ==","shasum":"4314fe05eb2b3989c36d090fab615f560ba28163","tarball":"https://registry.npmjs.org/@freecodecamp/react-calendar-heatmap/-/react-calendar-heatmap-1.0.0.tgz","fileCount":10,"unpackedSize":154793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ7VsCRA9TVsSAnZWagAAsoEP/0CYoE8qo7+lQu93B5Qk\nzxwsCIc16jaSbgHKnbIDbZ4VW1vQpto0rB4CQO8/gTS7hrBKmsRBtmfoW2xy\n5OqqVKZ4001WNk3ZfGynYvbhGvAYWsG7wXDDmL0ecGm8EO0ZNlKor/BMd11J\nV7AqSv8nGTkUuU3ynyBCGu8FWBpdEiaGfod+R363Hw9VudCrzjgoaJ65xwQ6\nFdRhRyI7Ni4b/uhnmF0EDH0yguJF66ZVSjsGUKIXjMyzqcuaMiRNJi0Z1DcA\nwJ0fp5mkEqiQsNdANHwZyy6KQkGwbM3wlzQbrZj1U2FYWXzPwN89ByZQ5Ivi\nnSJeO39r5ochYMfTxChgkrWFYTR0Gw8mSb328rATfvVfNVMsMUosiJpcz/ul\nL8ZKA2k2R0tAcm38g63FDSYD92nyYWbgNndGd7iyxOn3CZhiAumg049QJrdu\n5WW+QtVc3vyeSJF3WOoQYDCgV6RTYIuQqYgknR92c9q53N470bqLP2vbSRro\naOK2Zla7QhcCy5sZYQ0W3SvplKkxWWVTEX2tEBgjLaThexUq0sNzp39sm0bO\nEWbycz1lIfEKqPXgxHZivKJmA7jri+LdpM0KKr0n3tFhYsxr/ahAQs8NiCPb\nw9IIMCGrzhW7mbEKgOx6V9CTJFew3J01QspHfFqsNQqrsD/n3uREzECn0W33\nu/zB\r\n=9DMJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICsGMyW/LfEexDTzUMAjvEHRzSHo2B5LTZ0VHahIQ7vxAiEAnj65a58gjPpvoIpk780GaSyiMQIXmogv7uK4zihrYyA="}]},"maintainers":[{"name":"mot01","email":"mylongemailaddress01@gmail.com"},{"name":"ojeytonwilliams","email":"ojeytonwilliams@gmail.com"},{"name":"freecodecamp-team","email":"team@freecodecamp.com"},{"name":"raisedadead","email":"ama+npm@raisedadead.com"},{"name":"bouncey","email":"staylor1012@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-calendar-heatmap_1.0.0_1583854956163_0.9046036492430314"},"_hasShrinkwrap":false},"1.1.0":{"name":"@freecodecamp/react-calendar-heatmap","version":"1.1.0","description":"A calendar heatmap component built on SVG, inspired by Github's commit calendar graph.","author":{"name":"Kevin Qi"},"main":"dist/react-calendar-heatmap.cjs.js","module":"dist/react-calendar-heatmap.esm.js","browser":"dist/react-calendar-heatmap.umd.js","style":"dist/styles.css","repository":{"type":"git","url":"git+https://github.com/freeCodeCamp/react-calendar-heatmap.git"},"license":"MIT","keywords":["calendar","react","react-component","svg"],"scripts":{"build":"npm-run-all clean build:css build:js","build:css":"postcss src/styles.css --use autoprefixer -d dist/ --no-map","build:js":"cross-env NODE_ENV=production rollup -c","clean":"rimraf dist","format":"prettier --write 'src/**/*' 'demo/src/**/*'","lint":"eslint src","prepare":"npm-run-all clean build","test":"jest --config jest.config.js --coverage","test:watch":"jest --config jest.config.js --watch","start":"npm-run-all --parallel start:js start:css","start:css":"postcss src/styles.css --use autoprefixer -d dist/ --no-map --watch","start:js":"cross-env NODE_ENV=development rollup -c -w"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"},"dependencies":{"memoize-one":"^5.0.0","prop-types":"^15.6.2"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.2","@babel/plugin-external-helpers":"^7.0.0","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","autoprefixer":"^9.1.3","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.2","babel-jest":"^24.0.0","cross-env":"^5.2.0","enzyme":"^3.10.0","enzyme-adapter-react-16":"^1.3.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.1","eslint-config-prettier":"^6.0.0","eslint-plugin-import":"^2.18.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","jest":"^24.0.0","npm-run-all":"^4.1.3","postcss-cli":"^6.0.0","prettier":"^1.14.2","react":"^16.4.2","react-dom":"^16.4.2","react-test-renderer":"^16.4.2","rimraf":"^2.0.0","rollup":"^1.6.0","rollup-plugin-babel":"4","rollup-plugin-commonjs":"^10.0.0","rollup-plugin-node-resolve":"^5.0.1","rollup-plugin-replace":"^2.0.0","rollup-plugin-uglify":"^6.0.0"},"gitHead":"dd130192801d7503bc3745afe4b142d7ac5e9c32","bugs":{"url":"https://github.com/freeCodeCamp/react-calendar-heatmap/issues"},"homepage":"https://github.com/freeCodeCamp/react-calendar-heatmap#readme","_id":"@freecodecamp/react-calendar-heatmap@1.1.0","_nodeVersion":"16.13.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-8HURv5KxiD0D/dZPA7jr2WRGaZqRjuTBmTHu/n+I1RlZlCtung6Wh7GpCy39EQXRIgqBvzX0VBj2PW3waa6qbg==","shasum":"e764e7a5e8f6f8cbb1b87c8824c05ea03bb3f723","tarball":"https://registry.npmjs.org/@freecodecamp/react-calendar-heatmap/-/react-calendar-heatmap-1.1.0.tgz","fileCount":9,"unpackedSize":163585,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8zsTJxe6qlRcYR8dWWlZgyi5aGp3RpGn90JzzzEajJAIgDCk+MDTNwLcWFGiKqfAYC6Lj/Uq6y9KgDey2IRe543M="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4nkZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmAg/+LxhvrFVJjZm6vqk75PPg2l1FZwi9+Kk/mbrPgXqNqXzvViRI\r\n2ZShLTDISIeYbw2MtrcVKmPAuw9aCpha+f8TzQfmKYOhhXSUSBTKC5KK0n6L\r\nzQ7ui9j2UqoIKSEj8GBZDCsbIlb6OhQWRiSqILwb0WsaTTkvKKpjeEaPgJHV\r\nAO5pZjCL6SvpmL+770IcLLNpwd9JPDoe8WiiAl/qUF3Ex9iVDK/apfAoiuFg\r\ngsREHH42e4FsV9tYVkt+TOGQ7hPfFz7s98IARt+jVdyq4nzoJFvCow5LG1K4\r\noEhqqP8O//DeCj0+jKCuuYzPuUX3rGvWsvuBAOr1W5XrVDOk1c+r+qxykc92\r\nxLV7aHk0Ks2a09SzlDFBu5ZM1Wgs1QDnZGb4ggdDS6jGQF/w2A05To+6OP70\r\nuEND1RpKsZC5J+klEutta0097gw0JoaR9st7/9ydpIJ1ThSGQITHizTP/WAL\r\nxGSLw6dowFKLpm6HofTEqDpz6gvCazHJyAd4zQMRpF0Ycxwum45I0adqu7EX\r\n6p0NJ+r6C1GXaONU0tWg/R2kiRFBknTCYghGnlC2ILc8VMzAw8F55iqmyhLG\r\n2RNSOBdzVXGCXUcnJw4/YXSEbAayrMX9KmZ8HEhqpHEMq0ph+y8ImGEhir+Q\r\nityjEFuJAxAr/QfMMqL5ZutW0jgSLClCOhc=\r\n=9iuE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mot01","email":"mylongemailaddress01@gmail.com"},"directories":{},"maintainers":[{"name":"shaunshamilton","email":"shauhami020@gmail.com"},{"name":"nhcarrigan","email":"nhcarrigan@gmail.com"},{"name":"sembauke","email":"sem@freecodecamp.org"},{"name":"freecodecamp-team","email":"dev@freecodecamp.org"},{"name":"raisedadead","email":"npm@mrugesh.dev"},{"name":"ojeytonwilliams","email":"ojeytonwilliams@gmail.com"},{"name":"mot01","email":"mylongemailaddress01@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-calendar-heatmap_1.1.0_1675786521700_0.7581771380242996"},"_hasShrinkwrap":false}},"time":{"created":"2020-03-10T15:42:35.886Z","1.0.0":"2020-03-10T15:42:36.328Z","modified":"2024-04-05T07:41:37.036Z","1.1.0":"2023-02-07T16:15:21.946Z"},"maintainers":[{"email":"kindle-shrubbery.fesev@passmail.net","name":"huyenltnguyen"},{"email":"dicillodario@gmail.com","name":"dario_dc"},{"email":"shauhami020@gmail.com","name":"shaunshamilton"},{"email":"nhcarrigan@gmail.com","name":"nhcarrigan"},{"email":"sem@freecodecamp.org","name":"sembauke"},{"email":"dev@freecodecamp.org","name":"freecodecamp-team"},{"email":"npm@mrugesh.dev","name":"raisedadead"},{"email":"ojeytonwilliams@gmail.com","name":"ojeytonwilliams"}],"description":"A calendar heatmap component built on SVG, inspired by Github's commit calendar graph.","homepage":"https://github.com/freeCodeCamp/react-calendar-heatmap#readme","keywords":["calendar","react","react-component","svg"],"repository":{"type":"git","url":"git+https://github.com/freeCodeCamp/react-calendar-heatmap.git"},"author":{"name":"Kevin Qi"},"bugs":{"url":"https://github.com/freeCodeCamp/react-calendar-heatmap/issues"},"license":"MIT","readme":"# React Calendar Heatmap\n\nA calendar heatmap component built on SVG, inspired by github's commit calendar graph. The component expands to size of container and is super configurable. [**Try it out on CodeSandbox**](https://codesandbox.io/s/73mk9wlyx).\n\n[](https://badge.fury.io/js/react-calendar-heatmap)\n[](https://travis-ci.org/kevinsqi/react-calendar-heatmap)\n[](https://bundlephobia.com/result?p=react-calendar-heatmap)\n\n[](https://codesandbox.io/s/73mk9wlyx)\n\n## Setup\n\nInstall the npm module with yarn or npm:\n\n```bash\nyarn add react-calendar-heatmap\n```\n\n## Usage\n\nImport the component:\n\n```javascript\nimport CalendarHeatmap from 'react-calendar-heatmap';\n```\n\nImport styles. You can directly import from the module, which requires a CSS loader:\n\n```javascript\nimport 'react-calendar-heatmap/dist/styles.css';\n```\n\nA CSS loader is included by default in create-react-app. If you don't have a CSS loader, you can simply [copy the stylesheet](src/styles.css) into a file in your project and import it instead.\n\nTo show a basic heatmap from January 1st to April 1st:\n\n```javascript\n\n```\n\n## Props\n\n| Name | Type | Description |\n| ---- | ---- | ----------- |\n| `values` | **Required**, Array of Object | Required array of objects which each have a date property, which can be a Date object, parseable string, or millisecond timestamp. Example: `[{ date: '2016-01-01', count: 6 }]` |\n| `startDate` | String, Number, or Date | Start of date range. |\n| `endDate` | String, Number, or Date | End of date range - a Date object, parseable string, or millisecond timestamp. |\n| `showMonthLabels` | Boolean | Toggle for removing month labels. |\n| `showWeekdayLabels` | Boolean | Toggle for removing weekday labels. |\n| `showOutOfRangeDays` | Boolean | Toggle display of extra days in week that are past endDate and before beginning of range. |\n| `horizontal` | Boolean | Whether to orient horizontally or vertically. Can be used in combination with numDays/endDate to show just the current month. |\n| `gutterSize` | Number | Size of gutters relative to squares. |\n| `onClick` | Function | Callback to invoke when a square is clicked, e.g. `(value) => alert(value)` |\n| `onMouseOver` | Function | Callback to invoke when mouse pointer is over a square, e.g. `(event, value) => console.log(event, value)` |\n| `onMouseLeave` | Function | Callback to invoke when mouse pointer leaves a square, e.g. `(event, value) => console.log(event, value)` |\n| `titleForValue` | Function | Function to determine each square's title attribute, for generating 3rd party hover tooltips (may also need to configure tooltipDataAttrs). Example: `(value) => `Date is ${value.date}` |\n| `tooltipDataAttrs` | Object or Function | Set data attributes for all squares, for generating 3rd party hover tooltips. Either an object like `{ 'data-tooltip': 'tooltip' }` or a function like `(value) => { return { 'data-tooltip': 'Tooltip: ' + value } }` |\n| `classForValue` | Function | Callback for determining CSS class to apply to each value, e.g. `(value) => (value.count > 0 ? 'blue' : 'white')`. |\n| `monthLabels` | Array of String | An array with 12 strings representing the text from January to December, e.g. `['01', '02', ..., '12']` |\n| `weekdayLabels` | Array of String | An array with 7 strings representing the text from Sunday to Saturday |\n| `transformDayElement` | Function | A function to further transform generated svg element for a single day. Can be used to attach event handlers, add tooltips and more. Example: `(element, value, index) => React.cloneElement(element, { title: value.date })`. |\n\n\n## Configuring colors\n\nTo use the color scale shown in the [live demo](https://www.kevinqi.com/react-calendar-heatmap/) based on the github contribution graph, you can set the `classForValue` prop, a function that determines which CSS class to apply to each value:\n\n```javascript\n {\n if (!value) {\n return 'color-empty';\n }\n return `color-scale-${value.count}`;\n }}\n/>\n```\n\nThen you use CSS to set colors for each class:\n\n```css\n.react-calendar-heatmap .color-scale-1 { fill: #d6e685; }\n.react-calendar-heatmap .color-scale-2 { fill: #8cc665; }\n.react-calendar-heatmap .color-scale-3 { fill: #44a340; }\n.react-calendar-heatmap .color-scale-4 { fill: #1e6823; }\n```\n\n## Contributing\n\nTake a look at [CONTRIBUTING.md](/CONTRIBUTING.md) to see how to develop on react-calendar-heatmap.\n\n## License\n\nreact-calendar-heatmap is Copyright © 2016 PatientsLikeMe, Inc. and is released under an MIT License. See COPYING for details.\n","readmeFilename":"README.md"}