\n
\n )\n};\n\nexport default Demo"},71:{name:71,meta:{},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _reactHeatMap = _interopRequireDefault(require(\"@uiw/react-heat-map\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { \"default\": e }; }\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: 17\n}, {\n date: '2016/05/02',\n count: 5\n}, {\n date: '2016/05/03',\n count: 27\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 7: '#e4b293',\n 14: '#d48462',\n 21: '#c2533a',\n 28: '#ad001d',\n 35: '#6c0012'\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:17 },\n { date: '2016/05/02', count:5 },\n { date: '2016/05/03', count:27 },\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)}\n /> {range}\n
\n )\n};\nexport default Demo"},188:{name:188,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(e) { return e && e.__esModule ? e : { "default": e }; }\nfunction _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }\nfunction _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\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"},269:{name:269,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(e) { return e && e.__esModule ? e : { "default": e }; }\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 && {}.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() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r) { if (Array.isArray(r)) return r; }\nfunction _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }\nfunction _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\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```\nIf using Next.js, you will need to use the [`next-remove-imports`](https://www.npmjs.com/package/next-remove-imports) package to avoid errors, see [issue #69](https://github.com/uiwjs/react-heat-map/issues/69).\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) => ({\n date: `2016/02/${idx + 10}`, count: idx, content: ''\n })),\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:17 },\n { date: '2016/05/02', count:5 },\n { date: '2016/05/03', count:27 },\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)}\n /> {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` | \n| `monthPlacement` | position of month labels | `'top' | 'bottom'` | `top` | \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\n",headings:[],headingsList:[]};var tu=r(2073),ru=r(6204);const au=Jt.div`
- background-color: #fff;
- border-radius: 5px;
- 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%);
- margin: 0 auto;
- margin-top: 70px;
- width: 663px;
- svg {
- border-radius: 5px;
- }
-`,nu=Jt.div`
- user-select: none;
- font-size: 12px;
- margin-top: 10px !important;
- padding: 10px;
- padding-left: 0px;
- border-radius: 5px;
- width: 663px;
- margin: 0 auto;
- label {
- display: flex;
- align-items: center;
- input {
- margin-right: 5px;
- margin-left: 10px;
- }
- }
-`,su=Jt.div`
- display: flex;
- flex-direction: column;
-`,ou=[{date:"2016/01/11",count:2,content:""},...[...Array(17)].map(((e,t)=>({date:`2016/02/${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/${t+10}`,count:t,content:""})))],iu=[{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:""}],du={0:"rgb(255 255 255 / 25%)",8:"#7BC96F",4:"#C6E48B",12:"#239A3B",32:"#ff7b00"};function cu(){const[e,t]=(0,i.useState)(ou),[r,a]=(0,i.useState)(),[n,s]=(0,i.useState)(!1),[o,d]=(0,i.useState)(!1),[c,l]=(0,i.useState)(!1),[u,p]=(0,i.useState)(11),[f,g]=(0,i.useState)("top"),[m,h]=(0,i.useState)(),[y,b]=(0,i.useState)(void 0),[v,x]=(0,i.useState)(void 0);return(0,Xt.jsxs)(su,{children:[(0,Xt.jsx)(au,{children:(0,Xt.jsx)(ru.default,{style:{backgroundColor:o?"#000":"#fff",color:o?"#888":"#000"},panelColors:o?du:void 0,width:663,rectSize:u,legendCellSize:m,weekLabels:y,monthLabels:v,startDate:new Date("2016/01/01"),endDate:n?new Date("2016/6/01"):void 0,monthPlacement:f,value:e,rectProps:{rx:c?5:0,onClick:e=>{a(e.target.dataset.date)}},legendRender:e=>(0,i.createElement)("rect",{...e,key:e.key,rx:c?5:0}),rectRender:(e,t)=>(0,Xt.jsx)(tu.default,{placement:"top",content:`count: ${t.count||0}`,children:(0,Xt.jsx)("rect",{...e})},t.index)})}),(0,Xt.jsxs)(nu,{children:[(0,Xt.jsxs)("div",{style:{paddingLeft:10,paddingBottom:20},children:[(0,Xt.jsx)("button",{onClick:()=>t(ou),children:"Value 1"}),(0,Xt.jsx)("button",{onClick:()=>t(iu),children:"Value 2"}),(0,Xt.jsx)("span",{children:r})]}),(0,Xt.jsxs)("label",{children:[(0,Xt.jsx)("input",{type:"checkbox",checked:n,onChange:e=>s(e.target.checked)}),"endDate = ",n?"2016/6/01":"undefined"]}),(0,Xt.jsxs)("label",{children:[(0,Xt.jsx)("input",{type:"checkbox",checked:o,onChange:e=>d(e.target.checked)}),o?"Dark":"Light"]}),(0,Xt.jsxs)("label",{children:[(0,Xt.jsx)("input",{type:"checkbox",checked:c,onChange:e=>l(e.target.checked)}),c?"Circle":"Rect"]}),(0,Xt.jsxs)("label",{style:{marginTop:15},children:[(0,Xt.jsx)("input",{type:"radio",name:"weekLabels",checked:void 0===y,onChange:e=>b(void 0)}),"weekLabels = undefined, Default: ",JSON.stringify(["Sun","Mon","Tue","Wed","Thu","Fri","Sat"])]}),(0,Xt.jsxs)("label",{children:[(0,Xt.jsx)("input",{type:"radio",name:"weekLabels",checked:!1===y,onChange:e=>b(!1)}),"weekLabels = false"]}),(0,Xt.jsxs)("label",{children:[(0,Xt.jsx)("input",{type:"radio",name:"weekLabels",checked:Array.isArray(y),onChange:e=>b(["\u65e5","\u4e00","","\u4e09","","\u4e94","\u516d"])}),"weekLabels = ",JSON.stringify(["\u65e5","\u4e00","","\u4e09","","\u4e94","\u516d"])]}),(0,Xt.jsxs)("label",{style:{marginTop:15},children:[(0,Xt.jsx)("input",{type:"radio",name:"monthLabels",checked:void 0===v,onChange:e=>x(void 0)}),"monthLabels = undefined, Default:"," ",JSON.stringify(["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"])]}),(0,Xt.jsxs)("label",{children:[(0,Xt.jsx)("input",{type:"radio",name:"monthLabels",checked:!1===v,onChange:e=>x(!1)}),"monthLabels = false"]}),(0,Xt.jsxs)("label",{children:[(0,Xt.jsx)("input",{type:"radio",name:"monthLabels",checked:Array.isArray(v),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,Xt.jsxs)("div",{style:{display:"flex",marginTop:10},children:[(0,Xt.jsxs)("label",{children:[(0,Xt.jsx)("input",{type:"radio",name:"rectSize",checked:11===u,onChange:e=>p(11)}),"rectSize = 11"]}),(0,Xt.jsxs)("label",{children:[(0,Xt.jsx)("input",{type:"radio",name:"rectSize",checked:12===u,onChange:e=>p(12)}),"rectSize = 12"]}),(0,Xt.jsxs)("label",{children:[(0,Xt.jsx)("input",{type:"radio",name:"rectSize",checked:14===u,onChange:e=>p(14)}),"rectSize = 14"]})]}),(0,Xt.jsxs)("div",{style:{display:"flex",marginTop:16},children:[(0,Xt.jsx)("label",{children:(0,Xt.jsxs)("select",{value:f,onChange:e=>g(e.target.value),children:[(0,Xt.jsx)("option",{value:"top",children:"monthPlacement = top"}),(0,Xt.jsx)("option",{value:"bottom",children:"monthPlacement = bottom"})]})}),(0,Xt.jsxs)("label",{children:[(0,Xt.jsx)("input",{type:"number",value:m||"",onChange:e=>h(Number(e.target.value)||0)}),"legendCellSize = ",m]})]})]})]})}const lu=Zl.Github,uu=Zl.Example,pu=document.getElementById("root");(0,a.H)(pu).render((0,Xt.jsxs)(Zl,{source:eu.source,components:eu.components,data:eu.data,title:"HeatMap for React",description:"React component create calendar heatmap to visualize time series data, a la github contribution graph.",version:"v2.3.1",children:[(0,Xt.jsx)(lu,{href:"https://github.com/uiwjs/react-heat-map"}),(0,Xt.jsx)(uu,{children:(0,Xt.jsx)(cu,{})})]}))},6204:(e,t,r)=>{"use strict";r.r(t),r.d(t,{default:()=>w});var a=r(8102),n=r(9257),s=r(7804),o=r(9424),i={textAnchor:"middle",fontSize:"inherit",fill:"currentColor"},d=e=>{var{weekLabels:t=[],rectSize:r=0,topPad:a=0,space:n=0}=e;return(0,s.useMemo)((()=>(0,o.jsx)(s.Fragment,{children:[...Array(7)].map(((e,s)=>t&&t[s]?(0,o.jsx)("text",{className:"w-heatmap-week",x:15,y:a,dy:(s+1)*(r+n)-5,style:i,children:t[s]},s):null))})),[r,n,a,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,t)=>{var r=Math.ceil(t/(e.length-1)),a={};return e.forEach(((e,t)=>{a[t*r]=e})),a},f=e=>{var{monthLabels:t=[],rectSize:r=0,space:a=0,leftPad:n=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 a=new Date(u.getTime()+r*c),n=a.getMonth();return{col:r/7,index:r,month:n,day:a.getDate(),monthStr:t[n],date:a}}return null})).filter(Boolean).filter(((e,t,r)=>r[t-1]&&r[t-1].month!==e.month))),[d,t,u]);return(0,o.jsx)(s.Fragment,{children:[...p].map(((e,t)=>(0,o.jsx)("text",{"data-size":r,x:n+a+a,y:l,dx:e.col*(r+a),textAnchor:"start",style:i,children:e.monthStr},t)))})},g=["style","value","render","key"],m=e=>{var{style:t,value:r,render:i}=e,d=(0,n.A)(e,g),c=(0,a.A)({},d,{style:(0,a.A)({display:"block",cursor:"pointer"},t)});if(i&&"function"===typeof i){var l=i((0,a.A)({},c),r);if(l&&s.isValidElement(l))return l}return(0,o.jsx)("rect",(0,a.A)({},c))},h=["panelColors","leftPad","topPad","rectY","space","rectSize","legendCellSize","legendRender"];function y(e){var{panelColors:t,leftPad:r=0,topPad:i=0,rectY:d=15,space:c=0,rectSize:l=0,legendCellSize:u=0,legendRender:p}=e,f=(0,n.A)(e,h),g=u||l;return(0,s.useMemo)((()=>(0,o.jsx)(s.Fragment,{children:Object.keys(t||{}).map(((e,n)=>{var o=(0,a.A)({},f,{key:n,x:(g+1)*n+r,y:d,fill:t[Number(e)],width:g,height:g});return p?p(o):(0,s.createElement)(m,(0,a.A)({},o,{key:n}))}))})),[t,f,g,d,r,l,p])}var b=e=>{var{transform:t,gridNum:r=0,startY:n=0,panelColors:i={},initStartDate:d,space:p=2,value:f=[],rectSize:g=11,endDate:h,rectProps:y,rectRender:b}=e,v=(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(i).map((e=>parseInt(e,10))))&&(e=[]),e.sort(((e,t)=>e