vue-funnel-graph-js-sass/dist/vue-funnel-graph.min.js

Vue.js funnel graph component using modern Sass (Dart Sass) - compatible with Node.js 16+

var VueFunnelGraph=function(e,t,a,n,s,i){"use strict";a=a&&Object.prototype.hasOwnProperty.call(a,"default")?a.default:a,n=n&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n;var r={name:"VueFunnelGraph",props:{animated:{type:Boolean,default:!1},width:[String,Number],height:[String,Number],values:Array,labels:Array,colors:{type:Array,default:function(){return[]}},subLabels:Array,subLabelValue:{type:String,default:"percent"},direction:{type:String,default:"horizontal"},gradientDirection:{type:String,default:"horizontal"},displayPercentage:{type:Boolean,default:!0}},data:function(){return{paths:[],prevPaths:[],graph:null,tween:null,defaultColors:i.getDefaultColors(10)}},computed:{valuesFormatted:function(){return this.graph.is2d()?this.graph.getValues2d().map(function(e){return s.formatNumber(e)}):this.values.map(function(e){return s.formatNumber(e)})},colorSet:function(){for(var e=[],t=0,a=0;a<this.paths.length;a++){var n=this.graph.is2d()?this.getColors[a]:this.getColors,s="string"==typeof n||1===n.length?"solid":"gradient";"gradient"===s&&(t+=1),e.push({values:n,fillMode:s,fill:"solid"===s?n:"url('#funnelGradient-"+t+"')"})}return e},gradientSet:function(){var e=[];return this.colorSet.forEach(function(t){"gradient"===t.fillMode&&e.push(t)}),e},getColors:function(){return this.colors instanceof Array&&0===this.colors.length?i.getDefaultColors(this.is2d()?this.values[0].length:2):this.colors.length<this.paths.length?[].concat(this.colors).concat([].concat(this.defaultColors).splice(this.paths.length,this.paths.length-this.colors.length)):this.colors},gradientAngle:function(){return"rotate("+("vertical"===this.gradientDirection?90:0)+")"}},methods:{enterTransition:function(e,t){this.animated||t(),setTimeout(function(){return t()},700)},leaveTransition:function(e,t){this.animated||t(),setTimeout(function(){return t()},700)},is2d:function(){return this.graph.is2d()},percentages:function(){return this.graph.createPercentages()},twoDimPercentages:function(){return this.is2d()?this.graph.getPercentages2d():[]},subLabelBackgrounds:function(e){return this.is2d()?i.generateLegendBackground(this.getColors[e],this.gradientDirection):[]},offsetColor:function(e,t){return Math.round(100*e/(t-1))+"%"},makeAnimations:function(){var e=this;null!==this.tween&&this.tween.stop();var n=[],s=this.prevPaths.length!==this.paths.length,i={x:.5,y:.5};s&&(i={x:0,y:.5},this.graph.isVertical()&&(i={x:1,y:1}),this.graph.is2d()||(i={x:0,y:1})),this.paths.forEach(function(a,r){var l=e.prevPaths[r]||e.graph.getPathMedian(r);s&&(l=e.graph.getPathMedian(r));var o=t.interpolate([l,a],{addPoints:1,origin:i,optimize:"fill",precision:1});n.push(o)});var r={value:0};this.tween=new a.Tween(r).to({value:1},700).easing(a.Easing.Cubic.InOut).onUpdate(function(){for(var t=0;t<e.paths.length;t++)e.$set(e.paths,t,n[t](r.value))}),this.tween.start(),function e(){a.update()&&requestAnimationFrame(e)}()},drawPaths:function(){var e=this;this.prevPaths=this.paths,this.paths=[],this.graph.getPathDefinitions().forEach(function(t){e.paths.push(t)})}},created:function(){this.graph=new n({height:this.height,width:this.width,direction:this.direction,data:{labels:this.labels,values:this.values}}),this.drawPaths(),this.animated&&this.makeAnimations()},watch:{values:function(){this.graph.setValues(this.values),this.drawPaths(),this.animated&&this.makeAnimations()},direction:function(){this.graph.setDirection(this.direction).setWidth(this.width).setHeight(this.height),this.drawPaths()}},filters:{format:function(e){return s.formatNumber(e)}}};function l(e,t,a,n,s,i,r,l,o,d){"boolean"!=typeof r&&(o=l,l=r,r=!1);var u,c="function"==typeof a?a.options:a;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,s&&(c.functional=!0)),n&&(c._scopeId=n),i?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,o(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},c._ssrRegister=u):t&&(u=r?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,l(e))}),u)if(c.functional){var h=c.render;c.render=function(e,t){return u.call(t),h(e,t)}}else{var f=c.beforeCreate;c.beforeCreate=f?[].concat(f,u):[u]}return a}var o,d="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function u(e){return function(e,t){return function(e,t){var a=d?t.media||"default":e,n=c[a]||(c[a]={ids:new Set,styles:[]});if(!n.ids.has(e)){n.ids.add(e);var s=t.source;if(t.map&&(s+="\n/*# sourceURL="+t.map.sources[0]+" */",s+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),n.element||(n.element=document.createElement("style"),n.element.type="text/css",t.media&&n.element.setAttribute("media",t.media),void 0===o&&(o=document.head||document.getElementsByTagName("head")[0]),o.appendChild(n.element)),"styleSheet"in n.element)n.styles.push(s),n.element.styleSheet.cssText=n.styles.filter(Boolean).join("\n");else{var i=n.ids.size-1,r=document.createTextNode(s),l=n.element.childNodes;l[i]&&n.element.removeChild(l[i]),l.length?n.element.insertBefore(r,l[i]):n.element.appendChild(r)}}}(e,t)}}var c={};var h=l({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"funnel svg-funnel-js",class:{"svg-funnel-js--vertical":"vertical"===e.direction}},[a("div",{staticClass:"svg-funnel-js__container"},[a("svg",{attrs:{width:e.width,height:e.height}},[a("defs",e._l(e.gradientSet,function(t,n){return a("linearGradient",{key:n,attrs:{id:"funnelGradient-"+(n+1),gradientTransform:e.gradientAngle}},e._l(t.values,function(n,s){return a("stop",{key:s,attrs:{"stop-color":n,offset:e.offsetColor(s,t.values.length)}})}),1)}),1),e._v(" "),e._l(e.paths,function(t,n){return a("path",{key:n,attrs:{fill:e.colorSet[n].fill,stroke:e.colorSet[n].fill,d:t}})})],2)]),e._v(" "),a("transition-group",{staticClass:"svg-funnel-js__labels",attrs:{name:"appear",tag:"div"},on:{enter:e.enterTransition,leave:e.leaveTransition}},e._l(e.valuesFormatted,function(t,n){return a("div",{key:e.labels[n].toLowerCase().split(" ").join("-"),staticClass:"svg-funnel-js__label",class:"label-"+(n+1)},[a("div",{staticClass:"label__value"},[e._v(e._s(t))]),e._v(" "),e.labels?a("div",{staticClass:"label__title"},[e._v(e._s(e.labels[n]))]):e._e(),e._v(" "),e.displayPercentage&&100!==e.percentages()[n]?a("div",{staticClass:"label__percentage"},[e._v("\n                "+e._s(e.percentages()[n])+"%\n            ")]):e._e(),e._v(" "),e.is2d()?a("div",{staticClass:"label__segment-percentages"},[a("ul",{staticClass:"segment-percentage__list"},e._l(e.subLabels,function(t,s){return a("li",{key:s},[e._v("\n                        "+e._s(t)+":\n                        "),"percent"===e.subLabelValue?a("span",{staticClass:"percentage__list-label"},[e._v(e._s(e.twoDimPercentages()[n][s])+"%")]):a("span",{staticClass:"percentage__list-label"},[e._v(e._s(e._f("format")(e.values[n][s])))])])}),0)]):e._e()])}),0),e._v(" "),a("transition",{attrs:{name:"fade"},on:{enter:e.enterTransition,leave:e.leaveTransition}},[e.is2d()?a("div",{staticClass:"svg-funnel-js__subLabels"},e._l(e.subLabels,function(t,n){return a("div",{key:n,class:"svg-funnel-js__subLabel svg-funnel-js__subLabel-"+(n+1)},[a("div",{staticClass:"svg-funnel-js__subLabel--color",style:e.subLabelBackgrounds(n)}),e._v(" "),a("div",{staticClass:"svg-funnel-js__subLabel--title"},[e._v(e._s(t))])])}),0):e._e()])],1)},staticRenderFns:[]},function(e){e&&e("data-v-52d787cd_0",{source:".appear-enter-active[data-v-52d787cd],.appear-leave-active[data-v-52d787cd]{transition:all .7s ease-in-out}.appear-enter-to[data-v-52d787cd],.appear-leave[data-v-52d787cd]{max-width:100%;max-height:100%;opacity:1}.appear-enter[data-v-52d787cd],.appear-leave-to[data-v-52d787cd]{max-width:0;max-height:0;opacity:0}.fade-enter-active[data-v-52d787cd],.fade-leave-active[data-v-52d787cd]{transition:all .3s ease}.fade-enter-to[data-v-52d787cd],.fade-leave[data-v-52d787cd]{opacity:1}.fade-enter[data-v-52d787cd],.fade-leave-to[data-v-52d787cd]{opacity:0}",map:void 0,media:void 0})},r,"data-v-52d787cd",!1,void 0,!1,u,void 0,void 0),f=Object.freeze({__proto__:null,VueFunnelGraph:h});var p={install:function e(t){e.installed||(e.installed=!0,Object.keys(f).forEach(function(e){t.component(e,f[e])}))}},v=null;return"undefined"!=typeof window?v=window.Vue:"undefined"!=typeof global&&(v=global.Vue),v&&v.use(p),e.VueFunnelGraph=h,e.default=p,e}({},interpolate,TWEEN,FunnelGraph,formatNumber,getDefaultColors);