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

Comparing version 0.1.2 to 0.1.3

CHANGELOG.md

@@ -0,1 +1,5 @@
+### 0.1.3 (Mar 14, 2019)
+
+* Update documentation and add shields
+
 ### 0.1.2 (Mar 7, 2019)
@@ -2,0 +6,0 @@

package.json

 {
   "name": "vue-funnel-graph-js",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "",
@@ -8,2 +8,5 @@ "main": "dist/vue-funnel-graph.umd.js",
   "unpkg": "dist/vue-funnel-graph.min.js",
+  "browser": {
+    "./sfc": "src/lib-components/vue-funnel-graph.vue"
+  },
   "files": [
@@ -18,2 +21,3 @@ "dist/*",
   },
+  "licence": "MIT",
   "keywords": [
@@ -20,0 +24,0 @@ "funnel",

README.md

 # VueFunnelGraph.js
 
+![npm](https://img.shields.io/npm/v/vue-funnel-graph-js.svg)
+![GitHub](https://img.shields.io/github/license/greghub/vue-funnel-graph-js.svg)
+![GitHub last commit](https://img.shields.io/github/last-commit/greghub/vue-funnel-graph-js.svg)
+[![Gitter](https://img.shields.io/gitter/room/greghub/funnel-graph-js.svg)](https://gitter.im/funnel-graph-js/community)
+
 Funnel graph drawing library for Vue.js.
@@ -14,6 +19,19 @@
 
-<img src="https://i.imgur.com/BEkq4DE.gif">
+<img src="https://s2.gifyu.com/images/funnel-graph.gif">
 
 This is the Vue.js version of FunnelGraph.js, learn more about the library and see documentation [here.](https://github.com/greghub/funnel-graph-js)
 
+## Demo
+
+#### Online Demo
+
+[CodePen Demo](https://codepen.io/gregh/full/gEBXPK)
+
+#### Development Demo
+
+* Clone the repo
+* Navigate to `src` folder
+* Run `vue serve example.vue`
+* Visit the URL displayed
+
 ## Installation
@@ -26,2 +44,12 @@
 
+#### UNPKG
+```html
+<script src="https://unpkg.com/vue-funnel-graph-js"></script>
+```
+
+#### CDN
+```html
+<script src="https://cdn.jsdelivr.net/npm/vue-funnel-graph-js/dist/vue-funnel-graph.min.js"></script>
+```
+
 ## Usage
@@ -38,3 +66,3 @@
 <vue-funnel-graph :width="width" :height="height" :labels="labels"
-              :values="values" :colors="colors" :subLabels="subLabels" :direction="direction"
+              :values="values" :colors="colors" :sub-labels="subLabels" :direction="direction"
               :gradient-direction="gradientDirection"
@@ -46,3 +74,3 @@ :animated="true" :display-percentage="true"
 The values are passed to props:
-```vuejs
+```js
 export default {
@@ -58,10 +86,15 @@ name: 'app',
           values: [
-              [3000, 2500, 6500],
-              [3000, 1700, 1000],
-              [600, 200, 130]
+          // with the given Labels and SubLabels here's what the values represent:
+          // 
+          // Direct, Social, Ads  
+          //    |      |     |  
+          //    v      v     v
+              [3000, 2500, 6500], // Segments of "Impressions" from top to bottom
+              [3000, 1700, 1000], // Segments of "Add To Cart"
+              [600,  200,  130]   // Segments of "Buy"
           ],
           colors: [
-              ['#FFB178', '#FF78B1', '#FF3C8E'],
-              ['#A0BBFF', '#EC77FF'],
-              ['#A0F9FF', '#7795FF']
+              ['#FFB178', '#FF3C8E'], // color set for "Impressions" segment
+              ['#A0BBFF', '#EC77FF'], // color set for "Add To Cart" segment
+              ['#A0F9FF', '#7795FF']  // color set for "Buy" segment
           ],
@@ -86,3 +119,3 @@ direction: 'horizontal',
 | `colors` | Colors of the graph. If a string or array with one element passed it fills the graph with a solid color, if the array contains more than one element it fill the graph with a gradient. For two-dimensional charts and array of arrays shall be passed to fill each segment with a separate gradient. The array can contain arrays and strings mixed. If a there are more segments than colors provided, up to 10 extra segments will be filled with pre-defined solid colors | `array⎮string` | Yes | | | [12000, 4700, 930] |
-| `subLabels (:subLabels)` | Title of each data segment | `array` | Yes for two-dimensional graphs | | | ['Direct', 'Social Media', 'Ads'] |
+| `subLabels (:sub-labels)` | Title of each data segment | `array` | Yes for two-dimensional graphs | | | ['Direct', 'Social Media', 'Ads'] |
 | `direction` | Whether the chart visualization is displayed vertically or horizontally | `string` | No | 'vertical', 'horizontal' | 'horizontal' | |
@@ -89,0 +122,0 @@ | `gradientDirection (:gradient-direction)` | Whether the gradient applied to the segments of the graph is displayed from top to bottom or from left to right | `string` | No | 'vertical', 'horizontal' | 'horizontal' |

src/entry.js

@@ -15,3 +15,3 @@ // Import vue components
 const plugin = {
-  install,
+  install
 };
@@ -18,0 +18,0 @@

src/node_modules/.cache/vue-loader/0372d8f78f9e87a7c6ab2cf2855643b7.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-dev.vue?vue&type=template&id=434c59a2&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-dev.vue","mtime":1552213492589},{"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\" :subLabels=\"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/lib-dev.vue?vue&type=template&id=434c59a2&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-dev.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]}

src/node_modules/.cache/vue-loader/19b1e469db6472698fd3f425179da68a.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-dev.vue","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-dev.vue","mtime":1552061523795},{"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 \"./lib-dev.vue?vue&type=template&id=434c59a2&\"\nimport script from \"./lib-dev.vue?vue&type=script&lang=js&\"\nexport * from \"./lib-dev.vue?vue&type=script&lang=js&\"\nimport style0 from \"./lib-dev.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('434c59a2', component.options)\n    } else {\n      api.reload('434c59a2', component.options)\n    }\n    module.hot.accept(\"./lib-dev.vue?vue&type=template&id=434c59a2&\", function () {\n      api.rerender('434c59a2', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"lib-dev.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-dev.vue","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-dev.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 \"./lib-dev.vue?vue&type=template&id=434c59a2&\"\nimport script from \"./lib-dev.vue?vue&type=script&lang=js&\"\nexport * from \"./lib-dev.vue?vue&type=script&lang=js&\"\nimport style0 from \"./lib-dev.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('434c59a2', component.options)\n    } else {\n      api.reload('434c59a2', component.options)\n    }\n    module.hot.accept(\"./lib-dev.vue?vue&type=template&id=434c59a2&\", function () {\n      api.rerender('434c59a2', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"lib-dev.vue\"\nexport default component.exports"]}

src/node_modules/.cache/vue-loader/31859dbc7e06277c31a62008aeca9436.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-dev.vue?vue&type=script&lang=js&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-dev.vue","mtime":1552213492589},{"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":["\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            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":["lib-dev.vue"],"names":[],"mappings":";AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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":"lib-dev.vue","sourceRoot":".","sourcesContent":["<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            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<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\" :subLabels=\"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<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/lib-dev.vue?vue&type=script&lang=js&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-dev.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":["lib-dev.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":"lib-dev.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"]}]}

src/node_modules/.cache/vue-loader/3c44378bd4997606740500758f80e82a.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=style&index=0&id=5dd8f15e&scoped=true&lang=css&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-components/vue-funnel-graph.vue","mtime":1552060000660},{"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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\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",{"version":3,"sources":["vue-funnel-graph.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+QA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;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=style&index=0&id=5dd8f15e&scoped=true&lang=css&","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/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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\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",{"version":3,"sources":["vue-funnel-graph.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+QA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;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"]}]}

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":1552060000660},{"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":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]}

src/node_modules/.cache/vue-loader/7294d5791ad7105ae15a150930778c6f.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-dev.vue?vue&type=template&id=434c59a2&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-dev.vue","mtime":1552213492589},{"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            subLabels: _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/lib-dev.vue?vue&type=template&id=434c59a2&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-dev.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 }"]}

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":1552060000660},{"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":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"]}]}

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":1552060000660},{"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":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"]}

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":1552060000660},{"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":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 }"]}

src/node_modules/.cache/vue-loader/c7d1268253234a50c875fac672ee8c55.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-dev.vue?vue&type=style&index=0&lang=css&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-dev.vue","mtime":1552213492589},{"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\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":["lib-dev.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6HA;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":"lib-dev.vue","sourceRoot":".","sourcesContent":["<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            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<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\" :subLabels=\"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<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/lib-dev.vue?vue&type=style&index=0&lang=css&","dependencies":[{"path":"/Applications/MAMP/htdocs/vue-funnel-graph-js/src/lib-dev.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":["lib-dev.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":"lib-dev.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"]}]}

Fixed alerts

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

213251

21.48%

Number of package files

32

33.33%

Number of low license alerts

0

-100%

Number of lines in readme file

119

38.37%

No dependency changes