Socket
Socket
Sign inDemoInstall

d3-funnel

Package Overview
Dependencies
15
Maintainers
1
Versions
32
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.2.2 to 2.0.0

.browserslistrc
.github/dependabot.yml
.stylelintrc.yml
gh-deploy.sh
test/.eslintrc
test/index.html
test/test.js
yarn-error.log

10

CHANGELOG.md

@@ -0,1 +1,11 @@

## [v2.0.0](https://github.com/jakezatecky/d3-funnel/compare/v1.2.2...v2.0.0) (2021-06-04)
### Bug Fixes
* [#138]: Fix an issue with tooltip alignment in newer versions of Chrome
### Dependencies
* **Breaking**: Upgrade to using D3 v6 (changes `events.click.block(d)` to `events.click.block(event, d)`)
## [v1.2.2](https://github.com/jakezatecky/d3-funnel/compare/v1.2.1...v1.2.2) (2019-01-26)

@@ -2,0 +12,0 @@

2

examples/src/js/index.js

@@ -42,3 +42,3 @@ import { merge } from 'lodash';

click: {
block(d) {
block(event, d) {
alert(d.label.raw);

@@ -45,0 +45,0 @@ },

94

gulpfile.js

@@ -0,22 +1,26 @@

const autoprefixer = require('gulp-autoprefixer');
const browserSyncImport = require('browser-sync');
const cleanCss = require('gulp-clean-css');
const eslint = require('gulp-eslint');
const exec = require('gulp-exec');
const gulp = require('gulp');
const eslint = require('gulp-eslint');
const mocha = require('gulp-mocha-phantomjs');
const header = require('gulp-header');
const rename = require('gulp-rename');
const header = require('gulp-header');
const scsslint = require('gulp-scss-lint');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const styleLint = require('gulp-stylelint');
const sass = require('gulp-dart-sass');
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const browserSync = require('browser-sync').create();
const webpackConfig = require('./webpack.config.js');
const testWebpackConfig = require('./webpack.test.config.js');
const pkg = require('./package.json');
const testWebpackConfig = require('./webpack.test.config');
const webpackConfig = require('./webpack.config');
const banner = '/*! <%= pkg.name %> - v<%= pkg.version %> | <%= new Date().getFullYear() %> */\n';
const browserSync = browserSyncImport.create();
gulp.task('test-format', () => (
gulp.task('test-script-format', () => (
gulp.src([
'./examples/src/**/*.js',
'./src/**/*.js',
'./test/*.js',
'./test/d3-funnel/**/*.js',

@@ -30,3 +34,3 @@ './*.js',

gulp.task('compile-test', () => (
gulp.task('compile-test-script', () => (
gulp.src(['./test/index.js'])

@@ -37,16 +41,17 @@ .pipe(webpackStream(testWebpackConfig, webpack))

gulp.task('test-mocha', gulp.series('compile-test', () => (
gulp.src(['test/test.html'])
.pipe(mocha({ reporter: 'spec' }))
gulp.task('test-script-mocha', gulp.series('compile-test-script', () => (
gulp.src('./gulpfile.js')
.pipe(exec('npm run mocha'))
.pipe(exec.reporter())
)));
gulp.task('test', gulp.series('test-format', 'test-mocha'));
gulp.task('test-script', gulp.series(gulp.parallel('test-script-format', 'test-script-mocha')));
gulp.task('build', gulp.series('test', () => (
gulp.task('build-script', gulp.series('test-script', () => (
gulp.src(['./src/index.js'])
.pipe(webpackStream(webpackConfig, webpack))
.pipe(webpackStream({ ...webpackConfig, mode: 'none' }, webpack))
.pipe(gulp.dest('./dist/'))
)));
gulp.task('build-min', gulp.series('build', () => (
gulp.task('build-script-min', gulp.series('build-script', () => (
gulp.src(['./src/index.js'])

@@ -62,23 +67,45 @@ .pipe(webpackStream({

gulp.task('build-examples-style', () => (
gulp.src('./examples/src/scss/**/*.scss')
.pipe(scsslint())
.pipe(scsslint.failReporter())
gulp.task('build', gulp.series('build-script-min'));
function buildExamplesScript(mode = 'development') {
return gulp.src(['./examples/src/js/index.js'])
.pipe(webpackStream({ ...testWebpackConfig, mode }, webpack))
.pipe(gulp.dest('./examples/dist/'));
}
function buildExamplesStyle(minifyStyles = false) {
let stream = gulp.src('./examples/src/scss/**/*.scss')
.pipe(styleLint({
reporters: [
{ formatter: 'string', console: true },
],
}))
.pipe(sass({
outputStyle: 'expanded',
}).on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
}))
.pipe(gulp.dest('./examples/dist/css'))
.pipe(browserSync.stream())
));
.pipe(autoprefixer());
if (minifyStyles) {
stream = stream.pipe(cleanCss());
}
return stream.pipe(gulp.dest('./examples/dist'));
}
gulp.task('build-examples-script', () => (
gulp.src(['./examples/src/js/index.js'])
.pipe(webpackStream(testWebpackConfig, webpack))
.pipe(gulp.dest('./examples/dist/js'))
.pipe(browserSync.stream())
buildExamplesScript().pipe(browserSync.stream())
));
gulp.task('build-examples-script-prod', () => (
buildExamplesScript('production')
));
gulp.task('build-examples-style', () => (
buildExamplesStyle().pipe(browserSync.stream())
));
gulp.task('build-examples-style-prod', () => (
buildExamplesStyle(true)
));
gulp.task('build-examples-html', () => (

@@ -98,2 +125,3 @@ gulp.src('./examples/src/index.html')

gulp.task('default', gulp.series('build-min'));
gulp.task('default', gulp.series('build'));
gulp.task('build-gh-pages', gulp.parallel('build-examples-style-prod', 'build-examples-script-prod', 'build-examples-html'));

58

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

@@ -21,7 +21,12 @@ "author": "Jake Zatecky",

"scripts": {
"gh-deploy": "git subtree push --prefix examples/dist origin gh-pages",
"prepublishOnly": "gulp build"
"build": "gulp build",
"examples": "gulp examples",
"gh-deploy": "gulp build-gh-pages && bash ./gh-deploy.sh",
"prepublishOnly": "gulp build-script-min",
"mocha": "node test/test.js",
"test": "gulp test-script"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/eslint-parser": "^7.13.14",
"@babel/plugin-proposal-class-properties": "^7.0.0",

@@ -31,34 +36,39 @@ "@babel/preset-env": "^7.0.0",

"@babel/register": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.0",
"browser-sync": "^2.26.3",
"chai": "^4.0.1",
"chai-spies": "^1.0.0",
"d3": "^5.5.0",
"eslint": "^5.0.0",
"eslint-config-takiyon": "^0.3.1",
"eslint-import-resolver-webpack": "^0.11.0",
"d3": "^6.2.0",
"eslint": "^7.12.1",
"eslint-config-takiyon": "^1.0.0",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-plugin-import": "^2.7.0",
"gulp": "^4.0.0",
"gulp-autoprefixer": "^6.0.0",
"gulp-eslint": "^5.0.0",
"gulp-autoprefixer": "^8.0.0",
"gulp-clean-css": "^4.0.0",
"gulp-dart-sass": "^1.0.2",
"gulp-eslint": "^6.0.0",
"gulp-exec": "^5.0.0",
"gulp-header": "^2.0.1",
"gulp-mocha-phantomjs": "^0.12.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^4.0.1",
"gulp-scss-lint": "^1.0.0",
"gulp-rename": "^2.0.0",
"gulp-stylelint": "^13.0.0",
"jsdom": "^16.0.1",
"lodash": "^4.17.10",
"mocha": "^5.0.0",
"webpack": "^4.12.1",
"webpack-stream": "^5.1.1"
"mocha": "^8.2.0",
"playwright": "^1.5.2",
"sinon": "^11.1.1",
"stylelint": "^13.7.2",
"stylelint-config-takiyon": "^1.0.1",
"webpack": "^5.3.2",
"webpack-cli": "^4.1.0",
"webpack-stream": "^6.1.0"
},
"dependencies": {
"d3-array": "^2.0.3",
"d3-ease": "^1.0.5",
"d3-scale": "^2.1.2",
"d3-scale-chromatic": "^1.3.3",
"d3-selection": "^1.0.1",
"d3-selection-multi": "^1.0.0",
"shortid": "^2.2.6"
"d3-ease": "^2.0.0",
"d3-scale": "^3.0.0",
"d3-scale-chromatic": "^2.0.0",
"d3-selection": "^2.0.0",
"d3-transition": "^2.0.0",
"nanoid": "^3.1.16"
}
}

3

README.md

@@ -5,5 +5,2 @@ # d3-funnel

[![Build Status](https://img.shields.io/travis/jakezatecky/d3-funnel/master.svg?style=flat-square)](https://travis-ci.org/jakezatecky/d3-funnel)
[![Dependency Status](https://img.shields.io/david/jakezatecky/d3-funnel.svg?style=flat-square)](https://david-dm.org/jakezatecky/d3-funnel)
[![devDependency Status](https://david-dm.org/jakezatecky/d3-funnel/dev-status.svg?style=flat-square)](https://david-dm.org/jakezatecky/d3-funnel?type=dev)
[![Greenkeeper badge](https://badges.greenkeeper.io/jakezatecky/d3-funnel.svg?style=flat-square)](https://greenkeeper.io/)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/jakezatecky/d3-funnel/master/LICENSE.txt)

@@ -10,0 +7,0 @@

55

src/d3-funnel/D3Funnel.js

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

import shortid from 'shortid';
import { linear as easeLinear } from 'd3-ease/src/linear';

@@ -7,3 +6,4 @@ import range from 'd3-array/src/range';

import { select } from 'd3-selection';
import 'd3-selection-multi';
import 'd3-transition';
import { nanoid } from 'nanoid';

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

this.id = `d3-funnel-${shortid.generate()}`;
this.id = `d3-funnel-${nanoid()}`;

@@ -670,6 +670,5 @@ // Set labels

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

@@ -830,4 +829,4 @@ });

const containerY = rect.y + window.scrollY;
const isAbove = e.layerY - heightOffset < containerY;
const top = isAbove ? e.layerY + 5 : e.layerY - heightOffset;
const isAbove = e.pageY - heightOffset < containerY;
const top = isAbove ? e.pageY + 5 : e.pageY - heightOffset;

@@ -837,3 +836,3 @@ const styles = [

'position: absolute',
`left: ${e.layerX - (width / 2)}px`,
`left: ${e.pageX - (width / 2)}px`,
`top: ${top}px`,

@@ -989,13 +988,12 @@ `border: 1px solid ${block.fill.raw}`,

/**
* @param {Object} event
* @param {Object} data
* @param {Number} groupIndex
* @param {Array} nodes
*
* @return {void}
*/
onMouseOver(data, groupIndex, nodes) {
const children = nodes[0].parentElement.childNodes;
onMouseOver(event, data) {
const children = event.target.parentElement.childNodes;
// Highlight all paths within one block
[].slice.call(children).forEach((node) => {
[...children].forEach((node) => {
if (node.nodeName.toLowerCase() === 'path') {

@@ -1014,13 +1012,12 @@ const type = node.getAttribute('pathType') || '';

/**
* @param {Object} event
* @param {Object} data
* @param {Number} groupIndex
* @param {Array} nodes
*
* @return {void}
*/
onMouseOut(data, groupIndex, nodes) {
const children = nodes[0].parentElement.childNodes;
onMouseOut(event, data) {
const children = event.target.parentElement.childNodes;
// Restore original color for all paths of a block
[].slice.call(children).forEach((node) => {
[...children].forEach((node) => {
if (node.nodeName.toLowerCase() === 'path') {

@@ -1056,11 +1053,9 @@ const type = node.getAttribute('pathType') || '';

const text = group.append('text')
.attrs({
x,
y,
fill,
'font-size': this.settings.label.fontSize,
'text-anchor': 'middle',
'dominant-baseline': 'middle',
'pointer-events': 'none',
});
.attr('x', x)
.attr('y', y)
.attr('fill', fill)
.attr('font-size', this.settings.label.fontSize)
.attr('text-anchor', 'middle')
.attr('dominant-baseline', 'middle')
.attr('pointer-events', 'none');

@@ -1096,3 +1091,3 @@ // Add font-family, if exists

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

@@ -1099,0 +1094,0 @@ }

2

src/index.js
// Export default to provide support for non-ES6 solutions
module.exports = require('./d3-funnel/D3Funnel.js').default;
module.exports = require('./d3-funnel/D3Funnel').default;

22

test/d3-funnel/D3Funnel.js

@@ -10,3 +10,3 @@ import { cloneDeep } from 'lodash';

import chai from 'chai';
import spies from 'chai-spies';
import sinon from 'sinon';

@@ -16,3 +16,2 @@ import D3Funnel from '../../src/d3-funnel/D3Funnel';

const { assert } = chai;
chai.use(spies);

@@ -503,3 +502,3 @@ function getFunnel() {

const paths = selectAll('#funnel path').nodes();
const quadraticPaths = paths.filter(path => select(path).attr('d').indexOf('Q') > -1);
const quadraticPaths = paths.filter((path) => select(path).attr('d').indexOf('Q') > -1);

@@ -921,6 +920,3 @@ assert.equal(paths.length, quadraticPaths.length);

// Node.js does not have localization, so toLocaleString() will
// leave the value untouched
// https://github.com/joyent/node/issues/4689
assert.equal('Node 1000 1000', select('#funnel text').text());
assert.equal('Node 1000 1,000', select('#funnel text').text());
});

@@ -1027,3 +1023,3 @@

const spy = chai.spy();
const proxy = sinon.fake();

@@ -1033,4 +1029,4 @@ getFunnel().draw(getBasicData(), {

click: {
block: (d, i) => {
spy({
block: (e, d) => {
proxy({
index: d.index,

@@ -1040,3 +1036,3 @@ node: d.node,

value: d.value,
}, i);
});
},

@@ -1049,3 +1045,3 @@ },

chai.expect(spy).to.have.been.called.once.with({
assert.isTrue(proxy.calledWith({
index: 0,

@@ -1055,3 +1051,3 @@ node: select('#funnel path').node(),

value: 1000,
}, 0);
}));
});

@@ -1058,0 +1054,0 @@

7

test/index.js

@@ -5,8 +5,1 @@ import './d3-funnel/Colorizer';

import './d3-funnel/Utils';
/* eslint-disable no-restricted-properties */
// PhantomJS version appears to be old; might need an alternative testing mechanism
// https://github.com/alphasights/ember-scrollable/issues/27
Number.isNaN = value => typeof value === 'number' && window.isNaN(value);
Number.isFinite = value => typeof value === 'number' && window.isFinite(value);
/* eslint-enable no-restricted-properties */

8

webpack.config.js
module.exports = {
mode: 'none',
mode: 'production',
output: {
filename: 'd3-funnel.js',
libraryTarget: 'umd',
library: 'D3Funnel',
library: {
name: 'D3Funnel',
type: 'umd',
},
},

@@ -8,0 +10,0 @@ externals: {

8

webpack.test.config.js
const path = require('path');
module.exports = {
mode: 'none',
mode: 'development',
output: {
filename: 'index.js',
libraryTarget: 'umd',
library: 'D3Funnel',
library: {
name: 'D3Funnel',
type: 'umd',
},
},

@@ -10,0 +12,0 @@ resolve: {

.idea/markdown-navigator/profiles_settings.xml
.idea/workspace.xml
.scss-lint.yml
examples/dist/css/style.css
examples/dist/index.html
examples/dist/js/index.js
test/test.html
.eslintrc

Sorry, the diff of this file is not supported yet

.travis.yml

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/.eslintrc

Sorry, the diff of this file is not supported yet

examples/src/index.html

Sorry, the diff of this file is not supported yet

examples/src/scss/_cayman.scss

Sorry, the diff of this file is not supported yet

examples/src/scss/style.scss

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc