{"id":22165190,"url":"https://github.com/g1eb/angular-calendar-heatmap","last_synced_at":"2025-06-30T19:06:03.583Z","repository":{"id":57178107,"uuid":"54841856","full_name":"g1eb/angular-calendar-heatmap","owner":"g1eb","description":"📊  Angular directive for d3.js calendar heatmap graph","archived":false,"fork":false,"pushed_at":"2023-09-13T14:52:03.000Z","size":1870,"stargazers_count":66,"open_issues_count":0,"forks_count":12,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-11-16T03:47:34.082Z","etag":null,"topics":["angular","angular-directives","calendar","calendar-heatmap","d3","d3-heatmap","heatmap","visualization"],"latest_commit_sha":null,"homepage":"https://rawgit.com/g1eb/angular-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":"2016-03-27T18:16:37.000Z","updated_at":"2024-04-02T17:40:33.000Z","dependencies_parsed_at":"2024-06-21T17:51:44.144Z","dependency_job_id":"54a1fb61-3889-4336-85a1-b8e6d4b9bd5d","html_url":"https://github.com/g1eb/angular-calendar-heatmap","commit_stats":{"total_commits":314,"total_committers":3,"mean_commits":"104.66666666666667","dds":"0.16242038216560506","last_synced_commit":"e764f3c4597e25e308cef63cb0eb7f793513dffa"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/g1eb%2Fangular-calendar-heatmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/g1eb%2Fangular-calendar-heatmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/g1eb%2Fangular-calendar-heatmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/g1eb%2Fangular-calendar-heatmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/g1eb","download_url":"https://codeload.github.com/g1eb/angular-calendar-heatmap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227673985,"owners_count":17802303,"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":["angular","angular-directives","calendar","calendar-heatmap","d3","d3-heatmap","heatmap","visualization"],"created_at":"2024-12-02T05:13:45.117Z","updated_at":"2024-12-02T05:13:45.923Z","avatar_url":"https://github.com/g1eb.png","language":"JavaScript","readme":"# Angular directive 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. Converted into an angular directive for your convenience :)  \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/angular-calendar-heatmap/master/\" target=\"_blank\"\u003ehere\u003c/a\u003e for a live demo.\n\n### Global overview\n[![Angular directive for d3.js calendar heatmap chart - global overview](https://raw.githubusercontent.com/g1eb/angular-calendar-heatmap/master/images/screenshot_global_overview.png)](https://rawgit.com/g1eb/angular-calendar-heatmap/master/)\n\n### Year overview\n[![Angular directive for d3.js calendar heatmap chart - year overview](https://raw.githubusercontent.com/g1eb/angular-calendar-heatmap/master/images/screenshot_year_overview.png)](https://rawgit.com/g1eb/angular-calendar-heatmap/master/)\n\n### Month overview\n[![Angular directive for d3.js calendar heatmap chart - month overview](https://raw.githubusercontent.com/g1eb/angular-calendar-heatmap/master/images/screenshot_month_overview.png)](https://rawgit.com/g1eb/angular-calendar-heatmap/master/)\n\n### Week overview\n[![Angular directive for d3.js calendar heatmap chart - week overview](https://raw.githubusercontent.com/g1eb/angular-calendar-heatmap/master/images/screenshot_week_overview.png)](https://rawgit.com/g1eb/angular-calendar-heatmap/master/)\n\n### Day overview\n[![Angular directive for d3.js calendar heatmap chart - day overview](https://raw.githubusercontent.com/g1eb/angular-calendar-heatmap/master/images/screenshot_day_overview.png)](https://rawgit.com/g1eb/angular-calendar-heatmap/master/)\n\n## Installation\n\n1) Install 'angular-calendar-heatmap' with bower\n\n```\nbower install angular-calendar-heatmap\n```\n\nOr:\n\n```\nnpm install angular-calendar-heatmap\n```\n\n2) Add 'g1b.calendar-heatmap' module to your app config\n\n\n```javascript\nangular.module('myApp', [\n  'g1b.calendar-heatmap',\n  .....\n])\n```\n\n3) Use 'calendar-heatmap' directive in a view\n\n```html\n\u003ccalendar-heatmap data=\"example_data\" color=\"'#ff0000'\" overview=\"'year'\" handler=\"print\"\u003e\u003c/calendar-heatmap\u003e\n```\n\n### Attributes\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/angular-calendar-heatmap/blob/master/index.html) for an example implementation with random data or click \u003ca href=\"https://rawgit.com/g1eb/angular-calendar-heatmap/master/\" target=\"_blank\"\u003ehere\u003c/a\u003e for a live demo.\n\n## Angular2 component\n\nIf you want to use this heatmap as an angular component (version 2.x), see [angular2-calendar-heatmap](https://github.com/g1eb/angular2-calendar-heatmap)\n\n## React component\n\nIf you want to use this heatmap as a React component, see [reactjs-calendar-heatmap](https://github.com/g1eb/reactjs-calendar-heatmap)\n\n## Non-Angular 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## Dependencies\n\n* [AngularJS](https://angularjs.org/)\n* [moment.js](https://momentjs.com/)\n* [d3.js](https://d3js.org/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fg1eb%2Fangular-calendar-heatmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fg1eb%2Fangular-calendar-heatmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fg1eb%2Fangular-calendar-heatmap/lists"}