{"id":24534832,"url":"https://github.com/arunghosh/react-grid-heatmap","last_synced_at":"2025-04-09T07:09:57.290Z","repository":{"id":38208324,"uuid":"275320259","full_name":"arunghosh/react-grid-heatmap","owner":"arunghosh","description":"A react component for heatmap visualisation in grid layout","archived":false,"fork":false,"pushed_at":"2023-08-24T09:34:38.000Z","size":1898,"stargazers_count":79,"open_issues_count":11,"forks_count":18,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T23:33:41.277Z","etag":null,"topics":["component","grid","heatmap","react","reactjs"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/react-grid-heatmap-hhmqw?file=/src/App.js","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"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":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-06-27T07:16:57.000Z","updated_at":"2025-03-21T14:32:07.000Z","dependencies_parsed_at":"2023-12-19T05:55:23.513Z","dependency_job_id":"b0158c22-b828-4405-aa9d-b060262aac73","html_url":"https://github.com/arunghosh/react-grid-heatmap","commit_stats":{"total_commits":32,"total_committers":7,"mean_commits":4.571428571428571,"dds":0.375,"last_synced_commit":"3f4caf8cdc53336ab1beff4cc2ab6bec488f3840"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arunghosh%2Freact-grid-heatmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arunghosh%2Freact-grid-heatmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arunghosh%2Freact-grid-heatmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arunghosh%2Freact-grid-heatmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arunghosh","download_url":"https://codeload.github.com/arunghosh/react-grid-heatmap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247994122,"owners_count":21030050,"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","grid","heatmap","react","reactjs"],"created_at":"2025-01-22T11:19:10.061Z","updated_at":"2025-04-09T07:09:57.264Z","avatar_url":"https://github.com/arunghosh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# react-grid-heatmap\n\nA React component to visualize heatmap in a grid layout without using any 3rd party libraries.\n\n[Demo - Try in Sandbox](https://codesandbox.io/s/react-grid-heatmap-hhmqw?file=/src/App.js)\n\n![Screenshot](https://raw.githubusercontent.com/arunghosh/react-grid-heatmap/master/example/screenshot.png)\n\n[![NPM](https://img.shields.io/npm/v/react-grid-heatmap.svg)](https://www.npmjs.com/package/react-grid-heatmap) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Build Status](https://travis-ci.org/arunghosh/react-grid-heatmap.svg?branch=master)](https://travis-ci.org/arunghosh/react-grid-heatmap)\n\n## Install\n\n```bash\nnpm install --save react-grid-heatmap\n```\n\n## Usage\n\n**Mandatory fields**\n\n| Name | Type         | Sample                        |\n| ---- | ------------ | ----------------------------- |\n| data | `number[][]` | `[[1,2,3], [4,5,6], [7,8,9]]` |\n\n\n\n```tsx\nimport React from 'react'\nimport { HeatMapGrid } from 'react-grid-heatmap'\n\nconst xLabels = new Array(24).fill(0).map((_, i) =\u003e `${i}`)\nconst yLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri']\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() * 50 + 50))\n  )\n\nconst App = () =\u003e {\n  return (\n    \u003cHeatMapGrid\n      data={data}\n      xLabels={xLabels}\n      yLabels={yLabels}\n    /\u003e\n  )\n}\n\nexport default App\n```\n\n**Optional Parameters**\n\n| Name         | Type     | Description/Example                                     | Default Value |\n| :----------- | :------- | :------------------------------------------------------ | :------------ |\n| xLabels      | string[] | `['1am', '2am', '3am']`                                 | `null`        |\n| yLabels      | string[] | `['Sun', 'Mon']`                                        | `null`        |\n| cellHeight   | string   | Height of each cell of the heatmap                      | `\"2rem\"`      |\n| onClick      | function | Adds an handler to cell click\u003cbr\u003e`(x, y) =\u003e void`       | `null`        |\n| square       | boolean  | If set to `true` will render cells as square            | `false`       |\n| xLabelsPos   | string   | Location of y labels. It can be `top` or `bottom`       | `\"top\"`       |\n| yLabelsPos   | string   | Location of y labels. It can be `left` or `right`       | `\"left\"`      |\n| cellRender   | function | Render custom content in cell.\u003cbr\u003e`(x, y, value) =\u003e ()` | `null`        |\n| cellStyle    | function | To set custom cell style\u003cbr\u003e`(x, y, ratio) =\u003e {}`     | `null`        |\n| xLabelsStyle | function | To set custom cell style\u003cbr\u003e`(index) =\u003e {}`     | `null`        |\n| yLabelsStyle | function | To set custom cell style\u003cbr\u003e`(index) =\u003e {}`     | `null`        |\n\n\nA sample code with all parameters\n```js\nimport React from 'react'\nimport { HeatMapGrid } from 'react-grid-heatmap'\n\nconst xLabels = new Array(24).fill(0).map((_, i) =\u003e `${i}`)\nconst yLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri']\nconst data = new Array(yLabels.length)\n  .fill(0)\n  .map(() =\u003e\n    new Array(xLabels.length)\n      .fill(0)\n      .map(() =\u003e Math.floor(Math.random() * 50 + 50))\n  )\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv\n      style={{\n        width: '100%'\n      }}\n    \u003e\n      \u003cHeatMapGrid\n        data={data}\n        xLabels={xLabels}\n        yLabels={yLabels}\n        // Render cell with tooltip\n        cellRender={(x, y, value) =\u003e (\n          \u003cdiv title={`Pos(${x}, ${y}) = ${value}`}\u003e{value}\u003c/div\u003e\n        )}\n        xLabelsStyle={(index) =\u003e ({\n          color: index % 2 ? 'transparent' : '#777',\n          fontSize: '.8rem'\n        })}\n        yLabelsStyle={() =\u003e ({\n          fontSize: '.7rem',\n          textTransform: 'uppercase',\n          color: '#777'\n        })}\n        cellStyle={(_x, _y, ratio) =\u003e ({\n          background: `rgb(12, 160, 44, ${ratio})`,\n          fontSize: '.8rem',\n          color: `rgb(0, 0, 0, ${ratio / 2 + 0.4})`\n        })}\n        cellHeight='2rem'\n        xLabelsPos='bottom'\n        onClick={(x, y) =\u003e alert(`Clicked (${x}, ${y})`)}\n        yLabelsPos='right'\n        square\n      /\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App\n\n```\n\n## Local development\nLocal development is broken into two parts (ideally using two tabs).\n\nFirst, run rollup to watch your `src/` module and automatically recompile it into `dist/` whenever you make changes.\n\n```\nnpm start # runs rollup with watch flag\n```\n\nThe second part will be running the `example/` create-react-app that's linked to the local version of your module.\n\n```\n# (in another tab) \ncd example\nnpm start # runs create-react-app dev server \n```\nNow, anytime you make a change to your library in `src/` or to the example app's `example/src`, `create-react-app` will live-reload your local dev server so you can iterate on your component in real-time.\n\n\n## License\n\nMIT © [arunghosh](https://github.com/arunghosh)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farunghosh%2Freact-grid-heatmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farunghosh%2Freact-grid-heatmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farunghosh%2Freact-grid-heatmap/lists"}