vue-funnel-graph-js - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

CHANGELOG.md

@@ -0,1 +1,7 @@
+### 0.1.7 (Feb 2, 2020)
+
+* Add support for `subLabelValue`
+* Update packages
+* Fix minor issue
+
 ### 0.1.6 (Jul 31, 2019)
@@ -2,0 +8,0 @@

dist/vue-funnel-graph.esm.js

@@ -27,2 +27,6 @@ import { interpolate } from 'polymorph-js';
         subLabels: Array,
+        subLabelValue: {
+            type: String,
+            default: 'percent'
+        },
         direction: {
@@ -170,5 +174,3 @@ type: String,
                     for (var index = 0; index < this$1.paths.length; index++) {
-                        this$1.paths[index] = interpolators[index](position.value);
-                        // eslint-disable-next-line no-underscore-dangle
-                        this$1.paths.__ob__.dep.notify();
+                        this$1.$set(this$1.paths, index, interpolators[index](position.value));
                     }
@@ -217,2 +219,7 @@ });
         }
+    },
+    filters: {
+        format: function (value) {
+            return formatNumber(value)
+        }
     }
@@ -360,3 +367,3 @@ };
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"funnel svg-funnel-js",class:{'svg-funnel-js--vertical': _vm.direction === 'vertical'}},[_c('div',{staticClass:"svg-funnel-js__container"},[_c('svg',{attrs:{"width":_vm.width,"height":_vm.height}},[_c('defs',_vm._l((_vm.gradientSet),function(colors,index){return _c('linearGradient',{key:index,attrs:{"id":("funnelGradient-" + ((index+1))),"gradientTransform":_vm.gradientAngle}},_vm._l((colors.values),function(color,index){return _c('stop',{key:index,attrs:{"stop-color":color,"offset":_vm.offsetColor(index, colors.values.length)}})}),1)}),1),_vm._v(" "),_vm._l((_vm.paths),function(path,index){return _c('path',{key:index,attrs:{"fill":_vm.colorSet[index].fill,"stroke":_vm.colorSet[index].fill,"d":path}})})],2)]),_vm._v(" "),_c('transition-group',{staticClass:"svg-funnel-js__labels",attrs:{"name":"appear","tag":"div"},on:{"enter":_vm.enterTransition,"leave":_vm.leaveTransition}},_vm._l((_vm.valuesFormatted),function(value,index){return _c('div',{key:_vm.labels[index].toLowerCase().split(' ').join('-'),staticClass:"svg-funnel-js__label",class:("label-" + ((index+1)))},[_c('div',{staticClass:"label__value"},[_vm._v(_vm._s(value))]),_vm._v(" "),(_vm.labels)?_c('div',{staticClass:"label__title"},[_vm._v(_vm._s(_vm.labels[index]))]):_vm._e(),_vm._v(" "),(_vm.displayPercentage && _vm.percentages()[index] !== 100)?_c('div',{staticClass:"label__percentage"},[_vm._v("\n                "+_vm._s(_vm.percentages()[index])+"%\n            ")]):_vm._e(),_vm._v(" "),(_vm.is2d())?_c('div',{staticClass:"label__segment-percentages"},[_c('ul',{staticClass:"segment-percentage__list"},_vm._l((_vm.subLabels),function(subLabel,j){return _c('li',{key:j},[_vm._v("\n                        "+_vm._s(subLabel)+":\n                        "),_c('span',{staticClass:"percentage__list-label"},[_vm._v(_vm._s(_vm.twoDimPercentages()[index][j])+"%")])])}),0)]):_vm._e()])}),0),_vm._v(" "),_c('transition',{attrs:{"name":"fade"},on:{"enter":_vm.enterTransition,"leave":_vm.leaveTransition}},[(_vm.is2d())?_c('div',{staticClass:"svg-funnel-js__subLabels"},_vm._l((_vm.subLabels),function(subLabel,index){return _c('div',{key:index,class:("svg-funnel-js__subLabel svg-funnel-js__subLabel-" + ((index + 1)))},[_c('div',{staticClass:"svg-funnel-js__subLabel--color",style:(_vm.subLabelBackgrounds(index))}),_vm._v(" "),_c('div',{staticClass:"svg-funnel-js__subLabel--title"},[_vm._v(_vm._s(subLabel))])])}),0):_vm._e()])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"funnel svg-funnel-js",class:{'svg-funnel-js--vertical': _vm.direction === 'vertical'}},[_c('div',{staticClass:"svg-funnel-js__container"},[_c('svg',{attrs:{"width":_vm.width,"height":_vm.height}},[_c('defs',_vm._l((_vm.gradientSet),function(colors,index){return _c('linearGradient',{key:index,attrs:{"id":("funnelGradient-" + ((index+1))),"gradientTransform":_vm.gradientAngle}},_vm._l((colors.values),function(color,index){return _c('stop',{key:index,attrs:{"stop-color":color,"offset":_vm.offsetColor(index, colors.values.length)}})}),1)}),1),_vm._v(" "),_vm._l((_vm.paths),function(path,index){return _c('path',{key:index,attrs:{"fill":_vm.colorSet[index].fill,"stroke":_vm.colorSet[index].fill,"d":path}})})],2)]),_vm._v(" "),_c('transition-group',{staticClass:"svg-funnel-js__labels",attrs:{"name":"appear","tag":"div"},on:{"enter":_vm.enterTransition,"leave":_vm.leaveTransition}},_vm._l((_vm.valuesFormatted),function(value,index){return _c('div',{key:_vm.labels[index].toLowerCase().split(' ').join('-'),staticClass:"svg-funnel-js__label",class:("label-" + ((index+1)))},[_c('div',{staticClass:"label__value"},[_vm._v(_vm._s(value))]),_vm._v(" "),(_vm.labels)?_c('div',{staticClass:"label__title"},[_vm._v(_vm._s(_vm.labels[index]))]):_vm._e(),_vm._v(" "),(_vm.displayPercentage && _vm.percentages()[index] !== 100)?_c('div',{staticClass:"label__percentage"},[_vm._v("\n                "+_vm._s(_vm.percentages()[index])+"%\n            ")]):_vm._e(),_vm._v(" "),(_vm.is2d())?_c('div',{staticClass:"label__segment-percentages"},[_c('ul',{staticClass:"segment-percentage__list"},_vm._l((_vm.subLabels),function(subLabel,j){return _c('li',{key:j},[_vm._v("\n                        "+_vm._s(subLabel)+":\n                        "),(_vm.subLabelValue === 'percent')?_c('span',{staticClass:"percentage__list-label"},[_vm._v(_vm._s(_vm.twoDimPercentages()[index][j])+"%")]):_c('span',{staticClass:"percentage__list-label"},[_vm._v(_vm._s(_vm._f("format")(_vm.values[index][j])))])])}),0)]):_vm._e()])}),0),_vm._v(" "),_c('transition',{attrs:{"name":"fade"},on:{"enter":_vm.enterTransition,"leave":_vm.leaveTransition}},[(_vm.is2d())?_c('div',{staticClass:"svg-funnel-js__subLabels"},_vm._l((_vm.subLabels),function(subLabel,index){return _c('div',{key:index,class:("svg-funnel-js__subLabel svg-funnel-js__subLabel-" + ((index + 1)))},[_c('div',{staticClass:"svg-funnel-js__subLabel--color",style:(_vm.subLabelBackgrounds(index))}),_vm._v(" "),_c('div',{staticClass:"svg-funnel-js__subLabel--title"},[_vm._v(_vm._s(subLabel))])])}),0):_vm._e()])],1)};
 var __vue_staticRenderFns__ = [];
@@ -367,7 +374,7 @@
     if (!inject) { return }
-    inject("data-v-de071f9e_0", { source: ".appear-enter-active[data-v-de071f9e],.appear-leave-active[data-v-de071f9e]{transition:all .7s ease-in-out}.appear-enter-to[data-v-de071f9e],.appear-leave[data-v-de071f9e]{max-width:100%;max-height:100%;opacity:1}.appear-enter[data-v-de071f9e],.appear-leave-to[data-v-de071f9e]{max-width:0;max-height:0;opacity:0}.fade-enter-active[data-v-de071f9e],.fade-leave-active[data-v-de071f9e]{transition:all .3s ease}.fade-enter-to[data-v-de071f9e],.fade-leave[data-v-de071f9e]{opacity:1}.fade-enter[data-v-de071f9e],.fade-leave-to[data-v-de071f9e]{opacity:0}", map: undefined, media: undefined });
+    inject("data-v-3f236e82_0", { source: ".appear-enter-active[data-v-3f236e82],.appear-leave-active[data-v-3f236e82]{transition:all .7s ease-in-out}.appear-enter-to[data-v-3f236e82],.appear-leave[data-v-3f236e82]{max-width:100%;max-height:100%;opacity:1}.appear-enter[data-v-3f236e82],.appear-leave-to[data-v-3f236e82]{max-width:0;max-height:0;opacity:0}.fade-enter-active[data-v-3f236e82],.fade-leave-active[data-v-3f236e82]{transition:all .3s ease}.fade-enter-to[data-v-3f236e82],.fade-leave[data-v-3f236e82]{opacity:1}.fade-enter[data-v-3f236e82],.fade-leave-to[data-v-3f236e82]{opacity:0}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-de071f9e";
+  var __vue_scope_id__ = "data-v-3f236e82";
   /* module identifier */
@@ -395,2 +402,3 @@ var __vue_module_identifier__ = undefined;
 var components = /*#__PURE__*/Object.freeze({
+    __proto__: null,
     VueFunnelGraph: vueFunnelGraph
@@ -397,0 +405,0 @@ });

dist/vue-funnel-graph.min.js

@@ -1,1 +0,1 @@
-var VueFunnelGraph=function(e,t,a,n,s,i){"use strict";a=a&&a.hasOwnProperty("default")?a.default:a,n=n&&n.hasOwnProperty("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,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 o=e.prevPaths[r]||e.graph.getPathMedian(r);s&&(o=e.graph.getPathMedian(r));var l=t.interpolate([o,a],{addPoints:1,origin:i,optimize:"fill",precision:1});n.push(l)});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.paths[t]=n[t](r.value),e.paths.__ob__.dep.notify()}),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)})}},beforeMount: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()}}};var o=function(e,t,a,n,s,i,r,o,l,d){"boolean"!=typeof r&&(l=o,o=r,r=!1);var u,h="function"==typeof a?a.options:a;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,s&&(h.functional=!0)),n&&(h._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,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},h._ssrRegister=u):t&&(u=r?function(){t.call(this,d(this.$root.$options.shadowRoot))}:function(e){t.call(this,o(e))}),u)if(h.functional){var c=h.render;h.render=function(e,t){return u.call(t),c(e,t)}}else{var f=h.beforeCreate;h.beforeCreate=f?[].concat(f,u):[u]}return a},l="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var d=document.head||document.getElementsByTagName("head")[0],u={};var h=o({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                        "),a("span",{staticClass:"percentage__list-label"},[e._v(e._s(e.twoDimPercentages()[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-de071f9e_0",{source:".appear-enter-active[data-v-de071f9e],.appear-leave-active[data-v-de071f9e]{transition:all .7s ease-in-out}.appear-enter-to[data-v-de071f9e],.appear-leave[data-v-de071f9e]{max-width:100%;max-height:100%;opacity:1}.appear-enter[data-v-de071f9e],.appear-leave-to[data-v-de071f9e]{max-width:0;max-height:0;opacity:0}.fade-enter-active[data-v-de071f9e],.fade-leave-active[data-v-de071f9e]{transition:all .3s ease}.fade-enter-to[data-v-de071f9e],.fade-leave[data-v-de071f9e]{opacity:1}.fade-enter[data-v-de071f9e],.fade-leave-to[data-v-de071f9e]{opacity:0}",map:void 0,media:void 0})},r,"data-v-de071f9e",!1,void 0,function(e){return function(e,t){return function(e,t){var a=l?t.media||"default":e,n=u[a]||(u[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),d.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),o=n.element.childNodes;o[i]&&n.element.removeChild(o[i]),o.length?n.element.insertBefore(r,o[i]):n.element.appendChild(r)}}}(e,t)}},void 0),c=Object.freeze({VueFunnelGraph:h});var f={install:function e(t){e.installed||(e.installed=!0,Object.keys(c).forEach(function(e){t.component(e,c[e])}))}},p=null;return"undefined"!=typeof window?p=window.Vue:"undefined"!=typeof global&&(p=global.Vue),p&&p.use(f),e.VueFunnelGraph=h,e.default=f,e}({},interpolate,TWEEN,FunnelGraph,formatNumber,getDefaultColors);
+var VueFunnelGraph=function(e,t,a,n,s,i){"use strict";a=a&&a.hasOwnProperty("default")?a.default:a,n=n&&n.hasOwnProperty("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)})}},beforeMount: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)}}};var l=function(e,t,a,n,s,i,r,l,o,u){"boolean"!=typeof r&&(o=l,l=r,r=!1);var d,h="function"==typeof a?a.options:a;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,s&&(h.functional=!0)),n&&(h._scopeId=n),i?(d=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)},h._ssrRegister=d):t&&(d=r?function(){t.call(this,u(this.$root.$options.shadowRoot))}:function(e){t.call(this,l(e))}),d)if(h.functional){var c=h.render;h.render=function(e,t){return d.call(t),c(e,t)}}else{var f=h.beforeCreate;h.beforeCreate=f?[].concat(f,d):[d]}return a},o="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var u=document.head||document.getElementsByTagName("head")[0],d={};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-3f236e82_0",{source:".appear-enter-active[data-v-3f236e82],.appear-leave-active[data-v-3f236e82]{transition:all .7s ease-in-out}.appear-enter-to[data-v-3f236e82],.appear-leave[data-v-3f236e82]{max-width:100%;max-height:100%;opacity:1}.appear-enter[data-v-3f236e82],.appear-leave-to[data-v-3f236e82]{max-width:0;max-height:0;opacity:0}.fade-enter-active[data-v-3f236e82],.fade-leave-active[data-v-3f236e82]{transition:all .3s ease}.fade-enter-to[data-v-3f236e82],.fade-leave[data-v-3f236e82]{opacity:1}.fade-enter[data-v-3f236e82],.fade-leave-to[data-v-3f236e82]{opacity:0}",map:void 0,media:void 0})},r,"data-v-3f236e82",!1,void 0,function(e){return function(e,t){return function(e,t){var a=o?t.media||"default":e,n=d[a]||(d[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),u.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)}},void 0),c=Object.freeze({__proto__:null,VueFunnelGraph:h});var f={install:function e(t){e.installed||(e.installed=!0,Object.keys(c).forEach(function(e){t.component(e,c[e])}))}},p=null;return"undefined"!=typeof window?p=window.Vue:"undefined"!=typeof global&&(p=global.Vue),p&&p.use(f),e.VueFunnelGraph=h,e.default=f,e}({},interpolate,TWEEN,FunnelGraph,formatNumber,getDefaultColors);

dist/vue-funnel-graph.umd.js

@@ -5,3 +5,3 @@ (function (global, factory) {
     (global = global || self, factory(global.VueFunnelGraph = {}, global.interpolate, global.TWEEN, global.FunnelGraph, global.formatNumber, global.getDefaultColors));
-}(this, function (exports, polymorphJs, TWEEN, FunnelGraph, number, graph) { 'use strict';
+}(this, (function (exports, polymorphJs, TWEEN, FunnelGraph, number, graph) { 'use strict';
 
@@ -29,2 +29,6 @@ TWEEN = TWEEN && TWEEN.hasOwnProperty('default') ? TWEEN['default'] : TWEEN;
             subLabels: Array,
+            subLabelValue: {
+                type: String,
+                default: 'percent'
+            },
             direction: {
@@ -172,5 +176,3 @@ type: String,
                         for (var index = 0; index < this$1.paths.length; index++) {
-                            this$1.paths[index] = interpolators[index](position.value);
-                            // eslint-disable-next-line no-underscore-dangle
-                            this$1.paths.__ob__.dep.notify();
+                            this$1.$set(this$1.paths, index, interpolators[index](position.value));
                         }
@@ -219,2 +221,7 @@ });
             }
+        },
+        filters: {
+            format: function (value) {
+                return number.formatNumber(value)
+            }
         }
@@ -362,3 +369,3 @@ };
     /* template */
-    var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"funnel svg-funnel-js",class:{'svg-funnel-js--vertical': _vm.direction === 'vertical'}},[_c('div',{staticClass:"svg-funnel-js__container"},[_c('svg',{attrs:{"width":_vm.width,"height":_vm.height}},[_c('defs',_vm._l((_vm.gradientSet),function(colors,index){return _c('linearGradient',{key:index,attrs:{"id":("funnelGradient-" + ((index+1))),"gradientTransform":_vm.gradientAngle}},_vm._l((colors.values),function(color,index){return _c('stop',{key:index,attrs:{"stop-color":color,"offset":_vm.offsetColor(index, colors.values.length)}})}),1)}),1),_vm._v(" "),_vm._l((_vm.paths),function(path,index){return _c('path',{key:index,attrs:{"fill":_vm.colorSet[index].fill,"stroke":_vm.colorSet[index].fill,"d":path}})})],2)]),_vm._v(" "),_c('transition-group',{staticClass:"svg-funnel-js__labels",attrs:{"name":"appear","tag":"div"},on:{"enter":_vm.enterTransition,"leave":_vm.leaveTransition}},_vm._l((_vm.valuesFormatted),function(value,index){return _c('div',{key:_vm.labels[index].toLowerCase().split(' ').join('-'),staticClass:"svg-funnel-js__label",class:("label-" + ((index+1)))},[_c('div',{staticClass:"label__value"},[_vm._v(_vm._s(value))]),_vm._v(" "),(_vm.labels)?_c('div',{staticClass:"label__title"},[_vm._v(_vm._s(_vm.labels[index]))]):_vm._e(),_vm._v(" "),(_vm.displayPercentage && _vm.percentages()[index] !== 100)?_c('div',{staticClass:"label__percentage"},[_vm._v("\n                "+_vm._s(_vm.percentages()[index])+"%\n            ")]):_vm._e(),_vm._v(" "),(_vm.is2d())?_c('div',{staticClass:"label__segment-percentages"},[_c('ul',{staticClass:"segment-percentage__list"},_vm._l((_vm.subLabels),function(subLabel,j){return _c('li',{key:j},[_vm._v("\n                        "+_vm._s(subLabel)+":\n                        "),_c('span',{staticClass:"percentage__list-label"},[_vm._v(_vm._s(_vm.twoDimPercentages()[index][j])+"%")])])}),0)]):_vm._e()])}),0),_vm._v(" "),_c('transition',{attrs:{"name":"fade"},on:{"enter":_vm.enterTransition,"leave":_vm.leaveTransition}},[(_vm.is2d())?_c('div',{staticClass:"svg-funnel-js__subLabels"},_vm._l((_vm.subLabels),function(subLabel,index){return _c('div',{key:index,class:("svg-funnel-js__subLabel svg-funnel-js__subLabel-" + ((index + 1)))},[_c('div',{staticClass:"svg-funnel-js__subLabel--color",style:(_vm.subLabelBackgrounds(index))}),_vm._v(" "),_c('div',{staticClass:"svg-funnel-js__subLabel--title"},[_vm._v(_vm._s(subLabel))])])}),0):_vm._e()])],1)};
+    var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"funnel svg-funnel-js",class:{'svg-funnel-js--vertical': _vm.direction === 'vertical'}},[_c('div',{staticClass:"svg-funnel-js__container"},[_c('svg',{attrs:{"width":_vm.width,"height":_vm.height}},[_c('defs',_vm._l((_vm.gradientSet),function(colors,index){return _c('linearGradient',{key:index,attrs:{"id":("funnelGradient-" + ((index+1))),"gradientTransform":_vm.gradientAngle}},_vm._l((colors.values),function(color,index){return _c('stop',{key:index,attrs:{"stop-color":color,"offset":_vm.offsetColor(index, colors.values.length)}})}),1)}),1),_vm._v(" "),_vm._l((_vm.paths),function(path,index){return _c('path',{key:index,attrs:{"fill":_vm.colorSet[index].fill,"stroke":_vm.colorSet[index].fill,"d":path}})})],2)]),_vm._v(" "),_c('transition-group',{staticClass:"svg-funnel-js__labels",attrs:{"name":"appear","tag":"div"},on:{"enter":_vm.enterTransition,"leave":_vm.leaveTransition}},_vm._l((_vm.valuesFormatted),function(value,index){return _c('div',{key:_vm.labels[index].toLowerCase().split(' ').join('-'),staticClass:"svg-funnel-js__label",class:("label-" + ((index+1)))},[_c('div',{staticClass:"label__value"},[_vm._v(_vm._s(value))]),_vm._v(" "),(_vm.labels)?_c('div',{staticClass:"label__title"},[_vm._v(_vm._s(_vm.labels[index]))]):_vm._e(),_vm._v(" "),(_vm.displayPercentage && _vm.percentages()[index] !== 100)?_c('div',{staticClass:"label__percentage"},[_vm._v("\n                "+_vm._s(_vm.percentages()[index])+"%\n            ")]):_vm._e(),_vm._v(" "),(_vm.is2d())?_c('div',{staticClass:"label__segment-percentages"},[_c('ul',{staticClass:"segment-percentage__list"},_vm._l((_vm.subLabels),function(subLabel,j){return _c('li',{key:j},[_vm._v("\n                        "+_vm._s(subLabel)+":\n                        "),(_vm.subLabelValue === 'percent')?_c('span',{staticClass:"percentage__list-label"},[_vm._v(_vm._s(_vm.twoDimPercentages()[index][j])+"%")]):_c('span',{staticClass:"percentage__list-label"},[_vm._v(_vm._s(_vm._f("format")(_vm.values[index][j])))])])}),0)]):_vm._e()])}),0),_vm._v(" "),_c('transition',{attrs:{"name":"fade"},on:{"enter":_vm.enterTransition,"leave":_vm.leaveTransition}},[(_vm.is2d())?_c('div',{staticClass:"svg-funnel-js__subLabels"},_vm._l((_vm.subLabels),function(subLabel,index){return _c('div',{key:index,class:("svg-funnel-js__subLabel svg-funnel-js__subLabel-" + ((index + 1)))},[_c('div',{staticClass:"svg-funnel-js__subLabel--color",style:(_vm.subLabelBackgrounds(index))}),_vm._v(" "),_c('div',{staticClass:"svg-funnel-js__subLabel--title"},[_vm._v(_vm._s(subLabel))])])}),0):_vm._e()])],1)};
     var __vue_staticRenderFns__ = [];
@@ -369,7 +376,7 @@
         if (!inject) { return }
-        inject("data-v-de071f9e_0", { source: ".appear-enter-active[data-v-de071f9e],.appear-leave-active[data-v-de071f9e]{transition:all .7s ease-in-out}.appear-enter-to[data-v-de071f9e],.appear-leave[data-v-de071f9e]{max-width:100%;max-height:100%;opacity:1}.appear-enter[data-v-de071f9e],.appear-leave-to[data-v-de071f9e]{max-width:0;max-height:0;opacity:0}.fade-enter-active[data-v-de071f9e],.fade-leave-active[data-v-de071f9e]{transition:all .3s ease}.fade-enter-to[data-v-de071f9e],.fade-leave[data-v-de071f9e]{opacity:1}.fade-enter[data-v-de071f9e],.fade-leave-to[data-v-de071f9e]{opacity:0}", map: undefined, media: undefined });
+        inject("data-v-3f236e82_0", { source: ".appear-enter-active[data-v-3f236e82],.appear-leave-active[data-v-3f236e82]{transition:all .7s ease-in-out}.appear-enter-to[data-v-3f236e82],.appear-leave[data-v-3f236e82]{max-width:100%;max-height:100%;opacity:1}.appear-enter[data-v-3f236e82],.appear-leave-to[data-v-3f236e82]{max-width:0;max-height:0;opacity:0}.fade-enter-active[data-v-3f236e82],.fade-leave-active[data-v-3f236e82]{transition:all .3s ease}.fade-enter-to[data-v-3f236e82],.fade-leave[data-v-3f236e82]{opacity:1}.fade-enter[data-v-3f236e82],.fade-leave-to[data-v-3f236e82]{opacity:0}", map: undefined, media: undefined });
 
       };
       /* scoped */
-      var __vue_scope_id__ = "data-v-de071f9e";
+      var __vue_scope_id__ = "data-v-3f236e82";
       /* module identifier */
@@ -397,2 +404,3 @@ var __vue_module_identifier__ = undefined;
     var components = /*#__PURE__*/Object.freeze({
+        __proto__: null,
         VueFunnelGraph: vueFunnelGraph
@@ -434,2 +442,2 @@ });
 
-}));
+})));

package.json

 {
   "name": "vue-funnel-graph-js",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "",
@@ -43,13 +43,13 @@ "main": "dist/vue-funnel-graph.umd.js",
   "dependencies": {
-    "@tweenjs/tween.js": "^17.3.0",
-    "funnel-graph-js": "^1.3.7",
-    "node-sass": "^4.12.0",
+    "@tweenjs/tween.js": "^17.4.0",
+    "funnel-graph-js": "^1.4.1",
+    "node-sass": "^4.13.1",
     "polymorph-js": "^0.2.4",
-    "sass-loader": "^7.1.0"
+    "sass-loader": "^7.3.1"
   },
   "devDependencies": {
-    "cross-env": "^5.2.0",
+    "cross-env": "^5.2.1",
     "minimist": "^1.2.0",
-    "rollup": "^1.11.3",
-    "rollup-plugin-buble": "^0.19.6",
+    "rollup": "^1.31.0",
+    "rollup-plugin-buble": "^0.19.8",
     "rollup-plugin-commonjs": "^9.3.4",
@@ -60,6 +60,6 @@ "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-vue": "^4.6.2",
-    "vue": "^2.6.10",
-    "vue-template-compiler": "^2.6.10",
-    "webpack": "^4.30.0"
+    "vue": "^2.6.11",
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.41.5"
   }
 }

src/node_modules/.cache/vue-loader/44e52a6e96880a2042a1f9270241fda0.json

@@ -1,1 +0,1 @@
-{"remainingRequest":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue?vue&type=template&id=063a7d4c&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue","mtime":1553156448878},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/loaders/templateLoader.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":["\n<div class=\"vue-funnel-graph-lib-dev\">\n    <div class=\"funnels\">\n        <vue-funnel-graph :width=\"width\" :height=\"height\" :labels=\"labels\"\n                          :values=\"values\" :colors=\"colors\" :sub-labels=\"subLabels\" :direction=\"direction\"\n                          :gradient-direction=\"gradientDirection\"\n                          :animated=\"true\" :display-percentage=\"true\"\n        ></vue-funnel-graph>\n    </div>\n    <div class=\"controls\">\n        <button @click=\"getNextSet()\">Change Data</button>\n        <button @click=\"toggleDirection()\">Toggle Direction</button>\n        <button @click=\"toggleGradient()\">Toggle Gradient Direction</button>\n    </div>\n</div>\n",null]}
+{"remainingRequest":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue?vue&type=template&id=063a7d4c&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue","mtime":1580652628972},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/loaders/templateLoader.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":["\n<div class=\"vue-funnel-graph-lib-dev\">\n    <div class=\"funnels\">\n        <vue-funnel-graph :width=\"width\" :height=\"height\" :labels=\"labels\"\n                          :values=\"values\" :colors=\"colors\" :sub-labels=\"subLabels\" :direction=\"direction\"\n                          :gradient-direction=\"gradientDirection\"\n                          :animated=\"true\" :display-percentage=\"true\"\n                          :sub-label-value=\"subLabelValue\"\n        ></vue-funnel-graph>\n    </div>\n    <div class=\"controls\">\n        <button @click=\"getNextSet()\">Change Data</button>\n        <button @click=\"toggleDirection()\">Toggle Direction</button>\n        <button @click=\"toggleGradient()\">Toggle Gradient Direction</button>\n    </div>\n</div>\n",null]}

src/node_modules/.cache/vue-loader/6e41b6bbeb37a4b6745ffa8a3fa5fd24.json

@@ -1,1 +0,1 @@
-{"remainingRequest":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-components/vue-funnel-graph.vue?vue&type=template&id=5dd8f15e&scoped=true&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-components/vue-funnel-graph.vue","mtime":1553111713389},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/loaders/templateLoader.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":["\n<div class=\"funnel svg-funnel-js\" :class=\"{'svg-funnel-js--vertical': direction === 'vertical'}\">\n    <div class=\"svg-funnel-js__container\">\n        <svg :width=\"width\" :height=\"height\">\n            <defs>\n                <linearGradient :id=\"`funnelGradient-${(index+1)}`\"\n                                v-for=\"(colors, index) in gradientSet\"\n                                :key=\"index\"\n                                :gradientTransform=\"gradientAngle\"\n                >\n                    <stop :stop-color=\"color\"\n                          :offset=\"offsetColor(index, colors.values.length)\"\n                          v-for=\"(color, index) in colors.values\"\n                          :key=\"index\"\n                    ></stop>\n                </linearGradient>\n            </defs>\n            <path :fill=\"colorSet[index].fill\" :stroke=\"colorSet[index].fill\"\n                  :d=\"path\" v-for=\"(path, index) in paths\" :key=\"index\"\n            ></path>\n        </svg>\n    </div>\n    <transition-group class=\"svg-funnel-js__labels\" name=\"appear\" tag=\"div\"\n                      v-on:enter=\"enterTransition\" v-on:leave=\"leaveTransition\"\n    >\n        <div class=\"svg-funnel-js__label\" :class=\"`label-${(index+1)}`\"\n             v-for=\"(value, index) in valuesFormatted\" :key=\"labels[index].toLowerCase().split(' ').join('-')\"\n        >\n            <div class=\"label__value\">{{ value }}</div>\n            <div class=\"label__title\" v-if=\"labels\">{{ labels[index] }}</div>\n            <div class=\"label__percentage\" v-if=\"displayPercentage && percentages()[index] !== 100\">\n                {{ percentages()[index] }}%\n            </div>\n            <div class=\"label__segment-percentages\" v-if=\"is2d()\">\n                <ul class=\"segment-percentage__list\">\n                    <li v-for=\"(subLabel, j) in subLabels\" :key=\"j\">\n                        {{ subLabel }}:\n                        <span class=\"percentage__list-label\">{{ twoDimPercentages()[index][j] }}%</span>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </transition-group>\n    <transition name=\"fade\" v-on:enter=\"enterTransition\" v-on:leave=\"leaveTransition\">\n        <div class=\"svg-funnel-js__subLabels\" v-if=\"is2d()\">\n            <div :class=\"`svg-funnel-js__subLabel svg-funnel-js__subLabel-${(index + 1)}`\"\n                 v-for=\"(subLabel, index) in subLabels\"\n                 :key=\"index\"\n            >\n                <div class=\"svg-funnel-js__subLabel--color\"\n                     :style=\"subLabelBackgrounds(index)\"></div>\n                <div class=\"svg-funnel-js__subLabel--title\">{{ subLabel }}</div>\n            </div>\n        </div>\n    </transition>\n</div>\n",null]}
+{"remainingRequest":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-components/vue-funnel-graph.vue?vue&type=template&id=5dd8f15e&scoped=true&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-components/vue-funnel-graph.vue","mtime":1580652687322},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/loaders/templateLoader.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":["\n<div class=\"funnel svg-funnel-js\" :class=\"{'svg-funnel-js--vertical': direction === 'vertical'}\">\n    <div class=\"svg-funnel-js__container\">\n        <svg :width=\"width\" :height=\"height\">\n            <defs>\n                <linearGradient :id=\"`funnelGradient-${(index+1)}`\"\n                                v-for=\"(colors, index) in gradientSet\"\n                                :key=\"index\"\n                                :gradientTransform=\"gradientAngle\"\n                >\n                    <stop :stop-color=\"color\"\n                          :offset=\"offsetColor(index, colors.values.length)\"\n                          v-for=\"(color, index) in colors.values\"\n                          :key=\"index\"\n                    ></stop>\n                </linearGradient>\n            </defs>\n            <path :fill=\"colorSet[index].fill\" :stroke=\"colorSet[index].fill\"\n                  :d=\"path\" v-for=\"(path, index) in paths\" :key=\"index\"\n            ></path>\n        </svg>\n    </div>\n    <transition-group class=\"svg-funnel-js__labels\" name=\"appear\" tag=\"div\"\n                      v-on:enter=\"enterTransition\" v-on:leave=\"leaveTransition\"\n    >\n        <div class=\"svg-funnel-js__label\" :class=\"`label-${(index+1)}`\"\n             v-for=\"(value, index) in valuesFormatted\" :key=\"labels[index].toLowerCase().split(' ').join('-')\"\n        >\n            <div class=\"label__value\">{{ value }}</div>\n            <div class=\"label__title\" v-if=\"labels\">{{ labels[index] }}</div>\n            <div class=\"label__percentage\" v-if=\"displayPercentage && percentages()[index] !== 100\">\n                {{ percentages()[index] }}%\n            </div>\n            <div class=\"label__segment-percentages\" v-if=\"is2d()\">\n                <ul class=\"segment-percentage__list\">\n                    <li v-for=\"(subLabel, j) in subLabels\" :key=\"j\">\n                        {{ subLabel }}:\n                        <span class=\"percentage__list-label\" v-if=\"subLabelValue === 'percent'\">{{ twoDimPercentages()[index][j] }}%</span>\n                        <span class=\"percentage__list-label\" v-else>{{ values[index][j] | format }}</span>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </transition-group>\n    <transition name=\"fade\" v-on:enter=\"enterTransition\" v-on:leave=\"leaveTransition\">\n        <div class=\"svg-funnel-js__subLabels\" v-if=\"is2d()\">\n            <div :class=\"`svg-funnel-js__subLabel svg-funnel-js__subLabel-${(index + 1)}`\"\n                 v-for=\"(subLabel, index) in subLabels\"\n                 :key=\"index\"\n            >\n                <div class=\"svg-funnel-js__subLabel--color\"\n                     :style=\"subLabelBackgrounds(index)\"></div>\n                <div class=\"svg-funnel-js__subLabel--title\">{{ subLabel }}</div>\n            </div>\n        </div>\n    </transition>\n</div>\n",null]}

src/node_modules/.cache/vue-loader/870178a689fd4d675dd63fbe28c002ab.json

@@ -1,1 +0,1 @@
-{"remainingRequest":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-components/vue-funnel-graph.vue?vue&type=script&lang=js&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-components/vue-funnel-graph.vue","mtime":1553111713389},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/babel-loader/lib/index.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\nimport { interpolate } from 'polymorph-js';\nimport TWEEN from '@tweenjs/tween.js';\nimport FunnelGraph from 'funnel-graph-js';\nimport { formatNumber } from 'funnel-graph-js/src/js/number';\nimport { getDefaultColors, generateLegendBackground } from 'funnel-graph-js/src/js/graph';\nimport 'funnel-graph-js/src/scss/main.scss';\nimport 'funnel-graph-js/src/scss/theme.scss';\n\nexport default {\n    name: 'VueFunnelGraph',\n    props: {\n        animated: {\n            type: Boolean,\n            default: false\n        },\n        width: [String, Number],\n        height: [String, Number],\n        values: Array,\n        labels: Array,\n        colors: {\n            type: Array,\n            default() { return []; }\n        },\n        subLabels: Array,\n        direction: {\n            type: String,\n            default: 'horizontal'\n        },\n        gradientDirection: {\n            type: String,\n            default: 'horizontal'\n        },\n        displayPercentage: {\n            type: Boolean,\n            default: true\n        }\n    },\n    data() {\n        return {\n            paths: [],\n            prevPaths: [], // paths before update, used for animations\n            graph: null,\n            tween: null,\n            defaultColors: getDefaultColors(10)\n        };\n    },\n    computed: {\n        valuesFormatted() {\n            if (this.graph.is2d()) {\n                return this.graph.getValues2d().map(value => formatNumber(value));\n            }\n            return this.values.map(value => formatNumber(value));\n        },\n        colorSet() {\n            const colorSet = [];\n            let gradientCount = 0;\n\n            for (let i = 0; i < this.paths.length; i++) {\n                const values = this.graph.is2d() ? this.getColors[i] : this.getColors;\n                const fillMode = (typeof values === 'string' || values.length === 1) ? 'solid' : 'gradient';\n                if (fillMode === 'gradient') gradientCount += 1;\n                colorSet.push({\n                    values,\n                    fillMode,\n                    fill: fillMode === 'solid' ? values : `url('#funnelGradient-${gradientCount}')`\n                });\n            }\n            return colorSet;\n        },\n        gradientSet() {\n            const gradientSet = [];\n            this.colorSet.forEach((colors) => {\n                if (colors.fillMode === 'gradient') {\n                    gradientSet.push(colors);\n                }\n            });\n            return gradientSet;\n        },\n        getColors() {\n            if (this.colors instanceof Array && this.colors.length === 0) {\n                return getDefaultColors(this.is2d() ? this.values[0].length : 2);\n            }\n            if (this.colors.length < this.paths.length) {\n                return [...this.colors].concat(\n                    [...this.defaultColors].splice(this.paths.length, this.paths.length - this.colors.length)\n                );\n            }\n            return this.colors;\n        },\n        gradientAngle() {\n            return `rotate(${this.gradientDirection === 'vertical' ? 90 : 0})`;\n        }\n    },\n    methods: {\n        enterTransition(el, done) {\n            if (!this.animated) done();\n            setTimeout(() => done(), 700);\n        },\n        leaveTransition(el, done) {\n            if (!this.animated) done();\n            setTimeout(() => done(), 700);\n        },\n        is2d() {\n            return this.graph.is2d();\n        },\n        percentages() {\n            return this.graph.createPercentages();\n        },\n        twoDimPercentages() {\n            if (!this.is2d()) {\n                return [];\n            }\n            return this.graph.getPercentages2d();\n        },\n        subLabelBackgrounds(index) {\n            if (!this.is2d()) {\n                return [];\n            }\n            return generateLegendBackground(this.getColors[index], this.gradientDirection);\n        },\n        offsetColor(index, length) {\n            return `${Math.round(100 * index / (length - 1))}%`;\n        },\n        makeAnimations() {\n            if (this.tween !== null) { this.tween.stop(); }\n            const interpolators = [];\n            const dimensionChanged = this.prevPaths.length !== this.paths.length;\n\n            let origin = { x: 0.5, y: 0.5 };\n            if (dimensionChanged) {\n                origin = { x: 0, y: 0.5 };\n                if (this.graph.isVertical()) {\n                    origin = { x: 1, y: 1 };\n                }\n                if (!this.graph.is2d()) {\n                    origin = { x: 0, y: 1 };\n                }\n            }\n\n            this.paths.forEach((path, index) => {\n                let oldPath = this.prevPaths[index] || this.graph.getPathMedian(index);\n                if (dimensionChanged) oldPath = this.graph.getPathMedian(index);\n                const interpolator = interpolate([oldPath, path], {\n                    addPoints: 1,\n                    origin,\n                    optimize: 'fill',\n                    precision: 1\n                });\n\n                interpolators.push(interpolator);\n            });\n\n            function animate() {\n                if (TWEEN.update()) {\n                    requestAnimationFrame(animate);\n                }\n            }\n\n            const position = { value: 0 };\n            this.tween = new TWEEN.Tween(position)\n                .to({ value: 1 }, 700)\n                .easing(TWEEN.Easing.Cubic.InOut)\n                .onUpdate(() => {\n                    for (let index = 0; index < this.paths.length; index++) {\n                        this.paths[index] = interpolators[index](position.value);\n                        // eslint-disable-next-line no-underscore-dangle\n                        this.paths.__ob__.dep.notify();\n                    }\n                });\n\n            this.tween.start();\n            animate();\n        },\n        drawPaths() {\n            this.prevPaths = this.paths;\n            this.paths = [];\n            const definitions = this.graph.getPathDefinitions();\n\n            definitions.forEach((d) => {\n                this.paths.push(d);\n            });\n        }\n    },\n    beforeMount() {\n        this.graph = new FunnelGraph({\n            height: this.height,\n            width: this.width,\n            data: {\n                labels: this.labels,\n                values: this.values\n            }\n        });\n        this.drawPaths();\n        if (this.animated) this.makeAnimations();\n    },\n    watch: {\n        values() {\n            this.graph.setValues(this.values);\n            this.drawPaths();\n            if (this.animated) this.makeAnimations();\n        },\n        direction() {\n            this.graph.setDirection(this.direction)\n                .setWidth(this.width)\n                .setHeight(this.height);\n            this.drawPaths();\n        }\n    },\n};\n",{"version":3,"sources":["vue-funnel-graph.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"vue-funnel-graph.vue","sourceRoot":"lib-components","sourcesContent":["<template>\n    <div class=\"funnel svg-funnel-js\" :class=\"{'svg-funnel-js--vertical': direction === 'vertical'}\">\n        <div class=\"svg-funnel-js__container\">\n            <svg :width=\"width\" :height=\"height\">\n                <defs>\n                    <linearGradient :id=\"`funnelGradient-${(index+1)}`\"\n                                    v-for=\"(colors, index) in gradientSet\"\n                                    :key=\"index\"\n                                    :gradientTransform=\"gradientAngle\"\n                    >\n                        <stop :stop-color=\"color\"\n                              :offset=\"offsetColor(index, colors.values.length)\"\n                              v-for=\"(color, index) in colors.values\"\n                              :key=\"index\"\n                        ></stop>\n                    </linearGradient>\n                </defs>\n                <path :fill=\"colorSet[index].fill\" :stroke=\"colorSet[index].fill\"\n                      :d=\"path\" v-for=\"(path, index) in paths\" :key=\"index\"\n                ></path>\n            </svg>\n        </div>\n        <transition-group class=\"svg-funnel-js__labels\" name=\"appear\" tag=\"div\"\n                          v-on:enter=\"enterTransition\" v-on:leave=\"leaveTransition\"\n        >\n            <div class=\"svg-funnel-js__label\" :class=\"`label-${(index+1)}`\"\n                 v-for=\"(value, index) in valuesFormatted\" :key=\"labels[index].toLowerCase().split(' ').join('-')\"\n            >\n                <div class=\"label__value\">{{ value }}</div>\n                <div class=\"label__title\" v-if=\"labels\">{{ labels[index] }}</div>\n                <div class=\"label__percentage\" v-if=\"displayPercentage && percentages()[index] !== 100\">\n                    {{ percentages()[index] }}%\n                </div>\n                <div class=\"label__segment-percentages\" v-if=\"is2d()\">\n                    <ul class=\"segment-percentage__list\">\n                        <li v-for=\"(subLabel, j) in subLabels\" :key=\"j\">\n                            {{ subLabel }}:\n                            <span class=\"percentage__list-label\">{{ twoDimPercentages()[index][j] }}%</span>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </transition-group>\n        <transition name=\"fade\" v-on:enter=\"enterTransition\" v-on:leave=\"leaveTransition\">\n            <div class=\"svg-funnel-js__subLabels\" v-if=\"is2d()\">\n                <div :class=\"`svg-funnel-js__subLabel svg-funnel-js__subLabel-${(index + 1)}`\"\n                     v-for=\"(subLabel, index) in subLabels\"\n                     :key=\"index\"\n                >\n                    <div class=\"svg-funnel-js__subLabel--color\"\n                         :style=\"subLabelBackgrounds(index)\"></div>\n                    <div class=\"svg-funnel-js__subLabel--title\">{{ subLabel }}</div>\n                </div>\n            </div>\n        </transition>\n    </div>\n</template>\n\n<script>\n    import { interpolate } from 'polymorph-js';\n    import TWEEN from '@tweenjs/tween.js';\n    import FunnelGraph from 'funnel-graph-js';\n    import { formatNumber } from 'funnel-graph-js/src/js/number';\n    import { getDefaultColors, generateLegendBackground } from 'funnel-graph-js/src/js/graph';\n    import 'funnel-graph-js/src/scss/main.scss';\n    import 'funnel-graph-js/src/scss/theme.scss';\n\n    export default {\n        name: 'VueFunnelGraph',\n        props: {\n            animated: {\n                type: Boolean,\n                default: false\n            },\n            width: [String, Number],\n            height: [String, Number],\n            values: Array,\n            labels: Array,\n            colors: {\n                type: Array,\n                default() { return []; }\n            },\n            subLabels: Array,\n            direction: {\n                type: String,\n                default: 'horizontal'\n            },\n            gradientDirection: {\n                type: String,\n                default: 'horizontal'\n            },\n            displayPercentage: {\n                type: Boolean,\n                default: true\n            }\n        },\n        data() {\n            return {\n                paths: [],\n                prevPaths: [], // paths before update, used for animations\n                graph: null,\n                tween: null,\n                defaultColors: getDefaultColors(10)\n            };\n        },\n        computed: {\n            valuesFormatted() {\n                if (this.graph.is2d()) {\n                    return this.graph.getValues2d().map(value => formatNumber(value));\n                }\n                return this.values.map(value => formatNumber(value));\n            },\n            colorSet() {\n                const colorSet = [];\n                let gradientCount = 0;\n\n                for (let i = 0; i < this.paths.length; i++) {\n                    const values = this.graph.is2d() ? this.getColors[i] : this.getColors;\n                    const fillMode = (typeof values === 'string' || values.length === 1) ? 'solid' : 'gradient';\n                    if (fillMode === 'gradient') gradientCount += 1;\n                    colorSet.push({\n                        values,\n                        fillMode,\n                        fill: fillMode === 'solid' ? values : `url('#funnelGradient-${gradientCount}')`\n                    });\n                }\n                return colorSet;\n            },\n            gradientSet() {\n                const gradientSet = [];\n                this.colorSet.forEach((colors) => {\n                    if (colors.fillMode === 'gradient') {\n                        gradientSet.push(colors);\n                    }\n                });\n                return gradientSet;\n            },\n            getColors() {\n                if (this.colors instanceof Array && this.colors.length === 0) {\n                    return getDefaultColors(this.is2d() ? this.values[0].length : 2);\n                }\n                if (this.colors.length < this.paths.length) {\n                    return [...this.colors].concat(\n                        [...this.defaultColors].splice(this.paths.length, this.paths.length - this.colors.length)\n                    );\n                }\n                return this.colors;\n            },\n            gradientAngle() {\n                return `rotate(${this.gradientDirection === 'vertical' ? 90 : 0})`;\n            }\n        },\n        methods: {\n            enterTransition(el, done) {\n                if (!this.animated) done();\n                setTimeout(() => done(), 700);\n            },\n            leaveTransition(el, done) {\n                if (!this.animated) done();\n                setTimeout(() => done(), 700);\n            },\n            is2d() {\n                return this.graph.is2d();\n            },\n            percentages() {\n                return this.graph.createPercentages();\n            },\n            twoDimPercentages() {\n                if (!this.is2d()) {\n                    return [];\n                }\n                return this.graph.getPercentages2d();\n            },\n            subLabelBackgrounds(index) {\n                if (!this.is2d()) {\n                    return [];\n                }\n                return generateLegendBackground(this.getColors[index], this.gradientDirection);\n            },\n            offsetColor(index, length) {\n                return `${Math.round(100 * index / (length - 1))}%`;\n            },\n            makeAnimations() {\n                if (this.tween !== null) { this.tween.stop(); }\n                const interpolators = [];\n                const dimensionChanged = this.prevPaths.length !== this.paths.length;\n\n                let origin = { x: 0.5, y: 0.5 };\n                if (dimensionChanged) {\n                    origin = { x: 0, y: 0.5 };\n                    if (this.graph.isVertical()) {\n                        origin = { x: 1, y: 1 };\n                    }\n                    if (!this.graph.is2d()) {\n                        origin = { x: 0, y: 1 };\n                    }\n                }\n\n                this.paths.forEach((path, index) => {\n                    let oldPath = this.prevPaths[index] || this.graph.getPathMedian(index);\n                    if (dimensionChanged) oldPath = this.graph.getPathMedian(index);\n                    const interpolator = interpolate([oldPath, path], {\n                        addPoints: 1,\n                        origin,\n                        optimize: 'fill',\n                        precision: 1\n                    });\n\n                    interpolators.push(interpolator);\n                });\n\n                function animate() {\n                    if (TWEEN.update()) {\n                        requestAnimationFrame(animate);\n                    }\n                }\n\n                const position = { value: 0 };\n                this.tween = new TWEEN.Tween(position)\n                    .to({ value: 1 }, 700)\n                    .easing(TWEEN.Easing.Cubic.InOut)\n                    .onUpdate(() => {\n                        for (let index = 0; index < this.paths.length; index++) {\n                            this.paths[index] = interpolators[index](position.value);\n                            // eslint-disable-next-line no-underscore-dangle\n                            this.paths.__ob__.dep.notify();\n                        }\n                    });\n\n                this.tween.start();\n                animate();\n            },\n            drawPaths() {\n                this.prevPaths = this.paths;\n                this.paths = [];\n                const definitions = this.graph.getPathDefinitions();\n\n                definitions.forEach((d) => {\n                    this.paths.push(d);\n                });\n            }\n        },\n        beforeMount() {\n            this.graph = new FunnelGraph({\n                height: this.height,\n                width: this.width,\n                data: {\n                    labels: this.labels,\n                    values: this.values\n                }\n            });\n            this.drawPaths();\n            if (this.animated) this.makeAnimations();\n        },\n        watch: {\n            values() {\n                this.graph.setValues(this.values);\n                this.drawPaths();\n                if (this.animated) this.makeAnimations();\n            },\n            direction() {\n                this.graph.setDirection(this.direction)\n                    .setWidth(this.width)\n                    .setHeight(this.height);\n                this.drawPaths();\n            }\n        },\n    };\n</script>\n\n<style scoped>\n    .appear-enter-active, .appear-leave-active {\n        transition: all .7s ease-in-out;\n    }\n\n    .appear-enter-to, .appear-leave {\n        max-width: 100%;\n        max-height: 100%;\n        opacity: 1;\n    }\n\n    .appear-enter, .appear-leave-to {\n        max-width: 0;\n        max-height: 0;\n        opacity: 0;\n    }\n\n    .fade-enter-active, .fade-leave-active {\n        transition: all .3s ease;\n    }\n\n    .fade-enter-to, .fade-leave {\n        opacity: 1;\n    }\n\n    .fade-enter, .fade-leave-to {\n        opacity: 0;\n    }\n</style>\n"]}]}
+{"remainingRequest":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-components/vue-funnel-graph.vue?vue&type=script&lang=js&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-components/vue-funnel-graph.vue","mtime":1580652505942},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/babel-loader/lib/index.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\nimport { interpolate } from 'polymorph-js';\nimport TWEEN from '@tweenjs/tween.js';\nimport FunnelGraph from 'funnel-graph-js';\nimport { formatNumber } from 'funnel-graph-js/src/js/number';\nimport { getDefaultColors, generateLegendBackground } from 'funnel-graph-js/src/js/graph';\nimport 'funnel-graph-js/src/scss/main.scss';\nimport 'funnel-graph-js/src/scss/theme.scss';\n\nexport default {\n    name: 'VueFunnelGraph',\n    props: {\n        animated: {\n            type: Boolean,\n            default: false\n        },\n        width: [String, Number],\n        height: [String, Number],\n        values: Array,\n        labels: Array,\n        colors: {\n            type: Array,\n            default() { return []; }\n        },\n        subLabels: Array,\n        subLabelValue: {\n            type: String,\n            default: 'percent'\n        },\n        direction: {\n            type: String,\n            default: 'horizontal'\n        },\n        gradientDirection: {\n            type: String,\n            default: 'horizontal'\n        },\n        displayPercentage: {\n            type: Boolean,\n            default: true\n        }\n    },\n    data() {\n        return {\n            paths: [],\n            prevPaths: [], // paths before update, used for animations\n            graph: null,\n            tween: null,\n            defaultColors: getDefaultColors(10)\n        };\n    },\n    computed: {\n        valuesFormatted() {\n            if (this.graph.is2d()) {\n                return this.graph.getValues2d().map(value => formatNumber(value));\n            }\n            return this.values.map(value => formatNumber(value));\n        },\n        colorSet() {\n            const colorSet = [];\n            let gradientCount = 0;\n\n            for (let i = 0; i < this.paths.length; i++) {\n                const values = this.graph.is2d() ? this.getColors[i] : this.getColors;\n                const fillMode = (typeof values === 'string' || values.length === 1) ? 'solid' : 'gradient';\n                if (fillMode === 'gradient') gradientCount += 1;\n                colorSet.push({\n                    values,\n                    fillMode,\n                    fill: fillMode === 'solid' ? values : `url('#funnelGradient-${gradientCount}')`\n                });\n            }\n            return colorSet;\n        },\n        gradientSet() {\n            const gradientSet = [];\n            this.colorSet.forEach((colors) => {\n                if (colors.fillMode === 'gradient') {\n                    gradientSet.push(colors);\n                }\n            });\n            return gradientSet;\n        },\n        getColors() {\n            if (this.colors instanceof Array && this.colors.length === 0) {\n                return getDefaultColors(this.is2d() ? this.values[0].length : 2);\n            }\n            if (this.colors.length < this.paths.length) {\n                return [...this.colors].concat(\n                    [...this.defaultColors].splice(this.paths.length, this.paths.length - this.colors.length)\n                );\n            }\n            return this.colors;\n        },\n        gradientAngle() {\n            return `rotate(${this.gradientDirection === 'vertical' ? 90 : 0})`;\n        }\n    },\n    methods: {\n        enterTransition(el, done) {\n            if (!this.animated) done();\n            setTimeout(() => done(), 700);\n        },\n        leaveTransition(el, done) {\n            if (!this.animated) done();\n            setTimeout(() => done(), 700);\n        },\n        is2d() {\n            return this.graph.is2d();\n        },\n        percentages() {\n            return this.graph.createPercentages();\n        },\n        twoDimPercentages() {\n            if (!this.is2d()) {\n                return [];\n            }\n            return this.graph.getPercentages2d();\n        },\n        subLabelBackgrounds(index) {\n            if (!this.is2d()) {\n                return [];\n            }\n            return generateLegendBackground(this.getColors[index], this.gradientDirection);\n        },\n        offsetColor(index, length) {\n            return `${Math.round(100 * index / (length - 1))}%`;\n        },\n        makeAnimations() {\n            if (this.tween !== null) { this.tween.stop(); }\n            const interpolators = [];\n            const dimensionChanged = this.prevPaths.length !== this.paths.length;\n\n            let origin = { x: 0.5, y: 0.5 };\n            if (dimensionChanged) {\n                origin = { x: 0, y: 0.5 };\n                if (this.graph.isVertical()) {\n                    origin = { x: 1, y: 1 };\n                }\n                if (!this.graph.is2d()) {\n                    origin = { x: 0, y: 1 };\n                }\n            }\n\n            this.paths.forEach((path, index) => {\n                let oldPath = this.prevPaths[index] || this.graph.getPathMedian(index);\n                if (dimensionChanged) oldPath = this.graph.getPathMedian(index);\n                const interpolator = interpolate([oldPath, path], {\n                    addPoints: 1,\n                    origin,\n                    optimize: 'fill',\n                    precision: 1\n                });\n\n                interpolators.push(interpolator);\n            });\n\n            function animate() {\n                if (TWEEN.update()) {\n                    requestAnimationFrame(animate);\n                }\n            }\n\n            const position = { value: 0 };\n            this.tween = new TWEEN.Tween(position)\n                .to({ value: 1 }, 700)\n                .easing(TWEEN.Easing.Cubic.InOut)\n                .onUpdate(() => {\n                    for (let index = 0; index < this.paths.length; index++) {\n                        this.paths[index] = interpolators[index](position.value);\n                        // eslint-disable-next-line no-underscore-dangle\n                        this.paths.__ob__.dep.notify();\n                    }\n                });\n\n            this.tween.start();\n            animate();\n        },\n        drawPaths() {\n            this.prevPaths = this.paths;\n            this.paths = [];\n            const definitions = this.graph.getPathDefinitions();\n\n            definitions.forEach((d) => {\n                this.paths.push(d);\n            });\n        }\n    },\n    beforeMount() {\n        this.graph = new FunnelGraph({\n            height: this.height,\n            width: this.width,\n            direction: this.direction,\n            data: {\n                labels: this.labels,\n                values: this.values\n            }\n        });\n        this.drawPaths();\n        if (this.animated) this.makeAnimations();\n    },\n    watch: {\n        values() {\n            this.graph.setValues(this.values);\n            this.drawPaths();\n            if (this.animated) this.makeAnimations();\n        },\n        direction() {\n            this.graph.setDirection(this.direction)\n                .setWidth(this.width)\n                .setHeight(this.height);\n            this.drawPaths();\n        }\n    },\n    filters: {\n        format: function (value) {\n            return formatNumber(value)\n        }\n    }\n};\n",{"version":3,"sources":["vue-funnel-graph.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"vue-funnel-graph.vue","sourceRoot":"lib-components","sourcesContent":["<template>\n    <div class=\"funnel svg-funnel-js\" :class=\"{'svg-funnel-js--vertical': direction === 'vertical'}\">\n        <div class=\"svg-funnel-js__container\">\n            <svg :width=\"width\" :height=\"height\">\n                <defs>\n                    <linearGradient :id=\"`funnelGradient-${(index+1)}`\"\n                                    v-for=\"(colors, index) in gradientSet\"\n                                    :key=\"index\"\n                                    :gradientTransform=\"gradientAngle\"\n                    >\n                        <stop :stop-color=\"color\"\n                              :offset=\"offsetColor(index, colors.values.length)\"\n                              v-for=\"(color, index) in colors.values\"\n                              :key=\"index\"\n                        ></stop>\n                    </linearGradient>\n                </defs>\n                <path :fill=\"colorSet[index].fill\" :stroke=\"colorSet[index].fill\"\n                      :d=\"path\" v-for=\"(path, index) in paths\" :key=\"index\"\n                ></path>\n            </svg>\n        </div>\n        <transition-group class=\"svg-funnel-js__labels\" name=\"appear\" tag=\"div\"\n                          v-on:enter=\"enterTransition\" v-on:leave=\"leaveTransition\"\n        >\n            <div class=\"svg-funnel-js__label\" :class=\"`label-${(index+1)}`\"\n                 v-for=\"(value, index) in valuesFormatted\" :key=\"labels[index].toLowerCase().split(' ').join('-')\"\n            >\n                <div class=\"label__value\">{{ value }}</div>\n                <div class=\"label__title\" v-if=\"labels\">{{ labels[index] }}</div>\n                <div class=\"label__percentage\" v-if=\"displayPercentage && percentages()[index] !== 100\">\n                    {{ percentages()[index] }}%\n                </div>\n                <div class=\"label__segment-percentages\" v-if=\"is2d()\">\n                    <ul class=\"segment-percentage__list\">\n                        <li v-for=\"(subLabel, j) in subLabels\" :key=\"j\">\n                            {{ subLabel }}:\n                            <span class=\"percentage__list-label\">{{ subLabelValue === 'percent' ? twoDimPercentages()[index][j] + '%' : valuesFormatted[index][j] | format }}</span>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </transition-group>\n        <transition name=\"fade\" v-on:enter=\"enterTransition\" v-on:leave=\"leaveTransition\">\n            <div class=\"svg-funnel-js__subLabels\" v-if=\"is2d()\">\n                <div :class=\"`svg-funnel-js__subLabel svg-funnel-js__subLabel-${(index + 1)}`\"\n                     v-for=\"(subLabel, index) in subLabels\"\n                     :key=\"index\"\n                >\n                    <div class=\"svg-funnel-js__subLabel--color\"\n                         :style=\"subLabelBackgrounds(index)\"></div>\n                    <div class=\"svg-funnel-js__subLabel--title\">{{ subLabel }}</div>\n                </div>\n            </div>\n        </transition>\n    </div>\n</template>\n\n<script>\n    import { interpolate } from 'polymorph-js';\n    import TWEEN from '@tweenjs/tween.js';\n    import FunnelGraph from 'funnel-graph-js';\n    import { formatNumber } from 'funnel-graph-js/src/js/number';\n    import { getDefaultColors, generateLegendBackground } from 'funnel-graph-js/src/js/graph';\n    import 'funnel-graph-js/src/scss/main.scss';\n    import 'funnel-graph-js/src/scss/theme.scss';\n\n    export default {\n        name: 'VueFunnelGraph',\n        props: {\n            animated: {\n                type: Boolean,\n                default: false\n            },\n            width: [String, Number],\n            height: [String, Number],\n            values: Array,\n            labels: Array,\n            colors: {\n                type: Array,\n                default() { return []; }\n            },\n            subLabels: Array,\n            subLabelValue: {\n                type: String,\n                default: 'percent'\n            },\n            direction: {\n                type: String,\n                default: 'horizontal'\n            },\n            gradientDirection: {\n                type: String,\n                default: 'horizontal'\n            },\n            displayPercentage: {\n                type: Boolean,\n                default: true\n            }\n        },\n        data() {\n            return {\n                paths: [],\n                prevPaths: [], // paths before update, used for animations\n                graph: null,\n                tween: null,\n                defaultColors: getDefaultColors(10)\n            };\n        },\n        computed: {\n            valuesFormatted() {\n                if (this.graph.is2d()) {\n                    return this.graph.getValues2d().map(value => formatNumber(value));\n                }\n                return this.values.map(value => formatNumber(value));\n            },\n            colorSet() {\n                const colorSet = [];\n                let gradientCount = 0;\n\n                for (let i = 0; i < this.paths.length; i++) {\n                    const values = this.graph.is2d() ? this.getColors[i] : this.getColors;\n                    const fillMode = (typeof values === 'string' || values.length === 1) ? 'solid' : 'gradient';\n                    if (fillMode === 'gradient') gradientCount += 1;\n                    colorSet.push({\n                        values,\n                        fillMode,\n                        fill: fillMode === 'solid' ? values : `url('#funnelGradient-${gradientCount}')`\n                    });\n                }\n                return colorSet;\n            },\n            gradientSet() {\n                const gradientSet = [];\n                this.colorSet.forEach((colors) => {\n                    if (colors.fillMode === 'gradient') {\n                        gradientSet.push(colors);\n                    }\n                });\n                return gradientSet;\n            },\n            getColors() {\n                if (this.colors instanceof Array && this.colors.length === 0) {\n                    return getDefaultColors(this.is2d() ? this.values[0].length : 2);\n                }\n                if (this.colors.length < this.paths.length) {\n                    return [...this.colors].concat(\n                        [...this.defaultColors].splice(this.paths.length, this.paths.length - this.colors.length)\n                    );\n                }\n                return this.colors;\n            },\n            gradientAngle() {\n                return `rotate(${this.gradientDirection === 'vertical' ? 90 : 0})`;\n            }\n        },\n        methods: {\n            enterTransition(el, done) {\n                if (!this.animated) done();\n                setTimeout(() => done(), 700);\n            },\n            leaveTransition(el, done) {\n                if (!this.animated) done();\n                setTimeout(() => done(), 700);\n            },\n            is2d() {\n                return this.graph.is2d();\n            },\n            percentages() {\n                return this.graph.createPercentages();\n            },\n            twoDimPercentages() {\n                if (!this.is2d()) {\n                    return [];\n                }\n                return this.graph.getPercentages2d();\n            },\n            subLabelBackgrounds(index) {\n                if (!this.is2d()) {\n                    return [];\n                }\n                return generateLegendBackground(this.getColors[index], this.gradientDirection);\n            },\n            offsetColor(index, length) {\n                return `${Math.round(100 * index / (length - 1))}%`;\n            },\n            makeAnimations() {\n                if (this.tween !== null) { this.tween.stop(); }\n                const interpolators = [];\n                const dimensionChanged = this.prevPaths.length !== this.paths.length;\n\n                let origin = { x: 0.5, y: 0.5 };\n                if (dimensionChanged) {\n                    origin = { x: 0, y: 0.5 };\n                    if (this.graph.isVertical()) {\n                        origin = { x: 1, y: 1 };\n                    }\n                    if (!this.graph.is2d()) {\n                        origin = { x: 0, y: 1 };\n                    }\n                }\n\n                this.paths.forEach((path, index) => {\n                    let oldPath = this.prevPaths[index] || this.graph.getPathMedian(index);\n                    if (dimensionChanged) oldPath = this.graph.getPathMedian(index);\n                    const interpolator = interpolate([oldPath, path], {\n                        addPoints: 1,\n                        origin,\n                        optimize: 'fill',\n                        precision: 1\n                    });\n\n                    interpolators.push(interpolator);\n                });\n\n                function animate() {\n                    if (TWEEN.update()) {\n                        requestAnimationFrame(animate);\n                    }\n                }\n\n                const position = { value: 0 };\n                this.tween = new TWEEN.Tween(position)\n                    .to({ value: 1 }, 700)\n                    .easing(TWEEN.Easing.Cubic.InOut)\n                    .onUpdate(() => {\n                        for (let index = 0; index < this.paths.length; index++) {\n                            this.paths[index] = interpolators[index](position.value);\n                            // eslint-disable-next-line no-underscore-dangle\n                            this.paths.__ob__.dep.notify();\n                        }\n                    });\n\n                this.tween.start();\n                animate();\n            },\n            drawPaths() {\n                this.prevPaths = this.paths;\n                this.paths = [];\n                const definitions = this.graph.getPathDefinitions();\n\n                definitions.forEach((d) => {\n                    this.paths.push(d);\n                });\n            }\n        },\n        beforeMount() {\n            this.graph = new FunnelGraph({\n                height: this.height,\n                width: this.width,\n                direction: this.direction,\n                data: {\n                    labels: this.labels,\n                    values: this.values\n                }\n            });\n            this.drawPaths();\n            if (this.animated) this.makeAnimations();\n        },\n        watch: {\n            values() {\n                this.graph.setValues(this.values);\n                this.drawPaths();\n                if (this.animated) this.makeAnimations();\n            },\n            direction() {\n                this.graph.setDirection(this.direction)\n                    .setWidth(this.width)\n                    .setHeight(this.height);\n                this.drawPaths();\n            }\n        },\n        filters: {\n            format: function (value) {\n                return formatNumber(value)\n            }\n        }\n    };\n</script>\n\n<style scoped lang=\"scss\">\n    .appear-enter-active, .appear-leave-active {\n        transition: all .7s ease-in-out;\n    }\n\n    .appear-enter-to, .appear-leave {\n        max-width: 100%;\n        max-height: 100%;\n        opacity: 1;\n    }\n\n    .appear-enter, .appear-leave-to {\n        max-width: 0;\n        max-height: 0;\n        opacity: 0;\n    }\n\n    .fade-enter-active, .fade-leave-active {\n        transition: all .3s ease;\n    }\n\n    .fade-enter-to, .fade-leave {\n        opacity: 1;\n    }\n\n    .fade-enter, .fade-leave-to {\n        opacity: 0;\n    }\n</style>\n"]}]}

src/node_modules/.cache/vue-loader/895486bcf5236dc60cf5f73a05101c10.json

@@ -1,1 +0,1 @@
-{"remainingRequest":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/eslint-loader/index.js??ref--13-0!/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-components/vue-funnel-graph.vue","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-components/vue-funnel-graph.vue","mtime":1553111713389},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/eslint-loader/index.js","mtime":499162500000}],"contextDependencies":[],"result":["import { render, staticRenderFns } from \"./vue-funnel-graph.vue?vue&type=template&id=5dd8f15e&scoped=true&\"\nimport script from \"./vue-funnel-graph.vue?vue&type=script&lang=js&\"\nexport * from \"./vue-funnel-graph.vue?vue&type=script&lang=js&\"\nimport style0 from \"./vue-funnel-graph.vue?vue&type=style&index=0&id=5dd8f15e&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"5dd8f15e\",\n  null\n  \n)\n\n/* hot reload */\nif (module.hot) {\n  var api = require(\"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-hot-reload-api/dist/index.js\")\n  api.install(require('vue'))\n  if (api.compatible) {\n    module.hot.accept()\n    if (!module.hot.data) {\n      api.createRecord('5dd8f15e', component.options)\n    } else {\n      api.reload('5dd8f15e', component.options)\n    }\n    module.hot.accept(\"./vue-funnel-graph.vue?vue&type=template&id=5dd8f15e&scoped=true&\", function () {\n      api.rerender('5dd8f15e', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"lib-components/vue-funnel-graph.vue\"\nexport default component.exports"]}
+{"remainingRequest":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/eslint-loader/index.js??ref--13-0!/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-components/vue-funnel-graph.vue","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-components/vue-funnel-graph.vue","mtime":1580652505942},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/eslint-loader/index.js","mtime":499162500000}],"contextDependencies":[],"result":["import { render, staticRenderFns } from \"./vue-funnel-graph.vue?vue&type=template&id=5dd8f15e&scoped=true&\"\nimport script from \"./vue-funnel-graph.vue?vue&type=script&lang=js&\"\nexport * from \"./vue-funnel-graph.vue?vue&type=script&lang=js&\"\nimport style0 from \"./vue-funnel-graph.vue?vue&type=style&index=0&id=5dd8f15e&scoped=true&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"5dd8f15e\",\n  null\n  \n)\n\n/* hot reload */\nif (module.hot) {\n  var api = require(\"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-hot-reload-api/dist/index.js\")\n  api.install(require('vue'))\n  if (api.compatible) {\n    module.hot.accept()\n    if (!module.hot.data) {\n      api.createRecord('5dd8f15e', component.options)\n    } else {\n      api.reload('5dd8f15e', component.options)\n    }\n    module.hot.accept(\"./vue-funnel-graph.vue?vue&type=template&id=5dd8f15e&scoped=true&\", function () {\n      api.rerender('5dd8f15e', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"lib-components/vue-funnel-graph.vue\"\nexport default component.exports"]}

src/node_modules/.cache/vue-loader/8c6885892c094d61e96eed6ebd4ffd85.json

@@ -1,1 +0,1 @@
-{"remainingRequest":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue?vue&type=script&lang=js&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue","mtime":1553156448878},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/babel-loader/lib/index.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\nimport { VueFunnelGraph } from './entry';\nexport default {\n    name:  'VueFunnelGraphDev', // vue library dev component\n    components: {\n        VueFunnelGraph\n    },\n    data() {\n        return {\n            labels: ['Impressions', 'Add To Cart', 'Buy'],\n            subLabels: [],\n            values: [12000, 5700, 930],\n            colors: ['#FFB178', '#FF3C8E'],\n            direction: 'horizontal',\n            gradientDirection: 'horizontal',\n            height: 300,\n            width: 800,\n            dataSetNum: 1\n        };\n    },\n    methods: {\n        useDataSet1() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = [];\n            this.values = [12000, 4700, 930];\n            this.colors = ['#FFB178', '#FF3C8E'];\n        },\n        useDataSet2() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = [];\n            this.values = [14000, 9100, 1230];\n            this.colors = ['#A0BBFF', '#EC77FF'];\n        },\n        useDataSet3() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = ['Direct', 'Social Media', 'Ads'];\n            this.values = [\n                [3000, 2500, 6500],\n                [3000, 1700, 1000],\n                [600, 200, 130]\n            ];\n            this.colors = [\n                ['#FFB178', '#FF78B1', '#FF3C8E'],\n                ['#A0BBFF', '#EC77FF'],\n                ['#A0F9FF', '#7795FF']\n            ];\n        },\n        useDataSet4() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy', 'Return'];\n            this.subLabels = [];\n            this.values = [14000, 9100, 4230, 260];\n            this.colors = ['#FF4589', '#FF5050'];\n        },\n        useDataSet5() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = [];\n            this.values = [12650, 4230, 263];\n            this.colors = ['#FF9A9A', '#FFB178'];\n        },\n        useDataSet6() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = ['Direct', 'Social Media', 'Ads', 'Other'];\n            this.values = [\n                [3000, 2500, 2000, 4500],\n                [3000, 1700, 500, 500],\n                [600, 200, 100, 30]\n            ];\n            this.colors = [\n                ['#A0BBFF', '#EC77FF'],\n                ['#FFB178', '#FF78B1', '#FF3C8E'],\n                ['#A0F9FF', '#7795FF']\n            ];\n        },\n        makeVertical() {\n            this.direction = 'vertical';\n            this.height = 500;\n            this.width = 400;\n            this.gradientV();\n        },\n        makeHorizontal() {\n            this.direction = 'horizontal';\n            this.height = 300;\n            this.width = 800;\n            this.gradientH();\n        },\n        toggleDirection() {\n            (this.direction === 'horizontal') ? this.makeVertical() : this.makeHorizontal();\n        },\n        gradientV() {\n            this.gradientDirection = 'vertical';\n        },\n        gradientH() {\n            this.gradientDirection = 'horizontal';\n        },\n        toggleGradient() {\n            (this.gradientDirection === 'horizontal') ? this.gradientV() : this.gradientH();\n        },\n        getNextSet() {\n            this.dataSetNum++;\n            if (this.dataSetNum > 6) {\n                this.dataSetNum = 1;\n            }\n\n            this[`useDataSet${this.dataSetNum}`]();\n        }\n    }\n}\n",{"version":3,"sources":["example.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAkBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"example.vue","sourceRoot":".","sourcesContent":["<template>\n    <div class=\"vue-funnel-graph-lib-dev\">\n        <div class=\"funnels\">\n            <vue-funnel-graph :width=\"width\" :height=\"height\" :labels=\"labels\"\n                              :values=\"values\" :colors=\"colors\" :sub-labels=\"subLabels\" :direction=\"direction\"\n                              :gradient-direction=\"gradientDirection\"\n                              :animated=\"true\" :display-percentage=\"true\"\n            ></vue-funnel-graph>\n        </div>\n        <div class=\"controls\">\n            <button @click=\"getNextSet()\">Change Data</button>\n            <button @click=\"toggleDirection()\">Toggle Direction</button>\n            <button @click=\"toggleGradient()\">Toggle Gradient Direction</button>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { VueFunnelGraph } from './entry';\nexport default {\n    name:  'VueFunnelGraphDev', // vue library dev component\n    components: {\n        VueFunnelGraph\n    },\n    data() {\n        return {\n            labels: ['Impressions', 'Add To Cart', 'Buy'],\n            subLabels: [],\n            values: [12000, 5700, 930],\n            colors: ['#FFB178', '#FF3C8E'],\n            direction: 'horizontal',\n            gradientDirection: 'horizontal',\n            height: 300,\n            width: 800,\n            dataSetNum: 1\n        };\n    },\n    methods: {\n        useDataSet1() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = [];\n            this.values = [12000, 4700, 930];\n            this.colors = ['#FFB178', '#FF3C8E'];\n        },\n        useDataSet2() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = [];\n            this.values = [14000, 9100, 1230];\n            this.colors = ['#A0BBFF', '#EC77FF'];\n        },\n        useDataSet3() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = ['Direct', 'Social Media', 'Ads'];\n            this.values = [\n                [3000, 2500, 6500],\n                [3000, 1700, 1000],\n                [600, 200, 130]\n            ];\n            this.colors = [\n                ['#FFB178', '#FF78B1', '#FF3C8E'],\n                ['#A0BBFF', '#EC77FF'],\n                ['#A0F9FF', '#7795FF']\n            ];\n        },\n        useDataSet4() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy', 'Return'];\n            this.subLabels = [];\n            this.values = [14000, 9100, 4230, 260];\n            this.colors = ['#FF4589', '#FF5050'];\n        },\n        useDataSet5() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = [];\n            this.values = [12650, 4230, 263];\n            this.colors = ['#FF9A9A', '#FFB178'];\n        },\n        useDataSet6() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = ['Direct', 'Social Media', 'Ads', 'Other'];\n            this.values = [\n                [3000, 2500, 2000, 4500],\n                [3000, 1700, 500, 500],\n                [600, 200, 100, 30]\n            ];\n            this.colors = [\n                ['#A0BBFF', '#EC77FF'],\n                ['#FFB178', '#FF78B1', '#FF3C8E'],\n                ['#A0F9FF', '#7795FF']\n            ];\n        },\n        makeVertical() {\n            this.direction = 'vertical';\n            this.height = 500;\n            this.width = 400;\n            this.gradientV();\n        },\n        makeHorizontal() {\n            this.direction = 'horizontal';\n            this.height = 300;\n            this.width = 800;\n            this.gradientH();\n        },\n        toggleDirection() {\n            (this.direction === 'horizontal') ? this.makeVertical() : this.makeHorizontal();\n        },\n        gradientV() {\n            this.gradientDirection = 'vertical';\n        },\n        gradientH() {\n            this.gradientDirection = 'horizontal';\n        },\n        toggleGradient() {\n            (this.gradientDirection === 'horizontal') ? this.gradientV() : this.gradientH();\n        },\n        getNextSet() {\n            this.dataSetNum++;\n            if (this.dataSetNum > 6) {\n                this.dataSetNum = 1;\n            }\n\n            this[`useDataSet${this.dataSetNum}`]();\n        }\n    }\n}\n</script>\n\n<style>\n    body {\n        background-color: #393862;\n    }\n\n    .vue-funnel-graph-lib-dev {\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n    }\n\n    .funnels {\n        height: 580px;\n        margin-top: 32px;\n    }\n\n    .controls {\n        display: flex;\n    }\n\n    button {\n        background: #21FFA2;\n        color: #393862;\n        border-radius: 4px;\n        border: none;\n        padding: 12px 24px;\n        margin: 0 5px;\n        font-size: 16px;\n        outline: 0;\n        cursor: pointer;\n    }\n\n    button:hover {\n        background: #05DF9D;\n    }\n</style>\n"]}]}
+{"remainingRequest":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue?vue&type=script&lang=js&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue","mtime":1580652628972},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/babel-loader/lib/index.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\nimport { VueFunnelGraph } from './entry';\nexport default {\n    name:  'VueFunnelGraphDev', // vue library dev component\n    components: {\n        VueFunnelGraph\n    },\n    data() {\n        return {\n            labels: ['Impressions', 'Add To Cart', 'Buy'],\n            subLabels: [],\n            values: [12000, 5700, 930],\n            colors: ['#FFB178', '#FF3C8E'],\n            direction: 'horizontal',\n            gradientDirection: 'horizontal',\n            height: 300,\n            width: 800,\n            dataSetNum: 1,\n            subLabelValue: 'raw'\n        };\n    },\n    methods: {\n        useDataSet1() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = [];\n            this.values = [12000, 4700, 930];\n            this.colors = ['#FFB178', '#FF3C8E'];\n        },\n        useDataSet2() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = [];\n            this.values = [14000, 9100, 1230];\n            this.colors = ['#A0BBFF', '#EC77FF'];\n        },\n        useDataSet3() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = ['Direct', 'Social Media', 'Ads'];\n            this.values = [\n                [3000, 2500, 6500],\n                [3000, 1700, 1000],\n                [600, 200, 130]\n            ];\n            this.colors = [\n                ['#FFB178', '#FF78B1', '#FF3C8E'],\n                ['#A0BBFF', '#EC77FF'],\n                ['#A0F9FF', '#7795FF']\n            ];\n        },\n        useDataSet4() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy', 'Return'];\n            this.subLabels = [];\n            this.values = [14000, 9100, 4230, 260];\n            this.colors = ['#FF4589', '#FF5050'];\n        },\n        useDataSet5() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = [];\n            this.values = [12650, 4230, 263];\n            this.colors = ['#FF9A9A', '#FFB178'];\n        },\n        useDataSet6() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = ['Direct', 'Social Media', 'Ads', 'Other'];\n            this.values = [\n                [3000, 2500, 2000, 4500],\n                [3000, 1700, 500, 500],\n                [600, 200, 100, 30]\n            ];\n            this.colors = [\n                ['#A0BBFF', '#EC77FF'],\n                ['#FFB178', '#FF78B1', '#FF3C8E'],\n                ['#A0F9FF', '#7795FF']\n            ];\n        },\n        makeVertical() {\n            this.direction = 'vertical';\n            this.height = 500;\n            this.width = 400;\n            this.gradientV();\n        },\n        makeHorizontal() {\n            this.direction = 'horizontal';\n            this.height = 300;\n            this.width = 800;\n            this.gradientH();\n        },\n        toggleDirection() {\n            (this.direction === 'horizontal') ? this.makeVertical() : this.makeHorizontal();\n        },\n        gradientV() {\n            this.gradientDirection = 'vertical';\n        },\n        gradientH() {\n            this.gradientDirection = 'horizontal';\n        },\n        toggleGradient() {\n            (this.gradientDirection === 'horizontal') ? this.gradientV() : this.gradientH();\n        },\n        getNextSet() {\n            this.dataSetNum++;\n            if (this.dataSetNum > 6) {\n                this.dataSetNum = 1;\n            }\n\n            this[`useDataSet${this.dataSetNum}`]();\n        }\n    }\n}\n",{"version":3,"sources":["example.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"example.vue","sourceRoot":".","sourcesContent":["<template>\n    <div class=\"vue-funnel-graph-lib-dev\">\n        <div class=\"funnels\">\n            <vue-funnel-graph :width=\"width\" :height=\"height\" :labels=\"labels\"\n                              :values=\"values\" :colors=\"colors\" :sub-labels=\"subLabels\" :direction=\"direction\"\n                              :gradient-direction=\"gradientDirection\"\n                              :animated=\"true\" :display-percentage=\"true\"\n                              :sub-label-value=\"subLabelValue\"\n            ></vue-funnel-graph>\n        </div>\n        <div class=\"controls\">\n            <button @click=\"getNextSet()\">Change Data</button>\n            <button @click=\"toggleDirection()\">Toggle Direction</button>\n            <button @click=\"toggleGradient()\">Toggle Gradient Direction</button>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { VueFunnelGraph } from './entry';\nexport default {\n    name:  'VueFunnelGraphDev', // vue library dev component\n    components: {\n        VueFunnelGraph\n    },\n    data() {\n        return {\n            labels: ['Impressions', 'Add To Cart', 'Buy'],\n            subLabels: [],\n            values: [12000, 5700, 930],\n            colors: ['#FFB178', '#FF3C8E'],\n            direction: 'horizontal',\n            gradientDirection: 'horizontal',\n            height: 300,\n            width: 800,\n            dataSetNum: 1,\n            subLabelValue: 'raw'\n        };\n    },\n    methods: {\n        useDataSet1() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = [];\n            this.values = [12000, 4700, 930];\n            this.colors = ['#FFB178', '#FF3C8E'];\n        },\n        useDataSet2() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = [];\n            this.values = [14000, 9100, 1230];\n            this.colors = ['#A0BBFF', '#EC77FF'];\n        },\n        useDataSet3() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = ['Direct', 'Social Media', 'Ads'];\n            this.values = [\n                [3000, 2500, 6500],\n                [3000, 1700, 1000],\n                [600, 200, 130]\n            ];\n            this.colors = [\n                ['#FFB178', '#FF78B1', '#FF3C8E'],\n                ['#A0BBFF', '#EC77FF'],\n                ['#A0F9FF', '#7795FF']\n            ];\n        },\n        useDataSet4() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy', 'Return'];\n            this.subLabels = [];\n            this.values = [14000, 9100, 4230, 260];\n            this.colors = ['#FF4589', '#FF5050'];\n        },\n        useDataSet5() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = [];\n            this.values = [12650, 4230, 263];\n            this.colors = ['#FF9A9A', '#FFB178'];\n        },\n        useDataSet6() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = ['Direct', 'Social Media', 'Ads', 'Other'];\n            this.values = [\n                [3000, 2500, 2000, 4500],\n                [3000, 1700, 500, 500],\n                [600, 200, 100, 30]\n            ];\n            this.colors = [\n                ['#A0BBFF', '#EC77FF'],\n                ['#FFB178', '#FF78B1', '#FF3C8E'],\n                ['#A0F9FF', '#7795FF']\n            ];\n        },\n        makeVertical() {\n            this.direction = 'vertical';\n            this.height = 500;\n            this.width = 400;\n            this.gradientV();\n        },\n        makeHorizontal() {\n            this.direction = 'horizontal';\n            this.height = 300;\n            this.width = 800;\n            this.gradientH();\n        },\n        toggleDirection() {\n            (this.direction === 'horizontal') ? this.makeVertical() : this.makeHorizontal();\n        },\n        gradientV() {\n            this.gradientDirection = 'vertical';\n        },\n        gradientH() {\n            this.gradientDirection = 'horizontal';\n        },\n        toggleGradient() {\n            (this.gradientDirection === 'horizontal') ? this.gradientV() : this.gradientH();\n        },\n        getNextSet() {\n            this.dataSetNum++;\n            if (this.dataSetNum > 6) {\n                this.dataSetNum = 1;\n            }\n\n            this[`useDataSet${this.dataSetNum}`]();\n        }\n    }\n}\n</script>\n\n<style>\n    body {\n        background-color: #393862;\n    }\n\n    .vue-funnel-graph-lib-dev {\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n    }\n\n    .funnels {\n        height: 580px;\n        margin-top: 32px;\n    }\n\n    .funnel:not(.svg-funnel-js--vertical) {\n        transition: transform 0.3s ease;\n        transform: translateY(100px);\n    }\n\n    .controls {\n        display: flex;\n    }\n\n    button {\n        background: #21FFA2;\n        color: #393862;\n        border-radius: 4px;\n        border: none;\n        padding: 12px 24px;\n        margin: 0 5px;\n        font-size: 16px;\n        outline: 0;\n        cursor: pointer;\n    }\n\n    button:hover {\n        background: #05DF9D;\n    }\n</style>\n"]}]}

src/node_modules/.cache/vue-loader/a41eafa30a6b7e49a824a592b31199f6.json

@@ -1,1 +0,1 @@
-{"remainingRequest":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue?vue&type=style&index=0&lang=css&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue","mtime":1553156448878},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/css-loader/index.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nbody {\n    background-color: #393862;\n}\n\n.vue-funnel-graph-lib-dev {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n\n.funnels {\n    height: 580px;\n    margin-top: 32px;\n}\n\n.controls {\n    display: flex;\n}\n\nbutton {\n    background: #21FFA2;\n    color: #393862;\n    border-radius: 4px;\n    border: none;\n    padding: 12px 24px;\n    margin: 0 5px;\n    font-size: 16px;\n    outline: 0;\n    cursor: pointer;\n}\n\nbutton:hover {\n    background: #05DF9D;\n}\n",{"version":3,"sources":["example.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+HA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA","file":"example.vue","sourceRoot":".","sourcesContent":["<template>\n    <div class=\"vue-funnel-graph-lib-dev\">\n        <div class=\"funnels\">\n            <vue-funnel-graph :width=\"width\" :height=\"height\" :labels=\"labels\"\n                              :values=\"values\" :colors=\"colors\" :sub-labels=\"subLabels\" :direction=\"direction\"\n                              :gradient-direction=\"gradientDirection\"\n                              :animated=\"true\" :display-percentage=\"true\"\n            ></vue-funnel-graph>\n        </div>\n        <div class=\"controls\">\n            <button @click=\"getNextSet()\">Change Data</button>\n            <button @click=\"toggleDirection()\">Toggle Direction</button>\n            <button @click=\"toggleGradient()\">Toggle Gradient Direction</button>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { VueFunnelGraph } from './entry';\nexport default {\n    name:  'VueFunnelGraphDev', // vue library dev component\n    components: {\n        VueFunnelGraph\n    },\n    data() {\n        return {\n            labels: ['Impressions', 'Add To Cart', 'Buy'],\n            subLabels: [],\n            values: [12000, 5700, 930],\n            colors: ['#FFB178', '#FF3C8E'],\n            direction: 'horizontal',\n            gradientDirection: 'horizontal',\n            height: 300,\n            width: 800,\n            dataSetNum: 1\n        };\n    },\n    methods: {\n        useDataSet1() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = [];\n            this.values = [12000, 4700, 930];\n            this.colors = ['#FFB178', '#FF3C8E'];\n        },\n        useDataSet2() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = [];\n            this.values = [14000, 9100, 1230];\n            this.colors = ['#A0BBFF', '#EC77FF'];\n        },\n        useDataSet3() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = ['Direct', 'Social Media', 'Ads'];\n            this.values = [\n                [3000, 2500, 6500],\n                [3000, 1700, 1000],\n                [600, 200, 130]\n            ];\n            this.colors = [\n                ['#FFB178', '#FF78B1', '#FF3C8E'],\n                ['#A0BBFF', '#EC77FF'],\n                ['#A0F9FF', '#7795FF']\n            ];\n        },\n        useDataSet4() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy', 'Return'];\n            this.subLabels = [];\n            this.values = [14000, 9100, 4230, 260];\n            this.colors = ['#FF4589', '#FF5050'];\n        },\n        useDataSet5() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = [];\n            this.values = [12650, 4230, 263];\n            this.colors = ['#FF9A9A', '#FFB178'];\n        },\n        useDataSet6() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = ['Direct', 'Social Media', 'Ads', 'Other'];\n            this.values = [\n                [3000, 2500, 2000, 4500],\n                [3000, 1700, 500, 500],\n                [600, 200, 100, 30]\n            ];\n            this.colors = [\n                ['#A0BBFF', '#EC77FF'],\n                ['#FFB178', '#FF78B1', '#FF3C8E'],\n                ['#A0F9FF', '#7795FF']\n            ];\n        },\n        makeVertical() {\n            this.direction = 'vertical';\n            this.height = 500;\n            this.width = 400;\n            this.gradientV();\n        },\n        makeHorizontal() {\n            this.direction = 'horizontal';\n            this.height = 300;\n            this.width = 800;\n            this.gradientH();\n        },\n        toggleDirection() {\n            (this.direction === 'horizontal') ? this.makeVertical() : this.makeHorizontal();\n        },\n        gradientV() {\n            this.gradientDirection = 'vertical';\n        },\n        gradientH() {\n            this.gradientDirection = 'horizontal';\n        },\n        toggleGradient() {\n            (this.gradientDirection === 'horizontal') ? this.gradientV() : this.gradientH();\n        },\n        getNextSet() {\n            this.dataSetNum++;\n            if (this.dataSetNum > 6) {\n                this.dataSetNum = 1;\n            }\n\n            this[`useDataSet${this.dataSetNum}`]();\n        }\n    }\n}\n</script>\n\n<style>\n    body {\n        background-color: #393862;\n    }\n\n    .vue-funnel-graph-lib-dev {\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n    }\n\n    .funnels {\n        height: 580px;\n        margin-top: 32px;\n    }\n\n    .controls {\n        display: flex;\n    }\n\n    button {\n        background: #21FFA2;\n        color: #393862;\n        border-radius: 4px;\n        border: none;\n        padding: 12px 24px;\n        margin: 0 5px;\n        font-size: 16px;\n        outline: 0;\n        cursor: pointer;\n    }\n\n    button:hover {\n        background: #05DF9D;\n    }\n</style>\n"]}]}
+{"remainingRequest":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue?vue&type=style&index=0&lang=css&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue","mtime":1580652628972},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/css-loader/index.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nbody {\n    background-color: #393862;\n}\n\n.vue-funnel-graph-lib-dev {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n\n.funnels {\n    height: 580px;\n    margin-top: 32px;\n}\n\n.funnel:not(.svg-funnel-js--vertical) {\n    transition: transform 0.3s ease;\n    transform: translateY(100px);\n}\n\n.controls {\n    display: flex;\n}\n\nbutton {\n    background: #21FFA2;\n    color: #393862;\n    border-radius: 4px;\n    border: none;\n    padding: 12px 24px;\n    margin: 0 5px;\n    font-size: 16px;\n    outline: 0;\n    cursor: pointer;\n}\n\nbutton:hover {\n    background: #05DF9D;\n}\n",{"version":3,"sources":["example.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiIA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA","file":"example.vue","sourceRoot":".","sourcesContent":["<template>\n    <div class=\"vue-funnel-graph-lib-dev\">\n        <div class=\"funnels\">\n            <vue-funnel-graph :width=\"width\" :height=\"height\" :labels=\"labels\"\n                              :values=\"values\" :colors=\"colors\" :sub-labels=\"subLabels\" :direction=\"direction\"\n                              :gradient-direction=\"gradientDirection\"\n                              :animated=\"true\" :display-percentage=\"true\"\n                              :sub-label-value=\"subLabelValue\"\n            ></vue-funnel-graph>\n        </div>\n        <div class=\"controls\">\n            <button @click=\"getNextSet()\">Change Data</button>\n            <button @click=\"toggleDirection()\">Toggle Direction</button>\n            <button @click=\"toggleGradient()\">Toggle Gradient Direction</button>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { VueFunnelGraph } from './entry';\nexport default {\n    name:  'VueFunnelGraphDev', // vue library dev component\n    components: {\n        VueFunnelGraph\n    },\n    data() {\n        return {\n            labels: ['Impressions', 'Add To Cart', 'Buy'],\n            subLabels: [],\n            values: [12000, 5700, 930],\n            colors: ['#FFB178', '#FF3C8E'],\n            direction: 'horizontal',\n            gradientDirection: 'horizontal',\n            height: 300,\n            width: 800,\n            dataSetNum: 1,\n            subLabelValue: 'raw'\n        };\n    },\n    methods: {\n        useDataSet1() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = [];\n            this.values = [12000, 4700, 930];\n            this.colors = ['#FFB178', '#FF3C8E'];\n        },\n        useDataSet2() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = [];\n            this.values = [14000, 9100, 1230];\n            this.colors = ['#A0BBFF', '#EC77FF'];\n        },\n        useDataSet3() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = ['Direct', 'Social Media', 'Ads'];\n            this.values = [\n                [3000, 2500, 6500],\n                [3000, 1700, 1000],\n                [600, 200, 130]\n            ];\n            this.colors = [\n                ['#FFB178', '#FF78B1', '#FF3C8E'],\n                ['#A0BBFF', '#EC77FF'],\n                ['#A0F9FF', '#7795FF']\n            ];\n        },\n        useDataSet4() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy', 'Return'];\n            this.subLabels = [];\n            this.values = [14000, 9100, 4230, 260];\n            this.colors = ['#FF4589', '#FF5050'];\n        },\n        useDataSet5() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = [];\n            this.values = [12650, 4230, 263];\n            this.colors = ['#FF9A9A', '#FFB178'];\n        },\n        useDataSet6() {\n            this.labels = ['Impressions', 'Add To Cart', 'Buy'];\n            this.subLabels = ['Direct', 'Social Media', 'Ads', 'Other'];\n            this.values = [\n                [3000, 2500, 2000, 4500],\n                [3000, 1700, 500, 500],\n                [600, 200, 100, 30]\n            ];\n            this.colors = [\n                ['#A0BBFF', '#EC77FF'],\n                ['#FFB178', '#FF78B1', '#FF3C8E'],\n                ['#A0F9FF', '#7795FF']\n            ];\n        },\n        makeVertical() {\n            this.direction = 'vertical';\n            this.height = 500;\n            this.width = 400;\n            this.gradientV();\n        },\n        makeHorizontal() {\n            this.direction = 'horizontal';\n            this.height = 300;\n            this.width = 800;\n            this.gradientH();\n        },\n        toggleDirection() {\n            (this.direction === 'horizontal') ? this.makeVertical() : this.makeHorizontal();\n        },\n        gradientV() {\n            this.gradientDirection = 'vertical';\n        },\n        gradientH() {\n            this.gradientDirection = 'horizontal';\n        },\n        toggleGradient() {\n            (this.gradientDirection === 'horizontal') ? this.gradientV() : this.gradientH();\n        },\n        getNextSet() {\n            this.dataSetNum++;\n            if (this.dataSetNum > 6) {\n                this.dataSetNum = 1;\n            }\n\n            this[`useDataSet${this.dataSetNum}`]();\n        }\n    }\n}\n</script>\n\n<style>\n    body {\n        background-color: #393862;\n    }\n\n    .vue-funnel-graph-lib-dev {\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n    }\n\n    .funnels {\n        height: 580px;\n        margin-top: 32px;\n    }\n\n    .funnel:not(.svg-funnel-js--vertical) {\n        transition: transform 0.3s ease;\n        transform: translateY(100px);\n    }\n\n    .controls {\n        display: flex;\n    }\n\n    button {\n        background: #21FFA2;\n        color: #393862;\n        border-radius: 4px;\n        border: none;\n        padding: 12px 24px;\n        margin: 0 5px;\n        font-size: 16px;\n        outline: 0;\n        cursor: pointer;\n    }\n\n    button:hover {\n        background: #05DF9D;\n    }\n</style>\n"]}]}

src/node_modules/.cache/vue-loader/adf1c12630deaf36b0237d56def543ff.json

@@ -1,1 +0,1 @@
-{"remainingRequest":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/eslint-loader/index.js??ref--13-0!/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue","mtime":1553156448878},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/eslint-loader/index.js","mtime":499162500000}],"contextDependencies":[],"result":["import { render, staticRenderFns } from \"./example.vue?vue&type=template&id=063a7d4c&\"\nimport script from \"./example.vue?vue&type=script&lang=js&\"\nexport * from \"./example.vue?vue&type=script&lang=js&\"\nimport style0 from \"./example.vue?vue&type=style&index=0&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\n/* hot reload */\nif (module.hot) {\n  var api = require(\"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-hot-reload-api/dist/index.js\")\n  api.install(require('vue'))\n  if (api.compatible) {\n    module.hot.accept()\n    if (!module.hot.data) {\n      api.createRecord('063a7d4c', component.options)\n    } else {\n      api.reload('063a7d4c', component.options)\n    }\n    module.hot.accept(\"./example.vue?vue&type=template&id=063a7d4c&\", function () {\n      api.rerender('063a7d4c', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"example.vue\"\nexport default component.exports"]}
+{"remainingRequest":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/eslint-loader/index.js??ref--13-0!/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue","mtime":1580652628972},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/eslint-loader/index.js","mtime":499162500000}],"contextDependencies":[],"result":["import { render, staticRenderFns } from \"./example.vue?vue&type=template&id=063a7d4c&\"\nimport script from \"./example.vue?vue&type=script&lang=js&\"\nexport * from \"./example.vue?vue&type=script&lang=js&\"\nimport style0 from \"./example.vue?vue&type=style&index=0&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\n/* hot reload */\nif (module.hot) {\n  var api = require(\"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-hot-reload-api/dist/index.js\")\n  api.install(require('vue'))\n  if (api.compatible) {\n    module.hot.accept()\n    if (!module.hot.data) {\n      api.createRecord('063a7d4c', component.options)\n    } else {\n      api.reload('063a7d4c', component.options)\n    }\n    module.hot.accept(\"./example.vue?vue&type=template&id=063a7d4c&\", function () {\n      api.rerender('063a7d4c', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"example.vue\"\nexport default component.exports"]}

src/node_modules/.cache/vue-loader/bcc23689997f79749b626b033fd947a2.json

@@ -1,1 +0,1 @@
-{"remainingRequest":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue?vue&type=template&id=063a7d4c&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue","mtime":1553156448878},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/loaders/templateLoader.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":["var render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { staticClass: \"vue-funnel-graph-lib-dev\" }, [\n    _c(\n      \"div\",\n      { staticClass: \"funnels\" },\n      [\n        _c(\"vue-funnel-graph\", {\n          attrs: {\n            width: _vm.width,\n            height: _vm.height,\n            labels: _vm.labels,\n            values: _vm.values,\n            colors: _vm.colors,\n            \"sub-labels\": _vm.subLabels,\n            direction: _vm.direction,\n            \"gradient-direction\": _vm.gradientDirection,\n            animated: true,\n            \"display-percentage\": true\n          }\n        })\n      ],\n      1\n    ),\n    _c(\"div\", { staticClass: \"controls\" }, [\n      _c(\n        \"button\",\n        {\n          on: {\n            click: function($event) {\n              return _vm.getNextSet()\n            }\n          }\n        },\n        [_vm._v(\"Change Data\")]\n      ),\n      _c(\n        \"button\",\n        {\n          on: {\n            click: function($event) {\n              return _vm.toggleDirection()\n            }\n          }\n        },\n        [_vm._v(\"Toggle Direction\")]\n      ),\n      _c(\n        \"button\",\n        {\n          on: {\n            click: function($event) {\n              return _vm.toggleGradient()\n            }\n          }\n        },\n        [_vm._v(\"Toggle Gradient Direction\")]\n      )\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }"]}
+{"remainingRequest":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue?vue&type=template&id=063a7d4c&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/example.vue","mtime":1580652628972},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/loaders/templateLoader.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":["var render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { staticClass: \"vue-funnel-graph-lib-dev\" }, [\n    _c(\n      \"div\",\n      { staticClass: \"funnels\" },\n      [\n        _c(\"vue-funnel-graph\", {\n          attrs: {\n            width: _vm.width,\n            height: _vm.height,\n            labels: _vm.labels,\n            values: _vm.values,\n            colors: _vm.colors,\n            \"sub-labels\": _vm.subLabels,\n            direction: _vm.direction,\n            \"gradient-direction\": _vm.gradientDirection,\n            animated: true,\n            \"display-percentage\": true,\n            \"sub-label-value\": _vm.subLabelValue\n          }\n        })\n      ],\n      1\n    ),\n    _c(\"div\", { staticClass: \"controls\" }, [\n      _c(\n        \"button\",\n        {\n          on: {\n            click: function($event) {\n              return _vm.getNextSet()\n            }\n          }\n        },\n        [_vm._v(\"Change Data\")]\n      ),\n      _c(\n        \"button\",\n        {\n          on: {\n            click: function($event) {\n              return _vm.toggleDirection()\n            }\n          }\n        },\n        [_vm._v(\"Toggle Direction\")]\n      ),\n      _c(\n        \"button\",\n        {\n          on: {\n            click: function($event) {\n              return _vm.toggleGradient()\n            }\n          }\n        },\n        [_vm._v(\"Toggle Gradient Direction\")]\n      )\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }"]}

src/node_modules/.cache/vue-loader/c479df7c3a81a26b647a71202571ae6d.json

@@ -1,1 +0,1 @@
-{"remainingRequest":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-components/vue-funnel-graph.vue?vue&type=template&id=5dd8f15e&scoped=true&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-components/vue-funnel-graph.vue","mtime":1553111713389},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/loaders/templateLoader.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":["var render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"div\",\n    {\n      staticClass: \"funnel svg-funnel-js\",\n      class: { \"svg-funnel-js--vertical\": _vm.direction === \"vertical\" }\n    },\n    [\n      _c(\"div\", { staticClass: \"svg-funnel-js__container\" }, [\n        _c(\n          \"svg\",\n          { attrs: { width: _vm.width, height: _vm.height } },\n          [\n            _c(\n              \"defs\",\n              _vm._l(_vm.gradientSet, function(colors, index) {\n                return _c(\n                  \"linearGradient\",\n                  {\n                    key: index,\n                    attrs: {\n                      id: \"funnelGradient-\" + (index + 1),\n                      gradientTransform: _vm.gradientAngle\n                    }\n                  },\n                  _vm._l(colors.values, function(color, index) {\n                    return _c(\"stop\", {\n                      key: index,\n                      attrs: {\n                        \"stop-color\": color,\n                        offset: _vm.offsetColor(index, colors.values.length)\n                      }\n                    })\n                  }),\n                  1\n                )\n              }),\n              1\n            ),\n            _vm._l(_vm.paths, function(path, index) {\n              return _c(\"path\", {\n                key: index,\n                attrs: {\n                  fill: _vm.colorSet[index].fill,\n                  stroke: _vm.colorSet[index].fill,\n                  d: path\n                }\n              })\n            })\n          ],\n          2\n        )\n      ]),\n      _c(\n        \"transition-group\",\n        {\n          staticClass: \"svg-funnel-js__labels\",\n          attrs: { name: \"appear\", tag: \"div\" },\n          on: { enter: _vm.enterTransition, leave: _vm.leaveTransition }\n        },\n        _vm._l(_vm.valuesFormatted, function(value, index) {\n          return _c(\n            \"div\",\n            {\n              key: _vm.labels[index]\n                .toLowerCase()\n                .split(\" \")\n                .join(\"-\"),\n              staticClass: \"svg-funnel-js__label\",\n              class: \"label-\" + (index + 1)\n            },\n            [\n              _c(\"div\", { staticClass: \"label__value\" }, [\n                _vm._v(_vm._s(value))\n              ]),\n              _vm.labels\n                ? _c(\"div\", { staticClass: \"label__title\" }, [\n                    _vm._v(_vm._s(_vm.labels[index]))\n                  ])\n                : _vm._e(),\n              _vm.displayPercentage && _vm.percentages()[index] !== 100\n                ? _c(\"div\", { staticClass: \"label__percentage\" }, [\n                    _vm._v(\n                      \"\\n                \" +\n                        _vm._s(_vm.percentages()[index]) +\n                        \"%\\n            \"\n                    )\n                  ])\n                : _vm._e(),\n              _vm.is2d()\n                ? _c(\"div\", { staticClass: \"label__segment-percentages\" }, [\n                    _c(\n                      \"ul\",\n                      { staticClass: \"segment-percentage__list\" },\n                      _vm._l(_vm.subLabels, function(subLabel, j) {\n                        return _c(\"li\", { key: j }, [\n                          _vm._v(\n                            \"\\n                        \" +\n                              _vm._s(subLabel) +\n                              \":\\n                        \"\n                          ),\n                          _c(\n                            \"span\",\n                            { staticClass: \"percentage__list-label\" },\n                            [\n                              _vm._v(\n                                _vm._s(_vm.twoDimPercentages()[index][j]) + \"%\"\n                              )\n                            ]\n                          )\n                        ])\n                      }),\n                      0\n                    )\n                  ])\n                : _vm._e()\n            ]\n          )\n        }),\n        0\n      ),\n      _c(\n        \"transition\",\n        {\n          attrs: { name: \"fade\" },\n          on: { enter: _vm.enterTransition, leave: _vm.leaveTransition }\n        },\n        [\n          _vm.is2d()\n            ? _c(\n                \"div\",\n                { staticClass: \"svg-funnel-js__subLabels\" },\n                _vm._l(_vm.subLabels, function(subLabel, index) {\n                  return _c(\n                    \"div\",\n                    {\n                      key: index,\n                      class:\n                        \"svg-funnel-js__subLabel svg-funnel-js__subLabel-\" +\n                        (index + 1)\n                    },\n                    [\n                      _c(\"div\", {\n                        staticClass: \"svg-funnel-js__subLabel--color\",\n                        style: _vm.subLabelBackgrounds(index)\n                      }),\n                      _c(\n                        \"div\",\n                        { staticClass: \"svg-funnel-js__subLabel--title\" },\n                        [_vm._v(_vm._s(subLabel))]\n                      )\n                    ]\n                  )\n                }),\n                0\n              )\n            : _vm._e()\n        ]\n      )\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }"]}
+{"remainingRequest":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-components/vue-funnel-graph.vue?vue&type=template&id=5dd8f15e&scoped=true&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-components/vue-funnel-graph.vue","mtime":1580652505942},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/loaders/templateLoader.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":["var render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"div\",\n    {\n      staticClass: \"funnel svg-funnel-js\",\n      class: { \"svg-funnel-js--vertical\": _vm.direction === \"vertical\" }\n    },\n    [\n      _c(\"div\", { staticClass: \"svg-funnel-js__container\" }, [\n        _c(\n          \"svg\",\n          { attrs: { width: _vm.width, height: _vm.height } },\n          [\n            _c(\n              \"defs\",\n              _vm._l(_vm.gradientSet, function(colors, index) {\n                return _c(\n                  \"linearGradient\",\n                  {\n                    key: index,\n                    attrs: {\n                      id: \"funnelGradient-\" + (index + 1),\n                      gradientTransform: _vm.gradientAngle\n                    }\n                  },\n                  _vm._l(colors.values, function(color, index) {\n                    return _c(\"stop\", {\n                      key: index,\n                      attrs: {\n                        \"stop-color\": color,\n                        offset: _vm.offsetColor(index, colors.values.length)\n                      }\n                    })\n                  }),\n                  1\n                )\n              }),\n              1\n            ),\n            _vm._l(_vm.paths, function(path, index) {\n              return _c(\"path\", {\n                key: index,\n                attrs: {\n                  fill: _vm.colorSet[index].fill,\n                  stroke: _vm.colorSet[index].fill,\n                  d: path\n                }\n              })\n            })\n          ],\n          2\n        )\n      ]),\n      _c(\n        \"transition-group\",\n        {\n          staticClass: \"svg-funnel-js__labels\",\n          attrs: { name: \"appear\", tag: \"div\" },\n          on: { enter: _vm.enterTransition, leave: _vm.leaveTransition }\n        },\n        _vm._l(_vm.valuesFormatted, function(value, index) {\n          return _c(\n            \"div\",\n            {\n              key: _vm.labels[index]\n                .toLowerCase()\n                .split(\" \")\n                .join(\"-\"),\n              staticClass: \"svg-funnel-js__label\",\n              class: \"label-\" + (index + 1)\n            },\n            [\n              _c(\"div\", { staticClass: \"label__value\" }, [\n                _vm._v(_vm._s(value))\n              ]),\n              _vm.labels\n                ? _c(\"div\", { staticClass: \"label__title\" }, [\n                    _vm._v(_vm._s(_vm.labels[index]))\n                  ])\n                : _vm._e(),\n              _vm.displayPercentage && _vm.percentages()[index] !== 100\n                ? _c(\"div\", { staticClass: \"label__percentage\" }, [\n                    _vm._v(\n                      \"\\n                \" +\n                        _vm._s(_vm.percentages()[index]) +\n                        \"%\\n            \"\n                    )\n                  ])\n                : _vm._e(),\n              _vm.is2d()\n                ? _c(\"div\", { staticClass: \"label__segment-percentages\" }, [\n                    _c(\n                      \"ul\",\n                      { staticClass: \"segment-percentage__list\" },\n                      _vm._l(_vm.subLabels, function(subLabel, j) {\n                        return _c(\"li\", { key: j }, [\n                          _vm._v(\n                            \"\\n                        \" +\n                              _vm._s(subLabel) +\n                              \":\\n                        \"\n                          ),\n                          _c(\n                            \"span\",\n                            { staticClass: \"percentage__list-label\" },\n                            [\n                              _vm._v(\n                                _vm._s(\n                                  _vm._f(\"format\")(\n                                    _vm.subLabelValue === \"percent\"\n                                      ? _vm.twoDimPercentages()[index][j] + \"%\"\n                                      : _vm.valuesFormatted[index][j]\n                                  )\n                                )\n                              )\n                            ]\n                          )\n                        ])\n                      }),\n                      0\n                    )\n                  ])\n                : _vm._e()\n            ]\n          )\n        }),\n        0\n      ),\n      _c(\n        \"transition\",\n        {\n          attrs: { name: \"fade\" },\n          on: { enter: _vm.enterTransition, leave: _vm.leaveTransition }\n        },\n        [\n          _vm.is2d()\n            ? _c(\n                \"div\",\n                { staticClass: \"svg-funnel-js__subLabels\" },\n                _vm._l(_vm.subLabels, function(subLabel, index) {\n                  return _c(\n                    \"div\",\n                    {\n                      key: index,\n                      class:\n                        \"svg-funnel-js__subLabel svg-funnel-js__subLabel-\" +\n                        (index + 1)\n                    },\n                    [\n                      _c(\"div\", {\n                        staticClass: \"svg-funnel-js__subLabel--color\",\n                        style: _vm.subLabelBackgrounds(index)\n                      }),\n                      _c(\n                        \"div\",\n                        { staticClass: \"svg-funnel-js__subLabel--title\" },\n                        [_vm._v(_vm._s(subLabel))]\n                      )\n                    ]\n                  )\n                }),\n                0\n              )\n            : _vm._e()\n        ]\n      )\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }"]}

No alert changes

Improved metrics

Total package byte prevSize

231142

8.26%

Number of package files

33

3.13%

Lines of code

845

2.18%

Dependency changes

• Updated

  @tweenjs/tween.js@^17.4.0

• Updated

  funnel-graph-js@^1.4.1

• Updated

  node-sass@^4.13.1

• Updated

  sass-loader@^7.3.1