diff --git a/README.md b/README.md
index 927501c5..878d5cef 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,9 @@ If you're using SystemJS as your module loader, there is also a UMD bundle at `.
| `max` | The progress' maximum value. | Yes | `undefined` | `number` |
| `radius` | Radius of the circle. | No | `125` | `number` |
| `color` | The color of the `current` value on the circle. | No | `#45ccce` | `string` |
+| `gradStartColor` | The start color of the linear gradient on the circle line. | No | `undefined` | `string` |
+| `gradEndColor` | The end color of the linear gradient on the circle line. | No | `undefined` | `string` |
+| `gradDirection` | The direction of the linear gradient on the circle line. | No | `left` | `string` ["top", "right", "bottom", "left"] |
| `background` | Color of the circle's background. | No | `#eaeaea` | `string` |
| `stroke` | Specifies the circle's thickness. | No | `15` | `number` |
| `semicircle` | Whether the progressbar should be a full circle or a semicircle. | No | `false` | `boolean` |
@@ -55,7 +58,9 @@ If you're using SystemJS as your module loader, there is also a UMD bundle at `.
Sample progressbar
[rounded]="rounded"
[responsive]="responsive"
[clockwise]="clockwise"
- [color]="gradient ? 'url(#gradient)' : color"
+ [color]="'blue'"
[background]="background"
[duration]="duration"
[animation]="animation"
- [animationDelay]="animationDelay">
+ [animationDelay]="animationDelay"
+ [endMarker]="true">
diff --git a/package.json b/package.json
index 07ea4681..83a6e920 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "angular-svg-round-progressbar",
- "version": "2.0.0",
+ "version": "2.1.0",
"description": "Angular module that uses SVG to create a circular progressbar",
"scripts": {},
"repository": {
diff --git a/src/round-progress.component.ts b/src/round-progress.component.ts
index cc6a3502..de44afe1 100644
--- a/src/round-progress.component.ts
+++ b/src/round-progress.component.ts
@@ -14,25 +14,53 @@ import {RoundProgressService} from './round-progress.service';
import {ROUND_PROGRESS_DEFAULTS, RoundProgressDefaults} from './round-progress.config';
import {RoundProgressEase} from './round-progress.ease';
+const GRAD_STROKE = "gradFill";
+const DIRECTIONS = ["top", "right", "bottom", "left"];
+const X1_POS = [0, 0, 0, 100];
+const X2_POS = [0, 100, 0, 0];
+const Y1_POS = [100, 0, 0, 0];
+const Y2_POS = [0, 0, 100, 0];
+
+
@Component({
selector: 'round-progress',
template: `
`,
host: {
@@ -145,6 +173,48 @@ export class RoundProgressComponent implements OnChanges {
return this._service.resolveColor(color);
}
+ /** Resolves the color or the linear gradient for the progress stroke */
+ resolveStroke(){
+ return !this._useGrad ? this.resolveColor(this.color) : `url(#${GRAD_STROKE})`;
+ }
+
+ resolveDotColor(){
+ return !this._useGrad ? this.resolveColor(this.color) : this.gradEndColor;
+ }
+
+ resolveDotX(){
+ const allCoords = this._service.getArc(this.current,
+ this.max, this.radius - this.stroke / 2, this.radius, this.semicircle);
+ const pathElements = allCoords.split(" ");
+ return pathElements[1];
+ }
+
+ resolveDotY(){
+ const allCoords = this._service.getArc(this.current,
+ this.max, this.radius - this.stroke / 2, this.radius, this.semicircle);
+ const pathElements = allCoords.split(" ");
+ return pathElements[2];
+ }
+
+ /** Resolves linear gradient direction */
+ resolveGradCorner(corner): string{
+ if (!this._useGrad) return "0%";
+ let index = DIRECTIONS.indexOf(this.gradDirection);
+ if (index < 0) index = DIRECTIONS.indexOf(this._defaults.gradDirection);
+ let perc = 0;
+ switch (corner){
+ case 'x1':
+ perc = X1_POS[index]; break;
+ case 'x2':
+ perc = X2_POS[index]; break;
+ case 'y1':
+ perc = Y1_POS[index]; break;
+ case 'y2':
+ perc = Y2_POS[index]; break;
+ }
+ return perc+"%";
+ }
+
/** Change detection callback. */
ngOnChanges(changes): void {
if (changes.current) {
@@ -179,6 +249,11 @@ export class RoundProgressComponent implements OnChanges {
}
}
+ get _useGrad():boolean {
+ return this.gradStartColor!==undefined && this.gradEndColor!==undefined;
+ }
+
+
@ViewChild('path') _path;
@Input() current: number;
@Input() max: number;
@@ -188,10 +263,14 @@ export class RoundProgressComponent implements OnChanges {
@Input() duration: number = this._defaults.duration;
@Input() stroke: number = this._defaults.stroke;
@Input() color: string = this._defaults.color;
+ @Input() gradStartColor: string;
+ @Input() gradEndColor: string;
+ @Input() gradDirection: string = this._defaults.gradDirection;
@Input() background: string = this._defaults.background;
@Input() responsive: boolean = this._defaults.responsive;
@Input() clockwise: boolean = this._defaults.clockwise;
@Input() semicircle: boolean = this._defaults.semicircle;
@Input() rounded: boolean = this._defaults.rounded;
+ @Input() endMarker: boolean = this._defaults.endMarker;
@Output() onRender: EventEmitter = new EventEmitter();
}
diff --git a/src/round-progress.config.ts b/src/round-progress.config.ts
index d3fb6875..0c6dc8d2 100644
--- a/src/round-progress.config.ts
+++ b/src/round-progress.config.ts
@@ -12,11 +12,13 @@ export const ROUND_PROGRESS_DEFAULTS_PROVIDER: Provider = {
duration: 500,
stroke: 15,
color: '#45CCCE',
+ gradDirection: 'left',
background: '#EAEAEA',
responsive: false,
clockwise: true,
semicircle: false,
- rounded: false
+ rounded: false,
+ endMarker: false
}
};
@@ -27,9 +29,11 @@ export interface RoundProgressDefaults {
duration?: number;
stroke?: number;
color?: string;
+ gradDirection?:string;
background?: string;
responsive?: boolean;
clockwise?: boolean;
semicircle?: boolean;
rounded?: boolean;
+ endMarker?: boolean;
}
diff --git a/src/round-progress.service.ts b/src/round-progress.service.ts
index b7a75a96..cc2f97ac 100644
--- a/src/round-progress.service.ts
+++ b/src/round-progress.service.ts
@@ -66,6 +66,10 @@ export class RoundProgressService {
return `M ${start} A ${pathRadius} ${pathRadius} 0 ${arcSweep} 0 ${end}`;
};
+ getDotCoords(){
+
+ }
+
/**
* Converts polar cooradinates to Cartesian.
* @param elementRadius Radius of the wrapper element.