\n
\n )\n};\n\nexport default Demo"},68:{name:68,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"},148:{name:148,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"},229:{name:229,meta:{},code:'"use strict";\n\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\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| monthPlacement | position of month labels | `'top' | 'bottom'` | `top` |\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",headings:[],headingsList:[]},ac=r(669),nc=r(8409),sc=r(3287),ic=Gt.div(Zd||(Zd=(0,ac.Z)(["\n background-color: #fff;\n border-radius: 5px;\n box-shadow: 0 0 0 1px rgb(16 22 26 / 10%), 0 0 0 rgb(16 22 26 / 0%), 0 1px 1px rgb(16 22 26 / 20%);\n margin: 0 auto;\n margin-top: 70px;\n width: 663px;\n svg {\n border-radius: 5px;\n }\n"]))),oc=Gt.div(Qd||(Qd=(0,ac.Z)(["\n user-select: none;\n font-size: 12px;\n margin-top: 10px !important;\n padding: 10px;\n padding-left: 0px;\n border-radius: 5px;\n width: 663px;\n margin: 0 auto;\n label {\n display: flex;\n align-items: center;\n input {\n margin-right: 5px;\n margin-left: 10px;\n }\n }\n"]))),dc=Gt.div(ec||(ec=(0,ac.Z)(["\n display: flex;\n flex-direction: column;\n"]))),cc=[{date:"2016/01/11",count:2,content:""}].concat((0,Kt.Z)((0,Kt.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,Kt.Z)((0,Kt.Z)(Array(17)).map((function(e,t){return{date:"2016/08/".concat(t+10),count:t,content:""}})))),lc=[{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:""}],uc={0:"rgb(255 255 255 / 25%)",8:"#7BC96F",4:"#C6E48B",12:"#239A3B",32:"#ff7b00"};function pc(){var e=(0,o.useState)(cc),t=(0,nr.Z)(e,2),r=t[0],a=t[1],n=(0,o.useState)(),s=(0,nr.Z)(n,2),i=s[0],d=s[1],c=(0,o.useState)(!1),l=(0,nr.Z)(c,2),u=l[0],p=l[1],f=(0,o.useState)(!1),g=(0,nr.Z)(f,2),h=g[0],m=g[1],y=(0,o.useState)(!1),v=(0,nr.Z)(y,2),b=v[0],x=v[1],R=(0,o.useState)(11),E=(0,nr.Z)(R,2),w=E[0],j=E[1],S=(0,o.useState)("top"),T=(0,nr.Z)(S,2),A=T[0],k=T[1],C=(0,o.useState)(),P=(0,nr.Z)(C,2),D=P[0],_=P[1],I=(0,o.useState)(void 0),O=(0,nr.Z)(I,2),N=O[0],F=O[1],B=(0,o.useState)(void 0),L=(0,nr.Z)(B,2),M=L[0],U=L[1];return(0,tr.jsxs)(dc,{children:[(0,tr.jsx)(ic,{children:(0,tr.jsx)(sc.default,{style:{backgroundColor:h?"#000":"#fff",color:h?"#888":"#000"},panelColors:h?uc:void 0,width:663,rectSize:w,legendCellSize:D,weekLabels:N,monthLabels:M,startDate:new Date("2016/01/01"),endDate:u?new Date("2016/6/01"):void 0,monthPlacement:A,value:r,rectProps:{rx:b?5:0,onClick:function(e){d(e.target.dataset.date)}},legendRender:function(e){return(0,tr.jsx)("rect",(0,Vr.Z)((0,Vr.Z)({},e),{},{rx:b?5:0}))},rectRender:function(e,t){return(0,tr.jsx)(nc.default,{placement:"top",content:"count: ".concat(t.count||0),children:(0,tr.jsx)("rect",(0,Vr.Z)({},e))})}})}),(0,tr.jsxs)(oc,{children:[(0,tr.jsxs)("div",{style:{paddingLeft:10,paddingBottom:20},children:[(0,tr.jsx)("button",{onClick:function(){return a(cc)},children:"Value 1"}),(0,tr.jsx)("button",{onClick:function(){return a(lc)},children:"Value 2"}),(0,tr.jsx)("span",{children:i})]}),(0,tr.jsxs)("label",{children:[(0,tr.jsx)("input",{type:"checkbox",checked:u,onChange:function(e){return p(e.target.checked)}}),"endDate = ",u?"2016/6/01":"undefined"]}),(0,tr.jsxs)("label",{children:[(0,tr.jsx)("input",{type:"checkbox",checked:h,onChange:function(e){return m(e.target.checked)}}),h?"Dark":"Light"]}),(0,tr.jsxs)("label",{children:[(0,tr.jsx)("input",{type:"checkbox",checked:b,onChange:function(e){return x(e.target.checked)}}),b?"Circle":"Rect"]}),(0,tr.jsxs)("label",{style:{marginTop:15},children:[(0,tr.jsx)("input",{type:"radio",name:"weekLabels",checked:void 0===N,onChange:function(e){return F(void 0)}}),"weekLabels = undefined, Default: ",JSON.stringify(["Sun","Mon","Tue","Wed","Thu","Fri","Sat"])]}),(0,tr.jsxs)("label",{children:[(0,tr.jsx)("input",{type:"radio",name:"weekLabels",checked:!1===N,onChange:function(e){return F(!1)}}),"weekLabels = false"]}),(0,tr.jsxs)("label",{children:[(0,tr.jsx)("input",{type:"radio",name:"weekLabels",checked:Array.isArray(N),onChange:function(e){return F(["\u65e5","\u4e00","","\u4e09","","\u4e94","\u516d"])}}),"weekLabels = ",JSON.stringify(["\u65e5","\u4e00","","\u4e09","","\u4e94","\u516d"])]}),(0,tr.jsxs)("label",{style:{marginTop:15},children:[(0,tr.jsx)("input",{type:"radio",name:"monthLabels",checked:void 0===M,onChange:function(e){return U(void 0)}}),"monthLabels = undefined, Default:"," ",JSON.stringify(["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"])]}),(0,tr.jsxs)("label",{children:[(0,tr.jsx)("input",{type:"radio",name:"monthLabels",checked:!1===M,onChange:function(e){return U(!1)}}),"monthLabels = false"]}),(0,tr.jsxs)("label",{children:[(0,tr.jsx)("input",{type:"radio",name:"monthLabels",checked:Array.isArray(M),onChange:function(e){return U(["\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,tr.jsxs)("div",{style:{display:"flex",marginTop:10},children:[(0,tr.jsxs)("label",{children:[(0,tr.jsx)("input",{type:"radio",name:"rectSize",checked:11===w,onChange:function(e){return j(11)}}),"rectSize = 11"]}),(0,tr.jsxs)("label",{children:[(0,tr.jsx)("input",{type:"radio",name:"rectSize",checked:12===w,onChange:function(e){return j(12)}}),"rectSize = 12"]}),(0,tr.jsxs)("label",{children:[(0,tr.jsx)("input",{type:"radio",name:"rectSize",checked:14===w,onChange:function(e){return j(14)}}),"rectSize = 14"]})]}),(0,tr.jsxs)("div",{style:{display:"flex",marginTop:16},children:[(0,tr.jsx)("label",{children:(0,tr.jsxs)("select",{value:A,onChange:function(e){return k(e.target.value)},children:[(0,tr.jsx)("option",{value:"top",children:"monthPlacement = top"}),(0,tr.jsx)("option",{value:"bottom",children:"monthPlacement = bottom"})]})}),(0,tr.jsxs)("label",{children:[(0,tr.jsx)("input",{type:"number",value:D||"",onChange:function(e){return _(Number(e.target.value)||0)}}),"legendCellSize = ",D]})]})]})]})}var fc=tc.Github,gc=tc.Example,hc=document.getElementById("root");(0,a.s)(hc).render((0,tr.jsxs)(tc,{source:rc.source,components:rc.components,data:rc.data,title:"HeatMap for React",description:"React component create calendar heatmap to visualize time series data, a la github contribution graph.",version:"v".concat("2.2.0"),children:[(0,tr.jsx)(fc,{href:"https://github.com/uiwjs/react-heat-map"}),(0,tr.jsx)(gc,{children:(0,tr.jsx)(pc,{})})]}))},3287:function(e,t,r){"use strict";r.r(t),r.d(t,{default:function(){return w}});var a=r(5773),n=r(808),s=r(8573),i=r(1026),o=r(649),d=r(4760),c={textAnchor:"middle",fontSize:"inherit",fill:"currentColor"},l=function(e){var t=e.weekLabels,r=void 0===t?[]:t,a=e.rectSize,n=void 0===a?0:a,i=e.topPad,l=void 0===i?0:i,u=e.space,p=void 0===u?0:u;return(0,s.useMemo)((function(){return(0,d.jsx)(s.Fragment,{children:(0,o.Z)(Array(7)).map((function(e,t){return r&&r[t]?(0,d.jsx)("text",{className:"w-heatmap-week",x:15,y:l,dy:(t+1)*(n+p)-5,style:c,children:r[t]},t):null}))})}),[n,p,l,r])},u=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,i=e.space,l=void 0===i?0:i,p=e.leftPad,f=void 0===p?0:p,g=e.colNum,h=void 0===g?0:g,m=e.rectY,y=void 0===m?15:m,v=e.startDate,b=(0,s.useMemo)((function(){return!1===r||h<1?[]:(0,o.Z)(Array(7*h)).map((function(e,t){if(t/7%1===0){var a=new Date(v.getTime()+t*u),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,v]);return(0,d.jsx)(s.Fragment,{children:(0,o.Z)(b).map((function(e,t){return(0,d.jsx)("text",{"data-size":n,x:f+l+l,y:y,dx:e.col*(n+l),textAnchor:"start",style:c,children:e.monthStr},t)}))})},h=["style","value","render","key"],m=function(e){var t=e.style,r=e.value,i=e.render,o=(0,n.Z)(e,h),c=(0,a.Z)({},o,{style:(0,a.Z)({display:"block",cursor:"pointer"},t)});if(i&&"function"===typeof i){var l=i((0,a.Z)({},c),r);if(l&&s.isValidElement(l))return l}return(0,d.jsx)("rect",(0,a.Z)({},c))},y=["panelColors","leftPad","topPad","rectY","space","rectSize","legendCellSize","legendRender"];function v(e){var t=e.panelColors,r=e.leftPad,i=void 0===r?0:r,o=(e.topPad,e.rectY),c=void 0===o?15:o,l=(e.space,e.rectSize),u=void 0===l?0:l,p=e.legendCellSize,f=void 0===p?0:p,g=e.legendRender,h=(0,n.Z)(e,y),v=f||u;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:c,fill:t[Number(e)],width:v,height:v});return g?g(n):(0,d.jsx)(m,(0,a.Z)({},n))}))})}),[t,h,v,c,i,u,g])}var b=function(e){var t=e.transform,r=e.gridNum,n=void 0===r?0:r,i=(e.startY,e.panelColors),c=void 0===i?{}:i,l=e.initStartDate,g=e.space,h=void 0===g?2:g,y=e.value,v=void 0===y?[]:y,b=e.rectSize,x=void 0===b?11:b,R=e.endDate,E=e.rectProps,w=e.rectRender,j=(0,s.useMemo)((function(){return function(e){void 0===e&&(e=[]);var t={};return e.forEach((function(e){e.date&&p(new Date(e.date))&&(e.date=f(new Date(e.date)),t[e.date]=e)})),t}(v)}),[v]),S=(0,s.useMemo)((function(){return void 0===(e=Object.keys(c).map((function(e){return parseInt(e,10)})))&&(e=[]),e.sort((function(e,t){return e\n
\n )\n};\n\nexport default Demo"},68:{name:68,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"},148:{name:148,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"},229:{name:229,meta:{},code:'"use strict";\n\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }\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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\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://jaywcjlove.github.io/#/sponsor)\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\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| monthPlacement | position of month labels | `'top' | 'bottom'` | `top` |\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",headings:[],headingsList:[]};function Ld(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}var Ud,zd,Wd,qd=r(5895),Hd=r(3287);const Vd=Kt.div(Ud||(Ud=Ld(["\n background-color: #fff;\n border-radius: 5px;\n box-shadow: 0 0 0 1px rgb(16 22 26 / 10%), 0 0 0 rgb(16 22 26 / 0%), 0 1px 1px rgb(16 22 26 / 20%);\n margin: 0 auto;\n margin-top: 70px;\n width: 663px;\n svg {\n border-radius: 5px;\n }\n"]))),Gd=Kt.div(zd||(zd=Ld(["\n user-select: none;\n font-size: 12px;\n margin-top: 10px !important;\n padding: 10px;\n padding-left: 0px;\n border-radius: 5px;\n width: 663px;\n margin: 0 auto;\n label {\n display: flex;\n align-items: center;\n input {\n margin-right: 5px;\n margin-left: 10px;\n }\n }\n"]))),Kd=Kt.div(Wd||(Wd=Ld(["\n display: flex;\n flex-direction: column;\n"]))),Yd=[{date:"2016/01/11",count:2,content:""},...[...Array(17)].map(((e,t)=>({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:""},...[...Array(17)].map(((e,t)=>({date:"2016/08/".concat(t+10),count:t,content:""})))],Xd=[{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:""}],Jd={0:"rgb(255 255 255 / 25%)",8:"#7BC96F",4:"#C6E48B",12:"#239A3B",32:"#ff7b00"};function $d(){const[e,t]=(0,o.useState)(Yd),[r,n]=(0,o.useState)(),[a,s]=(0,o.useState)(!1),[i,d]=(0,o.useState)(!1),[l,c]=(0,o.useState)(!1),[u,p]=(0,o.useState)(11),[f,g]=(0,o.useState)("top"),[h,m]=(0,o.useState)(),[y,v]=(0,o.useState)(void 0),[b,x]=(0,o.useState)(void 0);return(0,Jt.jsxs)(Kd,{children:[(0,Jt.jsx)(Vd,{children:(0,Jt.jsx)(Hd.default,{style:{backgroundColor:i?"#000":"#fff",color:i?"#888":"#000"},panelColors:i?Jd:void 0,width:663,rectSize:u,legendCellSize:h,weekLabels:y,monthLabels:b,startDate:new Date("2016/01/01"),endDate:a?new Date("2016/6/01"):void 0,monthPlacement:f,value:e,rectProps:{rx:l?5:0,onClick:e=>{n(e.target.dataset.date)}},legendRender:e=>(0,Jt.jsx)("rect",{...e,rx:l?5:0}),rectRender:(e,t)=>(0,Jt.jsx)(qd.default,{placement:"top",content:"count: ".concat(t.count||0),children:(0,Jt.jsx)("rect",{...e})})})}),(0,Jt.jsxs)(Gd,{children:[(0,Jt.jsxs)("div",{style:{paddingLeft:10,paddingBottom:20},children:[(0,Jt.jsx)("button",{onClick:()=>t(Yd),children:"Value 1"}),(0,Jt.jsx)("button",{onClick:()=>t(Xd),children:"Value 2"}),(0,Jt.jsx)("span",{children:r})]}),(0,Jt.jsxs)("label",{children:[(0,Jt.jsx)("input",{type:"checkbox",checked:a,onChange:e=>s(e.target.checked)}),"endDate = ",a?"2016/6/01":"undefined"]}),(0,Jt.jsxs)("label",{children:[(0,Jt.jsx)("input",{type:"checkbox",checked:i,onChange:e=>d(e.target.checked)}),i?"Dark":"Light"]}),(0,Jt.jsxs)("label",{children:[(0,Jt.jsx)("input",{type:"checkbox",checked:l,onChange:e=>c(e.target.checked)}),l?"Circle":"Rect"]}),(0,Jt.jsxs)("label",{style:{marginTop:15},children:[(0,Jt.jsx)("input",{type:"radio",name:"weekLabels",checked:void 0===y,onChange:e=>v(void 0)}),"weekLabels = undefined, Default: ",JSON.stringify(["Sun","Mon","Tue","Wed","Thu","Fri","Sat"])]}),(0,Jt.jsxs)("label",{children:[(0,Jt.jsx)("input",{type:"radio",name:"weekLabels",checked:!1===y,onChange:e=>v(!1)}),"weekLabels = false"]}),(0,Jt.jsxs)("label",{children:[(0,Jt.jsx)("input",{type:"radio",name:"weekLabels",checked:Array.isArray(y),onChange:e=>v(["\u65e5","\u4e00","","\u4e09","","\u4e94","\u516d"])}),"weekLabels = ",JSON.stringify(["\u65e5","\u4e00","","\u4e09","","\u4e94","\u516d"])]}),(0,Jt.jsxs)("label",{style:{marginTop:15},children:[(0,Jt.jsx)("input",{type:"radio",name:"monthLabels",checked:void 0===b,onChange:e=>x(void 0)}),"monthLabels = undefined, Default:"," ",JSON.stringify(["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"])]}),(0,Jt.jsxs)("label",{children:[(0,Jt.jsx)("input",{type:"radio",name:"monthLabels",checked:!1===b,onChange:e=>x(!1)}),"monthLabels = false"]}),(0,Jt.jsxs)("label",{children:[(0,Jt.jsx)("input",{type:"radio",name:"monthLabels",checked:Array.isArray(b),onChange:e=>x(["\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,Jt.jsxs)("div",{style:{display:"flex",marginTop:10},children:[(0,Jt.jsxs)("label",{children:[(0,Jt.jsx)("input",{type:"radio",name:"rectSize",checked:11===u,onChange:e=>p(11)}),"rectSize = 11"]}),(0,Jt.jsxs)("label",{children:[(0,Jt.jsx)("input",{type:"radio",name:"rectSize",checked:12===u,onChange:e=>p(12)}),"rectSize = 12"]}),(0,Jt.jsxs)("label",{children:[(0,Jt.jsx)("input",{type:"radio",name:"rectSize",checked:14===u,onChange:e=>p(14)}),"rectSize = 14"]})]}),(0,Jt.jsxs)("div",{style:{display:"flex",marginTop:16},children:[(0,Jt.jsx)("label",{children:(0,Jt.jsxs)("select",{value:f,onChange:e=>g(e.target.value),children:[(0,Jt.jsx)("option",{value:"top",children:"monthPlacement = top"}),(0,Jt.jsx)("option",{value:"bottom",children:"monthPlacement = bottom"})]})}),(0,Jt.jsxs)("label",{children:[(0,Jt.jsx)("input",{type:"number",value:h||"",onChange:e=>m(Number(e.target.value)||0)}),"legendCellSize = ",h]})]})]})]})}const Zd=Bd.Github,Qd=Bd.Example,el=document.getElementById("root");(0,n.s)(el).render((0,Jt.jsxs)(Bd,{source:Md.source,components:Md.components,data:Md.data,title:"HeatMap for React",description:"React component create calendar heatmap to visualize time series data, a la github contribution graph.",version:"v".concat("2.2.0"),children:[(0,Jt.jsx)(Zd,{href:"https://github.com/uiwjs/react-heat-map"}),(0,Jt.jsx)(Qd,{children:(0,Jt.jsx)($d,{})})]}))},3287:(e,t,r)=>{"use strict";r.r(t),r.d(t,{default:()=>R});var n=r(5773),a=r(808),s=r(8573),i=r(4760),o={textAnchor:"middle",fontSize:"inherit",fill:"currentColor"},d=e=>{var{weekLabels:t=[],rectSize:r=0,topPad:n=0,space:a=0}=e;return(0,s.useMemo)((()=>(0,i.jsx)(s.Fragment,{children:[...Array(7)].map(((e,s)=>t&&t[s]?(0,i.jsx)("text",{className:"w-heatmap-week",x:15,y:n,dy:(s+1)*(r+a)-5,style:o,children:t[s]},s):null))})),[r,a,n,t])},l=864e5;function c(e){return e instanceof Date&&!isNaN(e.getTime())}function u(e){return e.getFullYear()+"/"+(e.getMonth()+1)+"/"+e.getDate()}var p=e=>{var{monthLabels:t=[],rectSize:r=0,space:n=0,leftPad:a=0,colNum:d=0,rectY:c=15,startDate:u}=e,p=(0,s.useMemo)((()=>!1===t||d<1?[]:[...Array(7*d)].map(((e,r)=>{if(r/7%1===0){var n=new Date(u.getTime()+r*l),a=n.getMonth();return{col:r/7,index:r,month:a,day:n.getDate(),monthStr:t[a],date:n}}return null})).filter(Boolean).filter(((e,t,r)=>r[t-1]&&r[t-1].month!==e.month))),[d,t,u]);return(0,i.jsx)(s.Fragment,{children:[...p].map(((e,t)=>(0,i.jsx)("text",{"data-size":r,x:a+n+n,y:c,dx:e.col*(r+n),textAnchor:"start",style:o,children:e.monthStr},t)))})},f=["style","value","render","key"],g=e=>{var{style:t,value:r,render:o}=e,d=(0,a.Z)(e,f),l=(0,n.Z)({},d,{style:(0,n.Z)({display:"block",cursor:"pointer"},t)});if(o&&"function"===typeof o){var c=o((0,n.Z)({},l),r);if(c&&s.isValidElement(c))return c}return(0,i.jsx)("rect",(0,n.Z)({},l))},h=["panelColors","leftPad","topPad","rectY","space","rectSize","legendCellSize","legendRender"];function m(e){var{panelColors:t,leftPad:r=0,topPad:o=0,rectY:d=15,space:l=0,rectSize:c=0,legendCellSize:u=0,legendRender:p}=e,f=(0,a.Z)(e,h),m=u||c;return(0,s.useMemo)((()=>(0,i.jsx)(s.Fragment,{children:Object.keys(t||{}).map(((e,a)=>{var s=(0,n.Z)({},f,{key:a,x:(m+1)*a+r,y:d,fill:t[Number(e)],width:m,height:m});return p?p(s):(0,i.jsx)(g,(0,n.Z)({},s))}))})),[t,f,m,d,r,c,p])}var y=e=>{var{transform:t,gridNum:r=0,startY:a=0,panelColors:o={},initStartDate:d,space:p=2,value:f=[],rectSize:h=11,endDate:m,rectProps:y,rectRender:v}=e,b=(0,s.useMemo)((()=>function(e){void 0===e&&(e=[]);var t={};return e.forEach((e=>{e.date&&c(new Date(e.date))&&(e.date=u(new Date(e.date)),t[e.date]=e)})),t}(f)),[f]),x=(0,s.useMemo)((()=>{return void 0===(e=Object.keys(o).map((e=>parseInt(e,10))))&&(e=[]),e.sort(((e,t)=>e