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