Fix order of operations

docs/changelog.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 21.1.0
+
+- Feature: Add Percent Gauge chart type
+
 ## 20.5.0
 
 - Feature: Add Sankey diagram chart type

package.json

@@ -21,6 +21,7 @@
     "package": "run-s build:lib:prod copy-files",
     "prepublish:lib": "npm run package",
     "publish:lib": "npm publish ./dist/swimlane/ngx-charts",
+    "publish:lib:beta": "npm publish ./dist/swimlane/ngx-charts --tag beta",
     "prepack": "npm run package",
     "pack": "npm pack ./dist/swimlane/ngx-charts",
     "prettier": "prettier --write \"{src,projects}/**/*.{js,ts,html,scss,css,md,json}\"",

projects/swimlane/ngx-charts/ng-package.json

@@ -4,5 +4,5 @@
   "lib": {
     "entryFile": "src/public-api.ts"
   },
-  "allowedNonPeerDependencies": ["d3"]
+  "allowedNonPeerDependencies": ["d3", "gradient-path"]
 }

projects/swimlane/ngx-charts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swimlane/ngx-charts",
-  "version": "21.0.0-beta.0",
+  "version": "21.1.0-beta.2",
   "description": "Declarative Charting Framework for Angular",
   "repository": {
     "type": "git",
@@ -53,6 +53,7 @@
     "d3-shape": "^3.2.0",
     "d3-time-format": "^4.1.0",
     "d3-transition": "^3.0.1",
+    "gradient-path": "^2.3.0",
     "tslib": "^2.3.1"
   },
   "devDependencies": {

projects/swimlane/ngx-charts/src/lib/gauge/percent-gauge/percent-gauge.component.ts

@@ -5,7 +5,11 @@ import {
   ViewEncapsulation,
   ChangeDetectionStrategy,
   ElementRef,
-  ViewChild
+  ViewChild,
+  PLATFORM_ID,
+  NgZone,
+  ChangeDetectorRef,
+  Inject
 } from '@angular/core';
 import { GradientPath } from 'gradient-path';
 
@@ -18,8 +22,8 @@ import { ScaleType } from '../../common/types/scale-type.enum';
 @Component({
   selector: 'ngx-charts-percent-gauge',
   template: `
-    <ngx-charts-chart [view]="[width, height]" [showLegend]="false" [animations]="animations" (click)="onClick()">
-      <svg:g class="percent-gauge chart">
+    <ngx-charts-chart [view]="[width, height]" [showLegend]="false" [animations]="animations">
+      <svg:g class="percent-gauge chart" (click)="onClick()">
         <svg:g [attr.transform]="transform">
           <mask id="circleMask">
             <circle
@@ -156,8 +160,11 @@ export class PercentGaugeComponent extends BaseChartComponent {
       margins: this.margin
     });
 
+    this.percent = this.getPercentage();
     this.ticHeight = Math.min(this.dims.width, this.dims.height) / 10;
     this.radius = Math.min(this.dims.width, this.dims.height) / 2 - this.ticHeight / 2;
+    this.circumference = 2 * Math.PI * this.radius;
+    this.dashes = `${this.radius / 60} ${this.circumference / 60 - this.radius / 60}`;
     this.valueFontSize = Math.floor(this.radius / 3);
     this.targetRadius = this.radius / 4;
     this.targetTextTransform = `translate(${-this.targetRadius / 2}, ${-this.targetRadius / 2}), scale(${
@@ -183,16 +190,15 @@ export class PercentGaugeComponent extends BaseChartComponent {
 
     this.generateticks();
 
-    this.circumference = 2 * Math.PI * this.radius;
-    this.percent = this.getPercentage();
-
-    this.dashes = `${this.radius / 60} ${this.circumference / 60 - this.radius / 60}`;
-    this.cd.detectChanges();
+    this.cd.markForCheck();
   }
 
   generateticks() {
     if (this.circleElement?.nativeElement) {
       const clonedCircle = this.circleElement.nativeElement.cloneNode(true);
+      clonedCircle.setAttribute('stroke-width', this.radius / 5);
+      clonedCircle.setAttribute('r', this.radius);
+
       this.circleElement.nativeElement.parentElement.appendChild(clonedCircle);
 
       const gp = new GradientPath({