2 |
3 |
4 |
5 | SVG Funnel
6 |
7 |
8 |
9 |
10 |
29 |
30 |
31 |
36 |
37 |
38 |
83 |
84 |
85 |
--------------------------------------------------------------------------------
/examples/example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | SVG Funnel
6 |
7 |
8 |
9 |
10 |
39 |
40 |
41 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
143 |
144 |
145 |
--------------------------------------------------------------------------------
/examples/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greghub/funnel-graph-js/d8537ef1f26850d8db157fe972af3c04f3a3c9d1/examples/favicon.png
--------------------------------------------------------------------------------
/gulpfile.babel.js:
--------------------------------------------------------------------------------
1 | import gulp from 'gulp';
2 | import browserSync from 'browser-sync';
3 | import rename from 'gulp-rename';
4 | import sass from 'gulp-sass';
5 | import postcss from 'gulp-postcss';
6 | import cssnano from 'cssnano';
7 | import autoprefixer from 'autoprefixer';
8 | import eslint from 'gulp-eslint';
9 | import sasslint from 'gulp-sass-lint';
10 | import browserify from 'browserify';
11 | import babelify from 'babelify';
12 | import source from 'vinyl-source-stream';
13 | import streamify from 'gulp-streamify';
14 | import uglify from 'gulp-uglify';
15 |
16 | const server = browserSync.create();
17 |
18 | const styles = () => {
19 | const plugins = [autoprefixer(), cssnano()];
20 |
21 | return (
22 | gulp.src(['./src/scss/main.scss', './src/scss/theme.scss'])
23 | .pipe(sass().on('error', sass.logError))
24 | .pipe(gulp.dest('./dist/css'))
25 | .pipe(postcss(plugins))
26 | .pipe(rename({ suffix: '.min' }))
27 | .pipe(gulp.dest('./dist/css'))
28 | .pipe(server.stream())
29 | );
30 | };
31 |
32 | const scripts = () => browserify({
33 | entries: './index.js',
34 | standalone: 'FunnelGraph'
35 | }).transform(babelify, { presets: ['@babel/preset-env'] })
36 | .bundle()
37 | .pipe(source('funnel-graph.js'))
38 | .pipe(gulp.dest('dist/js'))
39 | .pipe(streamify(uglify()))
40 | .pipe(rename({ suffix: '.min' }))
41 | .pipe(gulp.dest('dist/js'))
42 | .pipe(server.stream());
43 |
44 | const scriptsLint = () => gulp.src('./src/js/*.js')
45 | .pipe(eslint())
46 | .pipe(eslint.format());
47 |
48 | const stylesLint = () => gulp.src('./src/scss/**/*.scss')
49 | .pipe(sasslint())
50 | .pipe(sasslint.format());
51 |
52 | const startServer = () => server.init({
53 | server: {
54 | baseDir: './'
55 | }
56 | });
57 |
58 | const watchHTML = () => gulp.watch('./*.html').on('change', server.reload);
59 | const watchScripts = () => gulp.watch('./src/js/*.js', gulp.series('scriptsLint', 'scripts'));
60 | const watchStyles = () => gulp.watch('./src/scss/**/*.scss', gulp.series('stylesLint', 'styles'));
61 |
62 | const compile = gulp.parallel(styles, scripts);
63 | const lint = gulp.parallel(scriptsLint, stylesLint);
64 | const serve = gulp.series(compile, startServer);
65 | const watch = gulp.series(lint, gulp.parallel(watchHTML, watchScripts, watchStyles));
66 | const defaultTasks = gulp.parallel(serve, watch);
67 |
68 | export {
69 | styles,
70 | scripts,
71 | scriptsLint,
72 | stylesLint,
73 | watchHTML,
74 | watchScripts,
75 | watchStyles,
76 | startServer,
77 | serve,
78 | watch,
79 | compile,
80 | lint
81 | };
82 |
83 | export default defaultTasks;
84 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./src/js/main').default;
2 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "funnel-graph-js",
3 | "version": "1.4.2",
4 | "description": "SVG Funnel Graph Javascript Library",
5 | "main": "main.js",
6 | "scripts": {
7 | "start": "gulp",
8 | "test": "nyc mocha --compilers js:babel-core/register"
9 | },
10 | "author": "Greg Hovanesyan",
11 | "license": "MIT",
12 | "repository": {
13 | "type": "git",
14 | "url": "https://github.com/greghub/funnel-graph-js.git"
15 | },
16 | "keywords": [
17 | "funnel",
18 | "chart",
19 | "graph",
20 | "funnel-chart",
21 | "funnel-graph",
22 | "svg-funnel-chart",
23 | "svg-funnel-graph"
24 | ],
25 | "browserslist": [
26 | "last 2 versions"
27 | ],
28 | "devDependencies": {
29 | "@babel/core": "^7.8.3",
30 | "@babel/preset-env": "^7.8.3",
31 | "@babel/register": "^7.8.3",
32 | "autoprefixer": "^9.7.4",
33 | "babel-cli": "^6.26.0",
34 | "babel-preset-env": "^1.2.0",
35 | "babelify": "^10.0.0",
36 | "browser-sync": "^2.26.7",
37 | "browserify": "^16.5.0",
38 | "chai": "^4.2.0",
39 | "cssnano": "^4.1.10",
40 | "eslint": "^5.16.0",
41 | "eslint-config-airbnb-base": "^13.2.0",
42 | "eslint-plugin-import": "^2.20.0",
43 | "eslint-plugin-prettier": "^3.1.2",
44 | "gulp": "^4.0.2",
45 | "gulp-babel": "^8.0.0",
46 | "gulp-eslint": "^5.0.0",
47 | "gulp-postcss": "^8.0.0",
48 | "gulp-rename": "^1.2.2",
49 | "gulp-sass": "^4.0.2",
50 | "gulp-sass-lint": "^1.4.0",
51 | "gulp-streamify": "^1.0.2",
52 | "gulp-uglify": "^3.0.2",
53 | "gulp-util": "^3.0.8",
54 | "mocha": "^5.2.0",
55 | "nyc": "^13.3.0",
56 | "vinyl-source-stream": "^2.0.0"
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/js/graph.js:
--------------------------------------------------------------------------------
1 | const setAttrs = (element, attributes) => {
2 | if (typeof attributes === 'object') {
3 | Object.keys(attributes).forEach((key) => {
4 | element.setAttribute(key, attributes[key]);
5 | });
6 | }
7 | };
8 |
9 | const removeAttrs = (element, ...attributes) => {
10 | attributes.forEach((attribute) => {
11 | element.removeAttribute(attribute);
12 | });
13 | };
14 |
15 | const createSVGElement = (element, container, attributes) => {
16 | const el = document.createElementNS('http://www.w3.org/2000/svg', element);
17 |
18 | if (typeof attributes === 'object') {
19 | setAttrs(el, attributes);
20 | }
21 |
22 | if (typeof container !== 'undefined') {
23 | container.appendChild(el);
24 | }
25 |
26 | return el;
27 | };
28 |
29 | const generateLegendBackground = (color, direction = 'horizontal') => {
30 | if (typeof color === 'string') {
31 | return `background-color: ${color}`;
32 | }
33 |
34 | if (color.length === 1) {
35 | return `background-color: ${color[0]}`;
36 | }
37 |
38 | return `background-image: linear-gradient(${direction === 'horizontal'
39 | ? 'to right, '
40 | : ''}${color.join(', ')})`;
41 | };
42 |
43 | const defaultColors = ['#FF4589', '#FF5050',
44 | '#05DF9D', '#4FF2FD',
45 | '#2D9CDB', '#A0BBFF',
46 | '#FFD76F', '#F2C94C',
47 | '#FF9A9A', '#FFB178'];
48 |
49 | const getDefaultColors = (number) => {
50 | const colors = [...defaultColors];
51 | const colorSet = [];
52 |
53 | for (let i = 0; i < number; i++) {
54 | // get a random color
55 | const index = Math.abs(Math.round(Math.random() * (colors.length - 1)));
56 | // push it to the list
57 | colorSet.push(colors[index]);
58 | // and remove it, so that it is not chosen again
59 | colors.splice(index, 1);
60 | }
61 | return colorSet;
62 | };
63 |
64 | /*
65 | Used in comparing existing values to value provided on update
66 | It is limited to comparing arrays on purpose
67 | Name is slightly unusual, in order not to be confused with Lodash method
68 | */
69 | const areEqual = (value, newValue) => {
70 | // If values are not of the same type
71 | const type = Object.prototype.toString.call(value);
72 | if (type !== Object.prototype.toString.call(newValue)) return false;
73 | if (type !== '[object Array]') return false;
74 |
75 | if (value.length !== newValue.length) return false;
76 |
77 | for (let i = 0; i < value.length; i++) {
78 | // if the it's a two dimensional array
79 | const currentType = Object.prototype.toString.call(value[i]);
80 | if (currentType !== Object.prototype.toString.call(newValue[i])) return false;
81 | if (currentType === '[object Array]') {
82 | // if row lengths are not equal then arrays are not equal
83 | if (value[i].length !== newValue[i].length) return false;
84 | // compare each element in the row
85 | for (let j = 0; j < value[i].length; j++) {
86 | if (value[i][j] !== newValue[i][j]) {
87 | return false;
88 | }
89 | }
90 | } else if (value[i] !== newValue[i]) {
91 | // if it's a one dimensional array element
92 | return false;
93 | }
94 | }
95 |
96 | return true;
97 | };
98 |
99 | export {
100 | generateLegendBackground, getDefaultColors, areEqual, createSVGElement, setAttrs, removeAttrs, defaultColors
101 | };
102 |
--------------------------------------------------------------------------------
/src/js/main.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-trailing-spaces */
2 | /* global HTMLElement */
3 | import { roundPoint, formatNumber } from './number';
4 | import { createPath, createVerticalPath } from './path';
5 | import {
6 | generateLegendBackground, getDefaultColors, createSVGElement, setAttrs, removeAttrs
7 | } from './graph';
8 | import generateRandomIdString from './random';
9 |
10 | class FunnelGraph {
11 | constructor(options) {
12 | this.containerSelector = options.container;
13 | this.gradientDirection = (options.gradientDirection && options.gradientDirection === 'vertical')
14 | ? 'vertical'
15 | : 'horizontal';
16 | this.direction = (options.direction && options.direction === 'vertical') ? 'vertical' : 'horizontal';
17 | this.labels = FunnelGraph.getLabels(options);
18 | this.subLabels = FunnelGraph.getSubLabels(options);
19 | this.values = FunnelGraph.getValues(options);
20 | this.percentages = this.createPercentages();
21 | this.colors = options.data.colors || getDefaultColors(this.is2d() ? this.getSubDataSize() : 2);
22 | this.displayPercent = options.displayPercent || false;
23 | this.data = options.data;
24 | this.height = options.height;
25 | this.width = options.width;
26 | this.subLabelValue = options.subLabelValue || 'percent';
27 | }
28 |
29 | /**
30 | An example of a two-dimensional funnel graph
31 | #0..................
32 | ...#1................
33 | ......
34 | #0********************#1** #2.........................#3 (A)
35 | *******************
36 | #2*************************#3 (B)
37 | #2+++++++++++++++++++++++++#3 (C)
38 | +++++++++++++++++++
39 | #0++++++++++++++++++++#1++ #2-------------------------#3 (D)
40 | ------
41 | ---#1----------------
42 | #0-----------------
43 | Main axis is the primary axis of the graph.
44 | In a horizontal graph it's the X axis, and Y is the cross axis.
45 | However we use the names "main" and "cross" axis,
46 | because in a vertical graph the primary axis is the Y axis
47 | and the cross axis is the X axis.
48 | First step of drawing the funnel graph is getting the coordinates of points,
49 | that are used when drawing the paths.
50 | There are 4 paths in the example above: A, B, C and D.
51 | Such funnel has 3 labels and 3 subLabels.
52 | This means that the main axis has 4 points (number of labels + 1)
53 | One the ASCII illustrated graph above, those points are illustrated with a # symbol.
54 | */
55 | getMainAxisPoints() {
56 | const size = this.getDataSize();
57 | const points = [];
58 | const fullDimension = this.isVertical() ? this.getHeight() : this.getWidth();
59 | for (let i = 0; i <= size; i++) {
60 | points.push(roundPoint(fullDimension * i / size));
61 | }
62 | return points;
63 | }
64 |
65 | getCrossAxisPoints() {
66 | const points = [];
67 | const fullDimension = this.getFullDimension();
68 | // get half of the graph container height or width, since funnel shape is symmetric
69 | // we use this when calculating the "A" shape
70 | const dimension = fullDimension / 2;
71 | if (this.is2d()) {
72 | const totalValues = this.getValues2d();
73 | const max = Math.max(...totalValues);
74 |
75 | // duplicate last value
76 | totalValues.push([...totalValues].pop());
77 | // get points for path "A"
78 | points.push(totalValues.map(value => roundPoint((max - value) / max * dimension)));
79 | // percentages with duplicated last value
80 | const percentagesFull = this.getPercentages2d();
81 | const pointsOfFirstPath = points[0];
82 |
83 | for (let i = 1; i < this.getSubDataSize(); i++) {
84 | const p = points[i - 1];
85 | const newPoints = [];
86 |
87 | for (let j = 0; j < this.getDataSize(); j++) {
88 | newPoints.push(roundPoint(
89 | // eslint-disable-next-line comma-dangle
90 | p[j] + (fullDimension - pointsOfFirstPath[j] * 2) * (percentagesFull[j][i - 1] / 100)
91 | ));
92 | }
93 |
94 | // duplicate the last value as points #2 and #3 have the same value on the cross axis
95 | newPoints.push([...newPoints].pop());
96 | points.push(newPoints);
97 | }
98 |
99 | // add points for path "D", that is simply the "inverted" path "A"
100 | points.push(pointsOfFirstPath.map(point => fullDimension - point));
101 | } else {
102 | // As you can see on the visualization above points #2 and #3 have the same cross axis coordinate
103 | // so we duplicate the last value
104 | const max = Math.max(...this.values);
105 | const values = [...this.values].concat([...this.values].pop());
106 | // if the graph is simple (not two-dimensional) then we have only paths "A" and "D"
107 | // which are symmetric. So we get the points for "A" and then get points for "D" by subtracting "A"
108 | // points from graph cross dimension length
109 | points.push(values.map(value => roundPoint((max - value) / max * dimension)));
110 | points.push(points[0].map(point => fullDimension - point));
111 | }
112 |
113 | return points;
114 | }
115 |
116 | getGraphType() {
117 | return this.values && this.values[0] instanceof Array ? '2d' : 'normal';
118 | }
119 |
120 | is2d() {
121 | return this.getGraphType() === '2d';
122 | }
123 |
124 | isVertical() {
125 | return this.direction === 'vertical';
126 | }
127 |
128 | getDataSize() {
129 | return this.values.length;
130 | }
131 |
132 | getSubDataSize() {
133 | return this.values[0].length;
134 | }
135 |
136 | getFullDimension() {
137 | return this.isVertical() ? this.getWidth() : this.getHeight();
138 | }
139 |
140 | static getSubLabels(options) {
141 | if (!options.data) {
142 | throw new Error('Data is missing');
143 | }
144 |
145 | const { data } = options;
146 |
147 | if (typeof data.subLabels === 'undefined') return [];
148 |
149 | return data.subLabels;
150 | }
151 |
152 | static getLabels(options) {
153 | if (!options.data) {
154 | throw new Error('Data is missing');
155 | }
156 |
157 | const { data } = options;
158 |
159 | if (typeof data.labels === 'undefined') return [];
160 |
161 | return data.labels;
162 | }
163 |
164 | addLabels() {
165 | const holder = document.createElement('div');
166 | holder.setAttribute('class', 'svg-funnel-js__labels');
167 |
168 | this.percentages.forEach((percentage, index) => {
169 | const labelElement = document.createElement('div');
170 | labelElement.setAttribute('class', `svg-funnel-js__label label-${index + 1}`);
171 |
172 | const title = document.createElement('div');
173 | title.setAttribute('class', 'label__title');
174 | title.textContent = this.labels[index] || '';
175 |
176 | const value = document.createElement('div');
177 | value.setAttribute('class', 'label__value');
178 |
179 | const valueNumber = this.is2d() ? this.getValues2d()[index] : this.values[index];
180 | value.textContent = formatNumber(valueNumber);
181 |
182 | const percentageValue = document.createElement('div');
183 | percentageValue.setAttribute('class', 'label__percentage');
184 | percentageValue.textContent = `${percentage.toString()}%`;
185 |
186 | labelElement.appendChild(value);
187 | labelElement.appendChild(title);
188 | if (this.displayPercent) {
189 | labelElement.appendChild(percentageValue);
190 | }
191 |
192 | if (this.is2d()) {
193 | const segmentPercentages = document.createElement('div');
194 | segmentPercentages.setAttribute('class', 'label__segment-percentages');
195 | let percentageList = '';
196 |
197 | const twoDimPercentages = this.getPercentages2d();
198 |
199 | this.subLabels.forEach((subLabel, j) => {
200 | const subLabelDisplayValue = this.subLabelValue === 'percent'
201 | ? `${twoDimPercentages[index][j]}%`
202 | : formatNumber(this.values[index][j]);
203 | percentageList += `- ${this.subLabels[j]}:
204 | ${subLabelDisplayValue}
205 |
`;
206 | });
207 | percentageList += '
';
208 | segmentPercentages.innerHTML = percentageList;
209 | labelElement.appendChild(segmentPercentages);
210 | }
211 |
212 | holder.appendChild(labelElement);
213 | });
214 |
215 | this.container.appendChild(holder);
216 | }
217 |
218 | addSubLabels() {
219 | if (this.subLabels) {
220 | const subLabelsHolder = document.createElement('div');
221 | subLabelsHolder.setAttribute('class', 'svg-funnel-js__subLabels');
222 |
223 | let subLabelsHTML = '';
224 |
225 | this.subLabels.forEach((subLabel, index) => {
226 | subLabelsHTML += `
227 |
229 |
${subLabel}
230 |
16 |
17 | FunnelGraph.js is also available as a Vue.js component: [Vue Funnel Graph](https://github.com/greghub/vue-funnel-graph-js)
18 |
19 | ## Table of Contents
20 |
21 | - [Installation](#installation)
22 | - [Usage](#usage)
23 | - [Options](#options)
24 | - [Methods](#methods)
25 |
26 | ## Installation
27 |
28 | You can get the code by installing the NPM package, loading files from a CDN or downloading the repo.
29 |
30 | #### NPM
31 |
32 | Run the following script to install:
33 | ```
34 | npm i funnel-graph-js
35 | ```
36 |
37 | #### CDN
38 |
39 | ```html
40 |
41 |
42 |
43 |
44 | ```
45 |
46 | #### Download
47 |
48 | Download the repo ZIP, add `funnel-graph.js` or `funnel-graph.min.js`, and `main.css` or `main.min.css`.
49 | Optionally add `theme.min.css` to include the styling for labels, legend etc.
50 | It is recommended to add the theme, to display the chart correctly.
51 |
52 | FunnelGraph.js is built in a way that most of the styling is controlled by theme file,
53 | so it is possible to adapt every element to your design. The chart is a SVG element and
54 | `colors` property of the options controls the colors of the chart.
55 |
56 | CSS:
57 | ```html
58 |
59 |
60 | ```
61 |
62 | JS:
63 | ```html
64 |
65 | ```
66 |
67 | ## Usage
68 |
69 | ```js
70 | var graph = new FunnelGraph({
71 | container: '.funnel',
72 | gradientDirection: 'horizontal',
73 | data: {...},
74 | displayPercent: true,
75 | direction: 'horizontal'
76 | });
77 |
78 | graph.draw();
79 | ```
80 |
81 | You can choose how you want to display your data on funnel graph.
82 | You can display exact numbers, you can display percentages or both.
83 | The library will generate percentages automatically,
84 | taking the largest number as 100% and then calculating
85 | other numbers as a fraction of the largest number.
86 | For example: 12000, 5700 and 360 will be displayed as 47.5% and 3%
87 | (100% is skipped in order to avoid redundancy).
88 |
89 | Provided values | 12000 | 5700 | 360 |
90 | |---------------|-------|-------|-----|
91 | Display values | 12,000 | 5,700 | 360 |
92 | Calculated percentages | | 47.5% | 3% |
93 |
94 | If you want to hide percentages you set `displayPercent` to `false`:
95 |
96 | ```js
97 | {
98 | displayPercent: false
99 | }
100 | ```
101 |
102 | You can also display a vertical funnel graph:
103 | ```js
104 | {
105 | direction: 'vertical'
106 | }
107 | ```
108 |
109 | If you want to add a solid color to your funnel:
110 | ```js
111 | {
112 | color: '#FF5500'
113 | }
114 | ```
115 |
116 | And if you want a gradient:
117 | ```js
118 | {
119 | color: ['orange', 'red']
120 | }
121 | ```
122 | An array containing only one color will have the same effect
123 | as passing a single color as a string.
124 |
125 | If you are using a gradient you can control the gradient direction using:
126 |
127 | ```js
128 | {
129 | gradientDirection: 'vertical' // defaults to 'horizontal'
130 | }
131 | ```
132 |
133 | There are 3 ways to define data for the funnel graph.
134 |
135 | The most simple way is do define a data array:
136 |
137 | ```js
138 | data: [12000, 5700, 360]
139 | ```
140 |
141 | this will create the data without any titles. However you can still display the values as percentages, as number or both.
142 |
143 | If you want to add labels to your numbers pass an array of labels to `data`.
144 |
145 | ```js
146 | data: {
147 | labels: ['Impressions', 'Add To Cart', 'Buy'],
148 | colors: ['orange', 'red'],
149 | values: [12000, 5700, 360]
150 | },
151 | ```
152 |
153 | That most explicit way to add data to the funnel graph.
154 |
155 |
156 | 
157 |
158 | If using one of those two ways, you can control the graph
159 | color using `colors` param. Otherwise, the default color will be used.
160 | And if you are using gradient as color, then you can control
161 | gradient direction with `gradientDirection` param.
162 | `colors` shall be passed inside `data`, while `gradientDirection` with other options.
163 |
164 | ```js
165 | data: {
166 | gradientDirection: 'horizontal'
167 | }
168 | ```
169 |
170 | Otherwise it defaults to horizontal (left to right).
171 |
172 | ## Two-dimensional funnel graph
173 |
174 | If you want to break down your data into more details,
175 | you can use two-dimensional svg funnel graph. It will
176 | generate a graph like this:
177 |
178 |