• Stars
    star
    198
  • Rank 196,898 (Top 4 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 3 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

HeatMap 日历热图

Build & Deploy Coverage Status npm version npm bundle size Open in Gitpod jsDelivr CDN

A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph. Try it out on website example.

Install

# 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

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 (
    <div>
      <HeatMap
        value={value}
        weekLabels={['', 'Mon', '', 'Wed', '', 'Fri', '']}
        startDate={new Date('2016/01/01')}
      />
    </div>
  )
};

export default Demo

Set Color

Set the theme color style.

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 (
    <HeatMap
      value={value}
      width={600}
      style={{ color: '#ad001d', '--rhm-rect-active': 'red' }}
      startDate={new Date('2016/01/01')}
      panelColors={{
        0: '#f4decd',
        2: '#e4b293',
        4: '#d48462',
        10: '#c2533a',
        20: '#ad001d',
        30: '#000',
      }}
    />
  )
};
export default Demo

Set Rect Style

Set the radius of the rect.

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 (
    <div>
      <input type="range" min="0" max="5" step="0.1" value={range} onChange={(e) => setRange(e.target.value)} /> {range}
      <HeatMap
        value={value}
        width={600}
        style={{ '--rhm-rect': '#b9b9b9' }}
        startDate={new Date('2016/01/01')}
        legendRender={(props) => <rect {...props} y={props.y + 10} rx={range} />}
        rectProps={{
          rx: range
        }}
      />
    </div>
  )
};
export default Demo

Tooltip

A simple text popup tip.

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 (
    <HeatMap
      value={value}
      width={600}
      startDate={new Date('2016/01/01')}
      rectRender={(props, data) => {
        // if (!data.count) return <rect {...props} />;
        return (
          <Tooltip placement="top" content={`count: ${data.count || 0}`}>
            <rect {...props} />
          </Tooltip>
        );
      }}
    />
  )
};
export default Demo

Show/Hide Legend

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 (
    <div>
      <label style={{ userSelect: 'none' }}>
        <input
          type="checkbox"
          checked={size === 0}
          onChange={(e) => setSize(e.target.checked ? 0 : 12)}
        />
        {size === 0 ? ' Hide' : ' Show'} Legend
      </label>
      <HeatMap
        width={600}
        value={value}
        legendCellSize={size}
        startDate={new Date('2016/01/01')}
      />
    </div>
  )
};
export default Demo

Selected Rect

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 (
    <div>
      <HeatMap
        width={600}
        value={value}
        startDate={new Date('2016/01/01')}
        rectRender={(props, data) => {
          if (selected !== '') {
            props.opacity = data.date === selected ? 1 : 0.45
          }
          return (
            <rect {...props} onClick={() => {
              setSelected(data.date === selected ? '' : data.date);
            }} />
          );
        }}
      />
    </div>
  )
};
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
rectProps Grid node attribute settings React.SVGProps<SVGRectElement> 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<number, string> { 0: '#EBEDF0', 8: '#7BC96F', 4: '#C6E48B', 12: '#239A3B', 32: '#196127' }
rectRender Single day block re-render <E = SVGRectElement>(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<SVGRectElement>) => React.ReactNode -

Development

development

Runs the project in development mode.

npm install
# 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.

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.

License

Licensed under the MIT License.

More Repositories

1

province-city-china

🇨🇳最全最新中国【省、市、区县、乡镇街道】json,csv,sql数据
JavaScript
2,661
star
2

react-md-editor

A simple markdown editor with preview, implemented with React.js and TypeScript.
TypeScript
2,119
star
3

react-codemirror

CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
TypeScript
1,611
star
4

uiw

⚛️ @uiwjs A high quality UI Toolkit, A Component Library for React 16+.
TypeScript
708
star
5

react-login-page

Some `react` login pages, which can be used quickly after installation.
TypeScript
570
star
6

react-textarea-code-editor

A simple code editor with syntax highlighting.
TypeScript
479
star
7

react-amap

基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。
TypeScript
415
star
8

react-markdown-editor

A markdown editor with preview, implemented with React.js and TypeScript.
TypeScript
325
star
9

react-monacoeditor

Monaco Editor component for React.
TypeScript
290
star
10

react-color

🎨 Is a tiny color picker widget component for React apps.
TypeScript
273
star
11

react-markdown-preview

React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style. Support dark-mode/night mode.
TypeScript
270
star
12

react-baidu-map

基于 React 封装的百度地图组件,支持 React Hook,帮助你轻松的接入地图到 React 项目中。
TypeScript
221
star
13

react-native-alipay

基于 React Native 的宝支付包,已更新到最新的支付宝 SDK 版本,支持Android/iOS。
Java
208
star
14

react-json-view

A React component for displaying and editing javascript arrays and JSON objects.
TypeScript
187
star
15

icons

The premium icon font for @uiwjs Component Library. https://uiwjs.github.io/icons
HTML
138
star
16

npm-unpkg

A web application to view npm package files, Based on unpkg.
TypeScript
101
star
17

react-split

A piece of view can be divided into areas where the width or height can be adjusted by dragging.
TypeScript
66
star
18

react-code-preview

Code edit preview for React.
TypeScript
64
star
19

react-native-uiw

A UI component library based on React Native (Android & iOS).
TypeScript
45
star
20

json-viewer

Online JSON Viewer, JSON Beautifier to beautify and tree view of JSON data - It works as JSON Pretty Print to pretty print JSON data.
TypeScript
45
star
21

react-native-amap-geolocation

React Native 高德地图定位模块,支持 Android/iOS。
Java
42
star
22

react-signature

A signature board component for react.
TypeScript
36
star
23

react-watermark

A react component that adds a watermark to an area of a web page.
TypeScript
33
star
24

react-native-wechat

React Native 包使用微信分享、登录、收藏、支付等功能,支持Android/iOS。
Java
31
star
25

file-icons

File icons in the file tree.
HTML
30
star
26

free-font

收录商用免费汉字字体 Free Font
JavaScript
26
star
27

uiw-admin

UIW-Admin Panel Framework, Powered by React and @uiwjs.
TypeScript
22
star
28

babel-plugin-transform-remove-imports

Remove the specified import declaration when you use the babel transform to build the package.
JavaScript
22
star
29

react-run-web

Online Code Editor for Rapid Web Development.
TypeScript
21
star
30

react-mac-keyboard

Macbook computer keyboard style for react component.
TypeScript
18
star
31

react-native-template

React Native template for react-native-uiw.
JavaScript
17
star
32

next-remove-imports

The default behavior is to remove all .less/.css/.scss/.sass/.styl imports from all packages in node_modules.
JavaScript
17
star
33

react-use-online

useOnline is a tiny, zero-dependency hook for responding to online/offline changes.
TypeScript
17
star
34

ui-color

Converting HEX & RGB colors to UIColor/NSColor/Color for both Objective C & Swift.
TypeScript
16
star
35

copy-to-clipboard

Copy text to the clipboard in modern browsers
JavaScript
16
star
36

react-iframe

This component allows you to wrap your entire React application or each component in an <iframe>.
TypeScript
16
star
37

keycode-info

A simple web page that responds to the pressed key and returns information about the JavaScript'on-key press' key.
TypeScript
15
star
38

reset-css

A tiny modern CSS reset.
CSS
14
star
39

react-codesandbox

A React component is provided that allows you to programmatically generate codesandbox projects from code samples on the fly.
TypeScript
12
star
40

react-github-corners

Add a Github corner to your project page, This GitHub corner for react component/web component.
TypeScript
12
star
41

react-only-when

A declarative component for conditional rendering.
TypeScript
10
star
42

react-tabs-draggable

Draggable tabs for React.
TypeScript
8
star
43

bootstrap-icons

Official open source SVG icon library for Bootstrap.
8
star
44

uiwjs.github.io

The official documentation site for @uiwjs. https://uiwjs.github.io
8
star
45

react-clock

An analog clock for your React app.
TypeScript
7
star
46

vscode-uiw

Preview uiw document in vscode.
TypeScript
7
star
47

react-code-preview-layout

A react component showing the layout of `code` and `code preview example`.
TypeScript
7
star
48

react-layout

Layout component for React. Handling the overall layout of a page.
TypeScript
7
star
49

react-markdown-preview-example

Preview the markdown files and run the React examples in the documentation.
TypeScript
7
star
50

react-csv-reader

React component that handles csv file input and its parsing.
TypeScript
7
star
51

react-prismjs

React Component for prismjs.
TypeScript
7
star
52

react-use-colorscheme

useColorScheme() provides access to the devices color scheme.
TypeScript
7
star
53

react-native-transport-location

Objective-C
6
star
54

date-formatter

Get a formatted date.
TypeScript
6
star
55

react-head

React components will manage your changes to the document head
TypeScript
4
star
56

react-shields

Shields.io for react component, Quality metadata badges for open source projects.
TypeScript
4
star
57

react-stackblitz

A React component is provided that allows you to programmatically generate stackblitz projects from code samples on the fly.
TypeScript
4
star
58

react-back-to-top

A minimal lightweight react component for adding a nice scroll up (back to top) button with onScroll progress.
TypeScript
4
star
59

react-monorepo-template

Simple React package development project example template.
TypeScript
3
star
60

auto-gitee-mirror

Use GitHub Actions to sync from GitHub to Gitee
3
star
61

react-keywords

Highlight a keyword in a piece of text and return a React element.
TypeScript
3
star
62

react-codepen

A React component is provided that allows you to programmatically generate codepen projects from code samples on the fly.
TypeScript
3
star
63

css-filter

A filter CSS generator that helps you quickly generate filter CSS declarations for your website. It comes with many options and it demonstrates instantly.
TypeScript
3
star
64

babel-plugin-transform-uiw-import

Modular import plugin for babel.
JavaScript
2
star
65

react-xml-reader

React component that handles xml file input and its parsing.
TypeScript
2
star
66

rematch-loading

Loading indicator plugin for @rematch.
TypeScript
1
star
67

logo

Source files of uiw's logo.
1
star
68

.github

Welcome to the uiwjs organization.
1
star