{"_id":"@alameer/angular-activity-heatmap","name":"@alameer/angular-activity-heatmap","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@alameer/angular-activity-heatmap","version":"0.0.1","description":"An Angular activity heatmap","keywords":["angular","heatmap","component","angular-material","tooltip"],"author":{"name":"Alameer Ashraf","email":"alamiir.ashraf@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/AlameerAshraf/angular-activity-heatmap.git"},"peerDependencies":{"@angular/common":"^18.2.0","@angular/core":"^18.2.0","@angular/cdk":"^18.2.4","@angular/material":"^18.2.4","@angular/animations":"^18.2.4"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"_id":"@alameer/angular-activity-heatmap@0.0.1","gitHead":"ec459b8c50c78a9596e2b40e3cdf3fdf2b353664","bugs":{"url":"https://github.com/AlameerAshraf/angular-activity-heatmap/issues"},"homepage":"https://github.com/AlameerAshraf/angular-activity-heatmap#readme","_nodeVersion":"22.6.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-lzg2Nmevc02CTYEnQBjmtrGuHYgXNnOYaP3chcku11EGGsQ/fCuF0pcrTC64aNlsXAuk2qZ7YAy2fAYgMNyxYQ==","shasum":"e0798aeb73a64c2db70615fe2a8806b64bcf95b9","tarball":"https://registry.npmjs.org/@alameer/angular-activity-heatmap/-/angular-activity-heatmap-0.0.1.tgz","fileCount":21,"unpackedSize":23995,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDE/MP4tGc4BMHAehqad142zmAdFegmLcmexUf8RIV1kQIhAJ2xd04eK9/lI41hvRnVC6FdKc+7dkF5BGiAW6i1JFSI"}]},"_npmUser":{"name":"alameer","email":"alamiir.ashraf@gmail.com"},"directories":{},"maintainers":[{"name":"alameer","email":"alamiir.ashraf@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/angular-activity-heatmap_0.0.1_1726322125835_0.4168824229472341"},"_hasShrinkwrap":false}},"time":{"created":"2024-09-14T13:55:25.704Z","0.0.1":"2024-09-14T13:55:25.971Z","modified":"2024-09-14T13:55:26.302Z"},"maintainers":[{"name":"alameer","email":"alamiir.ashraf@gmail.com"}],"description":"An Angular activity heatmap","homepage":"https://github.com/AlameerAshraf/angular-activity-heatmap#readme","keywords":["angular","heatmap","component","angular-material","tooltip"],"repository":{"type":"git","url":"git+https://github.com/AlameerAshraf/angular-activity-heatmap.git"},"author":{"name":"Alameer Ashraf","email":"alamiir.ashraf@gmail.com"},"bugs":{"url":"https://github.com/AlameerAshraf/angular-activity-heatmap/issues"},"license":"MIT","readme":"# Angular Heatmap Library\n\nAn Angular heatmap component providing a customizable and interactive heatmap visualization for your data.\n\n![Heatmap Example](https://i.ibb.co/t8cs9g5/Screen-Shot-2024-09-14-at-16-45-19-PM.png)\n\n\n## Features\n\n- **Customizable Heatmap Visualization**: Easily integrate heatmaps into your Angular applications.\n- **Flexible Data Types**: Supports generating heatmaps based on a range, specific months, a single month, or an entire year.\n- **Layout Modes**: Choose between vertical and horizontal layouts to best fit your application's design.\n- **Interactive Tooltips**: Provides tooltips for rich user interaction.\n- **Theming and Styling**: Customize the look and feel with themes and CSS classes.\n- **Easy Integration**: Simple API and setup process.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Importing the Module](#importing-the-module)\n  - [Using the Component](#using-the-component)\n  - [Data Format](#data-format)\n- [Options](#options)\n  - [Heatmap Types](#heatmap-types)\n- [Styling and Theming](#styling-and-theming)\n- [API Documentation](#api-documentation)\n- [Inputs](#inputs)\n- [Interfaces](#interfaces)\n\n## Installation\n\nInstall the library via npm:\n\n```bash\nnpm install @alameer/angular-activity-heatmap\n```\n# Usage\n### Importing the Module\n\nIn your component's template, use the `activity-heatmap` selector:\n\n```JavaScript\nimport { ActivityHeatmapModule } from '@alameer/angular-activity-heatmap';\n\n@NgModule({\n  imports: [\n    // other imports\n    ActivityHeatmapModule,\n  ],\n  // ...\n})\nexport class AppModule {}\n```\n\n### Using the Component\n\nIn your component's template, use the ```activity-heatmap``` selector:\n\n```HTML\n<activity-heatmap\n  [mode]=\"mode\"\n  [action]=\"action\"\n  [theme]=\"theme\"\n  [data]=\"heatmapData\"\n  [options]=\"heatmapOptions\">\n</activity-heatmap>\n```\n\n## Data Format\n\n```JavaScript\nimport { Component } from '@angular/core';\nimport { DataItem, HeatmapOptions, HeatmapMode } from '@alameer/angular-activity-heatmap';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: './example.component.html',\n})\nexport class ExampleComponent {\n  heatmapData: DataItem[] = [\n    { _id: '2023-01-01', count: 5 },\n    { _id: '2023-01-02', count: 3 },\n    // ...more data items\n  ];\n\n  heatmapOptions: HeatmapOptions = {\n    type: 'year', // 'range', 'months', 'month', or 'year'\n    // value: ... // Provide value based on the type\n  };\n\n  mode: HeatmapMode = 'Horizontal'; // or 'Vertical'\n  action = 'Commits'; // Description for the tooltip\n  theme = 'fire'; // Theme class prefix fire, deepblue, github\n}\n```\n\n## Options\n\n### Heatmap Types\n\n- **year**: Generates a heatmap for the entire year.\n- **range**: Generates a heatmap for a specified range of months.\n- **months**: Generates a heatmap for specific months.\n- **month**: Generates a heatmap for a single month.\n\n```JavaScript\nheatmapOptions: HeatmapOptions = {\n  type: 'year',\n};\n```\n\n### Styling and Themeing\n\n- **purble**: A purple-themed heatmap with varying shades of purple.\n- **fire**: A fiery-themed heatmap with warm red and orange tones.\n- **github**: A GitHub-inspired heatmap with shades of green.\n- **deepblue**: A cool blue-themed heatmap with deep blue gradients.\n\n### API Documentation\n\nFor complete details on how to use and customize this library, refer to the API documentation.\n\n### Inputs\n\n- **data**: The data source for the heatmap visualization.\n- **mode**: Determines the layout of the heatmap (e.g., Horizontal or Vertical).\n- **action**: Description for the tooltip (e.g., Commits, Events).\n- **theme**: Determines the theme for the heatmap (e.g., fire, ocean).\n\n### Interfaces\n\n- **DataItem**: Interface representing the structure of each data point (e.g., _id, count).\n- **HeatmapOptions**: Interface for the configuration options (e.g., type, value).\n- **HeatmapMode**: Interface for defining the layout mode of the heatmap (e.g., Horizontal or Vertical).\n","readmeFilename":"README.md"}