funnel-graph-js - npm Package Compare versions

Comparing version 1.4.1 to 1.4.2

CHANGELOG.md

@@ -0,1 +1,6 @@
+### 1.4.2 (Feb 22, 2020)
+
+* Fix gradient ID collision
+* Add ability to pass HTML DOM Element instance as container param
+
 ### 1.4.1 (Jan 29, 2020)
@@ -2,0 +7,0 @@

dist/js/funnel-graph.js

@@ -14,3 +14,3 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.FunnelGraph = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
@@ -143,4 +143,8 @@ var setAttrs = function setAttrs(element, attributes) {
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+var _random = _interopRequireDefault(require("./random"));
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
@@ -369,3 +373,3 @@
         this.subLabels.forEach(function (subLabel, index) {
-          subLabelsHTML += "<div class=\"svg-funnel-js__subLabel svg-funnel-js__subLabel-".concat(index + 1, "\">\n    <div class=\"svg-funnel-js__subLabel--color\" \n        style=\"").concat((0, _graph.generateLegendBackground)(_this2.colors[index], _this2.gradientDirection), "\"></div>\n    <div class=\"svg-funnel-js__subLabel--title\">").concat(subLabel, "</div>\n</div>");
+          subLabelsHTML += "<div class=\"svg-funnel-js__subLabel svg-funnel-js__subLabel-".concat(index + 1, "\">\n    <div class=\"svg-funnel-js__subLabel--color\"\n        style=\"").concat((0, _graph.generateLegendBackground)(_this2.colors[index], _this2.gradientDirection), "\"></div>\n    <div class=\"svg-funnel-js__subLabel--title\">").concat(subLabel, "</div>\n</div>");
         });
@@ -383,3 +387,14 @@ subLabelsHolder.innerHTML = subLabelsHTML;
 
-      this.container = document.querySelector(this.containerSelector);
+      if (typeof this.containerSelector === 'string') {
+        this.container = document.querySelector(this.containerSelector);
+
+        if (!this.container) {
+          throw new Error("Container cannot be found (selector: ".concat(this.containerSelector, ")."));
+        }
+      } else if (this.container instanceof HTMLElement) {
+        this.container = this.containerSelector;
+      } else {
+        throw new Error('Container must either be a selector string or an HTMLElement.');
+      }
+
       this.container.classList.add('svg-funnel-js');
@@ -463,3 +478,3 @@ this.graphContainer = document.createElement('div');
       var defs = svg.querySelector('defs') === null ? (0, _graph.createSVGElement)('defs', svg) : svg.querySelector('defs');
-      var gradientName = "funnelGradient-".concat(index);
+      var gradientName = (0, _random.default)("funnelGradient-".concat(index, "-"));
       var gradient = (0, _graph.createSVGElement)('linearGradient', defs, {
@@ -883,3 +898,3 @@ id: gradientName
 
-},{"./graph":2,"./number":4,"./path":5}],4:[function(require,module,exports){
+},{"./graph":2,"./number":4,"./path":5,"./random":6}],4:[function(require,module,exports){
 "use strict";
@@ -999,3 +1014,18 @@
 
-},{"./number":4}]},{},[1])(1)
+},{"./number":4}],6:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
+exports.default = void 0;
+
+var generateRandomIdString = function generateRandomIdString(prefix) {
+  return Math.random().toString(36).replace('0.', prefix || '');
+};
+
+var _default = generateRandomIdString;
+exports.default = _default;
+
+},{}]},{},[1])(1)
+});

dist/js/funnel-graph.min.js

@@ -1,1 +0,1 @@
-!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).FunnelGraph=t()}}(function(){return function a(o,s,c){function l(e,t){if(!s[e]){if(!o[e]){var n="function"==typeof require&&require;if(!t&&n)return n(e,!0);if(u)return u(e,!0);var i=new Error("Cannot find module '"+e+"'");throw i.code="MODULE_NOT_FOUND",i}var r=s[e]={exports:{}};o[e][0].call(r.exports,function(t){return l(o[e][1][t]||t)},r,r.exports,a,o,s,c)}return s[e].exports}for(var u="function"==typeof require&&require,t=0;t<c.length;t++)l(c[t]);return l}({1:[function(t,e,n){"use strict";e.exports=t("./src/js/main").default},{"./src/js/main":3}],2:[function(t,e,n){"use strict";function r(t){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}Object.defineProperty(n,"__esModule",{value:!0}),n.defaultColors=n.removeAttrs=n.setAttrs=n.createSVGElement=n.areEqual=n.getDefaultColors=n.generateLegendBackground=void 0;function a(e,n){"object"===r(n)&&Object.keys(n).forEach(function(t){e.setAttribute(t,n[t])})}n.setAttrs=a;n.removeAttrs=function(e){for(var t=arguments.length,n=new Array(1<t?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];n.forEach(function(t){e.removeAttribute(t)})};n.createSVGElement=function(t,e,n){var i=document.createElementNS("http://www.w3.org/2000/svg",t);return"object"===r(n)&&a(i,n),void 0!==e&&e.appendChild(i),i};n.generateLegendBackground=function(t,e){var n=1<arguments.length&&void 0!==e?e:"horizontal";return"string"==typeof t?"background-color: ".concat(t):1===t.length?"background-color: ".concat(t[0]):"background-image: linear-gradient(".concat("horizontal"===n?"to right, ":"").concat(t.join(", "),")")};var o=["#FF4589","#FF5050","#05DF9D","#4FF2FD","#2D9CDB","#A0BBFF","#FFD76F","#F2C94C","#FF9A9A","#FFB178"];n.defaultColors=o;n.getDefaultColors=function(t){for(var e=[].concat(o),n=[],i=0;i<t;i++){var r=Math.abs(Math.round(Math.random()*(e.length-1)));n.push(e[r]),e.splice(r,1)}return n};n.areEqual=function(t,e){var n=Object.prototype.toString.call(t);if(n!==Object.prototype.toString.call(e))return!1;if("[object Array]"!==n)return!1;if(t.length!==e.length)return!1;for(var i=0;i<t.length;i++){var r=Object.prototype.toString.call(t[i]);if(r!==Object.prototype.toString.call(e[i]))return!1;if("[object Array]"===r){if(t[i].length!==e[i].length)return!1;for(var a=0;a<t[i].length;a++)if(t[i][a]!==e[i][a])return!1}else if(t[i]!==e[i])return!1}return!0}},{}],3:[function(t,e,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var f=t("./number"),h=t("./path"),l=t("./graph");function r(t){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function g(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function a(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}var i=function(){function i(t){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,i),this.containerSelector=t.container,this.gradientDirection=t.gradientDirection&&"vertical"===t.gradientDirection?"vertical":"horizontal",this.direction=t.direction&&"vertical"===t.direction?"vertical":"horizontal",this.labels=i.getLabels(t),this.subLabels=i.getSubLabels(t),this.values=i.getValues(t),this.percentages=this.createPercentages(),this.colors=t.data.colors||(0,l.getDefaultColors)(this.is2d()?this.getSubDataSize():2),this.displayPercent=t.displayPercent||!1,this.data=t.data,this.height=t.height,this.width=t.width,this.subLabelValue=t.subLabelValue||"percent"}return function(t,e,n){e&&a(t.prototype,e),n&&a(t,n)}(i,[{key:"getMainAxisPoints",value:function(){for(var t=this.getDataSize(),e=[],n=this.isVertical()?this.getHeight():this.getWidth(),i=0;i<=t;i++)e.push((0,f.roundPoint)(n*i/t));return e}},{key:"getCrossAxisPoints",value:function(){var t=[],e=this.getFullDimension(),n=e/2;if(this.is2d()){var i=this.getValues2d(),r=Math.max.apply(Math,g(i));i.push(g(i).pop()),t.push(i.map(function(t){return(0,f.roundPoint)((r-t)/r*n)}));for(var a=this.getPercentages2d(),o=t[0],s=1;s<this.getSubDataSize();s++){for(var c=t[s-1],l=[],u=0;u<this.getDataSize();u++)l.push((0,f.roundPoint)(c[u]+(e-2*o[u])*(a[u][s-1]/100)));l.push([].concat(l).pop()),t.push(l)}t.push(o.map(function(t){return e-t}))}else{var h=Math.max.apply(Math,g(this.values)),d=g(this.values).concat(g(this.values).pop());t.push(d.map(function(t){return(0,f.roundPoint)((h-t)/h*n)})),t.push(t[0].map(function(t){return e-t}))}return t}},{key:"getGraphType",value:function(){return this.values&&this.values[0]instanceof Array?"2d":"normal"}},{key:"is2d",value:function(){return"2d"===this.getGraphType()}},{key:"isVertical",value:function(){return"vertical"===this.direction}},{key:"getDataSize",value:function(){return this.values.length}},{key:"getSubDataSize",value:function(){return this.values[0].length}},{key:"getFullDimension",value:function(){return this.isVertical()?this.getWidth():this.getHeight()}},{key:"addLabels",value:function(){var u=this,h=document.createElement("div");h.setAttribute("class","svg-funnel-js__labels"),this.percentages.forEach(function(t,i){var e=document.createElement("div");e.setAttribute("class","svg-funnel-js__label label-".concat(i+1));var n=document.createElement("div");n.setAttribute("class","label__title"),n.textContent=u.labels[i]||"";var r=document.createElement("div");r.setAttribute("class","label__value");var a=u.is2d()?u.getValues2d()[i]:u.values[i];r.textContent=(0,f.formatNumber)(a);var o=document.createElement("div");if(o.setAttribute("class","label__percentage"),o.textContent="".concat(t.toString(),"%"),e.appendChild(r),e.appendChild(n),u.displayPercent&&e.appendChild(o),u.is2d()){var s=document.createElement("div");s.setAttribute("class","label__segment-percentages");var c='<ul class="segment-percentage__list">',l=u.getPercentages2d();u.subLabels.forEach(function(t,e){var n="percent"===u.subLabelValue?"".concat(l[i][e],"%"):(0,f.formatNumber)(u.values[i][e]);c+="<li>".concat(u.subLabels[e],':\n    <span class="percentage__list-label">').concat(n,"</span>\n </li>")}),c+="</ul>",s.innerHTML=c,e.appendChild(s)}h.appendChild(e)}),this.container.appendChild(h)}},{key:"addSubLabels",value:function(){var n=this;if(this.subLabels){var t=document.createElement("div");t.setAttribute("class","svg-funnel-js__subLabels");var i="";this.subLabels.forEach(function(t,e){i+='<div class="svg-funnel-js__subLabel svg-funnel-js__subLabel-'.concat(e+1,'">\n    <div class="svg-funnel-js__subLabel--color" \n        style="').concat((0,l.generateLegendBackground)(n.colors[e],n.gradientDirection),'"></div>\n    <div class="svg-funnel-js__subLabel--title">').concat(t,"</div>\n</div>")}),t.innerHTML=i,this.container.appendChild(t)}}},{key:"createContainer",value:function(){if(!this.containerSelector)throw new Error("Container is missing");this.container=document.querySelector(this.containerSelector),this.container.classList.add("svg-funnel-js"),this.graphContainer=document.createElement("div"),this.graphContainer.classList.add("svg-funnel-js__container"),this.container.appendChild(this.graphContainer),"vertical"===this.direction&&this.container.classList.add("svg-funnel-js--vertical")}},{key:"setValues",value:function(t){return this.values=t,this}},{key:"setDirection",value:function(t){return this.direction=t,this}},{key:"setHeight",value:function(t){return this.height=t,this}},{key:"setWidth",value:function(t){return this.width=t,this}},{key:"getValues2d",value:function(){var e=[];return this.values.forEach(function(t){e.push(t.reduce(function(t,e){return t+e},0))}),e}},{key:"getPercentages2d",value:function(){var n=[];return this.values.forEach(function(t){var e=t.reduce(function(t,e){return t+e},0);n.push(t.map(function(t){return 0===e?0:(0,f.roundPoint)(100*t/e)}))}),n}},{key:"createPercentages",value:function(){var t=[];t=this.is2d()?this.getValues2d():g(this.values);var e=Math.max.apply(Math,g(t));return t.map(function(t){return 0===t?0:(0,f.roundPoint)(100*t/e)})}},{key:"applyGradient",value:function(t,e,n,i){var r=null===t.querySelector("defs")?(0,l.createSVGElement)("defs",t):t.querySelector("defs"),a="funnelGradient-".concat(i),o=(0,l.createSVGElement)("linearGradient",r,{id:a});"vertical"===this.gradientDirection&&(0,l.setAttrs)(o,{x1:"0",x2:"0",y1:"0",y2:"1"});for(var s=n.length,c=0;c<s;c++)(0,l.createSVGElement)("stop",o,{"stop-color":n[c],offset:"".concat(Math.round(100*c/(s-1)),"%")});(0,l.setAttrs)(e,{fill:'url("#'.concat(a,'")'),stroke:'url("#'.concat(a,'")')})}},{key:"makeSVG",value:function(){for(var t=(0,l.createSVGElement)("svg",this.graphContainer,{width:this.getWidth(),height:this.getHeight()}),e=this.getCrossAxisPoints().length-1,n=0;n<e;n++){var i=(0,l.createSVGElement)("path",t),r=this.is2d()?this.colors[n]:this.colors,a="string"==typeof r||1===r.length?"solid":"gradient";"solid"==a?(0,l.setAttrs)(i,{fill:r,stroke:r}):"gradient"==a&&this.applyGradient(t,i,r,n+1),t.appendChild(i)}this.graphContainer.appendChild(t)}},{key:"getSVG",value:function(){var t=this.container.querySelector("svg");if(!t)throw new Error("No SVG found inside of the container");return t}},{key:"getWidth",value:function(){return this.width||this.graphContainer.clientWidth}},{key:"getHeight",value:function(){return this.height||this.graphContainer.clientHeight}},{key:"getPathDefinitions",value:function(){for(var t=this.getCrossAxisPoints().length-1,e=[],n=0;n<t;n++)if(this.isVertical()){var i=this.getCrossAxisPoints()[n],r=this.getCrossAxisPoints()[n+1],a=this.getMainAxisPoints(),o=(0,h.createVerticalPath)(n,i,r,a);e.push(o)}else{var s=this.getMainAxisPoints(),c=this.getCrossAxisPoints()[n],l=this.getCrossAxisPoints()[n+1],u=(0,h.createPath)(n,s,c,l);e.push(u)}return e}},{key:"getPathMedian",value:function(t){if(this.isVertical()){var e=this.getCrossAxisPoints()[t],i=this.getCrossAxisPoints()[t+1],n=this.getMainAxisPoints(),r=[],a=[];return e.forEach(function(t,e){var n=(t+i[e])/2;r.push(n-1),a.push(1+n)}),(0,h.createVerticalPath)(t,r,a,n)}var o=this.getMainAxisPoints(),s=this.getCrossAxisPoints()[t],c=this.getCrossAxisPoints()[t+1],l=[],u=[];return s.forEach(function(t,e){var n=(t+c[e])/2;l.push(n-1),u.push(1+n)}),(0,h.createPath)(t,o,l,u)}},{key:"drawPaths",value:function(){var n=this.getSVG().querySelectorAll("path");this.getPathDefinitions().forEach(function(t,e){n[e].setAttribute("d",t)})}},{key:"draw",value:function(){this.createContainer(),this.makeSVG(),this.addLabels(),this.is2d()&&this.addSubLabels(),this.drawPaths()}},{key:"makeVertical",value:function(){if("vertical"===this.direction)return!0;this.direction="vertical",this.container.classList.add("svg-funnel-js--vertical");var t=this.getSVG(),e=this.getHeight(),n=this.getWidth();return(0,l.setAttrs)(t,{height:e,width:n}),this.drawPaths(),!0}},{key:"makeHorizontal",value:function(){if("horizontal"===this.direction)return!0;this.direction="horizontal",this.container.classList.remove("svg-funnel-js--vertical");var t=this.getSVG(),e=this.getHeight(),n=this.getWidth();return(0,l.setAttrs)(t,{height:e,width:n}),this.drawPaths(),!0}},{key:"toggleDirection",value:function(){"horizontal"===this.direction?this.makeVertical():this.makeHorizontal()}},{key:"gradientMakeVertical",value:function(){if("vertical"===this.gradientDirection)return!0;this.gradientDirection="vertical";for(var t=this.graphContainer.querySelectorAll("linearGradient"),e=0;e<t.length;e++)(0,l.setAttrs)(t[e],{x1:"0",x2:"0",y1:"0",y2:"1"});return!0}},{key:"gradientMakeHorizontal",value:function(){if("horizontal"===this.gradientDirection)return!0;this.gradientDirection="horizontal";for(var t=this.graphContainer.querySelectorAll("linearGradient"),e=0;e<t.length;e++)(0,l.removeAttrs)(t[e],"x1","x2","y1","y2");return!0}},{key:"gradientToggleDirection",value:function(){"horizontal"===this.gradientDirection?this.gradientMakeVertical():this.gradientMakeHorizontal()}},{key:"updateWidth",value:function(t){this.width=t;var e=this.getSVG(),n=this.getWidth();return(0,l.setAttrs)(e,{width:n}),this.drawPaths(),!0}},{key:"updateHeight",value:function(t){this.height=t;var e=this.getSVG(),n=this.getHeight();return(0,l.setAttrs)(e,{height:n}),this.drawPaths(),!0}},{key:"updateData",value:function(t){var e=this.container.querySelector(".svg-funnel-js__labels"),n=this.container.querySelector(".svg-funnel-js__subLabels");e&&e.remove(),n&&n.remove(),this.labels=[],this.colors=(0,l.getDefaultColors)(this.is2d()?this.getSubDataSize():2),this.values=[],this.percentages=[],void 0!==t.labels&&(this.labels=i.getLabels({data:t})),void 0!==t.colors&&(this.colors=t.colors||(0,l.getDefaultColors)(this.is2d()?this.getSubDataSize():2)),void 0!==t.values&&(Object.prototype.toString.call(t.values[0])!==Object.prototype.toString.call(this.values[0])?(this.container.querySelector("svg").remove(),this.values=i.getValues({data:t}),this.makeSVG()):this.values=i.getValues({data:t}),this.drawPaths()),this.percentages=this.createPercentages(),this.addLabels(),void 0!==t.subLabels&&(this.subLabels=i.getSubLabels({data:t}),this.addSubLabels())}},{key:"update",value:function(t){var r=this;void 0!==t.displayPercent&&this.displayPercent!==t.displayPercent&&(!0===this.displayPercent?this.container.querySelectorAll(".label__percentage").forEach(function(t){t.remove()}):this.container.querySelectorAll(".svg-funnel-js__label").forEach(function(t,e){var n=r.percentages[e],i=document.createElement("div");i.setAttribute("class","label__percentage"),100!==n&&(i.textContent="".concat(n.toString(),"%"),t.appendChild(i))})),void 0!==t.height&&this.updateHeight(t.height),void 0!==t.width&&this.updateWidth(t.width),void 0!==t.gradientDirection&&("vertical"===t.gradientDirection?this.gradientMakeVertical():"horizontal"===t.gradientDirection&&this.gradientMakeHorizontal()),void 0!==t.direction&&("vertical"===t.direction?this.makeVertical():"horizontal"===t.direction&&this.makeHorizontal()),void 0!==t.data&&this.updateData(t.data)}}],[{key:"getSubLabels",value:function(t){if(!t.data)throw new Error("Data is missing");var e=t.data;return void 0===e.subLabels?[]:e.subLabels}},{key:"getLabels",value:function(t){if(!t.data)throw new Error("Data is missing");var e=t.data;return void 0===e.labels?[]:e.labels}},{key:"getValues",value:function(t){if(!t.data)return[];var e=t.data;return"object"===r(e)?e.values:[]}}]),i}();n.default=i},{"./graph":2,"./number":4,"./path":5}],4:[function(t,e,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.formatNumber=n.roundPoint=void 0;n.roundPoint=function(t){return Math.round(10*t)/10};n.formatNumber=function(t){return Number(t).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g,"$1,")}},{}],5:[function(t,e,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.createVerticalPath=n.createPath=n.createVerticalCurves=n.createCurves=void 0;var r=t("./number");function s(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function c(t,e,n,i){return" C".concat((0,r.roundPoint)((n+t)/2),",").concat(e," ")+"".concat((0,r.roundPoint)((n+t)/2),",").concat(i," ").concat(n,",").concat(i)}n.createCurves=c;function l(t,e,n,i){return" C".concat(t,",").concat((0,r.roundPoint)((i+e)/2)," ")+"".concat(n,",").concat((0,r.roundPoint)((i+e)/2)," ").concat(n,",").concat(i)}n.createVerticalCurves=l;n.createPath=function(t,e,n,i){for(var r="M".concat(e[0],",").concat(n[0]),a=0;a<e.length-1;a++)r+=c(e[a],n[a],e[a+1],n[a+1]);r+=" L".concat(s(e).pop(),",").concat(s(i).pop());for(var o=e.length-1;0<o;o--)r+=c(e[o],i[o],e[o-1],i[o-1]);return r+=" Z"};n.createVerticalPath=function(t,e,n,i){for(var r="M".concat(e[0],",").concat(i[0]),a=0;a<e.length-1;a++)r+=l(e[a],i[a],e[a+1],i[a+1]);r+=" L".concat(s(n).pop(),",").concat(s(i).pop());for(var o=e.length-1;0<o;o--)r+=l(n[o],i[o],n[o-1],i[o-1]);return r+=" Z"}},{"./number":4}]},{},[1])(1)});
+!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).FunnelGraph=t()}}(function(){return function a(o,s,c){function l(e,t){if(!s[e]){if(!o[e]){var n="function"==typeof require&&require;if(!t&&n)return n(e,!0);if(u)return u(e,!0);var r=new Error("Cannot find module '"+e+"'");throw r.code="MODULE_NOT_FOUND",r}var i=s[e]={exports:{}};o[e][0].call(i.exports,function(t){return l(o[e][1][t]||t)},i,i.exports,a,o,s,c)}return s[e].exports}for(var u="function"==typeof require&&require,t=0;t<c.length;t++)l(c[t]);return l}({1:[function(t,e,n){"use strict";e.exports=t("./src/js/main").default},{"./src/js/main":3}],2:[function(t,e,n){"use strict";function i(t){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}Object.defineProperty(n,"__esModule",{value:!0}),n.defaultColors=n.removeAttrs=n.setAttrs=n.createSVGElement=n.areEqual=n.getDefaultColors=n.generateLegendBackground=void 0;function a(e,n){"object"===i(n)&&Object.keys(n).forEach(function(t){e.setAttribute(t,n[t])})}n.setAttrs=a;n.removeAttrs=function(e){for(var t=arguments.length,n=new Array(1<t?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];n.forEach(function(t){e.removeAttribute(t)})};n.createSVGElement=function(t,e,n){var r=document.createElementNS("http://www.w3.org/2000/svg",t);return"object"===i(n)&&a(r,n),void 0!==e&&e.appendChild(r),r};n.generateLegendBackground=function(t,e){var n=1<arguments.length&&void 0!==e?e:"horizontal";return"string"==typeof t?"background-color: ".concat(t):1===t.length?"background-color: ".concat(t[0]):"background-image: linear-gradient(".concat("horizontal"===n?"to right, ":"").concat(t.join(", "),")")};var o=["#FF4589","#FF5050","#05DF9D","#4FF2FD","#2D9CDB","#A0BBFF","#FFD76F","#F2C94C","#FF9A9A","#FFB178"];n.defaultColors=o;n.getDefaultColors=function(t){for(var e=[].concat(o),n=[],r=0;r<t;r++){var i=Math.abs(Math.round(Math.random()*(e.length-1)));n.push(e[i]),e.splice(i,1)}return n};n.areEqual=function(t,e){var n=Object.prototype.toString.call(t);if(n!==Object.prototype.toString.call(e))return!1;if("[object Array]"!==n)return!1;if(t.length!==e.length)return!1;for(var r=0;r<t.length;r++){var i=Object.prototype.toString.call(t[r]);if(i!==Object.prototype.toString.call(e[r]))return!1;if("[object Array]"===i){if(t[r].length!==e[r].length)return!1;for(var a=0;a<t[r].length;a++)if(t[r][a]!==e[r][a])return!1}else if(t[r]!==e[r])return!1}return!0}},{}],3:[function(t,e,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r,f=t("./number"),h=t("./path"),l=t("./graph"),u=(r=t("./random"))&&r.__esModule?r:{default:r};function i(t){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function g(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function a(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var o=function(){function r(t){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,r),this.containerSelector=t.container,this.gradientDirection=t.gradientDirection&&"vertical"===t.gradientDirection?"vertical":"horizontal",this.direction=t.direction&&"vertical"===t.direction?"vertical":"horizontal",this.labels=r.getLabels(t),this.subLabels=r.getSubLabels(t),this.values=r.getValues(t),this.percentages=this.createPercentages(),this.colors=t.data.colors||(0,l.getDefaultColors)(this.is2d()?this.getSubDataSize():2),this.displayPercent=t.displayPercent||!1,this.data=t.data,this.height=t.height,this.width=t.width,this.subLabelValue=t.subLabelValue||"percent"}var t,e,n;return t=r,n=[{key:"getSubLabels",value:function(t){if(!t.data)throw new Error("Data is missing");var e=t.data;return void 0===e.subLabels?[]:e.subLabels}},{key:"getLabels",value:function(t){if(!t.data)throw new Error("Data is missing");var e=t.data;return void 0===e.labels?[]:e.labels}},{key:"getValues",value:function(t){if(!t.data)return[];var e=t.data;return"object"===i(e)?e.values:[]}}],(e=[{key:"getMainAxisPoints",value:function(){for(var t=this.getDataSize(),e=[],n=this.isVertical()?this.getHeight():this.getWidth(),r=0;r<=t;r++)e.push((0,f.roundPoint)(n*r/t));return e}},{key:"getCrossAxisPoints",value:function(){var t=[],e=this.getFullDimension(),n=e/2;if(this.is2d()){var r=this.getValues2d(),i=Math.max.apply(Math,g(r));r.push(g(r).pop()),t.push(r.map(function(t){return(0,f.roundPoint)((i-t)/i*n)}));for(var a=this.getPercentages2d(),o=t[0],s=1;s<this.getSubDataSize();s++){for(var c=t[s-1],l=[],u=0;u<this.getDataSize();u++)l.push((0,f.roundPoint)(c[u]+(e-2*o[u])*(a[u][s-1]/100)));l.push([].concat(l).pop()),t.push(l)}t.push(o.map(function(t){return e-t}))}else{var h=Math.max.apply(Math,g(this.values)),d=g(this.values).concat(g(this.values).pop());t.push(d.map(function(t){return(0,f.roundPoint)((h-t)/h*n)})),t.push(t[0].map(function(t){return e-t}))}return t}},{key:"getGraphType",value:function(){return this.values&&this.values[0]instanceof Array?"2d":"normal"}},{key:"is2d",value:function(){return"2d"===this.getGraphType()}},{key:"isVertical",value:function(){return"vertical"===this.direction}},{key:"getDataSize",value:function(){return this.values.length}},{key:"getSubDataSize",value:function(){return this.values[0].length}},{key:"getFullDimension",value:function(){return this.isVertical()?this.getWidth():this.getHeight()}},{key:"addLabels",value:function(){var u=this,h=document.createElement("div");h.setAttribute("class","svg-funnel-js__labels"),this.percentages.forEach(function(t,r){var e=document.createElement("div");e.setAttribute("class","svg-funnel-js__label label-".concat(r+1));var n=document.createElement("div");n.setAttribute("class","label__title"),n.textContent=u.labels[r]||"";var i=document.createElement("div");i.setAttribute("class","label__value");var a=u.is2d()?u.getValues2d()[r]:u.values[r];i.textContent=(0,f.formatNumber)(a);var o=document.createElement("div");if(o.setAttribute("class","label__percentage"),o.textContent="".concat(t.toString(),"%"),e.appendChild(i),e.appendChild(n),u.displayPercent&&e.appendChild(o),u.is2d()){var s=document.createElement("div");s.setAttribute("class","label__segment-percentages");var c='<ul class="segment-percentage__list">',l=u.getPercentages2d();u.subLabels.forEach(function(t,e){var n="percent"===u.subLabelValue?"".concat(l[r][e],"%"):(0,f.formatNumber)(u.values[r][e]);c+="<li>".concat(u.subLabels[e],':\n    <span class="percentage__list-label">').concat(n,"</span>\n </li>")}),c+="</ul>",s.innerHTML=c,e.appendChild(s)}h.appendChild(e)}),this.container.appendChild(h)}},{key:"addSubLabels",value:function(){var n=this;if(this.subLabels){var t=document.createElement("div");t.setAttribute("class","svg-funnel-js__subLabels");var r="";this.subLabels.forEach(function(t,e){r+='<div class="svg-funnel-js__subLabel svg-funnel-js__subLabel-'.concat(e+1,'">\n    <div class="svg-funnel-js__subLabel--color"\n        style="').concat((0,l.generateLegendBackground)(n.colors[e],n.gradientDirection),'"></div>\n    <div class="svg-funnel-js__subLabel--title">').concat(t,"</div>\n</div>")}),t.innerHTML=r,this.container.appendChild(t)}}},{key:"createContainer",value:function(){if(!this.containerSelector)throw new Error("Container is missing");if("string"==typeof this.containerSelector){if(this.container=document.querySelector(this.containerSelector),!this.container)throw new Error("Container cannot be found (selector: ".concat(this.containerSelector,")."))}else{if(!(this.container instanceof HTMLElement))throw new Error("Container must either be a selector string or an HTMLElement.");this.container=this.containerSelector}this.container.classList.add("svg-funnel-js"),this.graphContainer=document.createElement("div"),this.graphContainer.classList.add("svg-funnel-js__container"),this.container.appendChild(this.graphContainer),"vertical"===this.direction&&this.container.classList.add("svg-funnel-js--vertical")}},{key:"setValues",value:function(t){return this.values=t,this}},{key:"setDirection",value:function(t){return this.direction=t,this}},{key:"setHeight",value:function(t){return this.height=t,this}},{key:"setWidth",value:function(t){return this.width=t,this}},{key:"getValues2d",value:function(){var e=[];return this.values.forEach(function(t){e.push(t.reduce(function(t,e){return t+e},0))}),e}},{key:"getPercentages2d",value:function(){var n=[];return this.values.forEach(function(t){var e=t.reduce(function(t,e){return t+e},0);n.push(t.map(function(t){return 0===e?0:(0,f.roundPoint)(100*t/e)}))}),n}},{key:"createPercentages",value:function(){var t=[];t=this.is2d()?this.getValues2d():g(this.values);var e=Math.max.apply(Math,g(t));return t.map(function(t){return 0===t?0:(0,f.roundPoint)(100*t/e)})}},{key:"applyGradient",value:function(t,e,n,r){var i=null===t.querySelector("defs")?(0,l.createSVGElement)("defs",t):t.querySelector("defs"),a=(0,u.default)("funnelGradient-".concat(r,"-")),o=(0,l.createSVGElement)("linearGradient",i,{id:a});"vertical"===this.gradientDirection&&(0,l.setAttrs)(o,{x1:"0",x2:"0",y1:"0",y2:"1"});for(var s=n.length,c=0;c<s;c++)(0,l.createSVGElement)("stop",o,{"stop-color":n[c],offset:"".concat(Math.round(100*c/(s-1)),"%")});(0,l.setAttrs)(e,{fill:'url("#'.concat(a,'")'),stroke:'url("#'.concat(a,'")')})}},{key:"makeSVG",value:function(){for(var t=(0,l.createSVGElement)("svg",this.graphContainer,{width:this.getWidth(),height:this.getHeight()}),e=this.getCrossAxisPoints().length-1,n=0;n<e;n++){var r=(0,l.createSVGElement)("path",t),i=this.is2d()?this.colors[n]:this.colors,a="string"==typeof i||1===i.length?"solid":"gradient";"solid"==a?(0,l.setAttrs)(r,{fill:i,stroke:i}):"gradient"==a&&this.applyGradient(t,r,i,n+1),t.appendChild(r)}this.graphContainer.appendChild(t)}},{key:"getSVG",value:function(){var t=this.container.querySelector("svg");if(!t)throw new Error("No SVG found inside of the container");return t}},{key:"getWidth",value:function(){return this.width||this.graphContainer.clientWidth}},{key:"getHeight",value:function(){return this.height||this.graphContainer.clientHeight}},{key:"getPathDefinitions",value:function(){for(var t=this.getCrossAxisPoints().length-1,e=[],n=0;n<t;n++)if(this.isVertical()){var r=this.getCrossAxisPoints()[n],i=this.getCrossAxisPoints()[n+1],a=this.getMainAxisPoints(),o=(0,h.createVerticalPath)(n,r,i,a);e.push(o)}else{var s=this.getMainAxisPoints(),c=this.getCrossAxisPoints()[n],l=this.getCrossAxisPoints()[n+1],u=(0,h.createPath)(n,s,c,l);e.push(u)}return e}},{key:"getPathMedian",value:function(t){if(this.isVertical()){var e=this.getCrossAxisPoints()[t],r=this.getCrossAxisPoints()[t+1],n=this.getMainAxisPoints(),i=[],a=[];return e.forEach(function(t,e){var n=(t+r[e])/2;i.push(n-1),a.push(1+n)}),(0,h.createVerticalPath)(t,i,a,n)}var o=this.getMainAxisPoints(),s=this.getCrossAxisPoints()[t],c=this.getCrossAxisPoints()[t+1],l=[],u=[];return s.forEach(function(t,e){var n=(t+c[e])/2;l.push(n-1),u.push(1+n)}),(0,h.createPath)(t,o,l,u)}},{key:"drawPaths",value:function(){var n=this.getSVG().querySelectorAll("path");this.getPathDefinitions().forEach(function(t,e){n[e].setAttribute("d",t)})}},{key:"draw",value:function(){this.createContainer(),this.makeSVG(),this.addLabels(),this.is2d()&&this.addSubLabels(),this.drawPaths()}},{key:"makeVertical",value:function(){if("vertical"===this.direction)return!0;this.direction="vertical",this.container.classList.add("svg-funnel-js--vertical");var t=this.getSVG(),e=this.getHeight(),n=this.getWidth();return(0,l.setAttrs)(t,{height:e,width:n}),this.drawPaths(),!0}},{key:"makeHorizontal",value:function(){if("horizontal"===this.direction)return!0;this.direction="horizontal",this.container.classList.remove("svg-funnel-js--vertical");var t=this.getSVG(),e=this.getHeight(),n=this.getWidth();return(0,l.setAttrs)(t,{height:e,width:n}),this.drawPaths(),!0}},{key:"toggleDirection",value:function(){"horizontal"===this.direction?this.makeVertical():this.makeHorizontal()}},{key:"gradientMakeVertical",value:function(){if("vertical"===this.gradientDirection)return!0;this.gradientDirection="vertical";for(var t=this.graphContainer.querySelectorAll("linearGradient"),e=0;e<t.length;e++)(0,l.setAttrs)(t[e],{x1:"0",x2:"0",y1:"0",y2:"1"});return!0}},{key:"gradientMakeHorizontal",value:function(){if("horizontal"===this.gradientDirection)return!0;this.gradientDirection="horizontal";for(var t=this.graphContainer.querySelectorAll("linearGradient"),e=0;e<t.length;e++)(0,l.removeAttrs)(t[e],"x1","x2","y1","y2");return!0}},{key:"gradientToggleDirection",value:function(){"horizontal"===this.gradientDirection?this.gradientMakeVertical():this.gradientMakeHorizontal()}},{key:"updateWidth",value:function(t){this.width=t;var e=this.getSVG(),n=this.getWidth();return(0,l.setAttrs)(e,{width:n}),this.drawPaths(),!0}},{key:"updateHeight",value:function(t){this.height=t;var e=this.getSVG(),n=this.getHeight();return(0,l.setAttrs)(e,{height:n}),this.drawPaths(),!0}},{key:"updateData",value:function(t){var e=this.container.querySelector(".svg-funnel-js__labels"),n=this.container.querySelector(".svg-funnel-js__subLabels");e&&e.remove(),n&&n.remove(),this.labels=[],this.colors=(0,l.getDefaultColors)(this.is2d()?this.getSubDataSize():2),this.values=[],this.percentages=[],void 0!==t.labels&&(this.labels=r.getLabels({data:t})),void 0!==t.colors&&(this.colors=t.colors||(0,l.getDefaultColors)(this.is2d()?this.getSubDataSize():2)),void 0!==t.values&&(Object.prototype.toString.call(t.values[0])!==Object.prototype.toString.call(this.values[0])?(this.container.querySelector("svg").remove(),this.values=r.getValues({data:t}),this.makeSVG()):this.values=r.getValues({data:t}),this.drawPaths()),this.percentages=this.createPercentages(),this.addLabels(),void 0!==t.subLabels&&(this.subLabels=r.getSubLabels({data:t}),this.addSubLabels())}},{key:"update",value:function(t){var i=this;void 0!==t.displayPercent&&this.displayPercent!==t.displayPercent&&(!0===this.displayPercent?this.container.querySelectorAll(".label__percentage").forEach(function(t){t.remove()}):this.container.querySelectorAll(".svg-funnel-js__label").forEach(function(t,e){var n=i.percentages[e],r=document.createElement("div");r.setAttribute("class","label__percentage"),100!==n&&(r.textContent="".concat(n.toString(),"%"),t.appendChild(r))})),void 0!==t.height&&this.updateHeight(t.height),void 0!==t.width&&this.updateWidth(t.width),void 0!==t.gradientDirection&&("vertical"===t.gradientDirection?this.gradientMakeVertical():"horizontal"===t.gradientDirection&&this.gradientMakeHorizontal()),void 0!==t.direction&&("vertical"===t.direction?this.makeVertical():"horizontal"===t.direction&&this.makeHorizontal()),void 0!==t.data&&this.updateData(t.data)}}])&&a(t.prototype,e),n&&a(t,n),r}();n.default=o},{"./graph":2,"./number":4,"./path":5,"./random":6}],4:[function(t,e,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.formatNumber=n.roundPoint=void 0;n.roundPoint=function(t){return Math.round(10*t)/10};n.formatNumber=function(t){return Number(t).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g,"$1,")}},{}],5:[function(t,e,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.createVerticalPath=n.createPath=n.createVerticalCurves=n.createCurves=void 0;var i=t("./number");function s(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function c(t,e,n,r){return" C".concat((0,i.roundPoint)((n+t)/2),",").concat(e," ")+"".concat((0,i.roundPoint)((n+t)/2),",").concat(r," ").concat(n,",").concat(r)}n.createCurves=c;function l(t,e,n,r){return" C".concat(t,",").concat((0,i.roundPoint)((r+e)/2)," ")+"".concat(n,",").concat((0,i.roundPoint)((r+e)/2)," ").concat(n,",").concat(r)}n.createVerticalCurves=l;n.createPath=function(t,e,n,r){for(var i="M".concat(e[0],",").concat(n[0]),a=0;a<e.length-1;a++)i+=c(e[a],n[a],e[a+1],n[a+1]);i+=" L".concat(s(e).pop(),",").concat(s(r).pop());for(var o=e.length-1;0<o;o--)i+=c(e[o],r[o],e[o-1],r[o-1]);return i+=" Z"};n.createVerticalPath=function(t,e,n,r){for(var i="M".concat(e[0],",").concat(r[0]),a=0;a<e.length-1;a++)i+=l(e[a],r[a],e[a+1],r[a+1]);i+=" L".concat(s(n).pop(),",").concat(s(r).pop());for(var o=e.length-1;0<o;o--)i+=l(n[o],r[o],n[o-1],r[o-1]);return i+=" Z"}},{"./number":4}],6:[function(t,e,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;function r(t){return Math.random().toString(36).replace("0.",t||"")}n.default=r},{}]},{},[1])(1)});

package.json

 {
   "name": "funnel-graph-js",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "SVG Funnel Graph Javascript Library",
@@ -5,0 +5,0 @@ "main": "main.js",

src/js/main.js

 /* eslint-disable no-trailing-spaces */
+/* global HTMLElement */
 import { roundPoint, formatNumber } from './number';
@@ -7,2 +8,3 @@ import { createPath, createVerticalPath } from './path';
 } from './graph';
+import generateRandomIdString from './random';
 
@@ -226,3 +228,3 @@ class FunnelGraph {
                 subLabelsHTML += `<div class="svg-funnel-js__subLabel svg-funnel-js__subLabel-${index + 1}">
-    <div class="svg-funnel-js__subLabel--color" 
+    <div class="svg-funnel-js__subLabel--color"
         style="${generateLegendBackground(this.colors[index], this.gradientDirection)}"></div>
@@ -243,3 +245,13 @@ <div class="svg-funnel-js__subLabel--title">${subLabel}</div>
 
-        this.container = document.querySelector(this.containerSelector);
+        if (typeof this.containerSelector === 'string') {
+            this.container = document.querySelector(this.containerSelector);
+            if (!this.container) {
+                throw new Error(`Container cannot be found (selector: ${this.containerSelector}).`);
+            }
+        } else if (this.container instanceof HTMLElement) {
+            this.container = this.containerSelector;
+        } else {
+            throw new Error('Container must either be a selector string or an HTMLElement.');
+        }
+
         this.container.classList.add('svg-funnel-js');
@@ -328,3 +340,5 @@
             : svg.querySelector('defs');
-        const gradientName = `funnelGradient-${index}`;
+
+        const gradientName = generateRandomIdString(`funnelGradient-${index}-`);
+
         const gradient = createSVGElement('linearGradient', defs, {
@@ -331,0 +345,0 @@ id: gradientName

test/test.js

@@ -5,2 +5,3 @@ /* eslint-disable no-undef */
 import { generateLegendBackground, areEqual } from '../src/js/graph';
+import generateRandomIdString from '../src/js/random';
 import FunnelGraph from '../index';
@@ -10,2 +11,28 @@
 
+describe('Check randomly generated ids', () => {
+    const generatedIds = [];
+    it('don\'t collide often', () => {
+        for(let i = 0; i < 1000; i++) {
+            const newlyGeneratedId = generateRandomIdString();
+            for(let j = 0; j < generatedIds.length; j++) {
+                const previouslyGeneratedId = generatedIds[j];
+                assert.notEqual(newlyGeneratedId, previouslyGeneratedId);
+            }
+            generatedIds.push(newlyGeneratedId);
+        }
+    });
+    it('have correct prefix', () => {
+        ['test', '__', '-prefix-'].forEach(prefix => {
+            const generatedId = generateRandomIdString(prefix);
+            assert.equal(0, generatedId.indexOf(prefix));
+        });
+    });
+    it('are longer than just the prefix', () => {
+        ['test', '__', '-prefix-', ''].forEach(prefix => {
+            const generatedId = generateRandomIdString(prefix);
+            assert.equal(true, generatedId.length > prefix.length);
+        });
+    });
+});
+
 describe('Test number functions', () => {
@@ -12,0 +39,0 @@ it('round number test', () => {

No alert changes

Improved metrics

Total package byte prevSize

125615

increased by4.83%

Number of package files

30

increased by7.14%

Lines of code

1910

increased by3.3%

No dependency changes