DOCSEARCHbyAlgolia
Submit Docs

VueFunnelGraph.js

repository·master·Indexed 42 days ago

https://github.com/greghub/vue-funnel-graph-js

A Vue.js library for drawing animated SVG funnel graphs. Version 0.1.8 supports one-dimensional and two-dimensional segmented charts featuring gradients, labels, and percentage displays.

Tokens
1.8K
Snippets
6
Records
7
Agent score
52%

What's inside VueFunnelGraph.js

  1. How colors and gradients work in VueFunnelGraph

    master

    The colors prop determines the fill style of the graph segments:

    • Solid Color: Pass a string or an array with exactly one element.
    • Gradient Fill: Pass an array containing more than one element.
    • Two-Dimensional Charts: For 2D graphs (using subLabels), pass an array of arrays to provide a unique gradient or color set for each segment.

    If more segments are provided than colors, up to 10 extra segments will be filled with pre-defined solid colors.

  3. Use VueFunnelGraph in a Vue component

    master

    After installation, import the VueFunnelGraph component and register it in your Vue instance. You can then use the <vue-funnel-graph> component in your templates, passing data via props.

    <template>
  <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>
</template>

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

export default {
  components: {
    VueFunnelGraph
  },
  data() {
    return {
      width: 800,
      height: 300,
      labels: ['Impressions', 'Add To Cart', 'Buy'],
      subLabels: ['Direct', 'Social Media', 'Ads'],
      values: [
        [3000, 2500, 6500], // Segments of "Impressions"
        [3000, 1700, 1000], // Segments of "Add To Cart"
        [600,  200,  130]   // Segments of "Buy"
      ],
      colors: [
        ['#FFB178', '#FF3C8E'],
        ['#A0BBFF', '#EC77FF'],
        ['#A0F9FF', '#7795FF']
      ],
      direction: 'horizontal',
      gradientDirection: 'horizontal'
    };
  }
}
</script>

  4. Install VueFunnelGraph via Vue.use()

    master

    You can install the entire library as a Vue plugin. This will automatically register all available components globally in your Vue instance. This is the recommended way to use the library if you want all components to be available throughout your application without manual imports.

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

Vue.use(VueFunnelGraph);

  5. Configure VueFunnelGraph options

    master

    The following props are used to configure the funnel graph's appearance and data. Note that some props use kebab-case in templates (e.g., :sub-labels).

    | Option | Description | Type | Required | Options | Default |
|--------|-------------|------|----------|---------|---------|
| `width` | Width of the funnel graph | `number` | Yes | | 800 |
| `height` | Height of the funnel graph | `number` | Yes | | 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. | `array|string` | Yes | | [12000, 4700, 930] |
| `subLabels` (`:sub-labels`) | Title of each data segment | `array` | Yes for 2D | | ['Direct', 'Social Media', 'Ads'] |
| `direction` | Whether the chart is vertical or horizontal | `string` | No | 'vertical', 'horizontal' | 'horizontal' |
| `gradientDirection` (`:gradient-direction`) | Gradient direction (top to bottom or left to right) | `string` | No | 'vertical', 'horizontal' | 'horizontal' |
| `animated` | Smooth transitions for shape changes | `boolean` | No | | `false` |
| `displayPercentage` (`:display-percentage`) | Display calculated percentage values below labels | `boolean` | No | | `true` |

  7. Import individual components from VueFunnelGraph

    master

    If you prefer to avoid global registration and want to keep your bundle size smaller, you can import specific components directly. This allows you to register them locally within a specific Vue component.

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

export default {
  components: {
    FunnelGraph
  }
};