Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/uiwjs/react-heat-map

A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.
https://github.com/uiwjs/react-heat-map

calendar heat-map heatmap javascript react react-heat-map reactjs svg uiwjs

Last synced: about 2 months ago
JSON representation

A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.

Host: GitHub
URL: https://github.com/uiwjs/react-heat-map
Owner: uiwjs
License: mit
Created: 2021-05-29T20:09:46.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2024-07-30T19:03:20.000Z (5 months ago)
Last Synced: 2024-10-01T00:54:44.847Z (2 months ago)
Topics: calendar, heat-map, heatmap, javascript, react, react-heat-map, reactjs, svg, uiwjs
Language: TypeScript
Homepage: https://uiwjs.github.io/react-heat-map
Size: 95.3 MB
Stars: 204
Watchers: 4
Forks: 24
Open Issues: 10
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-react-components - react-heat-map - A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph. (UI Components / Canvas)
awesome-react - react-heat-map - A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph. ![](https://img.shields.io/github/stars/uiwjs/react-heat-map.svg?style=social&label=Star) (UI Components / Data Visualization)
awesome-react-components - react-heat-map - A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph. (UI Components / Canvas)
fucking-awesome-react-components - react-heat-map - A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph. (UI Components / Canvas)

README

        HeatMap 日历热图

===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)

[![Build & 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)

[![Coverage Status](https://img.shields.io/npm/dm/@uiw/react-heat-map.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-heat-map)

[![npm version](https://img.shields.io/npm/v/@uiw/react-heat-map.svg)](https://www.npmjs.com/package/@uiw/react-heat-map)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@uiw/react-heat-map)](https://bundlephobia.com/result?p=@uiw/react-heat-map)

[![Open in Gitpod](https://shields.io/badge/Open%20in-Gitpod-green?logo=Gitpod)](https://gitpod.io/#https://github.com/uiwjs/react-codemirror)

A 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/).

[![](https://user-images.githubusercontent.com/1680273/186116433-d58c2b6d-8468-4322-943c-9b63c2e447e4.png)](https://uiwjs.github.io/react-heat-map)

## Install

```bash

# Not dependent on uiw.

npm install @uiw/react-heat-map --save

```

## Basic Usage

Basic usage example, Please pay warning to the time setting.

⚠️ Example: ~~`2016-01-11`~~ -> `2016/01/11`, Support `Safari`

```jsx mdx:preview

import React from 'react';

import HeatMap from '@uiw/react-heat-map';

const value = [

  { date: '2016/01/11', count: 2 },

  { date: '2016/01/12', count: 20 },

  { date: '2016/01/13', count: 10 },

  ...[...Array(17)].map((_, idx) => ({ date: `2016/02/${idx + 10}`, count: idx, content: '' })),

  { date: '2016/04/11', count: 2 },

  { date: '2016/05/01', count: 5 },

  { date: '2016/05/02', count: 5 },

  { date: '2016/05/04', count: 11 },

];

const Demo = () => {

  return (

    


      

    

  )

};

export default Demo

```

## Set Color

Set the theme color style.

```jsx mdx:preview

import React from 'react';

import HeatMap from '@uiw/react-heat-map';

const value = [

  { date: '2016/01/11', count:2 },

  { date: '2016/04/12', count:2 },

  { date: '2016/05/01', count:5 },

  { date: '2016/05/02', count:5 },

  { date: '2016/05/03', count:1 },

  { date: '2016/05/04', count:11 },

  { date: '2016/05/08', count:32 },

];

const Demo = () => {

  return (

    

  )

};

export default Demo

```

## Set Rect Style

Set the radius of the rect.

```jsx mdx:preview

import React, { useState } from 'react';

import HeatMap from '@uiw/react-heat-map';

const value = [

  { date: '2016/01/11', count:2 },

  ...[...Array(17)].map((_, idx) => ({ date: `2016/01/${idx + 10}`, count: idx })),

  ...[...Array(17)].map((_, idx) => ({ date: `2016/02/${idx + 10}`, count: idx })),

  { date: '2016/04/12', count:2 },

  { date: '2016/05/01', count:5 },

  { date: '2016/05/02', count:5 },

  { date: '2016/05/03', count:1 },

  { date: '2016/05/04', count:11 },

  { date: '2016/05/08', count:32 },

];

const Demo = () => {

  const [range, setRange] = useState(5)

  return (

    


       setRange(e.target.value)} /> {range}

       }

        rectProps={{

          rx: range

        }}

      />

    

  )

};

export default Demo

```

## Tooltip

A simple text popup tip.

```jsx mdx:preview

import React from 'react';

import Tooltip from '@uiw/react-tooltip';

import HeatMap from '@uiw/react-heat-map';

const value = [

  { date: '2016/01/11', count:2 },

  ...[...Array(17)].map((_, idx) => ({ date: `2016/01/${idx + 10}`, count: idx, })),

  ...[...Array(17)].map((_, idx) => ({ date: `2016/02/${idx + 10}`, count: idx, })),

  { date: '2016/04/12', count:2 },

  { date: '2016/05/01', count:5 },

  { date: '2016/05/02', count:5 },

  { date: '2016/05/03', count:1 },

  { date: '2016/05/04', count:11 },

  { date: '2016/05/08', count:32 },

];

const Demo = () => {

  return (

     {

        // if (!data.count) return ;

        return (

          

            

          

        );

      }}

    />

  )

};

export default Demo

```

## Show/Hide Legend

```jsx mdx:preview

import React, { useState } from 'react';

import HeatMap from '@uiw/react-heat-map';

const value = [

  { date: '2016/01/11', count:2 },

  ...[...Array(17)].map((_, idx) => ({ date: `2016/01/${idx + 10}`, count: idx })),

  ...[...Array(17)].map((_, idx) => ({ date: `2016/02/${idx + 10}`, count: idx })),

  { date: '2016/04/12', count:2 },

  { date: '2016/05/01', count:5 },

  { date: '2016/05/02', count:5 },

  { date: '2016/05/03', count:1 },

  { date: '2016/05/04', count:11 },

  { date: '2016/05/08', count:32 },

];

const Demo = () => {

  const [size, setSize] = useState(0)

  return (

    


      

         setSize(e.target.checked ? 0 : 12)}

        />

        {size === 0 ? ' Hide' : ' Show'} Legend

      

      

    

  )

};

export default Demo

```

## Selected Rect

```jsx mdx:preview

import React, { useState } from 'react';

import HeatMap from '@uiw/react-heat-map';

const value = [

  { date: '2016/01/11', count:2 },

  ...[...Array(17)].map((_, idx) => ({ date: `2016/01/${idx + 10}`, count: idx })),

  ...[...Array(17)].map((_, idx) => ({ date: `2016/02/${idx + 10}`, count: idx })),

  { date: '2016/04/12', count:2 },

  { date: '2016/05/01', count:5 },

  { date: '2016/05/02', count:5 },

  { date: '2016/05/03', count:1 },

  { date: '2016/05/04', count:11 },

  { date: '2016/05/08', count:32 },

];

const Demo = () => {

  const [selected, setSelected] = useState('')

  return (

    


       {

          if (selected !== '') {

            props.opacity = data.date === selected ? 1 : 0.45

          }

          return (

             {

              setSelected(data.date === selected ? '' : data.date);

            }} />

          );

        }}

      />

    

  )

};

export default Demo

```

## Props

| Property | Description | Type | Default |

| ---- | ---- | ---- | ---- |

| value | Data to be displayed, **required** | Array | `[]` |

| rectSize | Grid size | number | `11` |

| legendCellSize | Size of the legend cells, in pixel. Value equal to `0` hide legend. | number | `11` |

| startDate | Start date | Date | `new Date()` |

| endDate | End date | Date | - |

| space | Interval between grid sizes | number | `2` | 

| monthPlacement | position of month labels | `'top' | 'bottom'` | `top` | 

| rectProps | Grid node attribute settings | `React.SVGProps` | `2` |

| weekLabels | Week display | string[] | `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']` | 

| monthLabels | Month display | string[] | `['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']` | 

| panelColors | Backgroud color of active colors | `Record` | `{ 0: '#EBEDF0', 8: '#7BC96F', 4: '#C6E48B', 12: '#239A3B', 32: '#196127' }` | 

| rectRender | Single `day` block re-render | `(data: E & { key: number }, valueItem: HeatMapValue & { date: string, column: number, row: number, index: number }) => React.ReactElement` | - |

| legendRender | Single `legend` block re-render | `(props: React.SVGProps) => React.ReactNode` | - |

## Development

**`development`**

Runs the project in development mode.  

```bash

npm install

```

```bash

# Step 1, run first, listen to the component compile and output the .js file

# listen for compilation output type .d.ts file

npm run watch

# Step 2, development mode, listen to compile preview website instance

npm run start

```

**`production`**

Builds the app for production to the build folder.

```bash

npm run build

npm run doc

```

The build is minified and the filenames include the hashes.

Your app is ready to be deployed!

## Contributors

As always, thanks to our amazing contributors!



  



Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).

## License

Licensed under the MIT License.