Socket
Socket
Sign inDemoInstall

d3-funnel

Package Overview
Dependencies
Maintainers
1
Versions
32
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

d3-funnel - npm Package Compare versions

Comparing version 0.8.0 to 1.0.0

changes.md
webpack.test.config.js

11

CHANGELOG.md

@@ -0,1 +1,12 @@

## v1.0.0 (August 2, 2016)
This release breaks major backwards compatibility by upgrading D3 3.x to
D3 4.x. Refer to D3's [changes documentation](d3-changes) for more info.
### Behavior Changes
* [#62]: Upgrade D3 3.x to 4.x
[d3-changes]: https://github.com/d3/d3/blob/master/CHANGES.md
## v0.8.0 (July 21, 2016)

@@ -2,0 +13,0 @@

4

examples/examples.js

@@ -1,2 +0,2 @@

/* global D3Funnel, $ */
/* global D3Funnel */

@@ -180,3 +180,3 @@ const data = {

// Otherwise, just use the regular data
if (options[index][1].hasOwnProperty('isInverted')) {
if ('isInverted' in options[index][1]) {
chart.draw(options[index][0].reverse(), options[index][1]);

@@ -183,0 +183,0 @@ } else {

3

gulpfile.js

@@ -9,2 +9,3 @@ const gulp = require('gulp');

const webpackConfig = require('./webpack.config.js');
const testWebpackConfig = require('./webpack.test.config.js');
const pkg = require('./package.json');

@@ -23,3 +24,3 @@

gulp.src(['./test/index.js'])
.pipe(webpack(webpackConfig))
.pipe(webpack(testWebpackConfig))
.pipe(gulp.dest('./test/compiled/'))

@@ -26,0 +27,0 @@ );

22

package.json
{
"name": "d3-funnel",
"version": "0.8.0",
"version": "1.0.0",
"description": "A library for rendering SVG funnel charts using D3.js",

@@ -21,15 +21,15 @@ "author": "Jake Zatecky",

"chai-spies": "^0.7.1",
"eslint": "^2.2.0",
"eslint-config-airbnb": "^8.0.0",
"eslint-plugin-import": "^1.6.1",
"eslint-plugin-jsx-a11y": "^1.0.4",
"eslint-plugin-react": "^5.0.1",
"eslint": "^3.2.2",
"eslint-config-airbnb": "^10.0.0",
"eslint-plugin-import": "^1.12.0",
"eslint-plugin-jsx-a11y": "^2.0.1",
"eslint-plugin-react": "^6.0.0",
"gulp": "^3.9.0",
"gulp-eslint": "^2.0.0",
"gulp-eslint": "^3.0.1",
"gulp-header": "^1.7.1",
"gulp-mocha-phantomjs": "^0.11.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.4.2",
"gulp-uglify": "^2.0.0",
"lodash": "^4.0.0",
"mocha": "^2.3.3",
"mocha": "^3.0.0",
"webpack": "^1.13.0",

@@ -39,4 +39,6 @@ "webpack-stream": "^3.0.0"

"dependencies": {
"d3": "^3.5.6"
"d3": "^4.2.0",
"d3-selection": "^1.0.1",
"d3-selection-multi": "^1.0.0"
}
}

16

README.md

@@ -18,6 +18,6 @@ # D3 Funnel

To install this library, simply include both [D3.js][d3] and D3Funnel:
To install this library, simply include both [D3.js v4.x][d3] and D3Funnel:
``` html
<script src="/path/to/d3.min.js"></script>
<script src="/path/to/d3.v4.js"></script>
<script src="/path/to/dist/d3-funnel.js"></script>

@@ -80,3 +80,3 @@ ```

| `block.barOverlay` | Whether the blocks have bar chart overlays proportional to its weight. | bool | `false` |
| `block.fill.scale` | The background color scale as an array or function. | mixed | `d3.scale.category10()` |
| `block.fill.scale` | The background color scale as an array or function. | mixed | `d3.schemeCategory10` |
| `block.fill.type` | Either `'solid'` or `'gradient'`. | string | `'solid'` |

@@ -135,3 +135,3 @@ | `block.minHeight` | The minimum pixel height of a block. | number | `0` |

You may wish to override the default chart options. For example, you may wish
for every funnel to have proportional heights. To do this, simplify modify the
for every funnel to have proportional heights. To do this, simply modify the
`D3Funnel.defaults` property:

@@ -164,5 +164,5 @@

| Method | Description |
| ---------------- | --------------------------------------------------------------------------- |
| `destroy()` | Removes the funnel and its events from the DOM. |
| Method | Description |
| ----------- | ----------------------------------------------- |
| `destroy()` | Removes the funnel and its events from the DOM. |

@@ -180,3 +180,3 @@ ## Advanced Data

['Azure', 1500, '#007fff', '#07fff0'],
// Background ---^ ^--- Label
// Background ---^ ^--- Label
];

@@ -183,0 +183,0 @@ ```

6

src/d3-funnel/Colorizer.js

@@ -145,8 +145,8 @@ class Colorizer {

const R = f >> 16;
const G = f >> 8 & 0x00FF;
const G = (f >> 8) & 0x00FF;
const B = f & 0x0000FF;
const converted = 0x1000000 +
(Math.round((t - R) * p) + R) * 0x10000 +
(Math.round((t - G) * p) + G) * 0x100 +
((Math.round((t - R) * p) + R) * 0x10000) +
((Math.round((t - G) * p) + G) * 0x100) +
(Math.round((t - B) * p) + B);

@@ -153,0 +153,0 @@

61

src/d3-funnel/D3Funnel.js

@@ -1,2 +0,4 @@

import d3 from 'd3';
import { easeLinear, range, scaleOrdinal, schemeCategory10 } from 'd3';
import { select } from 'd3-selection';
import 'd3-selection-multi';

@@ -29,3 +31,3 @@ import Colorizer from './Colorizer';

fill: {
scale: d3.scale.category10().domain(d3.range(0, 10)),
scale: scaleOrdinal(schemeCategory10).domain(range(0, 10)),
type: 'solid',

@@ -75,3 +77,3 @@ },

destroy() {
const container = d3.select(this.selector);
const container = select(this.selector);

@@ -237,4 +239,4 @@ // D3's remove method appears to be sufficient for removing the events

return {
width: parseFloat(d3.select(this.selector).style('width')),
height: parseFloat(d3.select(this.selector).style('height')),
width: parseFloat(select(this.selector).style('width')),
height: parseFloat(select(this.selector).style('height')),
};

@@ -381,3 +383,4 @@ }

drawOntoDom() {
this.svg = d3.select(this.selector)// Add the SVG
// Add the SVG
this.svg = select(this.selector)
.append('svg')

@@ -471,3 +474,3 @@ .attr('id', this.id)

if (this.minHeight !== 0) {
totalHeight = this.height - this.minHeight * this.blocks.length;
totalHeight = this.height - (this.minHeight * this.blocks.length);
}

@@ -493,3 +496,3 @@

// iteration
const slope = 2 * slopeHeight / (this.width - this.bottomWidth);
const slope = (2 * slopeHeight) / (this.width - this.bottomWidth);

@@ -511,3 +514,3 @@ // Create the path definition for each funnel block

if (this.isCurved) {
dy = dy - (this.curveHeight / this.blocks.length);
dy -= this.curveHeight / this.blocks.length;
}

@@ -522,3 +525,3 @@

if (this.isInverted) {
nextLeftX = (prevHeight + dy - this.height) / (-1 * slope);
nextLeftX = ((prevHeight + dy) - this.height) / (-1 * slope);
}

@@ -647,3 +650,3 @@

const gradient = defs.append('linearGradient')
.attr({ id: this.colorizer.getGradientId(index) });
.attr('id', this.colorizer.getGradientId(index));

@@ -660,3 +663,3 @@ // Define the gradient stops

stops.forEach((stop) => {
gradient.append('stop').attr({
gradient.append('stop').attrs({
offset: `${stop[0]}%`,

@@ -689,3 +692,3 @@ style: `stop-color: ${stop[1]}`,

const paths = blockPaths[0];
const topCurve = paths[1][1] + this.curveHeight - 10;
const topCurve = paths[1][1] + (this.curveHeight - 10);

@@ -747,6 +750,6 @@ const path = this.navigator.plot([

.duration(this.animation)
.ease('linear')
.ease(easeLinear)
.attr('fill', pathColor)
.attr('d', this.getPathDefinition(index))
.each('end', () => {
.on('end', () => {
this.drawBlock(index + 1);

@@ -767,3 +770,3 @@ });

.duration(this.animation)
.ease('linear')
.ease(easeLinear)
.attr('fill', this.blocks[index].fill.actual)

@@ -933,7 +936,9 @@ .attr('d', this.getOverlayPathDefinition(index));

* @param {Object} data
* @param {Number} groupIndex
* @param {Array} nodes
*
* @return {void}
*/
onMouseOver(data) {
const children = d3.event.target.parentElement.childNodes;
onMouseOver(data, groupIndex, nodes) {
const children = nodes[0].parentElement.childNodes;

@@ -948,5 +953,5 @@ for (let i = 0; i < children.length; i++) {

if (type === 'foreground') {
d3.select(node).attr('fill', this.colorizer.shade(data.fill.raw, -0.5));
select(node).attr('fill', this.colorizer.shade(data.fill.raw, -0.5));
} else {
d3.select(node).attr('fill', this.colorizer.shade(data.fill.raw, -0.2));
select(node).attr('fill', this.colorizer.shade(data.fill.raw, -0.2));
}

@@ -959,7 +964,9 @@ }

* @param {Object} data
* @param {Number} groupIndex
* @param {Array} nodes
*
* @return {void}
*/
onMouseOut(data) {
const children = d3.event.target.parentElement.childNodes;
onMouseOut(data, groupIndex, nodes) {
const children = nodes[0].parentElement.childNodes;

@@ -975,5 +982,5 @@ for (let i = 0; i < children.length; i++) {

const backgroundColor = this.colorizer.shade(data.fill.raw, 0.3);
d3.select(node).attr('fill', backgroundColor);
select(node).attr('fill', backgroundColor);
} else {
d3.select(node).attr('fill', data.fill.actual);
select(node).attr('fill', data.fill.actual);
}

@@ -1000,3 +1007,3 @@ }

const text = group.append('text')
.attr({
.attrs({
x,

@@ -1040,3 +1047,3 @@ y,

text.append('tspan').attr({ x, dy }).text(line);
text.append('tspan').attrs({ x, dy }).text(line);
});

@@ -1055,3 +1062,3 @@ }

if (this.isCurved) {
return (paths[2][1] + paths[3][1]) / 2 + (this.curveHeight / this.blocks.length);
return ((paths[2][1] + paths[3][1]) / 2) + (this.curveHeight / this.blocks.length);
}

@@ -1058,0 +1065,0 @@

9

src/d3-funnel/LabelFormatter.js

@@ -68,5 +68,8 @@ class LabelFormatter {

return this.expression
.split('{l}').join(label)
.split('{v}').join(value)
.split('{f}').join(formatted);
.split('{l}')
.join(label)
.split('{v}')
.join(value)
.split('{f}')
.join(formatted);
}

@@ -73,0 +76,0 @@

14

src/d3-funnel/Navigator.js

@@ -64,3 +64,3 @@ class Navigator {

x: centerX,
y: prevHeight + curveHeight - 10,
y: prevHeight + (curveHeight - 10),
},

@@ -161,3 +161,3 @@ p02: {

getLinearInterpolation(p0, p1, t, axis) {
return p0[axis] + t * (p1[axis] - p0[axis]);
return p0[axis] + (t * (p1[axis] - p0[axis]));
}

@@ -175,5 +175,5 @@

getQuadraticInterpolation(p0, p1, p2, t, axis) {
return Math.pow(1 - t, 2) * p0[axis] +
2 * (1 - t) * t * p1[axis] +
Math.pow(t, 2) * p2[axis];
return (Math.pow(1 - t, 2) * p0[axis]) +
(2 * (1 - t) * t * p1[axis]) +
(Math.pow(t, 2) * p2[axis]);
}

@@ -205,4 +205,4 @@

const lengthBtm = (nextRightX - nextLeftX);
let rightSideTop = lengthTop * (ratio || 0) + prevLeftX;
let rightSideBtm = lengthBtm * (ratio || 0) + nextLeftX;
let rightSideTop = (lengthTop * (ratio || 0)) + prevLeftX;
let rightSideBtm = (lengthBtm * (ratio || 0)) + nextLeftX;

@@ -209,0 +209,0 @@ // Overlay should not be longer than the max length of the path

94

test/d3-funnel/D3Funnel.js
import _ from 'lodash';
import d3 from 'd3';
import * as d3 from 'd3';
import { scaleOrdinal, schemeCategory10 } from 'd3-scale';
import chai from 'chai';

@@ -90,3 +91,3 @@ import spies from 'chai-spies';

assert.equal(1, getSvg()[0].length);
assert.equal(1, getSvg().nodes().length);
});

@@ -97,3 +98,3 @@

assert.equal(1, getSvg()[0].length);
assert.equal(1, getSvg().nodes().length);
});

@@ -141,3 +142,3 @@

assert.equal(4, getSvg().selectAll('path')[0].length);
assert.equal(4, getSvg().selectAll('path').nodes().length);
});

@@ -152,3 +153,3 @@

const texts = getSvg().selectAll('text')[0];
const texts = getSvg().selectAll('text').nodes();

@@ -168,4 +169,4 @@ assert.equal('Node A: One', d3.select(texts[0]).text());

const paths = getSvg().selectAll('path')[0];
const colorScale = d3.scale.category10().domain(d3.range(0, 10));
const paths = getSvg().selectAll('path').nodes();
const colorScale = scaleOrdinal(schemeCategory10).domain(d3.range(0, 10));

@@ -186,3 +187,3 @@ assert.equal('#111', d3.select(paths[0]).attr('fill'));

const texts = getSvg().selectAll('text')[0];
const texts = getSvg().selectAll('text').nodes();

@@ -261,3 +262,3 @@ assert.equal('#111', d3.select(texts[0]).attr('fill'));

assert.equal(0, getSvg()[0].length);
assert.equal(0, getSvg().nodes().length);
});

@@ -375,6 +376,6 @@ });

const paths = d3.selectAll('path');
const paths = d3.selectAll('path').nodes();
assert.equal(150, paths[0][1].getBBox().width);
assert.equal(150, paths[0][2].getBBox().width);
assert.equal(150, paths[1].getBBox().width);
assert.equal(150, paths[2].getBBox().width);
});

@@ -395,6 +396,6 @@ });

const paths = d3.selectAll('path');
const paths = d3.selectAll('path').nodes();
assert.equal(200, getPathTopWidth(d3.select(paths[0][0])));
assert.equal(100, getPathBottomWidth(d3.select(paths[0][1])));
assert.equal(200, getPathTopWidth(d3.select(paths[0])));
assert.equal(100, getPathBottomWidth(d3.select(paths[1])));
});

@@ -414,6 +415,6 @@

const paths = d3.selectAll('path');
const paths = d3.selectAll('path').nodes();
assert.equal(100, getPathTopWidth(d3.select(paths[0][0])));
assert.equal(200, getPathBottomWidth(d3.select(paths[0][1])));
assert.equal(100, getPathTopWidth(d3.select(paths[0])));
assert.equal(200, getPathBottomWidth(d3.select(paths[1])));
});

@@ -432,3 +433,3 @@ });

assert.equal(2, d3.selectAll('#funnel path')[0].length);
assert.equal(2, d3.selectAll('#funnel path').nodes().length);
});

@@ -445,9 +446,9 @@

const paths = d3.selectAll('#funnel path');
const paths = d3.selectAll('#funnel path').nodes();
const quadraticPaths = paths.filter(function () { // eslint-disable-line func-names
return d3.select(this).attr('d').indexOf('Q') > -1;
});
const quadraticPaths = paths.filter((path) =>
d3.select(path).attr('d').indexOf('Q') > -1
);
assert.equal(paths[0].length, quadraticPaths[0].length);
assert.equal(paths.length, quadraticPaths.length);
});

@@ -467,3 +468,3 @@ });

const paths = d3.selectAll('#funnel path')[0];
const paths = d3.selectAll('#funnel path').nodes();

@@ -487,3 +488,3 @@ assert.equal(150, getPathHeight(d3.select(paths[0])));

const paths = d3.selectAll('#funnel path')[0];
const paths = d3.selectAll('#funnel path').nodes();

@@ -511,3 +512,3 @@ assert.equal(100, parseInt(getPathHeight(d3.select(paths[0])), 10));

const paths = d3.selectAll('#funnel path')[0];
const paths = d3.selectAll('#funnel path').nodes();

@@ -549,3 +550,3 @@ assert.equal(-1, d3.select(paths[3]).attr('d').indexOf('NaN'));

const paths = d3.selectAll('#funnel path')[0];
const paths = d3.selectAll('#funnel path').nodes();

@@ -573,3 +574,3 @@ assert.equal(parseFloat(getPathTopWidth(d3.select(paths[0]))), 100);

const paths = d3.selectAll('#funnel path')[0];
const paths = d3.selectAll('#funnel path').nodes();

@@ -591,3 +592,3 @@ assert.equal(parseFloat(getPathTopWidth(d3.select(paths[3]))), 74);

const paths = d3.selectAll('#funnel path')[0];
const paths = d3.selectAll('#funnel path').nodes();

@@ -611,3 +612,3 @@ assert.equal(parseFloat(getPathTopWidth(d3.select(paths[0]))), 100);

const paths = d3.selectAll('#funnel path')[0];
const paths = d3.selectAll('#funnel path').nodes();

@@ -631,3 +632,3 @@ assert.equal(parseFloat(getPathTopWidth(d3.select(paths[0]))), 100);

// draw 2 path for each data point
assert.equal(4, d3.selectAll('#funnel path')[0].length);
assert.equal(4, d3.selectAll('#funnel path').nodes().length);
});

@@ -648,10 +649,11 @@

const paths = d3.selectAll('path');
const APathFullWidth = getPathTopWidth(d3.select(paths[0][0]));
const APathOverlayWidth = getPathTopWidth(d3.select(paths[0][1]));
const BPathFullWidth = getPathTopWidth(d3.select(paths[0][2]));
const BPathOverlayWidth = getPathTopWidth(d3.select(paths[0][3]));
const paths = d3.selectAll('path').nodes();
assert.equal(10, Math.round(APathOverlayWidth / APathFullWidth * 100));
assert.equal(20, Math.round(BPathOverlayWidth / BPathFullWidth * 100));
const APathFullWidth = getPathTopWidth(d3.select(paths[0]));
const APathOverlayWidth = getPathTopWidth(d3.select(paths[1]));
const BPathFullWidth = getPathTopWidth(d3.select(paths[2]));
const BPathOverlayWidth = getPathTopWidth(d3.select(paths[3]));
assert.equal(10, Math.round((APathOverlayWidth / APathFullWidth) * 100));
assert.equal(20, Math.round((BPathOverlayWidth / BPathFullWidth) * 100));
});

@@ -679,3 +681,3 @@ });

const paths = getSvg().selectAll('path')[0];
const paths = getSvg().selectAll('path').nodes();

@@ -698,3 +700,3 @@ assert.equal('#111', d3.select(paths[0]).attr('fill'));

const paths = getSvg().selectAll('path')[0];
const paths = getSvg().selectAll('path').nodes();

@@ -720,3 +722,3 @@ assert.equal('#111', d3.select(paths[0]).attr('fill'));

// https://bugs.webkit.org/show_bug.cgi?id=83438
assert.equal(1, d3.selectAll('#funnel defs #d3-funnel-chart-0-gradient-0')[0].length);
assert.equal(1, d3.selectAll('#funnel defs #d3-funnel-chart-0-gradient-0').nodes().length);

@@ -751,3 +753,3 @@ assert.equal('url(#d3-funnel-chart-0-gradient-0)', d3.select('#funnel path').attr('fill'));

const paths = d3.selectAll('#funnel path')[0];
const paths = d3.selectAll('#funnel path').nodes();

@@ -772,3 +774,3 @@ assert.isAbove(parseFloat(getPathHeight(d3.select(paths[0]))), 10);

const paths = d3.selectAll('#funnel path')[0];
const paths = d3.selectAll('#funnel path').nodes();

@@ -856,3 +858,3 @@ assert.isBelow(parseFloat(getPathHeight(d3.select(paths[0]))), 290);

const tspans = d3.selectAll('#funnel text tspan')[0];
const tspans = d3.selectAll('#funnel text tspan').nodes();

@@ -873,3 +875,3 @@ assert.equal('Node', d3.select(tspans[0]).text());

const tspans = d3.selectAll('#funnel text tspan')[0];
const tspans = d3.selectAll('#funnel text tspan').nodes();

@@ -876,0 +878,0 @@ assert.equal(-20, d3.select(tspans[0]).attr('dy'));

.eslintrc

Sorry, the diff of this file is not supported yet

dist/d3-funnel.js

Sorry, the diff of this file is too big to display

dist/d3-funnel.min.js

Sorry, the diff of this file is too big to display

examples/index.html

Sorry, the diff of this file is not supported yet

test/test.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc