@opitzconsulting/pie-chart/bundles/opitzconsulting-pie-chart.umd.min.js

animated pie chart component

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("d3"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define("@opitzconsulting/pie-chart",["exports","@angular/core","d3","@angular/platform-browser"],e):e((t.opitzconsulting=t.opitzconsulting||{},t.opitzconsulting["pie-chart"]={}),t.ng.core,null,t.ng.platformBrowser)}(this,function(t,e,s,a){"use strict";var n=function(){function t(){}return t.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}],t.ctorParameters=function(){return[]},t.ngInjectableDef=e.defineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t}(),r=function(){function t(t){this.element=t,this.data=[],this.width=250,this.height=250,this.duration=1e3,this.innerSpacing=0,this.outerSpacing=1,this.chartClick=new e.EventEmitter,this.chartHover=new e.EventEmitter,this.curData=[],this.endData=[],this.lastData=[],this.interrupt=undefined}return t.prototype.deepCopy=function(t){return JSON.parse(JSON.stringify(t))},t.prototype.ngOnInit=function(){this.tooltip=this.element.nativeElement.querySelector("div.pie-chart-tooltip")},t.prototype.ngOnChanges=function(t){this.detectDataChange()},t.prototype.ngDoCheck=function(){this.detectDataChange()},t.prototype.detectDataChange=function(){var t=this.data.length!==this.lastData.length;if(!1===t)for(var e=0;e<this.data.length;++e){var a=this.data[e],n=this.lastData[e];if(t=t||a.caption!==n.caption||a.color!==n.color||a.value!==n.value)break}t&&(this.render(),this.lastData=this.deepCopy(this.data))},t.prototype.generateRandomColor=function(t){for(var e,a=function(t,e,a){return a<0&&(a+=1),1<a&&(a-=1),a<1/6?t+6*(e-t)*a:a<.5?e:a<2/3?t+(e-t)*(2/3-a)*6:t},n=!1;!1===n;){var r=(Math.random()+.618033988749895)%1,i=1.2-.8,o=a(i,.8,r+1/3),c=a(i,.8,r),s=a(i,.8,r-1/3);e="#"+Math.round(255*o).toString(16)+Math.round(255*c).toString(16)+Math.round(255*s).toString(16),n=0===this.data.map(function(t){return t.color}).filter(function(t){return t===e}).length}return e},t.prototype.generatePieArcData=function(t,e,a,n,r){var i={data:t,index:e,value:a,startAngle:n,endAngle:r,padAngle:0,innerRadius:this.radius-40,outerRadius:this.radius};return i.data.path=this.pathGenerator(i),i},t.prototype.detectDeletedEntries=function(){var a=this;this.curData.forEach(function(e,t){!0!==e.data.deleted&&(0===a.data.filter(function(t){return t.caption===e.data.caption}).length&&(a.curData[t].data.deleted=!0,a.endData[t].data.deleted=!0,a.endData[t].value=0))})},t.prototype.detectInsertedEntries=function(){var n=this;this.data.forEach(function(e,t){if(0===n.curData.filter(function(t){return!0!==t.data.deleted&&t.data.caption===e.caption}).length){var a=n.generatePieArcData(n.deepCopy(e),t,0,-1,-1);n.curData.splice(t,0,a);a=n.generatePieArcData(n.deepCopy(e),t,e.value,-1,-1);n.endData.splice(t,0,a)}})},t.prototype.detectMovedEntries=function(){for(var t=0,e=0;e<this.data.length;++e){for(;this.curData[t].data.deleted;)++t;if(this.data[e].caption!==this.curData[t].data.caption){this.curData[t].data.deleted=!0,this.endData[t].data.deleted=!0,this.endData[t].value=0;var a=this.deepCopy(this.data[e]),n=this.generatePieArcData(a,-1,0,-1,-1);this.curData.splice(t,0,n);a=this.deepCopy(this.data[e]),n=this.generatePieArcData(a,-1,a.value,-1,-1);this.endData.splice(t,0,n),++t}++t}},t.prototype.syncItems=function(){var r=this;this.data.forEach(function(t,e){for(var a=0,n=0;n<r.curData.length;++n)if(!r.curData[n].data.deleted&&r.curData[n].data.caption===t.caption){a=n;break}r.curData[a].data.value=t.value,r.endData[a].data.value=t.value,r.endData[a].value=t.value,r.endData[a].data.color=t.color})},t.prototype.animateChanges=function(){var c=this,t=this.element.nativeElement.querySelector("svg"),e=s.select(t).selectAll("path");this.interrupt=function(){e.interrupt(),delete c.interrupt},e.transition().duration(this.duration).attrTween("pie-tween-dummy",function(t,e,a){var n=s.interpolate(c.curData[e].value,c.endData[e].value),r=s.interpolate(c.curData[e].startAngle,c.endData[e].startAngle),i=s.interpolate(c.curData[e].endAngle,c.endData[e].endAngle),o=s.interpolate(c.curData[e].data.color,c.endData[e].data.color);return function(t){return c.curData[e].value=n(t),c.curData[e].startAngle=r(t),c.curData[e].endAngle=i(t),c.curData[e].data.color=o(t),c.curData[e].data.path=c.pathGenerator(c.curData[e]),""}}).on("end",function(t,e,a){e===a.length-1&&(c.cleanStateItems(),delete c.interrupt)})},t.prototype.cleanStateItems=function(){for(var t=this.curData.length-1;0<=t;--t)!0===this.curData[t].data.deleted&&this.curData.splice(t,1);for(t=this.endData.length-1;0<=t;--t)!0===this.endData[t].data.deleted&&this.endData.splice(t,1)},t.prototype.initColors=function(){var e=this;this.data.forEach(function(t){t.color||(t.color=e.generateRandomColor(t.value))})},t.prototype.getMaxAngle=function(){var e=0;return this.curData.forEach(function(t){t.endAngle>e&&(e=t.endAngle)}),e},t.prototype.calculateAngles=function(n){var r=this,i=this.curData.reduce(function(t,e){return t+e.value},0),o=0;this.curData.forEach(function(t,e){var a=o+n/(0===i?1:i)*t.value;t.startAngle=o,t.endAngle=a,t.index=e,t.data.path=r.pathGenerator(t),o=a});var c=this.endData.reduce(function(t,e){return t+e.value},0),s=0;this.endData.forEach(function(t,e){var a=s+2*Math.PI/(0===c?1:c)*t.value;t.startAngle=s,t.endAngle=a,t.index=e,t.data.path=r.pathGenerator(t),s=a})},t.prototype.overPath=function(t){var e=t.target.getAttribute("tooltip");s.select(this.tooltip).html(e).style("display","block").transition().duration(250).style("opacity",1);var a=parseInt(t.target.getAttribute("idx"),10),n=this.curData[a].data.caption,r=this.data.filter(function(t){return t.caption===n})[0];r&&this.chartHover.emit(r)},t.prototype.movePath=function(t){for(var e=0,a=0,n=this.tooltip.parentElement;n;)e+=n.scrollLeft,a+=n.scrollTop,n=n.parentElement;s.select(this.tooltip).style("top",t.pageY-a+10+"px").style("left",t.pageX-e+10+"px")},t.prototype.outPath=function(t){var e=this;s.select(this.tooltip).transition().duration(250).style("opacity",0).on("end",function(){s.select(e.tooltip).style("display","none")})},t.prototype.clickPath=function(t){var e=parseInt(t.target.getAttribute("idx"),10),a=this.curData[e].data.caption,n=this.data.filter(function(t){return t.caption===a})[0];n&&this.chartClick.emit(n)},t.prototype.render=function(){var t=this;this.interrupt&&this.interrupt(),this.initColors(),this.radius=Math.min(this.width,this.height)/2,this.center="translate("+this.width/2+", "+this.height/2+")",this.pathGenerator=s.arc().outerRadius(this.radius-this.outerSpacing).innerRadius(this.innerSpacing);var e=this.getMaxAngle();this.detectDeletedEntries(),this.detectInsertedEntries(),this.detectMovedEntries(),this.syncItems(),this.calculateAngles(e),setTimeout(function(){t.animateChanges()},0)},t.decorators=[{type:e.Component,args:[{selector:"oc-pie-chart",template:'<div class="pie-chart-tooltip"></div>\n<svg [attr.width]="width" [attr.height]="height">\n    <g [attr.transform]="center">\n        <path *ngFor="let d of curData; let idx = index;" [attr.idx]="idx" \n            [attr.fill]="d.data.color" [attr.d]="d.data.path" [attr.tooltip]="d.data.caption"\n            (mouseover)="overPath($event)" (mousemove)="movePath($event);" (mouseout)="outPath($event)" (click)="clickPath($event)" />\n    </g>\n</svg>',styles:["div.pie-chart-tooltip{position:fixed;display:none;opacity:0;font:12px sans-serif;color:#fff;background-color:rgba(35,47,52,.8);padding:5px}path{opacity:.7;stroke:#fff;stroke-width:2px}path:hover{opacity:1;stroke:#e3e3e3}"]}]}],t.ctorParameters=function(){return[{type:e.ElementRef}]},t.propDecorators={data:[{type:e.Input}],width:[{type:e.Input}],height:[{type:e.Input}],duration:[{type:e.Input}],innerSpacing:[{type:e.Input}],outerSpacing:[{type:e.Input}],chartClick:[{type:e.Output}],chartHover:[{type:e.Output}]},t}(),i=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[a.BrowserModule],declarations:[r],exports:[r]}]}],t}();t.PieChartService=n,t.PieChartComponent=r,t.PieChartModule=i,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=opitzconsulting-pie-chart.umd.min.js.map