ngx-pluto
Version:
142 lines • 11.2 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, ViewEncapsulation, Input, ViewChildren, QueryList, ChangeDetectorRef } from '@angular/core';
import { NpCircleBar } from './circle-bar';
/**
* @ignore
*/
export class NpPercentCircleBarComponent {
/**
* @param {?} cdf
*/
constructor(cdf) {
this.cdf = cdf;
this.startAngle = 0.0;
this.thickness = 15;
this.size = 156;
this.animationTime = 500;
this.animation = { duration: this.animationTime, easing: 'circleProgressEasing' };
this.bindingData = [];
}
/**
* @return {?}
*/
ngOnInit() {
this.buildBindingData();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes) {
if (changes.animationTime && changes.animationTime.currentValue) {
this.animation.duration = this.animationTime;
}
if (changes.data && changes.data.currentValue) {
this.data = changes.data.currentValue;
this.buildBindingData();
this.refresh();
}
}
}
/**
* @return {?}
*/
refresh() {
if (this.circleBars && this.circleBars.length > 0) {
this.circleBars.forEach((/**
* @param {?} circleBar
* @return {?}
*/
circleBar => {
circleBar.init();
}));
}
}
/**
* @private
* @return {?}
*/
buildBindingData() {
if (this.data && this.data.length > 0) {
/** @type {?} */
let len = this.data.length;
/** @type {?} */
let currentPercentage = 0;
this.bindingData = [];
for (let i = 0; i < len; i++) {
/** @type {?} */
const item = this.data[i];
/** @type {?} */
let bindingItem = {
startAngle: 2 * Math.PI * currentPercentage,
fill: { gradient: [item.color] },
value: item.percentage
};
currentPercentage += item.percentage;
this.bindingData.push(bindingItem);
}
}
}
}
NpPercentCircleBarComponent.decorators = [
{ type: Component, args: [{
selector: `np-percent-circle-bar`,
template: "<div class=\"percent-circle-bar-wrapper\">\r\n <div class=\"percent-circle-bar-text\" [ngStyle]=\"{'width.px': size, 'height.px': size}\">\r\n <ng-content></ng-content>\r\n </div>\r\n <ng-container *ngFor=\"let item of bindingData; let i = index; let isFirst = first; let isLast = last;\">\r\n <np-circle-bar class=\"percent-circle-bar\" [value]=\"item.value\" [fill]=\"item.fill\" [thickness]=\"thickness\"\r\n [size]=\"size\" [startAngle]=\"item.startAngle\" [emptyFill]=\"isFirst ? 'rgba(0, 0, 0, 0.1)' : 'rgba(0, 0, 0, 0)'\"\r\n [ngStyle]=\"{'z-index': (10 - i)}\" [animation]=\"animation\">\r\n </np-circle-bar>\r\n </ng-container>\r\n</div>\r\n",
encapsulation: ViewEncapsulation.None,
styles: [".percent-circle-bar-wrapper{position:relative}.percent-circle-bar-wrapper .percent-circle-bar{position:absolute;left:0;top:0}.percent-circle-bar-wrapper .percent-circle-bar-text{display:flex;justify-content:center;align-items:center;z-index:11}"]
}] }
];
/** @nocollapse */
NpPercentCircleBarComponent.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
NpPercentCircleBarComponent.propDecorators = {
circleBars: [{ type: ViewChildren, args: [NpCircleBar,] }],
startAngle: [{ type: Input }],
thickness: [{ type: Input }],
size: [{ type: Input }],
data: [{ type: Input }],
animationTime: [{ type: Input }]
};
if (false) {
/**
* @type {?}
* @private
*/
NpPercentCircleBarComponent.prototype.circleBars;
/** @type {?} */
NpPercentCircleBarComponent.prototype.startAngle;
/** @type {?} */
NpPercentCircleBarComponent.prototype.thickness;
/** @type {?} */
NpPercentCircleBarComponent.prototype.size;
/** @type {?} */
NpPercentCircleBarComponent.prototype.data;
/** @type {?} */
NpPercentCircleBarComponent.prototype.animationTime;
/** @type {?} */
NpPercentCircleBarComponent.prototype.animation;
/** @type {?} */
NpPercentCircleBarComponent.prototype.bindingData;
/**
* @type {?}
* @private
*/
NpPercentCircleBarComponent.prototype.cdf;
}
/**
* @ignore
* @record
*/
export function PercentCircleBarData() { }
if (false) {
/** @type {?} */
PercentCircleBarData.prototype.color;
/** @type {?} */
PercentCircleBarData.prototype.percentage;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGVyY2VudC1jaXJjbGUtYmFyLmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LXBsdXRvLyIsInNvdXJjZXMiOlsibGliL2NpcmNsZS1iYXIvcGVyY2VudC1jaXJjbGUtYmFyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLGlCQUFpQixFQUFVLEtBQUssRUFBdUMsWUFBWSxFQUFFLFNBQVMsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM3SixPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sY0FBYyxDQUFDOzs7O0FBWTNDLE1BQU0sT0FBTywyQkFBMkI7Ozs7SUFhdEMsWUFBb0IsR0FBc0I7UUFBdEIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFUakMsZUFBVSxHQUFXLEdBQUcsQ0FBQztRQUN6QixjQUFTLEdBQVcsRUFBRSxDQUFDO1FBQ3ZCLFNBQUksR0FBVyxHQUFHLENBQUM7UUFFbkIsa0JBQWEsR0FBVyxHQUFHLENBQUM7UUFFckMsY0FBUyxHQUFHLEVBQUUsUUFBUSxFQUFFLElBQUksQ0FBQyxhQUFhLEVBQUUsTUFBTSxFQUFFLHNCQUFzQixFQUFFLENBQUM7UUFDN0UsZ0JBQVcsR0FBVSxFQUFFLENBQUM7SUFFc0IsQ0FBQzs7OztJQUUvQyxRQUFRO1FBQ04sSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7SUFDMUIsQ0FBQzs7Ozs7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLEVBQUU7WUFDWCxJQUFJLE9BQU8sQ0FBQyxhQUFhLElBQUksT0FBTyxDQUFDLGFBQWEsQ0FBQyxZQUFZLEVBQUU7Z0JBQy9ELElBQUksQ0FBQyxTQUFTLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUM7YUFDOUM7WUFFRCxJQUFJLE9BQU8sQ0FBQyxJQUFJLElBQUksT0FBTyxDQUFDLElBQUksQ0FBQyxZQUFZLEVBQUU7Z0JBQzdDLElBQUksQ0FBQyxJQUFJLEdBQUcsT0FBTyxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUM7Z0JBQ3RDLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO2dCQUN4QixJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7YUFDaEI7U0FDRjtJQUNILENBQUM7Ozs7SUFFRCxPQUFPO1FBQ0wsSUFBSSxJQUFJLENBQUMsVUFBVSxJQUFJLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUNqRCxJQUFJLENBQUMsVUFBVSxDQUFDLE9BQU87Ozs7WUFBQyxTQUFTLENBQUMsRUFBRTtnQkFDbEMsU0FBUyxDQUFDLElBQUksRUFBRSxDQUFDO1lBQ25CLENBQUMsRUFBQyxDQUFDO1NBQ0o7SUFDSCxDQUFDOzs7OztJQUVPLGdCQUFnQjtRQUN0QixJQUFJLElBQUksQ0FBQyxJQUFJLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFOztnQkFDakMsR0FBRyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTTs7Z0JBQ3RCLGlCQUFpQixHQUFHLENBQUM7WUFDekIsSUFBSSxDQUFDLFdBQVcsR0FBRyxFQUFFLENBQUM7WUFDdEIsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLEdBQUcsRUFBRSxDQUFDLEVBQUUsRUFBRTs7c0JBQ3RCLElBQUksR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQzs7b0JBQ3JCLFdBQVcsR0FBRztvQkFDaEIsVUFBVSxFQUFFLENBQUMsR0FBRyxJQUFJLENBQUMsRUFBRSxHQUFHLGlCQUFpQjtvQkFDM0MsSUFBSSxFQUFFLEVBQUUsUUFBUSxFQUFFLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFO29CQUNoQyxLQUFLLEVBQUUsSUFBSSxDQUFDLFVBQVU7aUJBQ3ZCO2dCQUNELGlCQUFpQixJQUFJLElBQUksQ0FBQyxVQUFVLENBQUM7Z0JBQ3JDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO2FBQ3BDO1NBQ0Y7SUFDSCxDQUFDOzs7WUFoRUYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSx1QkFBdUI7Z0JBQ2pDLDZxQkFBc0M7Z0JBRXRDLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJOzthQUN0Qzs7OztZQVhtSCxpQkFBaUI7Ozt5QkFlbEksWUFBWSxTQUFDLFdBQVc7eUJBRXhCLEtBQUs7d0JBQ0wsS0FBSzttQkFDTCxLQUFLO21CQUNMLEtBQUs7NEJBQ0wsS0FBSzs7Ozs7OztJQU5OLGlEQUFzRTs7SUFFdEUsaURBQWtDOztJQUNsQyxnREFBZ0M7O0lBQ2hDLDJDQUE0Qjs7SUFDNUIsMkNBQXNDOztJQUN0QyxvREFBcUM7O0lBRXJDLGdEQUE2RTs7SUFDN0Usa0RBQXdCOzs7OztJQUVaLDBDQUE4Qjs7Ozs7O0FBa0Q1QywwQ0FHQzs7O0lBRkMscUNBQWM7O0lBQ2QsMENBQW1CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBWaWV3RW5jYXBzdWxhdGlvbiwgT25Jbml0LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIFNpbXBsZUNoYW5nZXMsIFZpZXdDaGlsZHJlbiwgUXVlcnlMaXN0LCBDaGFuZ2VEZXRlY3RvclJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBOcENpcmNsZUJhciB9IGZyb20gJy4vY2lyY2xlLWJhcic7XHJcblxyXG4vKipcclxuICogQGlnbm9yZVxyXG4gKi9cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6IGBucC1wZXJjZW50LWNpcmNsZS1iYXJgLFxyXG4gIHRlbXBsYXRlVXJsOiAncGVyY2VudC1jaXJjbGUtYmFyLmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWydwZXJjZW50LWNpcmNsZS1iYXIuc2NzcyddLFxyXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXHJcbn0pXHJcblxyXG5leHBvcnQgY2xhc3MgTnBQZXJjZW50Q2lyY2xlQmFyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbiAgQFZpZXdDaGlsZHJlbihOcENpcmNsZUJhcikgcHJpdmF0ZSBjaXJjbGVCYXJzOiBRdWVyeUxpc3Q8TnBDaXJjbGVCYXI+O1xyXG5cclxuICBASW5wdXQoKSBzdGFydEFuZ2xlOiBudW1iZXIgPSAwLjA7XHJcbiAgQElucHV0KCkgdGhpY2tuZXNzOiBudW1iZXIgPSAxNTtcclxuICBASW5wdXQoKSBzaXplOiBudW1iZXIgPSAxNTY7XHJcbiAgQElucHV0KCkgZGF0YTogUGVyY2VudENpcmNsZUJhckRhdGFbXTtcclxuICBASW5wdXQoKSBhbmltYXRpb25UaW1lOiBudW1iZXIgPSA1MDA7XHJcblxyXG4gIGFuaW1hdGlvbiA9IHsgZHVyYXRpb246IHRoaXMuYW5pbWF0aW9uVGltZSwgZWFzaW5nOiAnY2lyY2xlUHJvZ3Jlc3NFYXNpbmcnIH07XHJcbiAgYmluZGluZ0RhdGE6IGFueVtdID0gW107XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY2RmOiBDaGFuZ2VEZXRlY3RvclJlZikgeyB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgdGhpcy5idWlsZEJpbmRpbmdEYXRhKCk7XHJcbiAgfVxyXG5cclxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XHJcbiAgICBpZiAoY2hhbmdlcykge1xyXG4gICAgICBpZiAoY2hhbmdlcy5hbmltYXRpb25UaW1lICYmIGNoYW5nZXMuYW5pbWF0aW9uVGltZS5jdXJyZW50VmFsdWUpIHtcclxuICAgICAgICB0aGlzLmFuaW1hdGlvbi5kdXJhdGlvbiA9IHRoaXMuYW5pbWF0aW9uVGltZTtcclxuICAgICAgfVxyXG5cclxuICAgICAgaWYgKGNoYW5nZXMuZGF0YSAmJiBjaGFuZ2VzLmRhdGEuY3VycmVudFZhbHVlKSB7XHJcbiAgICAgICAgdGhpcy5kYXRhID0gY2hhbmdlcy5kYXRhLmN1cnJlbnRWYWx1ZTtcclxuICAgICAgICB0aGlzLmJ1aWxkQmluZGluZ0RhdGEoKTtcclxuICAgICAgICB0aGlzLnJlZnJlc2goKTtcclxuICAgICAgfVxyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgcmVmcmVzaCgpIHtcclxuICAgIGlmICh0aGlzLmNpcmNsZUJhcnMgJiYgdGhpcy5jaXJjbGVCYXJzLmxlbmd0aCA+IDApIHtcclxuICAgICAgdGhpcy5jaXJjbGVCYXJzLmZvckVhY2goY2lyY2xlQmFyID0+IHtcclxuICAgICAgICBjaXJjbGVCYXIuaW5pdCgpO1xyXG4gICAgICB9KTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHByaXZhdGUgYnVpbGRCaW5kaW5nRGF0YSgpIHtcclxuICAgIGlmICh0aGlzLmRhdGEgJiYgdGhpcy5kYXRhLmxlbmd0aCA+IDApIHtcclxuICAgICAgbGV0IGxlbiA9IHRoaXMuZGF0YS5sZW5ndGg7XHJcbiAgICAgIGxldCBjdXJyZW50UGVyY2VudGFnZSA9IDA7XHJcbiAgICAgIHRoaXMuYmluZGluZ0RhdGEgPSBbXTtcclxuICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPCBsZW47IGkrKykge1xyXG4gICAgICAgIGNvbnN0IGl0ZW0gPSB0aGlzLmRhdGFbaV07XHJcbiAgICAgICAgbGV0IGJpbmRpbmdJdGVtID0ge1xyXG4gICAgICAgICAgc3RhcnRBbmdsZTogMiAqIE1hdGguUEkgKiBjdXJyZW50UGVyY2VudGFnZSxcclxuICAgICAgICAgIGZpbGw6IHsgZ3JhZGllbnQ6IFtpdGVtLmNvbG9yXSB9LFxyXG4gICAgICAgICAgdmFsdWU6IGl0ZW0ucGVyY2VudGFnZVxyXG4gICAgICAgIH07XHJcbiAgICAgICAgY3VycmVudFBlcmNlbnRhZ2UgKz0gaXRlbS5wZXJjZW50YWdlO1xyXG4gICAgICAgIHRoaXMuYmluZGluZ0RhdGEucHVzaChiaW5kaW5nSXRlbSk7XHJcbiAgICAgIH1cclxuICAgIH1cclxuICB9XHJcbn1cclxuXHJcbi8qKlxyXG4gKiBAaWdub3JlXHJcbiAqL1xyXG5leHBvcnQgaW50ZXJmYWNlIFBlcmNlbnRDaXJjbGVCYXJEYXRhIHtcclxuICBjb2xvcjogc3RyaW5nO1xyXG4gIHBlcmNlbnRhZ2U6IG51bWJlcjtcclxufVxyXG5cclxuXHJcbiJdfQ==