d3-funnel - npm Package Compare versions

Comparing version 0.7.4 to 0.7.5

CHANGELOG.md

@@ -0,4 +1,10 @@
+## v0.7.5 (December 19, 2015)
+
+### New Features
+
+* [#44]: Pass DOM node to event data
+
 ## v0.7.4 (December 11, 2015)
 
-## Build Changes
+### Build Changes
 
@@ -5,0 +11,0 @@ * [#42]: Use ES6 imports and exports in source files

dist/d3-funnel.js

@@ -341,4 +341,4 @@ (function webpackUniversalModuleDefinition(root, factory) {
 						index: index,
+						ratio: ratio,
 						value: count,
-						ratio: ratio,
 						height: _this2.height * ratio,
@@ -632,2 +632,4 @@ fill: _this2.colorizer.getBlockFill(block, index, _this2.fillType),
 			value: function _defineColorGradients(svg) {
+				var _this4 = this;
+
 				var defs = svg.append('defs');
@@ -638,3 +640,3 @@
 					var color = block.fill.raw;
-					var shade = _colorizer2.default.shade(color, -0.2);
+					var shade = _this4.colorizer.shade(color, -0.2);
 
@@ -687,3 +689,3 @@ // Create linear gradient
 				// Draw top oval
-				svg.append('path').attr('fill', _colorizer2.default.shade(this.blocks[0].fill.raw, -0.4)).attr('d', path);
+				svg.append('path').attr('fill', this.colorizer.shade(this.blocks[0].fill.raw, -0.4)).attr('d', path);
 			}
@@ -702,3 +704,3 @@
 			value: function _drawBlock(index) {
-				var _this4 = this;
+				var _this5 = this;
 
@@ -714,8 +716,10 @@ if (index === this.blocks.length) {
 				var path = this._getBlockPath(group, index);
-				path.data(this._getD3Data(index));
 
+				// Attach data to the element
+				this._attachData(path, this.blocks[index]);
+
 				// Add animation components
 				if (this.animation !== 0) {
 					path.transition().duration(this.animation).ease('linear').attr('fill', this.blocks[index].fill.actual).attr('d', this._getPathDefinition(index)).each('end', function () {
-						_this4._drawBlock(index + 1);
+						_this5._drawBlock(index + 1);
 					});
@@ -729,3 +733,3 @@ } else {
 				if (this.hoverEffects) {
-					path.on('mouseover', this._onMouseOver).on('mouseout', this._onMouseOut);
+					path.on('mouseover', this._onMouseOver.bind(this)).on('mouseout', this._onMouseOut.bind(this));
 				}
@@ -797,13 +801,16 @@
 			/**
-	   * Return d3 formatted data for the given block.
+	   * Attach data to the target element. Also attach the current node to the
+	   * data object.
 	   *
-	   * @param {int} index
+	   * @param {Object} element
 	   *
-	   * @return {Array}
+	   * @return {void}
 	   */
 
 		}, {
-			key: '_getD3Data',
-			value: function _getD3Data(index) {
-				return [this.blocks[index]];
+			key: '_attachData',
+			value: function _attachData(element, data) {
+				data.node = element.node();
+
+				element.data([data]);
 			}
@@ -838,3 +845,3 @@
 			value: function _onMouseOver(data) {
-				_d2.default.select(this).attr('fill', _colorizer2.default.shade(data.fill.raw, -0.2));
+				_d2.default.select(_d2.default.event.target).attr('fill', this.colorizer.shade(data.fill.raw, -0.2));
 			}
@@ -851,3 +858,3 @@
 			value: function _onMouseOut(data) {
-				_d2.default.select(this).attr('fill', data.fill.actual);
+				_d2.default.select(_d2.default.event.target).attr('fill', data.fill.actual);
 			}
@@ -873,7 +880,7 @@
 				group.append('text').text(text).attr({
-					'x': x,
-					'y': y,
+					x: x,
+					y: y,
+					fill: fill,
 					'text-anchor': 'middle',
 					'dominant-baseline': 'middle',
-					'fill': fill,
 					'pointer-events': 'none'
@@ -1091,3 +1098,3 @@ }).style('font-size', this.label.fontSize);
 
-		}], [{
+		}, {
 			key: 'shade',
@@ -1098,3 +1105,3 @@ value: function shade(color, _shade) {
 				if (hex.length === 3) {
-					hex = Colorizer.expandHex(hex);
+					hex = this.expandHex(hex);
 				}
@@ -1101,0 +1108,0 @@

dist/d3-funnel.min.js

@@ -1,2 +0,2 @@
-/*! d3-funnel - v0.7.3 | 2015 */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("d3")):"function"==typeof define&&define.amd?define(["d3"],e):"object"==typeof exports?exports.D3Funnel=e(require("d3")):t.D3Funnel=e(t.d3)}(this,function(t){return function(t){function e(n){if(i[n])return i[n].exports;var a=i[n]={exports:{},id:n,loaded:!1};return t[n].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){"use strict";t.exports=i(1)["default"]},function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var r=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}();Object.defineProperty(e,"__esModule",{value:!0});var o=i(2),l=n(o),s=i(3),h=n(s),u=i(4),c=n(u),f=i(5),d=n(f),v=i(6),g=n(v),b=function(){function t(e){a(this,t),this.selector=e,this.colorizer=new h["default"],this.labelFormatter=new c["default"],this.navigator=new d["default"]}return r(t,[{key:"destroy",value:function(){var t=l["default"].select(this.selector);t.selectAll("svg").remove(),t.selectAll("*").remove(),t.text("")}},{key:"draw",value:function(t){var e=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];this.destroy(),this._initialize(t,e),this._draw()}},{key:"_initialize",value:function(t,e){this._validateData(t);var i=this._getSettings(e);this.label=i.label,this.labelFormatter.setFormat(this.label.format),this.colorizer.setLabelFill(i.label.fill),this.colorizer.setScale(i.block.fill.scale),this.width=i.chart.width,this.height=i.chart.height,this.bottomWidth=i.chart.width*i.chart.bottomWidth,this.bottomPinch=i.chart.bottomPinch,this.isInverted=i.chart.inverted,this.isCurved=i.chart.curve.enabled,this.curveHeight=i.chart.curve.height,this.fillType=i.block.fill.type,this.hoverEffects=i.block.highlight,this.dynamicHeight=i.block.dynamicHeight,this.minHeight=i.block.minHeight,this.animation=i.chart.animate,this.onBlockClick=i.events.click.block,this._setBlocks(t),this.bottomLeftX=(this.width-this.bottomWidth)/2,this.dx=this._getDx(),this.dy=this._getDy()}},{key:"_validateData",value:function(t){if(Array.isArray(t)===!1)throw new Error("Data must be an array.");if(0===t.length)throw new Error("Data array must contain at least one element.");if(Array.isArray(t[0])===!1)throw new Error("Data array elements must be arrays.");if(t[0].length<2)throw new Error("Data array elements must contain a label and value.")}},{key:"_getSettings",value:function(e){var i=g["default"].extend({},t.defaults);return i.chart.width=parseInt(l["default"].select(this.selector).style("width"),10),i.chart.height=parseInt(l["default"].select(this.selector).style("height"),10),i=g["default"].extend(i,e),i.chart.width<=0&&(i.chart.width=t.defaults.chart.width),i.chart.height<=0&&(i.chart.height=t.defaults.chart.height),i}},{key:"_setBlocks",value:function(t){var e=this._getTotalCount(t);this.blocks=this._standardizeData(t,e)}},{key:"_getTotalCount",value:function(t){var e=this,i=0;return t.forEach(function(t){i+=e._getRawBlockCount(t)}),i}},{key:"_standardizeData",value:function(t,e){var i=this,n=[],a=void 0,r=void 0,o=void 0;return t.forEach(function(t,l){a=i._getRawBlockCount(t),r=a/e,o=t[0],n.push({index:l,value:a,ratio:r,height:i.height*r,fill:i.colorizer.getBlockFill(t,l,i.fillType),label:{raw:o,formatted:i.labelFormatter.format(o,a),color:i.colorizer.getLabelFill(t)}})}),n}},{key:"_getRawBlockCount",value:function(t){return Array.isArray(t[1])?t[1][0]:t[1]}},{key:"_getDx",value:function(){return this.bottomPinch>0?this.bottomLeftX/(this.blocks.length-this.bottomPinch):this.bottomLeftX/this.blocks.length}},{key:"_getDy",value:function(){return this.isCurved?(this.height-this.curveHeight)/this.blocks.length:this.height/this.blocks.length}},{key:"_draw",value:function(){this.svg=l["default"].select(this.selector).append("svg").attr("width",this.width).attr("height",this.height),this.blockPaths=this._makePaths(),"gradient"===this.fillType&&this._defineColorGradients(this.svg),this.isCurved&&this._drawTopOval(this.svg,this.blockPaths),this._drawBlock(0)}},{key:"_makePaths",value:function(){var t=this,e=[],i=this.dx,n=this.dy,a=0,r=this.width,o=0;this.isInverted&&(a=this.bottomLeftX,r=this.width-this.bottomLeftX);var l=0,s=0,h=0,u=this.width/2;this.isCurved&&(o=10);var c=this.height;0!==this.minHeight&&(c=this.height-this.minHeight*this.blocks.length);var f=this.height;this.blocks.forEach(function(e,i){t.bottomPinch>0&&(t.isInverted?i<t.bottomPinch&&(f-=e.height):i>=t.blocks.length-t.bottomPinch&&(f-=e.height))});var d=2*f/(this.width-this.bottomWidth);return this.blocks.forEach(function(f,v){t.dynamicHeight&&(n=c*f.ratio,0!==t.minHeight&&(n+=t.minHeight),t.isCurved&&(n-=t.curveHeight/t.blocks.length),l=(o+n)/d,t.isInverted&&(l=(o+n-t.height)/(-1*d)),0===t.bottomWidth&&v===t.blocks.length-1&&(l=t.width/2,t.isInverted&&(l=0)),t.bottomWidth===t.width&&(l=a),i=l-a,t.isInverted&&(i=a-l)),t.bottomPinch>0&&(t.isInverted?(t.dynamicHeight||(i=t.dx),i=v<t.bottomPinch?0:i):v>=t.blocks.length-t.bottomPinch&&(i=0)),l=a+i,s=r-i,h=o+n,t.isInverted&&(l=a-i,s=r+i),t.isCurved?e.push([[a,o,"M"],[u,o+(t.curveHeight-10),"Q"],[r,o,""],[s,h,"L"],[s,h,"M"],[u,h+t.curveHeight,"Q"],[l,h,""],[a,o,"L"]]):e.push([[a,o,"M"],[r,o,"L"],[s,h,"L"],[l,h,"L"],[a,o,"L"]]),a=l,r=s,o=h}),e}},{key:"_defineColorGradients",value:function(t){var e=t.append("defs");this.blocks.forEach(function(t,i){var n=t.fill.raw,a=h["default"].shade(n,-.2),r=e.append("linearGradient").attr({id:"gradient-"+i}),o=[[0,a],[40,n],[60,n],[100,a]];o.forEach(function(t){r.append("stop").attr({offset:t[0]+"%",style:"stop-color:"+t[1]})})})}},{key:"_drawTopOval",value:function(t,e){var i=0,n=this.width,a=this.width/2;this.isInverted&&(i=this.bottomLeftX,n=this.width-this.bottomLeftX);var r=e[0],o=r[1][1]+this.curveHeight-10,l=this.navigator.plot([["M",i,r[0][1]],["Q",a,o],[" ",n,r[2][1]],["M",n,10],["Q",a,0],[" ",i,10]]);t.append("path").attr("fill",h["default"].shade(this.blocks[0].fill.raw,-.4)).attr("d",l)}},{key:"_drawBlock",value:function(t){var e=this;if(t!==this.blocks.length){var i=this.svg.append("g"),n=this._getBlockPath(i,t);n.data(this._getD3Data(t)),0!==this.animation?n.transition().duration(this.animation).ease("linear").attr("fill",this.blocks[t].fill.actual).attr("d",this._getPathDefinition(t)).each("end",function(){e._drawBlock(t+1)}):(n.attr("fill",this.blocks[t].fill.actual).attr("d",this._getPathDefinition(t)),this._drawBlock(t+1)),this.hoverEffects&&n.on("mouseover",this._onMouseOver).on("mouseout",this._onMouseOut),null!==this.onBlockClick&&n.on("click",this.onBlockClick),this._addBlockLabel(i,t)}}},{key:"_getBlockPath",value:function(t,e){var i=t.append("path");return 0!==this.animation&&this._addBeforeTransition(i,e),i}},{key:"_addBeforeTransition",value:function(t,e){var i=this.blockPaths[e],n="",a="";n=this.isCurved?this.navigator.plot([["M",i[0][0],i[0][1]],["Q",i[1][0],i[1][1]],[" ",i[2][0],i[2][1]],["L",i[2][0],i[2][1]],["M",i[2][0],i[2][1]],["Q",i[1][0],i[1][1]],[" ",i[0][0],i[0][1]]]):this.navigator.plot([["M",i[0][0],i[0][1]],["L",i[1][0],i[1][1]],["L",i[1][0],i[1][1]],["L",i[0][0],i[0][1]]]),a="solid"===this.fillType&&e>0?this.blocks[e-1].fill.actual:this.blocks[e].fill.actual,t.attr("d",n).attr("fill",a)}},{key:"_getD3Data",value:function(t){return[this.blocks[t]]}},{key:"_getPathDefinition",value:function(t){var e=[];return this.blockPaths[t].forEach(function(t){e.push([t[2],t[0],t[1]])}),this.navigator.plot(e)}},{key:"_onMouseOver",value:function(t){l["default"].select(this).attr("fill",h["default"].shade(t.fill.raw,-.2))}},{key:"_onMouseOut",value:function(t){l["default"].select(this).attr("fill",t.fill.actual)}},{key:"_addBlockLabel",value:function(t,e){var i=this.blockPaths[e],n=this.blocks[e].label.formatted,a=this.blocks[e].label.color,r=this.width/2,o=this._getTextY(i);t.append("text").text(n).attr({x:r,y:o,"text-anchor":"middle","dominant-baseline":"middle",fill:a,"pointer-events":"none"}).style("font-size",this.label.fontSize)}},{key:"_getTextY",value:function(t){return this.isCurved?(t[2][1]+t[3][1])/2+this.curveHeight/this.blocks.length:(t[1][1]+t[2][1])/2}}]),t}();b.defaults={chart:{width:350,height:400,bottomWidth:1/3,bottomPinch:0,inverted:!1,animate:0,curve:{enabled:!1,height:20}},block:{dynamicHeight:!1,fill:{scale:l["default"].scale.category10().domain(l["default"].range(0,10)),type:"solid"},minHeight:0,highlight:!1},label:{fontSize:"14px",fill:"#fff",format:"{l}: {f}"},events:{click:{block:null}}},e["default"]=b},function(e,i){e.exports=t},function(t,e){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var n=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}();Object.defineProperty(e,"__esModule",{value:!0});var a=function(){function t(){i(this,t),this.hexExpression=/^#([0-9a-f]{3}|[0-9a-f]{6})$/i,this.labelFill=null,this.scale=null}return n(t,[{key:"setLabelFill",value:function(t){this.labelFill=t}},{key:"setScale",value:function(t){this.scale=t}},{key:"getBlockFill",value:function(t,e,i){var n=this.getBlockRawFill(t,e);return{raw:n,actual:this.getBlockActualFill(n,e,i)}}},{key:"getBlockRawFill",value:function(t,e){return t.length>2&&this.hexExpression.test(t[2])?t[2]:Array.isArray(this.scale)?this.scale[e]:this.scale(e)}},{key:"getBlockActualFill",value:function(t,e,i){return"solid"===i?t:"url(#gradient-"+e+")"}},{key:"getLabelFill",value:function(t){return t.length>3&&this.hexExpression.test(t[3])?t[3]:this.labelFill}}],[{key:"shade",value:function(e,i){var n=e.slice(1);3===n.length&&(n=t.expandHex(n));var a=parseInt(n,16),r=0>i?0:255,o=0>i?-1*i:i,l=a>>16,s=a>>8&255,h=255&a,u=16777216+65536*(Math.round((r-l)*o)+l)+256*(Math.round((r-s)*o)+s)+(Math.round((r-h)*o)+h);return"#"+u.toString(16).slice(1)}},{key:"expandHex",value:function(t){return t[0]+t[0]+t[1]+t[1]+t[2]+t[2]}}]),t}();e["default"]=a},function(t,e){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var n=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}();Object.defineProperty(e,"__esModule",{value:!0});var a=function(){function t(){i(this,t),this.expression=null}return n(t,[{key:"setFormat",value:function(t){"function"==typeof t?this.formatter=t:(this.expression=t,this.formatter=this.stringFormatter)}},{key:"format",value:function(t,e){return Array.isArray(e)?this.formatter(t,e[0],e[1]):this.formatter(t,e,null)}},{key:"stringFormatter",value:function(t,e){var i=arguments.length<=2||void 0===arguments[2]?null:arguments[2],n=i;return null===i&&(n=this.getDefaultFormattedValue(e)),this.expression.split("{l}").join(t).split("{v}").join(e).split("{f}").join(n)}},{key:"getDefaultFormattedValue",value:function(t){return t.toLocaleString()}}]),t}();e["default"]=a},function(t,e){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var n=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}();Object.defineProperty(e,"__esModule",{value:!0});var a=function(){function t(){i(this,t)}return n(t,[{key:"plot",value:function(t){var e="";return t.forEach(function(t){e+=t[0]+t[1]+","+t[2]+" "}),e.replace(/ +/g," ").trim()}}]),t}();e["default"]=a},function(t,e){"use strict";function i(t){return t&&"undefined"!=typeof Symbol&&t.constructor===Symbol?"symbol":typeof t}function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}();Object.defineProperty(e,"__esModule",{value:!0});var r=function(){function t(){n(this,t)}return a(t,null,[{key:"extend",value:function(e,n){var a=void 0;for(a in n)n.hasOwnProperty(a)&&("object"!==i(n[a])||Array.isArray(n[a])||null===n[a]?e[a]=n[a]:"object"!==i(e[a])||Array.isArray(e[a])||null===n[a]?e[a]=t.extend({},n[a]):e[a]=t.extend(e[a],n[a]));return e}}]),t}();e["default"]=r}])});
+/*! d3-funnel - v0.7.5 | 2015 */
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("d3")):"function"==typeof define&&define.amd?define(["d3"],e):"object"==typeof exports?exports.D3Funnel=e(require("d3")):t.D3Funnel=e(t.d3)}(this,function(t){return function(t){function e(n){if(i[n])return i[n].exports;var a=i[n]={exports:{},id:n,loaded:!1};return t[n].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){"use strict";t.exports=i(1)["default"]},function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var r=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}();Object.defineProperty(e,"__esModule",{value:!0});var o=i(2),l=n(o),s=i(3),h=n(s),u=i(4),c=n(u),f=i(5),d=n(f),v=i(6),g=n(v),b=function(){function t(e){a(this,t),this.selector=e,this.colorizer=new h["default"],this.labelFormatter=new c["default"],this.navigator=new d["default"]}return r(t,[{key:"destroy",value:function(){var t=l["default"].select(this.selector);t.selectAll("svg").remove(),t.selectAll("*").remove(),t.text("")}},{key:"draw",value:function(t){var e=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];this.destroy(),this._initialize(t,e),this._draw()}},{key:"_initialize",value:function(t,e){this._validateData(t);var i=this._getSettings(e);this.label=i.label,this.labelFormatter.setFormat(this.label.format),this.colorizer.setLabelFill(i.label.fill),this.colorizer.setScale(i.block.fill.scale),this.width=i.chart.width,this.height=i.chart.height,this.bottomWidth=i.chart.width*i.chart.bottomWidth,this.bottomPinch=i.chart.bottomPinch,this.isInverted=i.chart.inverted,this.isCurved=i.chart.curve.enabled,this.curveHeight=i.chart.curve.height,this.fillType=i.block.fill.type,this.hoverEffects=i.block.highlight,this.dynamicHeight=i.block.dynamicHeight,this.minHeight=i.block.minHeight,this.animation=i.chart.animate,this.onBlockClick=i.events.click.block,this._setBlocks(t),this.bottomLeftX=(this.width-this.bottomWidth)/2,this.dx=this._getDx(),this.dy=this._getDy()}},{key:"_validateData",value:function(t){if(Array.isArray(t)===!1)throw new Error("Data must be an array.");if(0===t.length)throw new Error("Data array must contain at least one element.");if(Array.isArray(t[0])===!1)throw new Error("Data array elements must be arrays.");if(t[0].length<2)throw new Error("Data array elements must contain a label and value.")}},{key:"_getSettings",value:function(e){var i=g["default"].extend({},t.defaults);return i.chart.width=parseInt(l["default"].select(this.selector).style("width"),10),i.chart.height=parseInt(l["default"].select(this.selector).style("height"),10),i=g["default"].extend(i,e),i.chart.width<=0&&(i.chart.width=t.defaults.chart.width),i.chart.height<=0&&(i.chart.height=t.defaults.chart.height),i}},{key:"_setBlocks",value:function(t){var e=this._getTotalCount(t);this.blocks=this._standardizeData(t,e)}},{key:"_getTotalCount",value:function(t){var e=this,i=0;return t.forEach(function(t){i+=e._getRawBlockCount(t)}),i}},{key:"_standardizeData",value:function(t,e){var i=this,n=[],a=void 0,r=void 0,o=void 0;return t.forEach(function(t,l){a=i._getRawBlockCount(t),r=a/e,o=t[0],n.push({index:l,ratio:r,value:a,height:i.height*r,fill:i.colorizer.getBlockFill(t,l,i.fillType),label:{raw:o,formatted:i.labelFormatter.format(o,a),color:i.colorizer.getLabelFill(t)}})}),n}},{key:"_getRawBlockCount",value:function(t){return Array.isArray(t[1])?t[1][0]:t[1]}},{key:"_getDx",value:function(){return this.bottomPinch>0?this.bottomLeftX/(this.blocks.length-this.bottomPinch):this.bottomLeftX/this.blocks.length}},{key:"_getDy",value:function(){return this.isCurved?(this.height-this.curveHeight)/this.blocks.length:this.height/this.blocks.length}},{key:"_draw",value:function(){this.svg=l["default"].select(this.selector).append("svg").attr("width",this.width).attr("height",this.height),this.blockPaths=this._makePaths(),"gradient"===this.fillType&&this._defineColorGradients(this.svg),this.isCurved&&this._drawTopOval(this.svg,this.blockPaths),this._drawBlock(0)}},{key:"_makePaths",value:function(){var t=this,e=[],i=this.dx,n=this.dy,a=0,r=this.width,o=0;this.isInverted&&(a=this.bottomLeftX,r=this.width-this.bottomLeftX);var l=0,s=0,h=0,u=this.width/2;this.isCurved&&(o=10);var c=this.height;0!==this.minHeight&&(c=this.height-this.minHeight*this.blocks.length);var f=this.height;this.blocks.forEach(function(e,i){t.bottomPinch>0&&(t.isInverted?i<t.bottomPinch&&(f-=e.height):i>=t.blocks.length-t.bottomPinch&&(f-=e.height))});var d=2*f/(this.width-this.bottomWidth);return this.blocks.forEach(function(f,v){t.dynamicHeight&&(n=c*f.ratio,0!==t.minHeight&&(n+=t.minHeight),t.isCurved&&(n-=t.curveHeight/t.blocks.length),l=(o+n)/d,t.isInverted&&(l=(o+n-t.height)/(-1*d)),0===t.bottomWidth&&v===t.blocks.length-1&&(l=t.width/2,t.isInverted&&(l=0)),t.bottomWidth===t.width&&(l=a),i=l-a,t.isInverted&&(i=a-l)),t.bottomPinch>0&&(t.isInverted?(t.dynamicHeight||(i=t.dx),i=v<t.bottomPinch?0:i):v>=t.blocks.length-t.bottomPinch&&(i=0)),l=a+i,s=r-i,h=o+n,t.isInverted&&(l=a-i,s=r+i),t.isCurved?e.push([[a,o,"M"],[u,o+(t.curveHeight-10),"Q"],[r,o,""],[s,h,"L"],[s,h,"M"],[u,h+t.curveHeight,"Q"],[l,h,""],[a,o,"L"]]):e.push([[a,o,"M"],[r,o,"L"],[s,h,"L"],[l,h,"L"],[a,o,"L"]]),a=l,r=s,o=h}),e}},{key:"_defineColorGradients",value:function(t){var e=this,i=t.append("defs");this.blocks.forEach(function(t,n){var a=t.fill.raw,r=e.colorizer.shade(a,-.2),o=i.append("linearGradient").attr({id:"gradient-"+n}),l=[[0,r],[40,a],[60,a],[100,r]];l.forEach(function(t){o.append("stop").attr({offset:t[0]+"%",style:"stop-color:"+t[1]})})})}},{key:"_drawTopOval",value:function(t,e){var i=0,n=this.width,a=this.width/2;this.isInverted&&(i=this.bottomLeftX,n=this.width-this.bottomLeftX);var r=e[0],o=r[1][1]+this.curveHeight-10,l=this.navigator.plot([["M",i,r[0][1]],["Q",a,o],[" ",n,r[2][1]],["M",n,10],["Q",a,0],[" ",i,10]]);t.append("path").attr("fill",this.colorizer.shade(this.blocks[0].fill.raw,-.4)).attr("d",l)}},{key:"_drawBlock",value:function(t){var e=this;if(t!==this.blocks.length){var i=this.svg.append("g"),n=this._getBlockPath(i,t);this._attachData(n,this.blocks[t]),0!==this.animation?n.transition().duration(this.animation).ease("linear").attr("fill",this.blocks[t].fill.actual).attr("d",this._getPathDefinition(t)).each("end",function(){e._drawBlock(t+1)}):(n.attr("fill",this.blocks[t].fill.actual).attr("d",this._getPathDefinition(t)),this._drawBlock(t+1)),this.hoverEffects&&n.on("mouseover",this._onMouseOver.bind(this)).on("mouseout",this._onMouseOut.bind(this)),null!==this.onBlockClick&&n.on("click",this.onBlockClick),this._addBlockLabel(i,t)}}},{key:"_getBlockPath",value:function(t,e){var i=t.append("path");return 0!==this.animation&&this._addBeforeTransition(i,e),i}},{key:"_addBeforeTransition",value:function(t,e){var i=this.blockPaths[e],n="",a="";n=this.isCurved?this.navigator.plot([["M",i[0][0],i[0][1]],["Q",i[1][0],i[1][1]],[" ",i[2][0],i[2][1]],["L",i[2][0],i[2][1]],["M",i[2][0],i[2][1]],["Q",i[1][0],i[1][1]],[" ",i[0][0],i[0][1]]]):this.navigator.plot([["M",i[0][0],i[0][1]],["L",i[1][0],i[1][1]],["L",i[1][0],i[1][1]],["L",i[0][0],i[0][1]]]),a="solid"===this.fillType&&e>0?this.blocks[e-1].fill.actual:this.blocks[e].fill.actual,t.attr("d",n).attr("fill",a)}},{key:"_attachData",value:function(t,e){e.node=t.node(),t.data([e])}},{key:"_getPathDefinition",value:function(t){var e=[];return this.blockPaths[t].forEach(function(t){e.push([t[2],t[0],t[1]])}),this.navigator.plot(e)}},{key:"_onMouseOver",value:function(t){l["default"].select(l["default"].event.target).attr("fill",this.colorizer.shade(t.fill.raw,-.2))}},{key:"_onMouseOut",value:function(t){l["default"].select(l["default"].event.target).attr("fill",t.fill.actual)}},{key:"_addBlockLabel",value:function(t,e){var i=this.blockPaths[e],n=this.blocks[e].label.formatted,a=this.blocks[e].label.color,r=this.width/2,o=this._getTextY(i);t.append("text").text(n).attr({x:r,y:o,fill:a,"text-anchor":"middle","dominant-baseline":"middle","pointer-events":"none"}).style("font-size",this.label.fontSize)}},{key:"_getTextY",value:function(t){return this.isCurved?(t[2][1]+t[3][1])/2+this.curveHeight/this.blocks.length:(t[1][1]+t[2][1])/2}}]),t}();b.defaults={chart:{width:350,height:400,bottomWidth:1/3,bottomPinch:0,inverted:!1,animate:0,curve:{enabled:!1,height:20}},block:{dynamicHeight:!1,fill:{scale:l["default"].scale.category10().domain(l["default"].range(0,10)),type:"solid"},minHeight:0,highlight:!1},label:{fontSize:"14px",fill:"#fff",format:"{l}: {f}"},events:{click:{block:null}}},e["default"]=b},function(e,i){e.exports=t},function(t,e){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var n=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}();Object.defineProperty(e,"__esModule",{value:!0});var a=function(){function t(){i(this,t),this.hexExpression=/^#([0-9a-f]{3}|[0-9a-f]{6})$/i,this.labelFill=null,this.scale=null}return n(t,[{key:"setLabelFill",value:function(t){this.labelFill=t}},{key:"setScale",value:function(t){this.scale=t}},{key:"getBlockFill",value:function(t,e,i){var n=this.getBlockRawFill(t,e);return{raw:n,actual:this.getBlockActualFill(n,e,i)}}},{key:"getBlockRawFill",value:function(t,e){return t.length>2&&this.hexExpression.test(t[2])?t[2]:Array.isArray(this.scale)?this.scale[e]:this.scale(e)}},{key:"getBlockActualFill",value:function(t,e,i){return"solid"===i?t:"url(#gradient-"+e+")"}},{key:"getLabelFill",value:function(t){return t.length>3&&this.hexExpression.test(t[3])?t[3]:this.labelFill}},{key:"shade",value:function(t,e){var i=t.slice(1);3===i.length&&(i=this.expandHex(i));var n=parseInt(i,16),a=0>e?0:255,r=0>e?-1*e:e,o=n>>16,l=n>>8&255,s=255&n,h=16777216+65536*(Math.round((a-o)*r)+o)+256*(Math.round((a-l)*r)+l)+(Math.round((a-s)*r)+s);return"#"+h.toString(16).slice(1)}},{key:"expandHex",value:function(t){return t[0]+t[0]+t[1]+t[1]+t[2]+t[2]}}]),t}();e["default"]=a},function(t,e){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var n=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}();Object.defineProperty(e,"__esModule",{value:!0});var a=function(){function t(){i(this,t),this.expression=null}return n(t,[{key:"setFormat",value:function(t){"function"==typeof t?this.formatter=t:(this.expression=t,this.formatter=this.stringFormatter)}},{key:"format",value:function(t,e){return Array.isArray(e)?this.formatter(t,e[0],e[1]):this.formatter(t,e,null)}},{key:"stringFormatter",value:function(t,e){var i=arguments.length<=2||void 0===arguments[2]?null:arguments[2],n=i;return null===i&&(n=this.getDefaultFormattedValue(e)),this.expression.split("{l}").join(t).split("{v}").join(e).split("{f}").join(n)}},{key:"getDefaultFormattedValue",value:function(t){return t.toLocaleString()}}]),t}();e["default"]=a},function(t,e){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var n=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}();Object.defineProperty(e,"__esModule",{value:!0});var a=function(){function t(){i(this,t)}return n(t,[{key:"plot",value:function(t){var e="";return t.forEach(function(t){e+=t[0]+t[1]+","+t[2]+" "}),e.replace(/ +/g," ").trim()}}]),t}();e["default"]=a},function(t,e){"use strict";function i(t){return t&&"undefined"!=typeof Symbol&&t.constructor===Symbol?"symbol":typeof t}function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}();Object.defineProperty(e,"__esModule",{value:!0});var r=function(){function t(){n(this,t)}return a(t,null,[{key:"extend",value:function(e,n){var a=void 0;for(a in n)n.hasOwnProperty(a)&&("object"!==i(n[a])||Array.isArray(n[a])||null===n[a]?e[a]=n[a]:"object"!==i(e[a])||Array.isArray(e[a])||null===n[a]?e[a]=t.extend({},n[a]):e[a]=t.extend(e[a],n[a]));return e}}]),t}();e["default"]=r}])});

gulpfile.js

@@ -12,10 +12,2 @@ var gulp    = require('gulp');
 
-var src = [
-	'./src/d3-funnel/d3-funnel.js',
-	'./src/d3-funnel/colorizer.js',
-	'./src/d3-funnel/label-formatter.js',
-	'./src/d3-funnel/navigator.js',
-	'./src/d3-funnel/utils.js',
-];
-
 gulp.task('test-format', function () {
@@ -28,9 +20,9 @@ return gulp.src(['./src/d3-funnel/**/*.js'])
 
-gulp.task('compile', function () {
-	return gulp.src(['./src/index.js'])
+gulp.task('compile-test', function () {
+	return gulp.src(['./test/index.js'])
 		.pipe(webpack(require('./webpack.config.js')))
-		.pipe(gulp.dest('./compiled/'));
+		.pipe(gulp.dest('./test/compiled/'));
 });
 
-gulp.task('test-mocha', ['compile'], function () {
+gulp.task('test-mocha', ['compile-test'], function () {
 	return gulp.src(['test/test.html'])
@@ -42,3 +34,9 @@ .pipe(mocha({reporter: 'spec'}));
 
-gulp.task('build', ['test'], function () {
+gulp.task('compile-build', function () {
+	return gulp.src(['./src/index.js'])
+		.pipe(webpack(require('./webpack.config.js')))
+		.pipe(gulp.dest('./compiled/'));
+});
+
+gulp.task('build', ['test', 'compile-build'], function () {
 	return gulp.src(['./compiled/d3-funnel.js'])
@@ -45,0 +43,0 @@ .pipe(gulp.dest('./dist/'))

package.json

 {
   "name": "d3-funnel",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "A library for rendering SVG funnel charts using D3.js",
@@ -22,3 +22,3 @@ "author": "Jake Zatecky",
     "eslint": "^1.9.0",
-    "eslint-config-airbnb": "^2.0.0",
+    "eslint-config-airbnb": "^2.1.1",
     "gulp": "^3.9.0",
@@ -25,0 +25,0 @@ "gulp-eslint": "^1.0.0",

README.md

@@ -103,2 +103,3 @@ # D3 Funnel
 | index           | number | The index of the block.               |
+| node            | object | The DOM node of the block.            |
 | value           | number | The numerical value.                  |
@@ -115,2 +116,3 @@ | fill            | string | The background color.                 |
 	index: 0,
+	node: { ... },
 	value: 150,
@@ -117,0 +119,0 @@ fill: '#c33',

src/d3-funnel/colorizer.js

@@ -42,3 +42,3 @@ class Colorizer {
 		return {
-			raw: raw,
+			raw,
 			actual: this.getBlockActualFill(raw, index, type),
@@ -112,7 +112,7 @@ };
 	 */
-	static shade(color, shade) {
+	shade(color, shade) {
 		let hex = color.slice(1);
 
 		if (hex.length === 3) {
-			hex = Colorizer.expandHex(hex);
+			hex = this.expandHex(hex);
 		}
@@ -143,3 +143,3 @@
 	 */
-	static expandHex(hex) {
+	expandHex(hex) {
 		return hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
@@ -146,0 +146,0 @@ }

src/d3-funnel/d3-funnel.js

@@ -247,5 +247,5 @@ import d3 from 'd3';
 			standardized.push({
-				index: index,
+				index,
+				ratio,
 				value: count,
-				ratio: ratio,
 				height: this.height * ratio,
@@ -533,3 +533,3 @@ fill: this.colorizer.getBlockFill(block, index, this.fillType),
 			const color = block.fill.raw;
-			const shade = Colorizer.shade(color, -0.2);
+			const shade = this.colorizer.shade(color, -0.2);
 
@@ -593,3 +593,3 @@ // Create linear gradient
 		svg.append('path')
-			.attr('fill', Colorizer.shade(this.blocks[0].fill.raw, -0.4))
+			.attr('fill', this.colorizer.shade(this.blocks[0].fill.raw, -0.4))
 			.attr('d', path);
@@ -615,4 +615,6 @@ }
 		const path = this._getBlockPath(group, index);
-		path.data(this._getD3Data(index));
 
+		// Attach data to the element
+		this._attachData(path, this.blocks[index]);
+
 		// Add animation components
@@ -636,4 +638,4 @@ if (this.animation !== 0) {
 		if (this.hoverEffects) {
-			path.on('mouseover', this._onMouseOver)
-				.on('mouseout', this._onMouseOut);
+			path.on('mouseover', this._onMouseOver.bind(this))
+				.on('mouseout', this._onMouseOut.bind(this));
 		}
@@ -713,10 +715,13 @@
 	/**
-	 * Return d3 formatted data for the given block.
+	 * Attach data to the target element. Also attach the current node to the
+	 * data object.
 	 *
-	 * @param {int} index
+	 * @param {Object} element
 	 *
-	 * @return {Array}
+	 * @return {void}
 	 */
-	_getD3Data(index) {
-		return [this.blocks[index]];
+	_attachData(element, data) {
+		data.node = element.node();
+
+		element.data([data]);
 	}
@@ -745,3 +750,3 @@
 	_onMouseOver(data) {
-		d3.select(this).attr('fill', Colorizer.shade(data.fill.raw, -0.2));
+		d3.select(d3.event.target).attr('fill', this.colorizer.shade(data.fill.raw, -0.2));
 	}
@@ -755,3 +760,3 @@
 	_onMouseOut(data) {
-		d3.select(this).attr('fill', data.fill.actual);
+		d3.select(d3.event.target).attr('fill', data.fill.actual);
 	}
@@ -776,7 +781,7 @@
 			.attr({
-				'x': x,
-				'y': y,
+				x,
+				y,
+				fill,
 				'text-anchor': 'middle',
 				'dominant-baseline': 'middle',
-				'fill': fill,
 				'pointer-events': 'none',
@@ -783,0 +788,0 @@ })

test/d3-funnel/d3-funnel.js

@@ -1,3 +0,12 @@
-/* global d3, assert, chai, D3Funnel */
+import _ from 'lodash';
+import d3 from 'd3';
+import chai from 'chai';
+import spies from 'chai-spies';
 
+import D3Funnel from '../../src/d3-funnel/d3-funnel';
+
+const assert = chai.assert;
+
+chai.use(spies);
+
 function getFunnel() {
@@ -16,3 +25,3 @@ return new D3Funnel('#funnel');
 function getPathBottomWidth(path) {
-	var commands = path.attr('d').split(' ');
+	const commands = path.attr('d').split(' ');
 
@@ -23,3 +32,3 @@ return getCommandPoint(commands[2]).x - getCommandPoint(commands[3]).x;
 function getPathHeight(path) {
-	var commands = path.attr('d').split(' ');
+	const commands = path.attr('d').split(' ');
 
@@ -30,6 +39,6 @@ return getCommandPoint(commands[2]).y - getCommandPoint(commands[0]).y;
 function getCommandPoint(command) {
-	var points = command.split(',');
+	const points = command.split(',');
+	const y = points[1];
 
-	var x = points[0];
-	var y = points[1];
+	let x = points[0];
 
@@ -51,3 +60,3 @@ // Strip any letter in front of number
 
-var defaults = _.clone(D3Funnel.defaults, true);
+const defaults = _.clone(D3Funnel.defaults, true);
 
@@ -84,3 +93,3 @@ describe('D3Funnel', function () {
 			it('should throw an error when the data is not an array', function () {
-				var funnel = getFunnel();
+				const funnel = getFunnel();
 
@@ -93,3 +102,3 @@ assert.throws(function () {
 			it('should throw an error when the data array does not have an element', function () {
-				var funnel = getFunnel();
+				const funnel = getFunnel();
 
@@ -102,3 +111,3 @@ assert.throws(function () {
 			it('should throw an error when the first data array element is not an array', function () {
-				var funnel = getFunnel();
+				const funnel = getFunnel();
 
@@ -111,3 +120,3 @@ assert.throws(function () {
 			it('should throw an error when the first data array element does not have two elements', function () {
-				var funnel = getFunnel();
+				const funnel = getFunnel();
 
@@ -131,4 +140,4 @@ assert.throws(function () {
 			it('should use colors assigned to a data element', function () {
-				var paths;
-				var colorScale;
+				let paths;
+				let colorScale;
 
@@ -153,3 +162,3 @@ getFunnel().draw([
 			it('should use label colors assigned to a data element', function () {
-				var texts;
+				let texts;
 
@@ -172,4 +181,4 @@ getFunnel().draw([
 			it('should remove other elements from container', function () {
-				var container = d3.select('#funnel');
-				var funnel = getFunnel();
+				const container = d3.select('#funnel');
+				const funnel = getFunnel();
 
@@ -183,4 +192,4 @@ // Make sure the container has no children
 				// Expect funnel children count plus funnel itself
-				var expected = getSvg().selectAll('*').size() + 1;
-				var actual = container.selectAll('*').size();
+				const expected = getSvg().selectAll('*').size() + 1;
+				const actual = container.selectAll('*').size();
 
@@ -191,4 +200,4 @@ assert.equal(expected, actual);
 			it('should remove inner text from container', function () {
-				var container = d3.select('#funnel');
-				var funnel = getFunnel();
+				const container = d3.select('#funnel');
+				const funnel = getFunnel();
 
@@ -208,3 +217,3 @@ // Make sure the container has no text
 			it('should remove a drawn SVG element', function () {
-				var funnel = getFunnel();
+				const funnel = getFunnel();
 
@@ -297,3 +306,3 @@ funnel.draw(getBasicData());
 
-				var paths = d3.selectAll('path');
+				const paths = d3.selectAll('path');
 
@@ -327,5 +336,5 @@ assert.equal(150, paths[0][1].getBBox().width);
 
-				var paths = d3.selectAll('#funnel path');
+				const paths = d3.selectAll('#funnel path');
 
-				var quadraticPaths = paths.filter(function () {
+				const quadraticPaths = paths.filter(function () {
 					return d3.select(this).attr('d').indexOf('Q') > -1;
@@ -340,3 +349,3 @@ });
 			it('should use equal heights when false', function () {
-				var paths;
+				let paths;
 
@@ -359,3 +368,3 @@ getFunnel().draw([
 			it('should use proportional heights when true', function () {
-				var paths;
+				let paths;
 
@@ -381,3 +390,3 @@ getFunnel().draw([
 			it('should not have NaN in the last path when bottomWidth is equal to 0%', function () {
-				var paths;
+				let paths;
 
@@ -423,3 +432,3 @@ // A very specific cooked-up example that could trigger NaN
 			it('should use a function\'s return value', function () {
-				var paths;
+				let paths;
 
@@ -450,3 +459,3 @@ getFunnel().draw([
 			it('should use an array\'s return value', function () {
-				var paths;
+				let paths;
 
@@ -502,3 +511,3 @@ getFunnel().draw([
 			it('should give each block the minimum height specified', function () {
-				var paths;
+				let paths;
 
@@ -525,3 +534,3 @@ getFunnel().draw([
 			it('should decrease the height of blocks above the minimum', function () {
-				var paths;
+				let paths;
 
@@ -549,3 +558,3 @@ getFunnel().draw([
 			it('should change block color on hover', function () {
-				var event = document.createEvent('CustomEvent');
+				const event = document.createEvent('CustomEvent');
 				event.initCustomEvent('mouseover', false, false, null);
@@ -622,6 +631,6 @@
 			it('should invoke the callback function with the correct data', function () {
-				var event = document.createEvent('CustomEvent');
+				const event = document.createEvent('CustomEvent');
 				event.initCustomEvent('click', false, false, null);
 
-				var spy = chai.spy();
+				const spy = chai.spy();
 
@@ -634,2 +643,3 @@ getFunnel().draw(getBasicData(), {
 									index: d.index,
+									node: d.node,
 									label: d.label.raw,
@@ -647,2 +657,3 @@ value: d.value,
 					index: 0,
+					node: d3.select('#funnel path').node(),
 					label: 'Node',
@@ -654,3 +665,3 @@ value: 1000,
 			it('should not trigger errors when null', function () {
-				var event = document.createEvent('CustomEvent');
+				const event = document.createEvent('CustomEvent');
 				event.initCustomEvent('click', false, false, null);
@@ -657,0 +668,0 @@

webpack.config.js

@@ -6,5 +6,2 @@ /* eslint-disable */
 module.exports = {
-	entry: {
-		app: './src/index.js',
-	},
 	output: {
@@ -11,0 +8,0 @@ filename: 'd3-funnel.js',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

111076

increased by2.67%

Number of package files

28

increased by16.67%

Lines of code

2863

increased by3.51%

Number of lines in readme file

196

increased by1.03%

No dependency changes