UNPKG

@swimlane/ngx-charts

Version:

Declarative Charting Framework for Angular2 and beyond!

60 lines 2.27 kB
import { Component, Input, Output, EventEmitter, ElementRef, ChangeDetectionStrategy } from '@angular/core'; import { trigger, style, animate, transition } from '@angular/animations'; import { select } from 'd3-selection'; var LineComponent = (function () { function LineComponent(element) { this.element = element; this.fill = 'none'; this.select = new EventEmitter(); this.initialized = false; } LineComponent.prototype.ngOnChanges = function (changes) { if (!this.initialized) { this.initialized = true; this.initialPath = this.path; } else { this.animateToCurrentForm(); } }; LineComponent.prototype.animateToCurrentForm = function () { var node = select(this.element.nativeElement).select('.line'); node .transition().duration(750) .attr('d', this.path); }; return LineComponent; }()); export { LineComponent }; LineComponent.decorators = [ { type: Component, args: [{ selector: 'g[ngx-charts-line]', template: "\n <svg:path\n [@animationState]=\"'active'\"\n class=\"line\"\n [attr.d]=\"initialPath\"\n [attr.fill]=\"fill\"\n [attr.stroke]=\"stroke\"\n stroke-width=\"1.5px\"\n />\n ", changeDetection: ChangeDetectionStrategy.OnPush, animations: [ trigger('animationState', [ transition(':enter', [ style({ strokeDasharray: 2000, strokeDashoffset: 2000, }), animate(1000, style({ strokeDashoffset: 0 })) ]) ]) ] },] }, ]; /** @nocollapse */ LineComponent.ctorParameters = function () { return [ { type: ElementRef, }, ]; }; LineComponent.propDecorators = { 'path': [{ type: Input },], 'stroke': [{ type: Input },], 'data': [{ type: Input },], 'fill': [{ type: Input },], 'select': [{ type: Output },], }; //# sourceMappingURL=line.component.js.map