\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![](\"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:[]};function Hl(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}var Vl,Gl,Kl,Yl=r(5895),Xl=r(3287);const Jl=Kt.div(Vl||(Vl=Hl(["\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"]))),$l=Kt.div(Gl||(Gl=Hl(["\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"]))),Zl=Kt.div(Kl||(Kl=Hl(["\n display: flex;\n flex-direction: column;\n"]))),Ql=[{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:""})))],eu=[{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:""}],tu={0:"rgb(255 255 255 / 25%)",8:"#7BC96F",4:"#C6E48B",12:"#239A3B",32:"#ff7b00"};function ru(){const[e,t]=(0,o.useState)(Ql),[r,n]=(0,o.useState)(),[a,s]=(0,o.useState)(!1),[i,d]=(0,o.useState)(!1),[c,l]=(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)(Zl,{children:[(0,Jt.jsx)(Jl,{children:(0,Jt.jsx)(Xl.default,{style:{backgroundColor:i?"#000":"#fff",color:i?"#888":"#000"},panelColors:i?tu: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:c?5:0,onClick:e=>{n(e.target.dataset.date)}},legendRender:e=>(0,Jt.jsx)("rect",{...e,rx:c?5:0}),rectRender:(e,t)=>(0,Jt.jsx)(Yl.default,{placement:"top",content:"count: ".concat(t.count||0),children:(0,Jt.jsx)("rect",{...e})})})}),(0,Jt.jsxs)($l,{children:[(0,Jt.jsxs)("div",{style:{paddingLeft:10,paddingBottom:20},children:[(0,Jt.jsx)("button",{onClick:()=>t(Ql),children:"Value 1"}),(0,Jt.jsx)("button",{onClick:()=>t(eu),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:c,onChange:e=>l(e.target.checked)}),c?"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 nu=zl.Github,au=zl.Example,su=document.getElementById("root");(0,n.s)(su).render((0,Jt.jsxs)(zl,{source:Wl.source,components:Wl.components,data:Wl.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)(nu,{href:"https://github.com/uiwjs/react-heat-map"}),(0,Jt.jsx)(au,{children:(0,Jt.jsx)(ru,{})})]}))},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])},c=864e5;function l(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:l=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*c),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:l,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),c=(0,n.Z)({},d,{style:(0,n.Z)({display:"block",cursor:"pointer"},t)});if(o&&"function"===typeof o){var l=o((0,n.Z)({},c),r);if(l&&s.isValidElement(l))return l}return(0,i.jsx)("rect",(0,n.Z)({},c))},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:c=0,rectSize:l=0,legendCellSize:u=0,legendRender:p}=e,f=(0,a.Z)(e,h),m=u||l;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,l,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&&l(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\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 Hl(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}var Vl,Gl,Kl,Yl=r(5895),Xl=r(3287);const Jl=Kt.div(Vl||(Vl=Hl(["\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"]))),$l=Kt.div(Gl||(Gl=Hl(["\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"]))),Zl=Kt.div(Kl||(Kl=Hl(["\n display: flex;\n flex-direction: column;\n"]))),Ql=[{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:""})))],eu=[{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:""}],tu={0:"rgb(255 255 255 / 25%)",8:"#7BC96F",4:"#C6E48B",12:"#239A3B",32:"#ff7b00"};function ru(){const[e,t]=(0,o.useState)(Ql),[r,n]=(0,o.useState)(),[a,s]=(0,o.useState)(!1),[i,d]=(0,o.useState)(!1),[c,l]=(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)(Zl,{children:[(0,Jt.jsx)(Jl,{children:(0,Jt.jsx)(Xl.default,{style:{backgroundColor:i?"#000":"#fff",color:i?"#888":"#000"},panelColors:i?tu: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:c?5:0,onClick:e=>{n(e.target.dataset.date)}},legendRender:e=>(0,Jt.jsx)("rect",{...e,rx:c?5:0}),rectRender:(e,t)=>(0,Jt.jsx)(Yl.default,{placement:"top",content:"count: ".concat(t.count||0),children:(0,Jt.jsx)("rect",{...e})})})}),(0,Jt.jsxs)($l,{children:[(0,Jt.jsxs)("div",{style:{paddingLeft:10,paddingBottom:20},children:[(0,Jt.jsx)("button",{onClick:()=>t(Ql),children:"Value 1"}),(0,Jt.jsx)("button",{onClick:()=>t(eu),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:c,onChange:e=>l(e.target.checked)}),c?"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 nu=zl.Github,au=zl.Example,su=document.getElementById("root");(0,n.s)(su).render((0,Jt.jsxs)(zl,{source:Wl.source,components:Wl.components,data:Wl.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.1"),children:[(0,Jt.jsx)(nu,{href:"https://github.com/uiwjs/react-heat-map"}),(0,Jt.jsx)(au,{children:(0,Jt.jsx)(ru,{})})]}))},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])},c=864e5;function l(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:l=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*c),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:l,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),c=(0,n.Z)({},d,{style:(0,n.Z)({display:"block",cursor:"pointer"},t)});if(o&&"function"===typeof o){var l=o((0,n.Z)({},c),r);if(l&&s.isValidElement(l))return l}return(0,i.jsx)("rect",(0,n.Z)({},c))},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:c=0,rectSize:l=0,legendCellSize:u=0,legendRender:p}=e,f=(0,a.Z)(e,h),m=u||l;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,l,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&&l(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