UNPKG

ng-d3-graphs

Version:

<img src="./assets/ng-d3.png" alt="drawing" width="250" height="250"/>

16 lines (14 loc) 30.3 kB
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("@angular/core"),require("@angular/common"),require("d3"),require("rxjs"),require("rxjs/operators")):"function"==typeof define&&define.amd?define("ng-d3-graphs",["exports","@angular/core","@angular/common","d3","rxjs","rxjs/operators"],i):i((t=t||self)["ng-d3-graphs"]={},t.ng.core,t.ng.common,t.d3,t.rxjs,t.rxjs.operators)}(this,(function(t,i,e,n,o,s){"use strict"; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABLITY OR NON-INFRINGEMENT. See the Apache Version 2.0 License for specific language governing permissions and limitations under the License. ***************************************************************************** */var r=function(){return(r=Object.assign||function(t){for(var i,e=1,n=arguments.length;e<n;e++)for(var o in i=arguments[e])Object.prototype.hasOwnProperty.call(i,o)&&(t[o]=i[o]);return t}).apply(this,arguments)};function a(t,i,e,n){var o,s=arguments.length,r=s<3?i:null===n?n=Object.getOwnPropertyDescriptor(i,e):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,i,e,n);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(s<3?o(r):s>3?o(i,e,r):o(i,e))||r);return s>3&&r&&Object.defineProperty(i,e,r),r}function p(t){var i="function"==typeof Symbol&&Symbol.iterator,e=i&&t[i],n=0;if(e)return e.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&n>=t.length&&(t=void 0),{value:t&&t[n++],done:!t}}};throw new TypeError(i?"Object is not iterable.":"Symbol.iterator is not defined.")}function l(t,i){var e="function"==typeof Symbol&&t[Symbol.iterator];if(!e)return t;var n,o,s=e.call(t),r=[];try{for(;(void 0===i||i-- >0)&&!(n=s.next()).done;)r.push(n.value)}catch(t){o={error:t}}finally{try{n&&!n.done&&(e=s.return)&&e.call(s)}finally{if(o)throw o.error}}return r}function h(){for(var t=[],i=0;i<arguments.length;i++)t=t.concat(l(arguments[i]));return t}var c,d={color:"lightgrey",opacity:1,rendering:"crispEdges",strokeWidth:"1px",xAxisTimeParser:"%Y-%m-%dT%H:%M:%S.%LZ",xAxisTimeFormat:"%m/%d/%y",xAxisTicks:5};!function(t){t.top="top",t.right="right",t.bottom="bottom",t.left="left"}(c||(c={}));var u=function(){function t(){}return t.prototype.translate=function(t,i){return"translate("+t+", "+i+")"},t.prototype.factoryAxis=function(t,i){switch(i){case c.top:return n.axisTop(t);case c.right:return n.axisRight(t);case c.bottom:return n.axisBottom(t);case c.left:return n.axisLeft(t);default:return new Error("No axis Direction Provided")}},t.prototype.factoryLine=function(){return n.line().x((function(t){return t.x})).y((function(t){return t.y}))},t.prototype.scaleLinearX=function(t,i){return n.scaleLinear().domain(n.extent(t)).range([0,i])},t.prototype.scaleLinearY=function(t,i){return n.scaleLinear().domain(n.extent(t)).range([i,0])},t.prototype.scaleBandX=function(t,i){return n.scaleBand().domain(t).rangeRound([0,i]).padding(.1)},t.prototype.scaleLinearYRangeRound=function(t,i){return n.scaleLinear().domain([0,Math.max.apply(Math,h(t))]).rangeRound([i,0])},t.prototype.addLabelAxisY=function(t,i,e){t.append("text").attr("transform","rotate(-90)").attr("y",0-e.margin.left).attr("x",0-i/2).attr("dy","1em").style("text-anchor","middle").text(e.yAxisLabel)},t.prototype.addLabelAxisX=function(t,i,e,n){t.append("text").attr("transform","translate("+i/2+" ,"+(e+n.margin.top)+")").style("text-anchor","middle").text(n.xAxisLabel)},t.prototype.getViewBoxDefault=function(t){return{minX:-t.margin.left,minY:-25,width:t.width,height:t.height-t.margin.top}},t.prototype.removeAxisTicks=function(t){t.selectAll(".tick").selectAll("line").remove()},t.prototype.changeAxisColor=function(t,i){t.select("path").attr("color",i.color).attr("opacity",i.opacity).attr("rendering",i.rendering).attr("stroke-width",i.strokeWidth)},t.prototype.getXaxisTime=function(t,i,e,o,s){return t.append("g").attr("transform","translate(0,"+i+")").call(n.axisBottom(e).tickFormat(n.timeFormat(o)).ticks(s))},t.prototype.hideTooltip=function(t,i){t.selectAll("tspan").remove(),i.attr("visibility","hidden")},t.prototype.showTooltip=function(t,i,e,n,o,s,r){var a=i(t.x)-75,p=e(t.y)+10;n.attr("transform","translate("+a+", "+p+")").attr("is",!0).attr("visibility","visible"),o.attr("opacity",.7),s.attr("tranform","translate(75,30)").attr("fill","white").attr("font-size",10).attr("font-family","'Roboto', 'sans-serif'"),s.append("tspan").attr("text-anchor","middle").attr("is",!0).attr("x",25).attr("y",-5).text(""+r(t.x)),s.append("tspan").attr("text-anchor","middle").attr("is",!0).attr("x",20).attr("dy",15).text(""+t.y)},t.prototype.addTooltip=function(t){var i={width:100,height:40,fill:"#333",opacity:.7,rx:15,text:{translateX:10,translateY:20}},e=n.select(t.nativeElement).select("svg").append("g"),o=e.append("rect").attr("width",i.width).attr("height",i.height).attr("fill",i.fill).attr("opacity",0).attr("rx",i.rx),s=e.append("text").attr("transform","translate(\n "+i.text.translateX+",\n "+i.text.translateY+")");return{tooltip:e,tooltipRect:o,tooltipText:s,tooltipConfig:i}},t.ngInjectableDef=i.ɵɵdefineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t=a([i.Injectable({providedIn:"root"})],t)}(),m=function(){function t(t,i){this.container=t,this.d3Service=i,this.data=[],this.labels=[],this.options={},this.labelsAndData=[],this.viewBox={},this._options={width:879,height:804,margin:{top:50,right:50,bottom:50,left:50},yAxisLabel:"",gridTicks:0,timeParser:d.xAxisTimeParser,timeFormat:d.xAxisTimeFormat,xAxisTicks:d.xAxisTicks},this.parseTime=n.timeParse(this.options.timeParser),this.formatTime=n.timeFormat(this.options.timeFormat),this.onResize$=new o.Subject}return t.prototype.onResize=function(){this.onResize$.next()},t.prototype.ngOnInit=function(){this.options=r({},this._options,this.options),this.viewBox={minX:-this.options.margin.left,minY:-10,width:this.options.width+this.options.margin.left+this.options.margin.right,height:this.options.height+this.options.margin.top},this.parseTime=n.timeParse(this.options.timeParser),this.formatTime=n.timeFormat(this.options.timeFormat),this.labels=this.formatLabels(),this.labelsAndData=this.combineLabelsDataToOne(),this.onResizeEvent(),this.render()},t.prototype.formatLabels=function(){var t=this;return this.labels.map((function(i){return t.parseTime(i)}))},t.prototype.combineLabelsDataToOne=function(){for(var t=this.labels.length,i=[],e=0;e<t;e++)i.push({x:this.labels[e],low:this.data[e].low,high:this.data[e].high});return i},t.prototype.render=function(){var t=parseInt(n.select(this.container.nativeElement).select("div").style("width"),10),i=parseInt(n.select(this.container.nativeElement).select("div").style("height"),10),e=this.options.width-this.options.margin.left-this.options.margin.right,o=this.options.height-this.options.margin.top-this.options.margin.bottom;this.viewBox={minX:-this.options.margin.left,minY:-10,width:this.options.width,height:this.options.height-this.options.margin.top};var s=n.select(this.container.nativeElement).select("div").append("svg").attr("width",t).attr("height",i).attr("viewBox",this.viewBox.minX+" "+this.viewBox.minY+" "+this.viewBox.width+" "+this.viewBox.height).classed("svg-content",!0).append("g"),r=n.scaleTime().domain(n.extent(this.labels,(function(t){return new Date(t)}))).range([0,e]),a=n.scaleLinear().domain([n.min(this.data,(function(t){return t.low})),n.max(this.data,(function(t){return t.high}))]).nice(this.options.gridTicks).range([o,0]);s.append("g").attr("class","grid").call(this.make_x_gridlines(r).tickSize(o)),s.append("g").attr("class","grid").call(this.make_y_gridlines(a).tickSize(-e));var p=this.d3Service.getXaxisTime(s,o,r,this.options.timeFormat,this.options.xAxisTicks),l=n.curveStep,h=n.area().curve(l).x((function(t){return r(t.x)})).y0((function(t){return a(t.low)})).y1((function(t){return a(t.high)})),c=s.append("g").call((function(t){return t.attr("transform","translate(0,0)").call(n.axisLeft(a))}));this.addLabelAxisX(s,e,o),this.addLabelAxisY(s,o),s.append("path").datum(this.labelsAndData).attr("fill","steelblue").attr("d",h),this.removeAxisTicks(p),this.removeAxisTicks(c),this.changeAxisColor(p,d),this.changeAxisColor(c,d)},t.prototype.changeAxisColor=function(t,i){this.d3Service.changeAxisColor(t,i)},t.prototype.removeAxisTicks=function(t){this.d3Service.removeAxisTicks(t)},t.prototype.addLabelAxisY=function(t,i){t.append("text").attr("transform","rotate(0)").attr("y",0-this.options.margin.top/2).attr("x",0).attr("dy","1em").style("text-anchor","start").text(this.options.yAxisLabel)},t.prototype.addLabelAxisX=function(t,i,e){t.append("text").attr("transform","translate("+i/2+" ,"+(e+this.options.margin.top-15)+")").style("text-anchor","middle").text(this.options.xAxisLabel)},t.prototype.make_x_gridlines=function(t){return n.axisBottom(t).ticks(this.options.gridTicks)},t.prototype.make_y_gridlines=function(t){return n.axisLeft(t).ticks(this.options.gridTicks)},t.prototype.onResizeEvent=function(){var t=this;this.onResize$.pipe(s.debounceTime(200)).subscribe((function(){var i=n.select(t.container.nativeElement).select("svg");i&&i.remove(),t.render()}))},t.ctorParameters=function(){return[{type:i.ElementRef},{type:u}]},a([i.Input()],t.prototype,"data",void 0),a([i.Input()],t.prototype,"labels",void 0),a([i.Input()],t.prototype,"options",void 0),a([i.HostListener("window:resize")],t.prototype,"onResize",null),t=a([i.Component({selector:"ng-band",template:'<div class="svg-container"></div>\n',encapsulation:i.ViewEncapsulation.None,styles:[".svg-container{display:inline-block;position:relative;width:100%;height:100%;padding-bottom:100%;vertical-align:top;overflow:hidden}.svg-content{display:inline-block;position:absolute;top:0;left:0}.grid line{stroke:#d3d3d3;stroke-opacity:.4;shape-rendering:crispEdges}.grid path{stroke-width:0}.grid text{display:none}.area{fill:#4682b4}"]})],t)}(),g=function(){function t(){}return t=a([i.NgModule({declarations:[m],imports:[e.CommonModule],exports:[m]})],t)}(),f=function(){function t(t,i){this.container=t,this.d3Service=i,this.data=[],this.labels=[],this.options={},this.graph={xAxis:[],yAxis:[],xAxisPath:"",yAxisPath:"",rectanglesData:[]},this.labelsAndData=[],this.parseTime=n.timeParse("%d-%b-%y"),this._options={width:879,height:804,margin:{top:50,right:50,bottom:50,left:50},gridTicks:0},this.viewBox={},this.onResize$=new o.Subject}return t.prototype.onResize=function(){this.onResize$.next()},t.prototype.ngOnInit=function(){this.options=r({},this._options,this.options),this.viewBox={minX:-this.options.margin.left,minY:-10,width:this.options.width+this.options.margin.left+this.options.margin.right,height:this.options.height+this.options.margin.top},this.labelsAndData=this.combineLabelsDataToOne(),this.onResizeEvent(),this.render()},t.prototype.render=function(){var t=parseInt(n.select(this.container.nativeElement).select("div").style("width"),10),i=parseInt(n.select(this.container.nativeElement).select("div").style("height"),10),e=this.options.width-this.options.margin.left-this.options.margin.right,o=this.options.height-this.options.margin.top-this.options.margin.bottom;this.viewBox={minX:-this.options.margin.left,minY:-10,width:this.options.width,height:this.options.height-this.options.margin.top};var s=n.select(this.container.nativeElement).select("div").append("svg").attr("width",t).attr("height",i).attr("viewBox",this.viewBox.minX+" "+this.viewBox.minY+" "+this.viewBox.width+" "+this.viewBox.height).classed("svg-content",!0).append("g"),r=n.scaleBand().rangeRound([0,e]).padding(.1).domain(this.labels),a=n.scaleLinear().rangeRound([o,0]).domain([0,Math.max.apply(Math,h(this.data.map((function(t){return Number(t)}))))]);s.append("g").attr("class","grid").call(this.make_x_gridlines(r).tickSize(o)),s.append("g").attr("class","grid").call(this.make_y_gridlines(a).tickSize(-e)),s.selectAll(".bar").data(this.labelsAndData).enter().append("rect").attr("class","bar").attr("x",(function(t){return r(t.x)})).attr("y",(function(t){return a(Number(t.y))})).attr("width",r.bandwidth()).attr("height",(function(t){return o-a(Number(t.y))}));var p=s.append("g").call((function(t){return t.call(n.axisBottom(r)).attr("transform","translate(0,"+o+")")}));this.addLabelAxisX(s,e,o);var l=s.append("g").call((function(t){return t.call(n.axisLeft(a))}));this.addLabelAxisY(s,o),this.removeAxisTicks(p),this.removeAxisTicks(l),this.changeAxisColor(p,d),this.changeAxisColor(l,d)},t.prototype.changeAxisColor=function(t,i){this.d3Service.changeAxisColor(t,i)},t.prototype.removeAxisTicks=function(t){this.d3Service.removeAxisTicks(t)},t.prototype.addLabelAxisY=function(t,i){t.append("text").attr("transform","rotate(0)").attr("y",0-this.options.margin.top/2).attr("x",0).attr("dy","1em").style("text-anchor","start").text(this.options.yAxisLabel)},t.prototype.addLabelAxisX=function(t,i,e){t.append("text").attr("transform","translate("+i/2+" ,"+(e+this.options.margin.top-15)+")").style("text-anchor","middle").text(this.options.xAxisLabel)},t.prototype.combineLabelsDataToOne=function(){for(var t=[],i=this.data.length,e=0;e<i;e++)t.push({x:this.labels[e],y:this.data[e]});return t},t.prototype.make_x_gridlines=function(t){return n.axisBottom(t).ticks(this.options.gridTicks)},t.prototype.make_y_gridlines=function(t){return n.axisLeft(t).ticks(this.options.gridTicks)},t.prototype.onResizeEvent=function(){var t=this;this.onResize$.pipe(s.debounceTime(200)).subscribe((function(){var i=n.select(t.container.nativeElement).select("svg");i&&i.remove(),t.render()}))},t.ctorParameters=function(){return[{type:i.ElementRef},{type:u}]},a([i.Input()],t.prototype,"data",void 0),a([i.Input()],t.prototype,"labels",void 0),a([i.Input()],t.prototype,"options",void 0),a([i.HostListener("window:resize")],t.prototype,"onResize",null),t=a([i.Component({selector:"ng-bar",template:'\n<div class="svg-container"></div>\n',encapsulation:i.ViewEncapsulation.None,changeDetection:i.ChangeDetectionStrategy.OnPush,styles:[".svg-container{display:inline-block;position:relative;width:100%;height:100%;padding-bottom:100%;vertical-align:top;overflow:hidden}.svg-content{display:inline-block;position:absolute;top:0;left:0}.grid line{stroke:#d3d3d3;stroke-opacity:.4;shape-rendering:crispEdges}.grid path{stroke-width:0}.grid text{display:none}.bar{fill:#4682b4}.bar:hover{fill:brown}"]})],t)}(),x=function(){function t(){}return t=a([i.Injectable()],t)}(),v=function(){function t(){}return t=a([i.NgModule({declarations:[f],imports:[e.CommonModule],providers:[x],exports:[f]})],t)}(),y=function(){function t(t,i){this.container=t,this.d3Service=i,this.data=[],this.labels=[],this.options={},this._options={width:879,height:804,margin:{top:50,right:50,bottom:50,left:50},gridTicks:0,yAxisLabel:"",xAxisLabel:"",timeParser:d.xAxisTimeParser,timeFormat:d.xAxisTimeFormat,xAxisTicks:d.xAxisTicks},this.parseTime=n.timeParse(this.options.timeParser),this.formatTime=n.timeFormat(this.options.timeFormat),this.viewBox={},this.labelsAndData=[],this.AxisDataX=[],this.onResize$=new o.Subject}return t.prototype.onResize=function(){this.onResize$.next()},t.prototype.ngOnInit=function(){var t=this;this.options=r({},this._options,this.options),this.viewBox=this.d3Service.getViewBoxDefault(this.options),this.parseTime=n.timeParse(this.options.timeParser),this.formatTime=n.timeFormat(this.options.timeFormat),this.labels=this.labels.map((function(i){return t.parseTime(i)})),this.labelsAndData=this.combineLabelsDataToOne(),this.onResizeEvent(),this.render()},t.prototype.render=function(){var t=parseInt(n.select(this.container.nativeElement).select("div").style("width"),10),i=parseInt(n.select(this.container.nativeElement).select("div").style("height"),10),e=this.options.width-this.options.margin.left-this.options.margin.right,o=this.options.height-this.options.margin.top-this.options.margin.bottom;this.viewBox={minX:-this.options.margin.left,minY:-10,width:this.options.width,height:this.options.height-this.options.margin.top};var s=n.select(this.container.nativeElement).select("div").append("svg").attr("width",t).attr("height",i).attr("viewBox",this.viewBox.minX+" "+this.viewBox.minY+" "+this.viewBox.width+" "+this.viewBox.height).classed("svg-content",!0).append("g"),r=n.scaleTime().range([0,e]),a=n.scaleLinear().range([o,0]).nice(),p=n.line().x((function(t){return r(t.x)})).y((function(t){return a(t.y)}));r.domain(n.extent(this.labels,(function(t){return t}))),a.domain([0,n.max(this.data,(function(t){return t}))]),s.append("g").attr("class","grid").call(this.make_x_gridlines(r).tickSize(o)),s.append("g").attr("class","grid").call(this.make_y_gridlines(a).tickSize(-e)),s.append("path").datum(this.labelsAndData).attr("class","line").attr("d",p);var l=this.d3Service.getXaxisTime(s,o,r,this.options.timeFormat,this.options.xAxisTicks);this.addLabelAxisX(s,e,o);var h=s.append("g").call(n.axisLeft(a));this.addLabelAxisY(s,o),this.removeAxisTicks(l),this.removeAxisTicks(h),this.changeAxisColor(l,d),this.changeAxisColor(h,d),this.addDots(s,r,a)},t.prototype.addDots=function(t,i,e){var n=this,o=this.d3Service.addTooltip(this.container),s=o.tooltip,r=o.tooltipRect,a=o.tooltipText,p=o.tooltipConfig;t.selectAll("dot").data(this.labelsAndData).enter().append("circle").attr("r",3).attr("fill","#4682b4").attr("cx",(function(t){return i(t.x)})).attr("cy",(function(t){return e(t.y)})).on("mouseover",(function(t){n.onMouseOver(t,i,e,s,r,a)})).on("mouseout",(function(t){n.onMouseOut(t,s,a,p)}))},t.prototype.onMouseOver=function(t,i,e,n,o,s){n&&this.d3Service.showTooltip(t,i,e,n,o,s,this.formatTime)},t.prototype.onMouseOut=function(t,i,e,n){i&&this.d3Service.hideTooltip(e,i)},t.prototype.changeAxisColor=function(t,i){this.d3Service.changeAxisColor(t,i)},t.prototype.removeAxisTicks=function(t){this.d3Service.removeAxisTicks(t)},t.prototype.addLabelAxisY=function(t,i){t.append("text").attr("transform","rotate(0)").attr("y",0-this.options.margin.top/2).attr("x",0).attr("dy","1em").style("text-anchor","start").text(this.options.yAxisLabel)},t.prototype.addLabelAxisX=function(t,i,e){t.append("text").attr("transform","translate("+i/2+" ,"+(e+this.options.margin.top-15)+")").style("text-anchor","middle").text(this.options.xAxisLabel)},t.prototype.combineLabelsDataToOne=function(){for(var t=[],i=this.data.length,e=0;e<i;e++)t.push({x:this.labels[e],y:this.data[e]});return t},t.prototype.make_x_gridlines=function(t){return n.axisBottom(t).ticks(this.options.gridTicks)},t.prototype.make_y_gridlines=function(t){return n.axisLeft(t).ticks(this.options.gridTicks)},t.prototype.onResizeEvent=function(){var t=this;this.onResize$.pipe(s.debounceTime(200)).subscribe((function(){var i=n.select(t.container.nativeElement).select("svg");i&&i.remove(),t.render()}))},t.ctorParameters=function(){return[{type:i.ElementRef},{type:u}]},a([i.Input()],t.prototype,"data",void 0),a([i.Input()],t.prototype,"labels",void 0),a([i.Input()],t.prototype,"options",void 0),a([i.HostListener("window:resize")],t.prototype,"onResize",null),t=a([i.Component({selector:"ng-line",template:'<div class="svg-container"></div>\n',encapsulation:i.ViewEncapsulation.None,changeDetection:i.ChangeDetectionStrategy.OnPush,styles:[".svg-container{display:inline-block;position:relative;width:100%;height:100%;padding-bottom:100%;vertical-align:top;overflow:hidden}.svg-content{display:inline-block;position:absolute;top:0;left:0}.grid line{stroke:#d3d3d3;stroke-opacity:.4;shape-rendering:crispEdges}.grid path{stroke-width:0}.grid text{display:none}.line{fill:none;stroke:#4682b4;stroke-width:2px}div.tooltip{position:absolute;text-align:center;min-width:60px;min-height:28px;padding:5px;font:12px sans-serif;background:#b0c4de;border:0;border-radius:5px;pointer-events:none;color:#000}"]})],t)}(),b=function(){function t(t){this.config=t}var e,n;return t.prototype.showConfig=function(){console.log(this.config)},t.ctorParameters=function(){return[{type:void 0,decorators:[{type:i.Inject,args:["config"]}]}]},t=a([i.Injectable(),(e=0,n=i.Inject("config"),function(t,i){n(t,i,e)})],t)}(),w=function(){function t(){}var n;return n=t,t.forRoot=function(t){return{ngModule:n,providers:[b,{provide:"config",useValue:t}]}},t=n=a([i.NgModule({declarations:[y],imports:[e.CommonModule],exports:[y],providers:[b]})],t)}(),k=function(){function t(t,i){this.container=t,this.d3Service=i,this.data=[],this.labels=[],this.options={},this.labelsAndData=[],this.utcParse=n.utcParse("%Y-%m"),this.viewBox={},this._options={width:879,height:804,yAxisLabel:"",xAxisLabel:"",margin:{top:50,right:50,bottom:50,left:50},timeParser:d.xAxisTimeParser,timeFormat:d.xAxisTimeFormat,xAxisTicks:d.xAxisTicks},this.parseTime=n.timeParse(this.options.timeParser),this.formatTime=n.timeFormat(this.options.timeFormat),this.onResize$=new o.Subject}return t.prototype.onResize=function(){this.onResize$.next()},t.prototype.ngOnInit=function(){this.options=r({},this._options,this.options),this.viewBox={minX:-this.options.margin.left,minY:-25,width:this.options.width+this.options.margin.left+this.options.margin.right,height:this.options.height+this.options.margin.top},this.parseTime=n.timeParse(this.options.timeParser),this.formatTime=n.timeFormat(this.options.timeFormat),this.labels=this.formatData(),this.labelsAndData=this.combineLabelsDataToOne(),this.onResizeEvent(),this.render()},t.prototype.formatData=function(){var t=this;return this.labels.map((function(i){return t.parseTime(i)}))},t.prototype.combineLabelsDataToOne=function(){for(var t=[],i=this.data.length,e=0;e<i;e++)t.push({x:this.labels,y:this.data[e]});return t},t.prototype.render=function(){var t=this,i=parseInt(n.select(this.container.nativeElement).select("div").style("width"),10),e=parseInt(n.select(this.container.nativeElement).select("div").style("height"),10),o=this.options.width-this.options.margin.left-this.options.margin.right,s=this.options.height-this.options.margin.top-this.options.margin.bottom;this.viewBox={minX:-this.options.margin.left,minY:-10,width:this.options.width,height:this.options.height-this.options.margin.top};var r=n.select(this.container.nativeElement).select("div").append("svg").attr("width",i).attr("height",e).attr("viewBox",this.viewBox.minX+" "+this.viewBox.minY+" "+this.viewBox.width+" "+this.viewBox.height).classed("svg-content",!0).append("g"),a=this.getXdomain(),p=n.scaleTime().domain(a).range([0,o]),l=n.scaleLinear().domain([0,n.max(this.data,(function(t){return n.max(t.values)}))]).range([s,0]).nice(),h=this.d3Service.getXaxisTime(r,s,p,this.options.timeFormat,this.options.xAxisTicks),c=n.line().defined((function(t){return!isNaN(t)})).x((function(i,e){return p(t.labels[e])})).y((function(t){return l(t)}));r.append("g").attr("class","grid").call(this.make_x_gridlines(p).tickSize(s)),r.append("g").attr("class","grid").call(this.make_y_gridlines(l).tickSize(-o));var u=r.append("g").call((function(t){return t.call(n.axisLeft(l))}));this.addLabelAxisX(r,o,s),this.addLabelAxisY(r,s);r.append("g").attr("fill","none").attr("stroke","steelblue").attr("stroke-width",1.5).attr("stroke-linejoin","round").attr("stroke-linecap","round").selectAll("path").data(this.data).join("path").style("mix-blend-mode","multiply").attr("d",(function(t){return c(t.values)})).text("this is ");this.removeAxisTicks(h),this.removeAxisTicks(u),this.changeAxisColor(h,d),this.changeAxisColor(u,d)},t.prototype.changeAxisColor=function(t,i){this.d3Service.changeAxisColor(t,i)},t.prototype.removeAxisTicks=function(t){this.d3Service.removeAxisTicks(t)},t.prototype.addLabelAxisY=function(t,i){t.append("text").attr("transform","rotate(0)").attr("y",0-this.options.margin.top/2).attr("x",0).attr("dy","1em").style("text-anchor","start").text(this.options.yAxisLabel)},t.prototype.addLabelAxisX=function(t,i,e){t.append("text").attr("transform","translate("+i/2+" ,"+(e+this.options.margin.top-15)+")").style("text-anchor","middle").text(this.options.xAxisLabel)},t.prototype.getXdomain=function(){return n.extent(this.labels,(function(t){return t})).map((function(t){return new Date(t)}))},t.prototype.least=function(t,i,e,n){for(var o=t.map((function(t){return i(t)})),s=(Math.min.apply(Math,h(o)),o[0]),r=0,a=1;a<o.length;a++){var p=o[a];p>=s&&(r=a,s=p)}return t[r]},t.prototype.make_x_gridlines=function(t){return n.axisBottom(t).ticks(this.options.gridTicks)},t.prototype.make_y_gridlines=function(t){return n.axisLeft(t).ticks(this.options.gridTicks)},t.prototype.onResizeEvent=function(){var t=this;this.onResize$.pipe(s.debounceTime(200)).subscribe((function(){var i=n.select(t.container.nativeElement).select("svg");i&&i.remove(),t.render()}))},t.ctorParameters=function(){return[{type:i.ElementRef},{type:u}]},a([i.Input()],t.prototype,"data",void 0),a([i.Input()],t.prototype,"labels",void 0),a([i.Input()],t.prototype,"options",void 0),a([i.HostListener("window:resize")],t.prototype,"onResize",null),t=a([i.Component({selector:"ng-multiline",template:'<div class="svg-container"></div>\n',encapsulation:i.ViewEncapsulation.None,styles:[".svg-container{display:inline-block;position:relative;width:100%;height:100%;padding-bottom:100%;vertical-align:top;overflow:hidden}.svg-content{display:inline-block;position:absolute;top:0;left:0}.grid line{stroke:#d3d3d3;stroke-opacity:.4;shape-rendering:crispEdges}.grid path{stroke-width:0}.grid text{display:none}"]})],t)}(),A=function(){function t(){}return t=a([i.NgModule({declarations:[k],imports:[e.CommonModule],exports:[k]})],t)}(),T=function(){function t(t){this.container=t,this.labels=[],this.data=[],this.backgroundColors=n.schemeSet2,this.radius=100,this.options={},this.color=this.interpolateColor(),this.defaultSliceColor="steerblue",this.labelsAndData=[],this.viewBox={},this._options={width:300,height:300,margin:{top:50,right:50,bottom:50,left:50}},this.onResize$=new o.Subject}return t.prototype.onResize=function(){this.onResize$.next()},t.prototype.ngOnInit=function(){this.options=r({},this._options,this.options),this.viewBox={minX:-this.options.margin.left,minY:0,width:Number(this.options.width)+Number(this.options.margin.left)+Number(this.options.margin.right),height:this.options.height},this.onBgdColorUndefined(),this.onResizeEvent(),this.render()},t.prototype.onBgdColorUndefined=function(){var t,i;if(0===this.backgroundColors.length)try{for(var e=p(this.data),n=e.next();!n.done;n=e.next()){n.value;this.backgroundColors.push(this.defaultSliceColor)}}catch(i){t={error:i}}finally{try{n&&!n.done&&(i=e.return)&&i.call(e)}finally{if(t)throw t.error}}},t.prototype.render=function(){var t=this,i=parseInt(n.select(this.container.nativeElement).select("div").style("width"),10),e=parseInt(n.select(this.container.nativeElement).select("div").style("height"),10),o=Math.min(this.options.width,this.options.height)/2-this.options.margin.top,s=n.select(this.container.nativeElement).select("div").append("svg").attr("width",i).attr("height",e).attr("viewBox",this.viewBox.minX+" "+this.viewBox.minY+" "+this.viewBox.width+" "+this.viewBox.height).classed("svg-content",!0).append("g").attr("transform","translate("+this.options.width/2+","+this.options.height/2+")"),r=(n.scaleOrdinal().domain(this.data).range(this.backgroundColors),n.pie().value((function(t){return t.value}))(n.entries(this.data))),a=n.arc().innerRadius(0).outerRadius(o);s.selectAll("slices").data(r).enter().append("path").attr("d",a).attr("fill",(function(i){return t.backgroundColors[i.index]})).attr("stroke","black").style("stroke-width","2px").style("opacity",.7),s.selectAll("slices").data(r).enter().append("text").text((function(i){return t.labels[i.index]})).attr("transform",(function(t){return"translate("+a.centroid({startAngle:t.startAngle,endAngle:t.endAngle})+")"})).style("text-anchor","middle").style("font-size",17),this.addLabelAxisX(s,this.options.width,this.options.height)},t.prototype.addLabelAxisX=function(t,i,e){t.append("text").attr("transform","translate(0, "+2.5*this.options.margin.top+")").style("text-anchor","middle").text(this.options.xAxisLabel)},t.prototype.interpolateColor=function(){return n.interpolateCool},t.prototype.combineLabelsDataToOne=function(){for(var t=[],i=this.data.length,e=0;e<i;e++)t.push({x:this.labels[e],y:this.data[e]});return t},t.prototype.onResizeEvent=function(){var t=this;this.onResize$.pipe(s.debounceTime(200)).subscribe((function(){var i=n.select(t.container.nativeElement).select("svg");i&&i.remove(),t.render()}))},t.ctorParameters=function(){return[{type:i.ElementRef}]},a([i.Input()],t.prototype,"labels",void 0),a([i.Input()],t.prototype,"data",void 0),a([i.Input()],t.prototype,"backgroundColors",void 0),a([i.Input()],t.prototype,"radius",void 0),a([i.Input()],t.prototype,"options",void 0),a([i.HostListener("window:resize")],t.prototype,"onResize",null),t=a([i.Component({selector:"ng-pie",template:'<div class="svg-container"></div>\n',encapsulation:i.ViewEncapsulation.None,changeDetection:i.ChangeDetectionStrategy.OnPush,styles:[".svg-container{display:inline-block;position:relative;width:100%;height:100%;padding-bottom:100%;vertical-align:top;overflow:hidden}.svg-content{display:inline-block;position:absolute;top:0;left:0}.grid line{stroke:#d3d3d3;stroke-opacity:.4;shape-rendering:crispEdges}.grid path{stroke-width:0}.grid text{display:none}svg{background-color:transparent!important}.slice text{font-size:16pt;font-family:Arial}"]})],t)}(),L=function(){function t(){}return t=a([i.Injectable()],t)}(),R=function(){function t(){}return t=a([i.NgModule({declarations:[T],imports:[e.CommonModule],providers:[L],exports:[T]})],t)}();t.BandModule=g,t.BarModule=v,t.LineModule=w,t.MultilineModule=A,t.PieModule=R,t.ɵa=m,t.ɵb=u,t.ɵc=f,t.ɵd=x,t.ɵe=y,t.ɵf=b,t.ɵg=k,t.ɵh=T,t.ɵi=L,Object.defineProperty(t,"__esModule",{value:!0})})); //# sourceMappingURL=ng-d3-graphs.umd.min.js.map