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

Comparing version 0.3.1 to 0.3.2

build/index.js

 /*!
  * 
- *   @keyvaluesystems/react-dot-matrix-chart v0.3.1
+ *   @keyvaluesystems/react-dot-matrix-chart v0.3.2
  *   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)}(this,(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 d=0;d<e.length;d++){var l=[].concat(e[d]);o&&i[l[0]]||(void 0!==a&&(void 0===l[5]||(l[1]="@layer".concat(l[5].length>0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=a),t&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=t):l[2]=t),r&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=r):l[4]="".concat(r)),n.push(l))}},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],d=o.base?s[0]+o.base:s[0],l=a[d]||0,u="".concat(d," ").concat(l);a[d]=l+1;var f=t(u),p={css:s[1],media:s[2],sourceMap:s[3],supports:s[4],layer:s[5]};if(-1!==f)n[f].references++,n[f].updater(p);else{var A=r(p,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),d=0;d<a.length;d++){var l=t(a[d]);0===n[l].references&&(n[l].updater(),n.splice(l,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){if("undefined"==typeof document)return{update:function(){},remove:function(){}};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():{}},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)},l=o(379),u=o.n(l),f=o(795),p=o.n(f),A=o(569),m=o.n(A),v=o(565),C=o.n(v),h=o(216),y=o.n(h),g=o(589),b=o.n(g),x=o(595),w={};w.styleTagTransform=b(),w.setAttributes=C(),w.insert=m().bind(null,"head"),w.domAPI=p(),w.insertStyleElement=y();u()(x.Z,w);const j=x.Z&&x.Z.locals?x.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,d=o.fractionalDots,l=o.total,u=o.width,f=o.spaceBetweenDots,p=a.rows,A=void 0===p?5:p,m=a.columns,v=void 0===m?12:m,C=(0,n.useMemo)((function(){return u?u/v-f:10}),[u]);return t().createElement("div",{className:j.dotsContainer,style:D({gap:"".concat(f,"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,l)),!0).map((function(r,a){return t().createElement("div",{id:"dot-matrix-dots",key:"".concat(n.name,"-").concat(o,"-").concat(a)},(l=d,u=o,0===a&&u>0&&l[u-1]<1&&0!==l[u-1]?t().createElement("div",{className:j.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:j.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 l,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:j.legends,style:T({},s(e.LegendContainer,o))},null==r?void 0:r.map((function(n,r){return t().createElement("div",{className:j.legend,key:"".concat(n.name,"-").concat(r)},t().createElement("div",{className:j.legendDot,style:T({backgroundColor:n.color},s(e.LegendDot,o))}),t().createElement("div",{className:j.name,style:T({},s(e.LegendName,o))},n.name))})))};function N(e){return N="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},N(e)}var B=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 O=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()}),B([],t,!0)),(0,n.useEffect)((function(){if(void 0!==("undefined"==typeof window?"undefined":N(window)))return window.addEventListener("resize",i),function(){window.removeEventListener("resize",i)}}),[]);var i=function(){var n;void 0!==("undefined"==typeof window?"undefined":N(window))&&(n=function(e){var n=document.getElementById(e),t=0;return n&&(t=n.clientWidth),t}(e)),n&&a(n)};return r};var S=function(){return S=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},S.apply(this,arguments)};const M=function(o){var r=o.dataPoints,l=o.dimensions,u=void 0===l?{rows:5,columns:12}:l,f=o.spaceBetweenDots,p=void 0===f?4:f,A=o.styles,m=void 0===A?{}:A,v=o.showLegend,C=void 0!==v&&v,h=o.legendPosition,y=void 0===h?"right-end":h,g=O("dots-container",[C,y]),b=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(d(d({},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,d=s-Math.floor(s);null==e||e.push(d)}))),e}),[c]);return[r,c,s]}(r,u),x=b[0],w=b[1],D=b[2];return t().createElement("div",{className:j.container},t().createElement("div",{className:j.dotsWithLegend,style:S(S({},s(e.Container,m)),c(y))},t().createElement("div",{className:j.chartContainer,id:"dots-container"},t().createElement(L,{styles:m,dimensions:u,dotsToBeMapped:x,total:w,width:g,fractionalDots:D,spaceBetweenDots:p})),C&&t().createElement(_,{styles:m,data:x})))}})(),r})()));
+!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)}(this,(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%;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="",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 f=t(u),p={css:s[1],media:s[2],sourceMap:s[3],supports:s[4],layer:s[5]};if(-1!==f)n[f].references++,n[f].updater(p);else{var A=o(p,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){if("undefined"==typeof document)return{update:function(){},remove:function(){}};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,n=r(156),t=r.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){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))},c=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)},s=function(e){var n=e.split("-"),t=n[0],r=n[1];return{flexDirection:{left:"row-reverse",right:"row",top:"column-reverse",bottom:"column"}[t],alignItems:r||"center"}},l=function(e,n){var t=n[e];return t?t():{}},d=function(e,n){for(var t="linear-gradient(to right, ".concat(e[0]," ").concat(100*n[0]-15,"%, "),r=0,o=1;o<e.length;o++)t+="".concat(e[o]," ").concat(100*(r+n[o-1])+15,"%"),r=n[o],o!==e.length-1?t+=", ":t+=")";return t},u=function(e){var n=new Set;return e.filter((function(e){return!n.has(e.id)&&(n.add(e.id),!0)}))},f=function(){return f=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},f.apply(this,arguments)},p=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))},A=function(e,t){var r=(0,n.useMemo)((function(){var n=[],t=0;if(e){var r=0;e.forEach((function(o){t+=o.count;var i=o.color;if(!i)do{i=a[r],r++}while(c(e,i,n));n.push(f(f({},o),{color:i}))}))}return[n,t]}),[e]),o=r[0],s=r[1],l=(0,n.useMemo)((function(){var e=[];return s&&(null==o||o.forEach((function(n){var r=t.rows,o=void 0===r?5:r,a=t.columns,i=void 0===a?12:a,c=n.count/s*o*i;e.push(c)}))),e}),[s,t.columns,t.rows]);return(0,n.useMemo)((function(){for(var e=p([],l,!0),n=[],t=0;t<e.length-1;t++)if(e[t]%1!=0){for(var r=Math.floor(e[t]),a=1-(e[t]-r),c=[o[t].color],s=[e[t]-r],d=t+1;0!==a&&d<e.length;)e[d]>=a?(s.push(a),e[d]=e[d]-a,a=0):(a-=l[d],s.push(e[d]-Math.floor(e[d])),e[d]=0),e[t]=r,c.push(o[d].color),d++;n.push({id:t,count:1,name:o[t].name,gradientColors:c,gradientPercentage:s})}var u,f,A=[];for(t=0;t<e.length;t++)A.push({id:t,name:o[t].name,count:Math.round(e[t]),color:o[t].color});return u=n,(f=i(i([],A,!0),u,!0)).sort((function(e,n){return e.id-n.id})),f}),[e,t.rows,t.columns])},m=r(379),v=r.n(m),h=r(795),C=r.n(h),g=r(569),y=r.n(g),x=r(565),b=r.n(x),j=r(216),w=r.n(j),E=r(589),D=r.n(E),L=r(595),T={};T.styleTagTransform=D(),T.setAttributes=b(),T.insert=y().bind(null,"head"),T.domAPI=C(),T.insertStyleElement=w();v()(L.Z,T);const _=L.Z&&L.Z.locals?L.Z.locals:void 0;var N=function(){return N=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},N.apply(this,arguments)},B=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 M=function(r){var o=r.dimensions,a=void 0===o?{}:o,i=r.styles,c=r.dotsToBeMapped,s=r.width,u=r.spaceBetweenDots,f=a.columns,p=void 0===f?12:f,A=(0,n.useMemo)((function(){return s?s/p-u:10}),[s,p,u]);return t().createElement("div",{className:_.dotsContainer,style:N({gap:"".concat(u,"px")},l(e.DotsContainer,i))},null==c?void 0:c.map((function(n,r){return t().createElement(t().Fragment,{key:"".concat(n.id,"-").concat(r)},B([],Array(n.count),!0).map((function(o,a){return t().createElement("div",{id:"dot-matrix-dots",key:"".concat(n.id,"-").concat(r,"-").concat(a)},t().createElement("div",{className:_.eachDot,style:N({backgroundColor:null==n?void 0:n.color,backgroundImage:Array.isArray(n.gradientColors)&&Array.isArray(n.gradientPercentage)?d(n.gradientColors,n.gradientPercentage):"",width:"".concat(A,"px"),height:"".concat(A,"px")},l(e.Dot,i)),id:"each-category-".concat(r,"-").concat(a)}))})))})))};var O=function(){return O=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},O.apply(this,arguments)};const V=function(n){var r=n.styles,o=n.data;return t().createElement("div",{id:"legend-container",className:_.legends,style:O({},l(e.LegendContainer,r))},null==o?void 0:o.map((function(n,o){return t().createElement("div",{className:_.legend,key:"".concat(n.name,"-").concat(o)},t().createElement("div",{className:_.legendDot,style:O({backgroundColor:n.color||n.gradientColors&&n.gradientColors[0]},l(e.LegendDot,r))}),t().createElement("div",{className:_.name,style:O({},l(e.LegendName,r))},n.name))})))};var S=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 P=function(e,t){var r=(0,n.useState)(600),o=r[0],a=r[1];(0,n.useEffect)((function(){i()}),S([],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),a(n))};return o};var R=function(){return R=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},R.apply(this,arguments)};const k=function(n){var r=n.dataPoints,o=n.dimensions,a=void 0===o?{rows:5,columns:12}:o,i=n.spaceBetweenDots,c=void 0===i?4:i,d=n.styles,f=void 0===d?{}:d,p=n.showLegend,m=void 0!==p&&p,v=n.legendPosition,h=void 0===v?"right-end":v,C=P("dots-container",[m,h,a.rows||5,a.columns||12,c]),g=A(r,a);return t().createElement("div",{className:_.container},t().createElement("div",{className:_.dotsWithLegend,style:R(R({},l(e.Container,f)),s(h))},t().createElement("div",{className:_.chartContainer,id:"dots-container"},t().createElement(M,{styles:f,dimensions:a,dotsToBeMapped:g,width:C,spaceBetweenDots:c})),m&&t().createElement(V,{styles:f,data:u(g).filter((function(e){return e.color||(null==e?void 0:e.gradientColors)&&e.gradientColors.length>0}))})))}})(),o})()));
 //# sourceMappingURL=index.js.map

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

@@ -22,13 +22,16 @@ var __assign = (this && this.__assign) || function () {
 import React, { useMemo } from "react";
-import { getNumberOfDots, getStyles, hasOverlapping } from "./utils/utils";
-import { DEFAULT_COLUMNS, DEFAULT_DOT_WIDTH, DEFAULT_ROWS, Elements } from "./constants";
+import { getGradient, getStyles } from "./utils/utils";
+import { DEFAULT_COLUMNS, DEFAULT_DOT_WIDTH, 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, 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 - 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) })))); }))); })));
+    var _a = props.dimensions, dimensions = _a === void 0 ? {} : _a, styles = props.styles, dotsToBeMapped = props.dotsToBeMapped, width = props.width, spaceBetweenDots = props.spaceBetweenDots;
+    var _b = dimensions.columns, columns = _b === void 0 ? DEFAULT_COLUMNS : _b;
+    var dotWidth = useMemo(function () { return (width ? width / columns - spaceBetweenDots : DEFAULT_DOT_WIDTH); }, [width, columns, spaceBetweenDots]);
+    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.id, "-").concat(rowIndex) }, __spreadArray([], Array(dataItem.count), true).map(function (item, columnIndex) { return (React.createElement("div", { id: "dot-matrix-dots", key: "".concat(dataItem.id, "-").concat(rowIndex, "-").concat(columnIndex) },
+        React.createElement("div", { className: classes.eachDot, style: __assign({ backgroundColor: dataItem === null || dataItem === void 0 ? void 0 : dataItem.color, backgroundImage: Array.isArray(dataItem.gradientColors) &&
+                    Array.isArray(dataItem.gradientPercentage)
+                    ? getGradient(dataItem.gradientColors, dataItem.gradientPercentage)
+                    : "", 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/custom-hooks/useChartContainerWidth.d.ts

@@ -1,2 +0,2 @@
-declare const useChartContainerWidth: (id: string, dependencyArray: Array<boolean | string>) => number;
+declare const useChartContainerWidth: (id: string, dependencyArray: Array<boolean | string | number>) => number;
 export default useChartContainerWidth;

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

@@ -17,8 +17,5 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
         updateContainerWidth();
-    }, []);
-    useEffect(function () {
-        updateContainerWidth();
     }, __spreadArray([], dependencyArray, true));
     useEffect(function () {
-        if (typeof window !== undefined) {
+        if (typeof window !== "undefined") {
             window.addEventListener("resize", updateContainerWidth);
@@ -32,6 +29,6 @@ return function () {
         var widthValue;
-        if (typeof window !== undefined)
+        if (typeof window !== "undefined") {
             widthValue = findContainerWidth(id);
-        if (widthValue)
             setWidth(widthValue);
+        }
     };
@@ -38,0 +35,0 @@ return width;

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

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

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

@@ -12,5 +12,14 @@ var __assign = (this && this.__assign) || function () {
 };
+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 { useMemo } from "react";
 import { COLOR_PALETTE, DEFAULT_COLUMNS, DEFAULT_ROWS } from "../constants";
-import { isColorAlreadyUsed } from "../utils/utils";
+import { isColorAlreadyUsed, isDecimal, mergeAndSortById } from "../utils/utils";
 export var useDotMatrix = function (dataPoints, dimensions) {
@@ -35,20 +44,66 @@ var _a = useMemo(function () {
         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 = [];
+    }, [dataPoints]), dotsWithColor = _a[0], totalDots = _a[1];
+    //finding the number of dots to be rendered relative to the total number of dots and dimension
+    var dots = useMemo(function () {
+        var completeDots = [];
         if (totalDots) {
-            dotsToBeMapped === null || dotsToBeMapped === void 0 ? void 0 : dotsToBeMapped.forEach(function (point) {
+            dotsWithColor === null || dotsWithColor === void 0 ? void 0 : dotsWithColor.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 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);
+                completeDots.push(dotsCount);
             });
         }
-        return fractionalParts;
-    }, [totalDots]);
-    return [dotsToBeMapped, totalDots, fractionalDots];
+        return completeDots;
+    }, [totalDots, dimensions.columns, dimensions.rows]);
+    var dotsToBeMapped = useMemo(function () {
+        //Calculating the dots with gradient and subtracting the gradient part from the total number of dots
+        var currentDots = __spreadArray([], dots, true);
+        var gradientDots = [];
+        for (var i = 0; i < currentDots.length - 1; i++) {
+            if (isDecimal(currentDots[i])) {
+                var roundedCurrentDotCount = Math.floor(currentDots[i]);
+                var remainingDecimal = 1 - (currentDots[i] - roundedCurrentDotCount);
+                var gradientColors = [dotsWithColor[i].color];
+                var percentage = [currentDots[i] - roundedCurrentDotCount];
+                var j = i + 1;
+                while (remainingDecimal !== 0 && j < currentDots.length) {
+                    if (currentDots[j] >= remainingDecimal) {
+                        percentage.push(remainingDecimal);
+                        currentDots[j] = currentDots[j] - remainingDecimal;
+                        remainingDecimal = 0;
+                    }
+                    else {
+                        remainingDecimal = remainingDecimal - dots[j];
+                        percentage.push(currentDots[j] - Math.floor(currentDots[j]));
+                        currentDots[j] = 0;
+                    }
+                    currentDots[i] = roundedCurrentDotCount;
+                    gradientColors.push(dotsWithColor[j].color);
+                    j++;
+                }
+                gradientDots.push({
+                    id: i,
+                    count: 1,
+                    name: dotsWithColor[i].name,
+                    gradientColors: gradientColors,
+                    gradientPercentage: percentage
+                });
+            }
+        }
+        //Calculating the remaining dots with single color
+        var singleDots = [];
+        for (var i = 0; i < currentDots.length; i++) {
+            singleDots.push({
+                id: i,
+                name: dotsWithColor[i].name,
+                count: Math.round(currentDots[i]),
+                color: dotsWithColor[i].color
+            });
+        }
+        //merging both arrays and sorting it with respect to id
+        return mergeAndSortById(gradientDots, singleDots);
+    }, [dataPoints, dimensions.rows, dimensions.columns]);
+    return dotsToBeMapped;
 };
 //# sourceMappingURL=useDotMatrix.js.map

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

@@ -14,3 +14,3 @@ var __assign = (this && this.__assign) || function () {
 import { useDotMatrix } from "./custom-hooks/useDotMatrix";
-import { getLegendPosition, getStyles } from "./utils/utils";
+import { getLegendPosition, getStyles, getUniqueDots } from "./utils/utils";
 import { DEFAULT_COLUMNS, DEFAULT_GAP, DEFAULT_LEGEND_POSITION, DEFAULT_ROWS, Elements } from "./constants";
@@ -28,12 +28,18 @@ import Chart from "./Chart";
         showLegend,
-        legendPosition
+        legendPosition,
+        dimensions.rows || DEFAULT_ROWS,
+        dimensions.columns || DEFAULT_COLUMNS,
+        spaceBetweenDots
     ]);
-    var _f = useDotMatrix(dataPoints, dimensions), dotsToBeMapped = _f[0], totalDots = _f[1], fractionalDots = _f[2];
+    var dotsToBeMapped = useDotMatrix(dataPoints, dimensions);
     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, dotsToBeMapped: dotsToBeMapped, total: totalDots, width: width, fractionalDots: fractionalDots, spaceBetweenDots: spaceBetweenDots })),
-            showLegend && React.createElement(Legend, { styles: styles, data: dotsToBeMapped }))));
+                React.createElement(Chart, { styles: styles, dimensions: dimensions, dotsToBeMapped: dotsToBeMapped, width: width, spaceBetweenDots: spaceBetweenDots })),
+            showLegend && (React.createElement(Legend, { styles: styles, data: getUniqueDots(dotsToBeMapped).filter(function (dots) {
+                    return dots.color ||
+                        ((dots === null || dots === void 0 ? void 0 : dots.gradientColors) && dots.gradientColors.length > 0);
+                }) })))));
 };
 export default DotMatrix;
 //# sourceMappingURL=DotMatrix.js.map

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

@@ -19,3 +19,3 @@ var __assign = (this && this.__assign) || function () {
     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.legendDot, style: __assign({ backgroundColor: point.color || (point.gradientColors && point.gradientColors[0]) }, getStyles(Elements.LegendDot, styles)) }),
         React.createElement("div", { className: classes.name, style: __assign({}, getStyles(Elements.LegendName, styles)) }, point.name))); })));
@@ -22,0 +22,0 @@ };

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

@@ -1,4 +0,4 @@
-import { DataPointType, StyleProp } from "../types";
+import { DataPointType, DotsType, StyleProp } from "../types";
 import { Elements } from "../constants";
-export declare const getNumberOfDots: (point: DataPointType, rows: number, columns: number, total: number) => number;
+export declare const isDecimal: (number: number) => boolean;
 export declare const isColorAlreadyUsed: (dataPoints: DataPointType[], color: string, dataValues?: DataPointType[]) => boolean;
@@ -10,3 +10,5 @@ export declare const getLegendPosition: (legendPosition: string) => {
 export declare const getStyles: (element: Elements, styles: StyleProp) => object;
-export declare const hasOverlapping: (values: number[], indexRow: number, indexColumn: number) => boolean;
 export declare const findContainerWidth: (id: string) => number;
+export declare const mergeAndSortById: (arr1: DotsType[], arr2: DotsType[]) => Array<DotsType>;
+export declare const getGradient: (colors: (string | undefined)[], percentage: number[]) => string;
+export declare const getUniqueDots: (dotsToBeMapped: DotsType[]) => DotsType[];

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

@@ -1,5 +0,11 @@
-export var getNumberOfDots = function (point, rows, columns, total) {
-    var percentage = point.count / total;
-    return Math.floor(percentage * rows * columns);
+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));
 };
+export var isDecimal = function (number) { return number % 1 !== 0; };
 export var isColorAlreadyUsed = function (dataPoints, color, dataValues) {
@@ -31,8 +37,2 @@ if (dataValues === void 0) { dataValues = []; }
 };
-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) {
@@ -46,2 +46,34 @@ var element = document.getElementById(id);
 };
+export var mergeAndSortById = function (arr1, arr2) {
+    var mergedArray = __spreadArray(__spreadArray([], arr2, true), arr1, true);
+    mergedArray.sort(function (a, b) { return a.id - b.id; });
+    return mergedArray;
+};
+export var getGradient = function (colors, percentage) {
+    //Assigning the gradient string with first color and percentage
+    var str = "linear-gradient(to right, ".concat(colors[0], " ").concat(percentage[0] * 100 - 15, "%, ");
+    var prevPercentage = 0;
+    //Looping through the colors and percentage array to update the linear gradient with all colors
+    for (var i = 1; i < colors.length; i++) {
+        str += "".concat(colors[i], " ").concat((prevPercentage + percentage[i - 1]) * 100 + 15, "%");
+        prevPercentage = percentage[i];
+        if (i !== colors.length - 1) {
+            str += ", ";
+        }
+        else {
+            str += ")";
+        }
+    }
+    return str;
+};
+export var getUniqueDots = function (dotsToBeMapped) {
+    var uniqueIds = new Set();
+    return dotsToBeMapped.filter(function (dot) {
+        if (!uniqueIds.has(dot.id)) {
+            uniqueIds.add(dot.id);
+            return true;
+        }
+        return false;
+    });
+};
 //# sourceMappingURL=utils.js.map

package.json

 {
   "name": "@keyvaluesystems/react-dot-matrix-chart",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "A Dot Matrix Chart component",
@@ -5,0 +5,0 @@ "main": "build/index.js",

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

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

107612

increased by11.18%

Lines of code

607

increased by18.79%

No dependency changes