From a61016dc7f6ac7a1a897d47f065ce1011e3b8f58 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Wed, 1 Sep 2021 20:07:28 -0300
Subject: [PATCH] feat: adding donut's alignment

---
 .../shared/components/donut/donut.component.scss   | 13 ++++++++++++-
 .../src/shared/components/donut/donut.component.ts | 14 ++++++++++++--
 .../src/shared/components/donut/donut.module.ts    |  3 ++-
 .../src/shared/components/donut/donut.ts           |  6 ++++++
 4 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/projects/observability/src/shared/components/donut/donut.component.scss b/projects/observability/src/shared/components/donut/donut.component.scss
index 559538db8..350ba36f6 100644
--- a/projects/observability/src/shared/components/donut/donut.component.scss
+++ b/projects/observability/src/shared/components/donut/donut.component.scss
@@ -5,7 +5,18 @@
   position: relative;
   display: flex;
   align-items: center;
-  justify-content: center;
+
+  &.center-alignment {
+    justify-content: center;
+  }
+
+  &.left-alignment {
+    justify-content: flex-start;
+  }
+
+  &.right-alignment {
+    justify-content: flex-end;
+  }
 
   .donut-svg {
     .donut-value-title {
diff --git a/projects/observability/src/shared/components/donut/donut.component.ts b/projects/observability/src/shared/components/donut/donut.component.ts
index d27759523..32af2e6d3 100644
--- a/projects/observability/src/shared/components/donut/donut.component.ts
+++ b/projects/observability/src/shared/components/donut/donut.component.ts
@@ -11,14 +11,21 @@ import {
 } from '@angular/core';
 import { LegendPosition } from '../legend/legend.component';
 import { TooltipOption } from '../utils/d3/d3-visualization-builder.service';
-import { Donut, DonutCenter, DonutSeries } from './donut';
+import { Donut, DonutAlignmentStyle, DonutCenter, DonutSeries } from './donut';
 import { DonutBuilderService } from './donut-builder.service';
 
 @Component({
   selector: 'ht-donut',
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['../utils/d3/d3-visualization.scss', './donut.component.scss'],
-  template: ` <div class="fill-container donut-container" (htLayoutChange)="this.reflow()" #donutContainer></div> `
+  template: `
+    <div
+      class="fill-container donut-container"
+      (htLayoutChange)="this.reflow()"
+      [ngClass]="alignment"
+      #donutContainer
+    ></div>
+  `
 })
 export class DonutComponent implements OnChanges, OnDestroy, AfterViewInit {
   @Input()
@@ -36,6 +43,9 @@ export class DonutComponent implements OnChanges, OnDestroy, AfterViewInit {
   @Input()
   public displayLegendCounts: boolean = true;
 
+  @Input()
+  public alignment: string = DonutAlignmentStyle.Center;
+
   @ViewChild('donutContainer', { static: true })
   private readonly donutContainer!: ElementRef;
 
diff --git a/projects/observability/src/shared/components/donut/donut.module.ts b/projects/observability/src/shared/components/donut/donut.module.ts
index 2e6e6a689..8081a22c3 100644
--- a/projects/observability/src/shared/components/donut/donut.module.ts
+++ b/projects/observability/src/shared/components/donut/donut.module.ts
@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { LayoutChangeModule } from '@hypertrace/components';
 import { LegendModule } from '../legend/legend.module';
@@ -7,6 +8,6 @@ import { DonutComponent } from './donut.component';
 @NgModule({
   declarations: [DonutComponent],
   exports: [DonutComponent],
-  imports: [LayoutChangeModule, LegendModule, ChartTooltipModule]
+  imports: [CommonModule, LayoutChangeModule, LegendModule, ChartTooltipModule]
 })
 export class DonutModule {}
diff --git a/projects/observability/src/shared/components/donut/donut.ts b/projects/observability/src/shared/components/donut/donut.ts
index bf008fb04..cb85471e2 100644
--- a/projects/observability/src/shared/components/donut/donut.ts
+++ b/projects/observability/src/shared/components/donut/donut.ts
@@ -34,3 +34,9 @@ export interface DonutResults {
   series: DonutSeries[];
   center?: DonutCenter;
 }
+
+export const enum DonutAlignmentStyle {
+  Left = 'left-alignment',
+  Center = 'center-alignment',
+  Right = 'right-alignment'
+}