@ahmaddzidnii/react-github-heatmap
Version:
React-github-heatmap is a React library for displaying contribution-style heatmaps similar to GitHub's profile activity graph. It is designed to be lightweight, customizable, and easy to integrate into any React project. With support for custom data, flex
3 lines (2 loc) • 8.92 kB
JavaScript
"use strict";var n=require("react/jsx-runtime"),t=require("classnames"),e=require("react-tooltip"),r=require("react"),a=function(){return a=Object.assign||function(n){for(var t,e=1,r=arguments.length;e<r;e++)for(var a in t=arguments[e])Object.prototype.hasOwnProperty.call(t,a)&&(n[a]=t[a]);return n},a.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var o=function(n){var t=new Date(n),e=t.getDate(),r=new Intl.DateTimeFormat("en-US",{month:"long"}).format(t),a=e%10==1&&11!==e?"st":e%10==2&&12!==e?"nd":e%10==3&&13!==e?"rd":"th";return"".concat(r," ").concat(e).concat(a)},i=[{level:0,name:"No contributions."},{level:1,name:"Low contributions."},{level:2,name:"Medium-low contributions."},{level:3,name:"Medium-high contributions."},{level:4,name:"High contributions."}],l=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];!function(n,t){void 0===t&&(t={});var e=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===e&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=n:a.appendChild(document.createTextNode(n))}}('[data-level="0"] {\n background-color: #ebedf0;\n}\n\n[data-level="1"] {\n background-color: #9be9a8;\n}\n\n[data-level="2"] {\n background-color: #40c463;\n}\n\n[data-level="3"] {\n background-color: #30a14e;\n}\n\n[data-level="4"] {\n background-color: #216e39;\n}\n\n.contribution-graph * {\n box-sizing: border-box;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.contribution-graph {\n border: 1px solid #e1e4e8;\n border-radius: 6px;\n padding: 16px;\n width: max-content;\n min-width: 230px;\n}\n\n.contribution-graph__container {\n display: flex;\n flex-direction: column;\n}\n\n.contribution-graph__table-wrapper {\n overflow-x: auto;\n overflow-y: hidden;\n max-width: calc(100vw - 32px);\n}\n\n.contribution-graph__table {\n width: max-content;\n overflow: hidden;\n position: relative;\n border-collapse: separate;\n padding: 0 16px 0 16px;\n}\n\n.contribution-graph__months-row {\n height: 13px;\n}\n\n.contribution-graph__day-label {\n width: 12px;\n}\n\n.contribution-graph__month {\n font-size: 12px;\n padding: 0.125rem 0.5rem 0.125rem 0;\n}\n\n.contribution-graph__week-row {\n height: 10px;\n}\n\n.contribution-graph__day-label-wrapper {\n position: relative;\n width: 28px;\n text-align: right;\n}\n\n.contribution-graph__day-label {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0px;\n font-size: 12px;\n padding: 0.125rem 0.5rem 0.125rem 0;\n -webkit-transform: translateY(-50%);\n -moz-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n -o-transform: translateY(-50%);\n}\n\n.contribution-graph__cell {\n width: 10px;\n height: 10px;\n border-radius: 3px;\n -webkit-border-radius: 3px;\n -moz-border-radius: 3px;\n -ms-border-radius: 3px;\n -o-border-radius: 3px;\n outline: 1px solid rgba(27, 31, 35, 0.06);\n outline-offset: -1px;\n}\n\n.contribution-graph__legend {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-left: 48px;\n padding-right: 16px;\n margin-top: 0.25rem;\n}\n\n.contribution-graph__legend-text {\n font-size: 12px;\n}\n\n.contribution-graph__legend-scale {\n display: flex;\n align-items: center;\n}\n\n.contribution-graph__legend-box {\n width: 10px;\n height: 10px;\n border-radius: 3px;\n -webkit-border-radius: 3px;\n -moz-border-radius: 3px;\n -ms-border-radius: 3px;\n -o-border-radius: 3px;\n outline: 1px solid rgba(27, 31, 35, 0.06);\n outline-offset: -1px;\n margin-right: 0.25rem;\n}\n\n.contribution-graph__legend-label {\n font-size: 12px;\n}\n\n.mr-1 {\n margin-right: 0.25rem;\n}\n\n@media only screen and (max-width: 406px) {\n .contribution-graph__legend {\n flex-direction: column;\n }\n}\n');var c=function(t){var e=t.months;return n.jsx("thead",{children:n.jsxs("tr",{className:"contribution-graph__months-row",children:[n.jsx("td",{className:" contribution-graph__day-label",children:n.jsx("span",{className:"sr-only",children:"Day of Week"})}),e.map((function(t,e){return n.jsxs("td",{colSpan:t.colSpan,className:"contribution-graph__month",children:[n.jsx("span",{className:"sr-only",children:t.name}),n.jsx("span",{children:t.name.slice(0,3)})]},"".concat(t.name,"-").concat(t.year,"-").concat(e))}))]})})};exports.ReactGithubHeatmap=function(s){var d=s.tooltipContent,p=void 0===d?function(n){return n.contributions?"".concat(n.contributions," contributions on ").concat(o(n.date)):"No contributions on ".concat(o(n.date))}:d,u=function(n,t){var e={};for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&t.indexOf(r)<0&&(e[r]=n[r]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(n);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(n,r[a])&&(e[r[a]]=n[r[a]])}return e}(s,["tooltipContent"]),h=function(n){var t=n.endDate,e=new Date(t);for(e.setDate(t.getDate()-364);0!==e.getDay();)e.setDate(e.getDate()-1);return{startDate:e,endDate:t}}({endDate:new Date});if(!!u.startDate!=!!u.endDate)throw new Error("Both startDate and endDate must be provided together.");var g=h.startDate,b=h.endDate,m=u.startDate?new Date(u.startDate):g,x=u.endDate?new Date(u.endDate):b,f=u.data||[],v=function(n){if(!n)return"";var t="".concat(n.getFullYear(),"-").concat(String(n.getMonth()+1).padStart(2,"0"),"-").concat(String(n.getDate()).padStart(2,"0")),e=f.find((function(n){return n.date===t}))||{date:t,contributions:null};return p(e)},_=r.useMemo((function(){var n=f.filter((function(n){return n.contributions>0})).map((function(n){return n.contributions}));if(0===n.length)return{level1:1,level2:2,level3:3};var t=Math.max.apply(Math,n);return{level1:Math.ceil(.25*t),level2:Math.ceil(.5*t),level3:Math.ceil(.75*t)}}),[f]),w=r.useCallback((function(n){if(!n)return 0;var t="".concat(n.getFullYear(),"-").concat(String(n.getMonth()+1).padStart(2,"0"),"-").concat(String(n.getDate()).padStart(2,"0")),e=f.find((function(n){return n.date===t}));return e&&0!==e.contributions?e.contributions<=_.level1?1:e.contributions<=_.level2?2:e.contributions<=_.level3?3:4:0}),[f,_]),y=function(n,t){for(var e=Array.from({length:7},(function(){return Array(53).fill(null)})),r=new Date(n),a=0,o=r.getDay();r<=t&&a<53;)e[o][a]=new Date(r),r.setDate(r.getDate()+1),0===r.getDay()&&a++,o=6===o?0:o+1;return e}(m,x),D=function(n,t){var e=[],r=new Date(n);r.setFullYear(r.getFullYear()+1),t>r&&(t=r);var a=[],o=new Date(n);for(o.setDate(1);o<=t;)a.push({name:new Intl.DateTimeFormat("en-US",{month:"long"}).format(o),year:o.getFullYear(),days:new Date(o.getFullYear(),o.getMonth()+1,0).getDate()}),o=new Date(o.getFullYear(),o.getMonth()+1,1);for(var i=a.reduce((function(n,t){return n+t.days}),0),l=53,c=0;c<a.length;c++){var s=a[c];if(c===a.length-1)e.push({name:s.name,year:s.year,colSpan:l});else{var d=Math.round(s.days/i*53);d=Math.max(1,d),d=Math.min(d,l-(a.length-c-1)),e.push({name:s.name,year:s.year,colSpan:d}),l-=d}}return e}(m,x);return n.jsx("div",{className:"contribution-graph",children:n.jsxs("div",{className:"contribution-graph__container",children:[n.jsxs("div",{className:"contribution-graph__table-wrapper",children:[n.jsxs("table",{className:"contribution-graph__table",children:[n.jsx("caption",{className:"sr-only",children:"Contribution Graph"}),n.jsx(c,{months:D}),n.jsx("tbody",{children:y.map((function(e,r){return n.jsxs("tr",{className:"contribution-graph__week-row",children:[n.jsx("td",{className:"contribution-graph__day-label-wrapper",children:n.jsx("span",{className:t("contribution-graph__day-label",{"sr-only":r%2!=1}),children:l[r]})}),e.map((function(t,e){return t?n.jsx("td",{tabIndex:0,"data-level":w(t),"data-date":"".concat(t.getFullYear(),"-").concat(String(t.getMonth()+1).padStart(2,"0"),"-").concat(String(t.getDate()).padStart(2,"0")),"data-tooltip-id":"tooltip","data-tooltip-content":v(t),className:"contribution-graph__cell"},e):n.jsx("td",{},e)}))]},r)}))})]}),n.jsx(e.Tooltip,a({id:"tooltip"},u.tooltipOptions))]}),n.jsxs("div",{className:"contribution-graph__legend",children:[n.jsx("span",{className:"contribution-graph__legend-text",children:"Learn how we count contributions"}),n.jsxs("div",{className:"contribution-graph__legend-scale",children:[n.jsx("span",{className:"contribution-graph__legend-label mr-1",children:"Less"}),i.map((function(t){return n.jsx("div",{"data-level":t.level,className:"contribution-graph__legend-box",children:n.jsx("span",{className:"sr-only",children:t.name})},t.level)})),n.jsx("span",{className:"contribution-graph__legend-label",children:"More"})]})]})]})})};
//# sourceMappingURL=index.js.map