Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
d3-funnel - npm Package Compare versions
Comparing version 0.6.8 to 0.6.9
@@ -1,6 +0,6 @@ | ||
| (function(global) { | ||
| (function(global, d3) { | ||
| /* global d3 */ | ||
| /* jshint bitwise: false */ | ||
| "use strict"; | ||
| 'use strict'; | ||
@@ -22,7 +22,7 @@ /** | ||
| height: 400, | ||
| bottomWidth: 1/3, | ||
| bottomWidth: 1 / 3, | ||
| bottomPinch: 0, | ||
| isCurved: false, | ||
| curveHeight: 20, | ||
| fillType: "solid", | ||
| fillType: 'solid', | ||
| isInverted: false, | ||
@@ -34,4 +34,4 @@ hoverEffects: false, | ||
| label: { | ||
| fontSize: "14px", | ||
| fill: "#fff" | ||
| fontSize: '14px', | ||
| fill: '#fff' | ||
| } | ||
@@ -56,18 +56,18 @@ }; | ||
| // Initialize chart options | ||
| this.__initialize(data, options); | ||
| this._initialize(data, options); | ||
| // Remove any previous drawings | ||
| d3.select(this.selector).selectAll("svg").remove(); | ||
| d3.select(this.selector).selectAll('svg').remove(); | ||
| // Add the SVG | ||
| this.svg = d3.select(this.selector) | ||
| .append("svg") | ||
| .attr("width", this.width) | ||
| .attr("height", this.height); | ||
| .append('svg') | ||
| .attr('width', this.width) | ||
| .attr('height', this.height); | ||
| this.sectionPaths = this.__makePaths(); | ||
| this.sectionPaths = this._makePaths(); | ||
| // Define color gradients | ||
| if (this.fillType === "gradient") { | ||
| this.__defineColorGradients(this.svg); | ||
| if (this.fillType === 'gradient') { | ||
| this._defineColorGradients(this.svg); | ||
| } | ||
@@ -77,7 +77,7 @@ | ||
| if (this.isCurved) { | ||
| this.__drawTopOval(this.svg, this.sectionPaths); | ||
| this._drawTopOval(this.svg, this.sectionPaths); | ||
| } | ||
| // Add each block section | ||
| this.__drawSection(0); | ||
| this._drawSection(0); | ||
| }; | ||
@@ -93,9 +93,9 @@ | ||
| */ | ||
| D3Funnel.prototype.__initialize = function(data, options) | ||
| D3Funnel.prototype._initialize = function(data, options) | ||
| { | ||
| if (!this.__isArray(data) || data.length === 0 || | ||
| !this.__isArray(data[0]) || data[0].length < 2) { | ||
| if (!this._isArray(data) || data.length === 0 || | ||
| !this._isArray(data[0]) || data[0].length < 2) { | ||
| throw { | ||
| name: "D3 Funnel Data Error", | ||
| message: "Funnel data is not valid." | ||
| name: 'D3 Funnel Data Error', | ||
| message: 'Funnel data is not valid.' | ||
| }; | ||
@@ -105,3 +105,3 @@ } | ||
| // Initialize options if not set | ||
| options = typeof options !== "undefined" ? options : {}; | ||
| options = typeof options !== 'undefined' ? options : {}; | ||
@@ -115,5 +115,5 @@ this.data = data; | ||
| // Set the default width and height based on the container | ||
| var settings = this.__extend({}, this.defaults); | ||
| settings.width = parseInt(d3.select(this.selector).style("width"), 10); | ||
| settings.height = parseInt(d3.select(this.selector).style("height"), 10); | ||
| var settings = this._extend({}, this.defaults); | ||
| settings.width = parseInt(d3.select(this.selector).style('width'), 10); | ||
| settings.height = parseInt(d3.select(this.selector).style('height'), 10); | ||
@@ -123,3 +123,3 @@ // Overwrite default settings with user options | ||
| for (i = 0; i < keys.length; i++) { | ||
| if (keys[i] !== "label") { | ||
| if (keys[i] !== 'label') { | ||
| settings[keys[i]] = options[keys[i]]; | ||
@@ -130,3 +130,3 @@ } | ||
| // Label settings | ||
| if ("label" in options) { | ||
| if ('label' in options) { | ||
| var validLabelOptions = /fontSize|fill/; | ||
@@ -157,3 +157,3 @@ var labelOption; | ||
| // If a color is not set for the record, add one | ||
| if (!("2" in this.data[i]) || !hexExpression.test(this.data[i][2])) { | ||
| if (!('2' in this.data[i]) || !hexExpression.test(this.data[i][2])) { | ||
| this.data[i][2] = colorScale(i); | ||
@@ -201,3 +201,3 @@ } | ||
| */ | ||
| D3Funnel.prototype.__makePaths = function() | ||
| D3Funnel.prototype._makePaths = function() | ||
| { | ||
@@ -252,3 +252,3 @@ var paths = []; | ||
| for (var i = 0; i < this.data.length; i++) { | ||
| totalCount += this.data[i][1]; | ||
| totalCount += this._isArray(this.data[i][1]) ? this.data[i][1][0] : this.data[i][1]; | ||
| } | ||
@@ -259,3 +259,3 @@ | ||
| for (i = 0; i < this.data.length; i++) { | ||
| count = this.data[i][1]; | ||
| count = this._isArray(this.data[i][1]) ? this.data[i][1][0] : this.data[i][1]; | ||
@@ -276,3 +276,3 @@ // Calculate dynamic shapes based on area | ||
| if (this.isCurved) { | ||
| dy = dy - (this.curveHeight/this.data.length); | ||
| dy = dy - (this.curveHeight / this.data.length); | ||
| } | ||
@@ -291,6 +291,5 @@ | ||
| } | ||
| } | ||
| // Pinch at the first sections relating to the bottom pinch | ||
| // Revert back to normal velocity after pinch | ||
| else { | ||
| } else { | ||
| // Revert velocity back to the intial if we are using | ||
@@ -322,28 +321,27 @@ // static area's (prevents zero velocity if isInverted | ||
| // Top Bezier curve | ||
| [prevLeftX, prevHeight, "M"], | ||
| [middle, prevHeight + (this.curveHeight - 10), "Q"], | ||
| [prevRightX, prevHeight, ""], | ||
| [prevLeftX, prevHeight, 'M'], | ||
| [middle, prevHeight + (this.curveHeight - 10), 'Q'], | ||
| [prevRightX, prevHeight, ''], | ||
| // Right line | ||
| [nextRightX, nextHeight, "L"], | ||
| [nextRightX, nextHeight, 'L'], | ||
| // Bottom Bezier curve | ||
| [nextRightX, nextHeight, "M"], | ||
| [middle, nextHeight + this.curveHeight, "Q"], | ||
| [nextLeftX, nextHeight, ""], | ||
| [nextRightX, nextHeight, 'M'], | ||
| [middle, nextHeight + this.curveHeight, 'Q'], | ||
| [nextLeftX, nextHeight, ''], | ||
| // Left line | ||
| [prevLeftX, prevHeight, "L"] | ||
| [prevLeftX, prevHeight, 'L'] | ||
| ]); | ||
| } | ||
| // Plot straight lines | ||
| else { | ||
| } else { | ||
| paths.push([ | ||
| // Start position | ||
| [prevLeftX, prevHeight, "M"], | ||
| [prevLeftX, prevHeight, 'M'], | ||
| // Move to right | ||
| [prevRightX, prevHeight, "L"], | ||
| [prevRightX, prevHeight, 'L'], | ||
| // Move down | ||
| [nextRightX, nextHeight, "L"], | ||
| [nextRightX, nextHeight, 'L'], | ||
| // Move to left | ||
| [nextLeftX, nextHeight, "L"], | ||
| [nextLeftX, nextHeight, 'L'], | ||
| // Wrap back to top | ||
| [prevLeftX, prevHeight, "L"], | ||
| [prevLeftX, prevHeight, 'L'] | ||
| ]); | ||
@@ -368,5 +366,5 @@ } | ||
| */ | ||
| D3Funnel.prototype.__defineColorGradients = function(svg) | ||
| D3Funnel.prototype._defineColorGradients = function(svg) | ||
| { | ||
| var defs = svg.append("defs"); | ||
| var defs = svg.append('defs'); | ||
@@ -379,5 +377,5 @@ // Create a gradient for each section | ||
| // Create linear gradient | ||
| var gradient = defs.append("linearGradient") | ||
| var gradient = defs.append('linearGradient') | ||
| .attr({ | ||
| id: "gradient-" + i | ||
| id: 'gradient-' + i | ||
| }); | ||
@@ -396,5 +394,5 @@ | ||
| var stop = stops[j]; | ||
| gradient.append("stop").attr({ | ||
| offset: stop[0] + "%", | ||
| style: "stop-color:" + stop[1] | ||
| gradient.append('stop').attr({ | ||
| offset: stop[0] + '%', | ||
| style: 'stop-color:' + stop[1] | ||
| }); | ||
@@ -413,3 +411,3 @@ } | ||
| */ | ||
| D3Funnel.prototype.__drawTopOval = function(svg, sectionPaths) | ||
| D3Funnel.prototype._drawTopOval = function(svg, sectionPaths) | ||
| { | ||
@@ -427,13 +425,13 @@ var leftX = 0; | ||
| var paths = sectionPaths[0]; | ||
| var path = "M" + leftX + "," + paths[0][1] + | ||
| " Q" + centerX + "," + (paths[1][1] + this.curveHeight - 10) + | ||
| " " + rightX + "," + paths[2][1] + | ||
| " M" + rightX + ",10" + | ||
| " Q" + centerX + ",0" + | ||
| " " + leftX + ",10"; | ||
| var path = 'M' + leftX + ',' + paths[0][1] + | ||
| ' Q' + centerX + ',' + (paths[1][1] + this.curveHeight - 10) + | ||
| ' ' + rightX + ',' + paths[2][1] + | ||
| ' M' + rightX + ',10' + | ||
| ' Q' + centerX + ',0' + | ||
| ' ' + leftX + ',10'; | ||
| // Draw top oval | ||
| svg.append("path") | ||
| .attr("fill", shadeColor(this.data[0][2], -0.4)) | ||
| .attr("d", path); | ||
| svg.append('path') | ||
| .attr('fill', shadeColor(this.data[0][2], -0.4)) | ||
| .attr('d', path); | ||
| }; | ||
@@ -448,3 +446,3 @@ | ||
| */ | ||
| D3Funnel.prototype.__drawSection = function(index) | ||
| D3Funnel.prototype._drawSection = function(index) | ||
| { | ||
@@ -456,7 +454,7 @@ if (index === this.data.length) { | ||
| // Create a group just for this block | ||
| var group = this.svg.append("g"); | ||
| var group = this.svg.append('g'); | ||
| // Fetch path element | ||
| var path = this.__getSectionPath(group, index); | ||
| path.data(this.__getSectionData(index)); | ||
| var path = this._getSectionPath(group, index); | ||
| path.data(this._getSectionData(index)); | ||
@@ -468,12 +466,12 @@ // Add animation components | ||
| .duration(this.animation) | ||
| .ease("linear") | ||
| .attr("fill", this.__getColor(index)) | ||
| .attr("d", this.__getPathDefinition(index)) | ||
| .each("end", function() { | ||
| self.__drawSection(index + 1); | ||
| .ease('linear') | ||
| .attr('fill', this._getColor(index)) | ||
| .attr('d', this._getPathDefinition(index)) | ||
| .each('end', function() { | ||
| self._drawSection(index + 1); | ||
| }); | ||
| } else { | ||
| path.attr("fill", this.__getColor(index)) | ||
| .attr("d", this.__getPathDefinition(index)); | ||
| this.__drawSection(index + 1); | ||
| path.attr('fill', this._getColor(index)) | ||
| .attr('d', this._getPathDefinition(index)); | ||
| this._drawSection(index + 1); | ||
| } | ||
@@ -483,4 +481,4 @@ | ||
| if (this.hoverEffects) { | ||
| path.on("mouseover", this.__onMouseOver) | ||
| .on("mouseout", this.__onMouseOut); | ||
| path.on('mouseover', this._onMouseOver) | ||
| .on('mouseout', this._onMouseOut); | ||
| } | ||
@@ -490,6 +488,6 @@ | ||
| if (this.onItemClick) { | ||
| path.on( "click", this.onItemClick ); | ||
| path.on('click', this.onItemClick); | ||
| } | ||
| this.__addSectionLabel(group, index); | ||
| this._addSectionLabel(group, index); | ||
| }; | ||
@@ -503,8 +501,8 @@ | ||
| */ | ||
| D3Funnel.prototype.__getSectionPath = function(group, index) | ||
| D3Funnel.prototype._getSectionPath = function(group, index) | ||
| { | ||
| var path = group.append("path"); | ||
| var path = group.append('path'); | ||
| if (this.animation !== false) { | ||
| this.__addBeforeTransition(path, index); | ||
| this._addBeforeTransition(path, index); | ||
| } | ||
@@ -523,8 +521,8 @@ | ||
| */ | ||
| D3Funnel.prototype.__addBeforeTransition = function(path, index) | ||
| D3Funnel.prototype._addBeforeTransition = function(path, index) | ||
| { | ||
| var paths = this.sectionPaths[index]; | ||
| var beforePath = ""; | ||
| var beforeFill = ""; | ||
| var beforePath = ''; | ||
| var beforeFill = ''; | ||
@@ -534,26 +532,26 @@ // Construct the top of the trapezoid and leave the other elements | ||
| if (!this.isCurved) { | ||
| beforePath = "M" + paths[0][0] + "," + paths[0][1] + | ||
| " L" + paths[1][0] + "," + paths[1][1] + | ||
| " L" + paths[1][0] + "," + paths[1][1] + | ||
| " L" + paths[0][0] + "," + paths[0][1]; | ||
| beforePath = 'M' + paths[0][0] + ',' + paths[0][1] + | ||
| ' L' + paths[1][0] + ',' + paths[1][1] + | ||
| ' L' + paths[1][0] + ',' + paths[1][1] + | ||
| ' L' + paths[0][0] + ',' + paths[0][1]; | ||
| } else { | ||
| beforePath = "M" + paths[0][0] + "," + paths[0][1] + | ||
| " Q" + paths[1][0] + "," + paths[1][1] + | ||
| " " + paths[2][0] + "," + paths[2][1] + | ||
| " L" + paths[2][0] + "," + paths[2][1] + | ||
| " M" + paths[2][0] + "," + paths[2][1] + | ||
| " Q" + paths[1][0] + "," + paths[1][1] + | ||
| " " + paths[0][0] + "," + paths[0][1]; | ||
| beforePath = 'M' + paths[0][0] + ',' + paths[0][1] + | ||
| ' Q' + paths[1][0] + ',' + paths[1][1] + | ||
| ' ' + paths[2][0] + ',' + paths[2][1] + | ||
| ' L' + paths[2][0] + ',' + paths[2][1] + | ||
| ' M' + paths[2][0] + ',' + paths[2][1] + | ||
| ' Q' + paths[1][0] + ',' + paths[1][1] + | ||
| ' ' + paths[0][0] + ',' + paths[0][1]; | ||
| } | ||
| // Use previous fill color, if available | ||
| if (this.fillType === "solid") { | ||
| beforeFill = index > 0 ? this.__getColor(index - 1) : this.__getColor(index); | ||
| if (this.fillType === 'solid') { | ||
| beforeFill = index > 0 ? this._getColor(index - 1) : this._getColor(index); | ||
| // Use current background if gradient (gradients do not transition) | ||
| } else { | ||
| beforeFill = this.__getColor(index); | ||
| beforeFill = this._getColor(index); | ||
| } | ||
| path.attr("d", beforePath) | ||
| .attr("fill", beforeFill); | ||
| path.attr('d', beforePath) | ||
| .attr('fill', beforeFill); | ||
| }; | ||
@@ -566,3 +564,3 @@ | ||
| */ | ||
| D3Funnel.prototype.__getSectionData = function(index) | ||
| D3Funnel.prototype._getSectionData = function(index) | ||
| { | ||
@@ -572,5 +570,5 @@ return [{ | ||
| label: this.data[index][0], | ||
| value: this.data[index][1], | ||
| value: this._isArray(this.data[index][1]) ? this.data[index][1][0] : this.data[index][1], formattedValue: this._isArray(this.data[index][1]) ? this.data[index][1][1] : this.data[index][1].toLocaleString(), | ||
| baseColor: this.data[index][2], | ||
| fill: this.__getColor(index) | ||
| fill: this._getColor(index) | ||
| }]; | ||
@@ -587,8 +585,8 @@ }; | ||
| */ | ||
| D3Funnel.prototype.__getColor = function(index) | ||
| D3Funnel.prototype._getColor = function(index) | ||
| { | ||
| if (this.fillType === "solid") { | ||
| if (this.fillType === 'solid') { | ||
| return this.data[index][2]; | ||
| } else { | ||
| return "url(#gradient-" + index + ")"; | ||
| return 'url(#gradient-' + index + ')'; | ||
| } | ||
@@ -602,5 +600,5 @@ }; | ||
| */ | ||
| D3Funnel.prototype.__getPathDefinition = function(index) | ||
| D3Funnel.prototype._getPathDefinition = function(index) | ||
| { | ||
| var pathStr = ""; | ||
| var pathStr = ''; | ||
| var point = []; | ||
@@ -611,3 +609,3 @@ var paths = this.sectionPaths[index]; | ||
| point = paths[j]; | ||
| pathStr += point[2] + point[0] + "," + point[1] + " "; | ||
| pathStr += point[2] + point[0] + ',' + point[1] + ' '; | ||
| } | ||
@@ -623,5 +621,5 @@ | ||
| */ | ||
| D3Funnel.prototype.__onMouseOver = function(data) | ||
| D3Funnel.prototype._onMouseOver = function(data) | ||
| { | ||
| d3.select(this).attr("fill", shadeColor(data.baseColor, -0.2)); | ||
| d3.select(this).attr('fill', shadeColor(data.baseColor, -0.2)); | ||
| }; | ||
@@ -634,5 +632,5 @@ | ||
| */ | ||
| D3Funnel.prototype.__onMouseOut = function(data) | ||
| D3Funnel.prototype._onMouseOut = function(data) | ||
| { | ||
| d3.select(this).attr("fill", data.fill); | ||
| d3.select(this).attr('fill', data.fill); | ||
| }; | ||
@@ -646,7 +644,8 @@ | ||
| */ | ||
| D3Funnel.prototype.__addSectionLabel = function(group, index) | ||
| D3Funnel.prototype._addSectionLabel = function(group, index) | ||
| { | ||
| var i = index; | ||
| var paths = this.sectionPaths[index]; | ||
| var textStr = this.data[i][0] + ": " + this.data[i][1].toLocaleString(); | ||
| var sectionData = this._getSectionData(index)[0]; | ||
| var textStr = sectionData.label + ': ' + sectionData.formattedValue; | ||
| var textFill = this.data[i][3] || this.label.fill; | ||
@@ -659,13 +658,13 @@ | ||
| group.append("text") | ||
| group.append('text') | ||
| .text(textStr) | ||
| .attr({ | ||
| "x": textX, | ||
| "y": textY, | ||
| "text-anchor": "middle", | ||
| "dominant-baseline": "middle", | ||
| "fill": textFill, | ||
| "pointer-events": "none" | ||
| 'x': textX, | ||
| 'y': textY, | ||
| 'text-anchor': 'middle', | ||
| 'dominant-baseline': 'middle', | ||
| 'fill': textFill, | ||
| 'pointer-events': 'none' | ||
| }) | ||
| .style("font-size", this.label.fontSize); | ||
| .style('font-size', this.label.fontSize); | ||
| }; | ||
@@ -680,5 +679,5 @@ | ||
| */ | ||
| D3Funnel.prototype.__isArray = function(value) | ||
| D3Funnel.prototype._isArray = function(value) | ||
| { | ||
| return Object.prototype.toString.call(value) === "[object Array]"; | ||
| return Object.prototype.toString.call(value) === '[object Array]'; | ||
| }; | ||
@@ -694,3 +693,3 @@ | ||
| */ | ||
| D3Funnel.prototype.__extend = function(a, b) | ||
| D3Funnel.prototype._extend = function(a, b) | ||
| { | ||
@@ -726,3 +725,3 @@ var prop; | ||
| return "#" + converted.toString(16).slice(1); | ||
| return '#' + converted.toString(16).slice(1); | ||
| } | ||
@@ -732,2 +731,2 @@ | ||
| })(window); | ||
| })(window, d3); |
@@ -1,2 +0,2 @@ | ||
| /*! d3-funnel - v0.6.8 | 2015-05-28 */ | ||
| !function(a){"use strict";function b(a,b){var c=parseInt(a.slice(1),16),d=0>b?0:255,e=0>b?-1*b:b,f=c>>16,g=c>>8&255,h=255&c,i=16777216+65536*(Math.round((d-f)*e)+f)+256*(Math.round((d-g)*e)+g)+(Math.round((d-h)*e)+h);return"#"+i.toString(16).slice(1)}var c=function(a){this.selector=a,this.defaults={width:350,height:400,bottomWidth:1/3,bottomPinch:0,isCurved:!1,curveHeight:20,fillType:"solid",isInverted:!1,hoverEffects:!1,dynamicArea:!1,minHeight:!1,animation:!1,label:{fontSize:"14px",fill:"#fff"}}};c.prototype.draw=function(a,b){this.__initialize(a,b),d3.select(this.selector).selectAll("svg").remove(),this.svg=d3.select(this.selector).append("svg").attr("width",this.width).attr("height",this.height),this.sectionPaths=this.__makePaths(),"gradient"===this.fillType&&this.__defineColorGradients(this.svg),this.isCurved&&this.__drawTopOval(this.svg,this.sectionPaths),this.__drawSection(0)},c.prototype.__initialize=function(a,b){if(!this.__isArray(a)||0===a.length||!this.__isArray(a[0])||a[0].length<2)throw{name:"D3 Funnel Data Error",message:"Funnel data is not valid."};b="undefined"!=typeof b?b:{},this.data=a;var c=0,d=this.__extend({},this.defaults);d.width=parseInt(d3.select(this.selector).style("width"),10),d.height=parseInt(d3.select(this.selector).style("height"),10);var e=Object.keys(b);for(c=0;c<e.length;c++)"label"!==e[c]&&(d[e[c]]=b[e[c]]);if("label"in b){var f,g=/fontSize|fill/;for(f in b.label)f.match(g)&&(d.label[f]=b.label[f])}this.label=d.label,d.width<=0&&(d.width=this.defaults.width),d.height<=0&&(d.height=this.defaults.height);var h=d3.scale.category10();for(c=0;c<this.data.length;c++){var i=/^#([0-9a-f]{3}|[0-9a-f]{6})$/i;"2"in this.data[c]&&i.test(this.data[c][2])||(this.data[c][2]=h(c))}this.width=d.width,this.height=d.height,this.bottomWidth=d.width*d.bottomWidth,this.bottomPinch=d.bottomPinch,this.isCurved=d.isCurved,this.curveHeight=d.curveHeight,this.fillType=d.fillType,this.isInverted=d.isInverted,this.hoverEffects=d.hoverEffects,this.dynamicArea=d.dynamicArea,this.minHeight=d.minHeight,this.animation=d.animation,this.bottomLeftX=(this.width-this.bottomWidth)/2,this.dx=this.bottomPinch>0?this.bottomLeftX/(a.length-this.bottomPinch):this.bottomLeftX/a.length,this.dy=this.isCurved?(this.height-this.curveHeight)/a.length:this.height/a.length,this.onItemClick=d.onItemClick},c.prototype.__makePaths=function(){var a=[],b=this.dx,c=this.dy,d=0,e=this.width,f=0;this.isInverted&&(d=this.bottomLeftX,e=this.width-this.bottomLeftX);var g=0,h=0,i=0,j=this.width/2;this.isCurved&&(f=10);var k=this.width,l=0,m=this.height*(this.width+this.bottomWidth)/2,n=2*this.height/(this.width-this.bottomWidth);if(this.minHeight!==!1){var o=this.height-this.minHeight*this.data.length;m=o*(this.width+this.bottomWidth)/2}for(var p=0,q=0,r=0;r<this.data.length;r++)p+=this.data[r][1];for(r=0;r<this.data.length;r++){if(q=this.data[r][1],this.dynamicArea){var s=q/p,t=s*m;this.minHeight!==!1&&(t+=this.minHeight*(this.width+this.bottomWidth)/2),l=Math.sqrt((n*k*k-4*t)/n),b=k/2-l/2,c=2*t/(k+l),this.isCurved&&(c-=this.curveHeight/this.data.length),k=l}this.bottomPinch>0&&(this.isInverted?(this.dynamicArea||(b=this.dx),b=r<this.bottomPinch?0:b):r>=this.data.length-this.bottomPinch&&(b=0)),g=d+b,h=e-b,i=f+c,this.isInverted&&(g=d-b,h=e+b),a.push(this.isCurved?[[d,f,"M"],[j,f+(this.curveHeight-10),"Q"],[e,f,""],[h,i,"L"],[h,i,"M"],[j,i+this.curveHeight,"Q"],[g,i,""],[d,f,"L"]]:[[d,f,"M"],[e,f,"L"],[h,i,"L"],[g,i,"L"],[d,f,"L"]]),d=g,e=h,f=i}return a},c.prototype.__defineColorGradients=function(a){for(var c=a.append("defs"),d=0;d<this.data.length;d++)for(var e=this.data[d][2],f=b(e,-.25),g=c.append("linearGradient").attr({id:"gradient-"+d}),h=[[0,f],[40,e],[60,e],[100,f]],i=0;i<h.length;i++){var j=h[i];g.append("stop").attr({offset:j[0]+"%",style:"stop-color:"+j[1]})}},c.prototype.__drawTopOval=function(a,c){var d=0,e=this.width,f=this.width/2;this.isInverted&&(d=this.bottomLeftX,e=this.width-this.bottomLeftX);var g=c[0],h="M"+d+","+g[0][1]+" Q"+f+","+(g[1][1]+this.curveHeight-10)+" "+e+","+g[2][1]+" M"+e+",10 Q"+f+",0 "+d+",10";a.append("path").attr("fill",b(this.data[0][2],-.4)).attr("d",h)},c.prototype.__drawSection=function(a){if(a!==this.data.length){var b=this.svg.append("g"),c=this.__getSectionPath(b,a);if(c.data(this.__getSectionData(a)),this.animation!==!1){var d=this;c.transition().duration(this.animation).ease("linear").attr("fill",this.__getColor(a)).attr("d",this.__getPathDefinition(a)).each("end",function(){d.__drawSection(a+1)})}else c.attr("fill",this.__getColor(a)).attr("d",this.__getPathDefinition(a)),this.__drawSection(a+1);this.hoverEffects&&c.on("mouseover",this.__onMouseOver).on("mouseout",this.__onMouseOut),this.onItemClick&&c.on("click",this.onItemClick),this.__addSectionLabel(b,a)}},c.prototype.__getSectionPath=function(a,b){var c=a.append("path");return this.animation!==!1&&this.__addBeforeTransition(c,b),c},c.prototype.__addBeforeTransition=function(a,b){var c=this.sectionPaths[b],d="",e="";d=this.isCurved?"M"+c[0][0]+","+c[0][1]+" Q"+c[1][0]+","+c[1][1]+" "+c[2][0]+","+c[2][1]+" L"+c[2][0]+","+c[2][1]+" M"+c[2][0]+","+c[2][1]+" Q"+c[1][0]+","+c[1][1]+" "+c[0][0]+","+c[0][1]:"M"+c[0][0]+","+c[0][1]+" L"+c[1][0]+","+c[1][1]+" L"+c[1][0]+","+c[1][1]+" L"+c[0][0]+","+c[0][1],e=this.__getColor("solid"===this.fillType?b>0?b-1:b:b),a.attr("d",d).attr("fill",e)},c.prototype.__getSectionData=function(a){return[{index:a,label:this.data[a][0],value:this.data[a][1],baseColor:this.data[a][2],fill:this.__getColor(a)}]},c.prototype.__getColor=function(a){return"solid"===this.fillType?this.data[a][2]:"url(#gradient-"+a+")"},c.prototype.__getPathDefinition=function(a){for(var b="",c=[],d=this.sectionPaths[a],e=0;e<d.length;e++)c=d[e],b+=c[2]+c[0]+","+c[1]+" ";return b},c.prototype.__onMouseOver=function(a){d3.select(this).attr("fill",b(a.baseColor,-.2))},c.prototype.__onMouseOut=function(a){d3.select(this).attr("fill",a.fill)},c.prototype.__addSectionLabel=function(a,b){var c=b,d=this.sectionPaths[b],e=this.data[c][0]+": "+this.data[c][1].toLocaleString(),f=this.data[c][3]||this.label.fill,g=this.width/2,h=this.isCurved?(d[2][1]+d[3][1])/2+this.curveHeight/this.data.length:(d[1][1]+d[2][1])/2;a.append("text").text(e).attr({x:g,y:h,"text-anchor":"middle","dominant-baseline":"middle",fill:f,"pointer-events":"none"}).style("font-size",this.label.fontSize)},c.prototype.__isArray=function(a){return"[object Array]"===Object.prototype.toString.call(a)},c.prototype.__extend=function(a,b){var c;for(c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a},a.D3Funnel=c}(window); | ||
| /*! d3-funnel - v0.6.9 | 2015-06-03 */ | ||
| !function(a,b){"use strict";function c(a,b){var c=parseInt(a.slice(1),16),d=0>b?0:255,e=0>b?-1*b:b,f=c>>16,g=c>>8&255,h=255&c,i=16777216+65536*(Math.round((d-f)*e)+f)+256*(Math.round((d-g)*e)+g)+(Math.round((d-h)*e)+h);return"#"+i.toString(16).slice(1)}var d=function(a){this.selector=a,this.defaults={width:350,height:400,bottomWidth:1/3,bottomPinch:0,isCurved:!1,curveHeight:20,fillType:"solid",isInverted:!1,hoverEffects:!1,dynamicArea:!1,minHeight:!1,animation:!1,label:{fontSize:"14px",fill:"#fff"}}};d.prototype.draw=function(a,c){this._initialize(a,c),b.select(this.selector).selectAll("svg").remove(),this.svg=b.select(this.selector).append("svg").attr("width",this.width).attr("height",this.height),this.sectionPaths=this._makePaths(),"gradient"===this.fillType&&this._defineColorGradients(this.svg),this.isCurved&&this._drawTopOval(this.svg,this.sectionPaths),this._drawSection(0)},d.prototype._initialize=function(a,c){if(!this._isArray(a)||0===a.length||!this._isArray(a[0])||a[0].length<2)throw{name:"D3 Funnel Data Error",message:"Funnel data is not valid."};c="undefined"!=typeof c?c:{},this.data=a;var d=0,e=this._extend({},this.defaults);e.width=parseInt(b.select(this.selector).style("width"),10),e.height=parseInt(b.select(this.selector).style("height"),10);var f=Object.keys(c);for(d=0;d<f.length;d++)"label"!==f[d]&&(e[f[d]]=c[f[d]]);if("label"in c){var g,h=/fontSize|fill/;for(g in c.label)g.match(h)&&(e.label[g]=c.label[g])}this.label=e.label,e.width<=0&&(e.width=this.defaults.width),e.height<=0&&(e.height=this.defaults.height);var i=b.scale.category10();for(d=0;d<this.data.length;d++){var j=/^#([0-9a-f]{3}|[0-9a-f]{6})$/i;"2"in this.data[d]&&j.test(this.data[d][2])||(this.data[d][2]=i(d))}this.width=e.width,this.height=e.height,this.bottomWidth=e.width*e.bottomWidth,this.bottomPinch=e.bottomPinch,this.isCurved=e.isCurved,this.curveHeight=e.curveHeight,this.fillType=e.fillType,this.isInverted=e.isInverted,this.hoverEffects=e.hoverEffects,this.dynamicArea=e.dynamicArea,this.minHeight=e.minHeight,this.animation=e.animation,this.bottomLeftX=(this.width-this.bottomWidth)/2,this.dx=this.bottomPinch>0?this.bottomLeftX/(a.length-this.bottomPinch):this.bottomLeftX/a.length,this.dy=this.isCurved?(this.height-this.curveHeight)/a.length:this.height/a.length,this.onItemClick=e.onItemClick},d.prototype._makePaths=function(){var a=[],b=this.dx,c=this.dy,d=0,e=this.width,f=0;this.isInverted&&(d=this.bottomLeftX,e=this.width-this.bottomLeftX);var g=0,h=0,i=0,j=this.width/2;this.isCurved&&(f=10);var k=this.width,l=0,m=this.height*(this.width+this.bottomWidth)/2,n=2*this.height/(this.width-this.bottomWidth);if(this.minHeight!==!1){var o=this.height-this.minHeight*this.data.length;m=o*(this.width+this.bottomWidth)/2}for(var p=0,q=0,r=0;r<this.data.length;r++)p+=this._isArray(this.data[r][1])?this.data[r][1][0]:this.data[r][1];for(r=0;r<this.data.length;r++){if(q=this._isArray(this.data[r][1])?this.data[r][1][0]:this.data[r][1],this.dynamicArea){var s=q/p,t=s*m;this.minHeight!==!1&&(t+=this.minHeight*(this.width+this.bottomWidth)/2),l=Math.sqrt((n*k*k-4*t)/n),b=k/2-l/2,c=2*t/(k+l),this.isCurved&&(c-=this.curveHeight/this.data.length),k=l}this.bottomPinch>0&&(this.isInverted?(this.dynamicArea||(b=this.dx),b=r<this.bottomPinch?0:b):r>=this.data.length-this.bottomPinch&&(b=0)),g=d+b,h=e-b,i=f+c,this.isInverted&&(g=d-b,h=e+b),a.push(this.isCurved?[[d,f,"M"],[j,f+(this.curveHeight-10),"Q"],[e,f,""],[h,i,"L"],[h,i,"M"],[j,i+this.curveHeight,"Q"],[g,i,""],[d,f,"L"]]:[[d,f,"M"],[e,f,"L"],[h,i,"L"],[g,i,"L"],[d,f,"L"]]),d=g,e=h,f=i}return a},d.prototype._defineColorGradients=function(a){for(var b=a.append("defs"),d=0;d<this.data.length;d++)for(var e=this.data[d][2],f=c(e,-.25),g=b.append("linearGradient").attr({id:"gradient-"+d}),h=[[0,f],[40,e],[60,e],[100,f]],i=0;i<h.length;i++){var j=h[i];g.append("stop").attr({offset:j[0]+"%",style:"stop-color:"+j[1]})}},d.prototype._drawTopOval=function(a,b){var d=0,e=this.width,f=this.width/2;this.isInverted&&(d=this.bottomLeftX,e=this.width-this.bottomLeftX);var g=b[0],h="M"+d+","+g[0][1]+" Q"+f+","+(g[1][1]+this.curveHeight-10)+" "+e+","+g[2][1]+" M"+e+",10 Q"+f+",0 "+d+",10";a.append("path").attr("fill",c(this.data[0][2],-.4)).attr("d",h)},d.prototype._drawSection=function(a){if(a!==this.data.length){var b=this.svg.append("g"),c=this._getSectionPath(b,a);if(c.data(this._getSectionData(a)),this.animation!==!1){var d=this;c.transition().duration(this.animation).ease("linear").attr("fill",this._getColor(a)).attr("d",this._getPathDefinition(a)).each("end",function(){d._drawSection(a+1)})}else c.attr("fill",this._getColor(a)).attr("d",this._getPathDefinition(a)),this._drawSection(a+1);this.hoverEffects&&c.on("mouseover",this._onMouseOver).on("mouseout",this._onMouseOut),this.onItemClick&&c.on("click",this.onItemClick),this._addSectionLabel(b,a)}},d.prototype._getSectionPath=function(a,b){var c=a.append("path");return this.animation!==!1&&this._addBeforeTransition(c,b),c},d.prototype._addBeforeTransition=function(a,b){var c=this.sectionPaths[b],d="",e="";d=this.isCurved?"M"+c[0][0]+","+c[0][1]+" Q"+c[1][0]+","+c[1][1]+" "+c[2][0]+","+c[2][1]+" L"+c[2][0]+","+c[2][1]+" M"+c[2][0]+","+c[2][1]+" Q"+c[1][0]+","+c[1][1]+" "+c[0][0]+","+c[0][1]:"M"+c[0][0]+","+c[0][1]+" L"+c[1][0]+","+c[1][1]+" L"+c[1][0]+","+c[1][1]+" L"+c[0][0]+","+c[0][1],e=this._getColor("solid"===this.fillType?b>0?b-1:b:b),a.attr("d",d).attr("fill",e)},d.prototype._getSectionData=function(a){return[{index:a,label:this.data[a][0],value:this._isArray(this.data[a][1])?this.data[a][1][0]:this.data[a][1],formattedValue:this._isArray(this.data[a][1])?this.data[a][1][1]:this.data[a][1].toLocaleString(),baseColor:this.data[a][2],fill:this._getColor(a)}]},d.prototype._getColor=function(a){return"solid"===this.fillType?this.data[a][2]:"url(#gradient-"+a+")"},d.prototype._getPathDefinition=function(a){for(var b="",c=[],d=this.sectionPaths[a],e=0;e<d.length;e++)c=d[e],b+=c[2]+c[0]+","+c[1]+" ";return b},d.prototype._onMouseOver=function(a){b.select(this).attr("fill",c(a.baseColor,-.2))},d.prototype._onMouseOut=function(a){b.select(this).attr("fill",a.fill)},d.prototype._addSectionLabel=function(a,b){var c=b,d=this.sectionPaths[b],e=this._getSectionData(b)[0],f=e.label+": "+e.formattedValue,g=this.data[c][3]||this.label.fill,h=this.width/2,i=this.isCurved?(d[2][1]+d[3][1])/2+this.curveHeight/this.data.length:(d[1][1]+d[2][1])/2;a.append("text").text(f).attr({x:h,y:i,"text-anchor":"middle","dominant-baseline":"middle",fill:g,"pointer-events":"none"}).style("font-size",this.label.fontSize)},d.prototype._isArray=function(a){return"[object Array]"===Object.prototype.toString.call(a)},d.prototype._extend=function(a,b){var c;for(c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a},a.D3Funnel=d}(window,d3); |
@@ -9,6 +9,9 @@ module.exports = function(grunt) { | ||
| }, | ||
| main: { | ||
| files: { | ||
| src: ["src/d3-funnel/d3-funnel.js"] | ||
| } | ||
| main: ["src/d3-funnel/**/*.js"] | ||
| }, | ||
| jscs: { | ||
| src: "src/d3-funnel/**/*.js", | ||
| options: { | ||
| config: ".jscsrc", | ||
| verbose: true | ||
| } | ||
@@ -35,6 +38,7 @@ }, | ||
| grunt.loadNpmTasks("grunt-contrib-jshint"); | ||
| grunt.loadNpmTasks("grunt-jscs"); | ||
| grunt.loadNpmTasks("grunt-contrib-uglify"); | ||
| grunt.loadNpmTasks("grunt-contrib-concat"); | ||
| grunt.registerTask("default", ["jshint", "concat", "uglify"]); | ||
| grunt.registerTask("default", ["jshint", "jscs", "concat", "uglify"]); | ||
| }; |
| { | ||
| "name": "d3-funnel", | ||
| "version": "0.6.8", | ||
| "version": "0.6.9", | ||
| "description": "A library for rendering SVG funnel charts using D3.js", | ||
@@ -17,3 +17,4 @@ "author": "Jake Zatecky", | ||
| "grunt-contrib-concat": "~0.5.0", | ||
| "grunt-contrib-uglify": "~0.5.0" | ||
| "grunt-contrib-uglify": "~0.5.0", | ||
| "grunt-jscs": "^1.8.0" | ||
| }, | ||
@@ -20,0 +21,0 @@ "dependencies": { |
@@ -26,12 +26,12 @@ # D3 Funnel | ||
| <script> | ||
| var data = [ | ||
| ["Plants", 5000], | ||
| ["Flowers", 2500], | ||
| ["Perennials", 200], | ||
| ["Roses", 50] | ||
| ]; | ||
| var options = {}; | ||
| var data = [ | ||
| ['Plants', 5000], | ||
| ['Flowers', 2500], | ||
| ['Perennials', 200], | ||
| ['Roses', 50] | ||
| ]; | ||
| var options = {}; | ||
| var chart = new D3Funnel("#funnel"); | ||
| chart.draw(data, options); | ||
| var chart = new D3Funnel('#funnel'); | ||
| chart.draw(data, options); | ||
| </script> | ||
@@ -42,3 +42,2 @@ ``` | ||
| | Option | Description | Type | Default | | ||
@@ -52,3 +51,3 @@ | ---------------- | --------------------------------------------------------------------------- | -------- | ------------------- | | ||
| | `curveHeight` | The curvature amount (if `isCurved` is `true`). | int | `20` | | ||
| | `fillType` | Either `"solid"` or `"gradient"`. | string | `"solid"` | | ||
| | `fillType` | Either `"solid"` or `"gradient"`. | string | `'solid'` | | ||
| | `isInverted` | Whether the funnel is inverted (like a pyramid). | bool | `false` | | ||
@@ -59,10 +58,6 @@ | `hoverEffects` | Whether the funnel has effects on hover. | bool | `false` | | ||
| | `animation` | The load animation speed in milliseconds. | int/bool | `false` | | ||
| | `label.fontSize` | Any valid font size for the labels. | string | `"14px"` | | ||
| | `label.fill` | Any valid hex color for the label color | string | `"#fff"` | | ||
| | `label.fontSize` | Any valid font size for the labels. | string | `'14px'` | | ||
| | `label.fill` | Any valid hex color for the label color | string | `'#fff'` | | ||
| | `onItemClick` | Event handler if one of the items is clicked. | function | `function(d, i) {}` | | ||
| <table> | ||
| </table> | ||
| ## Advanced Data | ||
@@ -74,6 +69,6 @@ | ||
| var data = [ | ||
| ["Teal", 12000, "#008080" "#080800"], | ||
| ["Byzantium", 4000, "#702963"], | ||
| ["Persimmon", 2500, "#ff634d" "#6f34fd"], | ||
| ["Azure", 1500, "#007fff" "#07fff0"] | ||
| ['Teal', 12000, '#008080' '#080800'], | ||
| ['Byzantium', 4000, '#702963'], | ||
| ['Persimmon', 2500, '#ff634d' '#6f34fd'], | ||
| ['Azure', 1500, '#007fff' '#07fff0'] | ||
| // Background ---^ ^--- Label | ||
@@ -83,2 +78,14 @@ ]; | ||
| If you want to pass formatted values to be shown in the funnel, pass in an array | ||
| containing the value and formatted value: | ||
| ``` javascript | ||
| var data = [ | ||
| ['Teal', [12000, 'USD 12,000']], | ||
| ['Byzantium', [4000, 'USD 4,000']], | ||
| ['Persimmon', [2500, 'USD 2,500']], | ||
| ['Azure', [1500, 'USD 1,500']] | ||
| ]; | ||
| ``` | ||
| # License | ||
@@ -85,0 +92,0 @@ |
@@ -1,4 +0,5 @@ | ||
| (function(Navigation) { | ||
| (function() { | ||
| "use strict"; | ||
| /* global D3Funnel */ | ||
| 'use strict'; | ||
@@ -10,4 +11,4 @@ var PathCommand = function() | ||
| global.D3Funnel.Navigation.PathCommand = PathCommand; | ||
| D3Funnel.Navigation.PathCommand = PathCommand; | ||
| })(D3Funnel.Navigation); |
| (function(Navigation) { | ||
| "use strict"; | ||
| /* global D3Funnel */ | ||
| 'use strict'; | ||
@@ -22,3 +23,3 @@ /** | ||
| { | ||
| var compiled = "", | ||
| var compiled = '', | ||
| i; | ||
@@ -28,6 +29,6 @@ | ||
| if (i > 0) { | ||
| compiled += " "; | ||
| compiled += ' '; | ||
| } | ||
| compiled += path[0] + path[1] + "," + path[2]; | ||
| compiled += path[0] + path[1] + ',' + path[2]; | ||
| } | ||
@@ -34,0 +35,0 @@ |
@@ -1,6 +0,6 @@ | ||
| (function(global) { | ||
| (function(global, d3) { | ||
| /* global d3 */ | ||
| /* jshint bitwise: false */ | ||
| "use strict"; | ||
| 'use strict'; | ||
@@ -22,7 +22,7 @@ /** | ||
| height: 400, | ||
| bottomWidth: 1/3, | ||
| bottomWidth: 1 / 3, | ||
| bottomPinch: 0, | ||
| isCurved: false, | ||
| curveHeight: 20, | ||
| fillType: "solid", | ||
| fillType: 'solid', | ||
| isInverted: false, | ||
@@ -34,4 +34,4 @@ hoverEffects: false, | ||
| label: { | ||
| fontSize: "14px", | ||
| fill: "#fff" | ||
| fontSize: '14px', | ||
| fill: '#fff' | ||
| } | ||
@@ -56,18 +56,18 @@ }; | ||
| // Initialize chart options | ||
| this.__initialize(data, options); | ||
| this._initialize(data, options); | ||
| // Remove any previous drawings | ||
| d3.select(this.selector).selectAll("svg").remove(); | ||
| d3.select(this.selector).selectAll('svg').remove(); | ||
| // Add the SVG | ||
| this.svg = d3.select(this.selector) | ||
| .append("svg") | ||
| .attr("width", this.width) | ||
| .attr("height", this.height); | ||
| .append('svg') | ||
| .attr('width', this.width) | ||
| .attr('height', this.height); | ||
| this.sectionPaths = this.__makePaths(); | ||
| this.sectionPaths = this._makePaths(); | ||
| // Define color gradients | ||
| if (this.fillType === "gradient") { | ||
| this.__defineColorGradients(this.svg); | ||
| if (this.fillType === 'gradient') { | ||
| this._defineColorGradients(this.svg); | ||
| } | ||
@@ -77,7 +77,7 @@ | ||
| if (this.isCurved) { | ||
| this.__drawTopOval(this.svg, this.sectionPaths); | ||
| this._drawTopOval(this.svg, this.sectionPaths); | ||
| } | ||
| // Add each block section | ||
| this.__drawSection(0); | ||
| this._drawSection(0); | ||
| }; | ||
@@ -93,9 +93,9 @@ | ||
| */ | ||
| D3Funnel.prototype.__initialize = function(data, options) | ||
| D3Funnel.prototype._initialize = function(data, options) | ||
| { | ||
| if (!this.__isArray(data) || data.length === 0 || | ||
| !this.__isArray(data[0]) || data[0].length < 2) { | ||
| if (!this._isArray(data) || data.length === 0 || | ||
| !this._isArray(data[0]) || data[0].length < 2) { | ||
| throw { | ||
| name: "D3 Funnel Data Error", | ||
| message: "Funnel data is not valid." | ||
| name: 'D3 Funnel Data Error', | ||
| message: 'Funnel data is not valid.' | ||
| }; | ||
@@ -105,3 +105,3 @@ } | ||
| // Initialize options if not set | ||
| options = typeof options !== "undefined" ? options : {}; | ||
| options = typeof options !== 'undefined' ? options : {}; | ||
@@ -115,5 +115,5 @@ this.data = data; | ||
| // Set the default width and height based on the container | ||
| var settings = this.__extend({}, this.defaults); | ||
| settings.width = parseInt(d3.select(this.selector).style("width"), 10); | ||
| settings.height = parseInt(d3.select(this.selector).style("height"), 10); | ||
| var settings = this._extend({}, this.defaults); | ||
| settings.width = parseInt(d3.select(this.selector).style('width'), 10); | ||
| settings.height = parseInt(d3.select(this.selector).style('height'), 10); | ||
@@ -123,3 +123,3 @@ // Overwrite default settings with user options | ||
| for (i = 0; i < keys.length; i++) { | ||
| if (keys[i] !== "label") { | ||
| if (keys[i] !== 'label') { | ||
| settings[keys[i]] = options[keys[i]]; | ||
@@ -130,3 +130,3 @@ } | ||
| // Label settings | ||
| if ("label" in options) { | ||
| if ('label' in options) { | ||
| var validLabelOptions = /fontSize|fill/; | ||
@@ -157,3 +157,3 @@ var labelOption; | ||
| // If a color is not set for the record, add one | ||
| if (!("2" in this.data[i]) || !hexExpression.test(this.data[i][2])) { | ||
| if (!('2' in this.data[i]) || !hexExpression.test(this.data[i][2])) { | ||
| this.data[i][2] = colorScale(i); | ||
@@ -201,3 +201,3 @@ } | ||
| */ | ||
| D3Funnel.prototype.__makePaths = function() | ||
| D3Funnel.prototype._makePaths = function() | ||
| { | ||
@@ -252,3 +252,3 @@ var paths = []; | ||
| for (var i = 0; i < this.data.length; i++) { | ||
| totalCount += this.data[i][1]; | ||
| totalCount += this._isArray(this.data[i][1]) ? this.data[i][1][0] : this.data[i][1]; | ||
| } | ||
@@ -259,3 +259,3 @@ | ||
| for (i = 0; i < this.data.length; i++) { | ||
| count = this.data[i][1]; | ||
| count = this._isArray(this.data[i][1]) ? this.data[i][1][0] : this.data[i][1]; | ||
@@ -276,3 +276,3 @@ // Calculate dynamic shapes based on area | ||
| if (this.isCurved) { | ||
| dy = dy - (this.curveHeight/this.data.length); | ||
| dy = dy - (this.curveHeight / this.data.length); | ||
| } | ||
@@ -291,6 +291,5 @@ | ||
| } | ||
| } | ||
| // Pinch at the first sections relating to the bottom pinch | ||
| // Revert back to normal velocity after pinch | ||
| else { | ||
| } else { | ||
| // Revert velocity back to the intial if we are using | ||
@@ -322,28 +321,27 @@ // static area's (prevents zero velocity if isInverted | ||
| // Top Bezier curve | ||
| [prevLeftX, prevHeight, "M"], | ||
| [middle, prevHeight + (this.curveHeight - 10), "Q"], | ||
| [prevRightX, prevHeight, ""], | ||
| [prevLeftX, prevHeight, 'M'], | ||
| [middle, prevHeight + (this.curveHeight - 10), 'Q'], | ||
| [prevRightX, prevHeight, ''], | ||
| // Right line | ||
| [nextRightX, nextHeight, "L"], | ||
| [nextRightX, nextHeight, 'L'], | ||
| // Bottom Bezier curve | ||
| [nextRightX, nextHeight, "M"], | ||
| [middle, nextHeight + this.curveHeight, "Q"], | ||
| [nextLeftX, nextHeight, ""], | ||
| [nextRightX, nextHeight, 'M'], | ||
| [middle, nextHeight + this.curveHeight, 'Q'], | ||
| [nextLeftX, nextHeight, ''], | ||
| // Left line | ||
| [prevLeftX, prevHeight, "L"] | ||
| [prevLeftX, prevHeight, 'L'] | ||
| ]); | ||
| } | ||
| // Plot straight lines | ||
| else { | ||
| } else { | ||
| paths.push([ | ||
| // Start position | ||
| [prevLeftX, prevHeight, "M"], | ||
| [prevLeftX, prevHeight, 'M'], | ||
| // Move to right | ||
| [prevRightX, prevHeight, "L"], | ||
| [prevRightX, prevHeight, 'L'], | ||
| // Move down | ||
| [nextRightX, nextHeight, "L"], | ||
| [nextRightX, nextHeight, 'L'], | ||
| // Move to left | ||
| [nextLeftX, nextHeight, "L"], | ||
| [nextLeftX, nextHeight, 'L'], | ||
| // Wrap back to top | ||
| [prevLeftX, prevHeight, "L"], | ||
| [prevLeftX, prevHeight, 'L'] | ||
| ]); | ||
@@ -368,5 +366,5 @@ } | ||
| */ | ||
| D3Funnel.prototype.__defineColorGradients = function(svg) | ||
| D3Funnel.prototype._defineColorGradients = function(svg) | ||
| { | ||
| var defs = svg.append("defs"); | ||
| var defs = svg.append('defs'); | ||
@@ -379,5 +377,5 @@ // Create a gradient for each section | ||
| // Create linear gradient | ||
| var gradient = defs.append("linearGradient") | ||
| var gradient = defs.append('linearGradient') | ||
| .attr({ | ||
| id: "gradient-" + i | ||
| id: 'gradient-' + i | ||
| }); | ||
@@ -396,5 +394,5 @@ | ||
| var stop = stops[j]; | ||
| gradient.append("stop").attr({ | ||
| offset: stop[0] + "%", | ||
| style: "stop-color:" + stop[1] | ||
| gradient.append('stop').attr({ | ||
| offset: stop[0] + '%', | ||
| style: 'stop-color:' + stop[1] | ||
| }); | ||
@@ -413,3 +411,3 @@ } | ||
| */ | ||
| D3Funnel.prototype.__drawTopOval = function(svg, sectionPaths) | ||
| D3Funnel.prototype._drawTopOval = function(svg, sectionPaths) | ||
| { | ||
@@ -427,13 +425,13 @@ var leftX = 0; | ||
| var paths = sectionPaths[0]; | ||
| var path = "M" + leftX + "," + paths[0][1] + | ||
| " Q" + centerX + "," + (paths[1][1] + this.curveHeight - 10) + | ||
| " " + rightX + "," + paths[2][1] + | ||
| " M" + rightX + ",10" + | ||
| " Q" + centerX + ",0" + | ||
| " " + leftX + ",10"; | ||
| var path = 'M' + leftX + ',' + paths[0][1] + | ||
| ' Q' + centerX + ',' + (paths[1][1] + this.curveHeight - 10) + | ||
| ' ' + rightX + ',' + paths[2][1] + | ||
| ' M' + rightX + ',10' + | ||
| ' Q' + centerX + ',0' + | ||
| ' ' + leftX + ',10'; | ||
| // Draw top oval | ||
| svg.append("path") | ||
| .attr("fill", shadeColor(this.data[0][2], -0.4)) | ||
| .attr("d", path); | ||
| svg.append('path') | ||
| .attr('fill', shadeColor(this.data[0][2], -0.4)) | ||
| .attr('d', path); | ||
| }; | ||
@@ -448,3 +446,3 @@ | ||
| */ | ||
| D3Funnel.prototype.__drawSection = function(index) | ||
| D3Funnel.prototype._drawSection = function(index) | ||
| { | ||
@@ -456,7 +454,7 @@ if (index === this.data.length) { | ||
| // Create a group just for this block | ||
| var group = this.svg.append("g"); | ||
| var group = this.svg.append('g'); | ||
| // Fetch path element | ||
| var path = this.__getSectionPath(group, index); | ||
| path.data(this.__getSectionData(index)); | ||
| var path = this._getSectionPath(group, index); | ||
| path.data(this._getSectionData(index)); | ||
@@ -468,12 +466,12 @@ // Add animation components | ||
| .duration(this.animation) | ||
| .ease("linear") | ||
| .attr("fill", this.__getColor(index)) | ||
| .attr("d", this.__getPathDefinition(index)) | ||
| .each("end", function() { | ||
| self.__drawSection(index + 1); | ||
| .ease('linear') | ||
| .attr('fill', this._getColor(index)) | ||
| .attr('d', this._getPathDefinition(index)) | ||
| .each('end', function() { | ||
| self._drawSection(index + 1); | ||
| }); | ||
| } else { | ||
| path.attr("fill", this.__getColor(index)) | ||
| .attr("d", this.__getPathDefinition(index)); | ||
| this.__drawSection(index + 1); | ||
| path.attr('fill', this._getColor(index)) | ||
| .attr('d', this._getPathDefinition(index)); | ||
| this._drawSection(index + 1); | ||
| } | ||
@@ -483,4 +481,4 @@ | ||
| if (this.hoverEffects) { | ||
| path.on("mouseover", this.__onMouseOver) | ||
| .on("mouseout", this.__onMouseOut); | ||
| path.on('mouseover', this._onMouseOver) | ||
| .on('mouseout', this._onMouseOut); | ||
| } | ||
@@ -490,6 +488,6 @@ | ||
| if (this.onItemClick) { | ||
| path.on( "click", this.onItemClick ); | ||
| path.on('click', this.onItemClick); | ||
| } | ||
| this.__addSectionLabel(group, index); | ||
| this._addSectionLabel(group, index); | ||
| }; | ||
@@ -503,8 +501,8 @@ | ||
| */ | ||
| D3Funnel.prototype.__getSectionPath = function(group, index) | ||
| D3Funnel.prototype._getSectionPath = function(group, index) | ||
| { | ||
| var path = group.append("path"); | ||
| var path = group.append('path'); | ||
| if (this.animation !== false) { | ||
| this.__addBeforeTransition(path, index); | ||
| this._addBeforeTransition(path, index); | ||
| } | ||
@@ -523,8 +521,8 @@ | ||
| */ | ||
| D3Funnel.prototype.__addBeforeTransition = function(path, index) | ||
| D3Funnel.prototype._addBeforeTransition = function(path, index) | ||
| { | ||
| var paths = this.sectionPaths[index]; | ||
| var beforePath = ""; | ||
| var beforeFill = ""; | ||
| var beforePath = ''; | ||
| var beforeFill = ''; | ||
@@ -534,26 +532,26 @@ // Construct the top of the trapezoid and leave the other elements | ||
| if (!this.isCurved) { | ||
| beforePath = "M" + paths[0][0] + "," + paths[0][1] + | ||
| " L" + paths[1][0] + "," + paths[1][1] + | ||
| " L" + paths[1][0] + "," + paths[1][1] + | ||
| " L" + paths[0][0] + "," + paths[0][1]; | ||
| beforePath = 'M' + paths[0][0] + ',' + paths[0][1] + | ||
| ' L' + paths[1][0] + ',' + paths[1][1] + | ||
| ' L' + paths[1][0] + ',' + paths[1][1] + | ||
| ' L' + paths[0][0] + ',' + paths[0][1]; | ||
| } else { | ||
| beforePath = "M" + paths[0][0] + "," + paths[0][1] + | ||
| " Q" + paths[1][0] + "," + paths[1][1] + | ||
| " " + paths[2][0] + "," + paths[2][1] + | ||
| " L" + paths[2][0] + "," + paths[2][1] + | ||
| " M" + paths[2][0] + "," + paths[2][1] + | ||
| " Q" + paths[1][0] + "," + paths[1][1] + | ||
| " " + paths[0][0] + "," + paths[0][1]; | ||
| beforePath = 'M' + paths[0][0] + ',' + paths[0][1] + | ||
| ' Q' + paths[1][0] + ',' + paths[1][1] + | ||
| ' ' + paths[2][0] + ',' + paths[2][1] + | ||
| ' L' + paths[2][0] + ',' + paths[2][1] + | ||
| ' M' + paths[2][0] + ',' + paths[2][1] + | ||
| ' Q' + paths[1][0] + ',' + paths[1][1] + | ||
| ' ' + paths[0][0] + ',' + paths[0][1]; | ||
| } | ||
| // Use previous fill color, if available | ||
| if (this.fillType === "solid") { | ||
| beforeFill = index > 0 ? this.__getColor(index - 1) : this.__getColor(index); | ||
| if (this.fillType === 'solid') { | ||
| beforeFill = index > 0 ? this._getColor(index - 1) : this._getColor(index); | ||
| // Use current background if gradient (gradients do not transition) | ||
| } else { | ||
| beforeFill = this.__getColor(index); | ||
| beforeFill = this._getColor(index); | ||
| } | ||
| path.attr("d", beforePath) | ||
| .attr("fill", beforeFill); | ||
| path.attr('d', beforePath) | ||
| .attr('fill', beforeFill); | ||
| }; | ||
@@ -566,3 +564,3 @@ | ||
| */ | ||
| D3Funnel.prototype.__getSectionData = function(index) | ||
| D3Funnel.prototype._getSectionData = function(index) | ||
| { | ||
@@ -572,5 +570,5 @@ return [{ | ||
| label: this.data[index][0], | ||
| value: this.data[index][1], | ||
| value: this._isArray(this.data[index][1]) ? this.data[index][1][0] : this.data[index][1], formattedValue: this._isArray(this.data[index][1]) ? this.data[index][1][1] : this.data[index][1].toLocaleString(), | ||
| baseColor: this.data[index][2], | ||
| fill: this.__getColor(index) | ||
| fill: this._getColor(index) | ||
| }]; | ||
@@ -587,8 +585,8 @@ }; | ||
| */ | ||
| D3Funnel.prototype.__getColor = function(index) | ||
| D3Funnel.prototype._getColor = function(index) | ||
| { | ||
| if (this.fillType === "solid") { | ||
| if (this.fillType === 'solid') { | ||
| return this.data[index][2]; | ||
| } else { | ||
| return "url(#gradient-" + index + ")"; | ||
| return 'url(#gradient-' + index + ')'; | ||
| } | ||
@@ -602,5 +600,5 @@ }; | ||
| */ | ||
| D3Funnel.prototype.__getPathDefinition = function(index) | ||
| D3Funnel.prototype._getPathDefinition = function(index) | ||
| { | ||
| var pathStr = ""; | ||
| var pathStr = ''; | ||
| var point = []; | ||
@@ -611,3 +609,3 @@ var paths = this.sectionPaths[index]; | ||
| point = paths[j]; | ||
| pathStr += point[2] + point[0] + "," + point[1] + " "; | ||
| pathStr += point[2] + point[0] + ',' + point[1] + ' '; | ||
| } | ||
@@ -623,5 +621,5 @@ | ||
| */ | ||
| D3Funnel.prototype.__onMouseOver = function(data) | ||
| D3Funnel.prototype._onMouseOver = function(data) | ||
| { | ||
| d3.select(this).attr("fill", shadeColor(data.baseColor, -0.2)); | ||
| d3.select(this).attr('fill', shadeColor(data.baseColor, -0.2)); | ||
| }; | ||
@@ -634,5 +632,5 @@ | ||
| */ | ||
| D3Funnel.prototype.__onMouseOut = function(data) | ||
| D3Funnel.prototype._onMouseOut = function(data) | ||
| { | ||
| d3.select(this).attr("fill", data.fill); | ||
| d3.select(this).attr('fill', data.fill); | ||
| }; | ||
@@ -646,7 +644,8 @@ | ||
| */ | ||
| D3Funnel.prototype.__addSectionLabel = function(group, index) | ||
| D3Funnel.prototype._addSectionLabel = function(group, index) | ||
| { | ||
| var i = index; | ||
| var paths = this.sectionPaths[index]; | ||
| var textStr = this.data[i][0] + ": " + this.data[i][1].toLocaleString(); | ||
| var sectionData = this._getSectionData(index)[0]; | ||
| var textStr = sectionData.label + ': ' + sectionData.formattedValue; | ||
| var textFill = this.data[i][3] || this.label.fill; | ||
@@ -659,13 +658,13 @@ | ||
| group.append("text") | ||
| group.append('text') | ||
| .text(textStr) | ||
| .attr({ | ||
| "x": textX, | ||
| "y": textY, | ||
| "text-anchor": "middle", | ||
| "dominant-baseline": "middle", | ||
| "fill": textFill, | ||
| "pointer-events": "none" | ||
| 'x': textX, | ||
| 'y': textY, | ||
| 'text-anchor': 'middle', | ||
| 'dominant-baseline': 'middle', | ||
| 'fill': textFill, | ||
| 'pointer-events': 'none' | ||
| }) | ||
| .style("font-size", this.label.fontSize); | ||
| .style('font-size', this.label.fontSize); | ||
| }; | ||
@@ -680,5 +679,5 @@ | ||
| */ | ||
| D3Funnel.prototype.__isArray = function(value) | ||
| D3Funnel.prototype._isArray = function(value) | ||
| { | ||
| return Object.prototype.toString.call(value) === "[object Array]"; | ||
| return Object.prototype.toString.call(value) === '[object Array]'; | ||
| }; | ||
@@ -694,3 +693,3 @@ | ||
| */ | ||
| D3Funnel.prototype.__extend = function(a, b) | ||
| D3Funnel.prototype._extend = function(a, b) | ||
| { | ||
@@ -726,3 +725,3 @@ var prop; | ||
| return "#" + converted.toString(16).slice(1); | ||
| return '#' + converted.toString(16).slice(1); | ||
| } | ||
@@ -732,2 +731,2 @@ | ||
| })(window); | ||
| })(window, d3); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by8.33%
91
Worsened metrics
- Total package byte prevSize
- decreased by-79.58%
61663
- Dev dependency count
- increased by25%
5
- Number of package files
- decreased by-4.76%
20
- Lines of code
- decreased by-40.19%
1289
No dependency changes