npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@nebula.js/sn-funnel-chart

v1.9.10

Published

A sequential chart visualizing a linear process with connected stages, for example a sales process with potential revenue at each stage.

Downloads

7,095

Readme

@nebula.js/sn-funnel-chart

The funnel chart lets you add a sequential chart showing the connected stages of a process. Each stage decreases and should contain a subset of the previous stage. The decrease is gradual, giving the chart an ever narrower funnel.

Requirements

Requires @nebula.js/stardust version 1.2.0 or later.

Installing

If you use npm: npm install @nebula.js/sn-funnel-chart. You can also load through the script tag directly from https://unpkg.com.

Usage

The example below shows the number of candidates during sequential stages of a recruitment process. The chart is plotted in width mode, where the quantity at each stage is proportional to the upper edge of the segment.


import { embed } from '@nebula.js/stardust';
import funnel from '@nebula.js/sn-funnel-chart';

// 'app' is an enigma app model
const nuked = embed(app, {
  types: [{ // register funnel chart
    name: 'funnel-chart',
    load: () => Promise.resolve(funnel);
  }]
});

// Rendering a simple funnel chart
nuked.render({
  element: document.querySelector('.funnel'),
  type: 'funnel-chart',
  fields: ['Hiring Stage', '=Sum(NumberOfCandidates)'],
  properties: {
    title: 'Recruitment Process',
  },
});

Funnel chart can represent anything that is decreasing in size, showing a process that starts at 100% and ends with a lower percentage. The funnel chart is the opposite to a pyramid graph, which has increasing stages instead of decreasing stages.

The chart requires one dimension and one measure. Unlike bar charts, funnel chart segments are centered to create a funnel shape.

More examples

Area mode

You can configure the funnel chart so that the area of each item is proportional to the measure.

// Rendering a funnel chart in area mode
nuked.render({
  element: document.querySelector('.funnel'),
  type: 'funnel-chart',
  fields: ['Hiring Stage', '=Sum(NumberOfCandidates)'],
  properties: {
    title: 'Recruitment Process',
    funnel: {
      mode: 'AREA',
    },
  },
});

Height mode

The height of each item is proportional to the measure.

// Rendering a funnel chart in height mode
nuked.render({
  element: document.querySelector('.funnel'),
  type: 'funnel-chart',
  fields: ['Hiring Stage', '=Sum(NumberOfCandidates)'],
  properties: {
    title: 'Recruitment Process',
    funnel: {
      mode: 'HEIGHT',
    },
  },
});

Ordering mode

Only order matters, the items have the same height, ordered from top to bottom.

// Rendering a funnel chart in order mode
nuked.render({
  element: document.querySelector('.funnel'),
  type: 'funnel-chart',
  fields: ['Hiring Stage', '=Sum(NumberOfCandidates)'],
  properties: {
    title: 'Recruitment Process',
    funnel: {
      mode: 'ORDER',
    },
  },
});

More configurations

You can also remove the dimension title, show the actual number of candidates instead of the percentage, or color the stages by measure.

// Rendering a funnel chart with customized look
nuked.render({
  element: document.querySelector('.funnel'),
  type: 'funnel-chart',

  // Defines the fields in `properties`
  properties: {
    title: 'Recruitment Process',

    // Hide dimension title
    showDimensionTitle: false,

    qHyperCubeDef: {
      qDimensions: [
        {
          qDef: { qFieldDefs: ['Hiring Stage'] },

          // Color the dimension by `MedianRequestedSalary`
          qAttributeExpressions: [
            {
              qExpression: 'Avg(MedianRequestedSalary)',
              id: 'colorByAlternative',
            },
          ],
        },
      ],
      qMeasures: [
        {
          qDef: { qDef: 'Sum(NumberOfCandidates)' },
        },
      ],
      qInterColumnSortOrder: [1, 0],
      qInitialDataFetch: [
        {
          qLeft: 0,
          qTop: 0,
          qWidth: 2,
          qHeight: 5000,
        },
      ],
    },

    // Show actual number of candidates instead of percentage
    dataPoint: {
      auto: false,
      labelMode: 'value',
    },

    // Configure color
    color: {
      auto: false,
      byMeasureDef: {
        key: 'Avg(MedianRequestedSalary)',
        type: 'expression',
      },
      measureScheme: 'dg',
      mode: 'byMeasure',
      reverseScheme: true,
    },
  },
});

Funnel chart plugins

A plugin can be passed into a funnel chart to add or modify its capability or visual appearance. A plugin needs to be defined before it can be rendered together with the chart.

// Step 1: define the plugin

// Modifying the look of the dimension title
const dimensionTitlePlugin = {
  info: {
    name: 'dimension-title-plugin',
    type: 'component-definition',
  },
  fn: ({ keys, layout }) => {
    const componentDefinition = {
      type: 'text',

      // Provide the same name as the exisiting component to override it
      key: keys.COMPONENT.DIMENSION_TITLE,
      text: 'The percentage of candidates remain after each hiring stage',
      layout: {
        dock: 'bottom',
      },
    };
    return componentDefinition;
  },
};

// Step 2: passing the plugin definition into the render function

// Render a funnel chart with plugins
nuked.render({
  element: document.querySelector('#object'),
  type: 'sn-funnel-chart',
  plugins: [dimensionTitlePlugin],
  fields: ['Hiring Stage', '=Sum(NumberOfCandidates)'],
  properties: {
    title: 'Recruitment Process',
  },
});

The plugin definition is an object, with two properties info and fn. The fn returns a picasso.js component. To build this component, some important chart internals are passed into the argument object of fn.

// Structure of the argument object of fn
const pluginArgs = {
  layout,
  keys: {
    SCALE: { FILL },
    COMPONENT: { FUNNEL, FUNNEL_LABELS, DIMENSION_TITLE },
  },
};

With plugins, you can either add new components or modify existing components of the funnel chart.

Modify existing components

As an example, the positions and the appearance of the funnel labels can be modified by plugins.

To overide an existing component, fn should returns a picasso.js component that has the same key as the existing component (keys.COMPONENT.FUNNEL_LABELS in this example)

// Modifying the look of the funnel labels
const funnelLabelsPlugin = {
  info: {
    name: 'funnel-labels-plugin',
    type: 'component-definition',
  },
  fn: ({ keys, layout }) => {
    const componentDefinition = {
      type: 'labels',

      // Provide the same name as the exisiting component to override it
      key: keys.COMPONENT.FUNNEL_LABELS,
      layout: { displayOrder: 2 },
      settings: {
        sources: [
          {
            component: keys.COMPONENT.FUNNEL,
            selector: '.labelLeft',
            strategy: {
              type: 'rows',
              settings: { align: 0, fill: 'gray', fontSize: '15px' },
            },
          },
          {
            component: keys.COMPONENT.FUNNEL,
            selector: '.labelCenter',
            strategy: {
              type: 'rows',
              settings: { align: 0.5, fill: 'darkred', fontSize: '15px' },
            },
          },
        ],
      },
    };
    return componentDefinition;
  },
};

Add new components

The new component can be a standard Picasso component or a custom Picasso component. The code for adding a new component is similar to that for modifying an existing component, the only difference is that the key should be different from that of any of the existing components.

Plugins disclaimer

  • The plugins API is still experimental.
  • We can not guarantee our charts to be compatible with all different settings, especially when modifying existing components.