radial-progress-chart/dist/radial-progress-chart.min.js

A customizable Radial Progress Chart written on the top of D3.js.

(function(e){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=e()}else if(typeof define==="function"&&define.amd){define([],e)}else{var t;if(typeof window!=="undefined"){t=window}else if(typeof global!=="undefined"){t=global}else if(typeof self!=="undefined"){t=self}else{t=this}t.RadialProgressChart=e()}})(function(){var e,t,r;return function n(e,t,r){function i(a,s){if(!t[a]){if(!e[a]){var l=typeof require=="function"&&require;if(!s&&l)return l(a,!0);if(o)return o(a,!0);var d=new Error("Cannot find module '"+a+"'");throw d.code="MODULE_NOT_FOUND",d}var f=t[a]={exports:{}};e[a][0].call(f.exports,function(t){var r=e[a][1][t];return i(r?r:t)},f,f.exports,n,e,t,r)}return t[a].exports}var o=typeof require=="function"&&require;for(var a=0;a<r.length;a++)i(r[a]);return i}({1:[function(e,t,r){"use strict";var n;function i(t,r){n=typeof window!=="undefined"&&window.d3?window.d3:typeof e!=="undefined"?e("d3"):undefined;if(!n)throw new Error("d3 object is missing. D3.js library has to be loaded before.");var o=this;o.options=i.normalizeOptions(r);var a=o.options.series,s=15+(o.options.diameter/2+o.options.stroke.width*o.options.series.length+(o.options.stroke.gap*o.options.series.length-1))*2,l=s,d="0 0 "+l+" "+s,f=2*Math.PI,p=[],c=[];function u(e){var t=p[e.index];if(t)return t;t=e.index===0?o.options.diameter/2:c[e.index-1]+o.options.stroke.gap;p[e.index]=t;return t}function g(e){var t=c[e.index];if(t)return t;t=p[e.index]+o.options.stroke.width;c[e.index]=t;return t}o.progress=n.svg.arc().startAngle(0).endAngle(function(e){return e.percentage/100*f}).innerRadius(u).outerRadius(g).cornerRadius(function(e){var t=e.percentage>=90?(100-e.percentage)*.1:1;return o.options.stroke.width/2*t});var h=n.svg.arc().startAngle(0).endAngle(f).innerRadius(u).outerRadius(g);o.svg=n.select(t).append("svg").attr("preserveAspectRatio","xMinYMin meet").attr("viewBox",d).append("g").attr("transform","translate("+s/2+","+l/2+")");var v=o.svg.append("svg:defs");a.forEach(function(e){if(e.color.linearGradient||e.color.radialGradient){var t=i.Gradient.toSVGElement("gradient"+e.index,e.color);v.node().appendChild(t)}});v=o.svg.append("svg:defs");var y="dropshadow-"+Math.random();var x=v.append("filter").attr("id",y);if(o.options.shadow.width>0){x.append("feGaussianBlur").attr("in","SourceAlpha").attr("stdDeviation",o.options.shadow.width).attr("result","blur");x.append("feOffset").attr("in","blur").attr("dx",1).attr("dy",1).attr("result","offsetBlur")}var m=x.append("feMerge");m.append("feMergeNode").attr("in","offsetBlur");m.append("feMergeNode").attr("in","SourceGraphic");if(o.options.center){o.svg.append("text").attr("class","rbc-center-text").attr("text-anchor","middle").attr("x",o.options.center.x+"px").attr("y",o.options.center.y+"px").selectAll("tspan").data(o.options.center.content).enter().append("tspan").attr("dominant-baseline",function(){if(o.options.center.content.length===1){return"central"}}).attr("class",function(e,t){return"rbc-center-text-line"+t}).attr("x",0).attr("dy",function(e,t){if(t>0){return"1.1em"}}).each(function(e){if(typeof e==="function"){this.callback=e}}).text(function(e){if(typeof e==="string"){return e}return""})}o.field=o.svg.selectAll("g").data(a).enter().append("g");o.field.append("path").attr("class","progress").attr("filter","url(#"+y+")");o.field.append("path").attr("class","bg").style("fill",function(e){return e.color.background}).style("opacity",.2).attr("d",h);o.field.append("text").classed("rbc-label rbc-label-start",true).attr("dominant-baseline","central").attr("x","10").attr("y",function(e){return-(o.options.diameter/2+e.index*(o.options.stroke.gap+o.options.stroke.width)+o.options.stroke.width/2)}).text(function(e){return e.labelStart});o.update()}i.prototype.update=function(e){var t=this;if(e){if(typeof e==="number"){e=[e]}var r;if(Array.isArray(e)){r=e}else if(typeof e==="object"){r=e.series||[]}for(var i=0;i<r.length;i++){this.options.series[i].previousValue=this.options.series[i].value;var o=r[i];if(typeof o==="number"){this.options.series[i].value=o}else if(typeof o==="object"){this.options.series[i].value=o.value}}}t.options.series.forEach(function(e){e.fromPercentage=e.percentage?e.percentage:5;e.percentage=(e.value-t.options.min)*100/(t.options.max-t.options.min)});var a=t.svg.select("text.rbc-center-text");t.field.select("path.progress").interrupt().transition().duration(t.options.animation.duration).delay(function(e,r){return r*t.options.animation.delay}).ease("elastic").attrTween("d",function(e){var r=n.interpolateNumber(e.fromPercentage,e.percentage);return function(n){e.percentage=r(n);return t.progress(e)}}).tween("center",function(e){if(t.options.center){var r=t.options.round?n.interpolateRound:n.interpolateNumber;var i=r(e.previousValue||0,e.value);return function(t){a.selectAll("tspan").each(function(){if(this.callback){n.select(this).text(this.callback(i(t),e.index,e))}})}}}).tween("interpolate-color",function(e){if(e.color.interpolate&&e.color.interpolate.length==2){var t=n.interpolateHsl(e.color.interpolate[0],e.color.interpolate[1]);return function(r){var i=t(e.percentage/100);n.select(this).style("fill",i);n.select(this.parentNode).select("path.bg").style("fill",i)}}}).style("fill",function(e){if(e.color.solid){return e.color.solid}if(e.color.linearGradient||e.color.radialGradient){return"url(#gradient"+e.index+")"}})};i.prototype.destroy=function(){this.svg.remove();delete this.svg};i.normalizeOptions=function(e){if(!e||typeof e!=="object"){e={}}var t={diameter:e.diameter||100,stroke:{width:e.stroke&&e.stroke.width||40,gap:e.stroke&&e.stroke.gap||2},shadow:{width:!e.shadow||e.shadow.width===null?4:e.shadow.width},animation:{duration:e.animation&&e.animation.duration||1750,delay:e.animation&&e.animation.delay||200},min:e.min||0,max:e.max||100,round:e.round!==undefined?!!e.round:true,series:e.series||[],center:i.normalizeCenter(e.center)};var r=new i.ColorsIterator;for(var n=0,o=t.series.length;n<o;n++){var a=e.series[n];if(typeof a==="number"){a={value:a}}t.series[n]={index:n,value:a.value,labelStart:a.labelStart,color:i.normalizeColor(a.color,r)}}return t};i.normalizeColor=function(e,t){if(!e){e={solid:t.next()}}else if(typeof e==="string"){e={solid:e}}else if(Array.isArray(e)){e={interpolate:e}}else if(typeof e==="object"){if(!e.solid&&!e.interpolate&&!e.linearGradient&&!e.radialGradient){e.solid=t.next()}}if(e.interpolate){if(e.interpolate.length!==2){throw new Error("interpolate array should contain two colors")}}if(e.linearGradient||e.radialGradient){if(!e.stops||!Array.isArray(e.stops)||e.stops.length!==2){throw new Error("gradient syntax is malformed")}}if(!e.background){if(e.solid){e.background=e.solid}else if(e.interpolate){e.background=e.interpolate[0]}else if(e.linearGradient||e.radialGradient){e.background=e.stops[0]["stop-color"]}}return e};i.normalizeCenter=function(e){if(!e)return null;if(e.constructor!==Object){e={content:e}}e.content=e.content||[];e.x=e.x||0;e.y=e.y||0;if(!Array.isArray(e.content)){e.content=[e.content]}return e};i.Gradient=function(){function e(){}e.toSVGElement=function(e,t){var r=t.linearGradient?"linearGradient":"radialGradient";var i=n.select(document.createElementNS(n.ns.prefix.svg,r)).attr(t[r]).attr("id",e);t.stops.forEach(function(e){i.append("svg:stop").attr(e)});this.background=t.stops[0]["stop-color"];return i.node()};return e}();i.ColorsIterator=function(){e.DEFAULT_COLORS=["#1ad5de","#a0ff03","#e90b3a","#ff9500","#007aff","#ffcc00","#5856d6","#8e8e93"];function e(){this.index=0}e.prototype.next=function(){if(this.index===e.DEFAULT_COLORS.length){this.index=0}return e.DEFAULT_COLORS[this.index++]};return e}();if(typeof t!=="undefined")t.exports=i},{d3:undefined}]},{},[1])(1)});