From 2b44706214fb680fb4d2efcff6be5a8a49e4ed8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Mon, 19 Oct 2020 18:44:59 +0300
Subject: [PATCH] Fix doughnut bug

---
 .../simple-doughnut-chart.component.html      |  4 ++--
 .../simple-doughnut-chart.component.ts        | 20 +++++++++----------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
index e38588243..16d61fd75 100644
--- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
+++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
@@ -6,8 +6,8 @@
               attr.r="{{radius}}"
               [class]="value.color"
               attr.stroke-width="{{strokeWidth}}"
-              attr.stroke-dasharray="{{adjustedCircumference}}"
-              attr.stroke-dashoffset="{{calculateStrokeDashOffset(value.value, circumference)}}"
+              attr.stroke-dasharray="{{circumference}}"
+              attr.stroke-dashoffset="{{calculateStrokeDashOffset(value.value)}}"
               fill="transparent"
               attr.transform="{{returnCircleTransformValue(i)}}" />
     </g>
diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
index 021851e5e..c6fe21fb8 100644
--- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
+++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
@@ -16,7 +16,6 @@ export class SimpleDoughnutChartComponent implements OnChanges {
 
   @Input() subtitle: string;
   @Input() config: DoughnutChartConfig[] = [];
-  @Input() angleOffset = -90;
   @Input() radius = 85;
   @Input() strokeWidth = 20;
   @Input() direction: 'row' | 'column' = 'column';
@@ -37,10 +36,6 @@ export class SimpleDoughnutChartComponent implements OnChanges {
     this.size = this.strokeWidth+(this.radius * 2) ;
   }
 
-  get adjustedCircumference() {
-    return this.circumference;
-  };
-
   get circumference() {
     return 2 * Math.PI * this.radius;
   };
@@ -50,18 +45,21 @@ export class SimpleDoughnutChartComponent implements OnChanges {
   };
 
   calculateChartData() {
+    const newData = [];
+    let angleOffset = -90;
     this.config.forEach((dataVal) => {
       const data = {
-        degrees: this.angleOffset,
+        degrees: angleOffset,
       }
-      this.chartData.push(data)
-      this.angleOffset = this.dataPercentage(dataVal.value) * 360 + this.angleOffset;
+      newData.push(data)
+      angleOffset = this.dataPercentage(dataVal.value) * 360 + angleOffset;
     })
+    this.chartData = newData;
   }
 
-  calculateStrokeDashOffset(dataVal, circumference) {
-    const strokeDiff = this.dataPercentage(dataVal) * circumference
-    return circumference - strokeDiff;
+  calculateStrokeDashOffset(dataVal) {
+    const strokeDiff = this.dataPercentage(dataVal) * this.circumference
+    return this.circumference - strokeDiff;
   }
 
   dataPercentage(dataVal) {