Renyakun_vue_funnel NPM

VueFunnelGraph.js

npm GitHub GitHub last commit

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`