From 7fdb1cc81bed11b30694cded205b05914383958f Mon Sep 17 00:00:00 2001
From: Nicolas Mariano Obregon <nmobregon@thinkup.com.ar>
Date: Fri, 8 Feb 2019 14:07:57 -0300
Subject: [PATCH 1/6] Linear Gradient Support for the progress circle

---
 README.md                       |  7 +++-
 demo/demo.html                  |  2 ++
 src/round-progress.component.ts | 57 ++++++++++++++++++++++++++++++---
 src/round-progress.config.ts    |  4 +++
 4 files changed, 64 insertions(+), 6 deletions(-)

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 `.
 <round-progress
     [current]="current"
     [max]="max"
-    [color]="'#45ccce'"
+    [gradStartColor]="'#45ccce'"
+    [gradEndColor]="'#ff5900'"
+    [gradDirection]="'right'"
     [background]="'#eaeaea'"
     [radius]="125"
     [stroke]="20"
diff --git a/demo/demo.html b/demo/demo.html
index 9ed54fc8..dc6d196b 100644
--- a/demo/demo.html
+++ b/demo/demo.html
@@ -18,6 +18,8 @@ <h2>Sample progressbar</h2>
       [responsive]="responsive"
       [clockwise]="clockwise"
       [color]="gradient ? 'url(#gradient)' : color"
+      gradStartColor="#7573ab"
+      gradDirection="right"
       [background]="background"
       [duration]="duration"
       [animation]="animation"
diff --git a/src/round-progress.component.ts b/src/round-progress.component.ts
index cc6a3502..f1ec2c1c 100644
--- a/src/round-progress.component.ts
+++ b/src/round-progress.component.ts
@@ -14,10 +14,30 @@ 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: `
     <svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="_viewBox">
+      <defs>
+        <linearGradient 
+          id="${GRAD_STROKE}" 
+          [attr.x1]="resolveGradCorner('x1')"
+          [attr.x2]="resolveGradCorner('x2')"
+          [attr.y1]="resolveGradCorner('y1')"
+          [attr.y2]="resolveGradCorner('y2')"
+          >
+          <stop offset="0%" [style.stop-color]="gradStartColor" style="stop-opacity:1" />
+          <stop offset="100%" [style.stop-color]="gradEndColor" style="stop-opacity:1" />
+        </linearGradient>
+      </defs>
       <circle
         fill="none"
         [attr.cx]="radius"
@@ -30,9 +50,9 @@ import {RoundProgressEase} from './round-progress.ease';
         #path
         fill="none"
         [style.stroke-width]="stroke"
-        [style.stroke]="resolveColor(color)"
         [style.stroke-linecap]="rounded ? 'round' : ''"
-        [attr.transform]="getPathTransform()"/>
+        [attr.transform]="getPathTransform()"
+        [attr.stroke]="resolveStroke()"/>
     </svg>
   `,
   host: {
@@ -140,9 +160,28 @@ export class RoundProgressComponent implements OnChanges {
     }
   }
 
-  /** Resolves a color through the service. */
-  resolveColor(color: string): string {
-    return this._service.resolveColor(color);
+  /** Resolves the color or the linear gradient for the fill  */
+  resolveStroke(){
+    return !this._useGrad ? this._service.resolveColor(this.color) : `url(#${GRAD_STROKE})`;
+  }
+
+  /** 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. */
@@ -179,6 +218,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,6 +232,9 @@ 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;
diff --git a/src/round-progress.config.ts b/src/round-progress.config.ts
index d3fb6875..4f20ad8f 100644
--- a/src/round-progress.config.ts
+++ b/src/round-progress.config.ts
@@ -12,6 +12,7 @@ export const ROUND_PROGRESS_DEFAULTS_PROVIDER: Provider = {
     duration: 500,
     stroke: 15,
     color: '#45CCCE',
+    gradDirection: 'left',
     background: '#EAEAEA',
     responsive: false,
     clockwise: true,
@@ -27,6 +28,9 @@ export interface RoundProgressDefaults {
   duration?: number;
   stroke?: number;
   color?: string;
+  gradStartColor?: string;
+  gradEndColor?: string;
+  gradDirection?:string;
   background?: string;
   responsive?: boolean;
   clockwise?: boolean;

From 9e0e5c6d2039623fafc9568cc1026644bc61cbf7 Mon Sep 17 00:00:00 2001
From: Nicolas Mariano Obregon <nmobregon@thinkup.com.ar>
Date: Fri, 8 Feb 2019 14:11:44 -0300
Subject: [PATCH 2/6] Method Commment Fix

---
 src/round-progress.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/round-progress.component.ts b/src/round-progress.component.ts
index f1ec2c1c..f3a19254 100644
--- a/src/round-progress.component.ts
+++ b/src/round-progress.component.ts
@@ -160,7 +160,7 @@ export class RoundProgressComponent implements OnChanges {
     }
   }
 
-  /** Resolves the color or the linear gradient for the fill  */
+  /** Resolves the color or the linear gradient for the progress stroke  */
   resolveStroke(){
     return !this._useGrad ? this._service.resolveColor(this.color) : `url(#${GRAD_STROKE})`;
   }

From 2c55561088823328f1688a49d0d08d35be57e507 Mon Sep 17 00:00:00 2001
From: Nicolas Mariano Obregon <nmobregon@thinkup.com.ar>
Date: Fri, 8 Feb 2019 14:13:06 -0300
Subject: [PATCH 3/6] Remove start and end colors from Defaults

---
 src/round-progress.config.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/round-progress.config.ts b/src/round-progress.config.ts
index 4f20ad8f..41cb726d 100644
--- a/src/round-progress.config.ts
+++ b/src/round-progress.config.ts
@@ -28,8 +28,6 @@ export interface RoundProgressDefaults {
   duration?: number;
   stroke?: number;
   color?: string;
-  gradStartColor?: string;
-  gradEndColor?: string;
   gradDirection?:string;
   background?: string;
   responsive?: boolean;

From b322d5183b62f48f6bab9b0cd432226ad685ea9c Mon Sep 17 00:00:00 2001
From: Nicolas Mariano Obregon <nmobregon@thinkup.com.ar>
Date: Fri, 8 Feb 2019 14:25:29 -0300
Subject: [PATCH 4/6] Fixed resolveStroke method to call resolveColor instead
 of service directly

---
 demo/demo.html                  | 7 ++++---
 src/round-progress.component.ts | 7 ++++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/demo/demo.html b/demo/demo.html
index dc6d196b..5627a5a1 100644
--- a/demo/demo.html
+++ b/demo/demo.html
@@ -17,9 +17,10 @@ <h2>Sample progressbar</h2>
       [rounded]="rounded"
       [responsive]="responsive"
       [clockwise]="clockwise"
-      [color]="gradient ? 'url(#gradient)' : color"
-      gradStartColor="#7573ab"
-      gradDirection="right"
+      [color]="color"
+      [gradStartColor]="'#7573ab'"
+      [gradEndColor]="'#aabbcc'"
+      [gradDirection]="'right'"
       [background]="background"
       [duration]="duration"
       [animation]="animation"
diff --git a/src/round-progress.component.ts b/src/round-progress.component.ts
index f3a19254..9fdac340 100644
--- a/src/round-progress.component.ts
+++ b/src/round-progress.component.ts
@@ -160,9 +160,14 @@ export class RoundProgressComponent implements OnChanges {
     }
   }
 
+  /** Resolves a color through the service. */
+  resolveColor(color: string): string {
+    return this._service.resolveColor(color);
+  }
+
   /** Resolves the color or the linear gradient for the progress stroke  */
   resolveStroke(){
-    return !this._useGrad ? this._service.resolveColor(this.color) : `url(#${GRAD_STROKE})`;
+    return !this._useGrad ? this.resolveColor(this.color) : `url(#${GRAD_STROKE})`;
   }
 
   /** Resolves linear gradient direction */

From fec72b75ca0f60ded3b3a357b97feaee0a9985bf Mon Sep 17 00:00:00 2001
From: Nicolas Mariano Obregon <nmobregon@thinkup.com.ar>
Date: Thu, 13 Jun 2019 17:45:29 -0300
Subject: [PATCH 5/6] added an optional end marker dot

---
 demo/demo.html                  |  8 +++----
 src/round-progress.component.ts | 37 ++++++++++++++++++++++++++++-----
 src/round-progress.config.ts    |  4 +++-
 src/round-progress.service.ts   |  4 ++++
 4 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/demo/demo.html b/demo/demo.html
index 5627a5a1..2fb7ddb0 100644
--- a/demo/demo.html
+++ b/demo/demo.html
@@ -17,14 +17,12 @@ <h2>Sample progressbar</h2>
       [rounded]="rounded"
       [responsive]="responsive"
       [clockwise]="clockwise"
-      [color]="color"
-      [gradStartColor]="'#7573ab'"
-      [gradEndColor]="'#aabbcc'"
-      [gradDirection]="'right'"
+      [color]="'blue'"
       [background]="background"
       [duration]="duration"
       [animation]="animation"
-      [animationDelay]="animationDelay"></round-progress>
+	  [animationDelay]="animationDelay"
+	  [endMarker]="true"></round-progress>
   </div>
 
   <button (click)="increment();">Increment</button>
diff --git a/src/round-progress.component.ts b/src/round-progress.component.ts
index 9fdac340..de44afe1 100644
--- a/src/round-progress.component.ts
+++ b/src/round-progress.component.ts
@@ -34,8 +34,8 @@ const Y2_POS = [0, 0, 100, 0];
           [attr.y1]="resolveGradCorner('y1')"
           [attr.y2]="resolveGradCorner('y2')"
           >
-          <stop offset="0%" [style.stop-color]="gradStartColor" style="stop-opacity:1" />
-          <stop offset="100%" [style.stop-color]="gradEndColor" style="stop-opacity:1" />
+          <stop offset="0%" [attr.stop-color]="gradStartColor" stop-opacity=".75" />
+          <stop offset="100%" [attr.stop-color]="gradEndColor" stop-opacity=".75" />
         </linearGradient>
       </defs>
       <circle
@@ -44,15 +44,23 @@ const Y2_POS = [0, 0, 100, 0];
         [attr.cy]="radius"
         [attr.r]="radius - stroke / 2"
         [style.stroke]="resolveColor(background)"
-        [style.stroke-width]="stroke"/>
-
+		[style.stroke-width]="stroke"/>
+		
       <path
         #path
         fill="none"
         [style.stroke-width]="stroke"
         [style.stroke-linecap]="rounded ? 'round' : ''"
         [attr.transform]="getPathTransform()"
-        [attr.stroke]="resolveStroke()"/>
+		[attr.stroke]="resolveStroke()"/>
+		
+		<circle 
+			*ngIf="endMarker"
+			[attr.fill]="resolveDotColor()" 
+			[attr.cx]="resolveDotX()" 
+			[attr.cy]="resolveDotY()" 
+			[attr.r]="stroke*0.8" 
+			style="stroke-width: 0;"></circle>
     </svg>
   `,
   host: {
@@ -170,6 +178,24 @@ export class RoundProgressComponent implements OnChanges {
     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%";
@@ -245,5 +271,6 @@ export class RoundProgressComponent implements OnChanges {
   @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<number> = new EventEmitter();
 }
diff --git a/src/round-progress.config.ts b/src/round-progress.config.ts
index 41cb726d..0c6dc8d2 100644
--- a/src/round-progress.config.ts
+++ b/src/round-progress.config.ts
@@ -17,7 +17,8 @@ export const ROUND_PROGRESS_DEFAULTS_PROVIDER: Provider = {
     responsive: false,
     clockwise: true,
     semicircle: false,
-    rounded: false
+	rounded: false,
+	endMarker: false
   }
 };
 
@@ -34,4 +35,5 @@ export interface RoundProgressDefaults {
   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.

From bceeea110c0887d76652fc72fdd16104069d32cb Mon Sep 17 00:00:00 2001
From: Nicolas Mariano Obregon <nmobregon@thinkup.com.ar>
Date: Thu, 13 Jun 2019 17:46:45 -0300
Subject: [PATCH 6/6] new version v2.1.0 with improved tags and endmarker point

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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": {