{"id":24534824,"url":"https://github.com/arunghosh/react-heatmap-grid","last_synced_at":"2025-04-05T15:09:56.376Z","repository":{"id":27497021,"uuid":"113587135","full_name":"arunghosh/react-heatmap-grid","owner":"arunghosh","description":"A react component for heatmap visualisation in grid layout","archived":false,"fork":false,"pushed_at":"2024-09-09T12:45:47.000Z","size":1741,"stargazers_count":79,"open_issues_count":24,"forks_count":42,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-27T17:14:20.174Z","etag":null,"topics":["component","heatmap","react","reactjs"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/r4rvwkl3yn","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/arunghosh.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-12-08T15:14:48.000Z","updated_at":"2025-02-24T09:29:24.000Z","dependencies_parsed_at":"2025-02-05T13:01:20.979Z","dependency_job_id":"c67ea132-9ed4-4b39-b43c-2696c1f8aa68","html_url":"https://github.com/arunghosh/react-heatmap-grid","commit_stats":{"total_commits":114,"total_committers":17,"mean_commits":6.705882352941177,"dds":0.6052631578947368,"last_synced_commit":"9368e0f666cf4e16ab910d807079725ef258b133"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arunghosh%2Freact-heatmap-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arunghosh%2Freact-heatmap-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arunghosh%2Freact-heatmap-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arunghosh%2Freact-heatmap-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arunghosh","download_url":"https://codeload.github.com/arunghosh/react-heatmap-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247353749,"owners_count":20925329,"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":["component","heatmap","react","reactjs"],"created_at":"2025-01-22T11:19:05.030Z","updated_at":"2025-04-05T15:09:56.358Z","avatar_url":"https://github.com/arunghosh.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/arunghosh"],"categories":[],"sub_categories":[],"readme":"# react-heatmap-grid\n\nCreated a [new version](https://github.com/arunghosh/react-grid-heatmap) of this having smaller size and a better interface. Check it out.\n\nA React component for heatmap in grid layout using `div`.\n\n**Live example [here](https://codesandbox.io/s/r4rvwkl3yn)**.\n\n![image](https://github.com/arunghosh/react-heatmap-grid/blob/master/docs/heatmap.png?raw=true)\n\n## Installation\n\n```\nyarn add react-heatmap-grid\n```\n\nor\n\n```\nnpm install react-heatmap-grid --save\n```\n\n## Usage\n\n**Mandatory fields**\n\n| Name      | Type                                                                       | Sample                  |\n| --------- | -------------------------------------------------------------------------- | ----------------------- |\n| `xLabels` | Array of string                                                            | `['1am', '2am', '3am']` |\n| `yLabels` | Array of string                                                            | `['Sun', 'Mon']`        |\n| `data`    | 2D Array of numbers having `yLabels.length` rows and `xLabels.length` rows | `[[2,3,5][5,6,9]]`      |\n\n```javascript\nconst xLabels = new Array(24).fill(0).map((_, i) =\u003e `${i}`);\nconst yLabels = [\"Sun\", \"Mon\", \"Tue\"];\nconst data = new Array(yLabels.length)\n  .fill(0)\n  .map(() =\u003e\n    new Array(xLabels.length).fill(0).map(() =\u003e Math.floor(Math.random() * 100))\n  );\n\nReactDOM.render(\n  \u003cHeatMap xLabels={xLabels} yLabels={yLabels} data={data} /\u003e,\n  document.getElementById(\"app\")\n);\n```\n\n**Configuration**\n\n| Name              | Type        | Description                                                                                                                                                                   | Default Value      |\n| ----------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |\n| background        | string      | The base color for the heatmap                                                                                                                                                | `\"#329fff\"`        |\n| height            | number      | Height of each cell of the heatmap in px                                                                                                                                      | `30`               |\n| onClick           | function    | Adds an handler to cell click                                                                                                                                                 | `undefined`        |\n| squares           | boolean     | If set to `true` will render cells as square                                                                                                                                  | `false`            |\n| xLabelWidth       | number      | Width of the x label area in pixel                                                                                                                                            | `60`               |\n| yLabelWidth       | number      | Width of the y label area in pixel                                                                                                                                            | `40`               |\n| yLabelTextAlign   | string      | Text alignment of the yLabels                                                                                                                                                 | `\"right\"`          |\n| xLabelsLocation   | string      | Location of y labels. It can be top or bottom                                                                                                                                 | `\"top\"`            |\n| xLabelsVisibility | `[boolean]` | Array of bool conveying which x labels to display. For ex: `[true, false, true, false]` means the 1st and the 3rd labels will be displayed and the 2nd and 4th will be hidden |                    |\n| unit              | string      | Unit to display next to the value on hover                                                                                                                                    |                    |\n| cellRender        | function    | Render custom content in cell                                                                                                                                                 | `() =\u003e null`       |\n| cellStyle         | function    | To set custom cell style. It is useful for using own colour scheme                                                                                                            |                    |\n| title             | function    | To render custom title in each cell                                                                                                                                           | `${value} ${unit}` |\n\nExample\n\n```javascript\nconst xLabels = new Array(24).fill(0).map((_, i) =\u003e `${i}`);\n\n// Display only even labels\nconst xLabelsVisibility = new Array(24)\n  .fill(0)\n  .map((_, i) =\u003e (i % 2 === 0 ? true : false));\n\nconst yLabels = [\"Sun\", \"Mon\", \"Tue\"];\nconst data = new Array(yLabels.length)\n  .fill(0)\n  .map(() =\u003e\n    new Array(xLabels.length).fill(0).map(() =\u003e Math.floor(Math.random() * 100))\n  );\n\nReactDOM.render(\n  \u003cHeatMap\n    xLabels={xLabels}\n    yLabels={yLabels}\n    xLabelsLocation={\"bottom\"}\n    xLabelsVisibility={xLabelsVisibility}\n    xLabelWidth={50}\n    data={data}\n    squares\n    onClick={(x, y) =\u003e alert(`Clicked ${x}, ${y}`)}\n    cellStyle={(background, value, min, max, data, x, y) =\u003e ({\n      background: `rgba(66, 86, 244, ${1 - (max - value) / (max - min)})`,\n      fontSize: \"11px\",\n    })}\n    cellRender={(value) =\u003e value \u0026\u0026 `${value}%`}\n    title={(value, unit) =\u003e `${value}`}\n  /\u003e,\n  document.getElementById(\"app\")\n);\n```\n\n### For developers\n\n**New build**\n\n```\nnpm run build\n```\n\n**Run dev server**\n\n```\nnpm run dev\n```\n\n**Run test**\n\n```\nnpm run test\n```\n\n\u003ca href=\"https://www.buymeacoffee.com/arunghosh\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\" alt=\"Buy Me A Coffee\" style=\"height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;\" \u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farunghosh%2Freact-heatmap-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farunghosh%2Freact-heatmap-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farunghosh%2Freact-heatmap-grid/lists"}