{"id":22165197,"url":"https://github.com/g1eb/reactjs-calendar-heatmap","last_synced_at":"2025-04-04T17:08:32.792Z","repository":{"id":26160992,"uuid":"107517373","full_name":"g1eb/reactjs-calendar-heatmap","owner":"g1eb","description":"React component for d3.js calendar heatmap graph","archived":false,"fork":false,"pushed_at":"2023-03-14T19:32:52.000Z","size":1250,"stargazers_count":148,"open_issues_count":10,"forks_count":35,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-05-10T11:22:05.061Z","etag":null,"topics":["calendar","calendar-heatmap","d3","d3-heatmap","heatmap","react","reactjs","visualization"],"latest_commit_sha":null,"homepage":"https://rawgit.com/g1eb/reactjs-calendar-heatmap/master/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/g1eb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-19T08:12:48.000Z","updated_at":"2024-04-02T17:40:34.000Z","dependencies_parsed_at":"2024-12-02T18:02:55.792Z","dependency_job_id":null,"html_url":"https://github.com/g1eb/reactjs-calendar-heatmap","commit_stats":{"total_commits":160,"total_committers":7,"mean_commits":"22.857142857142858","dds":"0.11250000000000004","last_synced_commit":"24e92f8b1a72b1422b5172e6fe86ac711311519b"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/g1eb%2Freactjs-calendar-heatmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/g1eb%2Freactjs-calendar-heatmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/g1eb%2Freactjs-calendar-heatmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/g1eb%2Freactjs-calendar-heatmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/g1eb","download_url":"https://codeload.github.com/g1eb/reactjs-calendar-heatmap/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247217184,"owners_count":20903009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["calendar","calendar-heatmap","d3","d3-heatmap","heatmap","react","reactjs","visualization"],"created_at":"2024-12-02T05:13:47.820Z","updated_at":"2025-04-04T17:08:32.775Z","avatar_url":"https://github.com/g1eb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React component for D3.js Calendar Heatmap\n\nThis [d3.js](https://d3js.org/) heatmap representing time series data is used to visualize tracked time over the past year, showing details for each of the days on demand.\n\nIncludes a global overview of multiple years and visualizations of year, month, week and day overview with zoom for details-on-demand.  \n\nInspired by [Github's contribution graph](https://help.github.com/articles/viewing-contributions-on-your-profile/#contributions-calendar)\n\nBased on [Calendar View](https://bl.ocks.org/mbostock/4063318) by [Mike Bostock](https://github.com/mbostock)  \nAaand [D3.js Calendar Heatmap](https://github.com/DKirwan/calendar-heatmap) by [Darragh Kirwan](https://github.com/DKirwan) \n\n## Demo\nClick \u003ca href=\"https://rawgit.com/g1eb/reactjs-calendar-heatmap/master/\" target=\"_blank\"\u003ehere\u003c/a\u003e for a live demo.\n\n### Global overview\n[![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/)\n\n### Year overview\n[![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/)\n\n### Month overview\n[![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/)\n\n### Week overview\n[![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/)\n\n### Day overview\n[![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/)\n\n## Install\n\n1) Install 'reactjs-calendar-heatmap' with npm\n\n```\nnpm install reactjs-calendar-heatmap\n```\n\n2) Import `CalendarHeatmap` in your component\n\n```javascript\nimport CalendarHeatmap from 'reactjs-calendar-heatmap'\n```\n\n3) Render `CalendarHeatmap` component\n\n```html\n\u003cCalendarHeatmap\n  data={data}\n  color={color}\n  overview={overview}\n  handler={print}\u003e\n\u003c/CalendarHeatmap\u003e\n```\n\n### Properties\n\n|Property        | Usage           | Default  | Required |\n|:------------- |:-------------|:-----:|:-----:|\n| data | Time series data from max a year back | none | yes |\n| color | Theme hex color | #45ff00 | no |\n| overview | Initial overview type (choices are: year, month, day) | year | no |\n| handler | Handler function is fired on click of a time entry in daily overview | none | no |\n\n### Example data\n\nTime series data where each day has a total time tracked (in seconds).  \nDetails, if provided, are shown in a tooltip on mouseover in different overviews.\n\n```\nvar data = [{\n  \"date\": \"2016-01-01\",\n  \"total\": 17164,\n  \"details\": [{\n    \"name\": \"Project 1\",\n    \"date\": \"2016-01-01 12:30:45\",\n    \"value\": 9192\n  }, {\n    \"name\": \"Project 2\",\n    \"date\": \"2016-01-01 13:37:00\",\n    \"value\": 6753\n  },\n  .....\n  {\n    \"name\": \"Project N\",\n    \"date\": \"2016-01-01 17:52:41\",\n    \"value\": 1219\n  }]\n}]\n```\n\n### Optimization\n\nIn some cases details array could be large and in order to fit the data into the tooltip a short summary is generated with distinct projects and their total tracked time for that date.\nIn terms of optimization, summary data can be computed server-side and passed in using the ``summary'' attribute.\nAnd in addition to the data structure described above this would result in a summary dictionary with distinct project names and total values of tracked time in seconds, e.g.:\n\n```\nvar data = [{\n  \"date\": \"2016-01-01\",\n  \"total\": 17164,\n  \"details\": [.....],\n  \"summary\": [{\n    \"name\": \"Project 1\",\n    \"value\": 9192\n  }, {\n    \"name\": \"Project 2\",\n    \"value\": 6753\n  },\n  .....\n  {\n    \"name\": \"Project N\",\n    \"value\": 1219\n  }]\n}]\n```\n\nSee [index.html](https://github.com/g1eb/reactjs-calendar-heatmap/blob/master/index.html) for an example implementation with random data or click \u003ca href=\"https://rawgit.com/g1eb/reactjs-calendar-heatmap/master/\" target=\"_blank\"\u003ehere\u003c/a\u003e for a live demo.\n\n## Vanilla.js version\n\nIf you are looking for a plain vanilla javascript version of the heatmap, check out [calendar-heatmap-graph](https://github.com/g1eb/calendar-heatmap)\n\n## AngularJS\n\nIf you want to use this heatmap as an AngularJS directive (version 1.x), see [angular-calendar-heatmap](https://github.com/g1eb/angular-calendar-heatmap)\n\nOr as an Angular component (version 2.x), see [angular2-calendar-heatmap](https://github.com/g1eb/angular2-calendar-heatmap)\n\n## Dependencies\n\n* [react.js](https://reactjs.org/)\n* [moment.js](https://momentjs.com/)\n* [d3.js](https://d3js.org/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fg1eb%2Freactjs-calendar-heatmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fg1eb%2Freactjs-calendar-heatmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fg1eb%2Freactjs-calendar-heatmap/lists"}