fix(gauge): y origin can be equal to radius (#486)

* fix(gauge): y origin can be equal to radius

* using arc length as approximation for extra padding

* pretty changes

* fix tests

Author: skjindal93

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

@@ -46,17 +46,17 @@ describe('Gauge component', () => {
     spectator.component.onLayoutChange();
     expect(spectator.component.rendererData).toEqual({
       backgroundArc:
-        'M-139.64240043768942,-2.3092638912203256e-14A10,10,0,0,1,-149.61685761181008,-10.714285714285738A150,150,0,0,1,149.61685761181008,-10.714285714285714A10,10,0,0,1,139.64240043768942,0L139.64240043768942,0A10,10,0,0,1,129.66794326356876,-9.285714285714285A130,130,0,0,0,-129.66794326356873,-9.2857142857143A10,10,0,0,1,-139.64240043768942,-2.3092638912203256e-14Z',
+        'M-137.45365478341216,36.83059579592157A7.5,7.5,0,0,1,-146.73136591755903,31.143317998687955A150,150,0,1,1,146.73136591755903,31.143317998687948A7.5,7.5,0,0,1,137.45365478341216,36.83059579592157L137.45365478341216,36.83059579592157A7.5,7.5,0,0,1,132.05822932580313,28.02898619881916A135,135,0,1,0,-132.05822932580313,28.02898619881914A7.5,7.5,0,0,1,-137.45365478341216,36.83059579592157Z',
       origin: {
         x: 150,
-        y: 170
+        y: 150
       },
       radius: 150,
       data: {
         value: 80,
         maxValue: 100,
         valueArc:
-          'M-139.64240043768942,-2.3092638912203256e-14A10,10,0,0,1,-149.61685761181008,-10.714285714285738A150,150,0,0,1,114.74488132122605,-96.61062162401063A10,10,0,0,1,112.97307508940239,-82.07974357199379L112.97307508940239,-82.07974357199379A10,10,0,0,1,99.44556381172924,-83.72920540747589A130,130,0,0,0,-129.66794326356873,-9.2857142857143A10,10,0,0,1,-139.64240043768942,-2.3092638912203256e-14Z',
+          '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',
         threshold: {
           color: '#9e4c41',
           end: 90,

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

@@ -24,10 +24,10 @@ import { Arc, arc, DefaultArcObject } from 'd3-shape';
               [attr.d]="rendererData.data.valueArc"
               [attr.fill]="rendererData.data.threshold.color"
             />
-            <text x="0" y="0" class="value-display" [attr.fill]="rendererData.data.threshold.color">
+            <text x="0" y="-4" class="value-display" [attr.fill]="rendererData.data.threshold.color">
               {{ rendererData.data.value }}
             </text>
-            <text x="0" y="24" class="label-display">{{ rendererData.data.threshold.label }}</text>
+            <text x="0" y="20" class="label-display">{{ rendererData.data.threshold.label }}</text>
           </g>
         </g>
       </svg>
@@ -37,10 +37,10 @@ import { Arc, arc, DefaultArcObject } from 'd3-shape';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class GaugeComponent implements OnChanges {
-  private static readonly GAUGE_RING_WIDTH: number = 20;
+  private static readonly GAUGE_RING_WIDTH: number = 15;
   private static readonly GAUGE_ARC_CORNER_RADIUS: number = 10;
-  private static readonly GAUGE_AXIS_PADDING: number = 30;
   private static readonly GAUGE_MIN_RADIUS_TO_SHOW_PATH: number = 80;
+  private static readonly EXTRA_ARC_ANGLE: number = Math.PI / 12;
 
   @Input()
   public value?: number;
@@ -76,7 +76,7 @@ export class GaugeComponent implements OnChanges {
     const radius = this.buildRadius(boundingBox);
 
     return {
-      origin: this.buildOrigin(boundingBox),
+      origin: this.buildOrigin(boundingBox.width, radius),
       radius: radius,
       backgroundArc: this.buildBackgroundArc(radius),
       data: this.buildGaugeData(radius, inputData)
@@ -87,8 +87,8 @@ export class GaugeComponent implements OnChanges {
     return this.buildArcGenerator()({
       innerRadius: radius - GaugeComponent.GAUGE_RING_WIDTH,
       outerRadius: radius,
-      startAngle: -Math.PI / 2,
-      endAngle: Math.PI / 2
+      startAngle: -Math.PI / 2 - GaugeComponent.EXTRA_ARC_ANGLE,
+      endAngle: Math.PI / 2 + GaugeComponent.EXTRA_ARC_ANGLE
     })!;
   }
 
@@ -107,8 +107,8 @@ export class GaugeComponent implements OnChanges {
     return this.buildArcGenerator()({
       innerRadius: radius - GaugeComponent.GAUGE_RING_WIDTH,
       outerRadius: radius,
-      startAngle: -Math.PI / 2,
-      endAngle: -Math.PI / 2 + (inputData.value / inputData.maxValue) * Math.PI
+      startAngle: -Math.PI / 2 - GaugeComponent.EXTRA_ARC_ANGLE,
+      endAngle: -Math.PI / 2 - GaugeComponent.EXTRA_ARC_ANGLE + (inputData.value / inputData.maxValue) * Math.PI
     })!;
   }
 
@@ -117,13 +117,32 @@ export class GaugeComponent implements OnChanges {
   }
 
   private buildRadius(boundingBox: ClientRect): number {
-    return Math.min(boundingBox.height - GaugeComponent.GAUGE_AXIS_PADDING, boundingBox.width / 2);
+    const width = boundingBox.width;
+    const height = boundingBox.height;
+
+    if (height > width / 2) {
+      /**
+       * Since height > width > 2, radius can be treated as (width / 2), but only for semi-circles
+       *
+       * If there is an extra angle added to the semicircle,
+       * radius + extra arc length can over shoots the height
+       *
+       * If radius + extra arc length over shoots the height, then radius
+       * needs to be calculated using the provided height, instead of width / 2
+       */
+      const radius = width / 2;
+      const extraArcHeight = this.calculateExtraArcLength(radius);
+
+      return extraArcHeight + radius <= height ? radius : this.calculateRadius(height);
+    }
+
+    return this.calculateRadius(height);
   }
 
-  private buildOrigin(boundingBox: ClientRect): Point {
+  private buildOrigin(width: number, radius: number): Point {
     return {
-      x: boundingBox.width / 2,
-      y: boundingBox.height - GaugeComponent.GAUGE_AXIS_PADDING
+      x: width / 2,
+      y: radius
     };
   }
 
@@ -142,6 +161,24 @@ export class GaugeComponent implements OnChanges {
       }
     }
   }
+
+  private calculateExtraArcLength(radius: number): number {
+    return radius * GaugeComponent.EXTRA_ARC_ANGLE;
+  }
+
+  /**
+   * We want to fit gauge within a specified height
+   * Approximating arc length, as the extra height required
+   * to render the EXTRA_ARC_ANGLE in the gauge
+   *
+   * height = radius + arc length
+   * height = radius + radius * EXTRA_ARC_ANGLE
+   * radius = height / (1 + EXTRA_ARC_ANGLE)
+   */
+
+  private calculateRadius(height: number): number {
+    return height / (1 + GaugeComponent.EXTRA_ARC_ANGLE);
+  }
 }
 
 export interface GaugeThreshold {