@keyvaluesystems/react-dot-matrix-chart - npm Package Compare versions

Comparing version 0.2.7 to 0.3.0

build/index.js

 /*!
  * 
- *   @keyvaluesystems/react-dot-matrix-chart v0.2.7
+ *   @keyvaluesystems/react-dot-matrix-chart v0.3.0
  *   https://github.com/KeyValueSoftwareSystems/react-dot-matrix-chart
@@ -12,3 +12,3 @@ *
  */
-!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):"object"==typeof exports?exports.DotMatrixChart=n(require("react")):e.DotMatrixChart=n(e.react)}(self,(e=>(()=>{"use strict";var n={595:(e,n,t)=>{t.d(n,{Z:()=>c});var r=t(537),o=t.n(r),a=t(645),i=t.n(a)()(o());i.push([e.id,".DjeDCbKmu3L_4VjjT4_a{padding:10px;width:inherit}.DjeDCbKmu3L_4VjjT4_a .FNE9s8sze_LUHJBJcXlJ{width:100%;display:flex;gap:20px;align-items:end}.DjeDCbKmu3L_4VjjT4_a .SRYcyh1rQvTsj4Yo3eTQ{display:flex;flex-wrap:wrap;gap:4px;width:100%}.DjeDCbKmu3L_4VjjT4_a .SRYcyh1rQvTsj4Yo3eTQ .RfJN7xlsCGWUpioIP6ZU{border-radius:50%;width:2.2rem;height:2.2rem}.DjeDCbKmu3L_4VjjT4_a .jxCs88i9BjXumQaRao6x{border-radius:50%;width:1.6rem;height:1.6rem}.DjeDCbKmu3L_4VjjT4_a .RHocwXVC3FGNmonnv6v8{display:flex;align-items:center;gap:6px}.DjeDCbKmu3L_4VjjT4_a .RHocwXVC3FGNmonnv6v8 .V7g61Is3oqUpm275rGlh{font-family:sans-serif;font-size:12px}.DjeDCbKmu3L_4VjjT4_a .mVJEvXAisq7CKikd0oXe{display:flex;flex-direction:column;gap:5px;border:1px solid #dcdcdc;padding:7px;width:max-content}","",{version:3,sources:["webpack://./src/lib/dot-matrix/styles.module.scss"],names:[],mappings:"AAAA,sBACE,YAAA,CACA,aAAA,CACA,4CACE,UAAA,CACA,YAAA,CACA,QAAA,CACA,eAAA,CAEF,4CACE,YAAA,CACA,cAAA,CACA,OAAA,CACA,UAAA,CACA,kEACE,iBAAA,CACA,YAAA,CACA,aAAA,CAGJ,4CACE,iBAAA,CACA,YAAA,CACA,aAAA,CAEF,4CACE,YAAA,CACA,kBAAA,CACA,OAAA,CACA,kEACE,sBAAA,CACA,cAAA,CAGJ,4CACE,YAAA,CACA,qBAAA,CACA,OAAA,CACA,wBAAA,CACA,WAAA,CACA,iBAAA",sourcesContent:[".container {\n  padding: 10px;\n  width: inherit;\n  .dotsWithLegend {\n    width: 100%;\n    display: flex;\n    gap: 20px;\n    align-items: end;\n  }\n  .dotsContainer {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    width: 100%;\n    .eachDot {\n      border-radius: 50%;\n      width: 2.2rem;\n      height: 2.2rem;\n    }\n  }\n  .legendDot {\n    border-radius: 50%;\n    width: 1.6rem;\n    height: 1.6rem;\n  }\n  .legend {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    .name {\n      font-family: sans-serif;\n      font-size: 12px\n    }\n  }\n  .legends {\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n    border: 1px solid gainsboro;\n    padding: 7px;\n    width: max-content;\n  }\n}"],sourceRoot:""}]),i.locals={container:"DjeDCbKmu3L_4VjjT4_a",dotsWithLegend:"FNE9s8sze_LUHJBJcXlJ",dotsContainer:"SRYcyh1rQvTsj4Yo3eTQ",eachDot:"RfJN7xlsCGWUpioIP6ZU",legendDot:"jxCs88i9BjXumQaRao6x",legend:"RHocwXVC3FGNmonnv6v8",name:"V7g61Is3oqUpm275rGlh",legends:"mVJEvXAisq7CKikd0oXe"};const c=i},645:e=>{e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t="",r=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),r&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),r&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function(e,t,r,o,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(r)for(var c=0;c<this.length;c++){var s=this[c][0];null!=s&&(i[s]=!0)}for(var l=0;l<e.length;l++){var d=[].concat(e[l]);r&&i[d[0]]||(void 0!==a&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=a),t&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=t):d[2]=t),o&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=o):d[4]="".concat(o)),n.push(d))}},n}},537:e=>{e.exports=function(e){var n=e[1],t=e[3];if(!t)return n;if("function"==typeof btoa){var r=btoa(unescape(encodeURIComponent(JSON.stringify(t)))),o="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(r),a="/*# ".concat(o," */");return[n].concat([a]).join("\n")}return[n].join("\n")}},379:e=>{var n=[];function t(e){for(var t=-1,r=0;r<n.length;r++)if(n[r].identifier===e){t=r;break}return t}function r(e,r){for(var a={},i=[],c=0;c<e.length;c++){var s=e[c],l=r.base?s[0]+r.base:s[0],d=a[l]||0,u="".concat(l," ").concat(d);a[l]=d+1;var p=t(u),f={css:s[1],media:s[2],sourceMap:s[3],supports:s[4],layer:s[5]};if(-1!==p)n[p].references++,n[p].updater(f);else{var A=o(f,r);r.byIndex=c,n.splice(c,0,{identifier:u,updater:A,references:1})}i.push(u)}return i}function o(e,n){var t=n.domAPI(n);t.update(e);return function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap&&n.supports===e.supports&&n.layer===e.layer)return;t.update(e=n)}else t.remove()}}e.exports=function(e,o){var a=r(e=e||[],o=o||{});return function(e){e=e||[];for(var i=0;i<a.length;i++){var c=t(a[i]);n[c].references--}for(var s=r(e,o),l=0;l<a.length;l++){var d=t(a[l]);0===n[d].references&&(n[d].updater(),n.splice(d,1))}a=s}}},569:e=>{var n={};e.exports=function(e,t){var r=function(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}n[e]=t}return n[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(t)}},216:e=>{e.exports=function(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},565:(e,n,t)=>{e.exports=function(e){var n=t.nc;n&&e.setAttribute("nonce",n)}},795:e=>{e.exports=function(e){var n=e.insertStyleElement(e);return{update:function(t){!function(e,n,t){var r="";t.supports&&(r+="@supports (".concat(t.supports,") {")),t.media&&(r+="@media ".concat(t.media," {"));var o=void 0!==t.layer;o&&(r+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),r+=t.css,o&&(r+="}"),t.media&&(r+="}"),t.supports&&(r+="}");var a=t.sourceMap;a&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),n.styleTagTransform(r,e,n.options)}(n,e,t)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},589:e=>{e.exports=function(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}},156:n=>{n.exports=e}},t={};function r(e){var o=t[e];if(void 0!==o)return o.exports;var a=t[e]={id:e,exports:{}};return n[e](a,a.exports,r),a.exports}r.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return r.d(n,{a:n}),n},r.d=(e,n)=>{for(var t in n)r.o(n,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nc=void 0;var o={};return(()=>{r.r(o),r.d(o,{default:()=>k});var e=r(156),n=r.n(e),t=r(379),a=r.n(t),i=r(795),c=r.n(i),s=r(569),l=r.n(s),d=r(565),u=r.n(d),p=r(216),f=r.n(p),A=r(589),m=r.n(A),v=r(595),h={};h.styleTagTransform=m(),h.setAttributes=u(),h.insert=l().bind(null,"head"),h.domAPI=c(),h.insertStyleElement=f();a()(v.Z,h);const C=v.Z&&v.Z.locals?v.Z.locals:void 0;var g,y=["#fd7f6f","#7eb0d5","#b2e061","#bd7ebe","#ffb55a","#ffee65","#beb9db","#fdcce5","#8bd3c7"];!function(e){e.Container="Container",e.DotsContainer="DotsContainer",e.Dot="Dot",e.LegendContainer="LegendContainer",e.LegendDot="LegendDot",e.LegendName="LegendName"}(g||(g={}));var b=function(e,n,t){void 0===t&&(t=[]);var r=null==e?void 0:e.find((function(e){return e.color===n})),o=null==t?void 0:t.find((function(e){return e.color===n}));return Boolean(r)||Boolean(o)},x=function(e){return{flexDirection:{left:"row-reverse",right:"row",top:"column-reverse",bottom:"column"}[e],alignItems:{left:"end",right:"end",top:"center",bottom:"center"}[e]}},j=function(e,n){var t=n[e];return t?t():{}},w=function(){return w=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},w.apply(this,arguments)},D=function(e,n,t){if(t||2===arguments.length)for(var r,o=0,a=n.length;o<a;o++)!r&&o in n||(r||(r=Array.prototype.slice.call(n,0,o)),r[o]=n[o]);return e.concat(r||Array.prototype.slice.call(n))};const E=function(n,t){var r=(0,e.useState)(0),o=r[0],a=r[1];(0,e.useEffect)((function(){i()}),[]),(0,e.useEffect)((function(){i()}),D([],t,!0)),window.onresize=function(){i()};var i=function(){var e=function(e){var n=document.getElementById(e),t=0;return n&&(t=n.clientWidth),t}(n);e&&a(e)};return o},L={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};let T;const N=new Uint8Array(16);function U(){if(!T&&(T="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!T))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return T(N)}const _=[];for(let e=0;e<256;++e)_.push((e+256).toString(16).slice(1));function O(e,n=0){return(_[e[n+0]]+_[e[n+1]]+_[e[n+2]]+_[e[n+3]]+"-"+_[e[n+4]]+_[e[n+5]]+"-"+_[e[n+6]]+_[e[n+7]]+"-"+_[e[n+8]]+_[e[n+9]]+"-"+_[e[n+10]]+_[e[n+11]]+_[e[n+12]]+_[e[n+13]]+_[e[n+14]]+_[e[n+15]]).toLowerCase()}const V=function(e,n,t){if(L.randomUUID&&!n&&!e)return L.randomUUID();const r=(e=e||{}).random||(e.rng||U)();if(r[6]=15&r[6]|64,r[8]=63&r[8]|128,n){t=t||0;for(let e=0;e<16;++e)n[t+e]=r[e];return n}return O(r)};var I=function(){return I=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},I.apply(this,arguments)};const S=function(t){var r=t.dimensions,o=void 0===r?{}:r,a=t.styles,i=t.data,c=t.overlappingValues,s=t.total,l=t.width,d=o.rows,u=void 0===d?5:d,p=o.columns,f=void 0===p?12:p,A=(0,e.useMemo)((function(){return l?l/f-4:35}),[l]);return n().createElement("div",{className:C.dotsContainer,style:I({},j(g.DotsContainer,a))},null==i?void 0:i.map((function(e,t){return n().createElement(n().Fragment,{key:V()},e&&Array.apply(null,Array(function(e,n,t,r){var o=e.count/r;return Math.floor(o*n*t)}(e,u,f,s))).map((function(r,o){return n().createElement("div",{id:"dot-matrix-dots",key:V()},(s=c,l=t,0===o&&l>0&&s[l-1]<1&&0!==s[l-1]&&n().createElement("div",{className:C.eachDot,style:I({backgroundImage:"linear-gradient(to right, ".concat(i[t-1].color," 20%, ").concat(null==e?void 0:e.color," 50%)"),width:"".concat(A,"px"),height:"".concat(A,"px")},j(g.Dot,a))})||n().createElement("div",{className:C.eachDot,style:I({backgroundColor:null==e?void 0:e.color,width:"".concat(A,"px"),height:"".concat(A,"px")},j(g.Dot,a)),key:V(),id:"each-category-".concat(t,"-").concat(o)})));var s,l})))})))};var M=function(){return M=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},M.apply(this,arguments)};const R=function(e){var t=e.styles,r=e.data;return n().createElement("div",{className:C.legends,style:M({},j(g.LegendContainer,t))},null==r?void 0:r.map((function(e){return n().createElement("div",{className:C.legend,key:V()},n().createElement("div",{className:C.legendDot,style:M({backgroundColor:null==e?void 0:e.color},j(g.LegendDot,t))}),n().createElement("div",{className:C.name,style:M({},j(g.LegendName,t))},e.name))})))};var B=function(){return B=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},B.apply(this,arguments)};const k=function(t){var r=t.dataPoints,o=t.dimensions,a=void 0===o?{rows:5,columns:12}:o,i=t.styles,c=void 0===i?{}:i,s=t.showLegend,l=void 0!==s&&s,d=t.legendPosition,u=void 0===d?"right":d,p=E("dots-container",[l,u]),f=function(n,t){var r=(0,e.useMemo)((function(){var e=[],t=0;if(n){var r=0;n.forEach((function(o){t+=o.count;var a=o.color;if(!a)do{a=y[r],r++}while(b(n,a,e));e.push(w(w({},o),{color:a}))}))}return[e,t]}),[n]),o=r[0],a=r[1],i=(0,e.useMemo)((function(){var e=[];return a&&(null==o||o.forEach((function(n){var r=t.rows,o=void 0===r?5:r,i=t.columns,c=void 0===i?12:i,s=n.count/a*o*c,l=s-Math.floor(s);e.push(l)}))),e}),[a]);return[o,a,i]}(r,a),A=f[0],m=f[1],v=f[2];return n().createElement("div",{className:C.container},n().createElement("div",{className:C.dotsWithLegend,style:B(B({},j(g.Container,c)),x(u))},n().createElement("div",{className:C.chartContainer,id:"dots-container"},n().createElement(S,{styles:c,dimensions:a,data:A,total:m,width:p,overlappingValues:v})),l&&n().createElement("div",null,n().createElement(R,{styles:c,data:A}))))}})(),o})()));
+!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):"object"==typeof exports?exports.DotMatrixChart=n(require("react")):e.DotMatrixChart=n(e.react)}(self,(e=>(()=>{"use strict";var n={595:(e,n,t)=>{t.d(n,{Z:()=>c});var o=t(537),r=t.n(o),a=t(645),i=t.n(a)()(r());i.push([e.id,".DjeDCbKmu3L_4VjjT4_a{padding:10px;width:inherit}.DjeDCbKmu3L_4VjjT4_a .FNE9s8sze_LUHJBJcXlJ{width:100%;display:flex;gap:20px;align-items:end}.DjeDCbKmu3L_4VjjT4_a .SRYcyh1rQvTsj4Yo3eTQ{display:flex;flex-wrap:wrap;gap:4px;width:100%}.DjeDCbKmu3L_4VjjT4_a .SRYcyh1rQvTsj4Yo3eTQ .RfJN7xlsCGWUpioIP6ZU{border-radius:50%;width:2.2rem;height:2.2rem}.DjeDCbKmu3L_4VjjT4_a .jxCs88i9BjXumQaRao6x{border-radius:50%;flex-shrink:0;width:1.6rem;height:1.6rem}.DjeDCbKmu3L_4VjjT4_a .RHocwXVC3FGNmonnv6v8{display:flex;align-items:center;gap:6px}.DjeDCbKmu3L_4VjjT4_a .RHocwXVC3FGNmonnv6v8 .V7g61Is3oqUpm275rGlh{font-family:sans-serif;font-size:12px}.DjeDCbKmu3L_4VjjT4_a .mVJEvXAisq7CKikd0oXe{display:flex;flex-direction:column;gap:5px;border:1px solid #dcdcdc;padding:7px;width:max-content}@media(max-width: 768px){.DjeDCbKmu3L_4VjjT4_a .jxCs88i9BjXumQaRao6x{width:.6rem;height:.6rem}.DjeDCbKmu3L_4VjjT4_a .RHocwXVC3FGNmonnv6v8 .V7g61Is3oqUpm275rGlh{font-size:8px}}","",{version:3,sources:["webpack://./src/lib/dot-matrix/styles.module.scss"],names:[],mappings:"AAAA,sBACE,YAAA,CACA,aAAA,CACA,4CACE,UAAA,CACA,YAAA,CACA,QAAA,CACA,eAAA,CAEF,4CACE,YAAA,CACA,cAAA,CACA,OAAA,CACA,UAAA,CACA,kEACE,iBAAA,CACA,YAAA,CACA,aAAA,CAGJ,4CACE,iBAAA,CACA,aAAA,CACA,YAAA,CACA,aAAA,CAEF,4CACE,YAAA,CACA,kBAAA,CACA,OAAA,CACA,kEACE,sBAAA,CACA,cAAA,CAGJ,4CACE,YAAA,CACA,qBAAA,CACA,OAAA,CACA,wBAAA,CACA,WAAA,CACA,iBAAA,CAGJ,yBAEI,4CACE,WAAA,CACA,YAAA,CAEF,kEACE,aAAA,CAAA",sourcesContent:[".container {\n  padding: 10px;\n  width: inherit;\n  .dotsWithLegend {\n    width: 100%;\n    display: flex;\n    gap: 20px;\n    align-items: end;\n  }\n  .dotsContainer {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    width: 100%;\n    .eachDot {\n      border-radius: 50%;\n      width: 2.2rem;\n      height: 2.2rem;\n    }\n  }\n  .legendDot {\n    border-radius: 50%;\n    flex-shrink: 0;\n    width: 1.6rem;\n    height: 1.6rem;\n  }\n  .legend {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    .name {\n      font-family: sans-serif;\n      font-size: 12px\n    }\n  }\n  .legends {\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n    border: 1px solid gainsboro;\n    padding: 7px;\n    width: max-content;\n  }\n}\n@media (max-width: 768px) {\n  .container{\n    .legendDot {\n      width: 0.6rem; \n      height: 0.6rem;\n    }\n    .legend .name {\n      font-size: 8px; \n    }\n  }\n\n}"],sourceRoot:""}]),i.locals={container:"DjeDCbKmu3L_4VjjT4_a",dotsWithLegend:"FNE9s8sze_LUHJBJcXlJ",dotsContainer:"SRYcyh1rQvTsj4Yo3eTQ",eachDot:"RfJN7xlsCGWUpioIP6ZU",legendDot:"jxCs88i9BjXumQaRao6x",legend:"RHocwXVC3FGNmonnv6v8",name:"V7g61Is3oqUpm275rGlh",legends:"mVJEvXAisq7CKikd0oXe"};const c=i},645:e=>{e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t="",o=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),o&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),o&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function(e,t,o,r,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(o)for(var c=0;c<this.length;c++){var s=this[c][0];null!=s&&(i[s]=!0)}for(var l=0;l<e.length;l++){var d=[].concat(e[l]);o&&i[d[0]]||(void 0!==a&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=a),t&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=t):d[2]=t),r&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=r):d[4]="".concat(r)),n.push(d))}},n}},537:e=>{e.exports=function(e){var n=e[1],t=e[3];if(!t)return n;if("function"==typeof btoa){var o=btoa(unescape(encodeURIComponent(JSON.stringify(t)))),r="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(o),a="/*# ".concat(r," */");return[n].concat([a]).join("\n")}return[n].join("\n")}},379:e=>{var n=[];function t(e){for(var t=-1,o=0;o<n.length;o++)if(n[o].identifier===e){t=o;break}return t}function o(e,o){for(var a={},i=[],c=0;c<e.length;c++){var s=e[c],l=o.base?s[0]+o.base:s[0],d=a[l]||0,u="".concat(l," ").concat(d);a[l]=d+1;var p=t(u),f={css:s[1],media:s[2],sourceMap:s[3],supports:s[4],layer:s[5]};if(-1!==p)n[p].references++,n[p].updater(f);else{var A=r(f,o);o.byIndex=c,n.splice(c,0,{identifier:u,updater:A,references:1})}i.push(u)}return i}function r(e,n){var t=n.domAPI(n);t.update(e);return function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap&&n.supports===e.supports&&n.layer===e.layer)return;t.update(e=n)}else t.remove()}}e.exports=function(e,r){var a=o(e=e||[],r=r||{});return function(e){e=e||[];for(var i=0;i<a.length;i++){var c=t(a[i]);n[c].references--}for(var s=o(e,r),l=0;l<a.length;l++){var d=t(a[l]);0===n[d].references&&(n[d].updater(),n.splice(d,1))}a=s}}},569:e=>{var n={};e.exports=function(e,t){var o=function(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}n[e]=t}return n[e]}(e);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(t)}},216:e=>{e.exports=function(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},565:(e,n,t)=>{e.exports=function(e){var n=t.nc;n&&e.setAttribute("nonce",n)}},795:e=>{e.exports=function(e){var n=e.insertStyleElement(e);return{update:function(t){!function(e,n,t){var o="";t.supports&&(o+="@supports (".concat(t.supports,") {")),t.media&&(o+="@media ".concat(t.media," {"));var r=void 0!==t.layer;r&&(o+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),o+=t.css,r&&(o+="}"),t.media&&(o+="}"),t.supports&&(o+="}");var a=t.sourceMap;a&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),n.styleTagTransform(o,e,n.options)}(n,e,t)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},589:e=>{e.exports=function(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}},156:n=>{n.exports=e}},t={};function o(e){var r=t[e];if(void 0!==r)return r.exports;var a=t[e]={id:e,exports:{}};return n[e](a,a.exports,o),a.exports}o.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return o.d(n,{a:n}),n},o.d=(e,n)=>{for(var t in n)o.o(n,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},o.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.nc=void 0;var r={};return(()=>{o.r(r),o.d(r,{default:()=>M});var e,n=o(156),t=o.n(n),a=["#fd7f6f","#7eb0d5","#b2e061","#bd7ebe","#ffb55a","#ffee65","#beb9db","#fdcce5","#8bd3c7"];!function(e){e.Container="Container",e.DotsContainer="DotsContainer",e.Dot="Dot",e.LegendContainer="LegendContainer",e.LegendDot="LegendDot",e.LegendName="LegendName"}(e||(e={}));var i=function(e,n,t){void 0===t&&(t=[]);var o=null==e?void 0:e.find((function(e){return e.color===n})),r=null==t?void 0:t.find((function(e){return e.color===n}));return Boolean(o)||Boolean(r)},c=function(e){var n=e.split("-"),t=n[0],o=n[1];return{flexDirection:{left:"row-reverse",right:"row",top:"column-reverse",bottom:"column"}[t],alignItems:o||"center"}},s=function(e,n){var t=n[e];return t?t():{}},l=function(){return l=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},l.apply(this,arguments)},d=o(379),u=o.n(d),p=o(795),f=o.n(p),A=o(569),m=o.n(A),v=o(565),C=o.n(v),h=o(216),g=o.n(h),y=o(589),x=o.n(y),b=o(595),j={};j.styleTagTransform=x(),j.setAttributes=C(),j.insert=m().bind(null,"head"),j.domAPI=f(),j.insertStyleElement=g();u()(b.Z,j);const w=b.Z&&b.Z.locals?b.Z.locals:void 0;var D=function(){return D=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},D.apply(this,arguments)},E=function(e,n,t){if(t||2===arguments.length)for(var o,r=0,a=n.length;r<a;r++)!o&&r in n||(o||(o=Array.prototype.slice.call(n,0,r)),o[r]=n[r]);return e.concat(o||Array.prototype.slice.call(n))};const L=function(o){var r=o.dimensions,a=void 0===r?{}:r,i=o.styles,c=o.dotsToBeMapped,l=o.fractionalDots,d=o.total,u=o.width,p=o.spaceBetweenDots,f=a.rows,A=void 0===f?5:f,m=a.columns,v=void 0===m?12:m,C=(0,n.useMemo)((function(){return u?u/v-p:10}),[u]);return t().createElement("div",{className:w.dotsContainer,style:D({gap:"".concat(p,"px")},s(e.DotsContainer,i))},null==c?void 0:c.map((function(n,o){return t().createElement(t().Fragment,{key:"".concat(n.name,"-").concat(o)},n&&E([],Array(function(e,n,t,o){var r=e.count/o;return Math.floor(r*n*t)}(n,A,v,d)),!0).map((function(r,a){return t().createElement("div",{id:"dot-matrix-dots",key:"".concat(n.name,"-").concat(o,"-").concat(a)},(d=l,u=o,0===a&&u>0&&d[u-1]<1&&0!==d[u-1]?t().createElement("div",{className:w.eachDot,style:D({backgroundImage:"linear-gradient(to right, ".concat(c[o-1].color," 20%, ").concat(null==n?void 0:n.color," 50%)"),width:"".concat(C,"px"),height:"".concat(C,"px")},s(e.Dot,i))}):t().createElement("div",{className:w.eachDot,style:D({backgroundColor:null==n?void 0:n.color,width:"".concat(C,"px"),height:"".concat(C,"px")},s(e.Dot,i)),id:"each-category-".concat(o,"-").concat(a)})));var d,u})))})))};var T=function(){return T=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},T.apply(this,arguments)};const _=function(n){var o=n.styles,r=n.data;return t().createElement("div",{id:"legend-container",className:w.legends,style:T({},s(e.LegendContainer,o))},null==r?void 0:r.map((function(n,r){return t().createElement("div",{className:w.legend,key:"".concat(n.name,"-").concat(r)},t().createElement("div",{className:w.legendDot,style:T({backgroundColor:n.color},s(e.LegendDot,o))}),t().createElement("div",{className:w.name,style:T({},s(e.LegendName,o))},n.name))})))};var N=function(e,n,t){if(t||2===arguments.length)for(var o,r=0,a=n.length;r<a;r++)!o&&r in n||(o||(o=Array.prototype.slice.call(n,0,r)),o[r]=n[r]);return e.concat(o||Array.prototype.slice.call(n))};const B=function(e,t){var o=(0,n.useState)(600),r=o[0],a=o[1];(0,n.useEffect)((function(){i()}),[]),(0,n.useEffect)((function(){i()}),N([],t,!0)),(0,n.useEffect)((function(){if("undefined"!=typeof window)return window.addEventListener("resize",i),function(){window.removeEventListener("resize",i)}}),[]);var i=function(){var n;"undefined"!=typeof window&&(n=function(e){var n=document.getElementById(e),t=0;return n&&(t=n.clientWidth),t}(e)),n&&a(n)};return r};var O=function(){return O=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},O.apply(this,arguments)};const M=function(o){var r=o.dataPoints,d=o.dimensions,u=void 0===d?{rows:5,columns:12}:d,p=o.spaceBetweenDots,f=void 0===p?4:p,A=o.styles,m=void 0===A?{}:A,v=o.showLegend,C=void 0!==v&&v,h=o.legendPosition,g=void 0===h?"right-end":h,y=B("dots-container",[C,g]),x=function(e,t){var o=(0,n.useMemo)((function(){var n=[],t=0;if(e){var o=0;e.forEach((function(r){t+=r.count;var c=r.color;if(!c)do{c=a[o],o++}while(i(e,c,n));n.push(l(l({},r),{color:c}))}))}return[n,t]}),[e]),r=o[0],c=o[1],s=(0,n.useMemo)((function(){var e=[];return c&&(null==r||r.forEach((function(n){var o=t.rows,r=void 0===o?5:o,a=t.columns,i=void 0===a?12:a,s=n.count/c*r*i,l=s-Math.floor(s);null==e||e.push(l)}))),e}),[c]);return[r,c,s]}(r,u),b=x[0],j=x[1],D=x[2];return t().createElement("div",{className:w.container},t().createElement("div",{className:w.dotsWithLegend,style:O(O({},s(e.Container,m)),c(g))},t().createElement("div",{className:w.chartContainer,id:"dots-container"},t().createElement(L,{styles:m,dimensions:u,dotsToBeMapped:b,total:j,width:y,fractionalDots:D,spaceBetweenDots:f})),C&&t().createElement(_,{styles:m,data:b})))}})(),r})()));
 //# sourceMappingURL=index.js.map

build/types/lib/dot-matrix/Chart.d.ts

 /// <reference types="react" />
-import { ChartProps } from './types';
+import { ChartProps } from "./types";
 declare const Chart: (props: ChartProps) => JSX.Element;
 export default Chart;

build/types/lib/dot-matrix/Chart.js

@@ -12,14 +12,23 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { useMemo } from 'react';
-import { v4 } from 'uuid';
-import { getNumberOfDots, getStyles, hasOverlapping } from './utils/utils';
-import { Elements, DEFAULT_COLUMNS, DEFAULT_ROWS, DEFAULT_ROW_WIDTH, DEFAULT_ROW_GAP } from './constants';
-import classes from './styles.module.scss';
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useMemo } from "react";
+import { getNumberOfDots, getStyles, hasOverlapping } from "./utils/utils";
+import { DEFAULT_COLUMNS, DEFAULT_DOT_WIDTH, DEFAULT_ROWS, Elements } from "./constants";
+import classes from "./styles.module.scss";
 var Chart = function (props) {
-    var _a = props.dimensions, dimensions = _a === void 0 ? {} : _a, styles = props.styles, data = props.data, overlappingValues = props.overlappingValues, total = props.total, width = props.width;
+    var _a = props.dimensions, dimensions = _a === void 0 ? {} : _a, styles = props.styles, dotsToBeMapped = props.dotsToBeMapped, fractionalDots = props.fractionalDots, total = props.total, width = props.width, spaceBetweenDots = props.spaceBetweenDots;
     var _b = dimensions.rows, rows = _b === void 0 ? DEFAULT_ROWS : _b, _c = dimensions.columns, columns = _c === void 0 ? DEFAULT_COLUMNS : _c;
-    var dotWidth = useMemo(function () { return (width ? width / columns - DEFAULT_ROW_GAP : DEFAULT_ROW_WIDTH); }, [width]);
-    return (React.createElement("div", { className: classes.dotsContainer, style: __assign({}, getStyles(Elements.DotsContainer, styles)) }, data === null || data === void 0 ? void 0 : data.map(function (dataItem, rowIndex) { return (React.createElement(React.Fragment, { key: v4() }, dataItem && Array.apply(null, Array(getNumberOfDots(dataItem, rows, columns, total))).map(function (item, columnIndex) { return (React.createElement("div", { id: "dot-matrix-dots", key: v4() }, (hasOverlapping(overlappingValues, rowIndex, columnIndex) && (React.createElement("div", { className: classes.eachDot, style: __assign({ backgroundImage: "linear-gradient(to right, ".concat(data[rowIndex - 1].color, " 20%, ").concat(dataItem === null || dataItem === void 0 ? void 0 : dataItem.color, " 50%)"), width: "".concat(dotWidth, "px"), height: "".concat(dotWidth, "px") }, getStyles(Elements.Dot, styles)) }))) || (React.createElement("div", { className: classes.eachDot, style: __assign({ backgroundColor: dataItem === null || dataItem === void 0 ? void 0 : dataItem.color, width: "".concat(dotWidth, "px"), height: "".concat(dotWidth, "px") }, getStyles(Elements.Dot, styles)), key: v4(), id: "each-category-".concat(rowIndex, "-").concat(columnIndex) })))); }))); })));
+    var dotWidth = useMemo(function () { return (width ? width / columns - spaceBetweenDots : DEFAULT_DOT_WIDTH); }, [width]);
+    return (React.createElement("div", { className: classes.dotsContainer, style: __assign({ gap: "".concat(spaceBetweenDots, "px") }, getStyles(Elements.DotsContainer, styles)) }, dotsToBeMapped === null || dotsToBeMapped === void 0 ? void 0 : dotsToBeMapped.map(function (dataItem, rowIndex) { return (React.createElement(React.Fragment, { key: "".concat(dataItem.name, "-").concat(rowIndex) }, dataItem &&
+        __spreadArray([], Array(getNumberOfDots(dataItem, rows, columns, total)), true).map(function (item, columnIndex) { return (React.createElement("div", { id: "dot-matrix-dots", key: "".concat(dataItem.name, "-").concat(rowIndex, "-").concat(columnIndex) }, hasOverlapping(fractionalDots, rowIndex, columnIndex) ? (React.createElement("div", { className: classes.eachDot, style: __assign({ backgroundImage: "linear-gradient(to right, ".concat(dotsToBeMapped[rowIndex - 1].color, " 20%, ").concat(dataItem === null || dataItem === void 0 ? void 0 : dataItem.color, " 50%)"), width: "".concat(dotWidth, "px"), height: "".concat(dotWidth, "px") }, getStyles(Elements.Dot, styles)) })) : (React.createElement("div", { className: classes.eachDot, style: __assign({ backgroundColor: dataItem === null || dataItem === void 0 ? void 0 : dataItem.color, width: "".concat(dotWidth, "px"), height: "".concat(dotWidth, "px") }, getStyles(Elements.Dot, styles)), id: "each-category-".concat(rowIndex, "-").concat(columnIndex) })))); }))); })));
 };
 export default Chart;
 //# sourceMappingURL=Chart.js.map

build/types/lib/dot-matrix/constants.d.ts

@@ -1,2 +0,2 @@
-export declare const COLOR_PALATTE: string[];
+export declare const COLOR_PALETTE: string[];
 export declare enum Elements {
@@ -12,4 +12,5 @@ Container = "Container",
 export declare const DEFAULT_COLUMNS = 12;
-export declare const DEFAULT_LEGEND_POSITION = "right";
-export declare const DEFAULT_ROW_WIDTH = 35;
-export declare const DEFAULT_ROW_GAP = 4;
+export declare const DEFAULT_LEGEND_POSITION = "right-end";
+export declare const DEFAULT_DOT_WIDTH = 10;
+export declare const DEFAULT_GAP = 4;
+export declare const DEFAULT_DOT_CONTAINER_WIDTH = 600;

build/types/lib/dot-matrix/constants.js

@@ -1,11 +0,11 @@
-export var COLOR_PALATTE = [
-    '#fd7f6f',
-    '#7eb0d5',
-    '#b2e061',
-    '#bd7ebe',
-    '#ffb55a',
-    '#ffee65',
-    '#beb9db',
-    '#fdcce5',
-    '#8bd3c7'
+export var COLOR_PALETTE = [
+    "#fd7f6f",
+    "#7eb0d5",
+    "#b2e061",
+    "#bd7ebe",
+    "#ffb55a",
+    "#ffee65",
+    "#beb9db",
+    "#fdcce5",
+    "#8bd3c7"
 ];
@@ -23,5 +23,6 @@ export var Elements;
 export var DEFAULT_COLUMNS = 12;
-export var DEFAULT_LEGEND_POSITION = 'right';
-export var DEFAULT_ROW_WIDTH = 35;
-export var DEFAULT_ROW_GAP = 4;
+export var DEFAULT_LEGEND_POSITION = "right-end";
+export var DEFAULT_DOT_WIDTH = 10;
+export var DEFAULT_GAP = 4;
+export var DEFAULT_DOT_CONTAINER_WIDTH = 600;
 //# sourceMappingURL=constants.js.map

build/types/lib/dot-matrix/custom-hooks/useChartContainerWidth.js

@@ -10,6 +10,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
-import { useState, useEffect } from 'react';
-import { findContainerWidth } from '../utils/utils';
+import { useEffect, useState } from "react";
+import { DEFAULT_DOT_CONTAINER_WIDTH } from "../constants";
+import { findContainerWidth } from "../utils/utils";
 var useChartContainerWidth = function (id, dependencyArray) {
-    var _a = useState(0), width = _a[0], setWidth = _a[1];
+    var _a = useState(DEFAULT_DOT_CONTAINER_WIDTH), width = _a[0], setWidth = _a[1];
     useEffect(function () {
@@ -21,7 +22,14 @@ updateContainerWidth();
     }, __spreadArray([], dependencyArray, true));
-    window.onresize = function () {
-        updateContainerWidth();
-    };
+    useEffect(function () {
+        if (typeof window !== "undefined") {
+            window.addEventListener("resize", updateContainerWidth);
+            return function () {
+                window.removeEventListener("resize", updateContainerWidth);
+            };
+        }
+    }, []);
     var updateContainerWidth = function () {
-        var widthValue = findContainerWidth(id);
+        var widthValue;
+        if (typeof window !== "undefined")
+            widthValue = findContainerWidth(id);
         if (widthValue)
@@ -28,0 +36,0 @@ setWidth(widthValue);

build/types/lib/dot-matrix/custom-hooks/useDotMatrix.d.ts

@@ -1,5 +0,2 @@
-import { DataPointType } from '../types';
-export declare const useDotMatrix: (dataPoints: DataPointType[], dimensions: {
-    rows?: number;
-    columns?: number;
-}) => [DataPointType[], number, number[]];
+import { DataPointType, DimensionProp } from "../types";
+export declare const useDotMatrix: (dataPoints: DataPointType[], dimensions: DimensionProp) => [DataPointType[], number, number[]];

build/types/lib/dot-matrix/custom-hooks/useDotMatrix.js

@@ -13,39 +13,41 @@ var __assign = (this && this.__assign) || function () {
 import { useMemo } from "react";
-import { COLOR_PALATTE, DEFAULT_COLUMNS, DEFAULT_ROWS } from '../constants';
-import { isColorPresent } from "../utils/utils";
+import { COLOR_PALETTE, DEFAULT_COLUMNS, DEFAULT_ROWS } from "../constants";
+import { isColorAlreadyUsed } from "../utils/utils";
 export var useDotMatrix = function (dataPoints, dimensions) {
     var _a = useMemo(function () {
-        var values = [];
-        var totalVal = 0;
+        var dotMatrixData = [];
+        var totalCount = 0;
         if (dataPoints) {
             var colorIndex_1 = 0;
             dataPoints.forEach(function (point) {
-                totalVal += point.count;
+                totalCount += point.count;
                 var color = point.color;
                 if (!color) {
                     do {
-                        color = COLOR_PALATTE[colorIndex_1];
+                        color = COLOR_PALETTE[colorIndex_1];
                         colorIndex_1++;
-                    } while (isColorPresent(dataPoints, color, values));
+                    } while (isColorAlreadyUsed(dataPoints, color, dotMatrixData));
                 }
-                values.push(__assign(__assign({}, point), { color: color }));
+                dotMatrixData.push(__assign(__assign({}, point), { color: color }));
             });
         }
-        return [values, totalVal];
-    }, [dataPoints]), data = _a[0], total = _a[1];
-    var overlappingValues = useMemo(function () {
-        var partial = [];
-        if (total) {
-            data === null || data === void 0 ? void 0 : data.forEach(function (each) {
+        return [dotMatrixData, totalCount];
+    }, [dataPoints]), dotsToBeMapped = _a[0], totalDots = _a[1];
+    // Calculates fractional part of a category based on the provided data points
+    // relative to the total number of dots and dimension
+    var fractionalDots = useMemo(function () {
+        var fractionalParts = [];
+        if (totalDots) {
+            dotsToBeMapped === null || dotsToBeMapped === void 0 ? void 0 : dotsToBeMapped.forEach(function (point) {
                 var _a = dimensions.rows, rows = _a === void 0 ? DEFAULT_ROWS : _a, _b = dimensions.columns, columns = _b === void 0 ? DEFAULT_COLUMNS : _b;
-                var percentage = each.count / total;
-                var partialDots = percentage * rows * columns;
-                var value = partialDots - Math.floor(partialDots);
-                partial.push(value);
+                var pointPercentage = point.count / totalDots;
+                var dotsCount = pointPercentage * rows * columns;
+                var dotFraction = dotsCount - Math.floor(dotsCount);
+                fractionalParts === null || fractionalParts === void 0 ? void 0 : fractionalParts.push(dotFraction);
             });
         }
-        return partial;
-    }, [total]);
-    return [data, total, overlappingValues];
+        return fractionalParts;
+    }, [totalDots]);
+    return [dotsToBeMapped, totalDots, fractionalDots];
 };
 //# sourceMappingURL=useDotMatrix.js.map

build/types/lib/dot-matrix/DotMatrix.d.ts

 /// <reference types="react" />
-import { DotMatrixPropType } from './types';
+import { DotMatrixPropType } from "./types";
 declare const DotMatrix: (props: DotMatrixPropType) => JSX.Element;
 export default DotMatrix;

build/types/lib/dot-matrix/DotMatrix.js

@@ -12,10 +12,10 @@ var __assign = (this && this.__assign) || function () {
 };
-import React from 'react';
-import classes from './styles.module.scss';
-import { useDotMatrix } from './custom-hooks/useDotMatrix';
-import useChartContainerWidth from './custom-hooks/useChartContainerWidth';
-import Chart from './Chart';
-import Legend from './Legend';
-import { getLegendPosition, getStyles } from './utils/utils';
-import { Elements, DEFAULT_COLUMNS, DEFAULT_ROWS, DEFAULT_LEGEND_POSITION } from './constants';
+import React from "react";
+import { useDotMatrix } from "./custom-hooks/useDotMatrix";
+import { getLegendPosition, getStyles } from "./utils/utils";
+import { DEFAULT_COLUMNS, DEFAULT_GAP, DEFAULT_LEGEND_POSITION, DEFAULT_ROWS, Elements } from "./constants";
+import Chart from "./Chart";
+import Legend from "./Legend";
+import useChartContainerWidth from "./custom-hooks/useChartContainerWidth";
+import classes from "./styles.module.scss";
 var DotMatrix = function (props) {
@@ -25,16 +25,15 @@ var dataPoints = props.dataPoints, _a = props.dimensions, dimensions = _a === void 0 ? {
         columns: DEFAULT_COLUMNS
-    } : _a, _b = props.styles, styles = _b === void 0 ? {} : _b, _c = props.showLegend, showLegend = _c === void 0 ? false : _c, _d = props.legendPosition, legendPosition = _d === void 0 ? DEFAULT_LEGEND_POSITION : _d;
-    var width = useChartContainerWidth('dots-container', [
+    } : _a, _b = props.spaceBetweenDots, spaceBetweenDots = _b === void 0 ? DEFAULT_GAP : _b, _c = props.styles, styles = _c === void 0 ? {} : _c, _d = props.showLegend, showLegend = _d === void 0 ? false : _d, _e = props.legendPosition, legendPosition = _e === void 0 ? DEFAULT_LEGEND_POSITION : _e;
+    var width = useChartContainerWidth("dots-container", [
         showLegend,
         legendPosition
     ]);
-    var _e = useDotMatrix(dataPoints, dimensions), data = _e[0], total = _e[1], overlappingValues = _e[2];
+    var _f = useDotMatrix(dataPoints, dimensions), dotsToBeMapped = _f[0], totalDots = _f[1], fractionalDots = _f[2];
     return (React.createElement("div", { className: classes.container },
         React.createElement("div", { className: classes.dotsWithLegend, style: __assign(__assign({}, getStyles(Elements.Container, styles)), getLegendPosition(legendPosition)) },
             React.createElement("div", { className: classes.chartContainer, id: "dots-container" },
-                React.createElement(Chart, { styles: styles, dimensions: dimensions, data: data, total: total, width: width, overlappingValues: overlappingValues })),
-            showLegend && (React.createElement("div", null,
-                React.createElement(Legend, { styles: styles, data: data }))))));
+                React.createElement(Chart, { styles: styles, dimensions: dimensions, dotsToBeMapped: dotsToBeMapped, total: totalDots, width: width, fractionalDots: fractionalDots, spaceBetweenDots: spaceBetweenDots })),
+            showLegend && React.createElement(Legend, { styles: styles, data: dotsToBeMapped }))));
 };
 export default DotMatrix;
 //# sourceMappingURL=DotMatrix.js.map

build/types/lib/dot-matrix/Legend.js

@@ -12,11 +12,10 @@ var __assign = (this && this.__assign) || function () {
 };
-import React from 'react';
-import { v4 } from 'uuid';
-import { getStyles } from './utils/utils';
-import { Elements } from './constants';
-import classes from './styles.module.scss';
+import React from "react";
+import { getStyles } from "./utils/utils";
+import { Elements } from "./constants";
+import classes from "./styles.module.scss";
 var Legend = function (props) {
     var styles = props.styles, data = props.data;
-    return (React.createElement("div", { className: classes.legends, style: __assign({}, getStyles(Elements.LegendContainer, styles)) }, data === null || data === void 0 ? void 0 : data.map(function (point) { return (React.createElement("div", { className: classes.legend, key: v4() },
-        React.createElement("div", { className: classes.legendDot, style: __assign({ backgroundColor: point === null || point === void 0 ? void 0 : point.color }, (getStyles(Elements.LegendDot, styles))) }),
+    return (React.createElement("div", { id: "legend-container", className: classes.legends, style: __assign({}, getStyles(Elements.LegendContainer, styles)) }, data === null || data === void 0 ? void 0 : data.map(function (point, index) { return (React.createElement("div", { className: classes.legend, key: "".concat(point.name, "-").concat(index) },
+        React.createElement("div", { className: classes.legendDot, style: __assign({ backgroundColor: point.color }, getStyles(Elements.LegendDot, styles)) }),
         React.createElement("div", { className: classes.name, style: __assign({}, getStyles(Elements.LegendName, styles)) }, point.name))); })));
@@ -23,0 +22,0 @@ };

build/types/lib/dot-matrix/utils/utils.d.ts

 import { DataPointType, StyleProp } from "../types";
-import { Elements } from '../constants';
+import { Elements } from "../constants";
 export declare const getNumberOfDots: (point: DataPointType, rows: number, columns: number, total: number) => number;
-export declare const isColorPresent: (dataPoints: DataPointType[], color: string, dataValues?: DataPointType[]) => boolean;
+export declare const isColorAlreadyUsed: (dataPoints: DataPointType[], color: string, dataValues?: DataPointType[]) => boolean;
 export declare const getLegendPosition: (legendPosition: string) => {
@@ -6,0 +6,0 @@ flexDirection: string;

build/types/lib/dot-matrix/utils/utils.js

@@ -5,3 +5,3 @@ export var getNumberOfDots = function (point, rows, columns, total) {
 };
-export var isColorPresent = function (dataPoints, color, dataValues) {
+export var isColorAlreadyUsed = function (dataPoints, color, dataValues) {
     if (dataValues === void 0) { dataValues = []; }
@@ -13,15 +13,13 @@ var findColor = dataPoints === null || dataPoints === void 0 ? void 0 : dataPoints.find(function (e) { return e.color === color; });
 export var getLegendPosition = function (legendPosition) {
+    var _a = legendPosition.split("-"), position = _a[0], alignment = _a[1];
     var flexDirection = {
-        left: 'row-reverse',
-        right: 'row',
-        top: 'column-reverse',
-        bottom: 'column'
+        left: "row-reverse",
+        right: "row",
+        top: "column-reverse",
+        bottom: "column"
     };
-    var alignment = {
-        left: 'end',
-        right: 'end',
-        top: 'center',
-        bottom: 'center'
+    return {
+        flexDirection: flexDirection[position],
+        alignItems: alignment ? alignment : "center"
     };
-    return { flexDirection: flexDirection[legendPosition], alignItems: alignment[legendPosition] };
 };
@@ -35,3 +33,8 @@ export var getStyles = function (element, styles) {
 };
-export var hasOverlapping = function (values, indexRow, indexColumn) { return (indexColumn === 0 && indexRow > 0 && values[indexRow - 1] < 1 && values[indexRow - 1] !== 0); };
+export var hasOverlapping = function (values, indexRow, indexColumn) {
+    return indexColumn === 0 &&
+        indexRow > 0 &&
+        values[indexRow - 1] < 1 &&
+        values[indexRow - 1] !== 0;
+};
 export var findContainerWidth = function (id) {
@@ -38,0 +41,0 @@ var element = document.getElementById(id);

build/types/stories/Component.stories.d.ts

 /// <reference types="react" />
-import { ComponentMeta } from '@storybook/react';
+import { ComponentMeta } from "@storybook/react";
 declare const _default: ComponentMeta<(props: import("../lib/dot-matrix/types").DotMatrixPropType) => JSX.Element>;
 export default _default;
 export declare const DotMatrixExample: any;
+export declare const DotMatrixWithCustomStyles: any;
+export declare const DotMatrixWithGradientDot: any;

build/types/stories/Component.stories.js

@@ -12,13 +12,13 @@ var __assign = (this && this.__assign) || function () {
 };
-import React from 'react';
-import Component from '../lib';
+import React from "react";
+import Component from "../lib";
 export default {
-    title: 'Storybook/Dot Matrix Chart',
+    title: "Storybook/Dot Matrix Chart",
     component: Component,
     parameters: {
         // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-        layout: 'fullscreen',
-    },
+        layout: "fullscreen"
+    }
 };
-var Template = function (args) { return React.createElement(Component, __assign({}, args)); };
+var Template = function (args) { return (React.createElement(Component, __assign({}, args))); };
 export var DotMatrixExample = Template.bind({});
@@ -28,29 +28,111 @@ DotMatrixExample.args = {
         rows: 5,
-        columns: 10,
+        columns: 5
     },
-    styles: {},
     dataPoints: [
         {
-            name: 'Category 1',
+            name: "Electronics",
+            count: 25
+        },
+        {
+            name: "Fashion",
+            count: 18
+        },
+        {
+            name: "Home & Garden",
+            count: 12
+        },
+        {
+            name: "Sports & Outdoors",
+            count: 30
+        },
+        {
+            name: "Beauty & Personal Care",
+            count: 15
+        }
+    ]
+};
+export var DotMatrixWithCustomStyles = Template.bind({});
+DotMatrixWithCustomStyles.args = {
+    styles: {
+        LegendContainer: function () { return ({
+            border: "1px solid white",
+            width: "60%",
+            "@media (maxWidth: 768px)": {
+                width: "50%"
+            },
+            "@media (maxWidth: 480px)": {
+                width: "40%"
+            }
+        }); }
+    },
+    dimensions: {
+        rows: 8,
+        columns: 8
+    },
+    showLegend: true,
+    legendPosition: "right",
+    dataPoints: [
+        {
+            name: "Technology",
             count: 15,
-            color: '#96C3EB'
+            color: "#4CAF50"
         },
         {
-            name: 'Category 2',
-            count: 5
+            name: "Healthcare",
+            count: 5,
+            color: "#FF5722"
         },
         {
-            name: 'Category 3',
-            count: 10
+            name: "Finance",
+            count: 10,
+            color: "#2196F3"
         },
         {
-            name: 'Category 3',
-            count: 10
+            name: "Education",
+            count: 10,
+            color: "#FFC107"
         },
         {
-            name: 'Category 3',
-            count: 10
+            name: "Entertainment",
+            count: 10,
+            color: "#9C27B0"
         }
     ]
 };
+export var DotMatrixWithGradientDot = Template.bind({});
+DotMatrixWithGradientDot.args = {
+    showLegend: true,
+    dimensions: {
+        rows: 6,
+        columns: 5
+    },
+    legendPosition: "right-start",
+    dataPoints: [
+        {
+            name: "Art",
+            count: 21,
+            color: "#FFD700"
+        },
+        {
+            name: "Science",
+            count: 23,
+            color: "#ADD8E6"
+        },
+        {
+            name: "Sports",
+            count: 24,
+            color: "#FFA07A"
+        },
+        {
+            name: "Nature",
+            count: 21,
+            color: "#98FB98"
+        },
+        {
+            name: "Travel",
+            count: 25,
+            color: "#FFB6C1"
+        }
+    ]
+};
 //# sourceMappingURL=Component.stories.js.map

package.json

 {
   "name": "@keyvaluesystems/react-dot-matrix-chart",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "description": "A Dot Matrix Chart component",
@@ -80,3 +80,2 @@ "main": "build/index.js",
     "url-loader": "^4.1.1",
-    "uuid": "^9.0.0",
     "webpack": "^5.75.0",
@@ -96,2 +95,5 @@ "webpack-cli": "^5.0.1",
   },
+  "prettier": {
+    "trailingComma": "none"
+  },
   "jest": {
@@ -98,0 +100,0 @@ "moduleNameMapper": {

README.md

@@ -1,5 +0,1 @@
-
-  
-  
-
 # React Dot Matrix Chart
@@ -13,6 +9,5 @@
 
- 
->A customizable ready to use Dot Matrix Chart Component for React
+> A customizable ready to use Dot Matrix Chart Component for React
 
-Try tweaking a dot matrix using this codesandbox link <a href="https://codesandbox.io/s/dot-matrix-chart-hqw9z0" >here</a>
+Try tweaking a dot matrix using this codesandbox link <a href="https://codesandbox.io/s/dot-matrix-chart-996cd3" >here</a>
 
@@ -29,18 +24,10 @@ ## Installation
 
-  
-
 ## Usage
 
-  
-
 React Dot Matrix Chart can run in a very basic mode by just providing the `dataPoints` like given below:
 
 ```jsx
+import DotMatrix from "@keyvaluesystems/react-dot-matrix-chart";
 
-import DotMatrix from '@keyvaluesystems/react-dot-matrix-chart';
-
-<DotMatrix
-  dataPoints={dataPointsArray}
-/>
-
+<DotMatrix dataPoints={dataPointsArray} />;
 ```
@@ -50,8 +37,6 @@
 
--  `name` - a string that represents each category
--  `count` - a number to specify the count of each category present(used to find the number of dots to be displayed)
--  `color` - a string to specify which colour to be used to represent the category in the dot matrix
+- `name` - a string that represents each category
+- `count` - a number to specify the count of each category present(used to find the number of dots to be displayed)
+- `color` - a string to specify which colour to be used to represent the category in the dot matrix
 
-  
-
 An example for dataPoints array is shown below:
@@ -62,18 +47,17 @@
   {
-    name: 'Category 1',
+    name: "Category 1",
     count: 10,
-    color: 'gray'
+    color: "gray"
   },
   {
-    name: 'Category 2',
+    name: "Category 2",
     count: 10,
-    color: 'black'
+    color: "black"
   },
   {
-    name: 'Category 3',
+    name: "Category 3",
     count: 10,
-    color: 'green'
+    color: "green"
   }
 ];
-
 ```
@@ -86,6 +70,6 @@
   dataPoints={dataPointsArray}
-  dimensions={
+  dimensions={{
     rows: 5,
     columns: 10
-  }
+  }}
 />
@@ -95,2 +79,3 @@ ```
 If the count given in the dataPoints array results in a partial percentage (decimal value), a gradient dot will be displayed as shown below
+
 <div  align="center">
@@ -100,15 +85,4 @@ <img  src="./screenshotPartial.png"  alt=""  width="208"  height="199"/>
 
-We can also control the display of the legend consisting of the details regarding the colour distribution using the props 'showLegend' and 'legendPosition' as follows.
-
-```jsx
-<DotMatrix
-  dataPoints={dataPointsArray}
-  showLegend={true}
-  legendPosition="top"
-/>
-```
 ## Props
 
-  
-
 Props that can be passed to the component are listed below:
@@ -140,7 +114,7 @@
     <tr>
-      <td><code><b>styles?:</b> object</code></td>
+      <td><code><b>spaceBetweenDots?:</b> number</code></td>
       <td>
-      Provides you with a bunch of callback functions to override the default styles.
+         To specify the distance between each dot
       </td>
-      <td><code>undefined</code></td>
+      <td><code>4</code></td>
     </tr>
@@ -155,12 +129,18 @@ <tr>
     <tr>
-      <td><code><b>legendPosition?:</b> string</code></td>
+      <td><code><b>legendPosition?:</b> 'left' | 'left-start' | 'left-end | 'right' | 'right-start' | 'right-end' | 'top'| 'top-start' | 'top-bottom' | 'bottom' | 'bottom-start' | 'bottom-end' </code></td>
       <td>
-        To specify the position of the legend. The values that can be passed using this prop are 'left', 'right', 'top' and 'bottom'
+        To specify the position of the legend.
       </td>
-      <td><code>right</code></td>
+      <td><code>right-end</code></td>
     </tr>
+      <tr>
+      <td><code><b>styles?:</b> object</code></td>
+      <td>
+      Provides you with a bunch of callback functions to override the default styles.
+      </td>
+      <td><code>undefined</code></td>
+    </tr>
   </tbody>
 </table>
 
-
 ## Style Customizations
@@ -175,18 +155,17 @@
   styles={{
-    Container: () => ({...styles}),
-    DotsContainer: () => ({...styles}),
-    Dot: () => ({...styles}),
-    LegendContainer: () => ({...styles}),
-    LegendName: () => ({...styles}),
-    LegendDot: () => ({...styles})
+    Container: () => ({ ...styles }),
+    DotsContainer: () => ({ ...styles }),
+    Dot: () => ({ ...styles }),
+    LegendContainer: () => ({ ...styles }),
+    LegendName: () => ({ ...styles }),
+    LegendDot: () => ({ ...styles })
   }}
 />
-
 ```
 
--  `Container` - overrides the dot matrix chart container style
--  `DotsContainer` - overrides the dot matrix chart dots container style
--  `Dot` - overrides the style of each dot in the chart
--  `LegendContainer` - overrides the legend (details) container style
--  `LegendName` - overrides the legend name style
--  `LegendDot` - overrides the legend dot style
+- `Container` - overrides the dot matrix chart container style
+- `DotsContainer` - overrides the dot matrix chart dots container style
+- `Dot` - overrides the style of each dot in the chart
+- `LegendContainer` - overrides the legend (details) container style
+- `LegendName` - overrides the legend name style
+- `LegendDot` - overrides the legend dot style

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

96080

increased by2.62%

Dev dependency count

49

decreased by-2%

Lines of code

509

increased by25.68%

Worsened metrics

Number of lines in readme file

162

decreased by-10.99%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes