diff --git a/README.md b/README.md index f91695c..790de3b 100644 --- a/README.md +++ b/README.md @@ -212,7 +212,7 @@ In the above example first segment, "Direct", will have a gradient, | Option | Description | Type | Required | Options | Default | Example | |--------|-------------|------|----------|---------|---------|---------| -| `container` | Selector of the element that will hold the chart | `string` | Yes | | | '.funnel-container' | +| `container` | Selector of the element that will hold the chart | `string`, `node` | Yes | | | '.funnel-container' | | `direction` | Whether the chart visualization is displayed vertically or horizontally | `string` | No | 'vertical', 'horizontal' | 'horizontal' | | | `gradientDirection` | Whether the gradient applied to the segments of the graph is displayed from top to bottom or from left to right | `string` | No | 'vertical', 'horizontal' | 'horizontal' | | `displayPercent` | Whether to display the automatically calculated percentage values below the labels | `boolean` | No | `true`, `false` | `true` | | diff --git a/dist/js/funnel-graph.js b/dist/js/funnel-graph.js index 2c53881..6c08894 100644 --- a/dist/js/funnel-graph.js +++ b/dist/js/funnel-graph.js @@ -387,7 +387,7 @@ function () { if (!this.container) { throw new Error("Container cannot be found (selector: ".concat(this.containerSelector, ").")); } - } else if (this.container instanceof HTMLElement) { + } else if (this.containerSelector instanceof HTMLElement) { this.container = this.containerSelector; } else { throw new Error('Container must either be a selector string or an HTMLElement.'); diff --git a/dist/js/funnel-graph.min.js b/dist/js/funnel-graph.min.js index 8ebe91b..e50b188 100644 --- a/dist/js/funnel-graph.min.js +++ b/dist/js/funnel-graph.min.js @@ -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".concat(u.subLabels[e],':\n ').concat(n,"\n ")}),c+="",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+='
\n
\n
').concat(t,"
\n
")}),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".concat(u.subLabels[e],':\n ').concat(n,"\n ")}),c+="",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+='
\n
\n
').concat(t,"
\n
")}),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.containerSelector 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