@trutoo/funnel-graph
Version:
SVG Funnel Graph TypeScript Library.
3 lines (2 loc) • 14 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).fg={})}(this,(function(t){"use strict";var e=function(t,e){"object"==typeof e&&Object.keys(e).forEach((function(i){t.setAttribute(i,e[i])}))},i=function(t){for(var e=[],i=1;i<arguments.length;i++)e[i-1]=arguments[i];e.forEach((function(e){t.removeAttribute(e)}))},r=function(t,i,r){var n=document.createElementNS("http://www.w3.org/2000/svg",t);return"object"==typeof r&&e(n,r),i&&i.appendChild(n),n},n=function(t,e){return void 0===e&&(e="horizontal"),"string"==typeof t?"background-color: "+t:1===t.length?"background-color: "+t[0]:"background-image: linear-gradient("+("horizontal"===e?"to right, ":"")+t.join(", ")+")"},a=["#003f5c","#2f4b7c","#665191","#a05195","#d45087","#f95d6a","#ff7c43","#ffa600"],o=function(t){if(1==t)return[a[0],a[3]];for(var e=[],i=a.length,r=0;r<t;r++){var n=Math.round(i/Math.min(t,i)*(r%i));e.push(a[n])}return e},s=function(){return(s=Object.assign||function(t){for(var e,i=1,r=arguments.length;i<r;i++)for(var n in e=arguments[i])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t}).apply(this,arguments)};function h(t,e){for(var i=0,r=e.length,n=t.length;i<r;i++,n++)t[n]=e[i];return t}var l=function(t){return Math.round(10*t)/10},c=function(t){return t.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g,"$1,")},u=function(t,e,i,r){return" C"+l((i+t)/2)+","+e+" "+l((i+t)/2)+","+r+" "+i+","+r},d=function(t,e,i,r){return" C"+t+","+l((r+e)/2)+" "+i+","+l((r+e)/2)+" "+i+","+r},p=function(t,e,i){for(var r="M"+t[0]+","+e[0],n=0;n<t.length-1;n++)r+=u(t[n],e[n],t[n+1],e[n+1]);r+=" L"+h([],t).pop()+","+h([],i).pop();for(n=t.length-1;n>0;n--)r+=u(t[n],i[n],t[n-1],i[n-1]);return r+=" Z"},f=function(t,e,i){for(var r="M"+t[0]+","+i[0],n=0;n<t.length-1;n++)r+=d(t[n],i[n],t[n+1],i[n+1]);r+=" L"+h([],e).pop()+","+h([],i).pop();for(n=t.length-1;n>0;n--)r+=d(e[n],i[n],e[n-1],i[n-1]);return r+=" Z"},g=function(t){return!!t.values&&Array.isArray(t.values[0])},v=function(t){return t.values.reduce((function(t,e){return Math.max(t,e.length)}),0)},y=function(t){return t.values.map((function(t){return t.reduce((function(t,e){return t+(e||0)}),0)}))},b=function(t){return t.values.map((function(t){var e=t.reduce((function(t,e){return t+(e||0)}),0);return t.map((function(t){return 0===e?0:l(100*(t||0)/e)}))}))},m=function(){function t(t){this.container=null,this.graphContainer=null,this.containerSelector="",t.container instanceof Element?this.container=t.container:this.containerSelector=t.container;var e=o(g(t.data)?v(t.data):1);this.data=s({labels:[],colors:e,subLabels:[]},t.data),this.gradientDirection=t.gradientDirection&&"vertical"===t.gradientDirection?"vertical":"horizontal",this.direction=t.direction&&"vertical"===t.direction?"vertical":"horizontal",this.displayPercent=t.displayPercent||!1,this.width=t.width||0,this.height=t.height||0,this.subLabelValue=t.subLabelValue||"percent"}return t.prototype.createContainer=function(){if(!this.container){if(!this.containerSelector)throw new Error("Container must either be a selector string or an Element.");if(this.container=document.querySelector(this.containerSelector),!this.container)throw new Error("Container cannot be found (selector: "+this.containerSelector+").")}this.container.classList.add("fg"),this.graphContainer=document.createElement("div"),this.graphContainer.classList.add("fg-container"),this.container.appendChild(this.graphContainer),"vertical"===this.direction&&this.container.classList.add("fg--vertical")},t.prototype.makeSVG=function(){if(this.graphContainer){var t=this.graphContainer.querySelector("svg");t||(t=r("svg",this.graphContainer,{width:this.getWidth().toString(),height:this.getHeight().toString()}),this.graphContainer.appendChild(t));for(var i=t.querySelectorAll("path"),n=this.getCrossAxisPoints().length-1,a=0;a<n;a++){var o=i[a];o||(o=r("path",t),t.appendChild(o));var s=g(this.data)?this.data.colors[a]:this.data.colors,h="string"==typeof s||1===s.length?"solid":"gradient";"solid"===h?e(o,{fill:Array.isArray(s)?s[0]:s,stroke:Array.isArray(s)?s[0]:s}):"gradient"===h&&this.applyGradient(t,o,s,a+1)}for(a=n;a<i.length;a++)i[a].remove()}},t.prototype.drawPaths=function(){var t=this.getSVG();if(t){var e=t.querySelectorAll("path");this.getPathDefinitions().forEach((function(t,i){e[i].setAttribute("d",t)}))}},t.prototype.addLabels=function(){var t=this;if(this.container){var e=document.createElement("div");e.setAttribute("class","fg-labels"),this.getPercentages().forEach((function(i,r){var n,a=document.createElement("div");a.setAttribute("class","fg-label");var o=document.createElement("div");o.setAttribute("class","fg-label__title"),o.textContent=t.data.labels[r]||"";var s=document.createElement("div");s.setAttribute("class","fg-label__value");var h=g(t.data)?t.getLayerSums()[r]:t.data.values[r];s.textContent=c(h||0);var l=document.createElement("div");if(l.setAttribute("class","fg-label__percentage"),l.textContent=i.toString()+"%",a.appendChild(s),a.appendChild(o),t.displayPercent&&a.appendChild(l),g(t.data)&&(null===(n=t.data.subLabels)||void 0===n?void 0:n.length)){var u=document.createElement("div");u.setAttribute("class","fg-label__segments");var d='<ul class="fg-label__segment-list">',p=t.getLayerPercentages();t.data.subLabels.forEach((function(e,i){var n=t.data,a="percent"===t.subLabelValue?(p[r][i]||0)+"%":c(n.values[r][i]||0);d+='\n <li class="fg-label__segment-item">'+e+':\n <span class="fg-label__segment-label">'+a+"</span>\n </li>"})),d+="</ul>",u.innerHTML=d,a.appendChild(u)}e.appendChild(a)})),this.container.appendChild(e)}},t.prototype.addSubLabels=function(){var t,e=this;if(this.container&&g(this.data)&&(null===(t=this.data.subLabels)||void 0===t?void 0:t.length)){var i=document.createElement("div");i.setAttribute("class","fg-sub-labels");var r="";this.data.subLabels.forEach((function(t,i){e.data.colors&&(r+='\n <div class="fg-sub-label">\n <div class="fg-sub-label__color"\n style="'+n(e.data.colors[i],e.gradientDirection)+'"></div>\n <div class="fg-sub-label__title">'+t+"</div>\n </div>")})),i.innerHTML=r,this.container.appendChild(i)}},t.prototype.applyGradient=function(t,i,n,a){void 0===a&&(a=0);var o=t.querySelector("defs");o||(o=r("defs",t));var s="funnelGradient-"+a,h=o.querySelector("#"+s);h||(h=r("linearGradient",o,{id:s})),"vertical"===this.gradientDirection&&e(h,{x1:"0",x2:"0",y1:"0",y2:"1"});for(var l=h.querySelectorAll("stop"),c=n.length,u=0;u<c;u++){var d=l[u],p={"stop-color":n[u],offset:Math.round(100*u/(c-1))+"%"};d?e(d,p):r("stop",h,p)}for(u=c;u<l.length;u++)l[u].remove();e(i,{fill:'url("#'+s+'")',stroke:'url("#'+s+'")'})},t.prototype.getMainAxisPoints=function(){var t=this.isVertical()?this.getHeight():this.getWidth();return function(t,e){for(var i=[],r=0;r<=t.values.length;r++)i.push(l(e*r/t.values.length));return i}(this.data,t)},t.prototype.getCrossAxisPoints=function(){var t=this.isVertical()?this.getWidth():this.getHeight();return function(t,e){var i=[],r=e/2;if(g(t)){var n=y(t),a=Math.max.apply(Math,n);n.push(h([],n).pop()),i.push(n.map((function(t){return l((a-t)/a*r)})));for(var o=b(t),s=i[0],c=v(t),u=1;u<c;u++){for(var d=i[u-1],p=[],f=0;f<t.values.length;f++){var m=o[f][u-1]||0;p.push(l(d[f]+(e-2*s[f])*(m/100)))}p.push(h([],p).pop()),i.push(p)}i.push(s.map((function(t){return e-t})))}else{var S=Math.max.apply(Math,t.values),C=h([],t.values).concat(h([],t.values).pop());i.push(C.map((function(t){return l((S-t)/S*r)}))),i.push(i[0].map((function(t){return e-t})))}return i}(this.data,t)},t.prototype.getGraphType=function(){return g(this.data)?"layered":"normal"},t.prototype.isVertical=function(){return"vertical"===this.direction},t.prototype.getDataSize=function(){return this.data.values.length},t.prototype.getSubDataSize=function(){return Array.isArray(this.data.values[0])?this.data.values[0].length:0},t.prototype.getFullDimension=function(){return this.isVertical()?this.getHeight():this.getWidth()},t.prototype.setValues=function(t){return this.data.values=t,this},t.prototype.setDirection=function(t){return this.direction=t,this},t.prototype.setHeight=function(t){return this.height=t,this},t.prototype.setWidth=function(t){return this.width=t,this},t.prototype.getLayerSums=function(){return g(this.data)?y(this.data):[]},t.prototype.getLayerPercentages=function(){return g(this.data)?b(this.data):[]},t.prototype.getPercentages=function(){var t=[];t=g(this.data)?this.getLayerSums():h([],this.data.values);var e=Math.max.apply(Math,t);return t.map((function(t){return t?l(100*t/e):0}))},t.prototype.getSVG=function(){if(this.container){var t=this.container.querySelector("svg");if(!t)throw new Error("No SVG found inside of the container");return t}},t.prototype.getWidth=function(){var t;return this.width||(null===(t=this.graphContainer)||void 0===t?void 0:t.clientWidth)||0},t.prototype.getHeight=function(){var t;return this.height||(null===(t=this.graphContainer)||void 0===t?void 0:t.clientHeight)||0},t.prototype.getPathDefinitions=function(){for(var t=this.getCrossAxisPoints(),e=t.length-1,i=[],r=0;r<e;r++)if(this.isVertical()){var n=t[r],a=t[r+1],o=this.getMainAxisPoints(),s=f(n,a,o);i.push(s)}else{n=this.getMainAxisPoints(),o=t[r];var h=t[r+1];s=p(n,o,h);i.push(s)}return i},t.prototype.getPathMedian=function(t){var e=this.getCrossAxisPoints();if(this.isVertical()){var i=e[t],r=e[t+1],n=this.getMainAxisPoints(),a=[],o=[];return i.forEach((function(t,e){var i=(t+r[e])/2;a.push(i-1),o.push(i+1)})),f(a,o,n)}var s=this.getMainAxisPoints(),h=e[t],l=e[t+1],c=[],u=[];return h.forEach((function(t,e){var i=(t+l[e])/2;c.push(i-1),u.push(i+1)})),p(s,c,u)},t.prototype.makeVertical=function(){var t=this.getSVG();if(this.container&&t){if("vertical"===this.direction)return!0;this.direction="vertical",this.container.classList.add("fg--vertical");var i=this.getHeight().toString(),r=this.getWidth().toString();return e(t,{height:i,width:r}),this.drawPaths(),!0}},t.prototype.makeHorizontal=function(){var t=this.getSVG();if(this.container&&t){if("horizontal"===this.direction)return!0;this.direction="horizontal",this.container.classList.remove("fg--vertical");var i=this.getHeight().toString(),r=this.getWidth().toString();return e(t,{height:i,width:r}),this.drawPaths(),!0}},t.prototype.toggleDirection=function(){"horizontal"===this.direction?this.makeVertical():this.makeHorizontal()},t.prototype.gradientMakeVertical=function(){if(!this.graphContainer)return!1;if("vertical"===this.gradientDirection)return!0;this.gradientDirection="vertical";for(var t=this.graphContainer.querySelectorAll("linearGradient"),i=0;i<t.length;i++)e(t[i],{x1:"0",x2:"0",y1:"0",y2:"1"});return!0},t.prototype.gradientMakeHorizontal=function(){if(!this.graphContainer)return!1;if("horizontal"===this.gradientDirection)return!0;this.gradientDirection="horizontal";for(var t=this.graphContainer.querySelectorAll("linearGradient"),e=0;e<t.length;e++)i(t[e],"x1","x2","y1","y2");return!0},t.prototype.gradientToggleDirection=function(){"horizontal"===this.gradientDirection?this.gradientMakeVertical():this.gradientMakeHorizontal()},t.prototype.updateWidth=function(t){var i=this.getSVG();if(i)return this.width=t,e(i,{width:t.toString()}),this.drawPaths(),!0},t.prototype.updateHeight=function(t){var i=this.getSVG();if(i)return this.height=t,e(i,{height:t.toString()}),this.drawPaths(),!0},t.prototype.updateData=function(t,e){if(void 0===e&&(e=!1),this.container){var i=!1;if(e&&(this.data={values:[],labels:[],subLabels:[],colors:[]},i=!0),t.colors?(this.data.colors=t.colors,i=!0):t.values&&t.values.length!=this.data.values.length&&(this.data.colors=o(g(t)?v(t):1),i=!0),t.values&&(this.data.values=t.values,i=!0),g(t)&&t.subLabels){var r=this.container.querySelector(".fg-sub-labels");r&&r.remove(),this.data.subLabels=t.subLabels,this.addSubLabels()}if(t.labels){var n=this.container.querySelector(".fg-labels");n&&n.remove(),this.data.labels=t.labels,this.addLabels()}i&&(this.makeSVG(),this.drawPaths())}},t.prototype.update=function(t){if(this.container){if(void 0!==t.displayPercent&&this.displayPercent!==t.displayPercent)if(!0===this.displayPercent)this.container.querySelectorAll(".fg-label__percentage").forEach((function(t){t.remove()}));else{var e=this.getPercentages();this.container.querySelectorAll(".fg-label").forEach((function(t,i){var r=e[i],n=document.createElement("div");n.setAttribute("class","fg-label__percentage"),100!==r&&(n.textContent=r.toString()+"%",t.appendChild(n))}))}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)}},t.prototype.draw=function(){this.createContainer(),this.makeSVG(),this.addLabels(),g(this.data)&&this.addSubLabels(),this.drawPaths()},t}();t.FunnelGraph=m,t.areEqual=function(t,e){var i=Object.prototype.toString.call(t);if(i!==Object.prototype.toString.call(e))return!1;if("[object Array]"!==i)return!1;if(t.length!==e.length)return!1;for(var r=0;r<t.length;r++){var n=Object.prototype.toString.call(t[r]);if(n!==Object.prototype.toString.call(e[r]))return!1;if("[object Array]"===n){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},t.createCurves=u,t.createPath=p,t.createSVGElement=r,t.createVerticalCurves=d,t.createVerticalPath=f,t.defaultColors=a,t.formatNumber=c,t.generateLegendBackground=n,t.getDefaultColors=o,t.isLayered=g,t.removeAttrs=i,t.roundPoint=l,t.setAttrs=e,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=index.umd.min.js.map