UNPKG

@uiw/react-heat-map

Version:

React component create calendar heatmap to visualize time series data, a la github contribution graph.

2 lines 11.1 kB
/*! For license information please see heat-map.min.js.LICENSE.txt */ !function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("react")):"function"===typeof define&&define.amd?define(["react"],t):"object"===typeof exports?exports["@uiw/react-heat-map"]=t(require("react")):e["@uiw/react-heat-map"]=t(e.React)}(self,e=>(()=>{"use strict";var t={192(e,t,r){var n=r(442),o=Symbol.for("react.element"),a=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,l=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,u={key:!0,ref:!0,__self:!0,__source:!0};function c(e,t,r){var n,a={},c=null,f=null;for(n in void 0!==r&&(c=""+r),void 0!==t.key&&(c=""+t.key),void 0!==t.ref&&(f=t.ref),t)i.call(t,n)&&!u.hasOwnProperty(n)&&(a[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps)void 0===a[n]&&(a[n]=t[n]);return{$$typeof:o,type:e,key:c,ref:f,props:a,_owner:l.current}}t.jsx=c,t.jsxs=c},540(e,t,r){e.exports=r(192)},442(t){t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,n),a.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};function a(e){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a(e)}function i(e){var t=function(e,t){if("object"!=a(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!=a(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==a(t)?t:t+""}function l(e,t,r){return(t=i(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function u(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?u(Object(r),!0).forEach(function(t){l(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):u(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function f(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(-1!==t.indexOf(n))continue;r[n]=e[n]}return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],-1===t.indexOf(r)&&{}.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}n.r(o),n.d(o,{default:()=>T});var s=n(442),d=n.n(s);function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}function m(e,t){if(e){if("string"==typeof e)return p(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?p(e,t):void 0}}function v(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a,i,l=[],u=!0,c=!1;try{if(a=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;u=!1}else for(;!(u=(n=a.call(r)).done)&&(l.push(n.value),l.length!==t);u=!0);}catch(e){c=!0,o=e}finally{try{if(!u&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(c)throw o}}return l}}(e,t)||m(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function y(e){return function(e){if(Array.isArray(e))return p(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||m(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var b=n(540),h={textAnchor:"middle",fontSize:"inherit",fill:"currentColor"},g=function(e){var t=e.weekLabels,r=void 0===t?[]:t,n=e.rectSize,o=void 0===n?0:n,a=e.topPad,i=void 0===a?0:a,l=e.space,u=void 0===l?0:l;return(0,s.useMemo)(function(){return(0,b.jsx)(s.Fragment,{children:y(Array(7)).map(function(e,t){return r&&r[t]?(0,b.jsx)("text",{className:"w-heatmap-week",x:15,y:i,dy:(t+1)*(o+u)-5,style:h,children:r[t]},t):null})})},[o,u,i,r])};function S(e){return e instanceof Date&&!isNaN(e.getTime())}var j=/^(\d{4})[/-](\d{1,2})[/-](\d{1,2})$/;function x(e,t){var r=new Date(e.getTime());return r.setDate(r.getDate()+t),r}function O(e){var t=new Date(e.getTime());return t.setHours(0,0,0,0),t.setDate(t.getDate()-t.getDay()),t}function w(e){return"".concat(e.getFullYear(),"/").concat(e.getMonth()+1,"/").concat(e.getDate())}function D(){var e={};return(arguments.length>0&&void 0!==arguments[0]?arguments[0]:[]).forEach(function(t){if(t.date){var r=function(e){if(e instanceof Date)return S(e)?new Date(e.getTime()):null;var t=e.match(j);if(t){var r=Number(t[1]),n=Number(t[2])-1,o=Number(t[3]),a=new Date(r,n,o);return a.getFullYear()===r&&a.getMonth()===n&&a.getDate()===o?a:null}var i=new Date(e);return S(i)?i:null}(t.date);if(!r)return;var n=w(r);e[n]=c(c({},t),{},{date:n})}}),e}var P=function(e,t){var r=Math.ceil(t/(e.length-1)),n={};return e.forEach(function(e,t){n[t*r]=e}),n},E=function(e){var t=e.monthLabels,r=void 0===t?[]:t,n=e.rectSize,o=void 0===n?0:n,a=e.space,i=void 0===a?0:a,l=e.leftPad,u=void 0===l?0:l,c=e.colNum,f=void 0===c?0:c,d=e.rectY,p=void 0===d?15:d,m=e.startDate,v=e.endDate,y=(0,s.useMemo)(function(){return function(e,t,r,n){return!1===t||e<1?[]:Array.from({length:7*e}).map(function(e,o){if(o/7%1===0){var a=x(r,o),i=a.getMonth();return n&&a>n?null:{col:o/7,index:o,month:i,day:a.getDate(),monthStr:t[i],date:a}}return null}).filter(Boolean).filter(function(e,t,r){return r[t-1]&&r[t-1].month!==e.month})}(f,r,m,v)},[f,r,m,v]);return(0,b.jsx)(s.Fragment,{children:y.map(function(e,t){return(0,b.jsx)("text",{"data-size":o,x:u+i+i,y:p,dx:e.col*(o+i),textAnchor:"start",style:h,children:e.monthStr},t)})})},k=["style","value","render","key"],A=function(e){var t=e.style,r=e.value,n=e.render,o=(e.key,c(c({},f(e,k)),{},{style:c({display:"block",cursor:"pointer"},t)}));if(n&&"function"===typeof n){var a=n(c({},o),r);if(a&&d().isValidElement(a))return a}return(0,b.jsx)("rect",c({},o))},C=["panelColors","leftPad","topPad","rectY","space","rectSize","legendCellSize","legendRender"];function M(e){var t=e.panelColors,r=e.leftPad,n=void 0===r?0:r,o=(e.topPad,e.rectY),a=void 0===o?15:o,i=(e.space,e.rectSize),l=void 0===i?0:i,u=e.legendCellSize,d=void 0===u?0:u,p=e.legendRender,m=f(e,C),v=d||l;return(0,s.useMemo)(function(){return(0,b.jsx)(s.Fragment,{children:Object.keys(t||{}).map(function(e,r){var o=c(c({},m),{},{key:r,x:(v+1)*r+n,y:a,fill:t[Number(e)],width:v,height:v});return p?p(o):(0,s.createElement)(A,c(c({},o),{},{key:r}))})})},[t,m,v,a,n,l,p])}var _=function(e){var t=e.transform,r=e.gridNum,n=void 0===r?0:r,o=(e.startY,e.panelColors),a=void 0===o?{}:o,i=e.initStartDate,l=e.space,u=void 0===l?2:l,f=e.value,d=void 0===f?[]:f,p=e.rectSize,m=void 0===p?11:p,v=e.endDate,h=e.rectProps,g=e.rectRender,S=(0,s.useMemo)(function(){return D(d)},[d]),j=(0,s.useMemo)(function(){return function(){return(arguments.length>0&&void 0!==arguments[0]?arguments[0]:[]).sort(function(e,t){return e<t?-1:e>t?1:0})}(Object.keys(a).map(function(e){return parseInt(e,10)}))},[a]);return(0,b.jsx)("g",{transform:t,children:n>0&&y(Array(n)).map(function(e,t){return(0,b.jsx)("g",{"data-column":t,children:y(Array(7)).map(function(e,r){var n=x(i,7*t+r),o=w(n),l=c(c({},S[o]),{},{date:o,row:r,column:t,index:7*t+r}),f=c(c({},h),{},{fill:"var(--rhm-rect, #EBEDF0)",width:m,height:m,x:t*(m+u),y:(m+u)*r,render:g,value:l});return v instanceof Date&&n.getTime()>v.getTime()?null:(o&&S[o]&&a&&Object.keys(a).length>0?f.fill=function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1?arguments[1]:void 0,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},n="",o=0;o<t.length;o+=1){if(t[o]>e){n=r[t[o]];break}n=r[t[o]]}return n}(S[o].count||0,j,a):a&&a[0]&&(f.fill=a[0]),(0,s.createElement)(A,c(c({},f),{},{key:r,value:l,"data-date":o,"data-index":l.index,"data-row":l.row,"data-column":l.column})))})},t)})})},z=["rectSize","legendCellSize","space","monthPlacement","startDate","endDate","rectProps","rectRender","legendRender","value","weekLabels","monthLabels","panelColors","style"];function N(e){var t=e||{},r=t.rectSize,n=void 0===r?11:r,o=t.legendCellSize,a=void 0===o?11:o,i=t.space,l=void 0===i?2:i,u=t.monthPlacement,p=void 0===u?"top":u,m=t.startDate,h=void 0===m?new Date:m,j=t.endDate,x=t.rectProps,w=t.rectRender,D=t.legendRender,k=t.value,A=void 0===k?[]:k,C=t.weekLabels,N=void 0===C?["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]:C,R=t.monthLabels,T=void 0===R?["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]:R,F=t.panelColors,L=void 0===F?["var(--rhm-rect, #EBEDF0)","#C6E48B","#7BC96F","#239A3B","#196127"]:F,I=t.style,Y=f(t,z),B=Math.max.apply(Math,y(A.map(function(e){return e.count})).concat([0])),$=Array.isArray(L)?P(L,B):L,J=v((0,s.useState)(0),2),U=J[0],W=J[1],q=v((0,s.useState)(N?28:5),2),H=q[0],V=q[1],G="top"===p?20:5,K=v((0,s.useState)(T?G:5),2),Q=K[0],X=K[1],Z=d().createRef();(0,s.useEffect)(function(){return V(N?28:5)},[N]),(0,s.useEffect)(function(){if(Z.current){var e=Z.current.clientWidth-H||0;W(Math.floor(e/(n+l))||0)}},[n,Z,l,H]),(0,s.useEffect)(function(){X(T?G:5)},[T]);var ee=(0,s.useMemo)(function(){return S(h)?O(h):O(new Date)},[h]),te="top"===p?15:105+l,re="top"===p?Q+8*n+6:(T?Q+n+l:Q)+8*n+6;return(0,b.jsxs)("svg",c(c({ref:Z,style:c(c({},{color:"var(--rhm-text-color, #24292e)",userSelect:"none",display:"block",fontSize:10}),I)},Y),{},{children:[0!==a&&(0,b.jsx)(M,{legendRender:D,panelColors:$,rectSize:n,rectY:re,legendCellSize:a,leftPad:H,topPad:Q,space:l}),(0,b.jsx)(g,{weekLabels:N,rectSize:n,space:l,topPad:Q}),(0,b.jsx)(E,{monthLabels:T,rectSize:n,space:l,leftPad:H,colNum:U,rectY:te,startDate:ee,endDate:j}),(0,b.jsx)(_,{transform:"translate(".concat(H,", ").concat(Q,")"),gridNum:U,initStartDate:ee,endDate:j,rectProps:x,rectSize:n,rectRender:w,panelColors:$,value:A,space:l})]}))}var R=["prefixCls","className"];function T(e){var t=e.prefixCls,r=void 0===t?"w-heatmap":t,n=e.className,o=f(e,R),a=[n,r].filter(Boolean).join(" ");return(0,b.jsx)(N,c({className:a},o))}return o})());