fix(gauge): value arc angle computation (#494)

* fix(gauge): value arc angle computation

* default angle arc for value 0 in gauge

* chore(gauge): change the default arc to 0.02

* revert the nub computation on 0 arc angle

* fix: prettier

Co-authored-by: Anand Tiwary <[email protected]>

Author: skjindal93

projects/observability/src/shared/components/gauge/gauge.component.test.ts

@@ -56,7 +56,7 @@ describe('Gauge component', () => {
         value: 80,
         maxValue: 100,
         valueArc:
-          'M-137.45365478341216,36.83059579592157A7.5,7.5,0,0,1,-146.73136591755903,31.143317998687955A150,150,0,0,1,88.13185990085536,-121.37864421065183A7.5,7.5,0,0,1,89.55386161673987,-110.58980906724544L89.55386161673987,-110.58980906724544A7.5,7.5,0,0,1,79.31867391076982,-109.24077978958663A135,135,0,0,0,-132.05822932580313,28.02898619881914A7.5,7.5,0,0,1,-137.45365478341216,36.83059579592157Z',
+          'M-137.45365478341216,36.83059579592157A7.5,7.5,0,0,1,-146.73136591755903,31.143317998687955A150,150,0,0,1,129.88160257335298,-75.03845222935763A7.5,7.5,0,0,1,126.79245119273195,-64.60398068647702L126.79245119273195,-64.60398068647702A7.5,7.5,0,0,1,116.8934423160177,-67.5346070064219A135,135,0,0,0,-132.05822932580313,28.02898619881914A7.5,7.5,0,0,1,-137.45365478341216,36.83059579592157Z',
         threshold: {
           color: '#9e4c41',
           end: 90,

projects/observability/src/shared/components/gauge/gauge.component.ts

@@ -104,11 +104,13 @@ export class GaugeComponent implements OnChanges {
   }
 
   private buildValueArc(radius: number, inputData: GaugeInputData): string {
+    const startAngle = -(Math.PI / 2 + GaugeComponent.EXTRA_ARC_ANGLE);
+
     return this.buildArcGenerator()({
       innerRadius: radius - GaugeComponent.GAUGE_RING_WIDTH,
       outerRadius: radius,
-      startAngle: -Math.PI / 2 - GaugeComponent.EXTRA_ARC_ANGLE,
-      endAngle: -Math.PI / 2 - GaugeComponent.EXTRA_ARC_ANGLE + (inputData.value / inputData.maxValue) * Math.PI
+      startAngle: startAngle,
+      endAngle: startAngle + 2 * (inputData.value / inputData.maxValue) * -startAngle
     })!;
   }