greghub / vue-funnel-graph-js

Vue.js component drawing SVG Funnel Graphs

VueFunnelGraph.js

Funnel graph drawing library for Vue.js.

• SVG charts
• Values, Labels, Percentages display
• Two-dimensional graph support
  • Legend display
  • Detailed percentage breakdown on hover
• Animated
• Solid color and gradient fill
• Horizontal and vertical charts

This is the Vue.js version of FunnelGraph.js, learn more about the library and see documentation here.

Demo

Online Demo

CodePen Demo

Development Demo

• Clone the repo
• Navigate to src folder
• Run vue serve example.vue
• Visit the URL displayed

Installation

NPM

npm i vue-funnel-graph-js

UNPKG

<script src="https://unpkg.com/vue-funnel-graph-js"></script>

CDN

<script src="https://cdn.jsdelivr.net/npm/vue-funnel-graph-js/dist/vue-funnel-graph.min.js"></script>

Usage

After installing, import the VueFunnelGraph component:

import { VueFunnelGraph } from 'vue-funnel-graph-js';

You can now use the custom element:

<vue-funnel-graph :width="width" :height="height" :labels="labels"
              :values="values" :colors="colors" :sub-labels="subLabels" :direction="direction"
              :gradient-direction="gradientDirection"
              :animated="true" :display-percentage="true"
></vue-funnel-graph>

The values are passed to props:

export default {
  name: 'app',
  components: {
      VueFunnelGraph
  },
  data() {
      return {
          labels: ['Impressions', 'Add To Cart', 'Buy'],
          subLabels: ['Direct', 'Social Media', 'Ads'],
          values: [
          // 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', '#FF3C8E'], // color set for "Impressions" segment
              ['#A0BBFF', '#EC77FF'], // color set for "Add To Cart" segment
              ['#A0F9FF', '#7795FF']  // color set for "Buy" segment
          ],
          direction: 'horizontal',
          gradientDirection: 'horizontal',
          height: 300,
          width: 800
      };
  }
}

Options

Option	Description	Type	Required	Options	Default	Example
width	Width of the funnel graph	number	Yes		0	800
height	Height of the funnel graph	number	Yes		0	300
labels	Title of each data part	array	Yes			['Impressions', 'Add To Cart', 'Buy']
values	Numbers that the funnel chart visualizes	array	Yes			[12000, 4700, 930]
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 (: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'
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'
animated	Whether any change in graph shape will be displayed with a smooth transition	boolean	No	true, false	true	false
displayPercentage (:display-percentage)	Whether to display the automatically calculated percentage values below the labels	boolean	No	true, false	true

vue-funnel-graph-js's Issues

Error: Can't resolve '@tweenjs/tween.js' on version 0.1.6

Version: "vue-funnel-graph-js": "^0.1.6",
Vue Version : 2.6.0
sass-loader: "^7.3.1",
node-sass: "^4.12.0",
Ive searched the web for the error and it was announced fixed but unfortunately I am facing this issue,

ERROR in ./node_modules/vue-funnel-graph-js/dist/vue-funnel-graph.esm.js
Module not found: Error: Can't resolve '@tweenjs/tween.js' in 'C:\wamp644\www\node_modules\vue-funnel-graph-js\dist'
 @ ./node_modules/vue-funnel-graph-js/dist/vue-funnel-graph.esm.js 2:0-38 158:20-25 164:29-34 166:24-29
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/assets/js/components/material/funnelitself.vue?vue&type=script&lang=js&
 @ ./resources/assets/js/components/material/funnelitself.vue?vue&type=script&lang=js&
 @ ./resources/assets/js/components/material/funnelitself.vue
 @ ./resources/assets/js/components sync \.vue$
 @ ./resources/assets/js/components/index.js
 @ ./resources/assets/js/main.js
 @ multi ./resources/assets/js/main.js

Removing @tweenjs/tween.js line will remove the animation But it will fix the issue , How can i fix this without removing tween ?

Also how can I show a line when every value is 0 , ATM it does NOT Show anything

getting console error for [0,0,0]

on initial value as [0, 0, 0]
getting console error : Error: AN is not supported
although empty chart is rendering properly

please check this sandbox's console: https://codesandbox.io/s/hopeful-violet-zhekem?file=/src/App.vue

Error in loading component

ERROR in ./node_modules/vue-funnel-graph-js/dist/vue-funnel-graph.esm.js
Module not found: Error: Can't resolve 'sass-loader' in '/src'
@ ./node_modules/vue-funnel-graph-js/dist/vue-funnel-graph.esm.js 6:0-44
@ ./src/main.js
@ multi babel-polyfill ./src/main.js webpack-hot-middleware/client
ERROR in ./node_modules/vue-funnel-graph-js/dist/vue-funnel-graph.esm.js
Module not found: Error: Can't resolve 'sass-loader' in '/src'
@ ./node_modules/vue-funnel-graph-js/dist/vue-funnel-graph.esm.js 7:0-45
@ ./src/main.js
@ multi babel-polyfill ./src/main.js webpack-hot-middleware/client

Invalid CSS after "...load the styles

After install I get the following:

Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" in \node_modules\funnel-graph-js\src\scss\theme.scss (line 1, column 1)

I was able to fix by commenting out the following in my build/utils.js:

scss: generateLoaders('sass'),

Is it possible to make the funnel look like a half funnel?

I want to be able to save space for my component, is it possible for it to look like this?

Thanks for anyone who can give me any suggestions! Testing out to just directly hack the SVG via CSS but I still would love to get input from anyone!

Direction doesn't change

Chart aways display in horizontal direction even when option is setted to vertical.

Code:

<script> import { VueFunnelGraph } from 'vue-funnel-graph-js'; export default{ components: { VueFunnelGraph }, data() { return { labels: ['Ativos', 'Prospects', 'Inativos'], subLabels: ['Direct', 'Social Media', 'Ads'], values: [ // 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', '#FF3C8E'], // color set for "Impressions" segment ['#A0BBFF', '#EC77FF'], // color set for "Add To Cart" segment ['#A0F9FF', '#7795FF'] // color set for "Buy" segment ], direction: 'vertical', gradientDirection: 'vertical', height: 300, width: 250 }; } } </script>

---

Other question:

There is a way to make the chart responsive?

---

Great job, its the most aestetic chart for sure, thanks

Full width

Is there an easy way to implement full width? Fixed width is not an option in this day and age.

Thank you for the great plugin!

How to use this in nuxt?

I have created a plugin vue-funnel-graph:
import Vue from 'vue'; import { VueFunnelGraph } from 'vue-funnel-graph-js'; Vue.use(VueFunnelGraph);

Then added into plugins array:
{ src: '~/plugins/vue-funnel-graph.js', ssr: false }

In console, it says:
[Vue warn]: Unknown custom element: <vue-funnel-graph> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Bug with vertical orientation + text color

Thanks for the component, amazing library indeed.

While trying to use it, I have found two problems. When making my code default to vertical direction the text overwrites the chart (as the picture below). The same happend when using the Toggle Direction button.

Also, I couldn't find information on how to change text colors - when using light backgrounds I lose both the legend and the numbers info.

Any ideas?
Thanks

Error using with CDN

I try to use the vue-funnel with CDN but I get this error:

 Uncaught ReferenceError: interpolate is not defined
    at vue-funnel-graph.min.js:1

How I fix it?

There is a way to re-render the graph according to width to the window to make it respnsive?

Error: No PostCSS Config found in: C:\Users\AAA\develope\voc-analysis\node_modules\funnel-graph-js\src\scss

import failed

please help me

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

error message

../node_modules/funnel-graph-js/src/scss/main.scss (./node_modules/css-loader??ref--7-oneOf-3-1!./node_modules/postcss-loader/src??ref--7-oneOf-3-2!./node_modules/sass-loader/lib/loader.js??ref--7-oneOf-3-3!../node_modules/funnel-graph-js/src/scss/main.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: No PostCSS Config found in: C:\Users\AAA\develope\voc-analysis\node_modules\funnel-graph-js\src\scss
    at config.search.then (C:\Users\AAA\develope\voc-analysis\front-end\node_modules\postcss-load-config\src\index.js:91:15)

[Vue3] Error: Cannot read property '_c' of undefined

app.js:51482 Uncaught (in promise) TypeError: Cannot read property '_c' of undefined
at Proxy.vue_render (app.js:51482)
at renderComponentRoot (app.js:8247)
at componentEffect (app.js:12250)
at reactiveEffect (app.js:6121)
at effect (app.js:6096)
at setupRenderEffect (app.js:12203)
at mountComponent (app.js:12162)
at processComponent (app.js:12120)
at patch (app.js:11735)
at mountChildren (app.js:11910)

SyntaxError: Unexpected token {

vue-funnel-graph-js Version : ^0.1.6
Vue Version : 2.6.10
Nuxt Version: ^2.0.0

I try to use this component with my nuxt project but project end up with the above error msg

[Improvements] Ability to remove the curves

Hi there, the curves could be a variable where the value 0 would make it with 0 curves and increasing would make it more round and round.

Or just a way to disable the curves.

Keep up the great work!

Can we switch from node-sass to sass?

I can't install the library, I've been solving one error after the other and they're all related to node-sass. I'm on Node 16 and this is the last error I got, first one was complaining that python2 didn't exist

npm ERR! code 1
npm ERR! path /Users/god/code/testi/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh /var/folders/bj/83wxx7kx22z4jg1zfzprpmrw0000gn/T/postinstall-d6d13986.sh
npm ERR! Building: /Users/god/.nvm/versions/node/v16.13.1/bin/node /Users/god/code/testi/node_modules/node-gyp/bin/node-TRUNCATED FOR BODY LENGTH LIMIT
npm ERR!             !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR!                                 ~~~~~^~~~~~~~~~~
npm ERR!                                      remove_cv
npm ERR! /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/usr/include/c++/v1/type_traits:715:50: note: 'remove_cv' declared here
npm ERR! template <class _Tp> struct _LIBCPP_TEMPLATE_VIS remove_cv
npm ERR!                                                  ^
npm ERR! 1 error generated.
npm ERR! make: *** [Release/obj.target/binding/src/binding.o] Error 1
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/Users/god/code/testi/node_modules/node-gyp/lib/build.js:262:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Darwin 21.6.0
npm ERR! gyp ERR! command "/Users/god/.nvm/versions/node/v16.13.1/bin/node" "/Users/god/code/testi/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /Users/god/code/testi/node_modules/node-sass
npm ERR! gyp ERR! node -v v16.13.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

.label__value not visible on white background

Hi.

Would be worth adding additional prop for setting color of .label__value, as now its invisible on white background without writing custom styling.
Also when going this way would be good to have prop for setting color of .label__title also.

Initial direction value

Hello,

I'm loving this component, but I've been struggling for quite a while trying to make the vertical direction work correctly. Maybe it's something I'm missing.

In my project, the props direction="vertical" is not working as a initial state

Changing the props later with external events works, but I wanted the graph to render vertically without the need of a button to set it up to vertical.

Setting direction vertical as a default prop makes the labels vertical, but not the graph

subLabelValue

Hey

I'm trying to set subLabelValue to 'raw' based on the funnel graph js docs but it doesn't seem to work,

Can this be added in?