\n
\n )\n};\n\nexport default Demo"},64:{name:64,meta:{},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _reactHeatMap = _interopRequireDefault(require(\"@uiw/react-heat-map\"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nvar value = [{\n date: '2016/01/11',\n count: 2\n}, {\n date: '2016/04/12',\n count: 2\n}, {\n date: '2016/05/01',\n count: 5\n}, {\n date: '2016/05/02',\n count: 5\n}, {\n date: '2016/05/03',\n count: 1\n}, {\n date: '2016/05/04',\n count: 11\n}, {\n date: '2016/05/08',\n count: 32\n}];\nvar Demo = function Demo() {\n return /*#__PURE__*/_react[\"default\"].createElement(_reactHeatMap[\"default\"], {\n value: value,\n width: 600,\n style: {\n color: '#ad001d'\n },\n startDate: new Date('2016/01/01'),\n panelColors: {\n 0: '#f4decd',\n 2: '#e4b293',\n 4: '#d48462',\n 10: '#c2533a',\n 20: '#ad001d',\n 30: '#000'\n }\n });\n};\nreturn Demo;",language:"jsx",value:"import 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: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 = () => {\n return (\n \n setRange(e.target.value)} /> {range}\n
\n )\n};\nexport default Demo"},143:{name:143,meta:{},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _reactTooltip = _interopRequireDefault(require("@uiw/react-tooltip"));\nvar _reactHeatMap = _interopRequireDefault(require("@uiw/react-heat-map"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nvar value = [{\n date: \'2016/01/11\',\n count: 2\n}].concat(_toConsumableArray(_toConsumableArray(Array(17)).map(function (_, idx) {\n return {\n date: "2016/01/".concat(idx + 10),\n count: idx\n };\n})), _toConsumableArray(_toConsumableArray(Array(17)).map(function (_, idx) {\n return {\n date: "2016/02/".concat(idx + 10),\n count: idx\n };\n})), [{\n date: \'2016/04/12\',\n count: 2\n}, {\n date: \'2016/05/01\',\n count: 5\n}, {\n date: \'2016/05/02\',\n count: 5\n}, {\n date: \'2016/05/03\',\n count: 1\n}, {\n date: \'2016/05/04\',\n count: 11\n}, {\n date: \'2016/05/08\',\n count: 32\n}]);\nvar Demo = function Demo() {\n return /*#__PURE__*/_react["default"].createElement(_reactHeatMap["default"], {\n value: value,\n width: 600,\n startDate: new Date(\'2016/01/01\'),\n rectRender: function rectRender(props, data) {\n // if (!data.count) return \n \n
\n )\n};\nexport default Demo"},224:{name:224,meta:{},code:'"use strict";\n\nfunction _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }\nvar _react = _interopRequireWildcard(require("react"));\nvar _reactHeatMap = _interopRequireDefault(require("@uiw/react-heat-map"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }\nfunction _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nvar value = [{\n date: \'2016/01/11\',\n count: 2\n}].concat(_toConsumableArray(_toConsumableArray(Array(17)).map(function (_, idx) {\n return {\n date: "2016/01/".concat(idx + 10),\n count: idx\n };\n})), _toConsumableArray(_toConsumableArray(Array(17)).map(function (_, idx) {\n return {\n date: "2016/02/".concat(idx + 10),\n count: idx\n };\n})), [{\n date: \'2016/04/12\',\n count: 2\n}, {\n date: \'2016/05/01\',\n count: 5\n}, {\n date: \'2016/05/02\',\n count: 5\n}, {\n date: \'2016/05/03\',\n count: 1\n}, {\n date: \'2016/05/04\',\n count: 11\n}, {\n date: \'2016/05/08\',\n count: 32\n}]);\nvar Demo = function Demo() {\n var _useState = (0, _react.useState)(\'\'),\n _useState2 = _slicedToArray(_useState, 2),\n selected = _useState2[0],\n setSelected = _useState2[1];\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactHeatMap["default"], {\n width: 600,\n value: value,\n startDate: new Date(\'2016/01/01\'),\n rectRender: function rectRender(props, data) {\n if (selected !== \'\') {\n props.opacity = data.date === selected ? 1 : 0.45;\n }\n return /*#__PURE__*/_react["default"].createElement("rect", _extends({}, props, {\n onClick: function onClick() {\n setSelected(data.date === selected ? \'\' : data.date);\n }\n }));\n }\n }));\n};\nreturn Demo;',language:"jsx",value:"import 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) => ({ date: `2016/01/${idx + 10}`, count: idx })),\n ...[...Array(17)].map((_, idx) => ({ 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 = () => {\n const [selected, setSelected] = useState('')\n return (\n \n {\n if (selected !== '') {\n props.opacity = data.date === selected ? 1 : 0.45\n }\n return (\n {\n setSelected(data.date === selected ? '' : data.date);\n }} />\n );\n }}\n />\n
\n )\n};\nexport default Demo"}},source:"HeatMap \u65e5\u5386\u70ed\u56fe\n===\n\x3c!--rehype:style=text-align: center;--\x3e\n\n[](https://github.com/uiwjs/react-heat-map/actions/workflows/ci.yml)\n[](https://www.npmjs.com/package/@uiw/react-heat-map)\n[](https://www.npmjs.com/package/@uiw/react-heat-map)\n[](https://bundlephobia.com/result?p=@uiw/react-heat-map)\n[](https://gitpod.io/#https://github.com/uiwjs/react-codemirror)\n[](https://www.jsdelivr.com/package/npm/@uiw/react-heat-map)\n\x3c!--rehype:style=text-align: center;--\x3e\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\x3c!--rehype:ignore:start--\x3e\n\n[](https://uiwjs.github.io/react-heat-map)\n\n\x3c!--rehype:ignore:end--\x3e\n\n## Install\n\n```bash\n# Not dependent on uiw.\nnpm install @uiw/react-heat-map --save\n```\n\n## Basic Usage\n\nBasic usage example, Please pay warning to the time setting.\n\n\u26a0\ufe0f Example: ~~`2016-01-11`\x3c!--rehype:style=color: red;background-color: #ffd8d8;--\x3e~~ -> `2016/01/11`\x3c!--rehype:style=color: green;background: #a7e4b5;--\x3e, Support `Safari`\x3c!--rehype:style=background-color: #87d499;--\x3e\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) => ({ date: `2016/02/${idx + 10}`, count: idx, content: '' })),\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 = () => {\n return (\n \n
\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: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 = () => {\n return (\n \n setRange(e.target.value)} /> {range}\n
\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) => ({ date: `2016/01/${idx + 10}`, count: idx, })),\n ...[...Array(17)].map((_, idx) => ({ 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 = () => {\n return (\n \n \n
\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) => ({ date: `2016/01/${idx + 10}`, count: idx })),\n ...[...Array(17)].map((_, idx) => ({ 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 = () => {\n const [selected, setSelected] = useState('')\n return (\n \n {\n if (selected !== '') {\n props.opacity = data.date === selected ? 1 : 0.45\n }\n return (\n {\n setSelected(data.date === selected ? '' : data.date);\n }} />\n );\n }}\n />\n
\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` |\xa0\n| rectProps | Grid node attribute settings | `React.SVGProps![](\"https://uiwjs.github.io/react-heat-map/CONTRIBUTORS.svg\")
\n\n\nMade with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).\n\n## License\n\nLicensed under the MIT License.\n"},Ds=["inline","node"],ws=["data-meta"],js=z.Preview,Cs=z.Code,As=z.Toolbar,Ss=function(e){var t,r=e.inline,a=e.node,s=(0,b.Z)(e,Ds),i=(0,n.useRef)(null),o=s,d=o["data-meta"],u=(0,b.Z)(o,ws);if((0,n.useEffect)((function(){if(i.current){var e=i.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(i.current,e)}}),[i]),r||!H(d))return(0,h.jsx)("code",(0,v.Z)({},s));var c=null===(t=a.position)||void 0===t?void 0:t.start.line,l=q(d)||String(c),p=Es.components["".concat(l)];if(l&&"function"===typeof p){var f=Es.data[l].value||"",g=V(d);return(0,h.jsxs)(z,{children:[(0,h.jsx)(js,{children:(0,h.jsx)(p,{})}),(0,h.jsx)(As,{text:f,children:g.title||"Code Example"}),(0,h.jsx)(Cs,{children:(0,h.jsx)("code",(0,v.Z)({},u))})]})}return(0,h.jsx)("code",(0,v.Z)({},u))};function ks(){return(0,h.jsx)(Rs,{style:{maxWidth:920,margin:"0 auto",padding:"30px 10px 0 10px"},disableCopy:!0,rehypePlugins:[xn],source:Es.source,components:{code:Ss}})}var Ts=r(3480),Fs=r(7269),Ps="App_header__G9FVm",_s="App_logo__8q6ZT",Is="App_info__vaSms",Bs="App_app__ozyN1",Os="App_example__uwPPL",Ns="App_tools__iziyx",Ms=[{date:"2016/01/11",count:2,content:""}].concat((0,o.Z)((0,o.Z)(Array(17)).map((function(e,t){return{date:"2016/02/".concat(t+10),count:t,content:""}}))),[{date:"2016/03/02",count:5,content:""},{date:"2016/03/04",count:11,content:""},{date:"2016/03/14",count:31,content:""},{date:"2016/03/16",count:2,content:""},{date:"2016/04/11",count:2,content:""},{date:"2016/05/01",count:5,content:""},{date:"2016/05/02",count:5,content:""},{date:"2016/05/04",count:11,content:""},{date:"2016/05/14",count:31,content:""},{date:"2016/05/16",count:2,content:""},{date:"2016/05/17",count:2,content:""},{date:"2016/05/18",count:2,content:""},{date:"2016/05/19",count:8,content:""},{date:"2016/05/20",count:6,content:""},{date:"2016/05/21",count:41,content:""},{date:"2016/05/22",count:6,content:""},{date:"2016/06/11",count:2,content:""},{date:"2016/07/01",count:5,content:""},{date:"2016/07/02",count:5,content:""},{date:"2016/07/04",count:11,content:""},{date:"2016/07/14",count:31,content:""},{date:"2016/07/16",count:2,content:""},{date:"2016/07/17",count:2,content:""},{date:"2016/07/18",count:2,content:""},{date:"2016/07/19",count:8,content:""},{date:"2016/07/20",count:6,content:""},{date:"2016/07/21",count:41,content:""},{date:"2016/07/22",count:6,content:""}],(0,o.Z)((0,o.Z)(Array(17)).map((function(e,t){return{date:"2016/08/".concat(t+10),count:t,content:""}})))),Ls=[{date:"2016/04/02",count:5,content:""},{date:"2016/04/04",count:11,content:""},{date:"2016/04/14",count:31,content:""},{date:"2016/04/16",count:2,content:""},{date:"2016/04/17",count:2,content:""},{date:"2016/04/18",count:2,content:""},{date:"2016/04/19",count:8,content:""},{date:"2016/04/11",count:2,content:""},{date:"2016/04/01",count:5,content:""},{date:"2016/04/02",count:5,content:""},{date:"2016/04/04",count:11,content:""},{date:"2016/04/14",count:31,content:""},{date:"2016/04/16",count:2,content:""},{date:"2016/04/17",count:2,content:""},{date:"2016/04/18",count:2,content:""},{date:"2016/04/19",count:8,content:""},{date:"2016/04/20",count:6,content:""},{date:"2016/04/21",count:41,content:""},{date:"2016/04/22",count:6,content:""}],Us={0:"rgb(255 255 255 / 25%)",8:"#7BC96F",4:"#C6E48B",12:"#239A3B",32:"#196127"};function zs(){var e=(0,n.useState)(Ms),t=(0,x.Z)(e,2),r=t[0],a=t[1],s=(0,n.useState)(),i=(0,x.Z)(s,2),o=i[0],d=i[1],u=(0,n.useState)(!1),c=(0,x.Z)(u,2),l=c[0],p=c[1],f=(0,n.useState)(!1),g=(0,x.Z)(f,2),m=g[0],y=g[1],b=(0,n.useState)(!1),R=(0,x.Z)(b,2),E=R[0],D=R[1],w=(0,n.useState)(11),j=(0,x.Z)(w,2),C=j[0],A=j[1],S=(0,n.useState)(),k=(0,x.Z)(S,2),T=k[0],F=k[1],P=(0,n.useState)(void 0),_=(0,x.Z)(P,2),I=_[0],B=_[1],O=(0,n.useState)(void 0),N=(0,x.Z)(O,2),M=N[0],L=N[1];return(0,h.jsxs)(n.Fragment,{children:[(0,h.jsx)("div",{className:Os,style:{width:663},children:(0,h.jsx)(Fs.default,{style:{backgroundColor:m?"#000":"#fff",color:m?"#888":"#000"},panelColors:m?Us:void 0,width:663,rectSize:C,legendCellSize:T,weekLabels:I,monthLabels:M,startDate:new Date("2016/01/01"),endDate:l?new Date("2016/6/01"):void 0,value:r,rectProps:{rx:E?5:0,onClick:function(e){d(e.target.dataset.date)}},legendRender:function(e){return(0,h.jsx)("rect",(0,v.Z)((0,v.Z)({},e),{},{rx:E?5:0}))},rectRender:function(e,t){return(0,h.jsx)(Ts.default,{placement:"top",content:"count: ".concat(t.count||0),children:(0,h.jsx)("rect",(0,v.Z)({},e))},e.key)}})}),(0,h.jsxs)("div",{style:{width:663,margin:"0 auto"},className:Ns,children:[(0,h.jsxs)("div",{style:{paddingLeft:10,paddingBottom:20},children:[(0,h.jsx)("button",{onClick:function(){return a(Ms)},children:"Value 1"}),(0,h.jsx)("button",{onClick:function(){return a(Ls)},children:"Value 2"}),(0,h.jsx)("span",{children:o})]}),(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"checkbox",checked:l,onChange:function(e){return p(e.target.checked)}}),"endDate = ",l?"2016/6/01":"undefined"]}),(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"checkbox",checked:m,onChange:function(e){return y(e.target.checked)}}),m?"Dark":"Light"]}),(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"checkbox",checked:E,onChange:function(e){return D(e.target.checked)}}),E?"Circle":"Rect"]}),(0,h.jsxs)("label",{style:{marginTop:15},children:[(0,h.jsx)("input",{type:"radio",name:"weekLabels",checked:void 0===I,onChange:function(e){return B(void 0)}}),"weekLabels = undefined, Default: ",JSON.stringify(["Sun","Mon","Tue","Wed","Thu","Fri","Sat"])]}),(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"radio",name:"weekLabels",checked:!1===I,onChange:function(e){return B(!1)}}),"weekLabels = false"]}),(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"radio",name:"weekLabels",checked:Array.isArray(I),onChange:function(e){return B(["\u65e5","\u4e00","","\u4e09","","\u4e94","\u516d"])}}),"weekLabels = ",JSON.stringify(["\u65e5","\u4e00","","\u4e09","","\u4e94","\u516d"])]}),(0,h.jsxs)("label",{style:{marginTop:15},children:[(0,h.jsx)("input",{type:"radio",name:"monthLabels",checked:void 0===M,onChange:function(e){return L(void 0)}}),"monthLabels = undefined, Default:"," ",JSON.stringify(["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"])]}),(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"radio",name:"monthLabels",checked:!1===M,onChange:function(e){return L(!1)}}),"monthLabels = false"]}),(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"radio",name:"monthLabels",checked:Array.isArray(M),onChange:function(e){return L(["\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d","\u4e03","\u516b","\u4e5d","\u5341","\u5341\u4e00","\u5341\u4e8c"])}}),"monthLabels = ",JSON.stringify(["\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d","\u4e03","\u516b","\u4e5d","\u5341","\u5341\u4e00","\u5341\u4e8c"])]}),(0,h.jsxs)("div",{style:{display:"flex",marginTop:10},children:[(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"radio",name:"rectSize",checked:11===C,onChange:function(e){return A(11)}}),"rectSize = 11"]}),(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"radio",name:"rectSize",checked:12===C,onChange:function(e){return A(12)}}),"rectSize = 12"]}),(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"radio",name:"rectSize",checked:14===C,onChange:function(e){return A(14)}}),"rectSize = 14"]})]}),(0,h.jsx)("div",{style:{display:"flex",marginTop:16},children:(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"number",value:T||"",onChange:function(e){return F(Number(e.target.value)||0)}}),"legendCellSize = ",T]})})]})]})}var Vs=r.p+"static/media/logo.3931a054f5ef8356122965d973d55570.svg",qs=function(){return(0,h.jsxs)("div",{className:Bs,children:[(0,h.jsx)("dark-mode",{permanent:!0,style:{position:"fixed",top:8,left:10,zIndex:10}}),(0,h.jsx)(y,{zIndex:9999,fixed:!0,href:"https://github.com/uiwjs/react-heat-map"}),(0,h.jsxs)("header",{className:Ps,children:[(0,h.jsx)("img",{src:Vs,className:_s,alt:"react logo"}),(0,h.jsx)("p",{className:Is,children:"React component create calendar heatmap to visualize time series data, a la github contribution graph."}),(0,h.jsx)(zs,{})]}),(0,h.jsx)(ks,{})]})},Hs=document.getElementById("root");(0,a.s)(Hs).render((0,h.jsx)(qs,{}))},7269:function(e,t,r){"use strict";r.r(t),r.d(t,{default:function(){return x}});var a=r(5773),n=r(808),s=r(8573),i=r(649),o=r(1026),d=r(4760),u=function(e){var t=e.weekLabels,r=void 0===t?[]:t,a=e.rectSize,n=void 0===a?0:a,o=e.topPad,u=void 0===o?0:o,c=e.space,l=void 0===c?0:c;return(0,s.useMemo)((function(){return(0,d.jsx)(s.Fragment,{children:(0,i.Z)(Array(7)).map((function(e,t){return r&&r[t]?(0,d.jsx)("text",{x:15,y:u,dy:(t+1)*(n+l)-5,children:r[t]},t):null}))})}),[n,l,u,r])},c=864e5;function l(e){return e instanceof Date&&!isNaN(e.getTime())}function p(e){return e.getFullYear()+"/"+(e.getMonth()+1)+"/"+e.getDate()}var f=function(e){var t=e.monthLabels,r=void 0===t?[]:t,a=e.rectSize,n=void 0===a?0:a,o=e.space,u=void 0===o?0:o,l=e.leftPad,p=void 0===l?0:l,f=e.colNum,g=void 0===f?0:f,h=e.startDate,m=(0,s.useMemo)((function(){return!1===r||g<1?[]:(0,i.Z)(Array(7*g)).map((function(e,t){if(t/7%1===0){var a=new Date(h.getTime()+t*c),n=a.getMonth();return{col:t/7,index:t,month:n,day:a.getDate(),monthStr:r[n],date:a}}return null})).filter(Boolean).filter((function(e,t,r){return r[t-1]&&r[t-1].month!==e.month}))}),[g,r,h]);return(0,s.useMemo)((function(){return(0,d.jsx)(s.Fragment,{children:(0,i.Z)(m).map((function(e,t){return(0,d.jsx)("text",{"data-size":n,x:p+u+u,y:15,dx:e.col*(n+u),textAnchor:"start",children:e.monthStr},t)}))})}),[m,p,n,u])},g=function(e){return(0,d.jsx)("rect",(0,a.Z)({},e))},h=["panelColors","leftPad","topPad","space","rectSize","legendCellSize","legendRender"];function m(e){var t=e.panelColors,r=e.leftPad,i=void 0===r?0:r,o=e.topPad,u=void 0===o?0:o,c=(e.space,e.rectSize),l=void 0===c?0:c,p=e.legendCellSize,f=void 0===p?0:p,m=e.legendRender,y=(0,n.Z)(e,h),v=f||l;return(0,s.useMemo)((function(){return(0,d.jsx)(s.Fragment,{children:Object.keys(t||{}).map((function(e,r){var n=(0,a.Z)({},y,{key:r,x:(v+1)*r+i,y:u+8*l+6,fill:t[Number(e)],width:v,height:v});return m?m(n):(0,d.jsx)(g,(0,a.Z)({},n))}))})}),[t,y,v,i,u,l,m])}var y=["rectSize","legendCellSize","space","startDate","endDate","rectProps","rectRender","legendRender","value","weekLabels","monthLabels","panelColors"];function v(e){var t=e||{},r=t.rectSize,h=void 0===r?11:r,v=t.legendCellSize,b=void 0===v?11:v,x=t.space,R=void 0===x?2:x,E=t.startDate,D=void 0===E?new Date:E,w=t.endDate,j=t.rectProps,C=t.rectRender,A=t.legendRender,S=t.value,k=void 0===S?[]:S,T=t.weekLabels,F=void 0===T?["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]:T,P=t.monthLabels,_=void 0===P?["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]:P,I=t.panelColors,B=void 0===I?{0:"#EBEDF0",8:"#7BC96F",4:"#C6E48B",12:"#239A3B",32:"#196127"}:I,O=(0,n.Z)(t,y),N=(0,s.useState)(0),M=(0,o.Z)(N,2),L=M[0],U=M[1],z=(0,s.useState)(F?28:5),V=(0,o.Z)(z,2),q=V[0],H=V[1],G=(0,s.useState)(_?20:5),W=(0,o.Z)(G,2),K=W[0],X=W[1],J=s.createRef(),Y=(0,s.useMemo)((function(){return void 0===(e=Object.keys(B).map((function(e){return parseInt(e,10)})))&&(e=[]),e.sort((function(e,t){return e\n
\n )\n};\n\nexport default Demo"},64:{name:64,meta:{},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _reactHeatMap = _interopRequireDefault(require(\"@uiw/react-heat-map\"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nvar value = [{\n date: '2016/01/11',\n count: 2\n}, {\n date: '2016/04/12',\n count: 2\n}, {\n date: '2016/05/01',\n count: 5\n}, {\n date: '2016/05/02',\n count: 5\n}, {\n date: '2016/05/03',\n count: 1\n}, {\n date: '2016/05/04',\n count: 11\n}, {\n date: '2016/05/08',\n count: 32\n}];\nvar Demo = function Demo() {\n return /*#__PURE__*/_react[\"default\"].createElement(_reactHeatMap[\"default\"], {\n value: value,\n width: 600,\n style: {\n color: '#ad001d',\n '--rhm-rect-active': 'red'\n },\n startDate: new Date('2016/01/01'),\n panelColors: {\n 0: '#f4decd',\n 2: '#e4b293',\n 4: '#d48462',\n 10: '#c2533a',\n 20: '#ad001d',\n 30: '#000'\n }\n });\n};\nreturn Demo;",language:"jsx",value:"import 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: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 = () => {\n return (\n \n setRange(e.target.value)} /> {range}\n
\n )\n};\nexport default Demo"},144:{name:144,meta:{},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _reactTooltip = _interopRequireDefault(require("@uiw/react-tooltip"));\nvar _reactHeatMap = _interopRequireDefault(require("@uiw/react-heat-map"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nvar value = [{\n date: \'2016/01/11\',\n count: 2\n}].concat(_toConsumableArray(_toConsumableArray(Array(17)).map(function (_, idx) {\n return {\n date: "2016/01/".concat(idx + 10),\n count: idx\n };\n})), _toConsumableArray(_toConsumableArray(Array(17)).map(function (_, idx) {\n return {\n date: "2016/02/".concat(idx + 10),\n count: idx\n };\n})), [{\n date: \'2016/04/12\',\n count: 2\n}, {\n date: \'2016/05/01\',\n count: 5\n}, {\n date: \'2016/05/02\',\n count: 5\n}, {\n date: \'2016/05/03\',\n count: 1\n}, {\n date: \'2016/05/04\',\n count: 11\n}, {\n date: \'2016/05/08\',\n count: 32\n}]);\nvar Demo = function Demo() {\n return /*#__PURE__*/_react["default"].createElement(_reactHeatMap["default"], {\n value: value,\n width: 600,\n startDate: new Date(\'2016/01/01\'),\n rectRender: function rectRender(props, data) {\n // if (!data.count) return \n \n
\n )\n};\nexport default Demo"},225:{name:225,meta:{},code:'"use strict";\n\nfunction _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }\nvar _react = _interopRequireWildcard(require("react"));\nvar _reactHeatMap = _interopRequireDefault(require("@uiw/react-heat-map"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }\nfunction _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nvar value = [{\n date: \'2016/01/11\',\n count: 2\n}].concat(_toConsumableArray(_toConsumableArray(Array(17)).map(function (_, idx) {\n return {\n date: "2016/01/".concat(idx + 10),\n count: idx\n };\n})), _toConsumableArray(_toConsumableArray(Array(17)).map(function (_, idx) {\n return {\n date: "2016/02/".concat(idx + 10),\n count: idx\n };\n})), [{\n date: \'2016/04/12\',\n count: 2\n}, {\n date: \'2016/05/01\',\n count: 5\n}, {\n date: \'2016/05/02\',\n count: 5\n}, {\n date: \'2016/05/03\',\n count: 1\n}, {\n date: \'2016/05/04\',\n count: 11\n}, {\n date: \'2016/05/08\',\n count: 32\n}]);\nvar Demo = function Demo() {\n var _useState = (0, _react.useState)(\'\'),\n _useState2 = _slicedToArray(_useState, 2),\n selected = _useState2[0],\n setSelected = _useState2[1];\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactHeatMap["default"], {\n width: 600,\n value: value,\n startDate: new Date(\'2016/01/01\'),\n rectRender: function rectRender(props, data) {\n if (selected !== \'\') {\n props.opacity = data.date === selected ? 1 : 0.45;\n }\n return /*#__PURE__*/_react["default"].createElement("rect", _extends({}, props, {\n onClick: function onClick() {\n setSelected(data.date === selected ? \'\' : data.date);\n }\n }));\n }\n }));\n};\nreturn Demo;',language:"jsx",value:"import 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) => ({ date: `2016/01/${idx + 10}`, count: idx })),\n ...[...Array(17)].map((_, idx) => ({ 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 = () => {\n const [selected, setSelected] = useState('')\n return (\n \n {\n if (selected !== '') {\n props.opacity = data.date === selected ? 1 : 0.45\n }\n return (\n {\n setSelected(data.date === selected ? '' : data.date);\n }} />\n );\n }}\n />\n
\n )\n};\nexport default Demo"}},source:"HeatMap \u65e5\u5386\u70ed\u56fe\n===\n\x3c!--rehype:style=text-align: center;--\x3e\n\n[](https://github.com/uiwjs/react-heat-map/actions/workflows/ci.yml)\n[](https://www.npmjs.com/package/@uiw/react-heat-map)\n[](https://www.npmjs.com/package/@uiw/react-heat-map)\n[](https://bundlephobia.com/result?p=@uiw/react-heat-map)\n[](https://gitpod.io/#https://github.com/uiwjs/react-codemirror)\n[](https://www.jsdelivr.com/package/npm/@uiw/react-heat-map)\n\x3c!--rehype:style=text-align: center;--\x3e\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\x3c!--rehype:ignore:start--\x3e\n\n[](https://uiwjs.github.io/react-heat-map)\n\n\x3c!--rehype:ignore:end--\x3e\n\n## Install\n\n```bash\n# Not dependent on uiw.\nnpm install @uiw/react-heat-map --save\n```\n\n## Basic Usage\n\nBasic usage example, Please pay warning to the time setting.\n\n\u26a0\ufe0f Example: ~~`2016-01-11`\x3c!--rehype:style=color: red;background-color: #ffd8d8;--\x3e~~ -> `2016/01/11`\x3c!--rehype:style=color: green;background: #a7e4b5;--\x3e, Support `Safari`\x3c!--rehype:style=background-color: #87d499;--\x3e\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) => ({ date: `2016/02/${idx + 10}`, count: idx, content: '' })),\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 = () => {\n return (\n \n
\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: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 = () => {\n return (\n \n setRange(e.target.value)} /> {range}\n
\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) => ({ date: `2016/01/${idx + 10}`, count: idx, })),\n ...[...Array(17)].map((_, idx) => ({ 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 = () => {\n return (\n \n \n
\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) => ({ date: `2016/01/${idx + 10}`, count: idx })),\n ...[...Array(17)].map((_, idx) => ({ 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 = () => {\n const [selected, setSelected] = useState('')\n return (\n \n {\n if (selected !== '') {\n props.opacity = data.date === selected ? 1 : 0.45\n }\n return (\n {\n setSelected(data.date === selected ? '' : data.date);\n }} />\n );\n }}\n />\n
\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` |\xa0\n| rectProps | Grid node attribute settings | `React.SVGProps\n\n\nMade with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).\n\n## License\n\nLicensed under the MIT License.\n"},Ds=["inline","node"],ws=["data-meta"],js=z.Preview,Cs=z.Code,As=z.Toolbar,Ss=function(e){var t,r=e.inline,a=e.node,s=(0,b.Z)(e,Ds),i=(0,n.useRef)(null),o=s,d=o["data-meta"],u=(0,b.Z)(o,ws);if((0,n.useEffect)((function(){if(i.current){var e=i.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(i.current,e)}}),[i]),r||!H(d))return(0,h.jsx)("code",(0,v.Z)({},s));var c=null===(t=a.position)||void 0===t?void 0:t.start.line,l=q(d)||String(c),p=Es.components["".concat(l)];if(l&&"function"===typeof p){var f=Es.data[l].value||"",g=V(d);return(0,h.jsxs)(z,{children:[(0,h.jsx)(js,{children:(0,h.jsx)(p,{})}),(0,h.jsx)(As,{text:f,children:g.title||"Code Example"}),(0,h.jsx)(Cs,{children:(0,h.jsx)("code",(0,v.Z)({},u))})]})}return(0,h.jsx)("code",(0,v.Z)({},u))};function ks(){return(0,h.jsx)(Rs,{style:{maxWidth:920,margin:"0 auto",padding:"30px 10px 0 10px"},disableCopy:!0,rehypePlugins:[xn],source:Es.source,components:{code:Ss}})}var Ts=r(3480),Fs=r(7269),Ps="App_header__G9FVm",_s="App_logo__8q6ZT",Is="App_info__vaSms",Bs="App_app__ozyN1",Os="App_example__uwPPL",Ns="App_tools__iziyx",Ms=[{date:"2016/01/11",count:2,content:""}].concat((0,o.Z)((0,o.Z)(Array(17)).map((function(e,t){return{date:"2016/02/".concat(t+10),count:t,content:""}}))),[{date:"2016/03/02",count:5,content:""},{date:"2016/03/04",count:11,content:""},{date:"2016/03/14",count:31,content:""},{date:"2016/03/16",count:2,content:""},{date:"2016/04/11",count:2,content:""},{date:"2016/05/01",count:5,content:""},{date:"2016/05/02",count:5,content:""},{date:"2016/05/04",count:11,content:""},{date:"2016/05/14",count:31,content:""},{date:"2016/05/16",count:2,content:""},{date:"2016/05/17",count:2,content:""},{date:"2016/05/18",count:2,content:""},{date:"2016/05/19",count:8,content:""},{date:"2016/05/20",count:6,content:""},{date:"2016/05/21",count:41,content:""},{date:"2016/05/22",count:6,content:""},{date:"2016/06/11",count:2,content:""},{date:"2016/07/01",count:5,content:""},{date:"2016/07/02",count:5,content:""},{date:"2016/07/04",count:11,content:""},{date:"2016/07/14",count:31,content:""},{date:"2016/07/16",count:2,content:""},{date:"2016/07/17",count:2,content:""},{date:"2016/07/18",count:2,content:""},{date:"2016/07/19",count:8,content:""},{date:"2016/07/20",count:6,content:""},{date:"2016/07/21",count:41,content:""},{date:"2016/07/22",count:6,content:""}],(0,o.Z)((0,o.Z)(Array(17)).map((function(e,t){return{date:"2016/08/".concat(t+10),count:t,content:""}})))),Ls=[{date:"2016/04/02",count:5,content:""},{date:"2016/04/04",count:11,content:""},{date:"2016/04/14",count:31,content:""},{date:"2016/04/16",count:2,content:""},{date:"2016/04/17",count:2,content:""},{date:"2016/04/18",count:2,content:""},{date:"2016/04/19",count:8,content:""},{date:"2016/04/11",count:2,content:""},{date:"2016/04/01",count:5,content:""},{date:"2016/04/02",count:5,content:""},{date:"2016/04/04",count:11,content:""},{date:"2016/04/14",count:31,content:""},{date:"2016/04/16",count:2,content:""},{date:"2016/04/17",count:2,content:""},{date:"2016/04/18",count:2,content:""},{date:"2016/04/19",count:8,content:""},{date:"2016/04/20",count:6,content:""},{date:"2016/04/21",count:41,content:""},{date:"2016/04/22",count:6,content:""}],Us={0:"rgb(255 255 255 / 25%)",8:"#7BC96F",4:"#C6E48B",12:"#239A3B",32:"#ff7b00"};function zs(){var e=(0,n.useState)(Ms),t=(0,x.Z)(e,2),r=t[0],a=t[1],s=(0,n.useState)(),i=(0,x.Z)(s,2),o=i[0],d=i[1],u=(0,n.useState)(!1),c=(0,x.Z)(u,2),l=c[0],p=c[1],f=(0,n.useState)(!1),g=(0,x.Z)(f,2),m=g[0],y=g[1],b=(0,n.useState)(!1),R=(0,x.Z)(b,2),E=R[0],D=R[1],w=(0,n.useState)(11),j=(0,x.Z)(w,2),C=j[0],A=j[1],S=(0,n.useState)(),k=(0,x.Z)(S,2),T=k[0],F=k[1],P=(0,n.useState)(void 0),_=(0,x.Z)(P,2),I=_[0],B=_[1],O=(0,n.useState)(void 0),N=(0,x.Z)(O,2),M=N[0],L=N[1];return(0,h.jsxs)(n.Fragment,{children:[(0,h.jsx)("div",{className:Os,style:{width:663},children:(0,h.jsx)(Fs.default,{style:{backgroundColor:m?"#000":"#fff",color:m?"#888":"#000"},panelColors:m?Us:void 0,width:663,rectSize:C,legendCellSize:T,weekLabels:I,monthLabels:M,startDate:new Date("2016/01/01"),endDate:l?new Date("2016/6/01"):void 0,value:r,rectProps:{rx:E?5:0,onClick:function(e){d(e.target.dataset.date)}},legendRender:function(e){return(0,h.jsx)("rect",(0,v.Z)((0,v.Z)({},e),{},{rx:E?5:0}))},rectRender:function(e,t){return(0,h.jsx)(Ts.default,{placement:"top",content:"count: ".concat(t.count||0),children:(0,h.jsx)("rect",(0,v.Z)({},e))})}})}),(0,h.jsxs)("div",{style:{width:663,margin:"0 auto"},className:Ns,children:[(0,h.jsxs)("div",{style:{paddingLeft:10,paddingBottom:20},children:[(0,h.jsx)("button",{onClick:function(){return a(Ms)},children:"Value 1"}),(0,h.jsx)("button",{onClick:function(){return a(Ls)},children:"Value 2"}),(0,h.jsx)("span",{children:o})]}),(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"checkbox",checked:l,onChange:function(e){return p(e.target.checked)}}),"endDate = ",l?"2016/6/01":"undefined"]}),(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"checkbox",checked:m,onChange:function(e){return y(e.target.checked)}}),m?"Dark":"Light"]}),(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"checkbox",checked:E,onChange:function(e){return D(e.target.checked)}}),E?"Circle":"Rect"]}),(0,h.jsxs)("label",{style:{marginTop:15},children:[(0,h.jsx)("input",{type:"radio",name:"weekLabels",checked:void 0===I,onChange:function(e){return B(void 0)}}),"weekLabels = undefined, Default: ",JSON.stringify(["Sun","Mon","Tue","Wed","Thu","Fri","Sat"])]}),(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"radio",name:"weekLabels",checked:!1===I,onChange:function(e){return B(!1)}}),"weekLabels = false"]}),(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"radio",name:"weekLabels",checked:Array.isArray(I),onChange:function(e){return B(["\u65e5","\u4e00","","\u4e09","","\u4e94","\u516d"])}}),"weekLabels = ",JSON.stringify(["\u65e5","\u4e00","","\u4e09","","\u4e94","\u516d"])]}),(0,h.jsxs)("label",{style:{marginTop:15},children:[(0,h.jsx)("input",{type:"radio",name:"monthLabels",checked:void 0===M,onChange:function(e){return L(void 0)}}),"monthLabels = undefined, Default:"," ",JSON.stringify(["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"])]}),(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"radio",name:"monthLabels",checked:!1===M,onChange:function(e){return L(!1)}}),"monthLabels = false"]}),(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"radio",name:"monthLabels",checked:Array.isArray(M),onChange:function(e){return L(["\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d","\u4e03","\u516b","\u4e5d","\u5341","\u5341\u4e00","\u5341\u4e8c"])}}),"monthLabels = ",JSON.stringify(["\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d","\u4e03","\u516b","\u4e5d","\u5341","\u5341\u4e00","\u5341\u4e8c"])]}),(0,h.jsxs)("div",{style:{display:"flex",marginTop:10},children:[(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"radio",name:"rectSize",checked:11===C,onChange:function(e){return A(11)}}),"rectSize = 11"]}),(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"radio",name:"rectSize",checked:12===C,onChange:function(e){return A(12)}}),"rectSize = 12"]}),(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"radio",name:"rectSize",checked:14===C,onChange:function(e){return A(14)}}),"rectSize = 14"]})]}),(0,h.jsx)("div",{style:{display:"flex",marginTop:16},children:(0,h.jsxs)("label",{children:[(0,h.jsx)("input",{type:"number",value:T||"",onChange:function(e){return F(Number(e.target.value)||0)}}),"legendCellSize = ",T]})})]})]})}var Vs=r.p+"static/media/logo.3931a054f5ef8356122965d973d55570.svg",qs=function(){return(0,h.jsxs)("div",{className:Bs,children:[(0,h.jsx)("dark-mode",{permanent:!0,style:{position:"fixed",top:8,left:10,zIndex:10}}),(0,h.jsx)(y,{zIndex:9999,fixed:!0,href:"https://github.com/uiwjs/react-heat-map"}),(0,h.jsxs)("header",{className:Ps,children:[(0,h.jsx)("img",{src:Vs,className:_s,alt:"react logo"}),(0,h.jsx)("p",{className:Is,children:"React component create calendar heatmap to visualize time series data, a la github contribution graph."}),(0,h.jsx)(zs,{})]}),(0,h.jsx)(ks,{})]})},Hs=document.getElementById("root");(0,a.s)(Hs).render((0,h.jsx)(qs,{}))},7269:function(e,t,r){"use strict";r.r(t),r.d(t,{default:function(){return E}});var a=r(5773),n=r(808),s=r(8573),i=r(649),o=r(1026),d=r(4760),u={textAnchor:"middle",fontSize:"inherit",fill:"currentColor"},c=function(e){var t=e.weekLabels,r=void 0===t?[]:t,a=e.rectSize,n=void 0===a?0:a,o=e.topPad,c=void 0===o?0:o,l=e.space,p=void 0===l?0:l;return(0,s.useMemo)((function(){return(0,d.jsx)(s.Fragment,{children:(0,i.Z)(Array(7)).map((function(e,t){return r&&r[t]?(0,d.jsx)("text",{className:"w-heatmap-week",x:15,y:c,dy:(t+1)*(n+p)-5,style:u,children:r[t]},t):null}))})}),[n,p,c,r])},l=864e5;function p(e){return e instanceof Date&&!isNaN(e.getTime())}function f(e){return e.getFullYear()+"/"+(e.getMonth()+1)+"/"+e.getDate()}var g=function(e){var t=e.monthLabels,r=void 0===t?[]:t,a=e.rectSize,n=void 0===a?0:a,o=e.space,c=void 0===o?0:o,p=e.leftPad,f=void 0===p?0:p,g=e.colNum,h=void 0===g?0:g,m=e.startDate,y=(0,s.useMemo)((function(){return!1===r||h<1?[]:(0,i.Z)(Array(7*h)).map((function(e,t){if(t/7%1===0){var a=new Date(m.getTime()+t*l),n=a.getMonth();return{col:t/7,index:t,month:n,day:a.getDate(),monthStr:r[n],date:a}}return null})).filter(Boolean).filter((function(e,t,r){return r[t-1]&&r[t-1].month!==e.month}))}),[h,r,m]);return(0,s.useMemo)((function(){return(0,d.jsx)(s.Fragment,{children:(0,i.Z)(y).map((function(e,t){return(0,d.jsx)("text",{"data-size":n,x:f+c+c,y:15,dx:e.col*(n+c),textAnchor:"start",style:u,children:e.monthStr},t)}))})}),[y,f,n,c])},h=["style","value","render","key"],m=function(e){var t=e.style,r=e.value,i=e.render,o=(0,n.Z)(e,h),u=(0,a.Z)({},o,{style:(0,a.Z)({display:"block",cursor:"pointer"},t)});if(i&&"function"===typeof i){var c=i((0,a.Z)({},u),r);if(c&&s.isValidElement(c))return c}return(0,d.jsx)("rect",(0,a.Z)({},u))},y=["panelColors","leftPad","topPad","space","rectSize","legendCellSize","legendRender"];function v(e){var t=e.panelColors,r=e.leftPad,i=void 0===r?0:r,o=e.topPad,u=void 0===o?0:o,c=(e.space,e.rectSize),l=void 0===c?0:c,p=e.legendCellSize,f=void 0===p?0:p,g=e.legendRender,h=(0,n.Z)(e,y),v=f||l;return(0,s.useMemo)((function(){return(0,d.jsx)(s.Fragment,{children:Object.keys(t||{}).map((function(e,r){var n=(0,a.Z)({},h,{key:r,x:(v+1)*r+i,y:u+8*l+6,fill:t[Number(e)],width:v,height:v});return g?g(n):(0,d.jsx)(m,(0,a.Z)({},n))}))})}),[t,h,v,i,u,l,g])}var b=["rectSize","legendCellSize","space","startDate","endDate","rectProps","rectRender","legendRender","value","weekLabels","monthLabels","panelColors","style"];function x(e){var t=e||{},r=t.rectSize,u=void 0===r?11:r,h=t.legendCellSize,y=void 0===h?11:h,x=t.space,R=void 0===x?2:x,E=t.startDate,D=void 0===E?new Date:E,w=t.endDate,j=t.rectProps,C=t.rectRender,A=t.legendRender,S=t.value,k=void 0===S?[]:S,T=t.weekLabels,F=void 0===T?["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]:T,P=t.monthLabels,_=void 0===P?["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]:P,I=t.panelColors,B=void 0===I?{0:"var(--rhm-rect, #EBEDF0)",8:"#7BC96F",4:"#C6E48B",12:"#239A3B",32:"#196127"}:I,O=t.style,N=(0,n.Z)(t,b),M=(0,s.useState)(0),L=(0,o.Z)(M,2),U=L[0],z=L[1],V=(0,s.useState)(F?28:5),q=(0,o.Z)(V,2),H=q[0],G=q[1],W=(0,s.useState)(_?20:5),K=(0,o.Z)(W,2),X=K[0],J=K[1],Y=s.createRef(),$=(0,s.useMemo)((function(){return void 0===(e=Object.keys(B).map((function(e){return parseInt(e,10)})))&&(e=[]),e.sort((function(e,t){return e