{"id":13422025,"url":"https://github.com/uiwjs/react-heat-map","last_synced_at":"2025-03-15T10:31:36.312Z","repository":{"id":37888919,"uuid":"372061280","full_name":"uiwjs/react-heat-map","owner":"uiwjs","description":"A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.","archived":false,"fork":false,"pushed_at":"2024-12-20T12:06:11.000Z","size":106543,"stargazers_count":221,"open_issues_count":15,"forks_count":26,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-02-22T01:35:32.652Z","etag":null,"topics":["calendar","heat-map","heatmap","javascript","react","react-heat-map","reactjs","svg","uiwjs"],"latest_commit_sha":null,"homepage":"https://uiwjs.github.io/react-heat-map","language":"TypeScript","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/uiwjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"ko_fi":"jaywcjlove","buy_me_a_coffee":"jaywcjlove","custom":["https://www.paypal.me/kennyiseeyou","https://jaywcjlove.github.io/#/sponsor"]}},"created_at":"2021-05-29T20:09:46.000Z","updated_at":"2025-01-22T08:28:01.000Z","dependencies_parsed_at":"2024-06-18T19:57:27.231Z","dependency_job_id":"6be9b9ef-bbf1-4345-a058-8f8d155e8745","html_url":"https://github.com/uiwjs/react-heat-map","commit_stats":null,"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Freact-heat-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Freact-heat-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Freact-heat-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Freact-heat-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uiwjs","download_url":"https://codeload.github.com/uiwjs/react-heat-map/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243719097,"owners_count":20336591,"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","heat-map","heatmap","javascript","react","react-heat-map","reactjs","svg","uiwjs"],"created_at":"2024-07-30T23:00:35.715Z","updated_at":"2025-03-15T10:31:36.305Z","avatar_url":"https://github.com/uiwjs.png","language":"TypeScript","readme":"HeatMap 日历热图\n===\n\u003c!--rehype:style=text-align: center;--\u003e\n\n[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)\n[![Build \u0026 Deploy](https://github.com/uiwjs/react-heat-map/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-heat-map/actions/workflows/ci.yml)\n[![Coverage Status](https://img.shields.io/npm/dm/@uiw/react-heat-map.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-heat-map)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-heat-map.svg)](https://www.npmjs.com/package/@uiw/react-heat-map)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@uiw/react-heat-map)](https://bundlephobia.com/result?p=@uiw/react-heat-map)\n[![Open in Gitpod](https://shields.io/badge/Open%20in-Gitpod-green?logo=Gitpod)](https://gitpod.io/#https://github.com/uiwjs/react-codemirror)\n\u003c!--rehype:style=text-align: center;--\u003e\n\nA lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph. Try it out on [website example](https://uiwjs.github.io/react-heat-map/).\n\n\u003c!--rehype:ignore:start--\u003e\n\n[![](https://user-images.githubusercontent.com/1680273/186116433-d58c2b6d-8468-4322-943c-9b63c2e447e4.png)](https://uiwjs.github.io/react-heat-map)\n\n\u003c!--rehype:ignore:end--\u003e\n\n## Install\n\n```bash\n# Not dependent on uiw.\nnpm install @uiw/react-heat-map --save\n```\nIf using Next.js, you will need to use the [`next-remove-imports`](https://www.npmjs.com/package/next-remove-imports) package to avoid errors, see [issue #69](https://github.com/uiwjs/react-heat-map/issues/69).\n\n## Basic Usage\n\nBasic usage example, Please pay warning to the time setting.\n\n⚠️ Example: ~~`2016-01-11`\u003c!--rehype:style=color: red;background-color: #ffd8d8;--\u003e~~ -\u003e `2016/01/11`\u003c!--rehype:style=color: green;background: #a7e4b5;--\u003e, Support `Safari`\u003c!--rehype:style=background-color: #87d499;--\u003e\n\n```jsx mdx:preview\nimport React from 'react';\nimport HeatMap from '@uiw/react-heat-map';\n\nconst value = [\n  { date: '2016/01/11', count: 2 },\n  { date: '2016/01/12', count: 20 },\n  { date: '2016/01/13', count: 10 },\n  ...[...Array(17)].map((_, idx) =\u003e ({\n    date: `2016/02/${idx + 10}`, count: idx, content: ''\n  })),\n  { date: '2016/04/11', count: 2 },\n  { date: '2016/05/01', count: 5 },\n  { date: '2016/05/02', count: 5 },\n  { date: '2016/05/04', count: 11 },\n];\n\nconst Demo = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cHeatMap\n        value={value}\n        weekLabels={['', 'Mon', '', 'Wed', '', 'Fri', '']}\n        startDate={new Date('2016/01/01')}\n      /\u003e\n    \u003c/div\u003e\n  )\n};\n\nexport default Demo\n```\n\n## Set Color\n\nSet the theme color style.\n\n```jsx mdx:preview\nimport React from 'react';\nimport HeatMap from '@uiw/react-heat-map';\n\nconst value = [\n  { date: '2016/01/11', count:2 },\n  { date: '2016/04/12', count:2 },\n  { date: '2016/05/01', count:17 },\n  { date: '2016/05/02', count:5 },\n  { date: '2016/05/03', count:27 },\n  { date: '2016/05/04', count:11 },\n  { date: '2016/05/08', count:32 },\n];\n\nconst Demo = () =\u003e {\n  return (\n    \u003cHeatMap\n      value={value}\n      width={600}\n      style={{ color: '#ad001d', '--rhm-rect-active': 'red' }}\n      startDate={new Date('2016/01/01')}\n      panelColors={{\n        0: '#f4decd',\n        7: '#e4b293',\n        14: '#d48462',\n        21: '#c2533a',\n        28: '#ad001d',\n        35: '#6c0012'\n      }}\n    /\u003e\n  )\n};\nexport default Demo\n```\n\nDynamic color based on maximum value\n\n```jsx mdx:preview\nimport React from 'react';\nimport HeatMap from '@uiw/react-heat-map';\n\nconst value = [\n  { date: '2016/01/11', count:2 },\n  { date: '2016/04/12', count:2 },\n  { date: '2016/05/01', count:17 },\n  { date: '2016/05/02', count:5 },\n  { date: '2016/05/03', count:27 },\n  { date: '2016/05/04', count:11 },\n  { date: '2016/05/08', count:32 },\n];\n\nconst Demo = () =\u003e {\n  return (\n    \u003cHeatMap\n      value={value}\n      width={600}\n      style={{ color: '#ad001d', '--rhm-rect-active': 'red' }}\n      startDate={new Date('2016/01/01')}\n      panelColors={['#f4decd', '#e4b293', '#d48462', '#c2533a', '#ad001d', '#6c0012']}\n    /\u003e\n  )\n};\nexport default Demo\n```\n\n## Set Rect Style\n\nSet the radius of the rect.\n\n```jsx mdx:preview\nimport React, { useState } from 'react';\nimport HeatMap from '@uiw/react-heat-map';\n\nconst value = [\n  { date: '2016/01/11', count:2 },\n  ...[...Array(17)].map((_, idx) =\u003e ({ date: `2016/01/${idx + 10}`, count: idx })),\n  ...[...Array(17)].map((_, idx) =\u003e ({ date: `2016/02/${idx + 10}`, count: idx })),\n  { date: '2016/04/12', count:2 },\n  { date: '2016/05/01', count:5 },\n  { date: '2016/05/02', count:5 },\n  { date: '2016/05/03', count:1 },\n  { date: '2016/05/04', count:11 },\n  { date: '2016/05/08', count:32 },\n];\n\nconst Demo = () =\u003e {\n  const [range, setRange] = useState(5)\n  return (\n    \u003cdiv\u003e\n      \u003cinput\n        type=\"range\"\n        min=\"0\"\n        max=\"5\"\n        step=\"0.1\"\n        value={range}\n        onChange={(e) =\u003e setRange(e.target.value)}\n      /\u003e {range}\n      \u003cHeatMap\n        value={value}\n        width={600}\n        style={{ '--rhm-rect': '#b9b9b9' }}\n        startDate={new Date('2016/01/01')}\n        legendRender={(props) =\u003e \u003crect {...props} y={props.y + 10} rx={range} /\u003e}\n        rectProps={{\n          rx: range\n        }}\n      /\u003e\n    \u003c/div\u003e\n  )\n};\nexport default Demo\n```\n\n## Tooltip\n\nA simple text popup tip.\n\n```jsx mdx:preview\nimport React from 'react';\nimport Tooltip from '@uiw/react-tooltip';\nimport HeatMap from '@uiw/react-heat-map';\n\nconst value = [\n  { date: '2016/01/11', count:2 },\n  ...[...Array(17)].map((_, idx) =\u003e ({ date: `2016/01/${idx + 10}`, count: idx, })),\n  ...[...Array(17)].map((_, idx) =\u003e ({ date: `2016/02/${idx + 10}`, count: idx, })),\n  { date: '2016/04/12', count:2 },\n  { date: '2016/05/01', count:5 },\n  { date: '2016/05/02', count:5 },\n  { date: '2016/05/03', count:1 },\n  { date: '2016/05/04', count:11 },\n  { date: '2016/05/08', count:32 },\n];\n\nconst Demo = () =\u003e {\n  return (\n    \u003cHeatMap\n      value={value}\n      width={600}\n      startDate={new Date('2016/01/01')}\n      rectRender={(props, data) =\u003e {\n        // if (!data.count) return \u003crect {...props} /\u003e;\n        return (\n          \u003cTooltip placement=\"top\" content={`count: ${data.count || 0}`}\u003e\n            \u003crect {...props} /\u003e\n          \u003c/Tooltip\u003e\n        );\n      }}\n    /\u003e\n  )\n};\nexport default Demo\n```\n\n## Show/Hide Legend\n\n```jsx mdx:preview\nimport React, { useState } from 'react';\nimport HeatMap from '@uiw/react-heat-map';\n\nconst value = [\n  { date: '2016/01/11', count:2 },\n  ...[...Array(17)].map((_, idx) =\u003e ({ date: `2016/01/${idx + 10}`, count: idx })),\n  ...[...Array(17)].map((_, idx) =\u003e ({ date: `2016/02/${idx + 10}`, count: idx })),\n  { date: '2016/04/12', count:2 },\n  { date: '2016/05/01', count:5 },\n  { date: '2016/05/02', count:5 },\n  { date: '2016/05/03', count:1 },\n  { date: '2016/05/04', count:11 },\n  { date: '2016/05/08', count:32 },\n];\n\nconst Demo = () =\u003e {\n  const [size, setSize] = useState(0)\n  return (\n    \u003cdiv\u003e\n      \u003clabel style={{ userSelect: 'none' }}\u003e\n        \u003cinput\n          type=\"checkbox\"\n          checked={size === 0}\n          onChange={(e) =\u003e setSize(e.target.checked ? 0 : 12)}\n        /\u003e\n        {size === 0 ? ' Hide' : ' Show'} Legend\n      \u003c/label\u003e\n      \u003cHeatMap\n        width={600}\n        value={value}\n        legendCellSize={size}\n        startDate={new Date('2016/01/01')}\n      /\u003e\n    \u003c/div\u003e\n  )\n};\nexport default Demo\n```\n\n## Selected Rect\n\n```jsx mdx:preview\nimport React, { useState } from 'react';\nimport HeatMap from '@uiw/react-heat-map';\n\nconst value = [\n  { date: '2016/01/11', count:2 },\n  ...[...Array(17)].map((_, idx) =\u003e ({ date: `2016/01/${idx + 10}`, count: idx })),\n  ...[...Array(17)].map((_, idx) =\u003e ({ date: `2016/02/${idx + 10}`, count: idx })),\n  { date: '2016/04/12', count:2 },\n  { date: '2016/05/01', count:5 },\n  { date: '2016/05/02', count:5 },\n  { date: '2016/05/03', count:1 },\n  { date: '2016/05/04', count:11 },\n  { date: '2016/05/08', count:32 },\n];\n\nconst Demo = () =\u003e {\n  const [selected, setSelected] = useState('')\n  return (\n    \u003cdiv\u003e\n      \u003cHeatMap\n        width={600}\n        value={value}\n        startDate={new Date('2016/01/01')}\n        rectRender={(props, data) =\u003e {\n          if (selected !== '') {\n            props.opacity = data.date === selected ? 1 : 0.45\n          }\n          return (\n            \u003crect {...props} onClick={() =\u003e {\n              setSelected(data.date === selected ? '' : data.date);\n            }} /\u003e\n          );\n        }}\n      /\u003e\n    \u003c/div\u003e\n  )\n};\nexport default Demo\n```\n\n## Props\n\n| Property | Description | Type | Default |\n| ---- | ---- | ---- | ---- |\n| `value` | Data to be displayed, **required** | Array | `[]` |\n| `rectSize` | Grid size | number | `11` |\n| `legendCellSize` | Size of the legend cells, in pixel. Value equal to `0` hide legend. | number | `11` |\n| `startDate` | Start date | Date | `new Date()` |\n| `endDate` | End date | Date | - |\n| `space` | Interval between grid sizes | number | `2` | \n| `monthPlacement` | position of month labels | `'top' | 'bottom'` | `top` | \n| `rectProps` | Grid node attribute settings | `React.SVGProps\u003cSVGRectElement\u003e` | `2` |\n| `weekLabels` | Week display | string[] | `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']` | \n| `monthLabels` | Month display | string[] | `['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']` | \n| `panelColors` | Backgroud color of active colors | `Record\u003cnumber, string\u003e` \\| `string[]` | `['var(--rhm-rect, #EBEDF0)','#C6E48B','#7BC96F', '#239A3B', '#196127']` | \n| `rectRender` | Single `day` block re-render | `\u003cE = SVGRectElement\u003e(data: E \u0026 { key: number }, valueItem: HeatMapValue \u0026 { date: string, column: number, row: number, index: number }) =\u003e React.ReactElement` | - |\n| `legendRender` | Single `legend` block re-render | `(props: React.SVGProps\u003cSVGRectElement\u003e) =\u003e React.ReactNode` | - |\n\n## Development\n\n**`development`**\n\nRuns the project in development mode.  \n\n```bash\nnpm install\n```\n\n```bash\n# Step 1, run first, listen to the component compile and output the .js file\n# listen for compilation output type .d.ts file\nnpm run watch\n# Step 2, development mode, listen to compile preview website instance\nnpm run start\n```\n\n**`production`**\n\nBuilds the app for production to the build folder.\n\n```bash\nnpm run build\nnpm run doc\n```\n\nThe build is minified and the filenames include the hashes.\nYour app is ready to be deployed!\n\n## Contributors\n\nAs always, thanks to our amazing contributors!\n\n\u003ca href=\"https://github.com/uiwjs/react-heat-map/graphs/contributors\"\u003e\n  \u003cimg src=\"https://uiwjs.github.io/react-heat-map/CONTRIBUTORS.svg\" /\u003e\n\u003c/a\u003e\n\nMade with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).\n\n## License\n\nLicensed under the MIT License.\n\n","funding_links":["https://ko-fi.com/jaywcjlove","https://buymeacoffee.com/jaywcjlove","https://www.paypal.me/kennyiseeyou","https://jaywcjlove.github.io/#/sponsor"],"categories":["UI Components"],"sub_categories":["Canvas","Data Visualization"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuiwjs%2Freact-heat-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuiwjs%2Freact-heat-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuiwjs%2Freact-heat-map/lists"}