angular-gradient-progressbar
Version:
<p align="center"> <h1>Angular Gradient Progress Bar</h1> </p> <!-- Badges --> <p align="center"> <a href="https://www.npmjs.com/package/angular-gradient-progressbar"><img src="https://img.shields.io/npm/dw/angular-gradient-progressbar"/> </a> <
161 lines (155 loc) • 22.4 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, ViewChild, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class AngularGradientProgressbarComponent {
constructor() {
//type of progress bar
this.type = 1; //default is 1
//end
//tool tip textcolor
this.lowTextColor = '';
this.mediumTextColor = '';
this.highTextColor = '';
//end
//adjusting width of the progress bar
this.progressBarWidth = 7; //default is 7
//end
// number of bars
this.barCount = 7; // default is 7 and max is 10
//end
// value of the progress bar
this.value = 75; // default is 75
//end
// Quartle value of the progress bar
this.quartileValueLow = 3; //default to 3
this.quartileValueHigh = 6; // default to 6
this.quartileValue = 0;
//end
//show tooltip or not
this.showToolTip = true; // default is true
//end
//simple progress bar value
this.secondValue = 75; // default is 75
this.value1 = 0;
this.elementArr = [];
}
ngOnInit() { }
ngAfterViewInit() {
setTimeout(() => {
if (this.type === 1) {
this.rangeArray();
this.toolTip();
}
else if (this.type === 2) {
this.value1 = 100 - this.secondValue;
}
});
}
toolTip() {
this.quartileValue = Math.round(this.value / this.quartilePercentage);
this.potentialLabel =
this.quartileValue < this.quartileValueLow
? 'low'
: this.quartileValue <= this.quartileValueHigh
? 'medium'
: 'high';
this.toolTipClass = 'indicator ' + this.potentialLabel;
}
rangeArray() {
if (this.barCount <= 10) {
this.quartilePercentage = 100 / this.barCount;
this.elementArr = [];
let percent;
let quartileValue;
for (let i = 1; i <= this.barCount; i++) {
const currentPoint = Math.round(this.quartilePercentage * i);
if (this.value <= currentPoint) {
//Check if percent and quartile value is present of not. This runs only one time
if (!percent && !quartileValue) {
const previousPoint = Math.round(this.quartilePercentage * (i - 1));
const difference = currentPoint - previousPoint;
quartileValue = i;
percent =
Math.round(((this.value - previousPoint) / difference) * 100) +
'%';
}
if (percent && quartileValue) {
if (i === quartileValue) {
// set specified block value so that it can be used to make gradient
this.divView.nativeElement.style.setProperty('--block-' + i, percent);
// set left value to position the indicator and tooltip
this.divView.nativeElement.style.setProperty('--left-value', percent);
}
if (this.showToolTip) {
this.blockClass =
'item ' + (i === quartileValue ? 'current filled' : '');
this.elementArr.push(this.blockClass);
}
else {
this.blockClass =
'item ' + (i === quartileValue ? 'tool filled' : '');
this.elementArr.push(this.blockClass);
}
}
}
else {
this.blockClass = 'item filled';
this.elementArr.push(this.blockClass);
}
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AngularGradientProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AngularGradientProgressbarComponent, selector: "angular-gradient-progressbar", inputs: { type: "type", lowTextColor: "lowTextColor", mediumTextColor: "mediumTextColor", highTextColor: "highTextColor", progressBarWidth: "progressBarWidth", barCount: "barCount", value: "value", quartileValueLow: "quartileValueLow", quartileValueHigh: "quartileValueHigh", showToolTip: "showToolTip", secondValue: "secondValue" }, viewQueries: [{ propertyName: "divView", first: true, predicate: ["myDiv"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"type === 1\">\r\n <div>\r\n <div\r\n #myDiv\r\n class=\"potential__range\"\r\n style=\"--lowText:{{ lowTextColor }} ; --mediumText:{{mediumTextColor}}; --highText:{{highTextColor}}; --progressBarWidth:{{progressBarWidth}};\"\r\n >\r\n <div class=\"range\">\r\n <div *ngFor=\"let item of elementArr; let i = index\" [class]=\"item\">\r\n <div\r\n *ngIf=\"item === 'item current filled' && showToolTip\"\r\n [class]=\"toolTipClass\"\r\n >\r\n <span *ngIf=\"showToolTip\">{{ potentialLabel }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"type === 2 && secondValue <=100 \">\r\n <div class=\"display_\">\r\n <div class=\"progress\"></div>\r\n <div class=\"progress_1\" style=\"--p:{{ value1 }}%\"></div>\r\n </div>\r\n</ng-container>\r\n", styles: [".potential__range{--block-1: 100%;--white-block-1: 0%;--block-2: 100%;--white-block-2: 0%;--block-3: 100%;--white-block-3: 0%;--block-4: 100%;--white-block-4: 0%;--block-5: 100%;--white-block-5: 0%;--block-6: 100%;--white-block-6: 0%;--block-7: 100%;--white-block-7: 0%;--block-8: 100%;--white-block-8: 0%;--block-9: 100%;--white-block-9: 0%;--block-10: 100%;--white-block-10: 0%;--lowText: #f14913;--mediumText: #fbaf00;--highText: #0a7a30;--progressBarWidth: 7;--left-value: 0;color:#1d1d1d;margin:3rem 4rem;padding:1.6rem 0}.potential__range h3{font-size:2rem;font-weight:500}.potential__range h3 b{text-transform:capitalize}.potential__range .range{display:flex}.potential__range .range .item{width:calc(100% / var(--progressBarWidth));height:17px;position:relative;background-color:#c8cfd580}.potential__range .range .item .indicator{width:90px;height:32px;box-shadow:0 14px 20px #00000014;border:solid 2px #fff;border-radius:16px;position:absolute;left:calc(var(--left-value) - 45px);top:-60px;display:flex;align-items:center;justify-content:center}.potential__range .range .item .indicator.low{background-color:#f8e2dd}.potential__range .range .item .indicator.low span{color:var(--lowText)}.potential__range .range .item .indicator.low:after{border-top:8px solid #f8e2dd}.potential__range .range .item .indicator.medium{background-color:#fff7e3}.potential__range .range .item .indicator.medium span{color:var(--mediumText)}.potential__range .range .item .indicator.medium:after{border-top:8px solid #fff7e3}.potential__range .range .item .indicator.high{background-color:#e3f5ea}.potential__range .range .item .indicator.high span{color:var(--highText)}.potential__range .range .item .indicator.high:after{border-top:8px solid #e3f5ea}.potential__range .range .item .indicator span{font-size:1.3rem;font-family:Poppins,Arial,Helvetica,sans-serif;font-weight:700}.potential__range .range .item .indicator:before{content:\"\";width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid white;position:absolute;left:50%;top:50%;transform:translate(-50%,140%)}.potential__range .range .item .indicator:after{content:\"\";width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid white;position:absolute;left:50%;top:50%;transform:translate(-50%,140%)}.potential__range .range .item:not(:last-child){margin-right:.2rem}.potential__range .range .item.filled{position:relative}.potential__range .range .item.filled.current:before{content:\"\";height:32px;width:32px;border-radius:50%;border:3px solid white;box-shadow:0 2px 4px #00000038;background-color:#0a7a30;position:absolute;top:50%;left:calc(var(--left-value) - 19px);transform:translateY(-50%);z-index:1}.potential__range .range .item.filled.current:after{content:\"\";width:16px;height:16px;border-radius:50%;background-color:#fff;position:absolute;top:50%;left:calc(var(--left-value) - 8.25px);transform:translateY(-50%);z-index:2}.potential__range .range .item.filled:nth-child(1){background:linear-gradient(90deg,#f14913 var(--block-1),rgba(200,207,213,.5) var(--white-block-1))}.potential__range .range .item.filled:nth-child(1).current:before{background:#f14913}.potential__range .range .item.filled:nth-child(2){background:linear-gradient(90deg,#f17613 var(--block-2),rgba(200,207,213,.5) var(--white-block-2))}.potential__range .range .item.filled:nth-child(2).current:before{background:#f17613}.potential__range .range .item.filled:nth-child(3){background:linear-gradient(90deg,#f19e13 var(--block-3),rgba(200,207,213,.5) var(--white-block-3))}.potential__range .range .item.filled:nth-child(3).current:before{background:#f19e13}.potential__range .range .item.filled:nth-child(4){background:linear-gradient(90deg,#f1b113 var(--block-4),rgba(200,207,213,.5) var(--white-block-4))}.potential__range .range .item.filled:nth-child(4).current:before{background:#f1b113}.potential__range .range .item.filled:nth-child(5){background:linear-gradient(90deg,#f1de13 var(--block-5),rgba(200,207,213,.5) var(--white-block-5))}.potential__range .range .item.filled:nth-child(5).current:before{background:#f1de13}.potential__range .range .item.filled:nth-child(6){background:linear-gradient(90deg,#ccd948 var(--block-6),rgba(200,207,213,.5) var(--white-block-6))}.potential__range .range .item.filled:nth-child(6).current:before{background:#ccd948}.potential__range .range .item.filled:nth-child(7){background:linear-gradient(90deg,#a7b429 var(--block-7),rgba(200,213,200,.5) var(--white-block-7))}.potential__range .range .item.filled:nth-child(7).current:before{background:#a7b429}.potential__range .range .item.filled:nth-child(8){background:linear-gradient(90deg,#53cc7c var(--block-8),rgba(200,207,213,.5) var(--white-block-8))}.potential__range .range .item.filled:nth-child(8).current:before{background:#53cc7c}.potential__range .range .item.filled:nth-child(9){background:linear-gradient(90deg,#43c770 var(--block-9),rgba(200,207,213,.5) var(--white-block-9))}.potential__range .range .item.filled:nth-child(9).current:before{background:#43c770}.potential__range .range .item.filled:nth-child(10){background:#0a7a30;background:linear-gradient(90deg,#0a7a30 var(--block-10),rgba(200,207,213,.5) var(--white-block-10))}.potential__range .range .item.filled:nth-child(10) .indicator{right:-30px}.potential__range .range .item.empty.current:before{content:\"\";height:32px;width:32px;border-radius:50%;border:3px solid white;box-shadow:0 2px 4px #00000038;background-color:#0a7a30;position:absolute;top:50%;left:-10px;transform:translateY(-50%);z-index:1}.potential__range .range .item.empty.current:after{content:\"\";width:16px;height:16px;border-radius:50%;background-color:#fff;position:absolute;top:50%;left:1px;transform:translateY(-50%);z-index:2}.potential__range .range .item.empty .indicator{left:-15px}.potential__range .range .item:nth-child(10) svg{position:absolute;right:-24px;top:50%;transform:translateY(-50%)}.progress{height:7px;margin-bottom:-8px;background-image:linear-gradient(90deg,red,#fff200,#0f0);background-size:100% 100%,100% 100%;background-repeat:no-repeat}.progress_1{height:9px;width:103%;margin-bottom:-8px;background-image:linear-gradient(#fff,#ccc);background-size:var(--p, 50%) 100%,100% 100%;transform:rotate(180deg);z-index:100;background-repeat:no-repeat}.display_{margin:3rem 10rem;padding:1.6rem 0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AngularGradientProgressbarComponent, decorators: [{
type: Component,
args: [{ selector: 'angular-gradient-progressbar', template: "<ng-container *ngIf=\"type === 1\">\r\n <div>\r\n <div\r\n #myDiv\r\n class=\"potential__range\"\r\n style=\"--lowText:{{ lowTextColor }} ; --mediumText:{{mediumTextColor}}; --highText:{{highTextColor}}; --progressBarWidth:{{progressBarWidth}};\"\r\n >\r\n <div class=\"range\">\r\n <div *ngFor=\"let item of elementArr; let i = index\" [class]=\"item\">\r\n <div\r\n *ngIf=\"item === 'item current filled' && showToolTip\"\r\n [class]=\"toolTipClass\"\r\n >\r\n <span *ngIf=\"showToolTip\">{{ potentialLabel }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"type === 2 && secondValue <=100 \">\r\n <div class=\"display_\">\r\n <div class=\"progress\"></div>\r\n <div class=\"progress_1\" style=\"--p:{{ value1 }}%\"></div>\r\n </div>\r\n</ng-container>\r\n", styles: [".potential__range{--block-1: 100%;--white-block-1: 0%;--block-2: 100%;--white-block-2: 0%;--block-3: 100%;--white-block-3: 0%;--block-4: 100%;--white-block-4: 0%;--block-5: 100%;--white-block-5: 0%;--block-6: 100%;--white-block-6: 0%;--block-7: 100%;--white-block-7: 0%;--block-8: 100%;--white-block-8: 0%;--block-9: 100%;--white-block-9: 0%;--block-10: 100%;--white-block-10: 0%;--lowText: #f14913;--mediumText: #fbaf00;--highText: #0a7a30;--progressBarWidth: 7;--left-value: 0;color:#1d1d1d;margin:3rem 4rem;padding:1.6rem 0}.potential__range h3{font-size:2rem;font-weight:500}.potential__range h3 b{text-transform:capitalize}.potential__range .range{display:flex}.potential__range .range .item{width:calc(100% / var(--progressBarWidth));height:17px;position:relative;background-color:#c8cfd580}.potential__range .range .item .indicator{width:90px;height:32px;box-shadow:0 14px 20px #00000014;border:solid 2px #fff;border-radius:16px;position:absolute;left:calc(var(--left-value) - 45px);top:-60px;display:flex;align-items:center;justify-content:center}.potential__range .range .item .indicator.low{background-color:#f8e2dd}.potential__range .range .item .indicator.low span{color:var(--lowText)}.potential__range .range .item .indicator.low:after{border-top:8px solid #f8e2dd}.potential__range .range .item .indicator.medium{background-color:#fff7e3}.potential__range .range .item .indicator.medium span{color:var(--mediumText)}.potential__range .range .item .indicator.medium:after{border-top:8px solid #fff7e3}.potential__range .range .item .indicator.high{background-color:#e3f5ea}.potential__range .range .item .indicator.high span{color:var(--highText)}.potential__range .range .item .indicator.high:after{border-top:8px solid #e3f5ea}.potential__range .range .item .indicator span{font-size:1.3rem;font-family:Poppins,Arial,Helvetica,sans-serif;font-weight:700}.potential__range .range .item .indicator:before{content:\"\";width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid white;position:absolute;left:50%;top:50%;transform:translate(-50%,140%)}.potential__range .range .item .indicator:after{content:\"\";width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid white;position:absolute;left:50%;top:50%;transform:translate(-50%,140%)}.potential__range .range .item:not(:last-child){margin-right:.2rem}.potential__range .range .item.filled{position:relative}.potential__range .range .item.filled.current:before{content:\"\";height:32px;width:32px;border-radius:50%;border:3px solid white;box-shadow:0 2px 4px #00000038;background-color:#0a7a30;position:absolute;top:50%;left:calc(var(--left-value) - 19px);transform:translateY(-50%);z-index:1}.potential__range .range .item.filled.current:after{content:\"\";width:16px;height:16px;border-radius:50%;background-color:#fff;position:absolute;top:50%;left:calc(var(--left-value) - 8.25px);transform:translateY(-50%);z-index:2}.potential__range .range .item.filled:nth-child(1){background:linear-gradient(90deg,#f14913 var(--block-1),rgba(200,207,213,.5) var(--white-block-1))}.potential__range .range .item.filled:nth-child(1).current:before{background:#f14913}.potential__range .range .item.filled:nth-child(2){background:linear-gradient(90deg,#f17613 var(--block-2),rgba(200,207,213,.5) var(--white-block-2))}.potential__range .range .item.filled:nth-child(2).current:before{background:#f17613}.potential__range .range .item.filled:nth-child(3){background:linear-gradient(90deg,#f19e13 var(--block-3),rgba(200,207,213,.5) var(--white-block-3))}.potential__range .range .item.filled:nth-child(3).current:before{background:#f19e13}.potential__range .range .item.filled:nth-child(4){background:linear-gradient(90deg,#f1b113 var(--block-4),rgba(200,207,213,.5) var(--white-block-4))}.potential__range .range .item.filled:nth-child(4).current:before{background:#f1b113}.potential__range .range .item.filled:nth-child(5){background:linear-gradient(90deg,#f1de13 var(--block-5),rgba(200,207,213,.5) var(--white-block-5))}.potential__range .range .item.filled:nth-child(5).current:before{background:#f1de13}.potential__range .range .item.filled:nth-child(6){background:linear-gradient(90deg,#ccd948 var(--block-6),rgba(200,207,213,.5) var(--white-block-6))}.potential__range .range .item.filled:nth-child(6).current:before{background:#ccd948}.potential__range .range .item.filled:nth-child(7){background:linear-gradient(90deg,#a7b429 var(--block-7),rgba(200,213,200,.5) var(--white-block-7))}.potential__range .range .item.filled:nth-child(7).current:before{background:#a7b429}.potential__range .range .item.filled:nth-child(8){background:linear-gradient(90deg,#53cc7c var(--block-8),rgba(200,207,213,.5) var(--white-block-8))}.potential__range .range .item.filled:nth-child(8).current:before{background:#53cc7c}.potential__range .range .item.filled:nth-child(9){background:linear-gradient(90deg,#43c770 var(--block-9),rgba(200,207,213,.5) var(--white-block-9))}.potential__range .range .item.filled:nth-child(9).current:before{background:#43c770}.potential__range .range .item.filled:nth-child(10){background:#0a7a30;background:linear-gradient(90deg,#0a7a30 var(--block-10),rgba(200,207,213,.5) var(--white-block-10))}.potential__range .range .item.filled:nth-child(10) .indicator{right:-30px}.potential__range .range .item.empty.current:before{content:\"\";height:32px;width:32px;border-radius:50%;border:3px solid white;box-shadow:0 2px 4px #00000038;background-color:#0a7a30;position:absolute;top:50%;left:-10px;transform:translateY(-50%);z-index:1}.potential__range .range .item.empty.current:after{content:\"\";width:16px;height:16px;border-radius:50%;background-color:#fff;position:absolute;top:50%;left:1px;transform:translateY(-50%);z-index:2}.potential__range .range .item.empty .indicator{left:-15px}.potential__range .range .item:nth-child(10) svg{position:absolute;right:-24px;top:50%;transform:translateY(-50%)}.progress{height:7px;margin-bottom:-8px;background-image:linear-gradient(90deg,red,#fff200,#0f0);background-size:100% 100%,100% 100%;background-repeat:no-repeat}.progress_1{height:9px;width:103%;margin-bottom:-8px;background-image:linear-gradient(#fff,#ccc);background-size:var(--p, 50%) 100%,100% 100%;transform:rotate(180deg);z-index:100;background-repeat:no-repeat}.display_{margin:3rem 10rem;padding:1.6rem 0}\n"] }]
}], ctorParameters: () => [], propDecorators: { type: [{
type: Input
}], lowTextColor: [{
type: Input
}], mediumTextColor: [{
type: Input
}], highTextColor: [{
type: Input
}], progressBarWidth: [{
type: Input
}], barCount: [{
type: Input
}], value: [{
type: Input
}], quartileValueLow: [{
type: Input
}], quartileValueHigh: [{
type: Input
}], showToolTip: [{
type: Input
}], secondValue: [{
type: Input
}], divView: [{
type: ViewChild,
args: ['myDiv']
}] } });
class AngularGradientProgressbarModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AngularGradientProgressbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: AngularGradientProgressbarModule, declarations: [AngularGradientProgressbarComponent], imports: [CommonModule], exports: [AngularGradientProgressbarComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AngularGradientProgressbarModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AngularGradientProgressbarModule, decorators: [{
type: NgModule,
args: [{
declarations: [AngularGradientProgressbarComponent],
imports: [CommonModule],
exports: [AngularGradientProgressbarComponent],
}]
}] });
/*
* Public API Surface of angular-gradient-progressbar
*/
/**
* Generated bundle index. Do not edit.
*/
export { AngularGradientProgressbarComponent, AngularGradientProgressbarModule };
//# sourceMappingURL=angular-gradient-progressbar.mjs.map